Implement layout options

widget/settings/SettingsDialog.ts

@@ -1,7 +1,18 @@
 import RegularWindow from "widget/RegularWindow"
 import icons from "lib/icons"
 import options from "options"
-import { BarTheme } from "./pages/theme/bar/index"
+import { ThemesMenu } from "./pages/theme/index"
+import { SettingsMenu } from "./pages/config/index"
+
+type Page = "Configuration" | "Theming"
+
+const CurrentPage = Variable<Page>("Theming");
+
+const pagerMap: Page[] = [
+    "Configuration",
+    "Theming",
+]
+
 const Header = () => Widget.CenterBox({
     class_name: "header",
     start_widget: Widget.Button({
@@ -24,6 +35,41 @@ const Header = () => Widget.CenterBox({
     }),
 })
 
+const PageContainer = () => {
+    return Widget.Box({
+        hpack: "fill",
+        hexpand: true,
+        vertical: true,
+        children: CurrentPage.bind("value").as(v => {
+            return [
+                Widget.Box({
+                    class_name: "option-pages-container",
+                    hpack: "center",
+                    hexpand: true,
+                    children: pagerMap.map((page) => {
+                        return Widget.Button({
+                            xalign: 0,
+                            hpack: "center",
+                            class_name: `pager-button ${v === page ? 'active' : ''} category`,
+                            label: page,
+                            on_primary_click: () => CurrentPage.value = page
+                        })
+                    })
+                }),
+                Widget.Stack({
+                    vexpand: false,
+                    class_name: "themes-menu-stack",
+                    children: {
+                        "Configuration": SettingsMenu(),
+                        "Theming": ThemesMenu(),
+                    },
+                    shown: CurrentPage.bind("value")
+                })
+            ]
+        })
+    })
+}
+
 export default () => RegularWindow({
     name: "settings-dialog",
     class_name: "settings-dialog",
@@ -33,13 +79,13 @@ export default () => RegularWindow({
             win.hide()
             return true
         })
-        win.set_default_size(500, 600)
+        win.set_default_size(200, 300)
     },
     child: Widget.Box({
         vertical: true,
         children: [
             Header(),
-            BarTheme()
+            PageContainer()
         ],
     }),
 })

widget/settings/pages/config/bar/index.ts

@@ -0,0 +1,52 @@
+import { Option } from "widget/settings/shared/Option";
+import { Header } from "widget/settings/shared/Header";
+
+import options from "options";
+
+export const BarSettings = () => {
+    return Widget.Scrollable({
+        vscroll: "always",
+        hscroll: "never",
+        class_name: "menu-theme-page paged-container",
+        child: Widget.Box({
+            vertical: true,
+            children: [
+                Header('Layouts'),
+                Option({ opt: options.bar.layouts, title: 'Bar Layouts for Monitors', subtitle: 'Please refer to the github README for instructions: https://github.com/Jas-SinghFSU/HyprPanel', type: 'object' }, 'bar-layout-input'),
+
+                Header('Dashboard'),
+                Option({ opt: options.bar.launcher.icon, title: 'Dashboard Menu Icon', type: 'string' }),
+
+                Header('Workspaces'),
+                Option({ opt: options.bar.workspaces.show_icons, title: 'Show Workspace Icons', type: 'boolean' }),
+                Option({ opt: options.bar.workspaces.icons.available, title: 'Workspace Available', type: 'string' }),
+                Option({ opt: options.bar.workspaces.icons.active, title: 'Workspace Active', type: 'string' }),
+                Option({ opt: options.bar.workspaces.icons.occupied, title: 'Workspace Occupied', type: 'string' }),
+                Option({ opt: options.bar.workspaces.workspaces, title: 'Total Workspaces', type: 'number' }),
+                Option({ opt: options.bar.workspaces.monitorSpecific, title: 'Monitor Specific', subtitle: 'Only workspaces applicable to the monitor will be displayed', type: 'boolean' }),
+
+                Header('Volume'),
+                Option({ opt: options.bar.volume.label, title: 'Show Volume Percentage', type: 'boolean' }),
+
+                Header('Network'),
+                Option({ opt: options.bar.network.label, title: 'Show Network Name', type: 'boolean' }),
+
+                Header('Bluetooth'),
+                Option({ opt: options.bar.bluetooth.label, title: 'Show Bluetooth Label', type: 'boolean' }),
+
+                Header('Battery'),
+                Option({ opt: options.bar.battery.label, title: 'Show Battery Percentage', type: 'boolean' }),
+
+                Header('System Tray'),
+                // TODO: Figure out how to hand arrays
+                // Option({ opt: options.bar.systray.ignore, title: 'Ignore', subtitle: 'Comma separated string of apps to ignore in the tray', type: 'string' }),
+
+                Header('Clock'),
+                Option({ opt: options.bar.clock.format, title: 'Clock Format', type: 'string' }),
+
+                Header('Notifications'),
+                Option({ opt: options.bar.notifications.show_total, title: 'Show Total # of notifications', type: 'boolean' }),
+            ]
+        })
+    })
+}

widget/settings/pages/config/general/index.ts

@@ -5,11 +5,11 @@ import options from "options";
 
 export const BarGeneral = () => {
     return Widget.Box({
-        class_name: "bar-theme-page",
+        class_name: "bar-theme-page paged-container",
         vertical: true,
         children: [
             Header('General Settings'),
-            Option({ opt: options.theme.font.name, title: 'Font', type: 'string' }),
+            Option({ opt: options.theme.font.name, title: 'Font', type: 'font' }),
             Option({ opt: options.theme.font.size, title: 'Font Size', type: 'string' }),
             Option({ opt: options.theme.font.weight, title: 'Font Weight', subtitle: "100, 200, 300, etc.", type: 'number' }),
         ]

widget/settings/pages/config/index.ts

@@ -0,0 +1,48 @@
+import { BarGeneral } from "./general/index";
+import { BarSettings } from "./bar/index";
+import { ClockMenuSettings } from "./menus/clock";
+import { DashboardMenuSettings } from "./menus/dashboard";
+
+type Page = "General" | "Bar" | "Clock Menu" | "Dashboard Menu"
+const CurrentPage = Variable<Page>("General");
+
+const pagerMap: Page[] = [
+    "General",
+    "Bar",
+    "Clock Menu",
+    "Dashboard Menu",
+]
+
+export const SettingsMenu = () => {
+    return Widget.Box({
+        vertical: true,
+        children: CurrentPage.bind("value").as(v => {
+            return [
+                Widget.Box({
+                    class_name: "option-pages-container",
+                    hpack: "center",
+                    hexpand: true,
+                    children: pagerMap.map((page) => {
+                        return Widget.Button({
+                            hpack: "center",
+                            class_name: `pager-button ${v === page ? 'active' : ''}`,
+                            label: page,
+                            on_primary_click: () => CurrentPage.value = page
+                        })
+                    })
+                }),
+                Widget.Stack({
+                    vexpand: true,
+                    class_name: "themes-menu-stack",
+                    children: {
+                        "General": BarGeneral(),
+                        "Bar": BarSettings(),
+                        "Clock Menu": ClockMenuSettings(),
+                        "Dashboard Menu": DashboardMenuSettings(),
+                    },
+                    shown: CurrentPage.bind("value")
+                })
+            ]
+        })
+    })
+}

widget/settings/pages/config/menus/clock.ts

@@ -0,0 +1,20 @@
+import { Option } from "widget/settings/shared/Option";
+import { Header } from "widget/settings/shared/Header";
+
+import options from "options";
+
+export const ClockMenuSettings = () => {
+    return Widget.Box({
+        class_name: "bar-theme-page paged-container",
+        vertical: true,
+        children: [
+            Header('Time'),
+            Option({ opt: options.menus.clock.time.military, title: 'Use 24hr time', type: 'boolean' }),
+
+            Header('Weather'),
+            Option({ opt: options.menus.clock.weather.interval, title: 'Weather Fetching Interval (ms)', subtitle: 'May require AGS restart.', type: 'number' }),
+            Option({ opt: options.menus.clock.weather.unit, title: 'Units', type: 'enum', enums: ['imperial', 'metric'] }),
+            Option({ opt: options.menus.clock.weather.key, title: 'Weather API Key', subtitle: 'May require AGS restart. https://weatherapi.com/', type: 'string' }),
+        ]
+    })
+}

widget/settings/pages/config/menus/dashboard.ts

@@ -0,0 +1,61 @@
+import { Option } from "widget/settings/shared/Option";
+import { Header } from "widget/settings/shared/Header";
+
+import options from "options";
+
+export const DashboardMenuSettings = () => {
+    return Widget.Scrollable({
+        class_name: "bar-theme-page paged-container",
+        vscroll: "always",
+        hscroll: "never",
+        vexpand: true,
+        overlayScrolling: true,
+        child: Widget.Box({
+            vertical: true,
+            children: [
+                Header('Power Menu'),
+                Option({ opt: options.menus.dashboard.powermenu.avatar.image, title: 'Profile Image', type: 'img' }),
+                Option({ opt: options.menus.dashboard.powermenu.avatar.name, title: 'Profile Name', subtitle: 'Use \'system\' to automatically set system name', type: 'string' }),
+
+                Option({ opt: options.menus.dashboard.powermenu.shutdown, title: 'Shutdown Command', type: 'string' }),
+                Option({ opt: options.menus.dashboard.powermenu.reboot, title: 'Reboot Command', type: 'string' }),
+                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('Shortcuts'),
+                Option({ opt: options.menus.dashboard.shortcuts.left.shortcut1.icon, title: 'Left - Shortcut 1 (Icon)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.shortcuts.left.shortcut1.command, title: 'Left - Shortcut 1 (Command)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.shortcuts.left.shortcut1.tooltip, title: 'Left - Shortcut 1 (Tooltip)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.shortcuts.left.shortcut2.icon, title: 'Left - Shortcut 2 (Icon)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.shortcuts.left.shortcut2.command, title: 'Left - Shortcut 2 (Command)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.shortcuts.left.shortcut2.tooltip, title: 'Left - Shortcut 2 (Tooltip)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.shortcuts.left.shortcut3.icon, title: 'Left - Shortcut 3 (Icon)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.shortcuts.left.shortcut3.command, title: 'Left - Shortcut 3 (Command)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.shortcuts.left.shortcut3.tooltip, title: 'Left - Shortcut 3 (Tooltip)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.shortcuts.left.shortcut4.icon, title: 'Left - Shortcut 4 (Icon)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.shortcuts.left.shortcut4.command, title: 'Left - Shortcut 4 (Command)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.shortcuts.left.shortcut4.tooltip, title: 'Left - Shortcut 4 (Tooltip)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.shortcuts.right.shortcut1.icon, title: 'Right - Shortcut 1 (Icon)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.shortcuts.right.shortcut1.command, title: 'Right - Shortcut 1 (Command)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.shortcuts.right.shortcut1.tooltip, title: 'Right - Shortcut 1 (Tooltip)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.shortcuts.right.shortcut3.icon, title: 'Right - Shortcut 3 (Icon)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.shortcuts.right.shortcut3.command, title: 'Right - Shortcut 3 (Command)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.shortcuts.right.shortcut3.tooltip, title: 'Right - Shortcut 3 (Tooltip)', type: 'string' }),
+
+                Header('Directories'),
+                Option({ opt: options.menus.dashboard.directories.left.directory1.label, title: 'Left - Directory 1 (Label)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.directories.left.directory1.command, title: 'Left - Directory 1 (Command)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.directories.left.directory2.label, title: 'Left - Directory 2 (Label)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.directories.left.directory2.command, title: 'Left - Directory 2 (Command)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.directories.left.directory3.label, title: 'Left - Directory 3 (Label)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.directories.left.directory3.command, title: 'Left - Directory 3 (Command)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.directories.right.directory1.label, title: 'Right - Directory 1 (Label)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.directories.right.directory1.command, title: 'Right - Directory 1 (Command)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.directories.right.directory2.label, title: 'Right - Directory 2 (Label)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.directories.right.directory2.command, title: 'Right - Directory 2 (Command)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.directories.right.directory3.label, title: 'Right - Directory 3 (Label)', type: 'string' }),
+                Option({ opt: options.menus.dashboard.directories.right.directory3.command, title: 'Right - Directory 3 (Command)', type: 'string' }),
+            ]
+        })
+    })
+}

widget/settings/pages/config/notifications/index.ts

@@ -0,0 +1,15 @@
+import { Option } from "widget/settings/shared/Option";
+import { Header } from "widget/settings/shared/Header";
+
+import options from "options";
+
+export const NotificationSettings = () => {
+    return Widget.Box({
+        class_name: "bar-theme-page paged-container",
+        vertical: true,
+        children: [
+            Header('Notification Settings'),
+            Option({ opt: options.notifications.position, title: 'Notification Location', type: 'enum', enums: ['top left', 'top', 'top right', 'bottom right', 'bottom', 'bottom left'] }),
+        ]
+    })
+}

widget/settings/pages/theme/bar/index.ts

@@ -5,10 +5,9 @@ import options from "options";
 
 export const BarTheme = () => {
     return Widget.Scrollable({
-        vscroll: "automatic",
+        vscroll: "always",
         hscroll: "never",
-        class_name: "bar-theme-page",
-        vexpand: true,
+        class_name: "bar-theme-page paged-container",
         child: Widget.Box({
             vertical: true,
             children: [
@@ -16,6 +15,7 @@ export const BarTheme = () => {
                 Option({ opt: options.theme.bar.transparent, title: 'Transparent', type: 'boolean' }),
                 Option({ opt: options.theme.bar.background, title: 'Background Color', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.monochrome, title: 'Use Global Colors', type: 'boolean' }),
+                Option({ opt: options.theme.bar.buttons.spacing, title: 'Button Spacing', type: 'string' }),
                 Option({ opt: options.theme.bar.buttons.radius, title: 'Button Radius', type: 'string' }),
                 Option({ opt: options.theme.bar.buttons.background, title: 'Button Background', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.hover, title: 'Button Hover', type: 'color' }),

widget/settings/pages/theme/index.ts

@@ -0,0 +1,92 @@
+import { BarTheme } from "./bar/index";
+import { NotificationsTheme } from "./notifications/index";
+import { BatteryMenuTheme } from "./menus/battery";
+import { BluetoothMenuTheme } from "./menus/bluetooth";
+import { ClockMenuTheme } from "./menus/clock";
+import { DashboardMenuTheme } from "./menus/dashboard";
+import { MenuTheme } from "./menus/index";
+import { MediaMenuTheme } from "./menus/media";
+import { NetworkMenuTheme } from "./menus/network";
+import { NotificationsMenuTheme } from "./menus/notifications";
+import { SystrayMenuTheme } from "./menus/systray";
+import { VolumeMenuTheme } from "./menus/volume";
+
+type Page = "General Settings"
+    | "Bar"
+    | "Notifications"
+    | "Battery Menu"
+    | "Bluetooth Menu"
+    | "Clock Menu"
+    | "Dashboard Menu"
+    | "Media Menu"
+    | "Network Menu"
+    | "Notifications Menu"
+    | "System Tray"
+    | "Volume Menu";
+
+const CurrentPage = Variable<Page>("General Settings");
+
+const pagerMap: Page[] = [
+    "General Settings",
+    "Bar",
+    "Notifications",
+    "Battery Menu",
+    "Bluetooth Menu",
+    "Clock Menu",
+    "Dashboard Menu",
+    "Media Menu", "Network Menu",
+    "Notifications Menu",
+    "System Tray",
+    "Volume Menu",
+]
+
+export const ThemesMenu = () => {
+    return Widget.Box({
+        vertical: true,
+        children: CurrentPage.bind("value").as(v => {
+            return [
+                Widget.Box({
+                    class_name: "option-pages-container",
+                    hpack: "center",
+                    hexpand: true,
+                    vertical: true,
+                    children: [0, 1, 2].map(section => {
+                        return Widget.Box({
+                            children: pagerMap.map((page, index) => {
+                                if (index >= section * 5 && index < section * 5 + 5) {
+                                    return Widget.Button({
+                                        hpack: "center",
+                                        xalign: 0,
+                                        class_name: `pager-button ${v === page ? 'active' : ''}`,
+                                        label: page,
+                                        on_primary_click: () => CurrentPage.value = page
+                                    })
+                                }
+                                return Widget.Box();
+                            })
+                        })
+                    })
+                }),
+                Widget.Stack({
+                    vexpand: true,
+                    class_name: "themes-menu-stack",
+                    children: {
+                        "General Settings": MenuTheme(),
+                        "Bar": BarTheme(),
+                        "Notifications": NotificationsTheme(),
+                        "Battery Menu": BatteryMenuTheme(),
+                        "Bluetooth Menu": BluetoothMenuTheme(),
+                        "Clock Menu": ClockMenuTheme(),
+                        "Dashboard Menu": DashboardMenuTheme(),
+                        "Media Menu": MediaMenuTheme(),
+                        "Network Menu": NetworkMenuTheme(),
+                        "Notifications Menu": NotificationsMenuTheme(),
+                        "System Tray": SystrayMenuTheme(),
+                        "Volume Menu": VolumeMenuTheme(),
+                    },
+                    shown: CurrentPage.bind("value"),
+                })
+            ]
+        })
+    })
+}

widget/settings/pages/theme/menus/battery.ts

@@ -7,7 +7,7 @@ export const BatteryMenuTheme = () => {
     return Widget.Scrollable({
         vscroll: "automatic",
         hscroll: "never",
-        class_name: "menu-theme-page battery",
+        class_name: "menu-theme-page battery paged-container",
         vexpand: true,
         child: Widget.Box({
             vertical: true,

widget/settings/pages/theme/menus/bluetooth.ts

@@ -7,7 +7,7 @@ export const BluetoothMenuTheme = () => {
     return Widget.Scrollable({
         vscroll: "automatic",
         hscroll: "never",
-        class_name: "menu-theme-page bluetooth",
+        class_name: "menu-theme-page bluetooth paged-container",
         vexpand: true,
         child: Widget.Box({
             vertical: true,

widget/settings/pages/theme/menus/clock.ts

@@ -7,7 +7,7 @@ export const ClockMenuTheme = () => {
     return Widget.Scrollable({
         vscroll: "automatic",
         hscroll: "never",
-        class_name: "menu-theme-page clock",
+        class_name: "menu-theme-page clock paged-container",
         vexpand: true,
         child: Widget.Box({
             vertical: true,

widget/settings/pages/theme/menus/dashboard.ts

@@ -5,15 +5,13 @@ import options from "options";
 
 export const DashboardMenuTheme = () => {
     return Widget.Scrollable({
-        vscroll: "automatic",
+        vscroll: "always",
         hscroll: "never",
-        class_name: "menu-theme-page dashboard",
+        class_name: "menu-theme-page dashboard paged-container",
         vexpand: true,
         child: Widget.Box({
             vertical: true,
             children: [
-                Header('Dashboard Menu Theme Settings'),
-
                 Header('Card'),
                 Option({ opt: options.theme.bar.menus.menu.dashboard.card.color, title: 'Card', type: 'color' }),
 
@@ -38,6 +36,7 @@ export const DashboardMenuTheme = () => {
                 Option({ opt: options.theme.bar.menus.menu.dashboard.powermenu.confirmation.body, title: 'Confirmation Dialog Description', type: 'color' }),
                 Option({ opt: options.theme.bar.menus.menu.dashboard.powermenu.confirmation.confirm, title: 'Confirmation Dialog Confirm Button', type: 'color' }),
                 Option({ opt: options.theme.bar.menus.menu.dashboard.powermenu.confirmation.deny, title: 'Confirmation Dialog Cancel Button', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.dashboard.powermenu.confirmation.button_text, title: 'Confirmation Dialog Button Text', type: 'color' }),
 
                 Header('Shortcuts'),
                 Option({ opt: options.theme.bar.menus.menu.dashboard.shortcuts.background, title: 'Primary', type: 'color' }),
@@ -58,12 +57,12 @@ export const DashboardMenuTheme = () => {
                 Option({ opt: options.theme.bar.menus.menu.dashboard.controls.input.text, title: 'Input Button Text', type: 'color' }),
 
                 Header('Directories'),
-                Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.top, title: 'Directory: Left - Top', type: 'color' }),
-                Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.middle, title: 'Directory: Left - Middle', type: 'color' }),
-                Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.bottom, title: 'Directory: Left - Bottom', type: 'color' }),
-                Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.top, title: 'Directory: Right - Top', type: 'color' }),
-                Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.middle, title: 'Directory: Right - Middle', type: 'color' }),
-                Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.bottom, title: 'Directory: Right - Bottom', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.top.color, title: 'Directory: Left - Top', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.middle.color, title: 'Directory: Left - Middle', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.bottom.color, title: 'Directory: Left - Bottom', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.top.color, title: 'Directory: Right - Top', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.middle.color, title: 'Directory: Right - Middle', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.bottom.color, title: 'Directory: Right - Bottom', type: 'color' }),
 
                 Header('System Stats'),
                 Option({ opt: options.theme.bar.menus.menu.dashboard.monitors.bar_background, title: 'Bar Background', type: 'color' }),

widget/settings/pages/theme/menus/index.ts

@@ -7,7 +7,7 @@ export const MenuTheme = () => {
     return Widget.Scrollable({
         vscroll: "automatic",
         hscroll: "never",
-        class_name: "menu-theme-page",
+        class_name: "menu-theme-page paged-container",
         vexpand: true,
         child: Widget.Box({
             vertical: true,

widget/settings/pages/theme/menus/media.ts

@@ -7,7 +7,7 @@ export const MediaMenuTheme = () => {
     return Widget.Scrollable({
         vscroll: "automatic",
         hscroll: "never",
-        class_name: "menu-theme-page media",
+        class_name: "menu-theme-page media paged-container",
         vexpand: true,
         child: Widget.Box({
             vertical: true,

widget/settings/pages/theme/menus/network.ts

@@ -7,7 +7,7 @@ export const NetworkMenuTheme = () => {
     return Widget.Scrollable({
         vscroll: "automatic",
         hscroll: "never",
-        class_name: "menu-theme-page network",
+        class_name: "menu-theme-page network paged-container",
         vexpand: true,
         child: Widget.Box({
             vertical: true,

widget/settings/pages/theme/menus/notifications.ts

@@ -7,7 +7,7 @@ export const NotificationsMenuTheme = () => {
     return Widget.Scrollable({
         vscroll: "automatic",
         hscroll: "never",
-        class_name: "menu-theme-page notifications",
+        class_name: "menu-theme-page notifications paged-container",
         vexpand: true,
         child: Widget.Box({
             vertical: true,

widget/settings/pages/theme/menus/systray.ts

@@ -7,7 +7,7 @@ export const SystrayMenuTheme = () => {
     return Widget.Scrollable({
         vscroll: "automatic",
         hscroll: "never",
-        class_name: "menu-theme-page systray",
+        class_name: "menu-theme-page systray paged-container",
         vexpand: true,
         child: Widget.Box({
             vertical: true,

widget/settings/pages/theme/menus/volume.ts

@@ -7,7 +7,7 @@ export const VolumeMenuTheme = () => {
     return Widget.Scrollable({
         vscroll: "automatic",
         hscroll: "never",
-        class_name: "menu-theme-page volume",
+        class_name: "menu-theme-page volume paged-container",
         vexpand: true,
         child: Widget.Box({
             vertical: true,

widget/settings/pages/theme/notifications/index.ts

@@ -7,7 +7,7 @@ export const NotificationsTheme = () => {
     return Widget.Scrollable({
         vscroll: "automatic",
         hscroll: "never",
-        class_name: "notifications-theme-page",
+        class_name: "notifications-theme-page paged-container",
         vexpand: true,
         child: Widget.Box({
             vertical: true,

widget/settings/shared/Inputter.ts

@@ -3,115 +3,119 @@ import Gdk from "gi://Gdk"
 import icons from "lib/icons"
 
 export type RowProps<T> = {
-  opt: Opt<T>
-  title: string
-  note?: string
-  type?:
-  | "number"
-  | "color"
-  | "float"
-  | "object"
-  | "string"
-  | "enum"
-  | "boolean"
-  | "img"
-  | "font"
-  enums?: string[]
-  max?: number
-  min?: number
+    opt: Opt<T>
+    title: string
+    note?: string
+    type?:
+    | "number"
+    | "color"
+    | "float"
+    | "object"
+    | "string"
+    | "enum"
+    | "boolean"
+    | "img"
+    | "font"
+    enums?: string[]
+    max?: number
+    min?: number
 }
 
 const EnumSetter = (opt: Opt<string>, values: string[]) => {
-  const lbl = Widget.Label({ label: opt.bind().as(v => `${v}`) })
-  const step = (dir: 1 | -1) => {
-    const i = values.findIndex(i => i === lbl.label)
-    opt.setValue(dir > 0
-      ? i + dir > values.length - 1 ? values[0] : values[i + dir]
-      : i + dir < 0 ? values[values.length - 1] : values[i + dir],
-    )
-  }
-  const next = Widget.Button({
-    child: Widget.Icon(icons.ui.arrow.right),
-    on_clicked: () => step(+1),
-  })
-  const prev = Widget.Button({
-    child: Widget.Icon(icons.ui.arrow.left),
-    on_clicked: () => step(-1),
-  })
-  return Widget.Box({
-    class_name: "enum-setter",
-    children: [lbl, prev, next],
-  })
+    const lbl = Widget.Label({ label: opt.bind().as(v => `${v}`) })
+    const step = (dir: 1 | -1) => {
+        const i = values.findIndex(i => i === lbl.label)
+        opt.setValue(dir > 0
+            ? i + dir > values.length - 1 ? values[0] : values[i + dir]
+            : i + dir < 0 ? values[values.length - 1] : values[i + dir],
+        )
+    }
+    const next = Widget.Button({
+        child: Widget.Icon(icons.ui.arrow.right),
+        on_clicked: () => step(+1),
+    })
+    const prev = Widget.Button({
+        child: Widget.Icon(icons.ui.arrow.left),
+        on_clicked: () => step(-1),
+    })
+    return Widget.Box({
+        class_name: "enum-setter",
+        children: [lbl, prev, next],
+    })
 }
 
 export const Inputter = <T>({
-  opt,
-  type = typeof opt.value as RowProps<T>["type"],
-  enums,
-  max = 1000,
-  min = 0,
-}: RowProps<T>) => {
-  return Widget.Box({
-    class_name: "inputter-container",
-    setup: self => {
+    opt,
+    type = typeof opt.value as RowProps<T>["type"],
+    enums,
+    max = 1000000,
+    min = 0,
+}: RowProps<T>,
+    className: string
+) => {
+    return Widget.Box({
+        class_name: "inputter-container",
+        setup: self => {
 
-      switch (type) {
-        case "number": return self.child = Widget.SpinButton({
-          setup(self) {
-            self.set_range(min, max)
-            self.set_increments(1, 5)
-            self.on("value-changed", () => opt.value = self.value as T)
-            self.hook(opt, () => self.value = opt.value as number)
-          },
-        })
+            switch (type) {
+                case "number": return self.child = Widget.SpinButton({
+                    setup(self) {
+                        self.set_range(min, max)
+                        self.set_increments(1, 5)
+                        self.on("value-changed", () => opt.value = self.value as T)
+                        self.hook(opt, () => self.value = opt.value as number)
+                    },
+                })
 
-        case "float":
-        case "object": return self.child = Widget.Entry({
-          on_accept: self => opt.value = JSON.parse(self.text || ""),
-          setup: self => self.hook(opt, () => self.text = JSON.stringify(opt.value)),
-        })
+                case "float":
+                case "object": return self.child = Widget.Entry({
+                    class_name: className,
+                    on_accept: self => opt.value = JSON.parse(self.text || ""),
+                    setup: self => self.hook(opt, () => self.text = JSON.stringify(opt.value)),
+                })
 
-        case "string": return self.child = Widget.Entry({
-          on_accept: self => opt.value = self.text as T,
-          setup: self => self.hook(opt, () => self.text = opt.value as string),
-        })
+                case "string": return self.child = Widget.Entry({
+                    on_accept: self => opt.value = self.text as T,
+                    setup: self => self.hook(opt, () => self.text = opt.value as string),
+                })
 
-        case "enum": return self.child = EnumSetter(opt as unknown as Opt<string>, enums!)
-        case "boolean": return self.child = Widget.Switch()
-          .on("notify::active", self => opt.value = self.active as T)
-          .hook(opt, self => self.active = opt.value as boolean)
+                case "enum": return self.child = EnumSetter(opt as unknown as Opt<string>, enums!)
+                case "boolean": return self.child = Widget.Switch()
+                    .on("notify::active", self => opt.value = self.active as T)
+                    .hook(opt, self => self.active = opt.value as boolean)
 
-        case "img": return self.child = Widget.FileChooserButton({
-          on_file_set: ({ uri }) => { opt.value = uri!.replace("file://", "") as T },
-        })
+                case "img": return self.child = Widget.FileChooserButton({
+                    class_name: "image-chooser",
+                    on_file_set: ({ uri }) => { opt.value = uri!.replace("file://", "") as T },
+                })
 
-        case "font": return self.child = Widget.FontButton({
-          show_size: false,
-          use_size: false,
-          setup: self => self
-            .hook(opt, () => self.font = opt.value as string)
-            .on("font-set", ({ font }) => opt.value = font!
-              .split(" ").slice(0, -1).join(" ") as T),
-        })
+                case "font": return self.child = Widget.FontButton({
+                    show_size: false,
+                    use_size: false,
+                    setup: self => self
+                        .hook(opt, () => self.font = opt.value as string)
+                        .on("font-set", ({ font }) => opt.value = font!
+                            .split(" ").slice(0, -1).join(" ") as T),
+                })
 
-        case "color": return self.child = Widget.ColorButton()
-          .hook(opt, self => {
-            const rgba = new Gdk.RGBA()
-            rgba.parse(opt.value as string)
-            self.rgba = rgba
-          })
-          .on("color-set", ({ rgba: { red, green, blue } }) => {
-            const hex = (n: number) => {
-              const c = Math.floor(255 * n).toString(16)
-              return c.length === 1 ? `0${c}` : c
+                case "color": return self.child = Widget.ColorButton()
+                    .hook(opt, self => {
+                        const rgba = new Gdk.RGBA()
+                        rgba.parse(opt.value as string)
+                        self.rgba = rgba
+                    })
+                    .on("color-set", ({ rgba: { red, green, blue } }) => {
+                        const hex = (n: number) => {
+                            const c = Math.floor(255 * n).toString(16)
+                            return c.length === 1 ? `0${c}` : c
+                        }
+                        opt.value = `#${hex(red)}${hex(green)}${hex(blue)}` as T
+                    })
+
+                default: return self.child = Widget.Label({
+                    label: `no setter with type ${type}`,
+                })
             }
-            opt.value = `#${hex(red)}${hex(green)}${hex(blue)}` as T
-          })
-
-        default: return self.child = Widget.Label({
-          label: `no setter with type ${type}`,
-        })
-      }
-    }
-  })
+        }
+    })
 }

widget/settings/shared/Option.ts

@@ -2,25 +2,25 @@ import { Label } from "./Label";
 import { Inputter } from "./Inputter";
 import icons from "lib/icons";
 
-export const Option = (props) => {
-  return Widget.Box({
-    class_name: "option-item",
-    hexpand: true,
-    children: [
-      Widget.Box({
-        hpack: "start",
-        vpack: "center",
+export const Option = (props, className = '') => {
+    return Widget.Box({
+        class_name: "option-item",
         hexpand: true,
-        child: Label(props.title, props.subtitle || ""),
-      }),
-      Inputter(props),
-      Widget.Button({
-        vpack: "center",
-        class_name: "reset",
-        child: Widget.Icon(icons.ui.refresh),
-        on_clicked: () => props.opt.reset(),
-        sensitive: props.opt.bind().as(v => v !== props.opt.initial),
-      }),
-    ]
-  })
+        children: [
+            Widget.Box({
+                hpack: "start",
+                vpack: "center",
+                hexpand: true,
+                child: Label(props.title, props.subtitle || ""),
+            }),
+            Inputter(props, className),
+            Widget.Button({
+                vpack: "center",
+                class_name: "reset",
+                child: Widget.Icon(icons.ui.refresh),
+                on_clicked: () => props.opt.reset(),
+                sensitive: props.opt.bind().as(v => v !== props.opt.initial),
+            }),
+        ]
+    })
 }