move to snowfall

modules/home/apps/helpers/ags/cfg/config.js

@@ -0,0 +1,29 @@
+import { Utils, App } from "./imports.js";
+
+// Windows
+import { Bar } from "./modules/bar/bar.js";
+import { Dashboard } from "./modules/dashboard/dashboard.js";
+
+// Apply css
+const applyScss = () => {
+  // Compile scss
+  Utils.exec(
+    `sassc ${App.configDir}/scss/main.scss ${App.configDir}/style.css`,
+  );
+  console.log("Scss compiled");
+
+  // Apply compiled css
+  App.resetCss();
+  App.applyCss(`${App.configDir}/style.css`);
+  console.log("Compiled css applied");
+};
+
+// Apply css then check for changes
+applyScss();
+
+
+// Main config
+export default {
+    style: `${App.configDir}/style.css`,
+    windows: [Bar(), Dashboard()  ],
+};

modules/home/apps/helpers/ags/cfg/imports.js

@@ -0,0 +1,32 @@
+import App from "resource:///com/github/Aylur/ags/app.js";
+import Widget from "resource:///com/github/Aylur/ags/widget.js";
+import Service from "resource:///com/github/Aylur/ags/service.js";
+import Variable from "resource:///com/github/Aylur/ags/variable.js";
+import * as Utils from "resource:///com/github/Aylur/ags/utils.js";
+
+import Applications from "resource:///com/github/Aylur/ags/service/applications.js";
+import Audio from "resource:///com/github/Aylur/ags/service/audio.js";
+import Battery from "resource:///com/github/Aylur/ags/service/battery.js";
+import Bluetooth from "resource:///com/github/Aylur/ags/service/bluetooth.js";
+import Hyprland from "resource:///com/github/Aylur/ags/service/hyprland.js";
+import Mpris from "resource:///com/github/Aylur/ags/service/mpris.js";
+import Network from "resource:///com/github/Aylur/ags/service/network.js";
+import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js';
+import SystemTray from "resource:///com/github/Aylur/ags/service/systemtray.js";
+
+export {
+    App,
+    Widget,
+    Service,
+    Variable,
+    Utils,
+    Applications,
+    Audio,
+    Battery,
+    Bluetooth,
+    Hyprland,
+    Mpris,
+    Network,
+    Notifications,
+    SystemTray,
+};

modules/home/apps/helpers/ags/cfg/modules/bar/bar.js

@@ -0,0 +1,35 @@
+import { Widget } from "../../imports.js";
+const { Window, Box, CenterBox } = Widget;
+
+// Widgets
+import { Workspaces } from "./workspaces.js";
+import { Title } from "./title.js";
+import { Media } from "./media.js";
+import { Notification } from "./notification.js"
+import { SysInfo } from "./sysinfo/sysinfo.js";
+import { sysTray } from "./tray.js";
+import { Clock } from "./clock.js";
+
+const Left = () => Box({
+    children: [Workspaces(), Title()],
+});
+const Center = () => Box({
+    children: [Media()],
+});
+const Right = () => Box({
+    hpack: "end",
+    children: [Notification(), sysTray(), SysInfo(), Clock()],
+});
+
+export const Bar = () => Window({
+    name: "bar",
+    anchor: ["top", "right", "left"],
+    margins: [10, 15, 0],
+    exclusivity: "exclusive",
+    child: CenterBox({
+        className: "bar",
+        start_widget: Left(),
+        center_widget: Center(),
+        end_widget: Right(),
+    }),
+});

modules/home/apps/helpers/ags/cfg/modules/bar/clock.js

@@ -0,0 +1,13 @@
+import { Widget, Utils } from "../../imports.js";
+const { execAsync } = Utils;
+
+export const Clock = () => Widget.Button({
+    className: "clock",
+    setup: (self) => {
+        self.poll(1000, (self) =>
+            execAsync(["date", "+%a %b %d %H:%M"])
+                .then((time) => (self.label = time))
+                .catch(console.error),
+        );
+    },
+});

modules/home/apps/helpers/ags/cfg/modules/bar/media.js

@@ -0,0 +1,21 @@
+import { Widget, Utils, Mpris } from "../../imports.js";
+const { execAsync } = Utils;
+
+export const Media = () => Widget.Button({
+    class_name: 'media',
+    on_primary_click: () => Mpris.getPlayer('').playPause(),
+    onSecondaryClickRelease: () => {
+        execAsync(['bash', '-c', 'anyrun', '&']);
+    },
+    on_scroll_up: () => Mpris.getPlayer('').next(),
+    on_scroll_down: () => Mpris.getPlayer('').previous(),
+    child: Widget.Label('-').hook(Mpris, self => {
+        if (Mpris.players[0]) {
+            const { track_title } = Mpris.players[0];
+            self.label = track_title.length > 60 ? `${track_title.substring(0, 60)}...` : track_title;
+        } else {
+            self.label = 'Nothing is playing';
+        }
+    }, 'player-changed'),
+});
+

modules/home/apps/helpers/ags/cfg/modules/bar/notification.js

@@ -0,0 +1,20 @@
+import { Widget, Notifications } from "../../imports.js"
+
+const { Box } = Widget
+
+export const Notification = () => Box({
+    class_name: 'barNotification',
+    visible: Notifications.bind('popups').transform(p => p.length > 0),
+    children: [
+        Widget.Label({
+            label: '󰍡 ',
+        }),
+        Widget.Label({
+            label: Notifications.bind('popups').transform(p => {
+                const summary = p[0]?.summary || '';
+                const maxLength = 50;
+                return summary.length > maxLength ? summary.slice(0, maxLength) + '...' : summary;
+            }),
+        }),
+    ],
+});

modules/home/apps/helpers/ags/cfg/modules/bar/sysinfo/battery.js

@@ -0,0 +1,38 @@
+import { Widget, Utils, Battery } from "../../../imports.js";
+const { Box } = Widget;
+
+export const BatteryWidget = () => Box({
+    className: "battery",
+    children: [ 
+        Widget.Label({
+            className: "batIcon",
+            hexpand: true,
+            setup: (self) => {
+                self.hook(Battery, (self) => {
+                    const icons = [
+                        ["󰂎", "󰁺", "󰁻", "󰁼", "󰁽", "󰁾", "󰁿", "󰂀", "󰂁", "󰂂", "󰁹"],
+                        ["󰢟", "󰢜", "󰂆", "󰂇", "󰂈", "󰢝", "󰂉", "󰢞", "󰂊", "󰂋", "󰂅"],
+                    ];
+
+                    self.label =
+                    icons[Battery.charging ? 1 : 0][
+                        Math.floor(Battery.percent / 10)
+                    ].toString();
+
+                    if (Battery.percent <= 15 && Battery.charging === false) {
+                        self.toggleClassName("low", true);
+                    } else {
+                        self.toggleClassName("low", false);
+                    }
+                });
+            },
+        }),
+        Widget.Label({
+            setup: (self) => {
+                self.hook(Battery, (self) => {
+                    self.label = `${Battery.percent}%`;
+                });
+            },
+        }),
+    ],
+});

modules/home/apps/helpers/ags/cfg/modules/bar/sysinfo/bluetooth.js

@@ -0,0 +1,13 @@
+import { Widget } from "../../../imports.js";
+import { Bluetooth } from "../../../imports.js";
+const { Box } = Widget;
+
+export const BluetoothWidget = () => Box({
+    class_name: 'bluetoothindicator',
+    children: [
+        Widget.Icon({
+        icon: Bluetooth.bind('enabled').transform(on =>
+            `bluetooth-${on ? 'active' : 'disabled'}-symbolic`),
+        })
+    ]
+})

modules/home/apps/helpers/ags/cfg/modules/bar/sysinfo/network.js

@@ -0,0 +1,23 @@
+import { Network } from "../../../imports.js"
+import { Widget } from "../../../imports.js";
+
+const WifiIndicator = () => Widget.Box({
+    children: [
+        Widget.Icon({
+            icon: Network.wifi.bind('icon_name'),
+        }),
+    ],
+})
+
+const WiredIndicator = () => Widget.Icon({
+    icon: Network.wired.bind('icon_name'),
+})
+
+export const NetworkWidget = () => Widget.Stack({
+    class_name: 'network',
+    items: [
+        ['wifi', WifiIndicator()],
+        ['wired', WiredIndicator()],
+    ],
+    shown: Network.bind('primary').transform(p => p || 'wifi'),
+})

modules/home/apps/helpers/ags/cfg/modules/bar/sysinfo/sysinfo.js

@@ -0,0 +1,20 @@
+import { Widget } from "../../../imports.js"
+const { Box } = Widget;
+
+import{ NetworkWidget } from "./network.js"
+import{ BluetoothWidget } from "./bluetooth.js"
+import{ Volume } from "./volume.js"
+import{ BatteryWidget } from "./battery.js"
+
+export const SysInfo = () => Widget.Button({
+    class_name: 'sysinfo',
+    onClicked: () => App.toggleWindow("dashboard"),
+    child: Box({
+        children: [
+            NetworkWidget(),
+            BluetoothWidget(),
+            Volume(), 
+            // BatteryWidget(),
+        ]
+    }),
+});

modules/home/apps/helpers/ags/cfg/modules/bar/sysinfo/volume.js

@@ -0,0 +1,25 @@
+import { Widget, Audio } from "../../../imports.js";
+const { Box } = Widget;
+
+export const Volume = () => Box({
+    class_name: 'volume',
+    children: [
+        Widget.Icon().hook(Audio, self => {
+            if (!Audio.speaker)
+                return;
+
+            const category = {
+                101: 'overamplified',
+                67: 'high',
+                34: 'medium',
+                1: 'low',
+                0: 'muted',
+            };
+
+            const icon = Audio.speaker.is_muted ? 0 : [101, 67, 34, 1, 0].find(
+                threshold => threshold <= Audio.speaker.volume * 100);
+
+            self.icon = `audio-volume-${category[icon]}-symbolic`;
+        }, 'speaker-changed'),
+    ],
+});

modules/home/apps/helpers/ags/cfg/modules/bar/title.js

@@ -0,0 +1,11 @@
+import { Widget, Hyprland, Utils } from "../../imports.js";
+const { execAsync } = Utils;
+
+export const Title = () => Widget.Button({
+    className: 'title',
+    visible:Hyprland.active.client.bind('title').transform(title => title.length > 0),
+    label: Hyprland.active.client.bind('title').transform(title => title.length > 40 ? title.substring(0, 40) + '...' : title),
+    onClicked: () => {
+        execAsync(['bash', '-c', 'hyprctl dispatch killactive', '&']);
+    },
+});

modules/home/apps/helpers/ags/cfg/modules/bar/tray.js

@@ -0,0 +1,15 @@
+import { SystemTray } from "../../imports.js"
+import { Widget } from "../../imports.js";
+const { Box } = Widget;
+
+const SysTrayItem = item => Widget.Button({
+    child: Widget.Icon().bind('icon', item, 'icon'),
+    tooltipMarkup: item.bind('tooltip_markup'),
+    onPrimaryClick: (_, event) => item.activate(event),
+    onSecondaryClick: (_, event) => item.openMenu(event),
+});
+
+export const sysTray = () => Box({
+    class_name: 'tray',
+    children: SystemTray.bind('items').transform(i => i.map(SysTrayItem))
+})

modules/home/apps/helpers/ags/cfg/modules/bar/workspaces.js

@@ -0,0 +1,43 @@
+import { Utils, Widget, Hyprland } from "../../imports.js";
+const { execAsync } = Utils;
+const { Box } = Widget;
+
+export const Workspaces = () => Box({
+    className:"workspaces_pill",
+    child:Box({
+		className: "workspaces",
+		child: Box({
+			children: Array.from({ length: 10 }, (_, i) => i + 1).map((i) =>
+				Widget.Button({
+					cursor: "pointer",
+					attribute: { index: i },
+					onClicked: () =>
+						execAsync(["hyprctl", "dispatch", "workspace", `${i}`]).catch(
+							console.error,
+						),
+					onSecondaryClick: () =>
+						execAsync([
+							"hyprctl",
+							"dispatch",
+							"movetoworkspacesilent",
+							`${i}`,
+						]).catch(console.error),
+				}),
+			),
+			setup: (self) => {
+				self.hook(Hyprland, (self) =>
+					self.children.forEach((btn) => {
+						btn.className =
+							btn.attribute.index === Hyprland.active.workspace.id
+								? "focused"
+								: "";
+						btn.visible = Hyprland.workspaces.some(
+							(ws) => ws.id === btn.attribute.index,
+						);
+					}),
+				);
+			},
+		}),
+	}),
+
+});

modules/home/apps/helpers/ags/cfg/modules/dashboard/bluetooth.js

@@ -0,0 +1,52 @@
+import { Widget, Bluetooth, Utils } from "../../imports.js";
+const { execAsync } = Utils
+const { Box } = Widget;
+
+export const BluetoothWidget = () =>
+	Widget.Button({
+		onClicked: () => Bluetooth.toggle(),
+        onSecondaryClickRelease: () => {
+            execAsync(['bash', '-c', 'blueman-manager', '&']);
+            App.closeWindow('dashboard');
+        },
+		child: Box({
+			className: "bluetooth",
+			vpack: "center",
+			vexpand: true,
+			setup: (self) => {
+				self.hook(Bluetooth, (self) => {
+					if (Bluetooth.enabled) {
+						self.toggleClassName("off", false);
+					} else {
+						self.toggleClassName("off", true);
+					}
+				});
+			},
+			children: [
+				Widget.Label({
+					className: "bluetoothIcon",
+					label: "󰂲",
+					setup: (self) => {
+						self.hook(Bluetooth, (self) => {
+							if (Bluetooth.enabled) {
+								self.label = "󰂯";
+							} else {
+								self.label = "󰂲";
+							}
+						});
+					},
+				}),
+				Box({
+					vertical: true,
+					vpack: "center",
+					children: [
+						Widget.Label({
+							className: "bluetoothLabel",
+							label: "Bluetooth",
+							hpack: "start",
+						}),
+					],
+				}),
+			],
+		}),
+	});

modules/home/apps/helpers/ags/cfg/modules/dashboard/brightnessSlider.js

@@ -0,0 +1,42 @@
+import { Widget } from "../../imports.js";
+import Brightness from "../../services/brightness.js";
+const { Box } = Widget;
+
+const Icon = () =>
+	Widget.Label({
+		className: "sldIcon",
+		setup: (self) => {
+			self.hook(Brightness, (self) => {
+				const icons = ["󰃚", "󰃛", "󰃜", "󰃝", "󰃞", "󰃟", "󰃠"];
+
+				self.label =
+					icons[Math.floor((Brightness.screen * 100) / 14)].toString();
+			});
+		},
+	});
+
+const Slider = () =>
+	Widget.Slider({
+		className: "sldSlider",
+		drawValue: false,
+		onChange: ({ value }) => (Brightness.screen = value),
+		setup: (self) => {
+			self.hook(Brightness, (self) => (self.value = Brightness.screen));
+		},
+	});
+
+export const BrightnessSlider = () =>
+	Box({
+		className: "Slider",
+		vertical: true,
+		children: [
+			Widget.Label({
+				className: "sldLabel",
+				label: "Brightness",
+				hpack: "start",
+			}),
+			Box({
+				children: [Icon(), Slider()],
+			}),
+		],
+	});

modules/home/apps/helpers/ags/cfg/modules/dashboard/calendar.js

@@ -0,0 +1,16 @@
+import Gtk from 'gi://Gtk';
+import { Widget } from "../../imports.js";
+const { Box } = Widget;
+
+export const CalendarWidget = () => Box({
+    className: "calendar",
+    vpack: 'end',
+    vertical: true,
+    children: [ 
+        Widget.subclass(Gtk.Calendar)({
+            showDayNames: true,
+            showHeading: true,
+            className: 'calendarWidget',
+        })
+    ]
+})

modules/home/apps/helpers/ags/cfg/modules/dashboard/dashboard.js

@@ -0,0 +1,62 @@
+import { Widget, Utils } from "../../imports.js";
+const { Box } = Widget;
+const { execAsync } = Utils;
+import PopupWindow from "../../utils/popupWindow.js";
+
+import { PowerIcon, TerminalIcon } from "./iconButtons.js"
+import { WiFi } from "./wifi.js";
+import { BluetoothWidget } from "./bluetooth.js";
+import { VolumeSlider } from "./volumeSlider.js"
+import { BrightnessSlider } from "./brightnessSlider.js";
+import { NotificationList } from "./notificationList.js";
+import { CalendarWidget } from "./calendar.js";
+
+const uptime = Box({
+    children: [
+        Widget.Label({
+            setup: (self) => self
+                .poll(5000, label => {
+                    execAsync(['bash', '-c', `w | sed -n '1p' | cut -d, -f1 | cut -d' ' -f4-`]) 
+                        .then(upTimeString => {
+                            label.label = `Uptime: ${upTimeString}`;
+                        }).catch(print);
+                })
+            ,
+        }),
+        Box({ hexpand: true }),
+        TerminalIcon({ hpack: 'end' }),
+        PowerIcon({ hpack: 'end' }),
+    ]
+});
+export const Dashboard = () =>  PopupWindow({
+    name: "dashboard",
+    anchor: ["top","bottom", "right"],
+    margins: [12, 12, 15],
+    transition: "slide_left",
+    transitionDuration: 150,
+    child: 
+        Box({
+            vertical:true,
+            children: [
+                Box({
+                    className: "quicktoggles",
+                    vertical: true,
+                    vexpand: false,
+                    children: [
+                        uptime,
+                        Box({
+                            className: "buttons",
+                            children: [
+                                WiFi(),
+                                BluetoothWidget(),
+                            ]
+                        }),
+                    ]   
+                }),
+                VolumeSlider(),
+                // BrightnessSlider(),
+                NotificationList(),
+                CalendarWidget(),
+            ]
+        })
+});

modules/home/apps/helpers/ags/cfg/modules/dashboard/iconButtons.js

@@ -0,0 +1,21 @@
+import { Widget, Utils } from "../../imports.js"
+const { execAsync } = Utils;
+
+export const PowerIcon = () => Widget.Button({
+    className: 'Icon',
+    child: Widget.Label({ label:"⏻" }),
+    onClicked: () => {
+        App.closeWindow('dashboard');
+        execAsync(['bash', '-c', '~/.config/hypr/scripts/powermenu.sh', '&']);
+    },
+})
+export const TerminalIcon = () => Widget.Button({
+    className: 'Icon',
+    child: Widget.Label({ label:"󰄛" }),
+    onClicked: () => {
+        execAsync(['bash', '-c', 'kitty', '&']);
+        App.closeWindow('dashboard');
+
+    },
+
+})

modules/home/apps/helpers/ags/cfg/modules/dashboard/notificationList.js

@@ -0,0 +1,117 @@
+import { Widget, Notifications, Utils } from "../../imports.js";
+const { Box } = Widget;
+
+const Notifs = Widget.Box({
+    class_name: "panel-notifs",
+    spacing: 20,
+    vertical: true,
+    vexpand: true,
+    setup: (self) => {
+        self.hook(Notifications, (self) => {
+            self.children = Notifications.notifications.map(n => Widget.Box({
+                class_name: "notification",
+                vertical: true,
+                children: [
+
+                    Widget.Button({
+                        on_clicked: () => {
+                            n.close()
+                        },
+                        child: Box({
+                            class_name: "notificationBody",
+                            spacing: 20,
+                            children: [
+                                Widget.Label({
+                                    label: "󰍡",
+                                    class_name: "notificationImage"
+                                }),
+                                Box({
+                                    vertical: true,
+                                    children: [
+                                        Widget.Label({
+                                            label: `${n.summary}`,
+                                            class_name: "notificationTitle",
+                                            xalign: 0,
+                                            wrap: true
+                                        }),
+                                        Widget.Label({
+                                            vpack: "start",
+                                            hpack: "start",
+                                            class_name: "notificationDescription",
+                                            xalign: 0,
+                                            wrap: true,
+                                            label: n.body
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ],
+            })
+            )
+        })
+    }
+})
+const NotifBox = Widget.Scrollable({
+    vscroll: 'always',
+    hscroll: 'never',
+    vexpand: true,
+    class_name: 'notificationBox',
+    child: Notifs,
+})
+
+const Empty = Widget.Box({
+  class_name: "notificationEmpty",
+  spacing: 20,
+  hpack: "center",
+  vpack: "center",
+  vertical: true,
+  children: [
+    Widget.Label({
+      label: ` 󱙎 `,
+      vpack: "center",
+      vexpand: true,
+    })
+  ]
+})
+
+export const NotificationList = () => Widget.Box({
+    class_name: "notificationList",
+    spacing: 20,
+    vertical: true,
+    children: [
+        Widget.CenterBox({
+            start_widget: Widget.Label({
+                label: "Notifications",
+                hpack: 'start',
+                class_name: "nt"
+            }),
+            end_widget: Widget.Button({
+                label: "  ",
+                hpack: 'end',
+                class_name: "icon ni",
+                on_clicked: () => {
+                    const list = Array.from(Notifications.notifications);
+                    for (let i = 0; i < list.length; i++) {
+                        Utils.timeout(50 * i, () => list[i]?.close());
+                    }
+                }
+            })
+        }),
+
+        Widget.Stack({
+            transition: 'crossfade',
+            transitionDuration: 150,
+            items: [
+                ['empty', Empty],
+                ['list', NotifBox]
+            ],
+            setup: (self) => {
+                self.hook(Notifications, (self) => {
+                    self.shown = (Notifications.notifications.length == 0 ? 'empty' : 'list')
+                })
+            }
+        }),
+    ],
+})

modules/home/apps/helpers/ags/cfg/modules/dashboard/volumeSlider.js

@@ -0,0 +1,60 @@
+import { Widget, Audio } from "../../imports.js";
+const { Box } = Widget;
+
+const Icon = () => Widget.Label({
+    className: "sldIcon",
+    setup: (self) => {
+        self.hook(
+            Audio,
+            (self) => {
+                if (!Audio.speaker) return;
+
+                const icons = ["󰝟", "󰕿", "󰖀", "󰕾"];
+
+                self.label =
+                icons[
+                Audio.speaker.stream.isMuted
+                ? 0
+                : Math.floor((Audio.speaker.volume * 100) / 26)
+                ].toString();
+            },
+            "speaker-changed",
+        );
+    },
+});
+
+const Slider = () => Widget.Slider({
+    className: "sldSlider",
+    drawValue: false,
+    onChange: ({ value }) => (Audio.speaker.volume = value),
+    setup: (self) => {
+      self.hook(
+        Audio,
+        (self) => {
+          if (!Audio.speaker) return;
+
+          self.value = Audio.speaker.volume;
+        },
+        "speaker-changed",
+      );
+    },
+  });
+
+export const VolumeSlider = () => Box({
+    className: "Slider",
+    vertical: true,
+    children: [
+        Widget.Label({
+            className: "sldLabel",
+            label: "Volume",
+            hpack: "start",
+        }),
+        Box({
+            children: [
+                Icon(), 
+                Slider()
+            ],
+
+        }),
+    ],
+});

modules/home/apps/helpers/ags/cfg/modules/dashboard/wifi.js

@@ -0,0 +1,52 @@
+import { Widget, Network, Utils } from "../../imports.js";
+const { execAsync } = Utils
+const { Box } = Widget;
+
+export const WiFi = () =>
+	Widget.Button({
+		onClicked: () => Network.toggleWifi(),
+        onSecondaryClickRelease: () => {
+            execAsync(['bash', '-c', 'XDG_CURRENT_DESKTOP="gnome" gnome-control-center wifi', '&']);
+            App.closeWindow('dashboard');
+        },
+        child: Box({
+			className: "wifi",
+			vpack: "center",
+			vexpand: true,
+			setup: (self) => {
+				self.hook(Network, (self) => {
+					if (Network.wifi.internet === "disconnected") {
+						self.toggleClassName("off", true);
+					} else {
+						self.toggleClassName("off", false);
+					}
+				});
+			},
+			children: [
+				Widget.Label({
+					className: "wifiIcon",
+					label: "󰤭",
+					setup: (self) => {
+						self.hook(Network, (self) => {
+							if (Network.wifi.internet === "disconnected") {
+								self.label = "󰤭";
+							} else {
+								self.label = "󰤨";
+							}
+						});
+					},
+				}),
+				Box({
+					vertical: true,
+					vpack: "center",
+					children: [
+						Widget.Label({
+							className: "wifiLabel",
+							label: "Wi-Fi",
+							hpack: "start",
+						}),
+					],
+				}),
+			],
+		}),
+	});

modules/home/apps/helpers/ags/cfg/scss/_colors.scss

@@ -0,0 +1 @@
+$accent: #74C7EC;

modules/home/apps/helpers/ags/cfg/scss/bar/_bar.scss

@@ -0,0 +1,11 @@
+@import "clock";
+@import "media";
+@import "notification";
+@import "sysinfo";
+@import "title";
+@import "tray";
+@import "workspaces";
+
+.bar {
+    font-family: $font;
+}

modules/home/apps/helpers/ags/cfg/scss/bar/_clock.scss

@@ -0,0 +1,8 @@
+.clock {
+    background-color: #1e1e2e;
+    border-radius: 15px;
+    border: 3px solid #11111b;
+    color: #cdd6f4;
+    font-weight: bold;
+    padding: 1px 15px;
+}

modules/home/apps/helpers/ags/cfg/scss/bar/_media.scss

@@ -0,0 +1,12 @@
+.media {
+    background-color: #1e1e2e;
+    border-radius: 15px;
+    border: 3px solid #11111b;
+    color: #cdd6f4;
+    font-weight: bold;
+    padding: 1px 15px;
+    &:hover {
+        color: $accent;
+        border: 3px solid $accent;
+    }
+}

modules/home/apps/helpers/ags/cfg/scss/bar/_notification.scss

@@ -0,0 +1,9 @@
+.barNotification {
+    background-color: #1e1e2e;
+    border-radius: 15px;
+    border: 3px solid #11111b;
+    color: #cdd6f4;
+    font-weight: bold;
+    margin-right: 10px;
+    padding: 1px 15px;
+}

modules/home/apps/helpers/ags/cfg/scss/bar/_sysinfo.scss

@@ -0,0 +1,39 @@
+@keyframes lowBlink {
+  0% {
+    color: $accent;
+  }
+  50% {
+    color: #cdd6f4;
+  }
+  100% {
+    color: $accent;
+  }
+}
+.sysinfo {
+    background-color: #1e1e2e;
+    border-radius: 15px;
+    border: 3px solid #11111b;
+    color: #cdd6f4;
+    font-weight: bold;
+    margin-right: 10px;
+    padding: 1px 15px;
+    &:hover {
+        color: $accent;
+        border: 3px solid $accent;
+    }
+
+}
+.volume {
+    margin-left: 8px;
+}
+
+.bluetoothindicator {
+    margin-left: 8px;
+}
+.batIcon {
+    margin-left: 8px;
+    margin-right: 4px;
+    &.low {
+        animation: lowBlink 2s infinite;
+    }
+}

modules/home/apps/helpers/ags/cfg/scss/bar/_title.scss

@@ -0,0 +1,13 @@
+.title {
+    background: #1e1e2e;
+    border-radius: 15px;
+    border: 3px solid #11111b;
+    color: #cdd6f4;
+    font-weight: bold;
+    margin-left: 10px;
+    padding: 1px 15px;
+    &:hover {
+        color: $accent;
+        border: 3px solid $accent;
+    }
+}

modules/home/apps/helpers/ags/cfg/scss/bar/_tray.scss

@@ -0,0 +1,26 @@
+.tray{
+    > * {
+        margin: 0 4px;
+    }
+    background-color: #1e1e2e;
+    border-radius: 15px;
+    border: 3px solid #11111b;
+    color: #cdd6f4;
+    font-weight: bold;
+    margin-right: 10px;
+    padding: 1px 11px;
+}
+menu {
+    menuitem {
+        background-color: #1e1e2e;
+        border-radius: 15px;
+        border: 3px solid #11111b;
+        color: #cdd6f4;
+        margin: 1px;
+        padding: 5px;
+        &:hover {
+            color: $accent;
+            border: 3px solid $accent;
+        }
+    }
+}

modules/home/apps/helpers/ags/cfg/scss/bar/_workspaces.scss

@@ -0,0 +1,27 @@
+.workspaces_pill {
+    background: #1e1e2e;
+    border-radius: 15px;
+    border: 3px solid #11111b;
+    padding: 1px 15px;
+}
+
+.workspaces {
+    margin: 3px 0;
+    & button {
+        background: #cdd6f4;
+        border-radius: 24px;
+        margin: 0 3px;
+        min-height: 16px;
+        min-width: 16px;
+        transition: all 0.3s $materialStandard;
+
+        &:hover {
+            min-width: 24px;
+        }
+
+        &.focused {
+            background: $accent;
+            min-width: 32px;
+        }
+    }
+}

modules/home/apps/helpers/ags/cfg/scss/dashboard/_Slider.scss

@@ -0,0 +1,31 @@
+.Slider {
+    background: #1e1e2e;
+    border-radius: 15px;
+    border: 3px solid #11111b;
+    margin-bottom: 15px;
+    padding: 12px;
+}
+.sld {
+    &Label {
+        margin-bottom: 6px;
+    }
+    &Icon {
+        margin-right: 6px;
+    }
+    &Slider {
+        min-width: 300px;
+        & slider {
+            background: none;
+        }
+        & trough {
+            background: #313244;
+            border-radius: 24px;
+            min-height: 16px;
+        }
+        & highlight {
+            background: $accent;
+            border-radius: 24px;
+            min-width: 16px;
+        }
+    }
+}

modules/home/apps/helpers/ags/cfg/scss/dashboard/_calendar.scss

@@ -0,0 +1,13 @@
+.calendar {
+    background-color: #1e1e2e;
+    border-radius: 16px;
+    border: 3px solid #11111b;
+    color: #cdd6f4;
+    padding: 10px;
+}
+.calendarWidget {
+    padding: 3px;
+    &:selected {
+        color: $accent;
+    }
+}

modules/home/apps/helpers/ags/cfg/scss/dashboard/_dashboard.scss

@@ -0,0 +1,9 @@
+@import "Slider";
+@import "calendar";
+@import "notifications";
+@import "quicktoggles";
+
+.dashboard {
+    font-weight: bold;
+}
+

modules/home/apps/helpers/ags/cfg/scss/dashboard/_notifications.scss

@@ -0,0 +1,26 @@
+.notificationList {
+    background-color: #1e1e2e;
+    border-radius: 15px;
+    border: 3px solid #11111b;
+    margin-bottom: 15px;
+    padding: 10px;
+}
+.notificationEmpty {
+    color: #313244;
+    font-size: 80px;
+}
+.notificationImage {
+    color: #cdd6f4;
+    font-size: 40px;
+}
+.notification {
+    background-color: #313244;
+    border-radius: 15px;
+    padding:10px;
+}
+.notificationTitle {
+    color: #cdd6f4;
+}
+.notificationDescription { 
+    color: #bac2de;
+}

modules/home/apps/helpers/ags/cfg/scss/dashboard/_quicktoggles.scss

@@ -0,0 +1,37 @@
+.quicktoggles {
+    background: #1e1e2e;
+    border-radius: 15px;
+    border: 3px solid #11111b;
+    margin-bottom: 15px;
+    min-width: 300px;
+    padding: 20px 20px;
+}
+
+.buttons {
+    margin-top: 10px;
+}
+
+.bluetooth, .wifi {
+    background: $accent;
+    border-radius: 24px;
+    min-width: 125px;
+    padding: 9px;
+    &.off {
+        background: #313244;
+    }
+}
+.wifi {
+    margin-right: 10px;
+}
+.wifi, .bluetooth, {
+    &Icon {
+        margin-right: 6px;
+    }
+}
+.Icon {
+    background: #313244;
+    border-radius: 50%;
+    margin-left: 5px;
+    min-height: 32px;
+    min-width: 32px;
+}

modules/home/apps/helpers/ags/cfg/scss/main.scss

@@ -0,0 +1,14 @@
+*:not(selection):not(tooltip) {
+  all: unset;
+}
+
+// Vars
+$font: JetBrains Mono Nerd Font;
+$materialStandard: cubic-bezier(0.2, 0, 0, 1);
+$materialAccel: cubic-bezier(0.3, 0, 1, 1);
+$materialDecel: cubic-bezier(0, 0, 0, 1);
+
+// Components
+@import "./colors";
+@import "bar/bar";
+@import "dashboard/dashboard";

modules/home/apps/helpers/ags/cfg/services/brightness.js

@@ -0,0 +1,49 @@
+import { Service, Utils } from "../imports.js";
+
+class Brightness extends Service {
+	static {
+		Service.register(
+			this,
+			{},
+			{
+				screen: ["float", "rw"],
+			},
+		);
+	}
+
+	_screen = 0;
+
+	get screen() {
+		return this._screen;
+	}
+
+	set screen(percent) {
+		if (percent < 0) percent = 0;
+
+		if (percent > 1) percent = 1;
+
+		Utils.execAsync(`brightnessctl s ${percent * 100}% -q`)
+			.then(() => {
+				this._screen = percent;
+				this.changed("screen");
+			})
+			.catch(console.error);
+	}
+
+	constructor() {
+		super();
+		try {
+			this._screen =
+				Number(Utils.exec("brightnessctl g")) /
+				Number(Utils.exec("brightnessctl m"));
+		} catch (error) {
+			console.error("missing dependancy: brightnessctl");
+		}
+	}
+}
+
+const service = new Brightness();
+
+globalThis.brightness = service;
+
+export default service;

modules/home/apps/helpers/ags/cfg/style.css

@@ -0,0 +1,219 @@
+*:not(selection):not(tooltip) {
+  all: unset; }
+
+.clock {
+  background-color: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  color: #cdd6f4;
+  font-weight: bold;
+  padding: 1px 15px; }
+
+.media {
+  background-color: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  color: #cdd6f4;
+  font-weight: bold;
+  padding: 1px 15px; }
+  .media:hover {
+    color: #74C7EC;
+    border: 3px solid #74C7EC; }
+
+.barNotification {
+  background-color: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  color: #cdd6f4;
+  font-weight: bold;
+  margin-right: 10px;
+  padding: 1px 15px; }
+
+@keyframes lowBlink {
+  0% {
+    color: #74C7EC; }
+  50% {
+    color: #cdd6f4; }
+  100% {
+    color: #74C7EC; } }
+
+.sysinfo {
+  background-color: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  color: #cdd6f4;
+  font-weight: bold;
+  margin-right: 10px;
+  padding: 1px 15px; }
+  .sysinfo:hover {
+    color: #74C7EC;
+    border: 3px solid #74C7EC; }
+
+.volume {
+  margin-left: 8px; }
+
+.bluetoothindicator {
+  margin-left: 8px; }
+
+.batIcon {
+  margin-left: 8px;
+  margin-right: 4px; }
+  .batIcon.low {
+    animation: lowBlink 2s infinite; }
+
+.title {
+  background: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  color: #cdd6f4;
+  font-weight: bold;
+  margin-left: 10px;
+  padding: 1px 15px; }
+  .title:hover {
+    color: #74C7EC;
+    border: 3px solid #74C7EC; }
+
+.tray {
+  background-color: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  color: #cdd6f4;
+  font-weight: bold;
+  margin-right: 10px;
+  padding: 1px 11px; }
+  .tray > * {
+    margin: 0 4px; }
+
+menu menuitem {
+  background-color: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  color: #cdd6f4;
+  margin: 1px;
+  padding: 5px; }
+  menu menuitem:hover {
+    color: #74C7EC;
+    border: 3px solid #74C7EC; }
+
+.workspaces_pill {
+  background: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  padding: 1px 15px; }
+
+.workspaces {
+  margin: 3px 0; }
+  .workspaces button {
+    background: #cdd6f4;
+    border-radius: 24px;
+    margin: 0 3px;
+    min-height: 16px;
+    min-width: 16px;
+    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1); }
+    .workspaces button:hover {
+      min-width: 24px; }
+    .workspaces button.focused {
+      background: #74C7EC;
+      min-width: 32px; }
+
+.bar {
+  font-family: JetBrains Mono Nerd Font; }
+
+.Slider {
+  background: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  margin-bottom: 15px;
+  padding: 12px; }
+
+.sldLabel {
+  margin-bottom: 6px; }
+
+.sldIcon {
+  margin-right: 6px; }
+
+.sldSlider {
+  min-width: 300px; }
+  .sldSlider slider {
+    background: none; }
+  .sldSlider trough {
+    background: #313244;
+    border-radius: 24px;
+    min-height: 16px; }
+  .sldSlider highlight {
+    background: #74C7EC;
+    border-radius: 24px;
+    min-width: 16px; }
+
+.calendar {
+  background-color: #1e1e2e;
+  border-radius: 16px;
+  border: 3px solid #11111b;
+  color: #cdd6f4;
+  padding: 10px; }
+
+.calendarWidget {
+  padding: 3px; }
+  .calendarWidget:selected {
+    color: #74C7EC; }
+
+.notificationList {
+  background-color: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  margin-bottom: 15px;
+  padding: 10px; }
+
+.notificationEmpty {
+  color: #313244;
+  font-size: 80px; }
+
+.notificationImage {
+  color: #cdd6f4;
+  font-size: 40px; }
+
+.notification {
+  background-color: #313244;
+  border-radius: 15px;
+  padding: 10px; }
+
+.notificationTitle {
+  color: #cdd6f4; }
+
+.notificationDescription {
+  color: #bac2de; }
+
+.quicktoggles {
+  background: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  margin-bottom: 15px;
+  min-width: 300px;
+  padding: 20px 20px; }
+
+.buttons {
+  margin-top: 10px; }
+
+.bluetooth, .wifi {
+  background: #74C7EC;
+  border-radius: 24px;
+  min-width: 125px;
+  padding: 9px; }
+  .bluetooth.off, .wifi.off {
+    background: #313244; }
+
+.wifi {
+  margin-right: 10px; }
+
+.wifiIcon, .bluetoothIcon {
+  margin-right: 6px; }
+
+.Icon {
+  background: #313244;
+  border-radius: 50%;
+  margin-left: 5px;
+  min-height: 32px;
+  min-width: 32px; }
+
+.dashboard {
+  font-weight: bold; }

modules/home/apps/helpers/ags/cfg/style.cssyazicd

@@ -0,0 +1,219 @@
+*:not(selection):not(tooltip) {
+  all: unset; }
+
+.clock {
+  background-color: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  color: #cdd6f4;
+  font-weight: bold;
+  padding: 1px 15px; }
+
+.media {
+  background-color: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  color: #cdd6f4;
+  font-weight: bold;
+  padding: 1px 15px; }
+  .media:hover {
+    color: #f5c2e7;
+    border: 3px solid #f5c2e7; }
+
+.barNotification {
+  background-color: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  color: #cdd6f4;
+  font-weight: bold;
+  margin-right: 10px;
+  padding: 1px 15px; }
+
+@keyframes lowBlink {
+  0% {
+    color: #f5c2e7; }
+  50% {
+    color: #cdd6f4; }
+  100% {
+    color: #f5c2e7; } }
+
+.sysinfo {
+  background-color: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  color: #cdd6f4;
+  font-weight: bold;
+  margin-right: 10px;
+  padding: 1px 15px; }
+  .sysinfo:hover {
+    color: #f5c2e7;
+    border: 3px solid #f5c2e7; }
+
+.volume {
+  margin-left: 8px; }
+
+.bluetoothindicator {
+  margin-left: 8px; }
+
+.batIcon {
+  margin-left: 8px;
+  margin-right: 4px; }
+  .batIcon.low {
+    animation: lowBlink 2s infinite; }
+
+.title {
+  background: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  color: #cdd6f4;
+  font-weight: bold;
+  margin-left: 10px;
+  padding: 1px 15px; }
+  .title:hover {
+    color: #f5c2e7;
+    border: 3px solid #f5c2e7; }
+
+.tray {
+  background-color: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  color: #cdd6f4;
+  font-weight: bold;
+  margin-right: 10px;
+  padding: 1px 11px; }
+  .tray > * {
+    margin: 0 4px; }
+
+menu menuitem {
+  background-color: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  color: #cdd6f4;
+  margin: 1px;
+  padding: 5px; }
+  menu menuitem:hover {
+    color: #f5c2e7;
+    border: 3px solid #f5c2e7; }
+
+.workspaces_pill {
+  background: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  padding: 1px 15px; }
+
+.workspaces {
+  margin: 3px 0; }
+  .workspaces button {
+    background: #cdd6f4;
+    border-radius: 24px;
+    margin: 0 3px;
+    min-height: 16px;
+    min-width: 16px;
+    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1); }
+    .workspaces button:hover {
+      min-width: 24px; }
+    .workspaces button.focused {
+      background: #f5c2e7;
+      min-width: 32px; }
+
+.bar {
+  font-family: JetBrains Mono Nerd Font; }
+
+.Slider {
+  background: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  margin-bottom: 15px;
+  padding: 12px; }
+
+.sldLabel {
+  margin-bottom: 6px; }
+
+.sldIcon {
+  margin-right: 6px; }
+
+.sldSlider {
+  min-width: 300px; }
+  .sldSlider slider {
+    background: none; }
+  .sldSlider trough {
+    background: #313244;
+    border-radius: 24px;
+    min-height: 16px; }
+  .sldSlider highlight {
+    background: #f5c2e7;
+    border-radius: 24px;
+    min-width: 16px; }
+
+.calendar {
+  background-color: #1e1e2e;
+  border-radius: 16px;
+  border: 3px solid #11111b;
+  color: #cdd6f4;
+  padding: 10px; }
+
+.calendarWidget {
+  padding: 3px; }
+  .calendarWidget:selected {
+    color: #74c7ec; }
+
+.notificationList {
+  background-color: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  margin-bottom: 15px;
+  padding: 10px; }
+
+.notificationEmpty {
+  color: #313244;
+  font-size: 80px; }
+
+.notificationImage {
+  color: #cdd6f4;
+  font-size: 40px; }
+
+.notification {
+  background-color: #313244;
+  border-radius: 15px;
+  padding: 10px; }
+
+.notificationTitle {
+  color: #cdd6f4; }
+
+.notificationDescription {
+  color: #bac2de; }
+
+.quicktoggles {
+  background: #1e1e2e;
+  border-radius: 15px;
+  border: 3px solid #11111b;
+  margin-bottom: 15px;
+  min-width: 300px;
+  padding: 20px 20px; }
+
+.buttons {
+  margin-top: 10px; }
+
+.bluetooth, .wifi {
+  background: #f5c2e7;
+  border-radius: 24px;
+  min-width: 125px;
+  padding: 9px; }
+  .bluetooth.off, .wifi.off {
+    background: #313244; }
+
+.wifi {
+  margin-right: 10px; }
+
+.wifiIcon, .bluetoothIcon {
+  margin-right: 6px; }
+
+.Icon {
+  background: #313244;
+  border-radius: 50%;
+  margin-left: 5px;
+  min-height: 32px;
+  min-width: 32px; }
+
+.dashboard {
+  font-weight: bold; }

modules/home/apps/helpers/ags/cfg/utils/popupWindow.js

@@ -0,0 +1,52 @@
+import { App, Widget, Utils } from "../imports.js";
+const { Box, Revealer, Window } = Widget;
+
+export default ({
+  onOpen = () => {},
+  onClose = () => {},
+
+  name,
+  child,
+  transition = "slide_up",
+  transitionDuration = 250,
+  ...props
+}) => {
+  const window = Window({
+    name,
+    visible: false,
+    ...props,
+
+    child: Box({
+      css: `min-height: 2px;
+            min-width: 2px;`,
+      child: Revealer({
+        transition,
+        transitionDuration,
+        hexpand: true,
+        vexpand: true,
+        child: child || Box(),
+        setup: (self) => {
+          self.hook(App, (rev, currentName, isOpen) => {
+            if (currentName === name) {
+              rev.revealChild = isOpen;
+
+              if (isOpen) {
+                onOpen(window);
+              } else {
+                Utils.timeout(transitionDuration, () => {
+                  onClose(window);
+                });
+              }
+            }
+          });
+        },
+      }),
+    }),
+  });
+  window.getChild = () => window.child.children[0].child;
+  window.setChild = (newChild) => {
+    window.child.children[0].child = newChild;
+    window.child.children[0].show_all(); };
+
+  return window;
+};

modules/home/apps/helpers/ags/default.nix

@@ -0,0 +1,73 @@
+{
+  options,
+  config,
+  lib,
+  inputs,
+  pkgs,
+  ...
+}:
+with lib;
+with lib.custom; let
+  cfg = config.apps.helpers.ags;
+
+  requiredDeps = with pkgs; [
+    config.wayland.windowManager.hyprland.package
+    bash
+    coreutils
+    gawk
+    sassc
+    imagemagick
+    procps
+    ripgrep
+    util-linux
+    gtksourceview
+    webkitgtk
+    brightnessctl
+    gvfs
+    accountsservice
+    swww
+    gnome.gnome-control-center
+    gnome.nautilus
+    gnome.totem
+    loupe
+  ];
+
+  guiDeps = with pkgs; [
+    gnome.gnome-control-center
+    mission-center
+    overskride
+    wlogout
+  ];
+
+  dependencies = requiredDeps ++ guiDeps;
+in {
+  options.apps.helpers.ags = with types; {
+    enable = mkBoolOpt false "Enable AGS";
+  };
+
+  config = mkIf cfg.enable {
+    programs.ags = {
+      enable = true;
+
+      configDir = ./cfg;
+
+      extraPackages = dependencies;
+    };
+
+    systemd.user.services.ags = {
+      Unit = {
+        Description = "Aylur's Gtk Shell";
+        PartOf = [
+          "tray.target"
+          "graphical-session.target"
+        ];
+      };
+      Service = {
+        Environment = "PATH=/run/wrappers/bin:${lib.makeBinPath dependencies}";
+        ExecStart = "${config.programs.ags.package}/bin/ags";
+        Restart = "on-failure";
+      };
+      Install.WantedBy = ["graphical-session.target"];
+    };
+  };
+}