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,36 +1,117 @@
+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() {
+    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,
 
-    child: ags.Widget.Label({
+    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: '',
+    }),
   }),
 });
 
 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: [
+
+      ags.Widget.Box({
+        halign: 'start',
         children: [
 
           OskToggle,
   
-      ags.Widget.EventBox({
+          Separator(),
-        className: '',
-        onPrimaryClickRelease: '',
 
+          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,
@@ -41,20 +122,22 @@ export const LeftBar = ags.Widget.Window({
             }),
           }),
       
-      ags.Widget.EventBox({
+          Separator(),
-        className: '',
-        onPrimaryClickRelease: '',
 
-        child: ags.Widget.Box({
+          HeartToggle,
-          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 {
+.osk-toggle,
-  font-size: 28px;
+.tablet-toggle,
-  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;
-}
-
 .heart-toggle {
   font-size: 28px;
   min-height: 40px;
-  min-width: 50px;
+  min-width: 53px;
-  padding: 0px 0px 0px 4px;
 }
 
 .notif-panel {