feat(ags): add battery and systray modules. change default outline to tray items

config/ags/js/bar/bar.js

@@ -9,6 +9,8 @@ import { TabletToggle }   from './tablet-toggle.js';
 import { QsToggle }       from './quick-settings.js';
 import { NotifButton }    from './notif-button.js';
 import { Clock }          from './clock.js';
+import { SysTray }        from './systray.js';
+import { BatteryLabel }   from './battery.js';
 
 export const Bar = Window({
   name: 'left-bar',
@@ -41,6 +43,10 @@ export const Bar = Window({
 
           Separator(12),
 
+          SysTray,
+
+          Separator(12),
+
           Workspaces,
 
         ],
@@ -53,6 +59,10 @@ export const Bar = Window({
       Box({
         halign: 'end',
         children: [
+          BatteryLabel(),
+
+          Separator(12),
+
           Clock,
 
           Separator(12),

config/ags/js/bar/battery.js

@@ -0,0 +1,60 @@
+const { Battery } = ags.Service;
+const { Label, Icon, Stack, ProgressBar, Overlay, Box } = ags.Widget;
+import { Separator } from '../common.js';
+const { exec } = ags.Utils;
+
+const icons = charging => ([
+  ...Array.from({ length: 9 }, (_, i) => i * 10).map(i => ([
+    `${i}`, Icon({
+      className: `${i} ${charging ? 'charging' : 'discharging'}`,
+      icon: `battery-level-${i}${charging ? '-charging' : ''}-symbolic`,
+    }),
+  ])),
+  ['100', Icon({
+    className: `100 ${charging ? 'charging' : 'discharging'}`,
+    icon: `battery-level-100${charging ? '-charged' : ''}-symbolic`,
+  })],
+]);
+
+const Indicators = charging => Stack({
+  items: icons(charging),
+  connections: [[1000, stack => {
+    stack.shown = `${Math.floor(exec('cat /sys/class/power_supply/BAT0/capacity') / 10) * 10}`;
+  }]],
+});
+
+export const Indicator = ({
+  charging = Indicators(true),
+  discharging = Indicators(false),
+  ...props
+} = {}) => Stack({
+  ...props,
+  className: 'battery-indicator',
+  items: [
+    ['true', charging],
+    ['false', discharging],
+  ],
+  connections: [[1000, stack => {
+    const charging = exec('cat /sys/class/power_supply/BAT0/status') == 'Charging';
+    const charged = exec('cat /sys/class/power_supply/BAT0/capacity') == 100;
+    stack.shown = `${charging || charged}`;
+    stack.toggleClassName('charging', charging);
+    stack.toggleClassName('charged', charged);
+    stack.toggleClassName('low', exec('cat /sys/class/power_supply/BAT0/capacity') < 30);
+  }]],
+});
+
+export const LevelLabel = props => Label({
+  ...props,
+  className: 'label',
+  connections: [[1000, label => label.label = `${exec('cat /sys/class/power_supply/BAT0/capacity')}%`]],
+});
+
+export const BatteryLabel = () => Box({
+  className: 'toggle-off battery',
+  children: [
+    Indicator(),
+    Separator(5),
+    LevelLabel(),
+  ],
+});

config/ags/js/bar/systray.js

@@ -0,0 +1,47 @@
+const { SystemTray } = ags.Service;
+const { Box, Button, Icon, MenuItem } = ags.Widget;
+const { Gtk } = imports.gi;
+
+// this one uses a MenuBar and shouldn't throw that destroyed widget warning
+const SysTrayItem = item => MenuItem({
+    className: 'tray-item',
+    child: Icon({
+        size: 24,
+    }),
+    submenu: item.menu,
+    connections: [[item, btn => {
+        btn.child.icon = item.icon;
+        btn.tooltipMarkup = item.tooltipMarkup;
+    }]]
+});
+
+export const SysTrayModule = () => ags.Widget({
+    type: Gtk.MenuBar,
+    className: 'sys-tray',
+    properties: [
+        ['items', new Map()],
+        ['onAdded', (box, id) => {
+            const item = SystemTray.getItem(id);
+            if (box._items.has(id) || !item)
+                return;
+
+            const widget = SysTrayItem(item);
+            box._items.set(id, widget);
+            box.add(widget);
+            box.show_all();
+        }],
+        ['onRemoved', (box, id) => {
+            if (!box._items.has(id))
+                return;
+
+            box._items.get(id).destroy();
+            box._items.delete(id);
+        }],
+    ],
+    connections: [
+        [SystemTray, (box, id) => box._onAdded(box, id), 'added'],
+        [SystemTray, (box, id) => box._onRemoved(box, id), 'removed'],
+    ],
+});
+
+export const SysTray = SysTrayModule();

config/ags/scss/common.scss

@@ -2,7 +2,7 @@ $darkbg: #0b0d16;
 $bg: rgba(40, 42, 54, 0.8); //rgba(69, 71, 90, 0.3); #0d0f18;
 $bgfull: rgb(40, 42, 54);
 $contrastbg: rgba(189, 147, 249, 0.8);
-$bgSecondary: #11131c;
+$bgSecondary: rgba(#382c4a, 0.8);
 $bgSecondaryAlt: #a5b6cf;
 $fg: #a5b6cf;
 $fgDim: #a5b6cf;

config/ags/scss/main.scss

@@ -6,3 +6,4 @@
 @import "./widgets/powermenu.scss";
 @import "./widgets/traybuttons.scss";
 @import "./widgets/workspaces.scss";
+@import "./widgets/systray.scss";

config/ags/scss/widgets/systray.scss

@@ -0,0 +1,45 @@
+.sys-tray {
+  padding: 5px;
+  background-color: $bg;
+  color: #CBA6F7;
+  border-radius: 80px;
+  border: 2px solid #1b1b2b;
+  transition: background-color 0.5s ease-in-out,
+              border 0.5s ease-in-out;
+
+  .tray-item {
+    all: unset;
+    padding: 0px 2px 0px 2px;
+    font-size: 25px;
+  }
+
+* {
+  min-width: 20px;
+  min-height: 20px;
+}
+  menuitem:not(.tray-item) {
+    background: $bgfull;
+    padding: 5px;
+    border-left: 2px solid #1b1b2b;
+    border-right: 2px solid #1b1b2b;
+    transition: background-color 0.2s ease-in-out;
+
+    &:hover {
+      background: #1b1b1b;
+    }
+
+    &:nth-child(1) {
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      border-top: 2px solid #1b1b2b;
+      padding-top: 10px;
+    }
+    &:nth-last-child(1) {
+      border-bottom-left-radius: 10px;
+      border-bottom-right-radius: 10px;
+      border-bottom: 2px solid #1b1b2b;
+      padding-bottom: 10px;
+    }
+  }
+}
+

config/ags/scss/widgets/traybuttons.scss

@@ -34,7 +34,7 @@
   background-color: $bg;
   color: #CBA6F7;
   border-radius: 80px;
-  border: 2px solid #1b1b2b;
+  border: 2px solid $bgSecondary;
   transition: background-color 0.5s ease-in-out,
               border 0.5s ease-in-out;
 }
@@ -59,6 +59,26 @@
   padding-left: 10px;
   padding-right: 10px;
   min-width: 230px;
-  border: 2px solid rgba(#382c4a, 0.8);
-  border-radius: 80px;
+}
+
+.battery {
+  padding: 0 10px 0 10px;
+  font-size: 20px;
+
+  .battery-indicator {
+    &.charging {
+      color: green;
+    }
+    &.charged {}
+    &.low {
+      color: red;
+    }
+  }
+  icon {
+    .charging {}
+    .discharging {}
+  }
+  .label {
+    font-size: 20px;
+  }
 }

config/ags/style.css

@@ -22,9 +22,9 @@
     min-width: 80px;
     transition: all ease .2s; }
     .powermenu button:hover {
-      background-color: #11131c; }
+      background-color: rgba(56, 44, 74, 0.8); }
     .powermenu button:active {
-      background-color: #11131c; }
+      background-color: rgba(56, 44, 74, 0.8); }
     .powermenu button .content {
       border-radius: 4px;
       padding: 0px 15px 0px 15px; }
@@ -69,7 +69,7 @@
   background-color: rgba(40, 42, 54, 0.8);
   color: #CBA6F7;
   border-radius: 80px;
-  border: 2px solid #1b1b2b;
+  border: 2px solid rgba(56, 44, 74, 0.8);
   transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
 
 .toggle-on {
@@ -87,9 +87,17 @@
   font-size: 20px;
   padding-left: 10px;
   padding-right: 10px;
-  min-width: 230px;
-  border: 2px solid rgba(56, 44, 74, 0.8);
-  border-radius: 80px; }
+  min-width: 230px; }
+
+.battery {
+  padding: 0 10px 0 10px;
+  font-size: 20px; }
+  .battery .battery-indicator.charging {
+    color: green; }
+  .battery .battery-indicator.low {
+    color: red; }
+  .battery .label {
+    font-size: 20px; }
 
 .workspaces {
   background-color: rgba(40, 42, 54, 0.8);
@@ -115,3 +123,36 @@
   .workspaces .active {
     border: 2px solid #50fa7b;
     transition: border-color 0.25s linear; }
+
+.sys-tray {
+  padding: 5px;
+  background-color: rgba(40, 42, 54, 0.8);
+  color: #CBA6F7;
+  border-radius: 80px;
+  border: 2px solid #1b1b2b;
+  transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
+  .sys-tray .tray-item {
+    all: unset;
+    padding: 0px 2px 0px 2px;
+    font-size: 25px; }
+  .sys-tray * {
+    min-width: 20px;
+    min-height: 20px; }
+  .sys-tray menuitem:not(.tray-item) {
+    background: #282a36;
+    padding: 5px;
+    border-left: 2px solid #1b1b2b;
+    border-right: 2px solid #1b1b2b;
+    transition: background-color 0.2s ease-in-out; }
+    .sys-tray menuitem:not(.tray-item):hover {
+      background: #1b1b1b; }
+    .sys-tray menuitem:not(.tray-item):nth-child(1) {
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      border-top: 2px solid #1b1b2b;
+      padding-top: 10px; }
+    .sys-tray menuitem:not(.tray-item):nth-last-child(1) {
+      border-bottom-left-radius: 10px;
+      border-bottom-right-radius: 10px;
+      border-bottom: 2px solid #1b1b2b;
+      padding-bottom: 10px; }

config/hypr/main.conf

@@ -19,13 +19,8 @@ exec-once = bash -c "sleep 3; XDG_DATA_DIRS=$kora nm-applet"
 exec-once = bash -c "sleep 4; blueberry-tray"
 exec-once = bash -c "sleep 5; nextcloud --background"
 
-exec-once = eww daemon
-exec-once = eww open left-bar
-exec-once = eww open notif-panel
-exec-once = eww open quick-settings-toggle
-
-# sometimes waybar starts after and stops me from pressing eww buttons
-exec-once = bash -c "sleep 0.8; eww reload"
+exec-once = XDG_DATA_DIRS=$kora ags
+exec-once  eww daemon
 
 exec-once = gnome-keyring-daemon --start --components=secrets
 exec-once = squeekboard
@@ -33,8 +28,6 @@ exec-once = squeekboard
 exec-once = wofi --show drun
 exec-once = hyprpaper
 
-# after boot, there are 2 bars for some reason, so I kill them and rerun the command
-exec-once = bash -c "killall -r -0 waybar && killall -r waybar; XDG_DATA_DIRS=$kora waybar"
 exec-once = swaync
 
 exec-once = wl-paste --watch cliphist store

nixos/home/bashdots.nix

@@ -39,6 +39,8 @@
       ls    = "ls -lah --color=auto";
       cp    = "cp -r";
 
+      ags   = "XDG_DATA_DIRS=/home/matt/.config/share ags | grep -v On";
+
       tup   = "tailscale up --login-server https://headscale.nelim.org";
 
       pc    = "mosh matt@10.0.0.248 -- tmux -2u new -At laptop";

nixos/home/hyprland.nix

@@ -11,8 +11,6 @@
 in
 {
   home.packages = [
-    (builtins.getFlake "github:hyprwm/Hyprland").packages.x86_64-linux.default
-    (builtins.getFlake "path:/home/matt/git/hyprland-touch-gestures").packages.x86_64-linux.default
     (builtins.getFlake "github:Aylur/ags").packages.x86_64-linux.default
     pkgs.sassc
     pkgs.kora-icon-theme
@@ -25,10 +23,10 @@ in
 
   wayland.windowManager.hyprland = {
     enable = true;
-    package = (builtins.getFlake "github:hyprwm/Hyprland").packages.x86_64-linux.default; # to be able to get the right ver from hyprctl version
+    package = (builtins.getFlake "github:horriblename/hyprgrass").inputs.hyprland.packages.x86_64-linux.default;
     
     plugins = [
-      "${(builtins.getFlake "path:/home/matt/git/hyprland-touch-gestures").packages.x86_64-linux.default}/lib/libtouch-gestures.so"
+      "${(builtins.getFlake "github:horriblename/hyprgrass").packages.x86_64-linux.default}/lib/libhyprgrass.so"
     ];
 
     extraConfig = ''