fix: not being able to remove settings and recording buttons

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

@@ -2,12 +2,12 @@ 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, getRecordingPath, executeCommand } from '../helpers';
+import { getRecordingPath, executeCommand } from '../helpers';
 import AstalHyprland from 'gi://AstalHyprland?version=0.1';
 
 const hyprlandService = AstalHyprland.get_default();
 
-const MonitorListDropdown = (): JSX.Element => {
+export const MonitorListDropdown = (): JSX.Element => {
     const monitorList: Variable<AstalHyprland.Monitor[]> = Variable([]);
 
     const monitorBinding = Variable.derive([bind(hyprlandService, 'monitors')], () => {
@@ -55,33 +55,3 @@ const MonitorListDropdown = (): JSX.Element => {
         </Menu>
     );
 };
-
-export const RecordingButton = (): JSX.Element => {
-    return (
-        <button
-            className={`dashboard-button record ${isRecording.get() ? 'active' : ''}`}
-            tooltipText="Record Screen"
-            vexpand
-            onButtonPressEvent={(_, event) => {
-                const buttonClicked = event.get_button()[1];
-
-                if (buttonClicked !== Gdk.BUTTON_PRIMARY) {
-                    return;
-                }
-
-                const sanitizedPath = getRecordingPath().replace(/"/g, '\\"');
-
-                if (isRecording.get() === true) {
-                    App.get_window('dashboardmenu')?.set_visible(false);
-                    const command = `${SRC_DIR}/scripts/screen_record.sh stop "${sanitizedPath}"`;
-                    executeCommand(command);
-                } else {
-                    const monitorDropdownList = MonitorListDropdown() as Gtk.Menu;
-                    monitorDropdownList.popup_at_pointer(event);
-                }
-            }}
-        >
-            <label className={'button-label txt-icon'} label={'󰑊'} />
-        </button>
-    );
-};

src/components/menus/dashboard/shortcuts/buttons/ShortcutButtons.tsx

@@ -1,22 +1,47 @@
-import { Widget } from 'astal/gtk3';
+import { Widget, Gtk } from 'astal/gtk3';
 import { handleClick, hasCommand } from '../helpers';
 import options from 'src/configuration';
-import { isPrimaryClick } from 'src/lib/events/mouse';
 import { ShortcutVariable } from '../types';
+import { MonitorListDropdown } from './RecordingButton';
 
 const { left, right } = options.menus.dashboard.shortcuts;
 
 const ShortcutButton = ({ shortcut, ...props }: ShortcutButtonProps): JSX.Element => {
+    const isRecordingButton = shortcut.command.get() === 'hyprpanel_record';
+
     return (
         <button
             vexpand
             tooltipText={shortcut.tooltip.get()}
-            onClick={(_, event) => {
-                if (isPrimaryClick(event)) {
+            className={
+                isRecordingButton
+                    ? bind(isRecording).as((rec) => `${props.className || ''} ${rec ? 'active' : ''}`.trim())
+                    : props.className
+            }
+            onButtonPressEvent={(_, event) => {
+                const buttonClicked = event.get_button()[1];
+
+                if (buttonClicked !== Gdk.BUTTON_PRIMARY) {
+                    return;
+                }
+
+                if (!isRecordingButton) {
                     handleClick(shortcut.command.get());
+                    return;
                 }
+
+                const sanitizedPath = getRecordingPath().replace(/"/g, '\\"');
+
+                if (isRecording.get() === true) {
+                    App.get_window('dashboardmenu')?.set_visible(false);
+                    const command = `${SRC_DIR}/scripts/screen_record.sh stop "${sanitizedPath}"`;
+                    executeCommand(command);
+                    return;
+                }
+
+                const monitorDropdownList = MonitorListDropdown() as Gtk.Menu;
+                monitorDropdownList.popup_at_pointer(event);
             }}
-            {...props}
         >
             <label className={'button-label txt-icon'} label={shortcut.icon.get()} />
         </button>
@@ -73,6 +98,14 @@ export const RightShortcut1 = (): JSX.Element => {
     return <ShortcutButton shortcut={right.shortcut1} className={'dashboard-button top-button paired'} />;
 };
 
+export const RightShortcut2 = (): JSX.Element => {
+    if (!hasCommand(right.shortcut2)) {
+        return <box />;
+    }
+
+    return <ShortcutButton shortcut={right.shortcut2} className={'dashboard-button'} />;
+};
+
 export const RightShortcut3 = (): JSX.Element => {
     if (!hasCommand(right.shortcut3)) {
         return <box />;
@@ -81,6 +114,14 @@ export const RightShortcut3 = (): JSX.Element => {
     return <ShortcutButton shortcut={right.shortcut3} className={'dashboard-button top-button paired'} />;
 };
 
+export const RightShortcut4 = (): JSX.Element => {
+    if (!hasCommand(right.shortcut4)) {
+        return <box />;
+    }
+
+    return <ShortcutButton shortcut={right.shortcut4} className={'dashboard-button '} />;
+};
+
 interface ShortcutButtonProps extends Widget.ButtonProps {
     shortcut: ShortcutVariable;
 }

src/components/menus/dashboard/shortcuts/sections/Section.tsx

@@ -6,11 +6,11 @@ import {
     LeftShortcut3,
     LeftShortcut4,
     RightShortcut1,
+    RightShortcut2,
     RightShortcut3,
+    RightShortcut4,
 } from '../buttons/ShortcutButtons';
 import { LeftColumn, RightColumn } from './Column';
-import { SettingsButton } from '../buttons/SettingsButton';
-import { RecordingButton } from '../buttons/RecordingButton';
 import options from 'src/configuration';
 
 const { left, right } = options.menus.dashboard.shortcuts;
@@ -34,9 +34,15 @@ const rightBindings = [
     bind(right.shortcut1.command),
     bind(right.shortcut1.tooltip),
     bind(right.shortcut1.icon),
+    bind(right.shortcut2.command),
+    bind(right.shortcut2.tooltip),
+    bind(right.shortcut2.icon),
     bind(right.shortcut3.command),
     bind(right.shortcut3.tooltip),
     bind(right.shortcut3.icon),
+    bind(right.shortcut4.command),
+    bind(right.shortcut4.tooltip),
+    bind(right.shortcut4.icon),
     bind(leftCardHidden),
     bind(isRecording),
 ];
@@ -82,11 +88,11 @@ export const RightShortcuts = (): JSX.Element => {
                     >
                         <LeftColumn isVisible={true}>
                             <RightShortcut1 />
-                            <SettingsButton />
+                            <RightShortcut2 />
                         </LeftColumn>
                         <RightColumn>
                             <RightShortcut3 />
-                            <RecordingButton />
+                            <RightShortcut4 />
                         </RightColumn>
                     </box>
                 );

src/components/settings/pages/config/menus/dashboard.tsx

@@ -159,6 +159,22 @@ export const DashboardMenuSettings = (): JSX.Element => {
                     type="string"
                 />
 
+                <Option
+                    opt={options.menus.dashboard.shortcuts.right.shortcut2.icon}
+                    title="Right - Shortcut 2 (Icon)"
+                    type="string"
+                />
+                <Option
+                    opt={options.menus.dashboard.shortcuts.right.shortcut2.command}
+                    title="Right - Shortcut 2 (Command)"
+                    type="string"
+                />
+                <Option
+                    opt={options.menus.dashboard.shortcuts.right.shortcut2.tooltip}
+                    title="Right - Shortcut 2 (Tooltip)"
+                    type="string"
+                />
+
                 <Option
                     opt={options.menus.dashboard.shortcuts.right.shortcut3.icon}
                     title="Right - Shortcut 3 (Icon)"
@@ -175,6 +191,22 @@ export const DashboardMenuSettings = (): JSX.Element => {
                     type="string"
                 />
 
+                <Option
+                    opt={options.menus.dashboard.shortcuts.right.shortcut2.icon}
+                    title="Right - Shortcut 2 (Icon)"
+                    type="string"
+                />
+                <Option
+                    opt={options.menus.dashboard.shortcuts.right.shortcut2.command}
+                    title="Right - Shortcut 2 (Command)"
+                    type="string"
+                />
+                <Option
+                    opt={options.menus.dashboard.shortcuts.right.shortcut2.tooltip}
+                    title="Right - Shortcut 2 (Tooltip)"
+                    type="string"
+                />
+
                 <Header title="Directories" />
                 <Option opt={options.menus.dashboard.directories.enabled} title="Enabled" type="boolean" />
 

src/configuration/modules/config/menus/dashboard/index.ts

@@ -53,11 +53,21 @@ export default {
                 tooltip: opt('Color Picker'),
                 command: opt('sleep 0.5 && hyprpicker -a'),
             },
+            shortcut2: {
+                icon: opt('󰒓'),
+                tooltip: opt('HyprPanel Configuration'),
+                command: opt('hyprpanel toggleWindow settings-dialog'),
+            },
             shortcut3: {
                 icon: opt('󰄀'),
                 tooltip: opt('Screenshot'),
                 command: opt(`bash -c "${SRC_DIR}/scripts/snapshot.sh"`),
             },
+            shortcut4: {
+                icon: opt('󰑊'),
+                tooltip: opt('Record Screen'),
+                command: opt('hyprpanel_record'),
+            },
         },
     },
     directories: {