From fb1f13989c5c6b69ff04515d276b864bb842fb96 Mon Sep 17 00:00:00 2001
From: Ludovic Ortega <ludovic.ortega@adminafk.fr>
Date: Mon, 23 Dec 2024 18:05:54 +0100
Subject: [PATCH 01/11] fix(nixos): wrap hyprpanel in a script

---
 flake.nix | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/flake.nix b/flake.nix
index 681ac538e..4ef7b3da7 100644
--- a/flake.nix
+++ b/flake.nix
@@ -73,7 +73,13 @@
 
     # Define .overlay to expose the package as pkgs.hyprpanel based on the system
     overlay = final: prev: {
-      hyprpanel = self.packages.${prev.stdenv.system}.default;
+      hyprpanel = prev.writeShellScriptBin "hyprpanel" ''
+        if [ "$#" -eq 0 ]; then
+            exec ${self.packages.${final.stdenv.system}.default}/bin/hyprpanel
+        else
+            exec ${astal.packages.${final.stdenv.system}.io}/bin/astal -i hyprpanel "$@"
+        fi
+      '';
     };
   };
 }

From af88c267f495bd77fd216632203c76aaece549f9 Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Mon, 23 Dec 2024 14:03:01 -0800
Subject: [PATCH 02/11] Added the ability to adjust application specific audio
 levels. (#608)

* Added a playback volume module in audio menu.

* Finish playback source volume adjuster.
---
 .../bar/modules/window_title/helpers/title.ts | 19 +++--
 .../bar/modules/workspaces/workspaces.tsx     |  2 +-
 src/components/bar/settings/config.tsx        | 78 ++++++++++++++++++-
 src/components/bar/settings/theme.tsx         | 50 ++++++++++++
 .../menus/audio/active/devices/index.tsx      | 25 ++++++
 src/components/menus/audio/active/index.tsx   | 70 +++++++++++------
 .../menus/audio/active/playbacks/index.tsx    | 30 +++++++
 .../active/{device => sliderItem}/Slider.tsx  | 23 +++++-
 .../{device => sliderItem}/SliderIcon.tsx     |  0
 .../index.tsx => sliderItem/SliderItem.tsx}   |  4 +-
 .../SliderPercentage.tsx                      |  0
 src/components/menus/audio/index.tsx          |  4 +-
 .../settings/pages/theme/bar/index.tsx        | 71 +++++++++++++++++
 src/options.ts                                |  3 +
 src/scss/style/menus/audiomenu.scss           | 29 +++++++
 src/scss/style/menus/bluetooth.scss           |  2 +-
 src/scss/style/menus/menu.scss                |  2 +-
 src/scss/style/menus/network.scss             |  2 +-
 18 files changed, 368 insertions(+), 46 deletions(-)
 create mode 100644 src/components/menus/audio/active/devices/index.tsx
 create mode 100644 src/components/menus/audio/active/playbacks/index.tsx
 rename src/components/menus/audio/active/{device => sliderItem}/Slider.tsx (53%)
 rename src/components/menus/audio/active/{device => sliderItem}/SliderIcon.tsx (100%)
 rename src/components/menus/audio/active/{device/index.tsx => sliderItem/SliderItem.tsx} (84%)
 rename src/components/menus/audio/active/{device => sliderItem}/SliderPercentage.tsx (100%)

diff --git a/src/components/bar/modules/window_title/helpers/title.ts b/src/components/bar/modules/window_title/helpers/title.ts
index 333b18ab4..4fdb6aea5 100644
--- a/src/components/bar/modules/window_title/helpers/title.ts
+++ b/src/components/bar/modules/window_title/helpers/title.ts
@@ -8,11 +8,11 @@ import AstalHyprland from 'gi://AstalHyprland?version=0.1';
  * This function searches for a matching window title in the predefined `windowTitleMap` based on the class of the provided window.
  * If a match is found, it returns an object containing the icon and label for the window. If no match is found, it returns a default icon and label.
  *
- * @param windowtitle The window object containing the class information.
+ * @param client The window object containing the class information.
  *
  * @returns An object containing the icon and label for the window.
  */
-export const getWindowMatch = (windowtitle: AstalHyprland.Client): Record<string, string> => {
+export const getWindowMatch = (client: AstalHyprland.Client): Record<string, string> => {
     const windowTitleMap = [
         // user provided values
         ...options.bar.windowtitle.title_map.get(),
@@ -119,17 +119,17 @@ export const getWindowMatch = (windowtitle: AstalHyprland.Client): Record<string
         ['^$', '󰇄', 'Desktop'],
 
         // Fallback icon
-        ['(.+)', '󰣆', `${capitalizeFirstLetter(windowtitle?.class ?? 'Unknown')}`],
+        ['(.+)', '󰣆', `${capitalizeFirstLetter(client?.class ?? 'Unknown')}`],
     ];
 
-    if (!windowtitle?.class) {
+    if (!client?.class) {
         return {
             icon: '󰇄',
             label: 'Desktop',
         };
     }
 
-    const foundMatch = windowTitleMap.find((wt) => RegExp(wt[0]).test(windowtitle?.class.toLowerCase()));
+    const foundMatch = windowTitleMap.find((wt) => RegExp(wt[0]).test(client?.class.toLowerCase()));
 
     if (!foundMatch || foundMatch.length !== 3) {
         return {
@@ -157,13 +157,12 @@ export const getWindowMatch = (windowtitle: AstalHyprland.Client): Record<string
  * @returns The title of the window as a string.
  */
 export const getTitle = (client: AstalHyprland.Client, useCustomTitle: boolean, useClassName: boolean): string => {
-    if (client === null) return getWindowMatch(client).label;
-
-    if (useCustomTitle) return getWindowMatch(client).label;
-    if (useClassName) return client.class;
+    if (client === null || useCustomTitle) return getWindowMatch(client).label;
 
     const title = client.title;
-    // If the title is empty or only filled with spaces, fallback to the class name
+
+    if (!title || useClassName) return client.class;
+
     if (title.length === 0 || title.match(/^ *$/)) {
         return client.class;
     }
diff --git a/src/components/bar/modules/workspaces/workspaces.tsx b/src/components/bar/modules/workspaces/workspaces.tsx
index 65122d4ef..fa3f924cc 100644
--- a/src/components/bar/modules/workspaces/workspaces.tsx
+++ b/src/components/bar/modules/workspaces/workspaces.tsx
@@ -152,7 +152,7 @@ export const WorkspaceModule = ({ monitor }: WorkspaceModuleProps): JSX.Element
                                 self.toggleClassName('active', activeWorkspace === wsId);
                                 self.toggleClassName(
                                     'occupied',
-                                    (hyprlandService.get_workspace(wsId)?.get_clients().length || 0) > 0,
+                                    (hyprlandService.get_workspace(wsId)?.get_clients()?.length || 0) > 0,
                                 );
                             }}
                         />
diff --git a/src/components/bar/settings/config.tsx b/src/components/bar/settings/config.tsx
index c3a940a2e..e43fc37fe 100644
--- a/src/components/bar/settings/config.tsx
+++ b/src/components/bar/settings/config.tsx
@@ -140,7 +140,10 @@ export const CustomModuleSettings = (): JSX.Element => {
                 <Option
                     opt={options.bar.customModules.netstat.networkInterface}
                     title="Network Interface"
-                    subtitle="Wiki: https://hyprpanel.com/configuration/panel.html#custom-modules"
+                    subtitle={
+                        'Name of the network interface to poll.\n' +
+                        "HINT: Get a list of interfaces with 'cat /proc/net/dev"
+                    }
                     type="string"
                 />
                 <Option
@@ -280,6 +283,79 @@ export const CustomModuleSettings = (): JSX.Element => {
                 <Option opt={options.bar.customModules.weather.middleClick} title="Middle Click" type="string" />
                 <Option opt={options.bar.customModules.weather.scrollUp} title="Scroll Up" type="string" />
                 <Option opt={options.bar.customModules.weather.scrollDown} title="Scroll Down" type="string" />
+
+                {/* Hyprsunset Section */}
+                <Header title="Hyprsunset" />
+                <Option
+                    opt={options.bar.customModules.hyprsunset.temperature}
+                    title="Temperature"
+                    subtitle="Ex: 1000k, 2000k, 5000k, etc."
+                    type="string"
+                />
+                <Option
+                    opt={options.theme.bar.buttons.modules.hyprsunset.enableBorder}
+                    title="Button Border"
+                    type="boolean"
+                />
+                <Option opt={options.bar.customModules.hyprsunset.onIcon} title="Enabled Icon" type="string" />
+                <Option opt={options.bar.customModules.hyprsunset.offIcon} title="Disabled Icon" type="string" />
+                <Option opt={options.bar.customModules.hyprsunset.onLabel} title="Enabled Label" type="string" />
+                <Option opt={options.bar.customModules.hyprsunset.offLabel} title="Disabled Label" type="string" />
+                <Option opt={options.bar.customModules.hyprsunset.label} title="Show Label" type="boolean" />
+                <Option opt={options.theme.bar.buttons.modules.hyprsunset.spacing} title="Spacing" type="string" />
+                <Option
+                    opt={options.bar.customModules.hyprsunset.pollingInterval}
+                    title="Polling Interval"
+                    type="number"
+                    min={100}
+                    max={60 * 24 * 1000}
+                    increment={1000}
+                />
+                <Option opt={options.bar.customModules.hyprsunset.rightClick} title="Right Click" type="string" />
+                <Option opt={options.bar.customModules.hyprsunset.middleClick} title="Middle Click" type="string" />
+                <Option opt={options.bar.customModules.hyprsunset.scrollUp} title="Scroll Up" type="string" />
+                <Option opt={options.bar.customModules.hyprsunset.scrollDown} title="Scroll Down" type="string" />
+
+                {/* Hypridle Section */}
+                <Header title="Hypridle" />
+                <Option
+                    opt={options.theme.bar.buttons.modules.hypridle.enableBorder}
+                    title="Button Border"
+                    type="boolean"
+                />
+                <Option opt={options.bar.customModules.hypridle.onIcon} title="Enabled Icon" type="string" />
+                <Option opt={options.bar.customModules.hypridle.offIcon} title="Disabled Icon" type="string" />
+                <Option opt={options.bar.customModules.hypridle.onLabel} title="Enabled Label" type="string" />
+                <Option opt={options.bar.customModules.hypridle.offLabel} title="Disabled Label" type="string" />
+                <Option opt={options.bar.customModules.hypridle.label} title="Show Label" type="boolean" />
+                <Option opt={options.theme.bar.buttons.modules.hypridle.spacing} title="Spacing" type="string" />
+                <Option
+                    opt={options.bar.customModules.hypridle.pollingInterval}
+                    title="Polling Interval"
+                    type="number"
+                    min={100}
+                    max={60 * 24 * 1000}
+                    increment={1000}
+                />
+                <Option opt={options.bar.customModules.hypridle.rightClick} title="Right Click" type="string" />
+                <Option opt={options.bar.customModules.hypridle.middleClick} title="Middle Click" type="string" />
+                <Option opt={options.bar.customModules.hypridle.scrollUp} title="Scroll Up" type="string" />
+                <Option opt={options.bar.customModules.hypridle.scrollDown} title="Scroll Down" type="string" />
+
+                {/* Power Section */}
+                <Header title="Power" />
+                <Option
+                    opt={options.theme.bar.buttons.modules.power.enableBorder}
+                    title="Button Border"
+                    type="boolean"
+                />
+                <Option opt={options.theme.bar.buttons.modules.power.spacing} title="Spacing" type="string" />
+                <Option opt={options.bar.customModules.power.icon} title="Power Button Icon" type="string" />
+                <Option opt={options.bar.customModules.power.leftClick} title="Left Click" type="string" />
+                <Option opt={options.bar.customModules.power.rightClick} title="Right Click" type="string" />
+                <Option opt={options.bar.customModules.power.middleClick} title="Middle Click" type="string" />
+                <Option opt={options.bar.customModules.power.scrollUp} title="Scroll Up" type="string" />
+                <Option opt={options.bar.customModules.power.scrollDown} title="Scroll Down" type="string" />
             </box>
         </scrollable>
     );
diff --git a/src/components/bar/settings/theme.tsx b/src/components/bar/settings/theme.tsx
index 8030219da..0c59f8465 100644
--- a/src/components/bar/settings/theme.tsx
+++ b/src/components/bar/settings/theme.tsx
@@ -158,6 +158,56 @@ export const CustomModuleTheme = (): JSX.Element => {
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.modules.weather.border} title="Border" type="color" />
+
+                {/* Hyprsunset Module Section */}
+                <Header title="Hyprsunset" />
+                <Option opt={options.theme.bar.buttons.modules.hyprsunset.text} title="Text" type="color" />
+                <Option opt={options.theme.bar.buttons.modules.hyprsunset.icon} title="Icon" type="color" />
+                <Option
+                    opt={options.theme.bar.buttons.modules.hyprsunset.background}
+                    title="Label Background"
+                    type="color"
+                />
+                <Option
+                    opt={options.theme.bar.buttons.modules.hyprsunset.icon_background}
+                    title="Icon Background"
+                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    type="color"
+                />
+                <Option opt={options.theme.bar.buttons.modules.hyprsunset.border} title="Border" type="color" />
+
+                {/* Hypridle Module Section */}
+                <Header title="Hypridle" />
+                <Option opt={options.theme.bar.buttons.modules.hypridle.text} title="Text" type="color" />
+                <Option opt={options.theme.bar.buttons.modules.hypridle.icon} title="Icon" type="color" />
+                <Option
+                    opt={options.theme.bar.buttons.modules.hypridle.background}
+                    title="Label Background"
+                    type="color"
+                />
+                <Option
+                    opt={options.theme.bar.buttons.modules.hypridle.icon_background}
+                    title="Icon Background"
+                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    type="color"
+                />
+                <Option opt={options.theme.bar.buttons.modules.hypridle.border} title="Border" type="color" />
+
+                {/* Power Module Section */}
+                <Header title="Power" />
+                <Option opt={options.theme.bar.buttons.modules.power.icon} title="Icon" type="color" />
+                <Option
+                    opt={options.theme.bar.buttons.modules.power.background}
+                    title="Label Background"
+                    type="color"
+                />
+                <Option
+                    opt={options.theme.bar.buttons.modules.power.icon_background}
+                    title="Icon Background"
+                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    type="color"
+                />
+                <Option opt={options.theme.bar.buttons.modules.power.border} title="Border" type="color" />
             </box>
         </scrollable>
     );
diff --git a/src/components/menus/audio/active/devices/index.tsx b/src/components/menus/audio/active/devices/index.tsx
new file mode 100644
index 000000000..68c7689ff
--- /dev/null
+++ b/src/components/menus/audio/active/devices/index.tsx
@@ -0,0 +1,25 @@
+import { BindableChild } from 'astal/gtk3/astalify';
+import { audioService } from 'src/lib/constants/services';
+import { SliderItem } from '../sliderItem/SliderItem';
+import { ActiveDeviceMenu } from '..';
+
+const ActiveDeviceContainer = ({ children }: ActiveDeviceContainerProps): JSX.Element => {
+    return (
+        <box className={'menu-items-section selected'} name={ActiveDeviceMenu.Devices} vertical>
+            {children}
+        </box>
+    );
+};
+
+export const ActiveDevices = (): JSX.Element => {
+    return (
+        <ActiveDeviceContainer>
+            <SliderItem type={'playback'} device={audioService.defaultSpeaker} />
+            <SliderItem type={'input'} device={audioService.defaultMicrophone} />
+        </ActiveDeviceContainer>
+    );
+};
+
+interface ActiveDeviceContainerProps {
+    children?: BindableChild | BindableChild[];
+}
diff --git a/src/components/menus/audio/active/index.tsx b/src/components/menus/audio/active/index.tsx
index 24b1dca28..fa640cc47 100644
--- a/src/components/menus/audio/active/index.tsx
+++ b/src/components/menus/audio/active/index.tsx
@@ -1,34 +1,56 @@
 import { Gtk } from 'astal/gtk3';
-import { ActiveDevice } from './device/index.js';
-import { audioService } from 'src/lib/constants/services.js';
-import { BindableChild } from 'astal/gtk3/astalify.js';
+import { ActiveDevices } from './devices/index.js';
+import Variable from 'astal/variable.js';
+import { ActivePlaybacks } from './playbacks/index.js';
+import { bind } from 'astal/binding.js';
+import { isPrimaryClick } from 'src/lib/utils.js';
 
-export const SelectedDevices = (): JSX.Element => {
-    const Header = (): JSX.Element => (
-        <box className={'menu-label-container volume selected'} halign={Gtk.Align.FILL}>
-            <label className={'menu-label audio volume'} halign={Gtk.Align.START} hexpand label={'Volume'} />
-        </box>
-    );
+export enum ActiveDeviceMenu {
+    Devices = 'devices',
+    Playbacks = 'playbacks',
+}
+
+const activeMenu: Variable<ActiveDeviceMenu> = Variable(ActiveDeviceMenu.Devices);
 
-    const ActiveDeviceContainer = ({ children }: ActiveDeviceContainerProps): JSX.Element => {
-        return (
-            <box className={'menu-items-section selected'} vertical>
-                {children}
-            </box>
-        );
-    };
+const Header = (): JSX.Element => (
+    <box className={'menu-label-container volume selected'} halign={Gtk.Align.FILL}>
+        <label className={'menu-label audio volume'} halign={Gtk.Align.START} hexpand label={'Volume'} />
+        <button
+            className={'menu-label slider-toggle'}
+            onClick={(_, event) => {
+                if (!isPrimaryClick(event)) {
+                    return;
+                }
 
+                if (activeMenu.get() === ActiveDeviceMenu.Devices) {
+                    activeMenu.set(ActiveDeviceMenu.Playbacks);
+                } else {
+                    activeMenu.set(ActiveDeviceMenu.Devices);
+                }
+            }}
+            halign={Gtk.Align.END}
+            hexpand
+            label={bind(activeMenu).as((menu) => (menu === ActiveDeviceMenu.Devices ? '' : '󰤽'))}
+        />
+    </box>
+);
+
+export const VolumeSliders = (): JSX.Element => {
     return (
         <box className={'menu-section-container volume'} vertical>
             <Header />
-            <ActiveDeviceContainer>
-                <ActiveDevice type={'playback'} device={audioService.defaultSpeaker} />
-                <ActiveDevice type={'input'} device={audioService.defaultMicrophone} />
-            </ActiveDeviceContainer>
+            <revealer
+                transitionType={Gtk.RevealerTransitionType.NONE}
+                revealChild={bind(activeMenu).as((curMenu) => curMenu === ActiveDeviceMenu.Devices)}
+            >
+                <ActiveDevices />
+            </revealer>
+            <revealer
+                transitionType={Gtk.RevealerTransitionType.NONE}
+                revealChild={bind(activeMenu).as((curMenu) => curMenu === ActiveDeviceMenu.Playbacks)}
+            >
+                <ActivePlaybacks />
+            </revealer>
         </box>
     );
 };
-
-interface ActiveDeviceContainerProps {
-    children?: BindableChild | BindableChild[];
-}
diff --git a/src/components/menus/audio/active/playbacks/index.tsx b/src/components/menus/audio/active/playbacks/index.tsx
new file mode 100644
index 000000000..cffc88fb9
--- /dev/null
+++ b/src/components/menus/audio/active/playbacks/index.tsx
@@ -0,0 +1,30 @@
+import { bind } from 'astal';
+import { audioService } from 'src/lib/constants/services';
+import { SliderItem } from '../sliderItem/SliderItem';
+import { ActiveDeviceMenu } from '..';
+
+const NoStreams = (): JSX.Element => {
+    return <label className={'no-playbacks dim'} label={'No active playbacks found.'} expand />;
+};
+
+export const ActivePlaybacks = (): JSX.Element => {
+    return (
+        <box className={'menu-items-section selected'} name={ActiveDeviceMenu.Playbacks} vertical>
+            <scrollable className={'menu-scroller active-playbacks-scrollable'}>
+                <box vertical>
+                    {bind(audioService, 'streams').as((streams) => {
+                        if (!streams || streams.length === 0) {
+                            return <NoStreams />;
+                        }
+
+                        const currentStreams = streams;
+
+                        return currentStreams.map((stream) => {
+                            return <SliderItem type={'playback'} device={stream} />;
+                        });
+                    })}
+                </box>
+            </scrollable>
+        </box>
+    );
+};
diff --git a/src/components/menus/audio/active/device/Slider.tsx b/src/components/menus/audio/active/sliderItem/Slider.tsx
similarity index 53%
rename from src/components/menus/audio/active/device/Slider.tsx
rename to src/components/menus/audio/active/sliderItem/Slider.tsx
index be93a46d6..cd4651eb1 100644
--- a/src/components/menus/audio/active/device/Slider.tsx
+++ b/src/components/menus/audio/active/sliderItem/Slider.tsx
@@ -1,6 +1,7 @@
 import { bind } from 'astal';
-import { Gtk } from 'astal/gtk3';
+import { Gdk, Gtk } from 'astal/gtk3';
 import AstalWp from 'gi://AstalWp?version=0.1';
+import { capitalizeFirstLetter } from 'src/lib/utils';
 import options from 'src/options';
 
 const { raiseMaximumVolume } = options.menus.volume;
@@ -12,9 +13,11 @@ export const Slider = ({ device, type }: SliderProps): JSX.Element => {
                 className={`menu-active ${type}`}
                 halign={Gtk.Align.START}
                 truncate
-                expand
+                hexpand
                 wrap
-                label={bind(device, 'description').as((description) => description ?? `Unknown ${type} Device`)}
+                label={bind(device, 'description').as((description) =>
+                    capitalizeFirstLetter(description ?? `Unknown ${type} Device`),
+                )}
             />
             <slider
                 value={bind(device, 'volume')}
@@ -29,6 +32,20 @@ export const Slider = ({ device, type }: SliderProps): JSX.Element => {
                         device.mute = false;
                     }
                 }}
+                setup={(self) => {
+                    self.connect('scroll-event', (_, event: Gdk.Event) => {
+                        const [directionSuccess, direction] = event.get_scroll_direction();
+                        const [deltasSuccess, , yScroll] = event.get_scroll_deltas();
+
+                        if (directionSuccess) {
+                            const newVolume = device.volume + (direction === Gdk.ScrollDirection.DOWN ? 0.05 : -0.05);
+                            device.set_volume(Math.min(newVolume, 1));
+                        } else if (deltasSuccess) {
+                            const newVolume = device.volume - yScroll / 100;
+                            device.set_volume(Math.min(newVolume, 1));
+                        }
+                    });
+                }}
             />
         </box>
     );
diff --git a/src/components/menus/audio/active/device/SliderIcon.tsx b/src/components/menus/audio/active/sliderItem/SliderIcon.tsx
similarity index 100%
rename from src/components/menus/audio/active/device/SliderIcon.tsx
rename to src/components/menus/audio/active/sliderItem/SliderIcon.tsx
diff --git a/src/components/menus/audio/active/device/index.tsx b/src/components/menus/audio/active/sliderItem/SliderItem.tsx
similarity index 84%
rename from src/components/menus/audio/active/device/index.tsx
rename to src/components/menus/audio/active/sliderItem/SliderItem.tsx
index e4aae4fbf..545e3e62e 100644
--- a/src/components/menus/audio/active/device/index.tsx
+++ b/src/components/menus/audio/active/sliderItem/SliderItem.tsx
@@ -3,7 +3,7 @@ import { SliderIcon } from './SliderIcon';
 import { Slider } from './Slider';
 import { SliderPercentage } from './SliderPercentage';
 
-export const ActiveDevice = ({ type, device }: ActiveDeviceProps): JSX.Element => {
+export const SliderItem = ({ type, device }: SliderItemProps): JSX.Element => {
     return (
         <box className={`menu-active-container ${type}`} vertical>
             <box className={`menu-slider-container ${type}`}>
@@ -15,7 +15,7 @@ export const ActiveDevice = ({ type, device }: ActiveDeviceProps): JSX.Element =
     );
 };
 
-interface ActiveDeviceProps {
+interface SliderItemProps {
     type: 'playback' | 'input';
     device: AstalWp.Endpoint;
 }
diff --git a/src/components/menus/audio/active/device/SliderPercentage.tsx b/src/components/menus/audio/active/sliderItem/SliderPercentage.tsx
similarity index 100%
rename from src/components/menus/audio/active/device/SliderPercentage.tsx
rename to src/components/menus/audio/active/sliderItem/SliderPercentage.tsx
diff --git a/src/components/menus/audio/index.tsx b/src/components/menus/audio/index.tsx
index 27d6fd0cc..688bf4476 100644
--- a/src/components/menus/audio/index.tsx
+++ b/src/components/menus/audio/index.tsx
@@ -1,5 +1,5 @@
 import DropdownMenu from '../shared/dropdown/index.js';
-import { SelectedDevices } from './active/index.js';
+import { VolumeSliders } from './active/index.js';
 import options from 'src/options.js';
 import { bind } from 'astal/binding.js';
 import { Gtk } from 'astal/gtk3';
@@ -14,7 +14,7 @@ export default (): JSX.Element => {
         >
             <box className={'menu-items audio'} halign={Gtk.Align.FILL} hexpand>
                 <box className={'menu-items-container audio'} halign={Gtk.Align.FILL} vertical hexpand>
-                    <SelectedDevices />
+                    <VolumeSliders />
                     <AvailableDevices />
                 </box>
             </box>
diff --git a/src/components/settings/pages/theme/bar/index.tsx b/src/components/settings/pages/theme/bar/index.tsx
index d3d818de2..be8c40949 100644
--- a/src/components/settings/pages/theme/bar/index.tsx
+++ b/src/components/settings/pages/theme/bar/index.tsx
@@ -145,6 +145,77 @@ export const BarTheme = (): JSX.Element => {
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.volume.border} title="Border" type="color" />
+
+                {/* Network Section */}
+                <Header title="Network" />
+                <Option opt={options.theme.bar.buttons.network.background} title="Background" type="color" />
+                <Option opt={options.theme.bar.buttons.network.text} title="Text" type="color" />
+                <Option opt={options.theme.bar.buttons.network.icon} title="Icon" type="color" />
+                <Option
+                    opt={options.theme.bar.buttons.network.icon_background}
+                    title="Button Icon Background"
+                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    type="color"
+                />
+                <Option opt={options.theme.bar.buttons.network.border} title="Border" type="color" />
+
+                {/* Bluetooth Section */}
+                <Header title="Bluetooth" />
+                <Option opt={options.theme.bar.buttons.bluetooth.background} title="Background" type="color" />
+                <Option opt={options.theme.bar.buttons.bluetooth.text} title="Text" type="color" />
+                <Option opt={options.theme.bar.buttons.bluetooth.icon} title="Icon" type="color" />
+                <Option
+                    opt={options.theme.bar.buttons.bluetooth.icon_background}
+                    title="Button Icon Background"
+                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    type="color"
+                />
+                <Option opt={options.theme.bar.buttons.bluetooth.border} title="Border" type="color" />
+
+                {/* System Tray Section */}
+                <Header title="System Tray" />
+                <Option opt={options.theme.bar.buttons.systray.border} title="Border" type="color" />
+                <Option opt={options.theme.bar.buttons.systray.customIcon} title="Custom Icons" type="color" />
+                <Option opt={options.theme.bar.buttons.systray.background} title="Background" type="color" />
+
+                {/* Battery Section */}
+                <Header title="Battery" />
+                <Option opt={options.theme.bar.buttons.battery.background} title="Background" type="color" />
+                <Option opt={options.theme.bar.buttons.battery.text} title="Text" type="color" />
+                <Option opt={options.theme.bar.buttons.battery.icon} title="Icon" type="color" />
+                <Option
+                    opt={options.theme.bar.buttons.battery.icon_background}
+                    title="Button Icon Background"
+                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    type="color"
+                />
+                <Option opt={options.theme.bar.buttons.battery.border} title="Border" type="color" />
+
+                {/* Clock Section */}
+                <Header title="Clock" />
+                <Option opt={options.theme.bar.buttons.clock.background} title="Background" type="color" />
+                <Option opt={options.theme.bar.buttons.clock.text} title="Text" type="color" />
+                <Option opt={options.theme.bar.buttons.clock.icon} title="Icon" type="color" />
+                <Option
+                    opt={options.theme.bar.buttons.clock.icon_background}
+                    title="Button Icon Background"
+                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    type="color"
+                />
+                <Option opt={options.theme.bar.buttons.clock.border} title="Border" type="color" />
+
+                {/* Notifications Section */}
+                <Header title="Notifications" />
+                <Option opt={options.theme.bar.buttons.notifications.background} title="Background" type="color" />
+                <Option opt={options.theme.bar.buttons.notifications.total} title="Notification Count" type="color" />
+                <Option opt={options.theme.bar.buttons.notifications.icon} title="Icon" type="color" />
+                <Option
+                    opt={options.theme.bar.buttons.notifications.icon_background}
+                    title="Button Icon Background"
+                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    type="color"
+                />
+                <Option opt={options.theme.bar.buttons.notifications.border} title="Border" type="color" />
             </box>
         </scrollable>
     );
diff --git a/src/options.ts b/src/options.ts
index 243bb9a83..ca6963e4d 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -527,6 +527,9 @@ const options = mkOptions(CONFIG, {
                             color: opt(colors.maroon),
                         },
                         text: opt(colors.text),
+                        scroller: {
+                            color: opt(colors.maroon),
+                        },
                         listitems: {
                             passive: opt(colors.text),
                             active: opt(secondary_colors.maroon),
diff --git a/src/scss/style/menus/audiomenu.scss b/src/scss/style/menus/audiomenu.scss
index a680f01c4..f7d4bbc6a 100644
--- a/src/scss/style/menus/audiomenu.scss
+++ b/src/scss/style/menus/audiomenu.scss
@@ -212,4 +212,33 @@
     .menu-items-section.playback {
         border-radius: 0em;
     }
+
+    .slider-toggle {
+        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
+        padding: 0em 1em;
+        label {
+            font-size: 1.25em;
+        }
+
+        &:hover {
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
+        }
+    }
+
+    .active-playbacks-scrollable {
+        min-height: 12.5em;
+
+        scrollbar contents trough slider {
+            background: $bar-menus-menu-volume-scroller-color;
+        }
+
+        .menu-active-percentage.playback,
+        .menu-active-percentage.input {
+            margin-right: 0.6em;
+        }
+    }
+
+    .no-playbacks.dim {
+        opacity: 0.5;
+    }
 }
diff --git a/src/scss/style/menus/bluetooth.scss b/src/scss/style/menus/bluetooth.scss
index ab023fe6d..332338018 100644
--- a/src/scss/style/menus/bluetooth.scss
+++ b/src/scss/style/menus/bluetooth.scss
@@ -202,7 +202,7 @@
     .menu-scroller.bluetooth {
         min-height: 18em;
 
-        slider {
+        scrollbar contents trough slider {
             background: $bar-menus-menu-bluetooth-scroller-color;
         }
     }
diff --git a/src/scss/style/menus/menu.scss b/src/scss/style/menus/menu.scss
index 59866f927..1c8bd0734 100644
--- a/src/scss/style/menus/menu.scss
+++ b/src/scss/style/menus/menu.scss
@@ -259,7 +259,7 @@
     margin-right: 0em;
     min-width: 0.35em;
 
-    slider {
+    scrollbar contents trough slider {
         min-width: $bar-menus-scroller-width;
         border-radius: $bar-menus-scroller-radius;
         background: $bar-menus-text;
diff --git a/src/scss/style/menus/network.scss b/src/scss/style/menus/network.scss
index 94581fd83..5b65b4c5f 100644
--- a/src/scss/style/menus/network.scss
+++ b/src/scss/style/menus/network.scss
@@ -185,7 +185,7 @@
     .menu-scroller.wap {
         min-height: 16em;
 
-        slider {
+        scrollbar contents trough slider {
             background: $bar-menus-menu-network-scroller-color;
         }
     }

From d8a59c1d18e648bb639712a70f45c5c0ac85e3e0 Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Tue, 24 Dec 2024 01:09:09 -0800
Subject: [PATCH 03/11] Fixed a bug that would prevent the workspace module
 from being scrolled. (#609)

---
 .../bar/modules/workspaces/helpers/index.ts   |  2 +-
 .../bar/modules/workspaces/index.tsx          | 25 +++++++++-------
 src/components/bar/shared/WidgetContainer.tsx |  6 ++--
 .../menus/audio/active/sliderItem/Slider.tsx  | 17 +++++------
 src/lib/types/bar.d.ts                        |  2 +-
 src/lib/utils.ts                              | 30 +++++++++++++++++--
 6 files changed, 56 insertions(+), 26 deletions(-)

diff --git a/src/components/bar/modules/workspaces/helpers/index.ts b/src/components/bar/modules/workspaces/helpers/index.ts
index 84031172d..fd20d2cb9 100644
--- a/src/components/bar/modules/workspaces/helpers/index.ts
+++ b/src/components/bar/modules/workspaces/helpers/index.ts
@@ -162,7 +162,7 @@ const navigateWorkspace = (
     while (attempts < workspacesList.length) {
         const targetWS = workspacesList[newIndex];
         if (!isWorkspaceIgnored(ignoredWorkspaces, targetWS)) {
-            hyprlandService.message_async(`dispatch workspace ${targetWS}`);
+            hyprlandService.dispatch('workspace', targetWS.toString());
             return;
         }
         newIndex = (newIndex + step + workspacesList.length) % workspacesList.length;
diff --git a/src/components/bar/modules/workspaces/index.tsx b/src/components/bar/modules/workspaces/index.tsx
index 6940d8a86..eeb7196df 100644
--- a/src/components/bar/modules/workspaces/index.tsx
+++ b/src/components/bar/modules/workspaces/index.tsx
@@ -1,10 +1,11 @@
 import options from 'src/options';
 import { createThrottledScrollHandlers, getCurrentMonitorWorkspaces } from './helpers';
-import { BarBoxChild, SelfButton } from 'src/lib/types/bar';
+import { BarBoxChild } from 'src/lib/types/bar';
 import { WorkspaceModule } from './workspaces';
 import { bind, Variable } from 'astal';
 import { GtkWidget } from 'src/lib/types/widget';
-import { Gdk } from 'astal/gtk3';
+import { Astal, Gdk } from 'astal/gtk3';
+import { isScrollDown, isScrollUp } from 'src/lib/utils';
 
 const { workspaces, scroll_speed } = options.bar.workspaces;
 
@@ -27,23 +28,27 @@ const Workspaces = (monitor = -1): BarBoxChild => {
         boxClass: 'workspaces',
         isBox: true,
         props: {
-            setup: (self: SelfButton): void => {
+            setup: (self: Astal.EventBox): void => {
+                let scrollHandlers: number;
                 Variable.derive([bind(scroll_speed)], (scroll_speed) => {
+                    if (scrollHandlers) {
+                        self.disconnect(scrollHandlers);
+                    }
+
                     const { throttledScrollUp, throttledScrollDown } = createThrottledScrollHandlers(
                         scroll_speed,
                         currentMonitorWorkspaces,
                     );
 
-                    const scrollHandlers = self.connect('scroll-event', (_: GtkWidget, event: Gdk.Event) => {
-                        const eventDirection = event.get_scroll_direction()[1];
-                        if (eventDirection === Gdk.ScrollDirection.UP) {
-                            throttledScrollUp();
-                        } else if (eventDirection === Gdk.ScrollDirection.DOWN) {
+                    scrollHandlers = self.connect('scroll-event', (_: GtkWidget, event: Gdk.Event) => {
+                        if (isScrollUp(event)) {
                             throttledScrollDown();
                         }
-                    });
 
-                    self.disconnect(scrollHandlers);
+                        if (isScrollDown(event)) {
+                            throttledScrollUp();
+                        }
+                    });
                 });
             },
         },
diff --git a/src/components/bar/shared/WidgetContainer.tsx b/src/components/bar/shared/WidgetContainer.tsx
index 2c5d41c77..9ed9a5826 100644
--- a/src/components/bar/shared/WidgetContainer.tsx
+++ b/src/components/bar/shared/WidgetContainer.tsx
@@ -26,9 +26,9 @@ export const WidgetContainer = (child: BarBoxChild): JSX.Element => {
 
     if (child.isBox) {
         return (
-            <box className={buttonClassName} visible={computeVisible(child)}>
-                {child.component}
-            </box>
+            <eventbox visible={computeVisible(child)} {...child.props}>
+                <box className={buttonClassName}>{child.component}</box>
+            </eventbox>
         );
     }
 
diff --git a/src/components/menus/audio/active/sliderItem/Slider.tsx b/src/components/menus/audio/active/sliderItem/Slider.tsx
index cd4651eb1..07e50f160 100644
--- a/src/components/menus/audio/active/sliderItem/Slider.tsx
+++ b/src/components/menus/audio/active/sliderItem/Slider.tsx
@@ -1,7 +1,7 @@
 import { bind } from 'astal';
 import { Gdk, Gtk } from 'astal/gtk3';
 import AstalWp from 'gi://AstalWp?version=0.1';
-import { capitalizeFirstLetter } from 'src/lib/utils';
+import { capitalizeFirstLetter, isScrollDown, isScrollUp } from 'src/lib/utils';
 import options from 'src/options';
 
 const { raiseMaximumVolume } = options.menus.volume;
@@ -34,16 +34,15 @@ export const Slider = ({ device, type }: SliderProps): JSX.Element => {
                 }}
                 setup={(self) => {
                     self.connect('scroll-event', (_, event: Gdk.Event) => {
-                        const [directionSuccess, direction] = event.get_scroll_direction();
-                        const [deltasSuccess, , yScroll] = event.get_scroll_deltas();
-
-                        if (directionSuccess) {
-                            const newVolume = device.volume + (direction === Gdk.ScrollDirection.DOWN ? 0.05 : -0.05);
-                            device.set_volume(Math.min(newVolume, 1));
-                        } else if (deltasSuccess) {
-                            const newVolume = device.volume - yScroll / 100;
+                        if (isScrollUp(event)) {
+                            const newVolume = device.volume + 0.05;
                             device.set_volume(Math.min(newVolume, 1));
                         }
+
+                        if (isScrollDown(event)) {
+                            const newVolume = device.volume - 0.05;
+                            device.set_volume(newVolume);
+                        }
                     });
                 }}
             />
diff --git a/src/lib/types/bar.d.ts b/src/lib/types/bar.d.ts
index adb394539..70c6082f1 100644
--- a/src/lib/types/bar.d.ts
+++ b/src/lib/types/bar.d.ts
@@ -13,7 +13,7 @@ export type BarBoxChild = {
     isBox?: boolean;
     boxClass: string;
     tooltip_text?: string | Binding<string>;
-} & ({ isBox: true; props: Widget.BoxProps } | { isBox?: false; props: Widget.ButtonProps });
+} & ({ isBox: true; props: Widget.EventBoxProps } | { isBox?: false; props: Widget.ButtonProps });
 
 export type SelfButton = Button<Child, Attribute>;
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 55d3dc1aa..f599b77fc 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -399,7 +399,20 @@ export const isMiddleClick = (event: Astal.ClickEvent): boolean => event.button
  *
  * @returns True if the event is a scroll up, false otherwise.
  */
-export const isScrollUp = (event: Astal.ScrollEvent): boolean => event.direction === Gdk.ScrollDirection.UP;
+export const isScrollUp = (event: Gdk.Event): boolean => {
+    const [directionSuccess, direction] = event.get_scroll_direction();
+    const [deltaSuccess, , yScroll] = event.get_scroll_deltas();
+
+    if (directionSuccess && direction === Gdk.ScrollDirection.UP) {
+        return true;
+    }
+
+    if (deltaSuccess && yScroll < 0) {
+        return true;
+    }
+
+    return false;
+};
 
 /**
  * Checks if an event is a scroll down.
@@ -410,4 +423,17 @@ export const isScrollUp = (event: Astal.ScrollEvent): boolean => event.direction
  *
  * @returns True if the event is a scroll down, false otherwise.
  */
-export const isScrollDown = (event: Astal.ScrollEvent): boolean => event.direction === Gdk.ScrollDirection.DOWN;
+export const isScrollDown = (event: Gdk.Event): boolean => {
+    const [directionSuccess, direction] = event.get_scroll_direction();
+    const [deltaSuccess, , yScroll] = event.get_scroll_deltas();
+
+    if (directionSuccess && direction === Gdk.ScrollDirection.DOWN) {
+        return true;
+    }
+
+    if (deltaSuccess && yScroll > 0) {
+        return true;
+    }
+
+    return false;
+};

From a3f348c58015007c1813dd7bf4205ded47f3e57d Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Tue, 24 Dec 2024 02:17:08 -0800
Subject: [PATCH 04/11] Fixed an issue that would caused empty dashboard
 shortcuts to not hide properly. (#610)

---
 .../shortcuts/buttons/ShortcutButtons.tsx     | 28 +++++++++++++++++--
 .../dashboard/shortcuts/sections/Column.tsx   |  8 +++---
 .../dashboard/shortcuts/sections/Section.tsx  |  4 +--
 src/components/osd/helpers.ts                 | 12 ++++++++
 4 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/components/menus/dashboard/shortcuts/buttons/ShortcutButtons.tsx b/src/components/menus/dashboard/shortcuts/buttons/ShortcutButtons.tsx
index bbd8bca40..5f99b56f0 100644
--- a/src/components/menus/dashboard/shortcuts/buttons/ShortcutButtons.tsx
+++ b/src/components/menus/dashboard/shortcuts/buttons/ShortcutButtons.tsx
@@ -24,36 +24,60 @@ const ShortcutButton = ({ shortcut, ...props }: ShortcutButtonProps): JSX.Elemen
 };
 
 export const LeftShortcut1 = (): JSX.Element => {
+    if (!hasCommand(left.shortcut1)) {
+        return <box />;
+    }
+
     return (
         <ShortcutButton
             shortcut={left.shortcut1}
-            className={`dashboard-button top-button ${hasCommand(left.shortcut1) ? 'paired' : ''}`}
+            className={`dashboard-button top-button ${hasCommand(left.shortcut2) ? 'paired' : ''}`}
         />
     );
 };
 
 export const LeftShortcut2 = (): JSX.Element => {
+    if (!hasCommand(left.shortcut2)) {
+        return <box />;
+    }
+
     return <ShortcutButton shortcut={left.shortcut2} className={`dashboard-button`} />;
 };
 
 export const LeftShortcut3 = (): JSX.Element => {
+    if (!hasCommand(left.shortcut3)) {
+        return <box />;
+    }
+
     return (
         <ShortcutButton
             shortcut={left.shortcut3}
-            className={`dashboard-button top-button ${hasCommand(left.shortcut3) ? 'paired' : ''}`}
+            className={`dashboard-button top-button ${hasCommand(left.shortcut4) ? 'paired' : ''}`}
         />
     );
 };
 
 export const LeftShortcut4 = (): JSX.Element => {
+    if (!hasCommand(left.shortcut4)) {
+        return <box />;
+    }
+
     return <ShortcutButton shortcut={left.shortcut4} className={`dashboard-button `} />;
 };
 
 export const RightShortcut1 = (): JSX.Element => {
+    if (!hasCommand(right.shortcut1)) {
+        return <box />;
+    }
+
     return <ShortcutButton shortcut={right.shortcut1} className={`dashboard-button top-button paired`} />;
 };
 
 export const RightShortcut3 = (): JSX.Element => {
+    if (!hasCommand(right.shortcut3)) {
+        return <box />;
+    }
+
     return <ShortcutButton shortcut={right.shortcut3} className={`dashboard-button top-button paired`} />;
 };
 
diff --git a/src/components/menus/dashboard/shortcuts/sections/Column.tsx b/src/components/menus/dashboard/shortcuts/sections/Column.tsx
index 312ec1ce7..b969eb5cf 100644
--- a/src/components/menus/dashboard/shortcuts/sections/Column.tsx
+++ b/src/components/menus/dashboard/shortcuts/sections/Column.tsx
@@ -1,9 +1,9 @@
 import { BindableChild } from 'astal/gtk3/astalify';
 
-export const LeftColumn = ({ visibleClass, children }: LeftColumnProps): JSX.Element => {
+export const LeftColumn = ({ isVisible, children }: LeftColumnProps): JSX.Element => {
     return (
-        <box className={`card-button-section-container ${visibleClass ? 'visible' : ''}`}>
-            {visibleClass ? (
+        <box className={`card-button-section-container ${isVisible ? 'visible' : ''}`}>
+            {isVisible ? (
                 <box vertical hexpand vexpand>
                     {children}
                 </box>
@@ -25,7 +25,7 @@ export const RightColumn = ({ children }: RightColumnProps): JSX.Element => {
 };
 
 interface LeftColumnProps {
-    visibleClass?: boolean;
+    isVisible?: boolean;
     children?: BindableChild | BindableChild[];
 }
 
diff --git a/src/components/menus/dashboard/shortcuts/sections/Section.tsx b/src/components/menus/dashboard/shortcuts/sections/Section.tsx
index edaf6544c..11489b454 100644
--- a/src/components/menus/dashboard/shortcuts/sections/Section.tsx
+++ b/src/components/menus/dashboard/shortcuts/sections/Section.tsx
@@ -57,7 +57,7 @@ export const LeftShortcuts = (): JSX.Element => {
 
                 return (
                     <box className={'container most-used dashboard-card'}>
-                        <LeftColumn visibleClass={isVisibleRight && isVisibleLeft}>
+                        <LeftColumn isVisible={isVisibleRight && isVisibleLeft}>
                             <LeftShortcut1 />
                             <LeftShortcut2 />
                         </LeftColumn>
@@ -78,7 +78,7 @@ export const RightShortcuts = (): JSX.Element => {
             {Variable.derive(rightBindings, () => {
                 return (
                     <box className={`container utilities dashboard-card ${!leftCardHidden.get() ? 'paired' : ''}`}>
-                        <LeftColumn visibleClass={!leftCardHidden.get()}>
+                        <LeftColumn isVisible={true}>
                             <RightShortcut1 />
                             <SettingsButton />
                         </LeftColumn>
diff --git a/src/components/osd/helpers.ts b/src/components/osd/helpers.ts
index a46706611..2899f4416 100644
--- a/src/components/osd/helpers.ts
+++ b/src/components/osd/helpers.ts
@@ -8,6 +8,14 @@ const { enable, duration, active_monitor, monitor } = options.theme.osd;
 
 let count = 0;
 
+/*
+ * So the OSD doesn't show on startup for no reason
+ */
+let isStartingUp = true;
+timeout(3000, () => {
+    isStartingUp = false;
+});
+
 /**
  * Handles the reveal state of a Widget.Revealer.
  *
@@ -69,6 +77,10 @@ export const handleRevealWindow = (self: Widget.Window, property: 'revealChild'
  * @param property The property to check, either 'revealChild' or 'visible'.
  */
 export const handleReveal = (self: Widget.Revealer | Widget.Window, property: 'revealChild' | 'visible'): void => {
+    if (isStartingUp) {
+        return;
+    }
+
     if (self instanceof Widget.Revealer) {
         handleRevealRevealer(self, property);
     } else if (self instanceof Widget.Window) {

From e0917ffb28fb958a4a92e0aff43f7f6701687b96 Mon Sep 17 00:00:00 2001
From: ilikestreet <ilikestreet.jz@gmail.com>
Date: Tue, 24 Dec 2024 18:34:56 +0800
Subject: [PATCH 05/11] =?UTF-8?q?feat:=20no=20update=20w/=20autohide=20opt?=
 =?UTF-8?q?ion=20&=20add=20option=20to=20swap=20netstat=20icon=20=E2=80=A6?=
 =?UTF-8?q?=20(#591)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: no update w/ autohide option & add option to swap netstat icon for up/down links

* Update src/scss/style/bar/bar.scss

* Update src/components/bar/shared/Module.tsx

* Update src/components/bar/settings/config.tsx

* Update src/options.ts

* Apply suggestions from code review

* move visibilty to updatesIcon func

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>
---
 src/components/bar/modules/netstat/index.tsx |  8 +++++---
 src/components/bar/modules/updates/index.tsx |  4 ++++
 src/components/bar/settings/config.tsx       | 12 ++++++++++++
 src/components/bar/shared/Module.tsx         |  3 ++-
 src/lib/types/bar.d.ts                       |  1 +
 src/options.ts                               |  3 +++
 6 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/components/bar/modules/netstat/index.tsx b/src/components/bar/modules/netstat/index.tsx
index 8a515e613..ae0f7f5be 100644
--- a/src/components/bar/modules/netstat/index.tsx
+++ b/src/components/bar/modules/netstat/index.tsx
@@ -19,6 +19,8 @@ const {
     rateUnit,
     dynamicIcon,
     icon,
+    networkInLabel,
+    networkOutLabel,
     round,
     leftClick,
     rightClick,
@@ -47,11 +49,11 @@ export const Netstat = (): BarBoxChild => {
     const renderNetworkLabel = (lblType: NetstatLabelType, networkService: NetworkResourceData): string => {
         switch (lblType) {
             case 'in':
-                return `↓ ${networkService.in}`;
+                return `${networkInLabel.get()} ${networkService.in}`;
             case 'out':
-                return `↑ ${networkService.out}`;
+                return `${networkOutLabel.get()} ${networkService.out}`;
             default:
-                return `↓ ${networkService.in} ↑ ${networkService.out}`;
+                return `${networkInLabel.get()} ${networkService.in} ${networkOutLabel.get()} ${networkService.out}`;
         }
     };
 
diff --git a/src/components/bar/modules/updates/index.tsx b/src/components/bar/modules/updates/index.tsx
index 6887c1789..d7307a3a4 100644
--- a/src/components/bar/modules/updates/index.tsx
+++ b/src/components/bar/modules/updates/index.tsx
@@ -10,6 +10,7 @@ const {
     updateCommand,
     label,
     padZero,
+    autoHide,
     pollingInterval,
     icon,
     leftClick,
@@ -21,6 +22,7 @@ const {
 
 const pendingUpdates: Variable<string> = Variable('0');
 const postInputUpdater = Variable(true);
+const isVis = Variable(!autoHide.get());
 
 const processUpdateCount = (updateCount: string): string => {
     if (!padZero.get()) return updateCount;
@@ -40,6 +42,7 @@ updatesPoller.initialize('updates');
 const updatesIcon = Variable.derive(
     [bind(icon.pending), bind(icon.updated), bind(pendingUpdates)],
     (pendingIcon, updatedIcon, pUpdates) => {
+        isVis.set(!autoHide.get() || (autoHide.get() && parseFloat(pUpdates) > 0));
         return parseFloat(pUpdates) === 0 ? updatedIcon : pendingIcon;
     },
 );
@@ -49,6 +52,7 @@ export const Updates = (): BarBoxChild => {
         textIcon: updatesIcon(),
         tooltipText: bind(pendingUpdates).as((v) => `${v} updates available`),
         boxClass: 'updates',
+        isVis: isVis,
         label: bind(pendingUpdates),
         showLabelBinding: bind(label),
         props: {
diff --git a/src/components/bar/settings/config.tsx b/src/components/bar/settings/config.tsx
index e43fc37fe..384715e4c 100644
--- a/src/components/bar/settings/config.tsx
+++ b/src/components/bar/settings/config.tsx
@@ -154,6 +154,12 @@ export const CustomModuleSettings = (): JSX.Element => {
                 />
                 <Option opt={options.bar.customModules.netstat.icon} title="Netstat Icon" type="string" />
                 <Option opt={options.bar.customModules.netstat.label} title="Show Label" type="boolean" />
+                <Option opt={options.bar.customModules.netstat.networkInLabel} title="Network In Label" type="string" />
+                <Option
+                    opt={options.bar.customModules.netstat.networkOutLabel}
+                    title="Network Out Label"
+                    type="string"
+                />
                 <Option
                     opt={options.bar.customModules.netstat.rateUnit}
                     title="Rate Unit"
@@ -221,6 +227,12 @@ export const CustomModuleSettings = (): JSX.Element => {
                 />
                 <Option opt={options.bar.customModules.updates.icon.updated} title="No Updates Icon" type="string" />
                 <Option opt={options.bar.customModules.updates.label} title="Show Label" type="boolean" />
+                <Option
+                    opt={options.bar.customModules.updates.autoHide}
+                    title="Auto Hide"
+                    subtitle="Hides module when no updates are available."
+                    type="boolean"
+                />
                 <Option opt={options.bar.customModules.updates.padZero} title="Pad with 0" type="boolean" />
                 <Option opt={options.theme.bar.buttons.modules.updates.spacing} title="Spacing" type="string" />
                 <Option
diff --git a/src/components/bar/shared/Module.tsx b/src/components/bar/shared/Module.tsx
index 14622cd54..525980a25 100644
--- a/src/components/bar/shared/Module.tsx
+++ b/src/components/bar/shared/Module.tsx
@@ -14,6 +14,7 @@ export const Module = ({
     label,
     tooltipText,
     boxClass,
+    isVis,
     props = {},
     showLabelBinding = bind(undefinedVar),
     showLabel,
@@ -86,7 +87,7 @@ export const Module = ({
     return {
         component,
         tooltip_text: tooltipText,
-        isVisible: true,
+        isVis: isVis,
         boxClass,
         props,
     };
diff --git a/src/lib/types/bar.d.ts b/src/lib/types/bar.d.ts
index 70c6082f1..d3b2d9bba 100644
--- a/src/lib/types/bar.d.ts
+++ b/src/lib/types/bar.d.ts
@@ -29,6 +29,7 @@ export type BarModule = {
     boundLabel?: string;
     tooltipText?: string | Binding<string>;
     boxClass: string;
+    isVis?: Variable<boolean>;
     props?: Widget.ButtonProps;
     showLabel?: boolean;
     showLabelBinding?: Binding;
diff --git a/src/options.ts b/src/options.ts
index ca6963e4d..a4b398d0e 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -1072,6 +1072,8 @@ const options = mkOptions(CONFIG, {
                 networkInterface: opt(''),
                 dynamicIcon: opt(false),
                 icon: opt('󰖟'),
+                networkInLabel: opt('↓'),
+                networkOutLabel: opt('↑'),
                 round: opt(true),
                 labelType: opt<NetstatLabelType>('full'),
                 rateUnit: opt<RateUnit>('auto'),
@@ -1094,6 +1096,7 @@ const options = mkOptions(CONFIG, {
                 updateCommand: opt(`${SRC_DIR}/scripts/checkUpdates.sh -arch`),
                 label: opt(true),
                 padZero: opt(true),
+                autoHide: opt(false),
                 icon: {
                     pending: opt('󰏗'),
                     updated: opt('󰏖'),

From e7d9235bf5a17faa5d767b694c9c9573b4f45171 Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Tue, 24 Dec 2024 02:43:58 -0800
Subject: [PATCH 06/11] Fixed an issue where the updates module wouldn't update
 visibility when auto-hide was toggled. (#612)

---
 src/components/bar/modules/updates/index.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/bar/modules/updates/index.tsx b/src/components/bar/modules/updates/index.tsx
index d7307a3a4..c2460bfa6 100644
--- a/src/components/bar/modules/updates/index.tsx
+++ b/src/components/bar/modules/updates/index.tsx
@@ -39,6 +39,10 @@ const updatesPoller = new BashPoller<string, []>(
 
 updatesPoller.initialize('updates');
 
+Variable.derive([bind(autoHide)], (autoHideModule) => {
+    isVis.set(!autoHideModule || (autoHideModule && parseFloat(pendingUpdates.get()) > 0));
+});
+
 const updatesIcon = Variable.derive(
     [bind(icon.pending), bind(icon.updated), bind(pendingUpdates)],
     (pendingIcon, updatedIcon, pUpdates) => {

From c87a6ca25148ebbe811603dd099994d5ee152b07 Mon Sep 17 00:00:00 2001
From: Amaan Qureshi <amaanq12@gmail.com>
Date: Tue, 24 Dec 2024 05:53:30 -0500
Subject: [PATCH 07/11] support paru in `checkUpdates` & clarify polling
 interval is in ms (#601)

* feat(scripts): support `paru` for checking package updates

* fix(config): clarify polling interval is in ms

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>
---
 scripts/checkUpdates.sh                | 9 +++++++--
 src/components/bar/settings/config.tsx | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/scripts/checkUpdates.sh b/scripts/checkUpdates.sh
index 39bf6ecb4..ab36d3c5a 100755
--- a/scripts/checkUpdates.sh
+++ b/scripts/checkUpdates.sh
@@ -3,14 +3,19 @@
 check_arch_updates() {
     official_updates=0
     aur_updates=0
+	if command -v paru &> /dev/null; then
+		aur_helper="paru"
+	else
+		aur_helper="yay"
+	fi
 
     if [ "$1" = "-y" ]; then
-        aur_updates=$(yay -Qum 2>/dev/null | wc -l)
+        aur_updates=$($aur_helper -Qum 2>/dev/null | wc -l)
     elif [ "$1" = "-p" ]; then
         official_updates=$(checkupdates 2>/dev/null | wc -l)
     else
         official_updates=$(checkupdates 2>/dev/null | wc -l)
-        aur_updates=$(yay -Qum 2>/dev/null | wc -l)
+        aur_updates=$($aur_helper -Qum 2>/dev/null | wc -l)
     fi
 
     total_updates=$((official_updates + aur_updates))
diff --git a/src/components/bar/settings/config.tsx b/src/components/bar/settings/config.tsx
index 384715e4c..931e46b06 100644
--- a/src/components/bar/settings/config.tsx
+++ b/src/components/bar/settings/config.tsx
@@ -176,7 +176,7 @@ export const CustomModuleSettings = (): JSX.Element => {
                 <Option opt={options.bar.customModules.netstat.round} title="Round" type="boolean" />
                 <Option
                     opt={options.bar.customModules.netstat.pollingInterval}
-                    title="Polling Interval"
+                    title="Polling Interval (ms)"
                     type="number"
                     min={100}
                     max={60 * 24 * 1000}

From e9df5eb23069248dd5c1690601091ca343f55106 Mon Sep 17 00:00:00 2001
From: davfsa <davfsa@gmail.com>
Date: Tue, 24 Dec 2024 11:56:11 +0100
Subject: [PATCH 08/11] Fix resolving paths for .face.icon in dashboard and add
 home ('~') path support (#606)

* Fix resolving paths for .face.icon in dashboard and add home ('~') path support

* Fix ESLint issues

* Update src/lib/utils.ts

Co-authored-by: davfsa <davfsa@gmail.com>

* Update src/lib/utils.ts

* Rename `resolvePath` to `normalizePath`

* Rename missing reference

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>
---
 .../menus/dashboard/profile/Profile.tsx       | 11 ++++----
 src/lib/utils.ts                              | 28 ++++++++++++++-----
 src/options.ts                                |  2 +-
 src/scss/optionsTrackers.ts                   |  4 +--
 4 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/components/menus/dashboard/profile/Profile.tsx b/src/components/menus/dashboard/profile/Profile.tsx
index cdac41e9b..cb2d175d5 100644
--- a/src/components/menus/dashboard/profile/Profile.tsx
+++ b/src/components/menus/dashboard/profile/Profile.tsx
@@ -1,7 +1,7 @@
 import { bind, exec } from 'astal';
-import GdkPixbuf from 'gi://GdkPixbuf';
 import { Gtk } from 'astal/gtk3';
 import options from 'src/options.js';
+import { normalizePath, isAnImage } from 'src/lib/utils.js';
 
 const { image, name } = options.menus.dashboard.powermenu.avatar;
 
@@ -11,12 +11,11 @@ const ProfilePicture = (): JSX.Element => {
             className={'profile-picture'}
             halign={Gtk.Align.CENTER}
             css={bind(image).as((img) => {
-                try {
-                    GdkPixbuf.Pixbuf.new_from_file(img);
-                    return `background-image: url("${img}")`;
-                } catch {
-                    return `background-image: url("${SRC_DIR}/assets/hyprpanel.png")`;
+                if (isAnImage(img)) {
+                    return `background-image: url("${normalizePath(img)}")`;
                 }
+
+                return `background-image: url("${SRC_DIR}/assets/hyprpanel.png")`;
             })}
         />
     );
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index f599b77fc..7af5afc53 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -11,7 +11,6 @@ import options from '../options';
 import { Astal, Gdk, Gtk } from 'astal/gtk3';
 import AstalApps from 'gi://AstalApps?version=0.1';
 import { exec, execAsync } from 'astal/process';
-import { Gio } from 'astal';
 
 /**
  * Handles errors by throwing a new Error with a message.
@@ -228,18 +227,15 @@ export function launchApp(app: AstalApps.Application): void {
  * This function attempts to load an image from the specified filepath using GdkPixbuf.
  * If the image is successfully loaded, it returns true. Otherwise, it logs an error and returns false.
  *
+ * Note: Unlike GdkPixbuf, this function will normalize the given path.
+ *
  * @param imgFilePath The path to the image file.
  *
  * @returns True if the filepath is a valid image, false otherwise.
  */
 export function isAnImage(imgFilePath: string): boolean {
     try {
-        const file = Gio.File.new_for_path(imgFilePath);
-        if (!file.query_exists(null)) {
-            return false;
-        }
-
-        GdkPixbuf.Pixbuf.new_from_file(imgFilePath);
+        GdkPixbuf.Pixbuf.new_from_file(normalizePath(imgFilePath));
         return true;
     } catch (error) {
         console.error(error);
@@ -247,6 +243,24 @@ export function isAnImage(imgFilePath: string): boolean {
     }
 }
 
+/**
+ * Normalize a path to the absolute representation of the path.
+ *
+ * Note: This will only expand '~' if present. Path traversal is not supported.
+ *
+ * @param path The path to normalize.
+ *
+ * @returns The normalized path.
+ */
+export function normalizePath(path: string): string {
+    if (path.charAt(0) == '~') {
+        // Replace will only replace the first match, in this case, the first character
+        return path.replace('~', GLib.get_home_dir());
+    }
+
+    return path;
+}
+
 /**
  * Sends a notification using the `notify-send` command.
  *
diff --git a/src/options.ts b/src/options.ts
index a4b398d0e..8f03b86cd 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -1202,7 +1202,7 @@ const options = mkOptions(CONFIG, {
                 logout: opt('hyprctl dispatch exit'),
                 shutdown: opt('systemctl poweroff'),
                 avatar: {
-                    image: opt('$HOME/.face.icon'),
+                    image: opt('~/.face.icon'),
                     name: opt<'system' | string>('system'),
                 },
             },
diff --git a/src/scss/optionsTrackers.ts b/src/scss/optionsTrackers.ts
index e1154bd16..a605477ae 100644
--- a/src/scss/optionsTrackers.ts
+++ b/src/scss/optionsTrackers.ts
@@ -1,5 +1,5 @@
 import icons from '../lib/icons/icons';
-import { bash, dependencies, Notify, isAnImage } from '../lib/utils';
+import { bash, dependencies, Notify, isAnImage, normalizePath } from '../lib/utils';
 import options from '../options';
 import Wallpaper from 'src/services/Wallpaper';
 
@@ -8,7 +8,7 @@ const { matugen } = options.theme;
 const ensureMatugenWallpaper = (): void => {
     const wallpaperPath = options.wallpaper.image.get();
 
-    if (matugen.get() && (!options.wallpaper.image.get().length || !isAnImage(wallpaperPath))) {
+    if (matugen.get() && (!wallpaperPath.length || !isAnImage(normalizePath(wallpaperPath)))) {
         Notify({
             summary: 'Matugen Failed',
             body: "Please select a wallpaper in 'Theming > General' first.",

From 7258819c1ff30fdae052fc353c308d31aec4326f Mon Sep 17 00:00:00 2001
From: davfsa <davfsa@gmail.com>
Date: Tue, 24 Dec 2024 12:03:46 +0100
Subject: [PATCH 09/11] Make low battery thresholds inclusive and support
 multiple $POWER_LEVEL replacements (#611)

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>
---
 src/lib/behaviors/batteryWarning.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/behaviors/batteryWarning.ts b/src/lib/behaviors/batteryWarning.ts
index 09c51a8ec..038398a56 100644
--- a/src/lib/behaviors/batteryWarning.ts
+++ b/src/lib/behaviors/batteryWarning.ts
@@ -29,19 +29,19 @@ export function warnOnLowBattery(): void {
         // To avoid double notifications, we check each of the thresholds and set the correct `sentNotification`, but then
         // combine them into one notification only
         let sendNotification = false;
-        if (!sentLowNotification && batteryPercentage < lowThreshold) {
+        if (!sentLowNotification && batteryPercentage <= lowThreshold) {
             sentLowNotification = true;
             sendNotification = true;
         }
-        if (!sentHalfLowNotification && batteryPercentage < lowThreshold / 2) {
+        if (!sentHalfLowNotification && batteryPercentage <= lowThreshold / 2) {
             sentHalfLowNotification = true;
             sendNotification = true;
         }
 
         if (sendNotification) {
             Notify({
-                summary: lowBatteryNotificationTitle.get().replace('$POWER_LEVEL', batteryPercentage.toString()),
-                body: lowBatteryNotificationText.get().replace('$POWER_LEVEL', batteryPercentage.toString()),
+                summary: lowBatteryNotificationTitle.get().replaceAll('$POWER_LEVEL', batteryPercentage.toString()),
+                body: lowBatteryNotificationText.get().replaceAll('$POWER_LEVEL', batteryPercentage.toString()),
                 iconName: icons.ui.warning,
                 urgency: 'critical',
             });

From 905d9776aceec71e88996bc6ccd1ba969f9a4d85 Mon Sep 17 00:00:00 2001
From: Antoine Bertin <antoine@bertin.io>
Date: Tue, 24 Dec 2024 12:23:25 +0100
Subject: [PATCH 10/11] fix: missing class for bluetooth discover button (#613)

---
 .../menus/bluetooth/header/Controls/DiscoverButton.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/menus/bluetooth/header/Controls/DiscoverButton.tsx b/src/components/menus/bluetooth/header/Controls/DiscoverButton.tsx
index a45acb375..8c2554282 100644
--- a/src/components/menus/bluetooth/header/Controls/DiscoverButton.tsx
+++ b/src/components/menus/bluetooth/header/Controls/DiscoverButton.tsx
@@ -6,7 +6,7 @@ import { isDiscovering } from './helper';
 
 export const DiscoverButton = (): JSX.Element => (
     <button
-        className="menu-icon-button search"
+        className="menu-icon-button search bluetooth"
         valign={Gtk.Align.CENTER}
         onClick={(_, self) => {
             if (!isPrimaryClick(self)) {

From 65140db40cdd09ac492dbd2ad6d584e372311b01 Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Tue, 24 Dec 2024 03:32:51 -0800
Subject: [PATCH 11/11] Fixed styling of playback toggle button in volume menu.
 (#615)

---
 src/components/menus/audio/active/index.tsx |  2 +-
 src/lib/utils.ts                            |  2 +-
 src/scss/style/menus/audiomenu.scss         | 24 ++++++++++-----------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/menus/audio/active/index.tsx b/src/components/menus/audio/active/index.tsx
index fa640cc47..470aba1e8 100644
--- a/src/components/menus/audio/active/index.tsx
+++ b/src/components/menus/audio/active/index.tsx
@@ -16,7 +16,7 @@ const Header = (): JSX.Element => (
     <box className={'menu-label-container volume selected'} halign={Gtk.Align.FILL}>
         <label className={'menu-label audio volume'} halign={Gtk.Align.START} hexpand label={'Volume'} />
         <button
-            className={'menu-label slider-toggle'}
+            className={'menu-icon-button menu-label slider-toggle volume'}
             onClick={(_, event) => {
                 if (!isPrimaryClick(event)) {
                     return;
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 7af5afc53..898d91811 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -238,7 +238,7 @@ export function isAnImage(imgFilePath: string): boolean {
         GdkPixbuf.Pixbuf.new_from_file(normalizePath(imgFilePath));
         return true;
     } catch (error) {
-        console.error(error);
+        console.info(error);
         return false;
     }
 }
diff --git a/src/scss/style/menus/audiomenu.scss b/src/scss/style/menus/audiomenu.scss
index f7d4bbc6a..462dda7f0 100644
--- a/src/scss/style/menus/audiomenu.scss
+++ b/src/scss/style/menus/audiomenu.scss
@@ -31,6 +31,18 @@
         color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
     }
 
+    .menu-icon-button.volume {
+        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
+        padding: 0em 1em;
+
+        label {
+            font-size: 1.25em;
+        }
+        &:hover {
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
+        }
+    }
+
     .menu-slider.playback {
         trough {
             background: if(
@@ -213,18 +225,6 @@
         border-radius: 0em;
     }
 
-    .slider-toggle {
-        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
-        padding: 0em 1em;
-        label {
-            font-size: 1.25em;
-        }
-
-        &:hover {
-            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
-        }
-    }
-
     .active-playbacks-scrollable {
         min-height: 12.5em;