feat(binto): make minimal ags config

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(),
+    ],
+};

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');
+    }]],
+})

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(),
+            ],
+        }),
+    }),
+});

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(),
+});

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';

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;
+    }
+  }
+}

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);
+    }
+  }
+}

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);
+    }
+  }
+}

devices/binto/default.nix

@@ -42,6 +42,7 @@
         ../../home/firefox
         ../../home/hyprland
 
+        ./home/ags.nix
         ./home/packages.nix
       ];
 

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
+  ];
+}