Implement layout options

README.md

@@ -1,4 +1,7 @@
-Requirements:
+# HyprPanel
+A panel built for Hyprland with (Aylur's Gnome Shell)[https://github.com/Aylur/ags]
+
+## Requirements
 Bun (may require sudo)
 
 ```sh
@@ -33,3 +36,79 @@ python
 python-gpustat
 
 ```
+
+## Instructions
+
+The HyprPanel comes with a configuration menu which is available by opening the Dashboard menu (click the button in the bar with your Distro's logo) and then clicking the Gear icon;
+
+### Specifying bar layouts per monitor
+
+To specify layouts for each monitor you can create a JSON object such as:
+```JSON
+{
+    "0": {
+        "left": [
+            "dashboard",
+            "workspaces",
+            "windowtitle"
+        ],
+        "middle": [
+            "media"
+        ],
+        "right": [
+            "volume",
+            "clock",
+            "notifications"
+        ]
+    },
+    "1": {
+        "left": [
+            "dashboard",
+            "workspaces",
+            "windowtitle"
+        ],
+        "middle": [
+            "media"
+        ],
+        "right": [
+            "volume",
+            "clock",
+            "notifications"
+        ]
+    },
+    "2": {
+        "left": [
+            "dashboard",
+            "workspaces",
+            "windowtitle"
+        ],
+        "middle": [
+            "media"
+        ],
+        "right": [
+            "volume",
+            "network",
+            "bluetooth",
+            "systray",
+            "clock",
+            "notifications"
+        ]
+    }
+}
+```
+
+Where each monitor is defined by its index (0, 1, 2 in this case) and each section (left, middle, right) contains one or more of the following modules:
+```js
+"battery"
+"dashboard"
+"workspaces"
+"windowtitle"
+"media"
+"notifications"
+"volume"
+"network"
+"bluetooth"
+"clock"
+"systray"
+```
+Since the text-box in the options dialog isn't sufficient, it is recommended that you create this JSON configuration in a text editor elsewhere and paste it into the layout text-box under Configuration > Bar > "Bar Layouts for Monitors".

modules/bar/Bar.ts

@@ -9,18 +9,72 @@ import { Bluetooth } from "./bluetooth/index.js";
 import { BatteryLabel } from "./battery/index.js";
 import { Clock } from "./clock/index.js";
 import { SysTray } from "./systray/index.js";
+const hyprland = await Service.import("hyprland");
 
 import { BarItemBox as WidgetContainer } from "../shared/barItemBox.js";
 import options from "options";
 
-const { start, center, end } = options.bar.layout;
+const { layouts } = options.bar;
 
 export type BarWidget = keyof typeof widget;
 
+type Section = "battery"
+    | "dashboard"
+    | "workspaces"
+    | "windowtitle"
+    | "media"
+    | "notifications"
+    | "volume"
+    | "network"
+    | "bluetooth"
+    | "clock"
+    | "systray";
+
+type Layout = {
+    left: Section[],
+    middle: Section[],
+    right: Section[],
+}
+
+type BarLayout = {
+    [key: string]: Layout
+}
+
+const getModulesForMonitor = (monitor: number, curLayouts: BarLayout) => {
+    const foundMonitor = Object.keys(curLayouts).find(mon => mon === monitor.toString());
+
+    const defaultSetup: Layout = {
+        left: [
+            "dashboard",
+            "workspaces",
+            "windowtitle"
+        ],
+        middle: [
+            "media"
+        ],
+        right: [
+            "volume",
+            "network",
+            "bluetooth",
+            "battery",
+            "systray",
+            "clock",
+            "notifications"
+        ]
+    }
+
+    if (foundMonitor === undefined) {
+        return defaultSetup;
+    }
+
+    return curLayouts[foundMonitor];
+
+}
+
 const widget = {
     battery: () => WidgetContainer(BatteryLabel()),
     dashboard: () => WidgetContainer(Menu()),
-  workspaces: (monitor) => WidgetContainer(Workspaces(monitor, 10)),
+    workspaces: (monitor: number) => WidgetContainer(Workspaces(monitor, 10)),
     windowtitle: () => WidgetContainer(ClientTitle()),
     media: () => WidgetContainer(Media()),
     notifications: () => WidgetContainer(Notifications()),
@@ -40,37 +94,34 @@ export const Bar = (monitor: number) => {
         anchor: ["top", "left", "right"],
         exclusivity: "exclusive",
         child: Widget.CenterBox({
-      visible: true,
+            css: 'padding: 1px',
             startWidget: Widget.Box({
                 class_name: "box-left",
-        spacing: 5,
                 hexpand: true,
                 setup: self => {
-          self.children = start.value.map(w => widget[w](monitor));
+                    self.hook(layouts, (self) => {
-          self.hook(start, (self) => {
+                        const foundLayout = getModulesForMonitor(monitor, layouts.value as BarLayout)
-            self.children = start.value.map(w => widget[w](monitor));
+                        self.children = foundLayout.left.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](monitor));
                     })
                 },
             }),
             centerWidget: Widget.Box({
                 class_name: "box-center",
                 hpack: "center",
-        spacing: 5,
                 setup: self => {
-          self.children = center.value.map(w => widget[w](monitor));
+                    self.hook(layouts, (self) => {
-          self.hook(center, (self) => {
+                        const foundLayout = getModulesForMonitor(monitor, layouts.value as BarLayout)
-            self.children = center.value.map(w => widget[w](monitor));
+                        self.children = foundLayout.middle.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](monitor));
                     })
                 },
             }),
             endWidget: Widget.Box({
                 class_name: "box-right",
                 hpack: "end",
-        spacing: 5,
                 setup: self => {
-          self.children = end.value.map(w => widget[w](monitor));
+                    self.hook(layouts, (self) => {
-          self.hook(end, (self) => {
+                        const foundLayout = getModulesForMonitor(monitor, layouts.value as BarLayout)
-            self.children = end.value.map(w => widget[w](monitor));
+                        self.children = foundLayout.right.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](monitor));
                     })
                 },
             }),

modules/bar/battery/index.js

@@ -2,7 +2,7 @@ const battery = await Service.import("battery");
 import { openMenu } from "../utils.js";
 import options from "options";
 
-const { show_label } = options.bar.battery;
+const { label: show_label } = options.bar.battery;
 
 const BatteryLabel = () => {
   const isVis = Variable(battery.available);

modules/menus/dashboard/shortcuts/index.js

@@ -18,7 +18,6 @@ const Shortcuts = () => {
     });
     const handleClick = (action, resolver, tOut = 250) => {
         App.closeWindow("dashboardmenu");
-    App.toggleWindow("settings-dialog");
 
         setTimeout(() => {
             Utils.execAsync(action)
@@ -162,14 +161,15 @@ const Shortcuts = () => {
                                 }),
                             }),
                             Widget.Button({
-                tooltip_text: right.shortcut2.tooltip.bind("value"),
+                                tooltip_text: "HyprPanel Configuration",
                                 class_name: "dashboard-button",
-                on_primary_click: right.shortcut2.command
+                                on_primary_click: () => {
-                  .bind("value")
+                                    App.closeWindow("dashboardmenu");
-                  .as((cmd) => () => handleClick(cmd)),
+                                    App.toggleWindow("settings-dialog");
+                                },
                                 child: Widget.Label({
                                     class_name: "button-label",
-                  label: right.shortcut2.icon.bind("value"),
+                                    label: "󰒓",
                                 }),
                             }),
                         ],

modules/notifications/index.js

@@ -11,13 +11,16 @@ const { position } = options.notifications;
 
 export default () => {
   notifs.popupTimeout = 7000;
+  const getPosition = (pos) => {
+    return pos.split(" ");
+  }
 
   return Widget.Window({
     name: "notifications-window",
     class_name: "notifications-window",
     monitor: 2,
     layer: "top",
-    anchor: position.bind("value"),
+    anchor: position.bind("value").as(v => getPosition(v)),
     exclusivity: "ignore",
     child: Widget.Box({
       class_name: "notification-card-container",

options.ts

@@ -58,6 +58,7 @@ const options = mkOptions(OPTIONS, {
             background: opt(colors.crust),
             buttons: {
                 monochrome: opt(false),
+                spacing: opt("0.25em"),
                 radius: opt("0.3em"),
                 background: opt(colors.base2),
                 hover: opt(colors.surface1),
@@ -129,7 +130,7 @@ const options = mkOptions(OPTIONS, {
                 },
             },
             menus: {
-                monochrome: opt(true),
+                monochrome: opt(false),
                 background: opt(colors.crust),
                 cards: opt(colors.base),
                 card_radius: opt("0.4em"),
@@ -163,7 +164,7 @@ const options = mkOptions(OPTIONS, {
                 },
                 iconbuttons: {
                     passive: opt(colors.text),
-                    active: opt(colors.lavender)
+                    active: opt(colors.pink)
                 },
                 progressbar: {
                     foreground: opt(colors.lavender),
@@ -411,10 +412,11 @@ const options = mkOptions(OPTIONS, {
                                 card: opt(colors.base),
                                 background: opt(colors.crust),
                                 border: opt(colors.surface0),
-                                label: opt(colors.green),
+                                label: opt(colors.lavender),
                                 body: opt(colors.text),
                                 confirm: opt(colors.green),
                                 deny: opt(colors.red),
+                                button_text: opt(colors.crust),
                             }
                         },
                         shortcuts: {
@@ -513,25 +515,56 @@ const options = mkOptions(OPTIONS, {
     },
 
     bar: {
-        layout: {
+        layouts: opt({
-            start: opt<Array<import("modules/bar/Bar").BarWidget>>([
+            "0": {
+                left: [
                     "dashboard",
                     "workspaces",
                     "windowtitle"
-            ]),
+                ],
-            center: opt<Array<import("modules/bar/Bar").BarWidget>>([
+                middle: [
                     "media"
-            ]),
+                ],
-            end: opt<Array<import("modules/bar/Bar").BarWidget>>([
+                right: [
+                    "volume",
+                    "clock",
+                    "notifications"
+                ]
+            },
+            "1": {
+                left: [
+                    "dashboard",
+                    "workspaces",
+                    "windowtitle"
+                ],
+                middle: [
+                    "media"
+                ],
+                right: [
+                    "volume",
+                    "clock",
+                    "notifications"
+                ]
+            },
+            "2": {
+                left: [
+                    "dashboard",
+                    "workspaces",
+                    "windowtitle"
+                ],
+                middle: [
+                    "media"
+                ],
+                right: [
                     "volume",
                     "network",
                     "bluetooth",
-                "battery",
                     "systray",
                     "clock",
                     "notifications"
-            ]),
+                ]
-        },
+            }
+        }),
         launcher: {
             icon: opt("󰣇"),
         },
@@ -555,7 +588,7 @@ const options = mkOptions(OPTIONS, {
             label: opt(true),
         },
         battery: {
-            show_label: opt(true),
+            label: opt(true),
         },
         systray: {
             ignore: opt([
@@ -612,11 +645,6 @@ const options = mkOptions(OPTIONS, {
                         tooltip: opt("Color Picker"),
                         command: opt("hyprpicker -a")
                     },
-                    shortcut2: {
-                        icon: opt("󰒓"),
-                        tooltip: opt("Hyprland Config"),
-                        command: opt("bash -c \"kitty -e nvim $HOME/.config/hypr/hyprland.conf\"")
-                    },
                     shortcut3: {
                         icon: opt("󰄀"),
                         tooltip: opt("Screenshot"),
@@ -660,8 +688,8 @@ const options = mkOptions(OPTIONS, {
                 military: opt(false),
             },
             weather: {
-                interval: opt(60_000),
+                interval: opt(60000),
-                unit: opt<"metric" | "imperial">("metric"),
+                unit: opt<"metric" | "imperial">("imperial"),
                 key: opt<string>(
                     JSON.parse(Utils.readFile(`${App.configDir}/.weather.json`) || "{}")?.weather_api_key || "",
                 ),
@@ -686,7 +714,7 @@ const options = mkOptions(OPTIONS, {
     },
 
     notifications: {
-        position: opt<Array<"top" | "bottom" | "left" | "right">>(["top", "right"]),
+        position: opt<"top" | "top right" | "top left" | "bottom" | "bottom right" | "bottom left">("top right"),
     },
 })
 

scss/style/bar/bar.scss

@@ -12,7 +12,7 @@
   background-color: $bar-buttons-background;
   border-radius: $bar-buttons-radius;
   padding: 0.2rem 0.9rem;
-  margin: 0.5rem 0.25rem;
+  margin: 0.5rem $bar-buttons-spacing;
 
   &:hover {
     background: $bar-buttons-hover;

scss/style/menus/calendar.scss

@@ -12,7 +12,7 @@
 }
 
 .calendar-menu-item-container {
-  border-radius: 0.4em;
+  border-radius: $bar-menus-card_radius;
   margin-bottom: 1.35em;
   background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
 }

scss/style/menus/media.scss

@@ -14,7 +14,7 @@
   }
 
   .menu-items-section {
-    border-radius: 0.4em;
+    border-radius: $bar-menus-card_radius;
     padding: 0em;
   }
 
@@ -108,6 +108,9 @@
         background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary);
       }
     }
+    slider {
+      background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-media-slider-puck);
+    }
 
     &:hover {
       trough {

scss/style/menus/notifications.scss

@@ -3,7 +3,7 @@
 
 .notification-card-container.menu {
   margin: 0em;
-  min-width: 30.5em;
+  min-width: 30.6em;
   min-height: 48em;
   background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-notifications-background);
   border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border);
@@ -24,7 +24,7 @@
     background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-notifications-card);
     margin: 1em 1em;
     margin-bottom: 0.5em;
-    border-radius: 0.4em;
+    border-radius: $bar-menus-card_radius;
     padding: 0.4em 0.75em;
   }
 

scss/style/menus/power.scss

@@ -1,4 +1,5 @@
 @import "../colors";
+@import '../../variables';
 
 window#powermenu,
 window#verification {
@@ -10,14 +11,14 @@ $popover-padding: 0.6rem * 1.6;
 
 window#verification .verification {
     @include floating-widget;
-    background: $crust;
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-powermenu-confirmation-background);
     padding: 0.35em * 1.6 * 1.5;
     min-width: 20em;
     min-height: 6em;
     font-size: 1.3em;
 
     .verification-content {
-        background: $base;
+        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-powermenu-confirmation-card);
         border-radius: 0.4em;
         padding: 1em;
     }
@@ -27,12 +28,12 @@ window#verification .verification {
 
         .title {
             font-size: 1.5em;
-            color: $lavender;
+            color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-powermenu-confirmation-label);
             margin-bottom: 0.5em;
         }
 
         .desc {
-            color: $text;
+            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-dashboard-powermenu-confirmation-body);
             font-size: 1em;
             margin-bottom: 0.55em;
             padding: 1em 3em;
@@ -40,7 +41,7 @@ window#verification .verification {
     }
 
     .verification-button {
-        background: $base;
+        background: $bar-menus-buttons-default;
         padding: 0.7em 0em;
         margin: 0.4em 1.7em;
         border-radius: 0.3em;
@@ -49,40 +50,40 @@ window#verification .verification {
         transition: opacity .3s ease-in-out;
 
         &.bar-verification_yes {
-            background-color: $green;
+            background-color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-confirm);
         }
         &.bar-verification_no {
-            background-color: $red;
+            background-color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-deny);
         }
 
         &:hover {
             &.bar-verification_yes {
-                background: $lavender;
+                background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-confirm), 0.6);
                 transition: background-color 0.2s ease-in-out;
             }
             &.bar-verification_no {
-                background: $lavender;
+                background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-deny), 0.6);
                 transition: background-color 0.2s ease-in-out;
             }
         }
         &:focus {
             &.bar-verification_yes{
-                background: $lavender;
+                background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-confirm), 0.6);
                 transition: background 0.2s ease-in-out;
             }
             &.bar-verification_no {
-                background: $lavender;
+                background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-deny), 0.6);
                 transition: background 0.2s ease-in-out;
             }
         }
 
         &:active {
             &.bar-verification_yes {
-                background: rgb($lavender, 0.4);
+                background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-confirm), 0.6);
                 transition: background 0.2s ease-in-out;
             }
             &.bar-verification_no {
-                background: rgb($lavender, 0.4);
+                background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-deny), 0.6);
                 transition: background 0.2s ease-in-out;
             }
 
@@ -97,10 +98,10 @@ window#verification .verification {
         }
     }
     .bar-verification_no label {
-        color: $mantle;
+        color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-powermenu-confirmation-button_text);
     }
     .bar-verification_yes label {
-        color: $mantle;
+        color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-powermenu-confirmation-button_text);
     }
 }
 

scss/style/settings/dialog.scss

@@ -14,21 +14,36 @@ window.settings-dialog {
 
 
   .header {
+    background-color: $bar-menus-background;
 
     padding: $padding;
 
     button {
       font-weight: bold;
-            padding: $padding*.5 $padding;
 
     }
 
     button.close {
-            padding: $padding * .5;
+      color: $bar-menus-iconbuttons-passive;
+      image {
+        font-size: 2em;
+      }
+
+      &:hover {
+        color: $bar-menus-iconbuttons-active;
+      }
     }
 
     button.reset {
+      color: $bar-menus-iconbuttons-passive;
       padding: $padding*.5;
+      image {
+        font-size: 1.25em;
+      }
+
+      &:hover {
+        color: $bar-menus-iconbuttons-active;
+      }
     }
   }
 
@@ -170,3 +185,136 @@ window.settings-dialog {
     margin-right: 0.5em;
   }
 }
+.pager-button {
+  margin: 0.5em 0.75em;
+
+  &.category label{
+    font-size: 1.4em;
+  }
+
+  &:hover {
+    color: $bar-menus-iconbuttons-active;
+  }
+  &.active {
+    color: $bar-menus-iconbuttons-active;
+  }
+}
+.bar-theme-page { min-height: 40em;
+}
+.settings-menu-stack {
+  background: $red;
+}
+.paged-container {
+  scrollbar {
+    margin-right: 0.2em;
+    min-width: 0.6em;
+    border-radius: $bar-menus-border-radius;
+    background: $bar-menus-background;
+
+    slider {
+      min-width: 0.6em;
+      border-radius: $bar-menus-border-radius;
+      background: $bar-menus-buttons-default;
+    }
+  }
+  selection {
+    background: $bar-menus-background;
+  }
+
+  switch {
+    font-size: 10px;
+    &:checked {
+      background: $bar-menus-switch-enabled;
+    }
+    slider {
+      background-color: $bar-menus-switch-puck;
+    }
+
+    &:active {
+      background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
+    }
+  }
+
+  entry {
+    min-width: 15em;
+  }
+}
+
+dialog {
+  background: $bar-menus-cards;
+
+  headerbar {
+    border-bottom: 0.075em solid $bar-menus-border-color;
+    background: $bar-menus-cards;
+    padding: 0.5em;
+    font-size: 1.5em;
+
+    button {
+      color: $bar-menus-buttons-text;
+      min-width: 4.5em;
+      min-height: 2.5em;
+      border-radius: $bar-menus-border-radius;
+      background: $bar-menus-buttons-default;
+
+      &:hover {
+        background: transparentize($bar-menus-buttons-default, 0.5);
+      }
+    }
+  }
+
+  viewport {
+    border-right: .25em solid $bar-menus-border-color;
+    list {
+      row {
+        padding: 0em 1.5em;
+
+        &:hover {
+          background: $bar-menus-buttons-default;
+          color: $bar-menus-buttons-text;
+        }
+        label {
+          margin: 0.5em 0.5em;
+          font-size: 0.85em;
+        }
+      }
+    }
+
+  }
+  stack {
+    .horizontal .path-bar {
+      button {
+        background: $bar-menus-iconbuttons-active;
+        min-width: 3em;
+        min-height: 2em;
+        border-radius: $bar-menus-border-radius / 2;
+
+        &:disabled {
+          background: $bar-menus-buttons-disabled;
+        }
+
+        &:hover {
+          background: transparentize($bar-menus-buttons-active, 0.5);
+        }
+        label {
+          margin: 0em 0.25em;
+          color: $bar-menus-buttons-text
+        }
+
+        image {
+          margin: 0em 0.5em;
+          color: $bar-menus-buttons-text
+        }
+        margin: 0.25em;
+      }
+    }
+  }
+
+  treeview header button{
+    padding: 0.25em;
+    border: .15em solid $bar-menus-border-color;
+  }
+
+  headerbar {
+    color: $bar-menus-label;
+  }
+}

scss/variables.scss

@@ -14,6 +14,7 @@ $notification-close_button-label: #11111b;
 $bar-transparent: false;
 $bar-background: #11111b;
 $bar-buttons-monochrome: false;
+$bar-buttons-spacing: 0.25em;
 $bar-buttons-radius: 0.3em;
 $bar-buttons-background: #242438;
 $bar-buttons-hover: #45475a;
@@ -61,7 +62,7 @@ $bar-buttons-notifications-background: #242438;
 $bar-buttons-notifications-hover: #45475a;
 $bar-buttons-notifications-icon: #b4befe;
 $bar-buttons-notifications-total: #b4befe;
-$bar-menus-monochrome: true;
+$bar-menus-monochrome: false;
 $bar-menus-background: #11111b;
 $bar-menus-cards: #1e1e2e;
 $bar-menus-card_radius: 0.4em;
@@ -84,13 +85,7 @@ $bar-menus-buttons-active: #f5c2e7;
 $bar-menus-buttons-disabled: #585b70;
 $bar-menus-buttons-text: #11111b;
 $bar-menus-iconbuttons-passive: #cdd6f4;
-$bar-menus-iconbuttons-active: #b4befe;
+$bar-menus-iconbuttons-active: #f5c2e7;
-$bar-menus-dashboard-background: #242438;
-$bar-menus-dashboard-text: #f9e2af;
-$bar-menus-workspaces-background: #242438;
-$bar-menus-workspaces-available: #89dceb;
-$bar-menus-workspaces-occupied: #f2cdcd;
-$bar-menus-workspaces-active: #f5c2e7;
 $bar-menus-progressbar-foreground: #b4befe;
 $bar-menus-progressbar-background: #45475a;
 $bar-menus-slider-primary: #b4befe;
@@ -162,7 +157,6 @@ $bar-menus-menu-bluetooth-icons-passive: #9399b2;
 $bar-menus-menu-bluetooth-icons-active: #89dceb;
 $bar-menus-menu-bluetooth-iconbutton-passive: #cdd6f4;
 $bar-menus-menu-bluetooth-iconbutton-active: #89dceb;
-$bar-menus-menu-systray-background-color: #242438;
 $bar-menus-menu-systray-dropdownmenu-background: #11111b;
 $bar-menus-menu-systray-dropdownmenu-text: #cdd6f4;
 $bar-menus-menu-systray-dropdownmenu-divider: #1e1e2e;
@@ -206,7 +200,6 @@ $bar-menus-menu-clock-weather-hourly-temperature: #f5c2e7;
 $bar-menus-menu-dashboard-card-color: #1e1e2e;
 $bar-menus-menu-dashboard-background-color: #11111b;
 $bar-menus-menu-dashboard-border-color: #313244;
-$bar-menus-menu-dashboard-profile-card: #1e1e2e;
 $bar-menus-menu-dashboard-profile-name: #f5c2e7;
 $bar-menus-menu-dashboard-powermenu-shutdown: #f38ba8;
 $bar-menus-menu-dashboard-powermenu-restart: #fab387;
@@ -215,10 +208,11 @@ $bar-menus-menu-dashboard-powermenu-sleep: #89dceb;
 $bar-menus-menu-dashboard-powermenu-confirmation-card: #1e1e2e;
 $bar-menus-menu-dashboard-powermenu-confirmation-background: #11111b;
 $bar-menus-menu-dashboard-powermenu-confirmation-border: #313244;
-$bar-menus-menu-dashboard-powermenu-confirmation-label: #a6e3a1;
+$bar-menus-menu-dashboard-powermenu-confirmation-label: #b4befe;
 $bar-menus-menu-dashboard-powermenu-confirmation-body: #cdd6f4;
 $bar-menus-menu-dashboard-powermenu-confirmation-confirm: #a6e3a1;
 $bar-menus-menu-dashboard-powermenu-confirmation-deny: #f38ba8;
+$bar-menus-menu-dashboard-powermenu-confirmation-button_text: #11111b;
 $bar-menus-menu-dashboard-shortcuts-background: #b4befe;
 $bar-menus-menu-dashboard-shortcuts-text: #11111b;
 $bar-menus-menu-dashboard-shortcuts-recording: #a6e3a1;

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",
+        class_name: "bar-theme-page paged-container",
-        vexpand: true,
         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.top.color, 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.middle.color, 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.left.bottom.color, 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.top.color, 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.middle.color, 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.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

@@ -48,9 +48,11 @@ export const Inputter = <T>({
     opt,
     type = typeof opt.value as RowProps<T>["type"],
     enums,
-  max = 1000,
+    max = 1000000,
     min = 0,
-}: RowProps<T>) => {
+}: RowProps<T>,
+    className: string
+) => {
     return Widget.Box({
         class_name: "inputter-container",
         setup: self => {
@@ -67,6 +69,7 @@ export const Inputter = <T>({
 
                 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)),
                 })
@@ -82,6 +85,7 @@ export const Inputter = <T>({
                     .hook(opt, self => self.active = opt.value as boolean)
 
                 case "img": return self.child = Widget.FileChooserButton({
+                    class_name: "image-chooser",
                     on_file_set: ({ uri }) => { opt.value = uri!.replace("file://", "") as T },
                 })
 

widget/settings/shared/Option.ts

@@ -2,7 +2,7 @@ import { Label } from "./Label";
 import { Inputter } from "./Inputter";
 import icons from "lib/icons";
 
-export const Option = (props) => {
+export const Option = (props, className = '') => {
     return Widget.Box({
         class_name: "option-item",
         hexpand: true,
@@ -13,7 +13,7 @@ export const Option = (props) => {
                 hexpand: true,
                 child: Label(props.title, props.subtitle || ""),
             }),
-      Inputter(props),
+            Inputter(props, className),
             Widget.Button({
                 vpack: "center",
                 class_name: "reset",