From c57d512cedcbdd6c0301bc36624d1471c2b2e7af Mon Sep 17 00:00:00 2001
From: davfsa <davfsa@gmail.com>
Date: Tue, 25 Mar 2025 02:32:29 +0100
Subject: [PATCH 01/11] Fix notifications border rounding (#856)

Signed-off-by: davfsa <davfsa@gmail.com>
---
 src/scss/style/menus/notifications.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/scss/style/menus/notifications.scss b/src/scss/style/menus/notifications.scss
index 61ba575..185d6bb 100644
--- a/src/scss/style/menus/notifications.scss
+++ b/src/scss/style/menus/notifications.scss
@@ -36,9 +36,7 @@
         min-height: 0em;
         font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01;
         border: 0.15em solid $notification-border;
-        border-radius: 0em;
-        border-bottom-left-radius: $notification-border_radius;
-        border-top-left-radius: $notification-border_radius;
+        border-radius: $notification-border_radius;
         margin: 0em;
     }
 

From dba7ac64c6c3ff81adfafac45bf0200a4dc89d97 Mon Sep 17 00:00:00 2001
From: Siddharth Jain <83913594+siddharthjain25@users.noreply.github.com>
Date: Tue, 25 Mar 2025 09:22:17 +0530
Subject: [PATCH 02/11] Feat: Added a configuration option to define the save
 location of recordings.

* Add file picker for saving screen recordings

Implemented a file picker using Zenity to allow users to choose the save location for their screen recordings after stopping.

Replaced the hardcoded save path with dynamic user input.

Improved the notification system to inform users when recordings are saved or discarded.

* Refactored RecordingButton to fetch the latest recording path dynamically.

Removed static path references, ensuring the updated path from Hyprpanel config is always used.

* Update screen_record.sh

Added comment why use "sleep 1" at line 80

* Update module.nix

Updated nix module.

* Expand ~ in output directory, set default path, and add validation

- Properly expand `~` to `$HOME` in the output directory path.
- Set default recording directory to `$HOME/Videos` if none is provided.
- Validate that the output directory exists before starting a recording.

* Update scripts/screen_record.sh

Co-authored-by: Chase Taylor <11805686+dotaxis@users.noreply.github.com>

* Update scripts/screen_record.sh

Co-authored-by: Chase Taylor <11805686+dotaxis@users.noreply.github.com>

* Code Quality Check.

* Update RecordingButton.tsx

Removed debug logs as well.

* Update src/components/menus/dashboard/shortcuts/buttons/RecordingButton.tsx

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

* updated RecordingButton.tsx && helper.tsx

Fixed the issues pointed by @Jas-SinghFSU

* Update RecordingButton.tsx

Fixed few linter errors.

---------

Co-authored-by: Chase Taylor <11805686+dotaxis@users.noreply.github.com>
Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>
---
 nix/module.nix                                |   1 +
 package-lock.json                             |   7 +-
 scripts/screen_record.sh                      | 141 ++++++++++++------
 .../shortcuts/buttons/RecordingButton.tsx     |  60 ++++----
 .../menus/dashboard/shortcuts/helpers.ts      |  38 +++--
 .../settings/pages/config/menus/dashboard.tsx |   3 +
 src/options.ts                                |   3 +
 7 files changed, 163 insertions(+), 90 deletions(-)

diff --git a/nix/module.nix b/nix/module.nix
index 4c54c46..478889a 100644
--- a/nix/module.nix
+++ b/nix/module.nix
@@ -394,6 +394,7 @@ in
       menus.dashboard.powermenu.reboot = mkStrOption "systemctl reboot";
       menus.dashboard.powermenu.shutdown = mkStrOption "systemctl poweroff";
       menus.dashboard.powermenu.sleep = mkStrOption "systemctl suspend";
+      menus.dashboard.recording.path = mkStrOption "$HOME/Videos/Screencasts"
       menus.dashboard.shortcuts.enabled = mkBoolOption true;
       menus.dashboard.shortcuts.left.shortcut1.command = mkStrOption "microsoft-edge-stable";
       menus.dashboard.shortcuts.left.shortcut1.icon = mkStrOption "󰇩";
diff --git a/package-lock.json b/package-lock.json
index fc70eb6..7d53acc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,8 +24,13 @@
                 "typescript": "^5.6.2"
             }
         },
+        "../../../../../usr/share/astal/gjs": {
+            "name": "astal",
+            "license": "LGPL-2.1"
+        },
         "../../../../usr/share/astal/gjs": {
             "name": "astal",
+            "extraneous": true,
             "license": "LGPL-2.1"
         },
         "node_modules/@eslint-community/eslint-utils": {
@@ -601,7 +606,7 @@
             }
         },
         "node_modules/astal": {
-            "resolved": "../../../../usr/share/astal/gjs",
+            "resolved": "../../../../../usr/share/astal/gjs",
             "link": true
         },
         "node_modules/available-typed-arrays": {
diff --git a/scripts/screen_record.sh b/scripts/screen_record.sh
index f203689..3854db9 100755
--- a/scripts/screen_record.sh
+++ b/scripts/screen_record.sh
@@ -1,18 +1,18 @@
 #!/usr/bin/env bash
 # Requires wf-recorder: https://github.com/ammen99/wf-recorder
 
-outputDir="$HOME/Videos/Screencasts"
+# Get the default audio sink
 defaultSink=$(pactl get-default-sink)
 WF_RECORDER_OPTS="--audio=$defaultSink.monitor -c libx264rgb"
+outputFile=""
+outputDir=""
 
+# Function to check if recording is active
 checkRecording() {
-    if pgrep -f "wf-recorder" >/dev/null; then
-        return 0
-    else
-        return 1
-    fi
+    pgrep -f "wf-recorder" >/dev/null
 }
 
+# Function to start screen recording
 startRecording() {
     if checkRecording; then
         echo "A recording is already in progress."
@@ -21,66 +21,113 @@ startRecording() {
 
     target="$2"
 
-    outputFile="recording_$(date +%Y-%m-%d_%H-%M-%S)"
-    outputPath="$outputDir/${outputFile}.mp4"
-    mkdir -p "$outputDir"
-
     if [ "$target" == "screen" ]; then
-        monitor_info=$(hyprctl -j monitors | jq -r ".[] | select(.name == \"$3\")")
-        w=$(echo $monitor_info | jq -r '.width')
-        h=$(echo $monitor_info | jq -r '.height')
-        scale=$(echo $monitor_info | jq -r '.scale')
-        scaled_width=$(awk "BEGIN {print $w / $scale}")
-        scaled_height=$(awk "BEGIN {print $h / $scale}")
-        x=$(echo $monitor_info | jq -r '.x')
-        y=$(echo $monitor_info | jq -r '.y')
+        monitor_name="$3"
+        outputDir="$4"
+    elif [ "$target" == "region" ]; then
+        outputDir="$3"
+    else
+        echo "Usage: $0 start {screen <monitor_name> | region} <output_directory>"
+        exit 1
+    fi
+
+    # Set a default output directory if not provided
+    outputDir="${outputDir:-$HOME/Videos}"
+
+    # Expand ~ to $HOME if present in outputDir
+    outputDir="${outputDir/#\~/$HOME}"
+
+    # Ensure output directory exists
+    if [ ! -d "$outputDir" ]; then
+        echo "Error: Output directory '$outputDir' does not exist."
+        exit 1
+    fi
+
+    # Generate output filename and path
+    outputFile="recording_$(date +%Y-%m-%d_%H-%M-%S).mp4"
+    outputPath="$outputDir/$outputFile"
+
+    echo "Target: $target"
+    echo "Monitor: ${monitor_name:-N/A}"
+    echo "Output dir: $outputDir"
+    echo "Output file: $outputPath"
+
+    # Start screen recording
+    if [ "$target" == "screen" ]; then
+        if [ -z "$monitor_name" ]; then
+            echo "Error: Monitor name is required for screen recording."
+            exit 1
+        fi
+
+        monitor_info=$(hyprctl -j monitors | jq -r ".[] | select(.name == \"$monitor_name\")")
+        if [ -z "$monitor_info" ]; then
+            echo "Error: Monitor '$monitor_name' not found."
+            exit 1
+        fi
+
+        w=$(echo "$monitor_info" | jq -r '.width')
+        h=$(echo "$monitor_info" | jq -r '.height')
+        scale=$(echo "$monitor_info" | jq -r '.scale')
+        scaled_width=$(awk "BEGIN { print $w / $scale }")
+        scaled_height=$(awk "BEGIN { print $h / $scale }")
+        x=$(echo "$monitor_info" | jq -r '.x')
+        y=$(echo "$monitor_info" | jq -r '.y')
+
         wf-recorder $WF_RECORDER_OPTS --geometry "${x},${y} ${scaled_width}x${scaled_height}" --file "$outputPath" &
     elif [ "$target" == "region" ]; then
         wf-recorder $WF_RECORDER_OPTS --geometry "$(slurp)" --file "$outputPath" &
-    else
-        echo "Usage: $0 start {region|screen [screen_name]}"
-        exit 1
     fi
-    disown "$(jobs -p | tail -n 1)"
 
-    echo "Recording started. Output will be saved to $outputPath"
+    disown "$(jobs -p | tail -n 1)"
+    echo "Recording started. Saving to $outputPath"
+    echo "$outputPath" > /tmp/last_recording_path
 }
 
+# Function to stop screen recording
 stopRecording() {
     if ! checkRecording; then
-        echo "No recording is in progress."
+        echo "No recording in progress."
         exit 1
     fi
 
     pkill -SIGINT -f wf-recorder
+    sleep 1  # Allow wf-recorder time to terminate before proceeding
 
-    recentFile=$(ls -t "$outputDir"/recording_*.mp4 | head -n 1)
+    outputPath=$(cat /tmp/last_recording_path 2>/dev/null)
 
-    notify-send "Recording stopped" "Your recording has been saved." \
+    if [ -z "$outputPath" ] || [ ! -f "$outputPath" ]; then
+        notify-send "Recording stopped" "No recent recording found." \
+            -i video-x-generic \
+            -a "Screen Recorder" \
+            -t 10000
+        exit 1
+    fi
+
+    notify-send "Recording stopped" "Saved to: $outputPath" \
         -i video-x-generic \
         -a "Screen Recorder" \
         -t 10000 \
-        -u normal \
-        --action="scriptAction:-xdg-open $outputDir=Directory" \
-        --action="scriptAction:-xdg-open $recentFile=Play"
+        --action="scriptAction:-xdg-open $(dirname "$outputPath")=Open Directory" \
+        --action="scriptAction:-xdg-open $outputPath=Play"
 }
 
+# Handle script arguments
 case "$1" in
-start)
-    startRecording "$@"
-    ;;
-stop)
-    stopRecording
-    ;;
-status)
-    if checkRecording; then
-        echo "recording"
-    else
-        echo "not recording"
-    fi
-    ;;
-*)
-    echo "Usage: $0 {start [screen screen_name|region]|stop|status}"
-    exit 1
-    ;;
-esac
+    start)
+        startRecording "$@"
+        ;;
+    stop)
+        stopRecording
+        ;;
+    status)
+        if checkRecording; then
+            echo "recording"
+        else
+            echo "not recording"
+        fi
+        ;;
+    *)
+        echo "Usage: $0 {start [screen <monitor_name> | region] <output_directory> | stop | status}"
+        exit 1
+        ;;
+esac
\ No newline at end of file
diff --git a/src/components/menus/dashboard/shortcuts/buttons/RecordingButton.tsx b/src/components/menus/dashboard/shortcuts/buttons/RecordingButton.tsx
index 1f054dd..b48cc38 100644
--- a/src/components/menus/dashboard/shortcuts/buttons/RecordingButton.tsx
+++ b/src/components/menus/dashboard/shortcuts/buttons/RecordingButton.tsx
@@ -1,8 +1,8 @@
-import { bind, execAsync, Variable } from 'astal';
+import { bind, Variable } from 'astal';
 import { App, Gdk, Gtk } from 'astal/gtk3';
 import Menu from 'src/components/shared/Menu';
 import MenuItem from 'src/components/shared/MenuItem';
-import { isRecording } from '../helpers';
+import { isRecording, getRecordingPath, executeCommand } from '../helpers';
 import AstalHyprland from 'gi://AstalHyprland?version=0.1';
 
 const hyprlandService = AstalHyprland.get_default();
@@ -10,44 +10,41 @@ const hyprlandService = AstalHyprland.get_default();
 const MonitorListDropdown = (): JSX.Element => {
     const monitorList: Variable<AstalHyprland.Monitor[]> = Variable([]);
 
-    const monitorBinding = Variable.derive([bind(hyprlandService, 'monitors')], () =>
-        monitorList.set(hyprlandService.get_monitors()),
-    );
+    const monitorBinding = Variable.derive([bind(hyprlandService, 'monitors')], () => {
+        monitorList.set(hyprlandService.get_monitors());
+    });
 
     return (
         <Menu className={'dropdown recording'} halign={Gtk.Align.FILL} onDestroy={() => monitorBinding.drop()} hexpand>
-            {bind(monitorList).as((monitors) => {
-                return monitors.map((monitor) => (
-                    <MenuItem
-                        label={`Display ${monitor.name}`}
-                        onButtonPressEvent={(_, event) => {
-                            const buttonClicked = event.get_button()[1];
+            {bind(monitorList).as((monitors) =>
+                monitors.map((monitor) => {
+                    const sanitizedPath = getRecordingPath().replace(/"/g, '\\"');
 
-                            if (buttonClicked !== Gdk.BUTTON_PRIMARY) {
-                                return;
-                            }
+                    return (
+                        <MenuItem
+                            label={`Display ${monitor.name}`}
+                            onButtonPressEvent={(_, event) => {
+                                if (event.get_button()[1] !== Gdk.BUTTON_PRIMARY) return;
 
-                            App.get_window('dashboardmenu')?.set_visible(false);
+                                App.get_window('dashboardmenu')?.set_visible(false);
 
-                            execAsync(`${SRC_DIR}/scripts/screen_record.sh start screen ${monitor.name}`).catch((err) =>
-                                console.error(err),
-                            );
-                        }}
-                    />
-                ));
-            })}
+                                const command = `${SRC_DIR}/scripts/screen_record.sh start screen "${monitor.name}" "${sanitizedPath}"`;
+                                executeCommand(command);
+                            }}
+                        />
+                    );
+                }),
+            )}
             <MenuItem
                 label="Region"
                 onButtonPressEvent={(_, event) => {
-                    const buttonClicked = event.get_button()[1];
-
-                    if (buttonClicked !== Gdk.BUTTON_PRIMARY) {
-                        return;
-                    }
+                    if (event.get_button()[1] !== Gdk.BUTTON_PRIMARY) return;
 
                     App.get_window('dashboardmenu')?.set_visible(false);
 
-                    execAsync(`${SRC_DIR}/scripts/screen_record.sh start region`).catch((err) => console.error(err));
+                    const sanitizedPath = getRecordingPath().replace(/"/g, '\\"');
+                    const command = `${SRC_DIR}/scripts/screen_record.sh start region "${sanitizedPath}"`;
+                    executeCommand(command);
                 }}
             />
         </Menu>
@@ -58,7 +55,7 @@ export const RecordingButton = (): JSX.Element => {
     return (
         <button
             className={`dashboard-button record ${isRecording.get() ? 'active' : ''}`}
-            tooltipText={'Record Screen'}
+            tooltipText="Record Screen"
             vexpand
             onButtonPressEvent={(_, event) => {
                 const buttonClicked = event.get_button()[1];
@@ -67,9 +64,12 @@ export const RecordingButton = (): JSX.Element => {
                     return;
                 }
 
+                const sanitizedPath = getRecordingPath().replace(/"/g, '\\"');
+
                 if (isRecording.get() === true) {
                     App.get_window('dashboardmenu')?.set_visible(false);
-                    return execAsync(`${SRC_DIR}/scripts/screen_record.sh stop`).catch((err) => console.error(err));
+                    const command = `${SRC_DIR}/scripts/screen_record.sh stop "${sanitizedPath}"`;
+                    executeCommand(command);
                 } else {
                     const monitorDropdownList = MonitorListDropdown() as Gtk.Menu;
                     monitorDropdownList.popup_at_pointer(event);
diff --git a/src/components/menus/dashboard/shortcuts/helpers.ts b/src/components/menus/dashboard/shortcuts/helpers.ts
index 01e8e65..d26f713 100644
--- a/src/components/menus/dashboard/shortcuts/helpers.ts
+++ b/src/components/menus/dashboard/shortcuts/helpers.ts
@@ -6,6 +6,27 @@ import options from 'src/options';
 
 const { left } = options.menus.dashboard.shortcuts;
 
+/**
+ * Retrieves the latest recording path from options.
+ *
+ * @returns The configured recording path.
+ */
+export const getRecordingPath = (): string => options.menus.dashboard.recording.path.get();
+
+/**
+ * Executes a shell command asynchronously with proper error handling.
+ *
+ * @param command The command to execute.
+ */
+export const executeCommand = async (command: string): Promise<void> => {
+    try {
+        await execAsync(`/bin/bash -c '${command}'`);
+    } catch (err) {
+        console.error('Command failed:', command);
+        console.error('Error:', err);
+    }
+};
+
 /**
  * Handles the recorder status based on the command output.
  *
@@ -16,10 +37,7 @@ const { left } = options.menus.dashboard.shortcuts;
  * @returns True if the command output is 'recording', false otherwise.
  */
 export const handleRecorder = (commandOutput: string): boolean => {
-    if (commandOutput === 'recording') {
-        return true;
-    }
-    return false;
+    return commandOutput === 'recording';
 };
 
 /**
@@ -35,9 +53,7 @@ export const handleClick = (action: string, tOut: number = 0): void => {
 
     timeout(tOut, () => {
         execAsync(`bash -c "${action}"`)
-            .then((res) => {
-                return res;
-            })
+            .then((res) => res)
             .catch((err) => console.error(err));
     });
 };
@@ -45,10 +61,7 @@ export const handleClick = (action: string, tOut: number = 0): void => {
 /**
  * Checks if a shortcut has a command.
  *
- * This function determines if the provided shortcut has a command defined.
- *
  * @param shortCut The shortcut to check.
- *
  * @returns True if the shortcut has a command, false otherwise.
  */
 export const hasCommand = (shortCut: ShortcutVariable): boolean => {
@@ -58,7 +71,7 @@ export const hasCommand = (shortCut: ShortcutVariable): boolean => {
 /**
  * A variable indicating whether the left card is hidden.
  *
- * This variable is set to true if none of the left shortcuts have commands defined.
+ * This is set to true if none of the left shortcuts have commands.
  */
 export const leftCardHidden = Variable(
     !(
@@ -82,7 +95,8 @@ export const isRecording = Variable(false);
 /**
  * A poller for checking the recording status.
  *
- * This poller periodically checks the recording status by executing a bash command and updates the `isRecording` variable.
+ * This poller periodically checks the recording status by executing a bash command
+ * and updates the `isRecording` variable accordingly.
  */
 export const recordingPoller = new BashPoller<boolean, []>(
     isRecording,
diff --git a/src/components/settings/pages/config/menus/dashboard.tsx b/src/components/settings/pages/config/menus/dashboard.tsx
index 65797ec..39ef364 100644
--- a/src/components/settings/pages/config/menus/dashboard.tsx
+++ b/src/components/settings/pages/config/menus/dashboard.tsx
@@ -48,6 +48,9 @@ export const DashboardMenuSettings = (): JSX.Element => {
                 <Option opt={options.menus.dashboard.powermenu.logout} title="Logout Command" type="string" />
                 <Option opt={options.menus.dashboard.powermenu.sleep} title="Sleep Command" type="string" />
 
+                <Header title="Recording" />
+                <Option opt={options.menus.dashboard.recording.path} title="Recording Path" type="string" />
+
                 <Header title="Controls" />
                 <Option opt={options.menus.dashboard.controls.enabled} title="Enabled" type="boolean" />
 
diff --git a/src/options.ts b/src/options.ts
index 4dbe258..0112ec1 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -1280,6 +1280,9 @@ const options = mkOptions({
                 interval: opt(2000),
                 enable_gpu: opt(false),
             },
+            recording: {
+                path: opt('$HOME/Videos/Screencasts'),
+            },
             controls: {
                 enabled: opt(true),
             },

From 80686634663970aa441bddaf2c82c6901700cc07 Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Mon, 24 Mar 2025 22:25:15 -0700
Subject: [PATCH 03/11] Fix: Allow vertical monitors to be recorded properly
 instead of erroring. (#861)

---
 scripts/screen_record.sh   | 64 ++++++++++++++++++++++++--------------
 src/lib/types/options.d.ts |  3 +-
 2 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/scripts/screen_record.sh b/scripts/screen_record.sh
index 3854db9..af09575 100755
--- a/scripts/screen_record.sh
+++ b/scripts/screen_record.sh
@@ -68,19 +68,37 @@ startRecording() {
         w=$(echo "$monitor_info" | jq -r '.width')
         h=$(echo "$monitor_info" | jq -r '.height')
         scale=$(echo "$monitor_info" | jq -r '.scale')
-        scaled_width=$(awk "BEGIN { print $w / $scale }")
-        scaled_height=$(awk "BEGIN { print $h / $scale }")
         x=$(echo "$monitor_info" | jq -r '.x')
         y=$(echo "$monitor_info" | jq -r '.y')
 
-        wf-recorder $WF_RECORDER_OPTS --geometry "${x},${y} ${scaled_width}x${scaled_height}" --file "$outputPath" &
+        transform=$(echo "$monitor_info" | jq -r '.transform')
+        rotation_filter=""
+
+        if [ "$transform" -eq 1 ] || [ "$transform" -eq 3 ]; then
+            scaled_width=$(awk "BEGIN { print $h / $scale }")
+            scaled_height=$(awk "BEGIN { print $w / $scale }")
+        else
+            scaled_width=$(awk "BEGIN { print $w / $scale }")
+            scaled_height=$(awk "BEGIN { print $h / $scale }")
+        fi
+
+        case "$transform" in
+        1)
+            rotation_filter="-F transpose=1"
+            ;;
+        3)
+            rotation_filter="-F transpose=2"
+            ;;
+        esac
+
+        wf-recorder $WF_RECORDER_OPTS $rotation_filter --geometry "${x},${y} ${scaled_width}x${scaled_height}" --file "$outputPath" &
     elif [ "$target" == "region" ]; then
         wf-recorder $WF_RECORDER_OPTS --geometry "$(slurp)" --file "$outputPath" &
     fi
 
     disown "$(jobs -p | tail -n 1)"
     echo "Recording started. Saving to $outputPath"
-    echo "$outputPath" > /tmp/last_recording_path
+    echo "$outputPath" >/tmp/last_recording_path
 }
 
 # Function to stop screen recording
@@ -91,7 +109,7 @@ stopRecording() {
     fi
 
     pkill -SIGINT -f wf-recorder
-    sleep 1  # Allow wf-recorder time to terminate before proceeding
+    sleep 1 # Allow wf-recorder time to terminate before proceeding
 
     outputPath=$(cat /tmp/last_recording_path 2>/dev/null)
 
@@ -113,21 +131,21 @@ stopRecording() {
 
 # Handle script arguments
 case "$1" in
-    start)
-        startRecording "$@"
-        ;;
-    stop)
-        stopRecording
-        ;;
-    status)
-        if checkRecording; then
-            echo "recording"
-        else
-            echo "not recording"
-        fi
-        ;;
-    *)
-        echo "Usage: $0 {start [screen <monitor_name> | region] <output_directory> | stop | status}"
-        exit 1
-        ;;
-esac
\ No newline at end of file
+start)
+    startRecording "$@"
+    ;;
+stop)
+    stopRecording
+    ;;
+status)
+    if checkRecording; then
+        echo "recording"
+    else
+        echo "not recording"
+    fi
+    ;;
+*)
+    echo "Usage: $0 {start [screen <monitor_name> | region] <output_directory> | stop | status}"
+    exit 1
+    ;;
+esac
diff --git a/src/lib/types/options.d.ts b/src/lib/types/options.d.ts
index f54f45d..fec1677 100644
--- a/src/lib/types/options.d.ts
+++ b/src/lib/types/options.d.ts
@@ -3,6 +3,7 @@ import { Variable } from 'types/variable';
 import { defaultColorMap } from './defaults/options';
 import { Astal } from 'astal/gtk3';
 import { dropdownMenuList } from '../constants/options';
+import { FontStyle } from 'src/components/settings/shared/inputs/font/utils';
 
 export type MkOptionsResult = {
     array: () => Opt[];
@@ -104,7 +105,7 @@ export interface RowProps<T> {
     subtitleLink?: string;
     dependencies?: string[];
     increment?: number;
-    fontStyle?: Opt<string>;
+    fontStyle?: Opt<FontStyle>;
     fontLabel?: Opt<string>;
 }
 

From c3d1681e01af335d420440c30aba300e85cf6cca Mon Sep 17 00:00:00 2001
From: Luke Wriglesworth <lwrigle@gmail.com>
Date: Tue, 25 Mar 2025 01:27:15 -0400
Subject: [PATCH 04/11] fix: missing semicolon that breaks nix build (#862)

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>
---
 nix/module.nix | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nix/module.nix b/nix/module.nix
index 478889a..2b1821f 100644
--- a/nix/module.nix
+++ b/nix/module.nix
@@ -394,7 +394,7 @@ in
       menus.dashboard.powermenu.reboot = mkStrOption "systemctl reboot";
       menus.dashboard.powermenu.shutdown = mkStrOption "systemctl poweroff";
       menus.dashboard.powermenu.sleep = mkStrOption "systemctl suspend";
-      menus.dashboard.recording.path = mkStrOption "$HOME/Videos/Screencasts"
+      menus.dashboard.recording.path = mkStrOption "$HOME/Videos/Screencasts";
       menus.dashboard.shortcuts.enabled = mkBoolOption true;
       menus.dashboard.shortcuts.left.shortcut1.command = mkStrOption "microsoft-edge-stable";
       menus.dashboard.shortcuts.left.shortcut1.icon = mkStrOption "󰇩";

From 7b5c339e9363187e249fa2f6eadbb295b0e8c6ff Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Mon, 24 Mar 2025 22:46:58 -0700
Subject: [PATCH 05/11] Fix: styling side-effects are no longer visible on
 monitors with no bars. (#864)

---
 src/components/bar/index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/bar/index.tsx b/src/components/bar/index.tsx
index 115fd43..eb9aea5 100644
--- a/src/components/bar/index.tsx
+++ b/src/components/bar/index.tsx
@@ -79,6 +79,11 @@ export const Bar = (() => {
             return !isLayoutEmpty(foundLayout);
         });
 
+        const computeClassName = bind(layouts).as(() => {
+            const foundLayout = getLayoutForMonitor(hyprlandMonitor, layouts.get());
+            return !isLayoutEmpty(foundLayout) ? `bar` : '';
+        });
+
         const computeAnchor = bind(location).as((loc) => {
             if (loc === 'bottom') {
                 return Astal.WindowAnchor.BOTTOM | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT;
@@ -132,7 +137,7 @@ export const Bar = (() => {
                 inhibit={bind(idleInhibit)}
                 name={`bar-${hyprlandMonitor}`}
                 namespace={`bar-${hyprlandMonitor}`}
-                className={'bar'}
+                className={computeClassName}
                 application={App}
                 monitor={monitor}
                 visible={computeVisibility}

From c147f154a40c9007b3cf1734bd0d727a9e2f5706 Mon Sep 17 00:00:00 2001
From: Mara <github@mara.cafe>
Date: Fri, 28 Mar 2025 07:19:55 +0100
Subject: [PATCH 06/11] Feat: Add optional extended tooltip for updates module
 (#866)

* added optional extended tooltip for updates module

* Apply suggestions from code review

Linter fixes

* Update scripts/checkUpdates.sh

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

* Update scripts/checkUpdates.sh

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

---------

Co-authored-by: Mara <mara.dawn69@gmail.com>
Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>
---
 scripts/checkUpdates.sh                      | 109 +++++++++++++------
 src/components/bar/modules/updates/index.tsx |  23 +++-
 src/components/bar/settings/config.tsx       |  11 ++
 src/options.ts                               |   2 +
 4 files changed, 111 insertions(+), 34 deletions(-)

diff --git a/scripts/checkUpdates.sh b/scripts/checkUpdates.sh
index ab36d3c..cff43db 100755
--- a/scripts/checkUpdates.sh
+++ b/scripts/checkUpdates.sh
@@ -1,49 +1,94 @@
 #!/bin/bash
 
-check_arch_updates() {
-    official_updates=0
-    aur_updates=0
-	if command -v paru &> /dev/null; then
-		aur_helper="paru"
-	else
-		aur_helper="yay"
-	fi
+has_param() {
+    local term="$1"
+    shift
+    for arg; do
+        if [[ $arg == "$term" ]]; then
+            return 0
+        fi
+    done
+    return 1
+}
 
-    if [ "$1" = "-y" ]; then
-        aur_updates=$($aur_helper -Qum 2>/dev/null | wc -l)
-    elif [ "$1" = "-p" ]; then
-        official_updates=$(checkupdates 2>/dev/null | wc -l)
+wait_for_process_to_finish() {
+    local process_name="$1"
+    while pgrep -a "$process_name" >/dev/null; do 
+        sleep 0.1
+    done
+}
+
+check_arch_updates() {
+    if command -v paru &> /dev/null; then
+        aur_helper="paru"
     else
-        official_updates=$(checkupdates 2>/dev/null | wc -l)
-        aur_updates=$($aur_helper -Qum 2>/dev/null | wc -l)
+        aur_helper="yay"
+    fi
+
+    if has_param "-tooltip" "$@"; then
+        command=" | head -n 50"
+        official_updates=""
+        aur_updates=""
+        wait_for_process_to_finish "checkupdates"
+    else
+        command="2>/dev/null | wc -l"
+        official_updates=0
+        aur_updates=0
+    fi
+
+    aur_command="$aur_helper -Qum $command"
+    official_command="checkupdates $command"
+
+    if has_param "-y" "$@"; then
+        aur_updates=$(eval "$aur_command")
+    elif has_param "-p" "$@"; then
+        official_updates=$(eval "$official_command")
+    else
+        aur_updates=$(eval "$aur_command")
+        official_updates=$(eval "$official_command")
+    fi
+
+    if has_param "-tooltip" "$@"; then
+        if [ "$official_updates" ];then
+            echo "pacman:"
+            echo "$official_updates"
+        fi
+        if [ "$official_updates" ] && [ "$aur_updates" ];then
+            echo ""
+        fi
+        if [ "$aur_updates" ];then
+            echo "AUR:"
+            echo "$aur_updates"
+        fi
+    else
+        total_updates=$((official_updates + aur_updates))
+        echo $total_updates
     fi
 
-    total_updates=$((official_updates + aur_updates))
 
-    echo $total_updates
 }
 
 check_ubuntu_updates() {
-  result=$(apt-get -s -o Debug::NoLocking=true upgrade | grep -c ^Inst)
-  echo "$result"
+    result=$(apt-get -s -o Debug::NoLocking=true upgrade | grep -c ^Inst)
+    echo "$result"
 }
 
 check_fedora_updates() {
-  result=$(dnf check-update -q | grep -v '^Loaded plugins' | grep -v '^No match for' | wc -l)
-  echo "$result"
+    result=$(dnf check-update -q | grep -v '^Loaded plugins' | grep -v '^No match for' | wc -l)
+    echo "$result"
 }
 
 case "$1" in
--arch)
-    check_arch_updates "$2"
-    ;;
--ubuntu)
-    check_ubuntu_updates
-    ;;
--fedora)
-    check_fedora_updates
-    ;;
-*)
-    echo "0"
-    ;;
+    -arch)
+        check_arch_updates "$2" "$3"
+        ;;
+    -ubuntu)
+        check_ubuntu_updates
+        ;;
+    -fedora)
+        check_fedora_updates
+        ;;
+    *)
+        echo "0"
+        ;;
 esac
diff --git a/src/components/bar/modules/updates/index.tsx b/src/components/bar/modules/updates/index.tsx
index c2460bf..a367150 100644
--- a/src/components/bar/modules/updates/index.tsx
+++ b/src/components/bar/modules/updates/index.tsx
@@ -8,6 +8,8 @@ import { Astal } from 'astal/gtk3';
 
 const {
     updateCommand,
+    updateTooltipCommand,
+    extendedTooltip,
     label,
     padZero,
     autoHide,
@@ -21,6 +23,7 @@ const {
 } = options.bar.customModules.updates;
 
 const pendingUpdates: Variable<string> = Variable('0');
+const pendingUpdatesTooltip: Variable<string> = Variable('');
 const postInputUpdater = Variable(true);
 const isVis = Variable(!autoHide.get());
 
@@ -29,15 +32,31 @@ const processUpdateCount = (updateCount: string): string => {
     return `${updateCount.padStart(2, '0')}`;
 };
 
+const processUpdateTooltip = (updateTooltip: string, updateCount: Variable<string>): string => {
+    const defaultTooltip = updateCount.get() + ' updates available';
+    if (!extendedTooltip.get()) return defaultTooltip;
+    return defaultTooltip + '\n\n' + updateTooltip;
+};
+
 const updatesPoller = new BashPoller<string, []>(
     pendingUpdates,
-    [bind(padZero), bind(postInputUpdater)],
+    [bind(padZero), bind(postInputUpdater), bind(updateCommand)],
     bind(pollingInterval),
     updateCommand.get(),
     processUpdateCount,
 );
 
+const tooltipPoller = new BashPoller<string, [Variable<string>]>(
+    pendingUpdatesTooltip,
+    [bind(extendedTooltip), bind(postInputUpdater), bind(updateTooltipCommand)],
+    bind(pollingInterval),
+    updateTooltipCommand.get(),
+    processUpdateTooltip,
+    pendingUpdates,
+);
+
 updatesPoller.initialize('updates');
+tooltipPoller.initialize('updates');
 
 Variable.derive([bind(autoHide)], (autoHideModule) => {
     isVis.set(!autoHideModule || (autoHideModule && parseFloat(pendingUpdates.get()) > 0));
@@ -54,7 +73,7 @@ const updatesIcon = Variable.derive(
 export const Updates = (): BarBoxChild => {
     const updatesModule = Module({
         textIcon: updatesIcon(),
-        tooltipText: bind(pendingUpdates).as((v) => `${v} updates available`),
+        tooltipText: bind(pendingUpdatesTooltip),
         boxClass: 'updates',
         isVis: isVis,
         label: bind(pendingUpdates),
diff --git a/src/components/bar/settings/config.tsx b/src/components/bar/settings/config.tsx
index 363255a..70e2802 100644
--- a/src/components/bar/settings/config.tsx
+++ b/src/components/bar/settings/config.tsx
@@ -237,6 +237,17 @@ export const CustomModuleSettings = (): JSX.Element => {
                     title="Check Updates Command"
                     type="string"
                 />
+                <Option
+                    opt={options.bar.customModules.updates.updateTooltipCommand}
+                    title="Check Updates Tooltip Command"
+                    type="string"
+                />
+                <Option
+                    opt={options.bar.customModules.updates.extendedTooltip}
+                    title="Show Extended Tooltip"
+                    subtitle="Lists packages with updates. Arch only."
+                    type="boolean"
+                />
                 <Option
                     opt={options.bar.customModules.updates.icon.pending}
                     title="Updates Available Icon"
diff --git a/src/options.ts b/src/options.ts
index 0112ec1..145b7a0 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -1142,6 +1142,8 @@ const options = mkOptions({
             },
             updates: {
                 updateCommand: opt(`${SRC_DIR}/scripts/checkUpdates.sh -arch`),
+                updateTooltipCommand: opt(`${SRC_DIR}/scripts/checkUpdates.sh -arch -tooltip`),
+                extendedTooltip: opt(false),
                 label: opt(true),
                 padZero: opt(true),
                 autoHide: opt(false),

From b6b58edf76b3f4c30bca96a403efbbc5c975e56e Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Fri, 28 Mar 2025 01:52:25 -0700
Subject: [PATCH 07/11] Fix: Improved GDK to Hyprland monitor mapping logic.
 (#867)

* Feat: Improved GDK<->Hyprland monitor mapping logic.

* Update src/components/bar/utils/GdkMonitorMapper.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Fix type issue.

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/components/bar/index.tsx                  | 193 +++++++------
 src/components/bar/utils/GdkMonitorMapper.ts  | 265 ++++++++++++++++++
 src/components/bar/utils/monitors.ts          | 193 +------------
 src/components/notifications/index.tsx        |  12 +-
 src/components/osd/helpers.ts                 |  11 +-
 .../settings/shared/inputs/font/index.tsx     |   4 +-
 6 files changed, 395 insertions(+), 283 deletions(-)
 create mode 100644 src/components/bar/utils/GdkMonitorMapper.ts

diff --git a/src/components/bar/index.tsx b/src/components/bar/index.tsx
index eb9aea5..12f79b2 100644
--- a/src/components/bar/index.tsx
+++ b/src/components/bar/index.tsx
@@ -34,7 +34,8 @@ import { App, Gtk } from 'astal/gtk3';
 
 import Astal from 'gi://Astal?version=3.0';
 import { bind, Variable } from 'astal';
-import { gdkMonitorIdToHyprlandId, getLayoutForMonitor, isLayoutEmpty } from './utils/monitors';
+import { getLayoutForMonitor, isLayoutEmpty } from './utils/monitors';
+import { GdkMonitorMapper } from './utils/GdkMonitorMapper';
 
 const { layouts } = options.bar;
 const { location } = options.theme.bar;
@@ -68,112 +69,110 @@ const widget = {
     cava: (): JSX.Element => WidgetContainer(Cava()),
 };
 
-export const Bar = (() => {
-    const usedHyprlandMonitors = new Set<number>();
+const gdkMonitorMapper = new GdkMonitorMapper();
 
-    return (monitor: number): JSX.Element => {
-        const hyprlandMonitor = gdkMonitorIdToHyprlandId(monitor, usedHyprlandMonitors);
+export const Bar = (monitor: number): JSX.Element => {
+    const hyprlandMonitor = gdkMonitorMapper.mapGdkToHyprland(monitor);
 
-        const computeVisibility = bind(layouts).as(() => {
-            const foundLayout = getLayoutForMonitor(hyprlandMonitor, layouts.get());
-            return !isLayoutEmpty(foundLayout);
-        });
+    const computeVisibility = bind(layouts).as(() => {
+        const foundLayout = getLayoutForMonitor(hyprlandMonitor, layouts.get());
+        return !isLayoutEmpty(foundLayout);
+    });
 
-        const computeClassName = bind(layouts).as(() => {
-            const foundLayout = getLayoutForMonitor(hyprlandMonitor, layouts.get());
-            return !isLayoutEmpty(foundLayout) ? `bar` : '';
-        });
+    const computeClassName = bind(layouts).as(() => {
+        const foundLayout = getLayoutForMonitor(hyprlandMonitor, layouts.get());
+        return !isLayoutEmpty(foundLayout) ? `bar` : '';
+    });
 
-        const computeAnchor = bind(location).as((loc) => {
-            if (loc === 'bottom') {
-                return Astal.WindowAnchor.BOTTOM | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT;
-            }
+    const computeAnchor = bind(location).as((loc) => {
+        if (loc === 'bottom') {
+            return Astal.WindowAnchor.BOTTOM | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT;
+        }
 
-            return Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT;
-        });
+        return Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT;
+    });
 
-        const computeLayer = Variable.derive([bind(options.theme.bar.layer), bind(options.tear)], (barLayer, tear) => {
-            if (tear && barLayer === 'overlay') {
-                return Astal.Layer.TOP;
-            }
-            const layerMap = {
-                overlay: Astal.Layer.OVERLAY,
-                top: Astal.Layer.TOP,
-                bottom: Astal.Layer.BOTTOM,
-                background: Astal.Layer.BACKGROUND,
-            };
+    const computeLayer = Variable.derive([bind(options.theme.bar.layer), bind(options.tear)], (barLayer, tear) => {
+        if (tear && barLayer === 'overlay') {
+            return Astal.Layer.TOP;
+        }
+        const layerMap = {
+            overlay: Astal.Layer.OVERLAY,
+            top: Astal.Layer.TOP,
+            bottom: Astal.Layer.BOTTOM,
+            background: Astal.Layer.BACKGROUND,
+        };
 
-            return layerMap[barLayer];
-        });
+        return layerMap[barLayer];
+    });
 
-        const computeBorderLocation = bind(borderLocation).as((brdrLcn) =>
-            brdrLcn !== 'none' ? 'bar-panel withBorder' : 'bar-panel',
-        );
+    const computeBorderLocation = bind(borderLocation).as((brdrLcn) =>
+        brdrLcn !== 'none' ? 'bar-panel withBorder' : 'bar-panel',
+    );
 
-        const leftBinding = Variable.derive([bind(layouts)], (currentLayouts) => {
-            const foundLayout = getLayoutForMonitor(hyprlandMonitor, currentLayouts);
+    const leftBinding = Variable.derive([bind(layouts)], (currentLayouts) => {
+        const foundLayout = getLayoutForMonitor(hyprlandMonitor, currentLayouts);
 
-            return foundLayout.left
-                .filter((mod) => Object.keys(widget).includes(mod))
-                .map((w) => widget[w](hyprlandMonitor));
-        });
-        const middleBinding = Variable.derive([bind(layouts)], (currentLayouts) => {
-            const foundLayout = getLayoutForMonitor(hyprlandMonitor, currentLayouts);
+        return foundLayout.left
+            .filter((mod) => Object.keys(widget).includes(mod))
+            .map((w) => widget[w](hyprlandMonitor));
+    });
+    const middleBinding = Variable.derive([bind(layouts)], (currentLayouts) => {
+        const foundLayout = getLayoutForMonitor(hyprlandMonitor, currentLayouts);
 
-            return foundLayout.middle
-                .filter((mod) => Object.keys(widget).includes(mod))
-                .map((w) => widget[w](hyprlandMonitor));
-        });
-        const rightBinding = Variable.derive([bind(layouts)], (currentLayouts) => {
-            const foundLayout = getLayoutForMonitor(hyprlandMonitor, currentLayouts);
+        return foundLayout.middle
+            .filter((mod) => Object.keys(widget).includes(mod))
+            .map((w) => widget[w](hyprlandMonitor));
+    });
+    const rightBinding = Variable.derive([bind(layouts)], (currentLayouts) => {
+        const foundLayout = getLayoutForMonitor(hyprlandMonitor, currentLayouts);
 
-            return foundLayout.right
-                .filter((mod) => Object.keys(widget).includes(mod))
-                .map((w) => widget[w](hyprlandMonitor));
-        });
+        return foundLayout.right
+            .filter((mod) => Object.keys(widget).includes(mod))
+            .map((w) => widget[w](hyprlandMonitor));
+    });
 
-        return (
-            <window
-                inhibit={bind(idleInhibit)}
-                name={`bar-${hyprlandMonitor}`}
-                namespace={`bar-${hyprlandMonitor}`}
-                className={computeClassName}
-                application={App}
-                monitor={monitor}
-                visible={computeVisibility}
-                anchor={computeAnchor}
-                layer={computeLayer()}
-                exclusivity={Astal.Exclusivity.EXCLUSIVE}
-                onDestroy={() => {
-                    computeLayer.drop();
-                    leftBinding.drop();
-                    middleBinding.drop();
-                    rightBinding.drop();
-                }}
-            >
-                <box className={'bar-panel-container'}>
-                    <centerbox
-                        css={'padding: 1px;'}
-                        hexpand
-                        className={computeBorderLocation}
-                        startWidget={
-                            <box className={'box-left'} hexpand>
-                                {leftBinding()}
-                            </box>
-                        }
-                        centerWidget={
-                            <box className={'box-center'} halign={Gtk.Align.CENTER}>
-                                {middleBinding()}
-                            </box>
-                        }
-                        endWidget={
-                            <box className={'box-right'} halign={Gtk.Align.END}>
-                                {rightBinding()}
-                            </box>
-                        }
-                    />
-                </box>
-            </window>
-        );
-    };
-})();
+    return (
+        <window
+            inhibit={bind(idleInhibit)}
+            name={`bar-${hyprlandMonitor}`}
+            namespace={`bar-${hyprlandMonitor}`}
+            className={computeClassName}
+            application={App}
+            monitor={monitor}
+            visible={computeVisibility}
+            anchor={computeAnchor}
+            layer={computeLayer()}
+            exclusivity={Astal.Exclusivity.EXCLUSIVE}
+            onDestroy={() => {
+                computeLayer.drop();
+                leftBinding.drop();
+                middleBinding.drop();
+                rightBinding.drop();
+            }}
+        >
+            <box className={'bar-panel-container'}>
+                <centerbox
+                    css={'padding: 1px;'}
+                    hexpand
+                    className={computeBorderLocation}
+                    startWidget={
+                        <box className={'box-left'} hexpand>
+                            {leftBinding()}
+                        </box>
+                    }
+                    centerWidget={
+                        <box className={'box-center'} halign={Gtk.Align.CENTER}>
+                            {middleBinding()}
+                        </box>
+                    }
+                    endWidget={
+                        <box className={'box-right'} halign={Gtk.Align.END}>
+                            {rightBinding()}
+                        </box>
+                    }
+                />
+            </box>
+        </window>
+    );
+};
diff --git a/src/components/bar/utils/GdkMonitorMapper.ts b/src/components/bar/utils/GdkMonitorMapper.ts
new file mode 100644
index 0000000..9d0485a
--- /dev/null
+++ b/src/components/bar/utils/GdkMonitorMapper.ts
@@ -0,0 +1,265 @@
+import { Gdk } from 'astal/gtk3';
+import AstalHyprland from 'gi://AstalHyprland?version=0.1';
+
+const hyprlandService = AstalHyprland.get_default();
+
+/**
+ * The MonitorMapper class encapsulates the conversion logic between GDK and Hyprland monitor IDs.
+ * It maintains internal state for monitors that have already been used so that duplicate assignments are avoided.
+ */
+export class GdkMonitorMapper {
+    private usedGdkMonitors: Set<number>;
+    private usedHyprlandMonitors: Set<number>;
+
+    constructor() {
+        this.usedGdkMonitors = new Set();
+        this.usedHyprlandMonitors = new Set();
+    }
+
+    /**
+     * Resets the internal state for both GDK and Hyprland monitor mappings.
+     */
+    public reset(): void {
+        this.usedGdkMonitors.clear();
+        this.usedHyprlandMonitors.clear();
+    }
+
+    /**
+     * Converts a GDK monitor id to the corresponding Hyprland monitor id.
+     *
+     * @param monitor The GDK monitor id.
+     * @returns The corresponding Hyprland monitor id.
+     */
+    public mapGdkToHyprland(monitor: number): number {
+        const gdkMonitors = this._getGdkMonitors();
+
+        if (Object.keys(gdkMonitors).length === 0) {
+            return monitor;
+        }
+
+        const gdkMonitor = gdkMonitors[monitor];
+        const hyprlandMonitors = hyprlandService.get_monitors();
+
+        return this._matchMonitor(
+            hyprlandMonitors,
+            gdkMonitor,
+            monitor,
+            this.usedHyprlandMonitors,
+            (mon) => mon.id,
+            (mon, gdkMon) => this._matchMonitorKey(mon, gdkMon),
+        );
+    }
+
+    /**
+     * Converts a Hyprland monitor id to the corresponding GDK monitor id.
+     *
+     * @param monitor The Hyprland monitor id.
+     * @returns The corresponding GDK monitor id.
+     */
+    public mapHyprlandToGdk(monitor: number): number {
+        const gdkMonitors = this._getGdkMonitors();
+        const gdkCandidates = Object.entries(gdkMonitors).map(([monitorId, monitorMetadata]) => ({
+            id: Number(monitorId),
+            monitor: monitorMetadata,
+        }));
+
+        if (gdkCandidates.length === 0) {
+            return monitor;
+        }
+
+        const hyprlandMonitors = hyprlandService.get_monitors();
+        const foundHyprlandMonitor = hyprlandMonitors.find((mon) => mon.id === monitor) || hyprlandMonitors[0];
+
+        return this._matchMonitor(
+            gdkCandidates,
+            foundHyprlandMonitor,
+            monitor,
+            this.usedGdkMonitors,
+            (candidate) => candidate.id,
+            (candidate, hyprlandMonitor) => this._matchMonitorKey(hyprlandMonitor, candidate.monitor),
+        );
+    }
+
+    /**
+     * Generic helper that finds the best matching candidate monitor based on:
+     *  1. A direct match (candidate matches the source and has the same id as the target).
+     *  2. A relaxed match (candidate matches the source, regardless of id).
+     *  3. A fallback match (first candidate that hasn’t been used).
+     *
+     * @param candidates Array of candidate monitors.
+     * @param source The source monitor object to match against.
+     * @param target The desired monitor id.
+     * @param usedMonitors A Set of already used candidate ids.
+     * @param getId Function to extract the id from a candidate.
+     * @param compare Function that determines if a candidate matches the source.
+     * @returns The chosen monitor id.
+     */
+    private _matchMonitor<T, U>(
+        candidates: T[],
+        source: U,
+        target: number,
+        usedMonitors: Set<number>,
+        getId: (candidate: T) => number,
+        compare: (candidate: T, source: U) => boolean,
+    ): number {
+        // Direct match: candidate matches the source and has the same id as the target.
+        const directMatch = candidates.find(
+            (candidate) =>
+                compare(candidate, source) && !usedMonitors.has(getId(candidate)) && getId(candidate) === target,
+        );
+
+        if (directMatch !== undefined) {
+            usedMonitors.add(getId(directMatch));
+            return getId(directMatch);
+        }
+
+        // Relaxed match: candidate matches the source regardless of id.
+        const relaxedMatch = candidates.find(
+            (candidate) => compare(candidate, source) && !usedMonitors.has(getId(candidate)),
+        );
+
+        if (relaxedMatch !== undefined) {
+            usedMonitors.add(getId(relaxedMatch));
+            return getId(relaxedMatch);
+        }
+
+        // Fallback: use the first candidate that hasn't been used.
+        const fallback = candidates.find((candidate) => !usedMonitors.has(getId(candidate)));
+
+        if (fallback !== undefined) {
+            usedMonitors.add(getId(fallback));
+            return getId(fallback);
+        }
+
+        // As a last resort, iterate over candidates.
+        for (const candidate of candidates) {
+            const candidateId = getId(candidate);
+            if (!usedMonitors.has(candidateId)) {
+                usedMonitors.add(candidateId);
+                return candidateId;
+            }
+        }
+
+        console.warn(`Returning original monitor index as a last resort: ${target}`);
+        return target;
+    }
+
+    /**
+     * Determines if a Hyprland monitor matches a GDK monitor by comparing their keys
+     *
+     * @param hyprlandMonitor - Hyprland monitor object
+     * @param gdkMonitor - GDK monitor object
+     * @returns boolean indicating if the monitors match
+     */
+    private _matchMonitorKey(hyprlandMonitor: AstalHyprland.Monitor, gdkMonitor: GdkMonitor): boolean {
+        const isRotated90 = hyprlandMonitor.transform % 2 !== 0;
+        const gdkScaleFactor = Math.ceil(hyprlandMonitor.scale);
+
+        const scaleFactorWidth = Math.trunc(hyprlandMonitor.width / gdkScaleFactor);
+        const scaleFactorHeight = Math.trunc(hyprlandMonitor.height / gdkScaleFactor);
+        const gdkScaleFactorKey = `${hyprlandMonitor.model}_${scaleFactorWidth}x${scaleFactorHeight}_${gdkScaleFactor}`;
+
+        const transWidth = isRotated90 ? hyprlandMonitor.height : hyprlandMonitor.width;
+        const transHeight = isRotated90 ? hyprlandMonitor.width : hyprlandMonitor.height;
+        const scaleWidth = Math.trunc(transWidth / hyprlandMonitor.scale);
+        const scaleHeight = Math.trunc(transHeight / hyprlandMonitor.scale);
+        const hyprlandScaleFactorKey = `${hyprlandMonitor.model}_${scaleWidth}x${scaleHeight}_${gdkScaleFactor}`;
+
+        const keyMatch = gdkMonitor.key === gdkScaleFactorKey || gdkMonitor.key === hyprlandScaleFactorKey;
+
+        this._logMonitorInfo(
+            gdkMonitor,
+            hyprlandMonitor,
+            isRotated90,
+            gdkScaleFactor,
+            gdkScaleFactorKey,
+            hyprlandScaleFactorKey,
+            keyMatch,
+        );
+
+        return keyMatch;
+    }
+
+    /**
+     * Retrieves all GDK monitors from the default display
+     *
+     * @returns Object containing GDK monitor information indexed by monitor ID
+     */
+    private _getGdkMonitors(): GdkMonitors {
+        const display = Gdk.Display.get_default();
+        if (display === null) {
+            console.error('Failed to get Gdk display.');
+            return {};
+        }
+
+        const numGdkMonitors = display.get_n_monitors();
+        const gdkMonitors: GdkMonitors = {};
+
+        for (let i = 0; i < numGdkMonitors; i++) {
+            const curMonitor = display.get_monitor(i);
+            if (curMonitor === null) {
+                console.warn(`Monitor at index ${i} is null.`);
+                continue;
+            }
+
+            const model = curMonitor.get_model() || '';
+            const geometry = curMonitor.get_geometry();
+            const scaleFactor = curMonitor.get_scale_factor();
+
+            // GDK3 only supports integer scale factors
+            const key = `${model}_${geometry.width}x${geometry.height}_${scaleFactor}`;
+            gdkMonitors[i] = { key, model, used: false };
+        }
+
+        return gdkMonitors;
+    }
+
+    /**
+     * Logs detailed monitor information for debugging purposes
+     * @param gdkMonitor - GDK monitor object
+     * @param hyprlandMonitor - Hyprland monitor information
+     * @param isRotated90 - Whether the monitor is rotated 90 degrees
+     * @param gdkScaleFactor - The GDK monitor's scale factor
+     * @param gdkScaleFactorKey - Key used for scale factor matching
+     * @param hyprlandScaleFactorKey - Key used for general scale matching
+     * @param keyMatch - Whether the monitor keys match
+     */
+    private _logMonitorInfo(
+        gdkMonitor: GdkMonitor,
+        hyprlandMonitor: AstalHyprland.Monitor,
+        isRotated90: boolean,
+        gdkScaleFactor: number,
+        gdkScaleFactorKey: string,
+        hyprlandScaleFactorKey: string,
+        keyMatch: boolean,
+    ): void {
+        console.debug('=== Monitor Matching Debug Info ===');
+        console.debug('GDK Monitor');
+        console.debug(`  Key: ${gdkMonitor.key}`);
+        console.debug('Hyprland Monitor');
+        console.debug(`  ID: ${hyprlandMonitor.id}`);
+        console.debug(`  Model: ${hyprlandMonitor.model}`);
+        console.debug(`  Resolution: ${hyprlandMonitor.width}x${hyprlandMonitor.height}`);
+        console.debug(`  Scale: ${hyprlandMonitor.scale}`);
+        console.debug(`  Transform: ${hyprlandMonitor.transform}`);
+        console.debug('Calculated Values');
+        console.debug(`  Rotation: ${isRotated90 ? '90°' : '0°'}`);
+        console.debug(`  GDK Scale Factor: ${gdkScaleFactor}`);
+        console.debug('Calculated Keys');
+        console.debug(`  GDK Scale Factor Key: ${gdkScaleFactorKey}`);
+        console.debug(`  Hyprland Scale Factor Key: ${hyprlandScaleFactorKey}`);
+        console.debug('Match Result');
+        console.debug(`  ${keyMatch ? '✅ Monitors Match' : '❌ No Match'}`);
+        console.debug('===============================\n');
+    }
+}
+
+type GdkMonitor = {
+    key: string;
+    model: string;
+    used: boolean;
+};
+
+type GdkMonitors = {
+    [key: string]: GdkMonitor;
+};
diff --git a/src/components/bar/utils/monitors.ts b/src/components/bar/utils/monitors.ts
index c18e298..2ad2a60 100644
--- a/src/components/bar/utils/monitors.ts
+++ b/src/components/bar/utils/monitors.ts
@@ -1,19 +1,12 @@
-import { Gdk } from 'astal/gtk3';
-import AstalHyprland from 'gi://AstalHyprland?version=0.1';
 import { BarLayout, BarLayouts } from 'src/lib/types/options';
 
-const hyprlandService = AstalHyprland.get_default();
-
-type GdkMonitor = {
-    key: string;
-    model: string;
-    used: boolean;
-};
-
-type GdkMonitors = {
-    [key: string]: GdkMonitor;
-};
-
+/**
+ * Returns the bar layout configuration for a specific monitor
+ *
+ * @param monitor - Monitor ID number
+ * @param layouts - Object containing layout configurations for different monitors
+ * @returns BarLayout configuration for the specified monitor, falling back to default if not found
+ */
 export const getLayoutForMonitor = (monitor: number, layouts: BarLayouts): BarLayout => {
     const matchingKey = Object.keys(layouts).find((key) => key === monitor.toString());
     const wildcard = Object.keys(layouts).find((key) => key === '*');
@@ -33,6 +26,12 @@ export const getLayoutForMonitor = (monitor: number, layouts: BarLayouts): BarLa
     };
 };
 
+/**
+ * Checks if a bar layout configuration is empty
+ *
+ * @param layout - Bar layout configuration to check
+ * @returns boolean indicating if all sections of the layout are empty
+ */
 export const isLayoutEmpty = (layout: BarLayout): boolean => {
     const isLeftSectionEmpty = !Array.isArray(layout.left) || layout.left.length === 0;
     const isRightSectionEmpty = !Array.isArray(layout.right) || layout.right.length === 0;
@@ -40,169 +39,3 @@ export const isLayoutEmpty = (layout: BarLayout): boolean => {
 
     return isLeftSectionEmpty && isRightSectionEmpty && isMiddleSectionEmpty;
 };
-
-export function getGdkMonitors(): GdkMonitors {
-    const display = Gdk.Display.get_default();
-
-    if (display === null) {
-        console.error('Failed to get Gdk display.');
-        return {};
-    }
-
-    const numGdkMonitors = display.get_n_monitors();
-    const gdkMonitors: GdkMonitors = {};
-
-    for (let i = 0; i < numGdkMonitors; i++) {
-        const curMonitor = display.get_monitor(i);
-
-        if (curMonitor === null) {
-            console.warn(`Monitor at index ${i} is null.`);
-            continue;
-        }
-
-        const model = curMonitor.get_model() || '';
-        const geometry = curMonitor.get_geometry();
-        const scaleFactor = curMonitor.get_scale_factor();
-
-        // We can only use the scaleFactor for a scale variable in the key
-        // GDK3 doesn't support the fractional "scale" attribute (available in GDK4)
-        const key = `${model}_${geometry.width}x${geometry.height}_${scaleFactor}`;
-        gdkMonitors[i] = { key, model, used: false };
-    }
-
-    return gdkMonitors;
-}
-
-export function matchMonitorKey(hypMon: AstalHyprland.Monitor, gdkMonitor: GdkMonitor): boolean {
-    const isRotated90 = hypMon.transform % 2 !== 0;
-
-    // Needed for the key regardless of scaling below because GDK3 only has the scale factor for the key
-    const gdkScaleFactor = Math.ceil(hypMon.scale);
-
-    // When gdk is scaled with the scale factor, the hyprland width/height will be the same as the base monitor resolution
-    // The GDK width/height will NOT flip regardless of transformation (e.g. 90 degrees will NOT swap the GDK width/height)
-    const scaleFactorWidth = Math.trunc(hypMon.width / gdkScaleFactor);
-    const scaleFactorHeight = Math.trunc(hypMon.height / gdkScaleFactor);
-    const scaleFactorKey = `${hypMon.model}_${scaleFactorWidth}x${scaleFactorHeight}_${gdkScaleFactor}`;
-
-    // When gdk geometry is scaled with the fractional scale, we need to scale the hyprland geometry to match it
-    // However a 90 degree transformation WILL flip the GDK width/height
-    const transWidth = isRotated90 ? hypMon.height : hypMon.width;
-    const transHeight = isRotated90 ? hypMon.width : hypMon.height;
-    const scaleWidth = Math.trunc(transWidth / hypMon.scale);
-    const scaleHeight = Math.trunc(transHeight / hypMon.scale);
-    const scaleKey = `${hypMon.model}_${scaleWidth}x${scaleHeight}_${gdkScaleFactor}`;
-
-    // In GDK3 the GdkMonitor geometry can change depending on how the compositor handles scaling surface framebuffers
-    // We try to match against two different possibilities:
-    //  1) The geometry is scaled by the correct fractional scale
-    //  2) The geometry is scaled by the scaleFactor (the fractional scale rounded up)
-    const keyMatch = gdkMonitor.key === scaleFactorKey || gdkMonitor.key === scaleKey;
-
-    // Monitor matching debug logging, use if your workspaces are appearing on the wrong screen
-    // To use, kill any running HyprPanel instances and then start a terminal, then run:
-    //    G_MESSAGES_DEBUG=all hyprpanel | grep "hyprpanel-DEBUG"
-    // Create an issue in HyprPanel github and post these logs
-    console.debug('Attempting gdk key match');
-    console.debug(`GDK key: ${gdkMonitor.key}`);
-    console.debug(`HypMon.width: ${hypMon.width}`);
-    console.debug(`HypMon.height: ${hypMon.height}`);
-    console.debug(`HypMon.scale: ${hypMon.scale}`);
-    console.debug(`HypMon.transform: ${hypMon.transform}`);
-    console.debug(`isRotated90: ${isRotated90}`);
-    console.debug(`scaleFactor: ${gdkScaleFactor}`);
-    console.debug(`scaleFactorKey: ${scaleFactorKey}`);
-    console.debug(`scaleKey: ${scaleKey}`);
-    console.debug(`match?: ${keyMatch}`);
-
-    return keyMatch;
-}
-
-/**
- * NOTE: Some more funky stuff being done by GDK.
- * We render windows/bar based on the monitor ID. So if you have 3 monitors, then your
- * monitor IDs will be [0, 1, 2]. Hyprland will NEVER change what ID belongs to what monitor.
- *
- * So if hyprland determines id 0 = DP-1, even after you unplug, shut off or restart your monitor,
- * the id 0 will ALWAYS be DP-1.
- *
- * However, GDK (the righteous genius that it is) will change the order of ID anytime your monitor
- * setup is changed. So if you unplug your monitor and plug it back it, it now becomes the last id.
- * So if DP-1 was id 0 and you unplugged it, it will reconfigure to id 2. This sucks because now
- * there's a mismtach between what GDK determines the monitor is at id 2 and what Hyprland determines
- * is at id 2.
- *
- * So for that reason, we need to redirect the input `monitor` that the Bar module takes in, to the
- * proper Hyprland monitor. So when monitor id 0 comes in, we need to find what the id of that monitor
- * is being determined as by Hyprland so the bars show up on the right monitors.
- *
- * Since GTK3 doesn't contain connection names and only monitor models, we have to make the best guess
- * in the case that there are multiple models in the same resolution with the same scale. We find the
- * 'right' monitor by checking if the model matches along with the resolution and scale. If monitor at
- * ID 0 for GDK is being reported as 'MSI MAG271CQR' we find the same model in the Hyprland monitor list
- * and check if the resolution and scaling is the same... if it is then we determine it's a match.
- *
- * The edge-case that we just can't handle is if you have the same monitors in the same resolution at the same
- * scale. So if you've got 2 'MSI MAG271CQR' monitors at 2560x1440 at scale 1, then we just match the first
- * monitor in the list as the first match and then the second 'MSI MAG271CQR' as a match in the 2nd iteration.
- * You may have the bar showing up on the wrong one in this case because we don't know what the connector id
- * is of either of these monitors (DP-1, DP-2) which are unique values - as these are only in GTK4.
- *
- * Keep in mind though, this is ONLY an issue if you change your monitor setup by plugging in a new one, restarting
- * an existing one or shutting it off.
- *
- * If your monitors aren't changed in the current session you're in then none of this safeguarding is relevant.
- *
- * Fun stuff really... :facepalm:
- */
-
-export const gdkMonitorIdToHyprlandId = (monitor: number, usedHyprlandMonitors: Set<number>): number => {
-    const gdkMonitors = getGdkMonitors();
-
-    if (Object.keys(gdkMonitors).length === 0) {
-        return monitor;
-    }
-
-    // Get the GDK monitor for the given monitor index
-    const gdkMonitor = gdkMonitors[monitor];
-
-    // First pass: Strict matching including the monitor index (i.e., hypMon.id === monitor + resolution+scale criteria)
-    const directMatch = hyprlandService.get_monitors().find((hypMon) => {
-        return matchMonitorKey(hypMon, gdkMonitor) && !usedHyprlandMonitors.has(hypMon.id) && hypMon.id === monitor;
-    });
-
-    if (directMatch) {
-        usedHyprlandMonitors.add(directMatch.id);
-        return directMatch.id;
-    }
-
-    // Second pass: Relaxed matching without considering the monitor index
-    const hyprlandMonitor = hyprlandService.get_monitors().find((hypMon) => {
-        return matchMonitorKey(hypMon, gdkMonitor) && !usedHyprlandMonitors.has(hypMon.id);
-    });
-
-    if (hyprlandMonitor) {
-        usedHyprlandMonitors.add(hyprlandMonitor.id);
-        return hyprlandMonitor.id;
-    }
-
-    // Fallback: Find the first available monitor ID that hasn't been used
-    const fallbackMonitor = hyprlandService.get_monitors().find((hypMon) => !usedHyprlandMonitors.has(hypMon.id));
-
-    if (fallbackMonitor) {
-        usedHyprlandMonitors.add(fallbackMonitor.id);
-        return fallbackMonitor.id;
-    }
-
-    // Ensure we return a valid monitor ID that actually exists
-    for (let i = 0; i < hyprlandService.get_monitors().length; i++) {
-        if (!usedHyprlandMonitors.has(i)) {
-            usedHyprlandMonitors.add(i);
-            return i;
-        }
-    }
-
-    // As a last resort, return the original monitor index if no unique monitor can be found
-    console.warn(`Returning original monitor index as a last resort: ${monitor}`);
-    return monitor;
-};
diff --git a/src/components/notifications/index.tsx b/src/components/notifications/index.tsx
index 1fa129f..e335de0 100644
--- a/src/components/notifications/index.tsx
+++ b/src/components/notifications/index.tsx
@@ -6,6 +6,7 @@ import { Astal } from 'astal/gtk3';
 import { NotificationCard } from './Notification.js';
 import AstalNotifd from 'gi://AstalNotifd?version=0.1';
 import AstalHyprland from 'gi://AstalHyprland?version=0.1';
+import { GdkMonitorMapper } from '../bar/utils/GdkMonitorMapper';
 
 const hyprlandService = AstalHyprland.get_default();
 const { position, monitor, active_monitor, showActionsOnHover, displayedTotal } = options.notifications;
@@ -19,15 +20,22 @@ trackPopupNotifications(popupNotifications);
 trackAutoTimeout();
 
 export default (): JSX.Element => {
+    const gdkMonitorMapper = new GdkMonitorMapper();
+
     const windowLayer = bind(tear).as((tear) => (tear ? Astal.Layer.TOP : Astal.Layer.OVERLAY));
     const windowAnchor = bind(position).as(getPosition);
     const windowMonitor = Variable.derive(
         [bind(hyprlandService, 'focusedMonitor'), bind(monitor), bind(active_monitor)],
         (focusedMonitor, monitor, activeMonitor) => {
+            gdkMonitorMapper.reset();
+
             if (activeMonitor === true) {
-                return focusedMonitor.id;
+                const gdkMonitor = gdkMonitorMapper.mapHyprlandToGdk(focusedMonitor.id);
+                return gdkMonitor;
             }
-            return monitor;
+
+            const gdkMonitor = gdkMonitorMapper.mapHyprlandToGdk(monitor);
+            return gdkMonitor;
         },
     );
 
diff --git a/src/components/osd/helpers.ts b/src/components/osd/helpers.ts
index e62e486..77d88b8 100644
--- a/src/components/osd/helpers.ts
+++ b/src/components/osd/helpers.ts
@@ -4,6 +4,7 @@ import AstalHyprland from 'gi://AstalHyprland?version=0.1';
 import AstalWp from 'gi://AstalWp?version=0.1';
 import options from 'src/options';
 import Brightness from 'src/services/Brightness';
+import { GdkMonitorMapper } from '../bar/utils/GdkMonitorMapper';
 
 const wireplumber = AstalWp.get_default() as AstalWp.Wp;
 const audioService = wireplumber.audio;
@@ -59,14 +60,20 @@ export const handleReveal = (self: Widget.Revealer): void => {
  * @returns A Variable<number> representing the monitor index for the OSD.
  */
 export const getOsdMonitor = (): Variable<number> => {
+    const gdkMonitorMapper = new GdkMonitorMapper();
+
     return Variable.derive(
         [bind(hyprlandService, 'focusedMonitor'), bind(monitor), bind(active_monitor)],
         (currentMonitor, defaultMonitor, followMonitor) => {
+            gdkMonitorMapper.reset();
+
             if (followMonitor === true) {
-                return currentMonitor.id;
+                const gdkMonitor = gdkMonitorMapper.mapHyprlandToGdk(currentMonitor.id);
+                return gdkMonitor;
             }
 
-            return defaultMonitor;
+            const gdkMonitor = gdkMonitorMapper.mapHyprlandToGdk(defaultMonitor);
+            return gdkMonitor;
         },
     );
 };
diff --git a/src/components/settings/shared/inputs/font/index.tsx b/src/components/settings/shared/inputs/font/index.tsx
index 119fcd6..496aef4 100644
--- a/src/components/settings/shared/inputs/font/index.tsx
+++ b/src/components/settings/shared/inputs/font/index.tsx
@@ -1,6 +1,6 @@
 import FontButton from 'src/components/shared/FontButton';
 import { Opt } from 'src/lib/option';
-import { styleToString } from './utils';
+import { FontStyle, styleToString } from './utils';
 
 export const FontInputter = <T extends string | number | boolean | object>({
     fontFamily,
@@ -38,6 +38,6 @@ export const FontInputter = <T extends string | number | boolean | object>({
 
 interface FontInputterProps<T> {
     fontFamily: Opt<T>;
-    fontStyle?: Opt<string>;
+    fontStyle?: Opt<FontStyle>;
     fontLabel?: Opt<string>;
 }

From 94a00a49dae15c87e4234c9962295aed2b0dc45e Mon Sep 17 00:00:00 2001
From: davfsa <davfsa@gmail.com>
Date: Fri, 28 Mar 2025 17:29:56 +0100
Subject: [PATCH 08/11] Fix: order priority when resolving application icon
 maps (#868)

Signed-off-by: davfsa <davfsa@gmail.com>
---
 src/components/bar/modules/workspaces/helpers/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/bar/modules/workspaces/helpers/utils.ts b/src/components/bar/modules/workspaces/helpers/utils.ts
index d861198..4e80535 100644
--- a/src/components/bar/modules/workspaces/helpers/utils.ts
+++ b/src/components/bar/modules/workspaces/helpers/utils.ts
@@ -130,7 +130,7 @@ export const getAppIcon = (
     }
 
     const findIconForClient = (clientClass: string, clientTitle: string): string | undefined => {
-        const appIconMap = { ...defaultApplicationIconMap, ...userDefinedIconMap };
+        const appIconMap = { ...userDefinedIconMap, ...defaultApplicationIconMap };
 
         const iconEntry = Object.entries(appIconMap).find(([matcher]) => {
             if (matcher.startsWith('class:')) {

From 3bcd3c4710fc025bbe403948f10c3922a8bf5193 Mon Sep 17 00:00:00 2001
From: Nathan <ndowens@mf.me>
Date: Sun, 30 Mar 2025 00:03:26 -0500
Subject: [PATCH 09/11] Fix: Add bar.systray.ignore for nix (#870)

---
 nix/module.nix | 1 +
 1 file changed, 1 insertion(+)

diff --git a/nix/module.nix b/nix/module.nix
index 2b1821f..49ab7cd 100644
--- a/nix/module.nix
+++ b/nix/module.nix
@@ -327,6 +327,7 @@ in
       bar.notifications.scrollUp = mkStrOption "";
       bar.notifications.show_total = mkBoolOption false;
       bar.scrollSpeed = mkIntOption 5;
+      bar.systray.ignore = mkStrListOption [];
       bar.volume.label = mkBoolOption true;
       bar.volume.middleClick = mkStrOption "";
       bar.volume.rightClick = mkStrOption "";

From 56dca9c17614e7e9b0209cd172cd3e42c7d8f720 Mon Sep 17 00:00:00 2001
From: davfsa <davfsa@gmail.com>
Date: Wed, 2 Apr 2025 06:00:57 +0200
Subject: [PATCH 10/11] Fix: overflowing notification pager container border
 (#879)

Signed-off-by: davfsa <davfsa@gmail.com>
Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>
---
 src/components/menus/notifications/index.tsx | 2 +-
 src/scss/style/menus/notifications.scss      | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/menus/notifications/index.tsx b/src/components/menus/notifications/index.tsx
index bee12d2..1377b72 100644
--- a/src/components/menus/notifications/index.tsx
+++ b/src/components/menus/notifications/index.tsx
@@ -22,7 +22,7 @@ export default (): JSX.Element => {
                 curPage.drop();
             }}
         >
-            <box className={'notification-menu-content'} css={'padding: 1px; margin: -1px;'} hexpand vexpand>
+            <box className={'notification-menu-content'} hexpand vexpand>
                 <box className={'notification-card-container menu'} hexpand vexpand vertical>
                     <Controls />
                     <NotificationsContainer curPage={curPage} />
diff --git a/src/scss/style/menus/notifications.scss b/src/scss/style/menus/notifications.scss
index 185d6bb..24228c3 100644
--- a/src/scss/style/menus/notifications.scss
+++ b/src/scss/style/menus/notifications.scss
@@ -206,6 +206,7 @@
 
 .notification-menu-pager {
     background: $bar-menus-menu-notifications-pager-background;
+    margin-bottom: 0.1em;
     border-radius: $bar-menus-border-radius;
     border-top-left-radius: 0em;
     border-top-right-radius: 0em;

From c9ce27afb9eb3d836f78f4626dd02ccd2f277700 Mon Sep 17 00:00:00 2001
From: davfsa <davfsa@gmail.com>
Date: Wed, 2 Apr 2025 06:05:22 +0200
Subject: [PATCH 11/11] Fix: empty icons for modules will no longer be rendered
 (#880)

Signed-off-by: davfsa <davfsa@gmail.com>
Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>
---
 src/components/bar/shared/Module.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/bar/shared/Module.tsx b/src/components/bar/shared/Module.tsx
index 879a9a1..675cc6b 100644
--- a/src/components/bar/shared/Module.tsx
+++ b/src/components/bar/shared/Module.tsx
@@ -23,9 +23,9 @@ export const Module = ({
     const getIconWidget = (useTxtIcn: boolean): JSX.Element | undefined => {
         let iconWidget: JSX.Element | undefined;
 
-        if (icon !== undefined && !useTxtIcn) {
+        if (icon !== undefined && icon.get() != '' && !useTxtIcn) {
             iconWidget = <icon className={`txt-icon bar-button-icon module-icon ${boxClass}`} icon={icon} />;
-        } else if (textIcon !== undefined) {
+        } else if (textIcon !== undefined && textIcon.get() != '') {
             iconWidget = <label className={`txt-icon bar-button-icon module-icon ${boxClass}`} label={textIcon} />;
         }