ags: sync

.config/ags/lib/notification.js

@@ -258,8 +258,13 @@ export default ({
         className: `${isPopup ? 'popup-' : ''}notif-${notifObject.urgency} spacing-h-10`,
         children: [
             notifIcon,
-            notifText,
+            Box({
-            notifExpandButton,
+                className: 'spacing-h-5',
+                children: [
+                    notifText,
+                    notifExpandButton,
+                ]
+            })
         ]
     })
 

.config/ags/scripts/templates/hypr/colors.conf

@@ -1,4 +1,4 @@
-$SLURP_COMMAND="$(slurp -d -c {{ $onSecondaryContainer }}BB -b {{ $secondaryContainer }}22 -s 00000000)"
+$SLURP_COMMAND="$(slurp -d -c {{ $onSecondaryContainer }}BB -b {{ $secondaryContainer }}44 -s 00000000)"
 
 general {
     col.active_border = rgba({{ $onPrimary }}FF)
@@ -6,13 +6,13 @@ general {
 }
 
 plugin {
-    droidbars {
+    droidbars { # This is my hyprbars mod that broke :(
         # example config
         bar_height = 30
         background_color = rgba({{ $background }}FF)
         # background_color_active = rgba({{ $surfaceVariant }}FF) # Not added yet
         text_color = rgba({{ $onSecondaryContainer }}FF)
-        font_family = Lexend
+        font_family = Rubik, Geist, AR One Sans, Reddit Sans, Inter, Roboto, Ubuntu, Noto Sans, sans-serif
         button_font_fmily = JetBrainsMono NF
 
         # example buttons (R -> L)
@@ -24,7 +24,7 @@ plugin {
     }
     hyprbars {
         # Honestly idk if it works like css, but well, why not
-        bar_text_font = Geist, AR One Sans, Reddit Sans, Inter, Roboto, Ubuntu, Noto Sans, sans-serif
+        bar_text_font = Rubik, Geist, AR One Sans, Reddit Sans, Inter, Roboto, Ubuntu, Noto Sans, sans-serif
         bar_height = 30
         bar_padding = 10
         bar_button_padding = 5

.config/ags/scss/_bar.scss

@@ -45,8 +45,7 @@ $bar_subgroup_bg: mix($surfaceVariant, $primary, 89%);
 }
 
 .bar-group-pad-system {
-    padding-left: 1.023rem;
+    padding: 0rem 0.341rem;
-    padding-right: 0.341rem;
 }
 
 .bar-group-pad-music {
@@ -131,6 +130,10 @@ $bar_subgroup_bg: mix($surfaceVariant, $primary, 89%);
     margin: 0rem 0.341rem;
 }
 
+.bar-clock-box {
+    margin: 0rem 0.682rem;
+}
+
 .bar-clock {
     @include titlefont;
     font-size: 1.2727rem;

.config/ags/scss/_musicmaterial.scss

@@ -0,0 +1 @@
+

.config/ags/style.css

@@ -549,8 +549,7 @@ tooltip {
   padding: 0rem 0.681rem; }
 
 .bar-group-pad-system {
-  padding-left: 1.023rem;
+  padding: 0rem 0.341rem; }
-  padding-right: 0.341rem; }
 
 .bar-group-pad-music {
   padding-right: 1.023rem;
@@ -619,6 +618,9 @@ tooltip {
   background-color: rgba(53, 47, 51, 0.31);
   margin: 0rem 0.341rem; }
 
+.bar-clock-box {
+  margin: 0rem 0.682rem; }
+
 .bar-clock {
   font-family: 'Gabarito', 'Poppins', 'Lexend', sans-serif;
   font-size: 1.2727rem; }

.config/ags/widgets/bar/system.js

@@ -28,7 +28,7 @@ const BatBatteryProgress = () => {
 
 const BarClock = () => Widget.Box({
     vpack: 'center',
-    className: 'spacing-h-5 txt-onSurfaceVariant',
+    className: 'spacing-h-5 txt-onSurfaceVariant bar-clock-box',
     children: [
         Widget.Label({
             className: 'bar-clock',
@@ -59,30 +59,27 @@ const UtilButton = ({ name, icon, onClicked }) => Button({
     label: `${icon}`,
 })
 
-const Utilities = () => Scrollable({
+const Utilities = () => Box({
-    hexpand: true,
+    hpack: 'center',
-    child: Box({
+    className: 'spacing-h-5',
-        hpack: 'center',
+    children: [
-        className: 'spacing-h-5',
+        UtilButton({
-        children: [
+            name: 'Screen snip', icon: 'screenshot_region', onClicked: () => {
-            UtilButton({
+                Utils.execAsync(['bash', '-c', `grim -g "$(slurp -d -c e2e2e2BB -b 31313122 -s 00000000)" - | wl-copy &`])
-                name: 'Screen snip', icon: 'screenshot_region', onClicked: () => {
+                    .catch(print)
-                    Utils.execAsync(['bash', '-c', `grim -g "$(slurp -d -c e2e2e2BB -b 31313122 -s 00000000)" - | wl-copy &`])
+            }
-                        .catch(print)
+        }),
-                }
+        UtilButton({
-            }),
+            name: 'Color picker', icon: 'colorize', onClicked: () => {
-            UtilButton({
+                Utils.execAsync(['hyprpicker', '-a']).catch(print)
-                name: 'Color picker', icon: 'colorize', onClicked: () => {
+            }
-                    Utils.execAsync(['hyprpicker', '-a']).catch(print)
+        }),
-                }
+        UtilButton({
-            }),
+            name: 'Toggle on-screen keyboard', icon: 'keyboard', onClicked: () => {
-            UtilButton({
+                App.toggleWindow('osk');
-                name: 'Toggle on-screen keyboard', icon: 'keyboard', onClicked: () => {
+            }
-                    App.toggleWindow('osk');
+        }),
-                }
+    ]
-            }),
-        ]
-    })
 })
 
 const BarBattery = () => Box({
@@ -117,17 +114,26 @@ const BarBattery = () => Box({
         //         revealer.revealChild = Battery.charging;
         //     }),
         // }),
-        Stack({
+        // Stack({
-            transition: 'slide_up_down',
+        //     transition: 'slide_up_down',
-            items: [
+        //     items: [
-                ['discharging', Widget.Label({
+        //         ['discharging', Widget.Label({
-                    className: 'txt-norm txt',
+        //             className: 'txt-norm txt',
-                    label: '•',
+        //             label: '•',
-                }),],
+        //         }),],
-                ['charging', MaterialIcon('bolt', 'norm')],
+        //         ['charging', MaterialIcon('bolt', 'norm')],
-            ],
+        //     ],
+        //     setup: (self) => self.hook(Battery, revealer => {
+        //         self.shown = Battery.charging ? 'charging' : 'discharging';
+        //     }),
+        // }),
+        Revealer({
+            transitionDuration: 150,
+            revealChild: false,
+            transition: 'slide_right',
+            child: MaterialIcon('bolt', 'norm'),
             setup: (self) => self.hook(Battery, revealer => {
-                self.shown = Battery.charging ? 'charging' : 'discharging';
+                self.revealChild = Battery.charging;
             }),
         }),
         Label({
@@ -156,21 +162,26 @@ const BarBattery = () => Box({
     ]
 });
 
+const BarGroup = ({ child }) => Widget.Box({
+    className: 'bar-group-margin bar-sides',
+    children: [
+        Widget.Box({
+            className: 'bar-group bar-group-standalone bar-group-pad-system',
+            children: [child],
+        }),
+    ]
+});
+
 export const ModuleSystem = () => Widget.EventBox({
     onScrollUp: () => execAsync('hyprctl dispatch workspace -1'),
     onScrollDown: () => execAsync('hyprctl dispatch workspace +1'),
     onPrimaryClick: () => App.toggleWindow('sideright'),
     child: Widget.Box({
-        className: 'bar-group-margin bar-sides',
+        className: 'spacing-h-5',
         children: [
-            Widget.Box({
+            BarGroup({ child: BarClock() }),
-                className: 'bar-group bar-group-standalone bar-group-pad-system spacing-h-5',
+            BarGroup({ child: Utilities() }),
-                children: [
+            BarGroup({ child: BarBattery() }),
-                    BarClock(),
-                    Utilities(),
-                    BarBattery(),
-                ],
-            }),
         ]
     })
 });

.config/ags/widgets/sideleft/sideleft.js

@@ -175,9 +175,9 @@ export default () => Box({
                 else if (event.get_keyval()[1] === Gdk.KEY_Tab)
                     switchToTab((currentTabId + 1) % contents.length);
                 else if (event.get_keyval()[1] === Gdk.KEY_Page_Up)
-                    switchToTab(Math.max(currentTabId - 1), 0);
+                    switchToTab(Math.max(currentTabId - 1, 0));
                 else if (event.get_keyval()[1] === Gdk.KEY_Page_Down)
-                    switchToTab(Math.min(currentTabId + 1), contents.length);
+                    switchToTab(Math.min(currentTabId + 1, contents.length - 1));
             }
             if (contentStack.shown == 'apis') { // If api tab is focused
                 // Automatically focus entry when typing