Added a command to adjust volume that respects hyprpanel settings and made bar module settings for click events apply immediately. (#619)

scripts/hyprpanel_launcher.sh.in

@@ -5,5 +5,5 @@ export HYPRPANEL_DATADIR="@DATADIR@"
 if [ "$#" -eq 0 ]; then
     exec gjs -m "@DATADIR@/hyprpanel.js"
 else
-    exec astal -i hyprpanel "$@"
+    exec astal -i hyprpanel "$*"
 fi

src/cli/commander/Parser.ts

@@ -2,13 +2,11 @@ import { CommandRegistry } from './Registry';
 import { Command, ParsedCommand } from './types';
 
 /**
- * The CommandParser is responsible for parsing the input string into a command and its positional arguments.
+ * Parses an input string into a command and its positional arguments.
- * It does not handle flags, only positional arguments.
  *
- * Expected command format:
+ * Expected format:
  *   astal <commandName> arg1 arg2 arg3...
  *
- * The parser:
  * 1. Tokenizes the input.
  * 2. Identifies the command by the first token.
  * 3. Parses positional arguments based on the command definition.
@@ -19,23 +17,25 @@ export class CommandParser {
     private registry: CommandRegistry;
 
     /**
-     * Creates an instance of CommandParser.
+     * Constructs a CommandParser with the provided command registry.
      *
-     * @param registry - The command registry to use.
+     * @param registry - The command registry containing available commands.
      */
     constructor(registry: CommandRegistry) {
         this.registry = registry;
     }
 
     /**
-     * Parses the input string into a ParsedCommand object.
+     * Parses the entire input string, returning the matching command and its arguments.
      *
-     * @param input - The input string to parse.
+     * @param input - The raw input string to parse.
-     * @returns The parsed command and its arguments.
+     * @returns A parsed command object, including the command and its arguments.
-     * @throws If no command is provided or the command is unknown.
+     * @throws If no command token is found.
+     * @throws If the command token is not registered.
      */
     parse(input: string): ParsedCommand {
         const tokens = this.tokenize(input);
+
         if (tokens.length === 0) {
             throw new Error('No command provided.');
         }
@@ -51,10 +51,10 @@ export class CommandParser {
     }
 
     /**
-     * Tokenizes the input string into an array of tokens.
+     * Splits the input string into tokens, respecting quotes.
      *
-     * @param input - The input string to tokenize.
+     * @param input - The raw input string to break into tokens.
-     * @returns The array of tokens.
+     * @returns An array of tokens.
      */
     private tokenize(input: string): string[] {
         const regex = /(?:[^\s"']+|"[^"]*"|'[^']*')+/g;
@@ -63,78 +63,131 @@ export class CommandParser {
     }
 
     /**
-     * Strips quotes from the beginning and end of a string.
+     * Removes surrounding quotes from a single token, if they exist.
      *
-     * @param str - The string to strip quotes from.
+     * @param str - The token from which to strip leading or trailing quotes.
-     * @returns The string without quotes.
+     * @returns The token without its outer quotes.
      */
     private stripQuotes(str: string): string {
         return str.replace(/^["'](.+(?=["']$))["']$/, '$1');
     }
 
     /**
-     * Parses the positional arguments for a command.
+     * Parses the array of tokens into arguments based on the command's argument definitions.
      *
-     * @param command - The command definition.
+     * @param command - The command whose arguments are being parsed.
-     * @param tokens - The array of argument tokens.
+     * @param tokens - The list of tokens extracted from the input.
-     * @returns The parsed arguments.
+     * @returns An object mapping argument names to their parsed values.
-     * @throws If there are too many arguments or a required argument is missing.
+     * @throws If required arguments are missing.
+     * @throws If there are too many tokens for the command definition.
      */
     private parseArgs(command: Command, tokens: string[]): Record<string, unknown> {
         const args: Record<string, unknown> = {};
-        const argDefs = command.args;
+        let currentIndex = 0;
 
-        if (tokens.length > argDefs.length) {
+        for (const argDef of command.args) {
-            throw new Error(`Too many arguments for command "${command.name}". Expected at most ${argDefs.length}.`);
+            if (currentIndex >= tokens.length) {
-        }
-
-        argDefs.forEach((argDef, index) => {
-            const value = tokens[index];
-            if (value === undefined) {
                 if (argDef.required) {
                     throw new Error(`Missing required argument: "${argDef.name}".`);
                 }
                 if (argDef.default !== undefined) {
                     args[argDef.name] = argDef.default;
                 }
-                return;
+                continue;
             }
 
+            if (argDef.type === 'object') {
+                const { objectValue, nextIndex } = this.parseObjectTokens(tokens, currentIndex);
+                args[argDef.name] = objectValue;
+                currentIndex = nextIndex;
+            } else {
+                const value = tokens[currentIndex];
+                currentIndex++;
                 args[argDef.name] = this.convertType(value, argDef.type);
-        });
+            }
+        }
+
+        if (currentIndex < tokens.length) {
+            throw new Error(
+                `Too many arguments for command "${command.name}". Expected at most ${command.args.length}.`,
+            );
+        }
 
         return args;
     }
 
     /**
-     * Converts a string value to the specified type.
+     * Accumulates tokens until braces are balanced to form a valid JSON string,
+     * then parses the result.
      *
-     * @param value - The value to convert.
+     * @param tokens - The list of tokens extracted from the input.
-     * @param type - The type to convert to.
+     * @param startIndex - The token index from which to begin JSON parsing.
-     * @returns  The converted value.
+     * @returns An object containing the parsed JSON object and the next token index.
-     * @throws If the value cannot be converted to the specified type.
+     * @throws If the reconstructed JSON is invalid.
      */
-    private convertType(
+    private parseObjectTokens(tokens: string[], startIndex: number): { objectValue: unknown; nextIndex: number } {
-        value: string,
+        let braceCount = 0;
-        type: 'string' | 'number' | 'boolean' | 'object',
+        let started = false;
-    ): string | number | boolean | Record<string, unknown> {
+        const objectTokens: string[] = [];
+        let currentIndex = startIndex;
+
+        while (currentIndex < tokens.length) {
+            const token = tokens[currentIndex];
+            currentIndex++;
+
+            for (const char of token) {
+                if (char === '{') braceCount++;
+                if (char === '}') braceCount--;
+            }
+
+            objectTokens.push(token);
+
+            // Once we've started and braceCount returns to 0, we assume the object is complete
+            if (started && braceCount === 0) break;
+            if (token.includes('{')) started = true;
+        }
+
+        const objectString = objectTokens.join(' ');
+        let parsed: unknown;
+        try {
+            parsed = JSON.parse(objectString);
+        } catch {
+            throw new Error(`Invalid JSON object: "${objectString}".`);
+        }
+
+        return { objectValue: parsed, nextIndex: currentIndex };
+    }
+
+    /**
+     * Converts a single token to the specified argument type.
+     *
+     * @param value - The raw token to be converted.
+     * @param type - The expected argument type.
+     * @returns The converted value.
+     * @throws If the token cannot be converted to the expected type.
+     */
+    private convertType(value: string, type: 'string' | 'number' | 'boolean' | 'object'): unknown {
         switch (type) {
-            case 'number':
+            case 'number': {
                 const num = Number(value);
                 if (isNaN(num)) {
                     throw new Error(`Expected a number but got "${value}".`);
                 }
                 return num;
-            case 'boolean':
+            }
-                if (value.toLowerCase() === 'true') return true;
+            case 'boolean': {
-                if (value.toLowerCase() === 'false') return false;
+                const lower = value.toLowerCase();
+                if (lower === 'true') return true;
+                if (lower === 'false') return false;
                 throw new Error(`Expected a boolean (true/false) but got "${value}".`);
-            case 'object':
+            }
+            case 'object': {
                 try {
                     return JSON.parse(value);
                 } catch {
                     throw new Error(`Invalid JSON object: "${value}".`);
                 }
+            }
             case 'string':
             default:
                 return value;

src/cli/commander/commands/utility/index.ts

@@ -2,6 +2,7 @@ import { errorHandler } from 'src/lib/utils';
 import { Command } from '../../types';
 import { execAsync, Gio, GLib } from 'astal';
 import { checkDependencies } from './checkDependencies';
+import { audioService } from 'src/lib/constants/services';
 
 export const utilityCommands: Command[] = [
     {
@@ -33,6 +34,36 @@ export const utilityCommands: Command[] = [
             }
         },
     },
+    {
+        name: 'adjustVolume',
+        aliases: ['vol'],
+        description: 'Adjusts the volume of the default audio output device.',
+        category: 'Utility',
+        args: [
+            {
+                name: 'volume',
+                description: 'A positive or negative number to adjust the volume by.',
+                type: 'number',
+                required: true,
+            },
+        ],
+        handler: (args: Record<string, unknown>): number => {
+            try {
+                const speaker = audioService.defaultSpeaker;
+                const volumeInput = Number(args['volume']) / 100;
+
+                if (options.menus.volume.raiseMaximumVolume.get()) {
+                    speaker.set_volume(Math.min(speaker.volume + volumeInput, 1.5));
+                } else {
+                    speaker.set_volume(Math.min(speaker.volume + volumeInput, 1));
+                }
+
+                return Math.round((speaker.volume + volumeInput) * 100);
+            } catch (error) {
+                errorHandler(error);
+            }
+        },
+    },
     {
         name: 'migrateConfig',
         aliases: ['mcfg'],

src/components/bar/modules/battery/index.tsx

@@ -7,7 +7,6 @@ import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/util
 import Variable from 'astal/variable';
 import { bind } from 'astal/binding.js';
 import AstalBattery from 'gi://AstalBattery?version=0.1';
-import { useHook } from 'src/lib/shared/hookHandler';
 import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers';
 import { getBatteryIcon } from './helpers';
 
@@ -102,29 +101,43 @@ const BatteryLabel = (): BarBoxChild => {
         boxClass: 'battery',
         props: {
             setup: (self: Astal.Button): void => {
-                useHook(self, options.bar.scrollSpeed, () => {
+                let disconnectFunctions: (() => void)[] = [];
+
+                Variable.derive(
+                    [
+                        bind(rightClick),
+                        bind(middleClick),
+                        bind(scrollUp),
+                        bind(scrollDown),
+                        bind(options.bar.scrollSpeed),
+                    ],
+                    () => {
+                        disconnectFunctions.forEach((disconnect) => disconnect());
+                        disconnectFunctions = [];
+
                         const throttledHandler = throttledScrollHandler(options.bar.scrollSpeed.get());
 
-                    const disconnectPrimary = onPrimaryClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onPrimaryClick(self, (clicked, event) => {
                                 openMenu(clicked, event, 'energymenu');
-                    });
+                            }),
+                        );
 
-                    const disconnectSecondary = onSecondaryClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onSecondaryClick(self, (clicked, event) => {
                                 runAsyncCommand(rightClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectMiddle = onMiddleClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onMiddleClick(self, (clicked, event) => {
                                 runAsyncCommand(middleClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectScroll = onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get());
+                        disconnectFunctions.push(onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get()));
-                    return (): void => {
+                    },
-                        disconnectPrimary();
+                );
-                        disconnectSecondary();
-                        disconnectMiddle();
-                        disconnectScroll();
-                    };
-                });
             },
         },
     };

src/components/bar/modules/bluetooth/index.tsx

@@ -5,7 +5,6 @@ import { BarBoxChild } from 'src/lib/types/bar.js';
 import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers.js';
 import { bind } from 'astal/binding.js';
 import Variable from 'astal/variable.js';
-import { useHook } from 'src/lib/shared/hookHandler.js';
 import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers.js';
 import AstalBluetooth from 'gi://AstalBluetooth?version=0.1';
 import { Astal } from 'astal/gtk3';
@@ -57,30 +56,43 @@ const Bluetooth = (): BarBoxChild => {
         boxClass: 'bluetooth',
         props: {
             setup: (self: Astal.Button): void => {
-                useHook(self, options.bar.scrollSpeed, () => {
+                let disconnectFunctions: (() => void)[] = [];
+
+                Variable.derive(
+                    [
+                        bind(rightClick),
+                        bind(middleClick),
+                        bind(scrollUp),
+                        bind(scrollDown),
+                        bind(options.bar.scrollSpeed),
+                    ],
+                    () => {
+                        disconnectFunctions.forEach((disconnect) => disconnect());
+                        disconnectFunctions = [];
+
                         const throttledHandler = throttledScrollHandler(options.bar.scrollSpeed.get());
 
-                    const disconnectPrimary = onPrimaryClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onPrimaryClick(self, (clicked, event) => {
                                 openMenu(clicked, event, 'bluetoothmenu');
-                    });
+                            }),
+                        );
 
-                    const disconnectSecondary = onSecondaryClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onSecondaryClick(self, (clicked, event) => {
                                 runAsyncCommand(rightClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectMiddle = onMiddleClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onMiddleClick(self, (clicked, event) => {
                                 runAsyncCommand(middleClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectScroll = onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get());
+                        disconnectFunctions.push(onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get()));
-
+                    },
-                    return (): void => {
+                );
-                        disconnectPrimary();
-                        disconnectSecondary();
-                        disconnectMiddle();
-                        disconnectScroll();
-                    };
-                });
             },
             onDestroy: (): void => {
                 componentClassName.drop();

src/components/bar/modules/clock/index.tsx

@@ -3,7 +3,6 @@ import options from 'src/options';
 import { BarBoxChild } from 'src/lib/types/bar.js';
 import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers.js';
 import { bind, Variable } from 'astal';
-import { useHook } from 'src/lib/shared/hookHandler';
 import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers';
 import { Astal } from 'astal/gtk3';
 import { systemTime } from 'src/globals/time';
@@ -57,30 +56,43 @@ const Clock = (): BarBoxChild => {
         boxClass: 'clock',
         props: {
             setup: (self: Astal.Button): void => {
-                useHook(self, options.bar.scrollSpeed, () => {
+                let disconnectFunctions: (() => void)[] = [];
+
+                Variable.derive(
+                    [
+                        bind(rightClick),
+                        bind(middleClick),
+                        bind(scrollUp),
+                        bind(scrollDown),
+                        bind(options.bar.scrollSpeed),
+                    ],
+                    () => {
+                        disconnectFunctions.forEach((disconnect) => disconnect());
+                        disconnectFunctions = [];
+
                         const throttledHandler = throttledScrollHandler(options.bar.scrollSpeed.get());
 
-                    const disconnectPrimary = onPrimaryClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onPrimaryClick(self, (clicked, event) => {
                                 openMenu(clicked, event, 'calendarmenu');
-                    });
+                            }),
+                        );
 
-                    const disconnectSecondary = onSecondaryClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onSecondaryClick(self, (clicked, event) => {
                                 runAsyncCommand(rightClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectMiddle = onMiddleClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onMiddleClick(self, (clicked, event) => {
                                 runAsyncCommand(middleClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectScroll = onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get());
+                        disconnectFunctions.push(onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get()));
-
+                    },
-                    return (): void => {
+                );
-                        disconnectPrimary();
-                        disconnectSecondary();
-                        disconnectMiddle();
-                        disconnectScroll();
-                    };
-                });
             },
         },
     };

src/components/bar/modules/media/index.tsx

@@ -1,18 +1,26 @@
 import { openMenu } from '../../utils/menu.js';
 import options from 'src/options.js';
-import { runAsyncCommand } from 'src/components/bar/utils/helpers.js';
+import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers.js';
 import { generateMediaLabel } from './helpers/index.js';
-import { useHook } from 'src/lib/shared/hookHandler.js';
 import { mprisService } from 'src/lib/constants/services.js';
 import Variable from 'astal/variable.js';
-import { onMiddleClick, onPrimaryClick, onSecondaryClick } from 'src/lib/shared/eventHandlers.js';
+import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers.js';
 import { bind } from 'astal/binding.js';
 import { BarBoxChild } from 'src/lib/types/bar.js';
 import { Astal } from 'astal/gtk3';
 import { activePlayer, mediaAlbum, mediaArtist, mediaTitle } from 'src/globals/media.js';
 
-const { truncation, truncation_size, show_label, show_active_only, rightClick, middleClick, format } =
+const {
-    options.bar.media;
+    truncation,
+    truncation_size,
+    show_label,
+    show_active_only,
+    rightClick,
+    middleClick,
+    scrollUp,
+    scrollDown,
+    format,
+} = options.bar.media;
 
 const isVis = Variable(!show_active_only.get());
 
@@ -71,25 +79,43 @@ const Media = (): BarBoxChild => {
         boxClass: 'media',
         props: {
             setup: (self: Astal.Button): void => {
-                useHook(self, options.bar.scrollSpeed, () => {
+                let disconnectFunctions: (() => void)[] = [];
-                    const disconnectPrimary = onPrimaryClick(self, (clicked, event) => {
+
+                Variable.derive(
+                    [
+                        bind(rightClick),
+                        bind(middleClick),
+                        bind(scrollUp),
+                        bind(scrollDown),
+                        bind(options.bar.scrollSpeed),
+                    ],
+                    () => {
+                        disconnectFunctions.forEach((disconnect) => disconnect());
+                        disconnectFunctions = [];
+
+                        const throttledHandler = throttledScrollHandler(options.bar.scrollSpeed.get());
+
+                        disconnectFunctions.push(
+                            onPrimaryClick(self, (clicked, event) => {
                                 openMenu(clicked, event, 'mediamenu');
-                    });
+                            }),
+                        );
 
-                    const disconnectSecondary = onSecondaryClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onSecondaryClick(self, (clicked, event) => {
                                 runAsyncCommand(rightClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectMiddle = onMiddleClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onMiddleClick(self, (clicked, event) => {
                                 runAsyncCommand(middleClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    return (): void => {
+                        disconnectFunctions.push(onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get()));
-                        disconnectPrimary();
+                    },
-                        disconnectSecondary();
+                );
-                        disconnectMiddle();
-                    };
-                });
             },
         },
     };

src/components/bar/modules/menu/index.tsx

@@ -5,7 +5,6 @@ import { getDistroIcon } from '../../../../lib/utils.js';
 import { bind } from 'astal/binding.js';
 import Variable from 'astal/variable.js';
 import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers.js';
-import { useHook } from 'src/lib/shared/hookHandler.js'; // Ensure correct import
 import { BarBoxChild } from 'src/lib/types/bar.js';
 import { Astal } from 'astal/gtk3';
 
@@ -43,30 +42,43 @@ const Menu = (): BarBoxChild => {
         boxClass: 'dashboard',
         props: {
             setup: (self: Astal.Button): void => {
-                useHook(self, options.bar.scrollSpeed, () => {
+                let disconnectFunctions: (() => void)[] = [];
+
+                Variable.derive(
+                    [
+                        bind(rightClick),
+                        bind(middleClick),
+                        bind(scrollUp),
+                        bind(scrollDown),
+                        bind(options.bar.scrollSpeed),
+                    ],
+                    () => {
+                        disconnectFunctions.forEach((disconnect) => disconnect());
+                        disconnectFunctions = [];
+
                         const throttledHandler = throttledScrollHandler(options.bar.scrollSpeed.get());
 
-                    const disconnectPrimary = onPrimaryClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onPrimaryClick(self, (clicked, event) => {
                                 openMenu(clicked, event, 'dashboardmenu');
-                    });
+                            }),
+                        );
 
-                    const disconnectSecondary = onSecondaryClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onSecondaryClick(self, (clicked, event) => {
                                 runAsyncCommand(rightClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectMiddle = onMiddleClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onMiddleClick(self, (clicked, event) => {
                                 runAsyncCommand(middleClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectScroll = onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get());
+                        disconnectFunctions.push(onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get()));
-
+                    },
-                    return (): void => {
+                );
-                        disconnectPrimary();
-                        disconnectSecondary();
-                        disconnectMiddle();
-                        disconnectScroll();
-                    };
-                });
             },
         },
     };

src/components/bar/modules/network/index.tsx

@@ -6,7 +6,6 @@ import { bind, Variable } from 'astal';
 import { onPrimaryClick, onSecondaryClick, onMiddleClick, onScroll } from 'src/lib/shared/eventHandlers';
 import { Astal, Gtk } from 'astal/gtk3';
 import AstalNetwork from 'gi://AstalNetwork?version=0.1';
-import { useHook } from 'src/lib/shared/hookHandler';
 import { BarBoxChild } from 'src/lib/types/bar.js';
 import { formatWifiInfo, wiredIcon, wirelessIcon } from './helpers';
 
@@ -90,29 +89,43 @@ const Network = (): BarBoxChild => {
         boxClass: 'network',
         props: {
             setup: (self: Astal.Button): void => {
-                useHook(self, options.bar.scrollSpeed, () => {
+                let disconnectFunctions: (() => void)[] = [];
+
+                Variable.derive(
+                    [
+                        bind(rightClick),
+                        bind(middleClick),
+                        bind(scrollUp),
+                        bind(scrollDown),
+                        bind(options.bar.scrollSpeed),
+                    ],
+                    () => {
+                        disconnectFunctions.forEach((disconnect) => disconnect());
+                        disconnectFunctions = [];
+
                         const throttledHandler = throttledScrollHandler(options.bar.scrollSpeed.get());
 
-                    const disconnectPrimary = onPrimaryClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onPrimaryClick(self, (clicked, event) => {
                                 openMenu(clicked, event, 'networkmenu');
-                    });
+                            }),
+                        );
 
-                    const disconnectSecondary = onSecondaryClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onSecondaryClick(self, (clicked, event) => {
                                 runAsyncCommand(rightClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectMiddle = onMiddleClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onMiddleClick(self, (clicked, event) => {
                                 runAsyncCommand(middleClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectScroll = onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get());
+                        disconnectFunctions.push(onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get()));
-                    return (): void => {
+                    },
-                        disconnectPrimary();
+                );
-                        disconnectSecondary();
-                        disconnectMiddle();
-                        disconnectScroll();
-                    };
-                });
             },
         },
     };

src/components/bar/modules/notifications/index.tsx

@@ -6,7 +6,6 @@ import { filterNotifications } from 'src/lib/shared/notifications.js';
 import { BarBoxChild } from 'src/lib/types/bar.js';
 import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers.js';
 import { bind, Variable } from 'astal';
-import { useHook } from 'src/lib/shared/hookHandler';
 import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers';
 
 const { show_total, rightClick, middleClick, scrollUp, scrollDown, hideCountWhenZero } = options.bar.notifications;
@@ -85,30 +84,43 @@ export const Notifications = (): BarBoxChild => {
         boxClass: 'notifications',
         props: {
             setup: (self: Astal.Button): void => {
-                useHook(self, options.bar.scrollSpeed, () => {
+                let disconnectFunctions: (() => void)[] = [];
+
+                Variable.derive(
+                    [
+                        bind(rightClick),
+                        bind(middleClick),
+                        bind(scrollUp),
+                        bind(scrollDown),
+                        bind(options.bar.scrollSpeed),
+                    ],
+                    () => {
+                        disconnectFunctions.forEach((disconnect) => disconnect());
+                        disconnectFunctions = [];
+
                         const throttledHandler = throttledScrollHandler(options.bar.scrollSpeed.get());
 
-                    const disconnectPrimary = onPrimaryClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onPrimaryClick(self, (clicked, event) => {
                                 openMenu(clicked, event, 'notificationsmenu');
-                    });
+                            }),
+                        );
 
-                    const disconnectSecondary = onSecondaryClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onSecondaryClick(self, (clicked, event) => {
                                 runAsyncCommand(rightClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectMiddle = onMiddleClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onMiddleClick(self, (clicked, event) => {
                                 runAsyncCommand(middleClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectScroll = onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get());
+                        disconnectFunctions.push(onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get()));
-
+                    },
-                    return (): void => {
+                );
-                        disconnectPrimary();
-                        disconnectSecondary();
-                        disconnectMiddle();
-                        disconnectScroll();
-                    };
-                });
             },
         },
     };

src/components/bar/modules/volume/index.tsx

@@ -4,7 +4,6 @@ import options from 'src/options';
 import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers.js';
 import Variable from 'astal/variable.js';
 import { bind } from 'astal/binding.js';
-import { useHook } from 'src/lib/shared/hookHandler.js';
 import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers.js';
 import { getIcon } from './helpers/index.js';
 import { BarBoxChild } from 'src/lib/types/bar.js';
@@ -77,30 +76,43 @@ const Volume = (): BarBoxChild => {
         boxClass: 'volume',
         props: {
             setup: (self: Astal.Button): void => {
-                useHook(self, options.bar.scrollSpeed, () => {
+                let disconnectFunctions: (() => void)[] = [];
+
+                Variable.derive(
+                    [
+                        bind(rightClick),
+                        bind(middleClick),
+                        bind(scrollUp),
+                        bind(scrollDown),
+                        bind(options.bar.scrollSpeed),
+                    ],
+                    () => {
+                        disconnectFunctions.forEach((disconnect) => disconnect());
+                        disconnectFunctions = [];
+
                         const throttledHandler = throttledScrollHandler(options.bar.scrollSpeed.get());
 
-                    const disconnectPrimary = onPrimaryClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onPrimaryClick(self, (clicked, event) => {
                                 openMenu(clicked, event, 'audiomenu');
-                    });
+                            }),
+                        );
 
-                    const disconnectSecondary = onSecondaryClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onSecondaryClick(self, (clicked, event) => {
                                 runAsyncCommand(rightClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectMiddle = onMiddleClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onMiddleClick(self, (clicked, event) => {
                                 runAsyncCommand(middleClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectScroll = onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get());
+                        disconnectFunctions.push(onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get()));
-
+                    },
-                    return (): void => {
+                );
-                        disconnectPrimary();
-                        disconnectSecondary();
-                        disconnectMiddle();
-                        disconnectScroll();
-                    };
-                });
             },
         },
     };

src/components/bar/modules/window_title/index.tsx

@@ -3,7 +3,6 @@ import { BarBoxChild } from 'src/lib/types/bar';
 import options from 'src/options';
 import { hyprlandService } from 'src/lib/constants/services';
 import AstalHyprland from 'gi://AstalHyprland?version=0.1';
-import { useHook } from 'src/lib/shared/hookHandler';
 import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers';
 import { bind, Variable } from 'astal';
 import { getTitle, getWindowMatch, truncateTitle } from './helpers/title';
@@ -81,30 +80,43 @@ const ClientTitle = (): BarBoxChild => {
         boxClass: 'windowtitle',
         props: {
             setup: (self: Astal.Button): void => {
-                useHook(self, options.bar.scrollSpeed, () => {
+                let disconnectFunctions: (() => void)[] = [];
+
+                Variable.derive(
+                    [
+                        bind(rightClick),
+                        bind(middleClick),
+                        bind(scrollUp),
+                        bind(scrollDown),
+                        bind(options.bar.scrollSpeed),
+                    ],
+                    () => {
+                        disconnectFunctions.forEach((disconnect) => disconnect());
+                        disconnectFunctions = [];
+
                         const throttledHandler = throttledScrollHandler(options.bar.scrollSpeed.get());
 
-                    const disconnectPrimary = onPrimaryClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onPrimaryClick(self, (clicked, event) => {
                                 runAsyncCommand(leftClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectSecondary = onSecondaryClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onSecondaryClick(self, (clicked, event) => {
                                 runAsyncCommand(rightClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectMiddle = onMiddleClick(self, (clicked, event) => {
+                        disconnectFunctions.push(
+                            onMiddleClick(self, (clicked, event) => {
                                 runAsyncCommand(middleClick.get(), { clicked, event });
-                    });
+                            }),
+                        );
 
-                    const disconnectScroll = onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get());
+                        disconnectFunctions.push(onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get()));
-
+                    },
-                    return (): void => {
+                );
-                        disconnectPrimary();
-                        disconnectSecondary();
-                        disconnectMiddle();
-                        disconnectScroll();
-                    };
-                });
             },
         },
     };

src/components/menus/audio/active/sliderItem/Slider.tsx

@@ -36,7 +36,8 @@ export const Slider = ({ device, type }: SliderProps): JSX.Element => {
                     self.connect('scroll-event', (_, event: Gdk.Event) => {
                         if (isScrollUp(event)) {
                             const newVolume = device.volume + 0.05;
-                            device.set_volume(Math.min(newVolume, 1));
+                            const minVolume = raiseMaximumVolume.get() ? 1.5 : 1;
+                            device.set_volume(Math.min(newVolume, minVolume));
                         }
 
                         if (isScrollDown(event)) {

src/components/menus/calendar/weather/temperature/index.tsx

@@ -5,36 +5,8 @@ import { Gtk } from 'astal/gtk3';
 import { bind, Variable } from 'astal';
 const { unit } = options.menus.clock.weather;
 
-export const TodayTemperature = (): JSX.Element => {
+const WeatherStatus = (): JSX.Element => {
-    const labelBinding = Variable.derive([bind(globalWeatherVar), bind(unit)], getTemperature);
     return (
-        <box
-            halign={Gtk.Align.CENTER}
-            valign={Gtk.Align.CENTER}
-            vertical
-            onDestroy={() => {
-                labelBinding.drop();
-            }}
-        >
-            <box
-                className={'calendar-menu-weather today temp container'}
-                valign={Gtk.Align.CENTER}
-                vertical={false}
-                hexpand
-            >
-                <box halign={Gtk.Align.CENTER} hexpand>
-                    <label className={'calendar-menu-weather today temp label'} label={labelBinding()} />
-                    <label
-                        className={bind(globalWeatherVar).as(
-                            (weather) =>
-                                `calendar-menu-weather today temp label icon txt-icon ${getWeatherIcon(Math.ceil(weather.current.temp_f)).color}`,
-                        )}
-                        label={bind(globalWeatherVar).as(
-                            (weather) => getWeatherIcon(Math.ceil(weather.current.temp_f)).icon,
-                        )}
-                    />
-                </box>
-            </box>
         <box halign={Gtk.Align.CENTER}>
             <label
                 className={bind(globalWeatherVar).as(
@@ -42,8 +14,55 @@ export const TodayTemperature = (): JSX.Element => {
                         `calendar-menu-weather today condition label ${getWeatherIcon(Math.ceil(weather.current.temp_f)).color}`,
                 )}
                 label={bind(globalWeatherVar).as((weather) => weather.current.condition.text)}
+                truncate
+                tooltipText={bind(globalWeatherVar).as((weather) => weather.current.condition.text)}
             />
         </box>
+    );
+};
+
+const Temperature = (): JSX.Element => {
+    const labelBinding = Variable.derive([bind(globalWeatherVar), bind(unit)], getTemperature);
+
+    const TemperatureLabel = (): JSX.Element => {
+        return <label className={'calendar-menu-weather today temp label'} label={labelBinding()} />;
+    };
+
+    const ThermometerIcon = (): JSX.Element => {
+        return (
+            <label
+                className={bind(globalWeatherVar).as(
+                    (weather) =>
+                        `calendar-menu-weather today temp label icon txt-icon ${getWeatherIcon(Math.ceil(weather.current.temp_f)).color}`,
+                )}
+                label={bind(globalWeatherVar).as((weather) => getWeatherIcon(Math.ceil(weather.current.temp_f)).icon)}
+            />
+        );
+    };
+
+    return (
+        <box
+            className={'calendar-menu-weather today temp container'}
+            valign={Gtk.Align.CENTER}
+            vertical={false}
+            onDestroy={() => {
+                labelBinding.drop();
+            }}
+            hexpand
+        >
+            <box halign={Gtk.Align.CENTER} hexpand>
+                <TemperatureLabel />
+                <ThermometerIcon />
+            </box>
+        </box>
+    );
+};
+
+export const TodayTemperature = (): JSX.Element => {
+    return (
+        <box halign={Gtk.Align.CENTER} valign={Gtk.Align.CENTER} vertical>
+            <Temperature />
+            <WeatherStatus />
         </box>
     );
 };

src/components/settings/pages/config/bar/index.tsx

@@ -474,6 +474,8 @@ export const BarSettings = (): JSX.Element => {
                 />
                 <Option opt={options.bar.media.rightClick} title="Right Click" type="string" />
                 <Option opt={options.bar.media.middleClick} title="Middle Click" type="string" />
+                <Option opt={options.bar.media.scrollUp} title="Scroll Up" type="string" />
+                <Option opt={options.bar.media.scrollDown} title="Scroll Down" type="string" />
 
                 {/* Notifications Section */}
                 <Header title="Notifications" />

src/lib/icons/icons2.ts

@@ -192,6 +192,7 @@ export default {
         moderate_or_heavy_showers_of_ice_pellets: 'weather-showers-symbolic',
         patchy_light_rain_with_thunder: 'weather-showers-scattered-symbolic',
         moderate_or_heavy_rain_with_thunder: 'weather-showers-symbolic',
+        moderate_or_heavy_rain_in_area_with_thunder: 'weather-showers-symbolic',
         patchy_light_snow_with_thunder: 'weather-snow-symbolic',
         moderate_or_heavy_snow_with_thunder: 'weather-snow-symbolic',
     },

src/lib/icons/weather.ts

@@ -49,6 +49,7 @@ export const weatherIcons = {
     moderate_or_heavy_showers_of_ice_pellets: '󰖒',
     patchy_light_rain_with_thunder: '󰙾',
     moderate_or_heavy_rain_with_thunder: '󰙾',
+    moderate_or_heavy_rain_in_area_with_thunder: '󰙾',
     patchy_light_snow_with_thunder: '󰼶',
     moderate_or_heavy_snow_with_thunder: '󰼶',
 } as const;

src/options.ts

@@ -961,8 +961,8 @@ const options = mkOptions(CONFIG, {
             label: opt(true),
             rightClick: opt(''),
             middleClick: opt(''),
-            scrollUp: opt('pactl set-sink-volume @DEFAULT_SINK@ +5%'),
+            scrollUp: opt('hyprpanel vol +5'),
-            scrollDown: opt('pactl set-sink-volume @DEFAULT_SINK@ -5%'),
+            scrollDown: opt('hyprpanel vol -5'),
         },
         network: {
             truncation: opt(true),
@@ -1011,6 +1011,8 @@ const options = mkOptions(CONFIG, {
             show_active_only: opt(false),
             rightClick: opt(''),
             middleClick: opt(''),
+            scrollUp: opt(''),
+            scrollDown: opt(''),
         },
         notifications: {
             show_total: opt(false),