feat(ags): start bar

config/ags/scripts/heart.sh

@@ -0,0 +1,13 @@
+#!/usr/bin/env bash
+
+FILE="$HOME/.config/.heart"
+
+toggle() {
+  if grep -q 󰣐 "$FILE"; then
+    echo  > "$FILE"
+  else
+    echo 󰣐 >> "$FILE"
+  fi
+}
+
+[[ "$1" == "toggle" ]] && toggle

config/ags/scripts/osk-toggle.sh

@@ -0,0 +1,30 @@
+#!/usr/bin/env bash
+
+state () {
+    if [[ $(busctl get-property --user sm.puri.OSK0 /sm/puri/OSK0 sm.puri.OSK0 Visible) == "b true" ]]; then
+        echo "Running"
+    else
+        echo "Stopped"
+    fi
+}
+
+toggle () {
+    if [[ $(busctl get-property --user sm.puri.OSK0 /sm/puri/OSK0 sm.puri.OSK0 Visible) == "b true" ]]; then
+        echo "Running"
+        busctl call --user sm.puri.OSK0 /sm/puri/OSK0 sm.puri.OSK0 SetVisible b false
+    else
+        echo "Stopped"
+        busctl call --user sm.puri.OSK0 /sm/puri/OSK0 sm.puri.OSK0 SetVisible b true
+    fi
+}
+
+if [[ $1 == "getState" ]]; then
+    while true; do
+        sleep 0.2
+        state
+    done
+fi
+
+if [[ $1 == "toggle" ]];then
+    toggle
+fi

config/ags/traybuttons/traybuttons.js

@@ -1,15 +1,82 @@
+import Gdk from 'gi://Gdk';
+const display = Gdk.Display.get_default();
+
+const Separator = () => ags.Widget.Box({
+  style: 'min-width: 8px; min-height: 8px',
+});
+
+ags.Utils.subprocess(
+  ['bash', '-c', '/home/matt/.nix/config/ags/scripts/osk-toggle.sh getState'],
+  (output) => {
+    if (output == 'Running') {
+      OskToggle.toggleClassName('toggle-on', true);
+    } else {
+      OskToggle.toggleClassName('toggle-on', false);
+    }
+  },
+);
 const OskToggle = ags.Widget.EventBox({
   className: 'toggle-off',
   onPrimaryClickRelease: function() {
-    OskToggle.toggleClassName('toggle-on', true);
+    ags.Utils.subprocess(
+      ['bash', '-c', '/home/matt/.nix/config/ags/scripts/osk-toggle.sh toggle'],
+      (output) => {
+        if (output == 'Running') {
+          OskToggle.toggleClassName('toggle-on', false);
+        } else {
+          OskToggle.toggleClassName('toggle-on', true);
+        }
+      },
+    );
+  },
+  onHover: box => {
+    box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
+  },
+  onHoverLost: box => {
+    box.window.set_cursor(null);
   },
-
   child: ags.Widget.Box({
     className: 'osk-toggle',
     vertical: false,
 
+    children: [
+      ags.Widget.Label({
+        label: " 󰌌 ",
+      }),
+    ],
+  }),
+});
+
+ags.Utils.subprocess(
+  ['bash', '-c', 'tail -f /home/matt/.config/.heart'],
+  (output) => {
+    HeartToggle.child.children[0].label = ' ' + output;
+
+    if (output == '󰣐') {
+      HeartToggle.toggleClassName('toggle-on', true);
+    } else {
+      HeartToggle.toggleClassName('toggle-on', false);
+    }
+  },
+);
+const HeartToggle = ags.Widget.EventBox({
+  className: 'toggle-off',
+  halign: 'center',
+  onPrimaryClickRelease: function() {
+    ags.Utils.exec('/home/matt/.nix/config/ags/scripts/heart.sh toggle');
+  },
+  onHover: box => {
+    box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
+  },
+  onHoverLost: box => {
+    box.window.set_cursor(null);
+  },
+  child: ags.Widget.Box({
+    className: 'heart-toggle',
+    vertical: false,
+
     child: ags.Widget.Label({
-      label: " 󰌌 ",
+      label: '',
     }),
   }),
 });
@@ -17,44 +84,60 @@ const OskToggle = ags.Widget.EventBox({
 export const LeftBar = ags.Widget.Window({
   name: 'left-bar',
   layer: 'overlay',
-  anchor: 'top left',
+  anchor: 'top left right',
+  exclusive: true,
 
-  child: ags.Widget.Box({
+  child: ags.Widget.CenterBox({
     className: 'transparent',
+    halign: 'fill',
+    style: 'margin-top: 5px; margin-left: 5px;',
     vertical: false,
     
     children: [
 
-      OskToggle,
+      ags.Widget.Box({
+        halign: 'start',
+        children: [
 
-      ags.Widget.EventBox({
-        className: '',
-        onPrimaryClickRelease: '',
+          OskToggle,
   
-        child: ags.Widget.Box({
-          className: 'tablet-toggle',
-          vertical: false,
+          Separator(),
 
-          child: ags.Widget.Label({
-            label: " 󰦧 ",
+          ags.Widget.EventBox({
+            className: 'toggle-off',
+            onPrimaryClickRelease: '',
+            onHover: box => {
+              box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
+            },
+            onHoverLost: box => {
+              box.window.set_cursor(null);
+            },
+            child: ags.Widget.Box({
+              className: 'tablet-toggle',
+              vertical: false,
+
+              child: ags.Widget.Label({
+                label: " 󰦧 ",
+              }),
+            }),
           }),
-        }),
+      
+          Separator(),
+
+          HeartToggle,
+
+        ],
       }),
 
-      ags.Widget.EventBox({
-        className: '',
-        onPrimaryClickRelease: '',
-
-        child: ags.Widget.Box({
-          className: 'heart-toggle',
-          vertical: false,
-
-          child: ags.Widget.Label({
-            label: '',
-          }),
-        }),
+      ags.Widget.Box({
+        halign: 'center',
+        style: 'background: red; min-width: 100px; min-height: 40px',
       }),
 
+      ags.Widget.Box({
+        halign: 'end',
+        style: 'background: red; min-width: 100px; min-height: 40px',
+      }),
     ],
   }),
 });

config/ags/traybuttons/traybuttons.scss

@@ -1,22 +1,9 @@
-.osk-toggle {
-  font-size: 28px;
-  min-height: 40px;
-  min-width: 50px;
-  padding: 0px 0px 0px 5px;
-}
-
-.tablet-toggle {
-  font-size: 28px;
-  min-height: 40px;
-  min-width: 50px;
-  padding: 0px 0px 0px 5px;
-}
-
+.osk-toggle,
+.tablet-toggle,
 .heart-toggle {
   font-size: 28px;
   min-height: 40px;
-  min-width: 50px;
-  padding: 0px 0px 0px 4px;
+  min-width: 53px;
 }
 
 .notif-panel {