diff --git a/devices/binto/config/ags/config.js b/devices/binto/config/ags/config.js
new file mode 100644
index 00000000..1e093aa4
--- /dev/null
+++ b/devices/binto/config/ags/config.js
@@ -0,0 +1,32 @@
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import { exec } from 'resource:///com/github/Aylur/ags/utils.js';
+
+import Pointers from 'file:///home/matt/.nix/devices/wim/config/ags/services/pointers.js';
+
+import Bar from './js/bar/main.js';
+import { NotifPopups, NotifCenter } from './js/notifications/main.js';
+
+const scss = App.configDir + '/scss/main.scss';
+const css = App.configDir + '/style.css';
+exec(`sassc ${scss} ${css}`);
+
+
+export default {
+ style: css,
+
+ notificationPopupTimeout: 5000,
+ cacheNotificationActions: true,
+
+ onConfigParsed: () => {
+ globalThis.Ponters = Pointers;
+ },
+
+ closeWindowDelay: {
+ 'notification-center': 500,
+ },
+ windows: [
+ Bar(),
+ NotifCenter(),
+ NotifPopups(),
+ ],
+};
diff --git a/devices/binto/config/ags/js/bar/buttons/clock.js b/devices/binto/config/ags/js/bar/buttons/clock.js
new file mode 100644
index 00000000..d4cd1f76
--- /dev/null
+++ b/devices/binto/config/ags/js/bar/buttons/clock.js
@@ -0,0 +1,15 @@
+import { Label } from 'resource:///com/github/Aylur/ags/widget.js';
+
+
+export default () => Label({
+ className: 'clock',
+
+ connections: [[1000, (self) => {
+ const time = imports.gi.GLib
+ .DateTime.new_now_local();
+
+ self.label = time.format('%a. ') +
+ time.get_day_of_month() +
+ time.format(' %b. %H:%M');
+ }]],
+})
diff --git a/devices/binto/config/ags/js/bar/main.js b/devices/binto/config/ags/js/bar/main.js
new file mode 100644
index 00000000..374b498a
--- /dev/null
+++ b/devices/binto/config/ags/js/bar/main.js
@@ -0,0 +1,34 @@
+import { Box, CenterBox, Window } from 'resource:///com/github/Aylur/ags/widget.js';
+
+import SysTray from 'file:///home/matt/.nix/devices/wim/config/ags/js/bar/buttons/systray.js';
+import NotifButton from 'file:///home/matt/.nix/devices/wim/config/ags/js/bar/buttons/notif-button.js';
+import Clock from './buttons/clock.js';
+
+export default () => Window({
+ name: 'bar',
+ layer: 'overlay',
+ exclusivity: 'exclusive',
+ anchor: ['bottom', 'left', 'right'],
+ monitor: 1,
+
+ child: CenterBox({
+ start_widget: Box({
+ hpack: 'start',
+ children: [
+ SysTray(),
+ ],
+ }),
+
+ center_widget: Box({
+ hpack: 'center',
+ }),
+
+ end_widget: Box({
+ hpack: 'end',
+ children: [
+ NotifButton(),
+ Clock(),
+ ],
+ }),
+ }),
+});
diff --git a/devices/binto/config/ags/js/notifications/main.js b/devices/binto/config/ags/js/notifications/main.js
new file mode 100644
index 00000000..745c9a87
--- /dev/null
+++ b/devices/binto/config/ags/js/notifications/main.js
@@ -0,0 +1,27 @@
+import PopUpsWidget from 'file:///home/matt/.nix/devices/wim/config/ags/js/notifications/popup.js';
+import NotifCenterWidget from 'file:///home/matt/.nix/devices/wim/config/ags/js/notifications/center.js';
+
+import PopupWindow from 'file:///home/matt/.nix/devices/wim/config/ags/js/misc/popup.js';
+
+
+export const NotifPopups = () => PopupWindow({
+ name: 'notifications',
+ anchor: ['bottom', 'left'],
+ visible: true,
+ transition: 'none',
+ closeOnUnfocus: 'stay',
+ monitor: 1,
+
+ child: PopUpsWidget(),
+});
+
+
+export const NotifCenter = () => PopupWindow({
+ name: 'notification-center',
+ anchor: ['bottom', 'right'],
+ margins: [0, 169, 0, 0],
+ transition: 'slide_up',
+ monitor: 1,
+
+ child: NotifCenterWidget(),
+});
diff --git a/devices/binto/config/ags/scss/main.scss b/devices/binto/config/ags/scss/main.scss
new file mode 100644
index 00000000..ac5bfc7d
--- /dev/null
+++ b/devices/binto/config/ags/scss/main.scss
@@ -0,0 +1,14 @@
+window,
+button,
+eventbox,
+box,
+progressbar,
+trough,
+undershoot {
+ all: unset;
+}
+
+@import '/home/matt/.nix/devices/wim/config/ags/scss/common';
+@import './widgets/bar';
+@import './widgets/notification';
+@import './widgets/notification-center';
diff --git a/devices/binto/config/ags/scss/widgets/bar.scss b/devices/binto/config/ags/scss/widgets/bar.scss
new file mode 100644
index 00000000..db03cf00
--- /dev/null
+++ b/devices/binto/config/ags/scss/widgets/bar.scss
@@ -0,0 +1,23 @@
+.clock, .notif-panel {
+ margin: 0 5px 5px 0;
+ padding: 2.5px 5px;
+ background-color: $bgfull;
+}
+
+.sys-tray {
+ margin: 0 0 5px 5px;
+
+ menubar {
+ background-color: $bgfull;
+ padding: 2.5px;
+ }
+
+ menuitem {
+ image { color: #CBA6F7; }
+ padding: 0 2px;
+
+ * {
+ font-size: 25px;
+ }
+ }
+}
diff --git a/devices/binto/config/ags/scss/widgets/notification-center.scss b/devices/binto/config/ags/scss/widgets/notification-center.scss
new file mode 100644
index 00000000..ae94e6b4
--- /dev/null
+++ b/devices/binto/config/ags/scss/widgets/notification-center.scss
@@ -0,0 +1,106 @@
+.notification-center {
+ min-height: 700px;
+ min-width: 524px;
+ background: $bg;
+ padding: 0;
+
+ * {
+ font-size: 16px;
+ }
+
+ .header {
+ padding: 10px;
+ margin-top: 22px;
+ margin-bottom: 9px;
+
+ label {
+ font-size: 22px;
+ }
+
+ button {
+ all: unset;
+ transition: 200ms;
+ color: #eee;
+ background-color: #664C90;
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+ padding: 4.5px 9px;
+
+ &:hover {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+ background-color: rgba(238, 238, 238, 0.154);
+ color: #f1f1f1;
+ }
+
+ &:disabled {
+ box-shadow: none;
+ background-color: rgba(#664C90, 0.3);
+ color: rgba(238, 238, 238, 0.3);
+ }
+
+ label {
+ font-size: 1.2em;
+ }
+ }
+ }
+
+ .notification-list-box {
+ background: $bgfull;
+ padding: 0 12px;
+ box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
+
+ scrollbar {
+ all: unset;
+ border-radius: 8px;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+
+ * {
+ all: unset;
+ }
+
+ &:hover {
+ border-radius: 8px;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ }
+
+ scrollbar.vertical {
+ transition: 200ms;
+ background-color: rgba(23, 23, 23, 0.3);
+
+ &:hover {
+ background-color: rgba(23, 23, 23, 0.7);
+
+ slider {
+ background-color: rgba(238, 238, 238, 0.7);
+ min-width: .6em;
+ }
+ }
+
+ slider {
+ background-color: rgba(238, 238, 238, 0.5);
+ border-radius: 9px;
+ min-width: .4em;
+ min-height: 2em;
+ transition: 200ms;
+ }
+ }
+ }
+
+ .placeholder {
+ color: white;
+
+ image {
+ font-size: 7em;
+ text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+ -gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+ }
+
+ label {
+ font-size: 1.2em;
+ text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+ -gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+ }
+ }
+}
diff --git a/devices/binto/config/ags/scss/widgets/notification.scss b/devices/binto/config/ags/scss/widgets/notification.scss
new file mode 100644
index 00000000..9a4a1a5a
--- /dev/null
+++ b/devices/binto/config/ags/scss/widgets/notification.scss
@@ -0,0 +1,206 @@
+$background-color-1: rgba(238, 238, 238, 0.154);
+$background-color-2: rgba(230, 112, 144, 0.5);
+$background-color-3: rgba(238, 238, 238, 0.06);
+$background-color-4: #51a4e7;
+$background-color-5: transparent;
+$background-color-6: #171717;
+$background-color-7: rgba(23, 23, 23, 0.3);
+$background-color-8: rgba(23, 23, 23, 0.7);
+$background-color-9: rgba(238, 238, 238, 0.7);
+$background-color-10: rgba(238, 238, 238, 0.5);
+
+.notification.critical {
+ >box {
+ box-shadow: inset 0 0 0.5em 0 #e67090;
+ }
+}
+
+.notification {
+ >box {
+ all: unset;
+ box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.4);
+ margin: 9px 9px 0;
+ background-color: $bg;
+ padding: 16.2px;
+
+ * {
+ font-size: 16px;
+ }
+ }
+
+ &:hover {
+ .close-button {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+ background-color: $background-color-1;
+ background-color: $background-color-2;
+ }
+ }
+
+ .title {
+ margin-right: 9px;
+ font-size: 1.1em;
+ }
+
+ .description {
+ font-size: .9em;
+ min-width: 350px;
+ }
+
+ .icon {
+ margin-right: 9px;
+ }
+
+ .icon.img {
+ border: 1px solid rgba(238, 238, 238, 0.03);
+ }
+
+ .actions {
+ button {
+ all: unset;
+ transition: all 500ms;
+ background-color: $background-color-3;
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+ font-size: 1.2em;
+ padding: 4.5px 9px;
+ margin: 9px 4.5px 0;
+
+ * {
+ font-size: 16px;
+ }
+
+ &:focus {
+ box-shadow: inset 0 0 0 1px #51a4e7;
+ background-color: $background-color-1;
+ }
+
+ &:hover {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+ background-color: $background-color-1;
+ }
+
+ &:active {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+ background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+ background-color: $background-color-4;
+
+ &:hover {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+ }
+ }
+
+ &:checked {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+ background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+ background-color: $background-color-4;
+
+ &:hover {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+ }
+ }
+
+ &:disabled {
+ box-shadow: none;
+ background-color: $background-color-5;
+ }
+
+ &:first-child {
+ margin-left: 0;
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+
+ button.on {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+ background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+ background-color: $background-color-4;
+
+ &:hover {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+ }
+ }
+
+ button.active {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+ background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+ background-color: $background-color-4;
+
+ &:hover {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+ }
+ }
+ }
+
+ button.close-button {
+ all: unset;
+ transition: all 500ms;
+ background-color: $background-color-5;
+ background-image: none;
+ box-shadow: none;
+ margin-left: 9px;
+ min-width: 1.2em;
+ min-height: 1.2em;
+
+ * {
+ font-size: 16px;
+ }
+
+ &:focus {
+ box-shadow: inset 0 0 0 1px #51a4e7;
+ background-color: $background-color-1;
+ }
+
+ &:hover {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+ background-color: $background-color-1;
+ background-color: $background-color-2;
+ }
+
+ &:active {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+ background-color: $background-color-4;
+ background-image: linear-gradient(#e67090, #e67090);
+
+ &:hover {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+ }
+ }
+
+ &:checked {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+ background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+ background-color: $background-color-4;
+
+ &:hover {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+ }
+ }
+
+ &:disabled {
+ box-shadow: none;
+ background-color: $background-color-5;
+ }
+ }
+
+ button.close-button.on {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+ background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+ background-color: $background-color-4;
+
+ &:hover {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+ }
+ }
+
+ button.close-button.active {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+ background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+ background-color: $background-color-4;
+
+ &:hover {
+ box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+ }
+ }
+}
diff --git a/devices/binto/default.nix b/devices/binto/default.nix
index ddc0b532..5064e14d 100644
--- a/devices/binto/default.nix
+++ b/devices/binto/default.nix
@@ -42,6 +42,7 @@
../../home/firefox
../../home/hyprland
+ ./home/ags.nix
./home/packages.nix
];
diff --git a/devices/binto/home/ags.nix b/devices/binto/home/ags.nix
new file mode 100644
index 00000000..34c32a60
--- /dev/null
+++ b/devices/binto/home/ags.nix
@@ -0,0 +1,31 @@
+{
+ pkgs,
+ config,
+ ags,
+ ...
+}: let
+ configDir = config.services.device-vars.configDir;
+ symlink = config.lib.file.mkOutOfStoreSymlink;
+in {
+ imports = [
+ ags.homeManagerModules.default
+ ];
+
+ programs.ags = {
+ enable = true;
+ configDir = symlink "${configDir}/ags";
+ package = ags.packages.x86_64-linux.default;
+ extraPackages = [pkgs.libgudev];
+ };
+
+ home.packages = with pkgs; [
+ # ags
+ sassc
+ coloryou
+ playerctl
+
+ ## gui
+ pavucontrol # TODO: replace with ags widget
+ networkmanagerapplet # TODO: replace with ags widget
+ ];
+}