💥 ags: fix startup issues (and with that, errors with focusedClient bar widget)

ags/app.ts

@@ -1,8 +1,12 @@
 import { App } from "astal/gtk3"
+import { Bar } from "./window/Bar";
+import { OSD } from "./window/OSD";
+import { ControlCenter } from "./window/ControlCenter";
 
 import { runStyleHandler } from "./scripts/style-handler";
-//import { monitorPaths } from "./scripts/reload-handler"; // Only for debugging purposes(testing new widgets and stuff)
 import { handleArguments } from "./scripts/arg-handler";
+import { monitorPaths } from "./scripts/reload-handler";
+
 
 export const astalInstanceName = "astal"
 
@@ -17,6 +21,16 @@ App.start({
         console.log(`[LOG] Running Stylesheet handler`);
         runStyleHandler();
         //console.log(`[LOG] Starting to monitor scripts to automatically reload instance`);
-        //monitorPaths();
+        //monitorPaths(); // Only for debugging purposes(testing new widgets and stuff)
     }
 });
+
+// Windows list
+export function getWindowsMap(): Object {
+    return {
+        "bar": Bar,
+        "osd": OSD,
+        "control-center": ControlCenter,
+        //"floating-notifications": FloatingNotifications
+    };
+}

ags/scripts/pywal.ts

@@ -1,10 +0,0 @@
-import { readFile } from "astal";
-import { getUserDirs } from "./user";
-
-export class Wal {
-    public static getColors(): JSON {
-        return JSON.parse(
-            readFile(`${getUserDirs().cache}/wal/colors.json`)!
-        );
-    }
-}

ags/scripts/reload-handler.ts

@@ -4,7 +4,7 @@ import { getUserDirs } from "./user";
 
 const monitoringPaths = [ "./scripts", "./window", "./app.ts", "env.d.ts" ];
 
-interface InstanceProps {
+export interface InstanceProps {
     instanceName?: string;
     log?: boolean;
 }

ags/scripts/volume.ts

@@ -36,33 +36,91 @@ export class Wireplumber {
         return this.getDefaultSource().get_volume() * 100;
     }
 
-    public setSinkVolume(newSinkVolume: number) {
+    public setSinkVolume(newSinkVolume: number): void {
         this.defaultSink.set_volume(
             (newSinkVolume > this.maxSinkVolume ? this.maxSinkVolume : newSinkVolume) / 100
         );
     }
 
-    public setSourceVolume(newSourceVolume: number) {
+    public setSourceVolume(newSourceVolume: number): void {
         this.defaultSource.set_volume(
             newSourceVolume > this.maxSourceVolume ? this.maxSourceVolume : newSourceVolume / 100
         );
     }
 
-    public increaseSinkVolume(volumeIncrease: number) {
+    public increaseSinkVolume(volumeIncrease: number): void {
-        if(volumeIncrease > this.maxSinkVolume 
+        if((this.getSinkVolume() + volumeIncrease) > this.maxSinkVolume) {
-            || (this.maxSinkVolume + volumeIncrease) > this.maxSinkVolume) {
             this.setSinkVolume(this.maxSinkVolume);
+            return;
         }
 
         this.setSinkVolume(this.getSinkVolume() + volumeIncrease);
     }
 
-    public increaseSourceVolume(volumeIncrease: number) {
+    public increaseSourceVolume(volumeIncrease: number): void {
-        if(volumeIncrease > this.maxSourceVolume //TODO
+        if((this.getSourceVolume() + volumeIncrease) > this.maxSourceVolume) {
-            || (this.maxSinkVolume + volumeIncrease) > this.maxSinkVolume) {
+            this.setSourceVolume(this.maxSourceVolume);
-            this.setSinkVolume(this.maxSinkVolume);
+            return;
         }
 
-        this.setSinkVolume(this.getSinkVolume() + volumeIncrease);
+        this.setSourceVolume(this.getSourceVolume() + volumeIncrease);
+    }
+
+    public decreaseSinkVolume(volumeDecrease: number): void {
+        const absDecrease = Math.abs(volumeDecrease);
+
+        if((this.getSinkVolume() - absDecrease) < 0) {
+            this.setSinkVolume(0);
+            return;
+        }
+
+        this.setSinkVolume(this.getSinkVolume() - absDecrease);
+    }
+
+    public decreaseSourceVolume(volumeDecrease: number): void {
+        const absDecrease = Math.abs(volumeDecrease);
+
+        if((this.getSourceVolume() - absDecrease) < 0) 
+            return this.setSourceVolume(0);
+
+        this.setSourceVolume(this.getSourceVolume() - absDecrease);
+    }
+
+    public muteSink(): void {
+        this.getDefaultSink().set_mute(true);
+    }
+
+    public muteSource(): void {
+        this.getDefaultSource().set_mute(true);
+    }
+
+    public unmuteSink(): void {
+        this.getDefaultSink().set_mute(false);
+    }
+
+    public unmuteSource(): void {
+        this.getDefaultSource().set_mute(false);
+    }
+
+    public isMutedSink(): boolean {
+        return this.getDefaultSink().get_mute();
+    }
+
+    public isMutedSource(): boolean {
+        return this.getDefaultSource().get_mute();
+    }
+
+    public toggleMuteSink(): void {
+        if(this.isMutedSink()) 
+            return this.unmuteSink();
+
+        return this.muteSink();
+    }
+
+    public toggleMuteSource(): void {
+        if(this.isMutedSource())
+            return this.unmuteSource();
+
+        return this.muteSource();
     }
 }

ags/scripts/windows.ts

@@ -1,22 +1,12 @@
 // get open windows / interact with windows(e.g.: close, open or toggle)
 
 import { Widget } from "astal/gtk3";
-import { Bar } from "../window/Bar";
+import { getWindowsMap } from "../app";
-import { OSD } from "../window/OSD";
-import { ControlCenter } from "../window/ControlCenter";
-//import { FloatingNotifications } from "../window/FloatingNotifications";
 
 export class Windows {
     private static inst: Windows = new Windows();
 
-    /* Windows List(js object):
+    private readonly windows = getWindowsMap();
-     * add all windows here */
-    private readonly windows = {
-        "bar": Bar,
-        "osd": OSD,
-        "control-center": ControlCenter
-        //"floating-notifications": FloatingNotifications
-    };
 
     public static getDefault(): Windows {
         return Windows.inst;

ags/style/_bar.scss

@@ -188,6 +188,15 @@
 }
 
 .audio {
+  &:hover > box {
+    background: wal.$color1;
+  }
+
+  & > box {
+    padding: 0 9px;
+    border-radius: 12px;
+  }
+
   & .sink .icon {
     margin-right: 6px;
   }

ags/style/_control-center.scss

@@ -5,7 +5,6 @@
   background: rgba(wal.$background, .6);
   border-top-left-radius: 16px;
   border-bottom-left-radius: 16px;
-  margin: 32px 0;
 
   & * {
     all: unset;

ags/widget/bar/Audio.ts

@@ -1,16 +1,22 @@
 import { bind } from "astal";
-import { Gtk, Widget } from "astal/gtk3";
+import { Astal, Widget } from "astal/gtk3";
 import AstalWp from "gi://AstalWp?version=0.1";
+import { Wireplumber } from "../../scripts/volume";
 
 const wp = AstalWp.get_default();
 
 export function Audio() {
-    return wp && new Widget.Button({
+    return wp && new Widget.EventBox({
         className: "audio",
         child: new Widget.Box({
             children: [
                 new Widget.EventBox({
                     className: "sink",
+                    onScroll: (_, event) => 
+                        event.delta_y > 0 ? 
+                            Wireplumber.getDefault().decreaseSinkVolume(5)
+                        :
+                            Wireplumber.getDefault().increaseSinkVolume(5),
                     child: new Widget.Box({
                         children: [
                             new Widget.Label({
@@ -22,11 +28,16 @@ export function Audio() {
                                 label: bind(wp!.defaultSpeaker, "volume").as((volume: number) => 
                                     Math.round(volume * 100).toString() + "%")
                             } as Widget.LabelProps)
-                        ]
+                       ]
                     })
                 } as Widget.EventBoxProps),
                 new Widget.EventBox({
                     className: "source",
+                    onScroll: (_, event) => 
+                        event.delta_y > 0 ?
+                            Wireplumber.getDefault().decreaseSourceVolume(5)
+                        :
+                            Wireplumber.getDefault().increaseSourceVolume(5),
                     child: new Widget.Box({
                         children: [
                             new Widget.Label({
@@ -42,5 +53,5 @@ export function Audio() {
                 } as Widget.EventBoxProps)
             ]
         } as Widget.BoxProps)
-    } as Widget.ButtonProps);
+    } as Widget.EventBoxProps);
 }

ags/widget/bar/FocusedWindow.ts

@@ -13,7 +13,11 @@ export function FocusedWindow() {
             new Widget.Icon({
                 className: "icon",
                 icon: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => 
-                    getAppIcon(client.initialClass) || "image-missing"),
+                    client ? 
+                        (getAppIcon(client.initialClass) || client.initialClass)
+                    :
+                        "image-missing"
+                ),
                 iconSize: Gtk.IconSize.SMALL_TOOLBAR
             }),
             new Widget.Box({
@@ -25,13 +29,13 @@ export function FocusedWindow() {
                         className: "class",
                         xalign: 0,
                         label: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) =>
-                            client?.["class"])
+                            client ? client.class : "")
                     } as Widget.LabelProps),
                     new Widget.Label({
                         className: "title",
                         xalign: 0,
                         label: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) =>
-                            client?.["title"])
+                            client ? client.title : "")
                     } as Widget.LabelProps)
                 ]
             })

ags/widget/control-center/ButtonGrid.ts

@@ -1,30 +0,0 @@
-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

@@ -8,45 +8,6 @@ const uptime = new Variable<string>("Just turned on")
         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: "󰌾",
@@ -93,3 +54,39 @@ function LogoutButton(): Widget.Button {
         )
     } as Widget.ButtonProps);
 }
+
+export const QuickActions: Widget.Box = new Widget.Box({
+    className: "quickactions",
+    children: [
+        new Widget.Box({
+            orientation: Gtk.Orientation.VERTICAL,
+            halign: Gtk.Align.START,
+            hexpand: true,
+            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,
+            hexpand: true,
+            children: [
+                LockButton(),
+                ColorPickerButton(),
+                ScreenshotButton(),
+                SelectWallpaperButton(),
+                LogoutButton()
+            ]
+        } as Widget.BoxProps)
+    ]
+} as Widget.BoxProps);

ags/widget/control-center/Tiles.ts

@@ -0,0 +1,11 @@
+import { Gtk, Widget } from "astal/gtk3";
+
+export const tileList: Array<Gtk.Widget> = [
+]
+
+export const Tiles: Widget.Box = new Widget.Box({
+    child: new Gtk.Grid({
+        orientation: Gtk.Orientation.HORIZONTAL,
+        rowHomogeneous: true
+    } as Gtk.Grid.ConstructorProps)
+} as Widget.BoxProps);

ags/widget/control-center/tiles/Internet.ts

@@ -0,0 +1,8 @@
+import { Gtk, Widget } from "astal/gtk3";
+
+export const TileInternet = new Widget.Box({
+    className: "tile more internet",
+    children: [
+        toggleButton
+    ]
+} as Widget.BoxProps);

ags/widget/control-center/tiles/MoreTile.ts

@@ -0,0 +1,60 @@
+import { Binding } from "astal";
+import { Gtk, Widget } from "astal/gtk3";
+
+export interface MoreTileProps {
+    className?: string | Binding<string | undefined>;
+    iconName?: string | Binding<string | undefined>;
+    iconSize?: Gtk.IconSize;
+    title: string | Binding<string>;
+    description?: string | Binding<string | undefined>;
+    defaultToggleState?: boolean;
+    onToggledOn: Function;
+    onToggledOff: Function;
+    onClickMore: Function;
+}
+
+export function MoreTile(props: MoreTileProps): Gtk.Widget {
+
+    let toggleState: boolean = props?.defaultToggleState !== undefined ? 
+        props.defaultToggleState : false;
+
+    const mainEventBox = new Widget.EventBox({
+        onClick: () => toggleState ? props.onToggledOff() : props.onToggledOn(),
+        expand: true,
+        child: new Widget.Box({
+            className: props?.className || "",
+            expand: true,
+            children: [
+                new Widget.Icon({
+                    iconName: props?.iconName,
+                    visible: props.iconName !== undefined,
+                    iconSize: props.iconSize || Gtk.IconSize.BUTTON
+                }),
+                new Widget.Box({
+                    className: "text",
+                    orientation: Gtk.Orientation.VERTICAL,
+                    children: [
+                        new Widget.Label({
+                            className: "title",
+                            label: props.title
+                        } as Widget.LabelProps),
+                        new Widget.Label({
+                            className: "description",
+                            visible: props?.description !== undefined,
+                            label: props?.description
+                        } as Widget.LabelProps)
+                    ]
+                } as Widget.BoxProps),
+                new Widget.Button({
+                    onClick: () => props.onClickMore(),
+                    child: new Widget.Icon({
+                        iconName: "go-next",
+                        iconSize: Gtk.IconSize.BUTTON
+                    } as Widget.IconProps),
+                } as Widget.ButtonProps)
+            ]
+        } as Widget.BoxProps)
+    } as Widget.EventBoxProps);
+
+    return mainEventBox;
+}

ags/widget/control-center/tiles/NormalTile.ts

@@ -0,0 +1,61 @@
+import { Binding } from "astal";
+import { Gtk, Widget } from "astal/gtk3";
+
+export interface NormalTileProps {
+    className?: string | Binding<string | undefined>;
+    iconName?: string | Binding<string | undefined>;
+    iconSize?: Gtk.IconSize;
+    title: string | Binding<string>;
+    description?: string | Binding<string | undefined>;
+    toggleState?: boolean | Binding<boolean | undefined>;
+    onToggledOn: Function;
+    onToggledOff: Function;
+}
+
+export function MoreTile(props: NormalTileProps): Gtk.Widget {
+
+    let toggleState: boolean = props?.toggleState !== undefined ? 
+        props.toggleState : false;
+
+    const mainEventBox = new Widget.EventBox({
+        onClick: () => toggleState ? props.onToggledOff() : props.onToggledOn(),
+        expand: true,
+        child: new Widget.Box({
+            className: props?.className || "",
+            expand: true,
+            children: [
+                new Widget.Icon({
+                    iconName: props?.iconName,
+                    visible: props.iconName !== undefined,
+                    iconSize: props.iconSize || Gtk.IconSize.BUTTON
+                }),
+                new Widget.Box({
+                    className: "text",
+                    orientation: Gtk.Orientation.VERTICAL,
+                    children: [
+                        new Widget.Label({
+                            className: "title",
+                            label: props.title
+                        } as Widget.LabelProps),
+                        new Widget.Label({
+                            className: "description",
+                            visible: props?.description !== undefined,
+                            label: props?.description
+                        } as Widget.LabelProps)
+                    ]
+                } as Widget.BoxProps)
+            ]
+        } as Widget.BoxProps)
+    } as Widget.EventBoxProps);
+
+    function toggleOn(): void {
+        mainEventBox.set_class_name(mainEventBox + "")
+        props.onToggledOn();
+    }
+
+    function toggleOff(): void {
+        props.onToggledOff();
+    }
+
+    return mainEventBox;
+}

ags/window/Bar.ts

@@ -9,66 +9,53 @@ import { Audio } from "../widget/bar/Audio";
 import { FocusedWindow } from "../widget/bar/FocusedWindow";
 //import { Media } from "../widget/bar/Media";
 
-interface BarProps {
+export const Bar: Widget.Window = new Widget.Window({
-    monitor: number;
+    className: "bar",
-    width?: number;
+    monitor: 0,
-    height?: number;
+    namespace: "top-bar",
-}
+    anchor: Astal.WindowAnchor.TOP,
-
+    layer: Astal.Layer.TOP,
-export const Bar: Widget.Window = newBar({
+    exclusivity: Astal.Exclusivity.EXCLUSIVE,
-    monitor: 0
+    canFocus: false,
-} as BarProps);
+    visible: true,
-
+    widthRequest: Gdk.Screen.get_default()?.get_monitor_geometry(0)?.width,
-function newBar(props: BarProps): Widget.Window {
+    hexpand: false,
-    return new Widget.Window({
+    vexpand: false,
-        className: "bar",
+    child: new Widget.Box({
-        monitor: props.monitor,
+        className: "bar-container",
-        namespace: "top-bar",
+        child: new Widget.CenterBox({
-        anchor: Astal.WindowAnchor.TOP,
+            className: "bar-centerbox",
-        layer: Astal.Layer.TOP,
+            expand: true,
-        exclusivity: Astal.Exclusivity.EXCLUSIVE,
+            homogeneous: false,
-        canFocus: false,
+            startWidget: new Widget.Box({
-        visible: true, // Recommendation: set visible to false if you don't want this window to appear on app start
+                className: "widgets-left",
-        heightRequest: props.height || 0,
-        widthRequest: props.width || Gdk.Screen.get_default()?.get_monitor_geometry(props.monitor)?.width,
-        hexpand: false,
-        vexpand: false,
-        child: new Widget.Box({
-            className: "bar-container",
-            child: new Widget.CenterBox({
-                className: "bar-centerbox",
-                expand: true,
                 homogeneous: false,
-                startWidget: new Widget.Box({
+                halign: Gtk.Align.START,
-                    className: "widgets-left",
+                children: [
-                    homogeneous: false,
+                    Logo(),
-                    halign: Gtk.Align.START,
+                    Workspaces(),
-                    children: [
+                    FocusedWindow()
-                        Logo(),
+                ]
-                        Workspaces(),
+            } as Widget.BoxProps),
-                        FocusedWindow()
+            centerWidget: new Widget.Box({
-                    ]
+                className: "widgets-center",
-                } as Widget.BoxProps),
+                homogeneous: false,
-                centerWidget: new Widget.Box({
+                halign: Gtk.Align.CENTER,
-                    className: "widgets-center",
+                children: [
-                    homogeneous: false,
+                    Clock(),
-                    halign: Gtk.Align.CENTER,
+                    /*<Media />*/
-                    children: [
+                ]
-                        Clock(),
+            } as Widget.BoxProps),
-                        /*<Media />*/
+            endWidget: new Widget.Box({
-                    ]
+                className: "widgets-right",
-                } as Widget.BoxProps),
+                homogeneous: false,
-                endWidget: new Widget.Box({
+                halign: Gtk.Align.END,
-                    className: "widgets-right",
+                children: [
-                    homogeneous: false,
+                    Tray(),
-                    halign: Gtk.Align.END,
+                    Audio(),
-                    children: [
+                    CCToggle()
-                        Tray(),
+                ]
-                        Audio(),
+            } as Widget.BoxProps)
-                        CCToggle()
+        } as Widget.CenterBoxProps)
-                    ]
+    } as Widget.BoxProps)
-                } as Widget.BoxProps)
+} as Widget.WindowProps);
-            } as Widget.CenterBoxProps)
-        } as Widget.BoxProps)
-    } as Widget.WindowProps);
-}

ags/window/ControlCenter.ts

@@ -1,31 +1,25 @@
 import { Astal, Gdk, Gtk, Widget } from "astal/gtk3";
-import { QuickActionsWidget } from "../widget/control-center/QuickActions";
+import { QuickActions } from "../widget/control-center/QuickActions";
+import { Bar } from "./Bar";
+import { Tiles } from "../widget/control-center/Tiles";
 
-export const ControlCenter: Widget.Window = CC();
+const monitorHeight: number = Gdk.Screen.get_default()?.get_monitor_geometry(0)?.height!;
-export const widgetsBox: Widget.Box = new Widget.Box({
+
-    visible: true,
+const widgetsContainer: Widget.Box = new Widget.Box({
     className: "control-center-container",
     orientation: Gtk.Orientation.VERTICAL,
-    children: [
+} as Widget.BoxProps, 
-        QuickActionsWidget()
+QuickActions, 
-    ]
+Tiles);
-} as Widget.BoxProps);
 
-widgetsBox.connect("add", (_: Widget.Box, widget: Gtk.Widget) => {
+export const ControlCenter: Widget.Window = new Widget.Window({
-    widget.set_size_request(widgetsBox.get_allocated_width(), widget.get_allocated_height());
+    className: "control-center",
-});
+    namespace: "control-center",
-
+    canFocus: true,
-function CC(): Widget.Window {
+    exclusivity: Astal.Exclusivity.NORMAL,
-    return new Widget.Window({
+    anchor: Astal.WindowAnchor.RIGHT,
-        className: "control-center",
+    width_request: 450,
-        namespace: "control-center",
+    height_request: Bar.is_visible() ? monitorHeight - Bar.get_size()[1] - 18 : 700,
-        canFocus: true,
+    monitor: 0,
-        exclusivity: Astal.Exclusivity.NORMAL,
+    visible: false
-        anchor: Astal.WindowAnchor.RIGHT,
+} as Widget.WindowProps, widgetsContainer);
-        width_request: 450,
-        height_request: Gdk.Screen.get_default()?.get_monitor_geometry(0)?.height || 800,
-        monitor: 0,
-        visible: false,
-        child: widgetsBox
-    } as Widget.WindowProps);
-}