ags(bar,scripts,i18n): added i18n system(wip), changed some bar stuff and started doing control center

ags/widget/Separator.tsx

@@ -12,15 +12,15 @@ export function Separator(props: SeparatorProps) {
     return new Widget.Box({
         className: `separator separator-${ props.orientation == Gtk.Orientation.VERTICAL ? "vertical" : "horizontal" } ${ props.class && props.class }`,
         css: `.separator {
-            background: ${ props.cssColor ? props.cssColor : "lightgray" };
-            opacity: ${ props.alpha ? props.alpha : 1 };
+            background: ${ props.cssColor || "lightgray" };
+            opacity: ${ props.alpha || 1 };
         }
         .separator-horizontal {
-            padding-right: ${props.size ? props.size : 1 }px;
+            padding-right: ${props.size || 1 }px;
             margin: 7px 4px;
         }
         .separator-vertical {
-            padding-bottom: ${props.size ? props.size : 1 }px;
+            padding-bottom: ${props.size || 1 }px;
             margin: 4px 7px;
         }`,
     } as Widget.BoxProps);

ags/widget/bar/Audio.tsx

@@ -19,7 +19,8 @@ export function Audio() {
                             } as Widget.LabelProps),
                             new Widget.Label({
                                 className: "icon nf",
-                                label: bind(wp!.defaultSpeaker, "volume").as((volume: number) => Math.round(volume * 100).toString() + "%")
+                                label: bind(wp!.defaultSpeaker, "volume").as((volume: number) => 
+                                    Math.round(volume * 100).toString() + "%")
                             } as Widget.LabelProps)
                         ]
                     })
@@ -33,7 +34,8 @@ export function Audio() {
                                 label: "󰍬"
                             } as Widget.LabelProps),
                             new Widget.Label({
-                                label: bind(wp!.defaultMicrophone, "volume").as((volume: number) => Math.round(volume * 100).toString() + "%")
+                                label: bind(wp!.defaultMicrophone, "volume").as((volume: number) => 
+                                    Math.round(volume * 100).toString() + "%")
                             } as Widget.LabelProps)
                         ]
                     })

ags/widget/bar/Clock.tsx

@@ -1,16 +1,14 @@
-import { Box, Button } from "astal/gtk3/widget";
-import { GLib, Variable } from "astal";
 import { Widget } from "astal/gtk3";
-
-const dateTimeFormat = "%A %d, %H:%M"
-const time = new Variable<string>("").poll(600, () => 
-    GLib.DateTime.new_now_local().format(dateTimeFormat)!);
+import { getDateTime } from "../../scripts/time";
+import { GLib } from "astal";
 
 export function Clock(): JSX.Element {
     return new Widget.Box({
         className: "clock",
         child: new Widget.Button({
-            label: time()
+            label: getDateTime().as((dateTime: GLib.DateTime) => {
+                return dateTime.format("%A %d, %H:%M")
+            })
         } as Widget.ButtonProps)
     } as Widget.BoxProps);
 }

ags/widget/bar/FocusedWindow.tsx

@@ -1,6 +1,7 @@
 import { bind } from "astal";
 import { Gtk, Widget } from "astal/gtk3";
 import AstalHyprland from "gi://AstalHyprland";
+import { getAppIcon } from "../../scripts/apps";
 
 const hyprland = AstalHyprland.get_default();
 
@@ -11,14 +12,8 @@ export function FocusedWindow() {
         children: [
             new Widget.Icon({
                 className: "icon",
-                icon: bind(hyprland, "focusedClient").as(Boolean) && bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => {
-                    switch(client.initialClass) {
-                        case "zen":
-                            return "zen-browser";
-
-                        default:
-                            return client.initialClass;
-                    }}),
+                icon: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => 
+                    getAppIcon(client.initialClass) || "image-missing"),
                 iconSize: Gtk.IconSize.SMALL_TOOLBAR
             }),
             new Widget.Box({
@@ -29,12 +24,14 @@ export function FocusedWindow() {
                     new Widget.Label({
                         className: "class",
                         xalign: 0,
-                        label: bind(hyprland, "focusedClient").as(Boolean) && bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => client.get_class())
+                        label: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) =>
+                            client?.["class"])
                     } as Widget.LabelProps),
                     new Widget.Label({
                         className: "title",
                         xalign: 0,
-                        label: bind(hyprland, "focusedClient").as(Boolean) && bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => client.get_title())
+                        label: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) =>
+                            client?.["title"])
                     } as Widget.LabelProps)
                 ]
             })

ags/widget/bar/Logo.tsx

@@ -1,10 +1,10 @@
 import { Box, Button } from "astal/gtk3/widget";
-import { Process } from "astal";
+import AstalHyprland from "gi://AstalHyprland";
 
 export function Logo() {
     return (
         <Box className={"logo"}>
-            <Button onClick={ () => Process.exec("hyprctl dispatch exec anyrun") } label={""} />
+            <Button onClick={ () => AstalHyprland.get_default().dispatch("exec", "anyrun") } label={""} />
         </Box>
     )
 }

ags/widget/bar/Media.tsx

@@ -2,7 +2,6 @@ import { bind } from "astal";
 import { Gtk, Widget } from "astal/gtk3";
 import AstalMpris from "gi://AstalMpris";
 import { Separator, SeparatorProps } from "../Separator";
-import { Wal } from "../../scripts/pywal";
 
 const mpris: AstalMpris.Mpris = AstalMpris.get_default();
 let defaultPlayer: (AstalMpris.Player|undefined) = mpris.get_players()?.[0];
@@ -10,6 +9,7 @@ let defaultPlayer: (AstalMpris.Player|undefined) = mpris.get_players()?.[0];
 const playerIcons = {
     spotify: '󰓇',
     clapper: '󰿎',
+    mpv: '',
     spotube: '󰋋',
     firefox: '󰈹'
 }
@@ -20,7 +20,46 @@ export function Media(): JSX.Element {
         defaultPlayer = players?.[0] as AstalMpris.Player;
     });
 
-    return new Widget.EventBox({
+    const mediaControlsRevealer: Widget.Revealer = new Widget.Revealer({
+        transitionType: Gtk.RevealerTransitionType.SLIDE_RIGHT,
+        transitionDuration: 260,
+        revealChild: false,
+        child: new Widget.Box({
+            className: "media-controls",
+            homogeneous: false,
+            children: [
+                new Widget.Button({
+                    className: "previous",
+                    label: "󰒮",
+                    onClick: () => {
+                        if(bind(defaultPlayer!, "canGoPrevious").as(Boolean))
+                            defaultPlayer?.previous();
+                    }
+                } as Widget.ButtonProps),
+                new Widget.Button({
+                    className: "pause",
+                    label: bind(defaultPlayer!, "playback_status").as((status: AstalMpris.PlaybackStatus) => {
+                        return status === AstalMpris.PlaybackStatus.PLAYING ? "󰏤" : "󰐊"
+                    }),
+                    onClick: () => {
+                        if(bind(defaultPlayer!, "canPlay").as(Boolean)
+                          || bind(defaultPlayer!, "canPause").as(Boolean))
+                            defaultPlayer?.play_pause();
+                    }
+                } as Widget.ButtonProps),
+                new Widget.Button({
+                    className: "next",
+                    label: "󰒭",
+                    onClick: () => {
+                        if(bind(defaultPlayer!, "canGoNext").as(Boolean))
+                            defaultPlayer?.next();
+                    }
+                } as Widget.ButtonProps)
+            ]
+        } as Widget.BoxProps)
+    } as Widget.RevealerProps);
+
+    const mediaWidget = new Widget.EventBox({
         className: "media-eventbox",
         visible: bind(mpris, "players").as((players: Array<AstalMpris.Player>) => players?.[0]).as(Boolean),
         child: new Widget.Box({
@@ -42,7 +81,7 @@ export function Media(): JSX.Element {
                         } as Widget.LabelProps),
                         Separator({
                             size: 2,
-                            cssColor: `rgb(150, 150, 150)`,
+                            cssColor: `rgb(180, 180, 180)`,
                             alpha: 1
                         } as SeparatorProps),
                         new Widget.Label({
@@ -51,12 +90,19 @@ export function Media(): JSX.Element {
                         } as Widget.LabelProps)
                     ]
                 } as Widget.BoxProps),
-                new Widget.Revealer({
-                    transitionType: Gtk.RevealerTransitionType.SLIDE_RIGHT,
-                    transitionDuration: 400,
-                    revealChild: false //FIXME
-                } as Widget.RevealerProps)
+                mediaControlsRevealer
             ]
         } as Widget.BoxProps)
     } as Widget.EventBoxProps);
+
+    mediaWidget.connect("hover", () => {
+        mediaControlsRevealer.set_reveal_child(true);
+        mediaWidget.className = mediaWidget.className + " reveal";
+    });
+    mediaWidget.connect("hover-lost", () => {
+        mediaControlsRevealer.set_reveal_child(false);
+        mediaWidget.className = mediaWidget.className.replaceAll(" reveal", "");
+    })
+
+    return mediaWidget;
 }

ags/widget/bar/Tray.tsx

@@ -1,5 +1,5 @@
 import { bind } from "astal";
-import { Astal, Gtk, Widget } from "astal/gtk3";
+import { Gtk, Widget } from "astal/gtk3";
 import AstalTray from "gi://AstalTray"
 
 const astalTray = AstalTray.get_default();
@@ -7,6 +7,7 @@ const astalTray = AstalTray.get_default();
 export function Tray() {
     return new Widget.Box({
         className: "tray",
+        visible: bind(astalTray, "items").as((items: Array<AstalTray.TrayItem>) => items.length > 0),
         children: bind(astalTray, "items").as((items: Array<AstalTray.TrayItem>) => 
             items.map((item: AstalTray.TrayItem) => 
                 new Widget.MenuButton({
@@ -15,6 +16,8 @@ export function Tray() {
                     menuModel: bind(item, "menuModel"),
                     usePopover: false,
                     actionGroup: bind(item, "actionGroup").as((actionGroup: any) => ["dbusmenu", actionGroup]),
+                    direction: Gtk.ArrowType.DOWN,
+                    halign: Gtk.Align.CENTER,
                     child: new Widget.Icon({
                         gIcon: bind(item, "gicon"),
                         iconSize: Gtk.IconSize.SMALL_TOOLBAR

ags/widget/bar/Workspaces.tsx

@@ -1,21 +1,31 @@
 import { bind } from "astal";
-import { Widget } from "astal/gtk3";
+import { Gdk, Gtk, Widget } from "astal/gtk3";
 import AstalHyprland from "gi://AstalHyprland";
 
 const hyprland = AstalHyprland.get_default();
 
 export function Workspaces() {
-    return new Widget.Box({
-        className: "workspaces",
-        children: bind(hyprland, "workspaces").as((workspaces) =>
-            workspaces.sort((a: AstalHyprland.Workspace, b: AstalHyprland.Workspace) =>
-                    a.get_id() - b.get_id())
-            .map((workspace: AstalHyprland.Workspace) => 
-                new Widget.Button({
-                    className: bind(hyprland, "focusedWorkspace").as((focusedWs: AstalHyprland.Workspace) => workspace === focusedWs ? "focus" : ""),
-                    onClicked: () => workspace.focus()
-                } as Widget.ButtonProps)
-            )
-        )
-    } as Widget.BoxProps);
+    const workspacesEventBox = new Widget.EventBox({
+        onScroll: (_, event) => 
+            event.delta_y > 0 ? hyprland.dispatch("workspace", "e-1") : hyprland.dispatch("workspace", "e+1"),
+
+        child: new Widget.Box({
+            className: "workspaces",
+            vexpand: false,
+            valign: Gtk.Align.CENTER,
+            children: bind(hyprland, "workspaces").as((workspaces) => {
+                const sortedWorkspaces = workspaces.sort((a: AstalHyprland.Workspace, b: AstalHyprland.Workspace) => a.get_id() - b.get_id());
+                return sortedWorkspaces.map((workspace: AstalHyprland.Workspace) => 
+                    new Widget.Button({
+                        className: bind(hyprland, "focusedWorkspace").as((focusedWs: AstalHyprland.Workspace) => workspace === focusedWs ? "focus" : ""),
+                        visible: true,
+                        onClicked: () => workspace.focus()
+                    } as Widget.ButtonProps)
+                )
+            })
+        } as Widget.BoxProps)
+    } as Widget.EventBoxProps);
+
+
+    return workspacesEventBox;
 }

ags/widget/control-center/ButtonGrid.ts

@@ -0,0 +1,30 @@
+import { Gtk, Widget } from "astal/gtk3";
+
+export function ButtonGrid(): Widget.Box {
+    return new Widget.Box({
+        child: new Gtk.Grid({
+            orientation: Gtk.Orientation.HORIZONTAL,
+            rowHomogeneous: true
+        } as Gtk.Grid.ConstructorProps, BluetoothToggle())
+    } as Widget.BoxProps);
+}
+
+// Buttons and Toggles!
+
+export function BluetoothToggle(): Gtk.ToggleButton {
+    return new Gtk.ToggleButton({
+        child: new Widget.Box({
+            orientation: Gtk.Orientation.VERTICAL,
+            children: [
+                new Widget.Label({
+                    className: "title",
+                    label: "Bluetooth"
+                } as Widget.LabelProps),
+                new Widget.Label({
+                    className: "extra",
+                    label: "[dev] [dev_bat]"
+                } as Widget.LabelProps)
+            ]
+        } as Widget.BoxProps)
+    });
+}

ags/widget/control-center/QuickActions.ts

@@ -0,0 +1,95 @@
+import { Process, Variable } from "astal";
+import { Gtk, Widget } from "astal/gtk3";
+import AstalHyprland from "gi://AstalHyprland";
+
+const hostname: string = Process.exec("cat /etc/hostname") || "GNU/Linux";
+const uptime = new Variable<string>("Just turned on")
+    .poll(1000, () => {
+        return Process.exec("uptime -p").replace(/^up /, "")
+})();
+
+const quickActionsBox: Widget.Box = new Widget.Box({
+    className: "quickactions",
+    hexpand: true,
+    children: [
+        new Widget.Box({
+            orientation: Gtk.Orientation.VERTICAL,
+            halign: Gtk.Align.START,
+            children: [
+                new Widget.Label({
+                    className: "hostname",
+                    xalign: 0,
+                    label: hostname.toString()
+                } as Widget.LabelProps),
+                new Widget.Label({
+                    className: "uptime",
+                    xalign: 0,
+                    label: uptime.as((uptime: string) => `󱡢  ${uptime}`)
+                } as Widget.LabelProps)
+            ]
+        } as Widget.BoxProps),
+        new Widget.Box({
+            orientation: Gtk.Orientation.HORIZONTAL,
+            className: "button-row",
+            halign: Gtk.Align.END,
+            children: [
+                LockButton(),
+                ColorPickerButton(),
+                ScreenshotButton(),
+                SelectWallpaperButton(),
+                LogoutButton()
+            ]
+        } as Widget.BoxProps)
+    ]
+} as Widget.BoxProps);
+
+export function QuickActionsWidget(): Widget.Box {
+    return quickActionsBox;
+}
+
+function LockButton(): Widget.Button {
+    return new Widget.Button({
+        label: "󰌾",
+        onClick: () => AstalHyprland.get_default().dispatch("exec", "hyprlock")
+    } as Widget.ButtonProps)
+}
+
+function ColorPickerButton(): Widget.Button {
+    return new Widget.Button({
+        label: "󰴱",
+        onClick: () => AstalHyprland.get_default().dispatch(
+            "exec", 
+            "sh $HOME/.config/eww/scripts/color-picker.sh"
+        )
+    } as Widget.ButtonProps)
+}
+
+function ScreenshotButton(): Widget.Button {
+    return new Widget.Button({
+        label: "󰹑",
+        onClick: () => Process.exec_async(
+            "bash -c 'hyprshot -m region -o $HOME/Screenshots'",
+            () => {}
+        )
+    } as Widget.ButtonProps);
+}
+
+function SelectWallpaperButton(): Widget.Button {
+    return new Widget.Button({
+        label: "󰸉",
+        onClick: () => Process.exec_async(
+            "bash -c 'sh $HOME/.config/hypr/scripts/change-wallpaper.sh'",
+            () => {}
+        )
+    } as Widget.ButtonProps);
+}
+
+function LogoutButton(): Widget.Button {
+    return new Widget.Button({
+        label: "󰗽",
+        onClick: () => Process.exec_async(
+            "bash -c 'loginctl terminate-user $USER'",
+            () => {}
+        )
+    } as Widget.ButtonProps);
+}