Abstract away plugin dev a little more

* feat: Plugin System

* fix: merge conflicts

CLAUDE.md

@@ -63,6 +63,9 @@ quickshell -p shell.qml
 # Or use the shorthand
 qs -p .
 
+# Run with verbose output for debugging
+qs -v -p shell.qml
+
 # Code formatting and linting
 qmlfmt -t 4 -i 4 -b 250 -w /path/to/file.qml    # Format a QML file (requires qmlfmt, do not use qmlformat)
 qmllint **/*.qml         # Lint all QML files for syntax errors
@@ -89,6 +92,7 @@ shell.qml           # Main entry point (minimal orchestration)
 │   ├── DisplayService.qml
 │   ├── NotificationService.qml
 │   ├── WeatherService.qml
+│   ├── PluginService.qml
 │   └── [14 more services]
 ├── Modules/        # UI components (93 files)
 │   ├── TopBar/     # Panel components (13 files)
@@ -104,15 +108,21 @@ shell.qml           # Main entry point (minimal orchestration)
 │   ├── SettingsModal.qml
 │   ├── ClipboardHistoryModal.qml
 │   ├── ProcessListModal.qml
+│   ├── PluginSettingsModal.qml
 │   └── [7 more modals]
-└── Widgets/        # Reusable UI controls (19 files)
+├── Widgets/        # Reusable UI controls (19 files)
-    ├── DankIcon.qml
+│   ├── DankIcon.qml
-    ├── DankSlider.qml
+│   ├── DankSlider.qml
-    ├── DankToggle.qml
+│   ├── DankToggle.qml
-    ├── DankTabBar.qml
+│   ├── DankTabBar.qml
-    ├── DankGridView.qml
+│   ├── DankGridView.qml
-    ├── DankListView.qml
+│   ├── DankListView.qml
-    └── [13 more widgets]
+│   └── [13 more widgets]
+└── plugins/        # External plugins directory ($CONFIGPATH/DankMaterialShell/plugins/)
+    └── PluginName/ # Example Plugin structure
+        ├── plugin.json            # Plugin manifest
+        ├── PluginNameWidget.qml   # Widget component
+        └── PluginNameSettings.qml # Settings UI
 ```
 
 ### Component Organization
@@ -163,6 +173,12 @@ shell.qml           # Main entry point (minimal orchestration)
    - **DankLocationSearch**: Location picker with search
    - **SystemLogo**: Animated system branding component
 
+7. **Plugins/** - External plugin system (`$CONFIGPATH/DankMaterialShell/plugins/`)
+   - **PluginService**: Discovers, loads, and manages plugin lifecycle
+   - **Dynamic Loading**: Plugins loaded at runtime from external directory
+   - **DankBar Integration**: Plugin widgets rendered alongside built-in widgets
+   - **Settings System**: Per-plugin settings with persistence
+
 ### Key Architectural Patterns
 
 1. **Singleton Services Pattern**:
@@ -430,6 +446,134 @@ When modifying the shell:
    }
    ```
 
+### Creating Plugins
+
+Plugins are external, dynamically-loaded components that extend DankBar functionality. Plugins are stored in `~/.config/DankMaterialShell/plugins/` and have their settings isolated from core DMS settings.
+
+1. **Create plugin directory**:
+   ```bash
+   mkdir -p ~/.config/DankMaterialShell/plugins/YourPlugin
+   ```
+
+2. **Create manifest** (`plugin.json`):
+   ```json
+   {
+       "id": "yourPlugin",
+       "name": "Your Plugin",
+       "description": "Widget description",
+       "version": "1.0.0",
+       "author": "Your Name",
+       "icon": "extension",
+       "component": "./YourWidget.qml",
+       "settings": "./YourSettings.qml",
+       "permissions": ["settings_read", "settings_write"]
+   }
+   ```
+
+3. **Create widget component** (`YourWidget.qml`):
+   ```qml
+   import QtQuick
+   import qs.Services
+
+   Rectangle {
+       id: root
+
+       property bool compactMode: false
+       property string section: "center"
+       property real widgetHeight: 30
+       property var pluginService: null
+
+       width: content.implicitWidth + 16
+       height: widgetHeight
+       radius: 8
+       color: "#20FFFFFF"
+
+       Component.onCompleted: {
+           if (pluginService) {
+               var data = pluginService.loadPluginData("yourPlugin", "key", defaultValue)
+           }
+       }
+   }
+   ```
+
+4. **Create settings component** (`YourSettings.qml`):
+   ```qml
+   import QtQuick
+   import QtQuick.Controls
+
+   FocusScope {
+       id: root
+
+       property var pluginService: null
+
+       implicitHeight: settingsColumn.implicitHeight
+       height: implicitHeight
+
+       Column {
+           id: settingsColumn
+           anchors.fill: parent
+           anchors.margins: 16
+           spacing: 12
+
+           Text {
+               text: "Your Plugin Settings"
+               font.pixelSize: 18
+               font.weight: Font.Bold
+           }
+
+           // Your settings UI here
+       }
+
+       function saveSettings(key, value) {
+           if (pluginService) {
+               pluginService.savePluginData("yourPlugin", key, value)
+           }
+       }
+
+       function loadSettings(key, defaultValue) {
+           if (pluginService) {
+               return pluginService.loadPluginData("yourPlugin", key, defaultValue)
+           }
+           return defaultValue
+       }
+   }
+   ```
+
+5. **Enable plugin**:
+   - Open Settings → Plugins
+   - Click "Scan for Plugins"
+   - Toggle plugin to enable
+   - Add plugin ID to DankBar widget list
+
+**Plugin Directory Structure:**
+```
+~/.config/DankMaterialShell/
+├── settings.json                    # Core DMS settings + plugin settings
+│   └── pluginSettings: {
+│       └── yourPlugin: {
+│           ├── enabled: true,
+│           └── customData: {...}
+│       }
+│   }
+└── plugins/                         # Plugin files directory
+    └── YourPlugin/                  # Plugin directory (matches manifest ID)
+        ├── plugin.json              # Plugin manifest
+        ├── YourWidget.qml           # Widget component
+        └── YourSettings.qml         # Settings UI (optional)
+```
+
+**Key Plugin APIs:**
+- `pluginService.loadPluginData(pluginId, key, default)` - Load persistent data
+- `pluginService.savePluginData(pluginId, key, value)` - Save persistent data
+- `PluginService.enablePlugin(pluginId)` - Load plugin
+- `PluginService.disablePlugin(pluginId)` - Unload plugin
+
+**Important Notes:**
+- Plugin settings are automatically injected by the PluginService via `item.pluginService = PluginService`
+- Settings are stored in the main settings.json but namespaced under `pluginSettings.{pluginId}`
+- Plugin directories must match the plugin ID in the manifest
+- Use the injected `pluginService` property in both widget and settings components
+
 ### Debugging Common Issues
 
 1. **Import errors**: Check import paths
@@ -454,6 +598,7 @@ When modifying the shell:
 - **Function Discovery**: Use grep/search tools to find existing utility functions before implementing new ones
 - **Modern QML Patterns**: Leverage new widgets like DankTextField, DankDropdown, CachingImage
 - **Structured Organization**: Follow the established Services/Modules/Widgets/Modals separation
+- **Plugin System**: For user extensions, create plugins instead of modifying core modules - see docs/PLUGINS.md
 
 ### Common Widget Patterns
 

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing
 
-Contributions are welcome and encourages.
+Contributions are welcome and encouraged.
 
 ## Formatting
 

Common/Facts.qml

@@ -0,0 +1,53 @@
+pragma Singleton
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+
+Singleton {
+    id: root
+
+    readonly property var facts: [
+        "A photon takes 100,000 to 200,000 years bouncing through the Sun's dense core, then races to Earth in just 8 minutes 20 seconds.",
+        "A teaspoon of neutron star matter would weigh a billion metric tons here on Earth.",
+        "Right now, 100 trillion solar neutrinos are passing through your body every second.",
+        "The Sun converts 4 million metric tons of matter into pure energy every second—enough to power Earth for 500,000 years.",
+        "The universe still glows with leftover heat from the Big Bang—just 2.7 degrees above absolute zero.",
+        "There's a nebula out there that's actually colder than empty space itself.",
+        "We've detected black holes crashing together by measuring spacetime stretch by less than 1/10,000th the width of a proton.",
+        "Fast radio bursts can release more energy in 5 milliseconds than our Sun produces in 3 days.",
+        "Our galaxy might be crawling with billions of rogue planets drifting alone in the dark.",
+        "Distant galaxies can move away from us faster than light because space itself is stretching.",
+        "The edge of what we can see is 46.5 billion light-years away, even though the universe is only 13.8 billion years old.",
+        "The universe is mostly invisible: 5% regular matter, 27% dark matter, 68% dark energy.",
+        "A day on Venus lasts longer than its entire year around the Sun.",
+        "On Mercury, the time between sunrises is 176 Earth days long.",
+        "In about 4.5 billion years, our galaxy will smash into Andromeda.",
+        "Most of the gold in your jewelry was forged when neutron stars collided somewhere in space.",
+        "PSR J1748-2446ad, the fastest spinning star, rotates 716 times per second—its equator moves at 24% the speed of light.",
+        "Cosmic rays create particles that shouldn't make it to Earth's surface, but time dilation lets them sneak through.",
+        "Jupiter's magnetic field is so huge that if we could see it, it would look bigger than the Moon in our sky.",
+        "Interstellar space is so empty it's like a cube 32 kilometers wide containing just a single grain of sand.",
+        "Voyager 1 is 24 billion kilometers away but won't leave the Sun's gravitational influence for another 30,000 years.",
+        "Counting to a billion at one number per second would take over 31 years.",
+        "Space is so vast, even speeding at light-speed, you'd never return past the cosmic horizon.",
+        "Astronauts on the ISS age about 0.01 seconds less each year than people on Earth.",
+        "Sagittarius B2, a dust cloud near our galaxy's center, contains ethyl formate—the compound that gives raspberries their flavor and rum its smell.",
+        "Beyond 16 billion light-years, the cosmic event horizon marks where space expands too fast for light to ever reach us again.",
+        "Even at light-speed, you'd never catch up to most galaxies—space expands faster.",
+        "Only around 5% of galaxies are ever reachable—even at light-speed.",
+        "If the Sun vanished, we'd still orbit it for 8 minutes before drifting away.",
+        "If a planet 65 million light-years away looked at Earth now, it'd see dinosaurs.",
+        "Our oldest radio signals will reach the Milky Way's center in 26,000 years.",
+        "Every atom in your body heavier than hydrogen was forged in the nuclear furnace of a dying star.",
+        "The Moon moves 3.8 centimeters farther from Earth every year.",
+        "The universe creates 275 million new stars every single day.",
+        "Jupiter's Great Red Spot is a storm twice the size of Earth that has been raging for at least 350 years.",
+        "If you watched someone fall into a black hole, they'd appear frozen at the event horizon forever—time effectively stops from your perspective.",
+        "The Boötes Supervoid is a cosmic desert 1.8 billion light-years across with 60% fewer galaxies than it should have."
+    ]
+
+    function getRandomFact() {
+        return facts[Math.floor(Math.random() * facts.length)]
+    }
+}

Common/SessionData.qml

@@ -12,12 +12,19 @@ Singleton {
 
     id: root
 
+    readonly property bool isGreeterMode: Quickshell.env("DMS_RUN_GREETER") === "1" || Quickshell.env("DMS_RUN_GREETER") === "true"
+
     property bool isLightMode: false
     property string wallpaperPath: ""
     property string wallpaperLastPath: ""
     property string profileLastPath: ""
     property bool perMonitorWallpaper: false
     property var monitorWallpapers: ({})
+    property bool perModeWallpaper: false
+    property string wallpaperPathLight: ""
+    property string wallpaperPathDark: ""
+    property var monitorWallpapersLight: ({})
+    property var monitorWallpapersDark: ({})
     property bool doNotDisturb: false
     property bool nightModeEnabled: false
     property int nightModeTemperature: 4500
@@ -66,12 +73,18 @@ Singleton {
 
 
     Component.onCompleted: {
+        if (!isGreeterMode) {
             loadSettings()
         }
+    }
 
     function loadSettings() {
+        if (isGreeterMode) {
+            parseSettings(greeterSessionFile.text())
+        } else {
             parseSettings(settingsFile.text())
         }
+    }
 
     function parseSettings(content) {
         try {
@@ -83,6 +96,11 @@ Singleton {
                 profileLastPath = settings.profileLastPath !== undefined ? settings.profileLastPath : ""
                 perMonitorWallpaper = settings.perMonitorWallpaper !== undefined ? settings.perMonitorWallpaper : false
                 monitorWallpapers = settings.monitorWallpapers !== undefined ? settings.monitorWallpapers : {}
+                perModeWallpaper = settings.perModeWallpaper !== undefined ? settings.perModeWallpaper : false
+                wallpaperPathLight = settings.wallpaperPathLight !== undefined ? settings.wallpaperPathLight : ""
+                wallpaperPathDark = settings.wallpaperPathDark !== undefined ? settings.wallpaperPathDark : ""
+                monitorWallpapersLight = settings.monitorWallpapersLight !== undefined ? settings.monitorWallpapersLight : {}
+                monitorWallpapersDark = settings.monitorWallpapersDark !== undefined ? settings.monitorWallpapersDark : {}
                 doNotDisturb = settings.doNotDisturb !== undefined ? settings.doNotDisturb : false
                 nightModeEnabled = settings.nightModeEnabled !== undefined ? settings.nightModeEnabled : false
                 nightModeTemperature = settings.nightModeTemperature !== undefined ? settings.nightModeTemperature : 4500
@@ -133,17 +151,19 @@ Singleton {
                 batteryHibernateTimeout = settings.batteryHibernateTimeout !== undefined ? settings.batteryHibernateTimeout : 0
                 lockBeforeSuspend = settings.lockBeforeSuspend !== undefined ? settings.lockBeforeSuspend : false
 
-                // Generate system themes but don't override user's theme choice
+                if (!isGreeterMode) {
                     if (typeof Theme !== "undefined") {
                         Theme.generateSystemThemesFromCurrentTheme()
                     }
                 }
+            }
         } catch (e) {
 
         }
     }
 
     function saveSettings() {
+        if (isGreeterMode) return
         settingsFile.setText(JSON.stringify({
                                                 "isLightMode": isLightMode,
                                                 "wallpaperPath": wallpaperPath,
@@ -151,6 +171,11 @@ Singleton {
                                                 "profileLastPath": profileLastPath,
                                                 "perMonitorWallpaper": perMonitorWallpaper,
                                                 "monitorWallpapers": monitorWallpapers,
+                                                "perModeWallpaper": perModeWallpaper,
+                                                "wallpaperPathLight": wallpaperPathLight,
+                                                "wallpaperPathDark": wallpaperPathDark,
+                                                "monitorWallpapersLight": monitorWallpapersLight,
+                                                "monitorWallpapersDark": monitorWallpapersDark,
                                                 "doNotDisturb": doNotDisturb,
                                                 "nightModeEnabled": nightModeEnabled,
                                                 "nightModeTemperature": nightModeTemperature,
@@ -191,9 +216,21 @@ Singleton {
 
     function setLightMode(lightMode) {
         isLightMode = lightMode
+        syncWallpaperForCurrentMode()
         saveSettings()
     }
 
+    function syncWallpaperForCurrentMode() {
+        if (!perModeWallpaper) return
+
+        if (perMonitorWallpaper) {
+            monitorWallpapers = isLightMode ? Object.assign({}, monitorWallpapersLight) : Object.assign({}, monitorWallpapersDark)
+            return
+        }
+
+        wallpaperPath = isLightMode ? wallpaperPathLight : wallpaperPathDark
+    }
+
     function setDoNotDisturb(enabled) {
         doNotDisturb = enabled
         saveSettings()
@@ -264,6 +301,13 @@ Singleton {
 
     function setWallpaper(imagePath) {
         wallpaperPath = imagePath
+        if (perModeWallpaper) {
+            if (isLightMode) {
+                wallpaperPathLight = imagePath
+            } else {
+                wallpaperPathDark = imagePath
+            }
+        }
         saveSettings()
 
         if (typeof Theme !== "undefined") {
@@ -273,6 +317,13 @@ Singleton {
 
     function setWallpaperColor(color) {
         wallpaperPath = color
+        if (perModeWallpaper) {
+            if (isLightMode) {
+                wallpaperPathLight = color
+            } else {
+                wallpaperPathDark = color
+            }
+        }
         saveSettings()
 
         if (typeof Theme !== "undefined") {
@@ -420,9 +471,51 @@ Singleton {
 
     function setPerMonitorWallpaper(enabled) {
         perMonitorWallpaper = enabled
+        if (enabled && perModeWallpaper) {
+            syncWallpaperForCurrentMode()
+        }
+        saveSettings()
+
+        if (typeof Theme !== "undefined") {
+            Theme.generateSystemThemesFromCurrentTheme()
+        }
+    }
+
+    function setPerModeWallpaper(enabled) {
+        if (enabled && wallpaperCyclingEnabled) {
+            setWallpaperCyclingEnabled(false)
+        }
+        if (enabled && perMonitorWallpaper) {
+            var monitorCyclingAny = false
+            for (var key in monitorCyclingSettings) {
+                if (monitorCyclingSettings[key].enabled) {
+                    monitorCyclingAny = true
+                    break
+                }
+            }
+            if (monitorCyclingAny) {
+                var newSettings = Object.assign({}, monitorCyclingSettings)
+                for (var screenName in newSettings) {
+                    newSettings[screenName].enabled = false
+                }
+                monitorCyclingSettings = newSettings
+            }
+        }
+
+        perModeWallpaper = enabled
+        if (enabled) {
+            if (perMonitorWallpaper) {
+                monitorWallpapersLight = Object.assign({}, monitorWallpapers)
+                monitorWallpapersDark = Object.assign({}, monitorWallpapers)
+            } else {
+                wallpaperPathLight = wallpaperPath
+                wallpaperPathDark = wallpaperPath
+            }
+        } else {
+            syncWallpaperForCurrentMode()
+        }
         saveSettings()
 
-        // Refresh dynamic theming when per-monitor mode changes
         if (typeof Theme !== "undefined") {
             Theme.generateSystemThemesFromCurrentTheme()
         }
@@ -436,9 +529,29 @@ Singleton {
             delete newMonitorWallpapers[screenName]
         }
         monitorWallpapers = newMonitorWallpapers
+
+        if (perModeWallpaper) {
+            if (isLightMode) {
+                var newLight = Object.assign({}, monitorWallpapersLight)
+                if (path && path !== "") {
+                    newLight[screenName] = path
+                } else {
+                    delete newLight[screenName]
+                }
+                monitorWallpapersLight = newLight
+            } else {
+                var newDark = Object.assign({}, monitorWallpapersDark)
+                if (path && path !== "") {
+                    newDark[screenName] = path
+                } else {
+                    delete newDark[screenName]
+                }
+                monitorWallpapersDark = newDark
+            }
+        }
+
         saveSettings()
 
-        // Trigger dynamic theming if this is the first monitor and dynamic theming is enabled
         if (typeof Theme !== "undefined" && typeof Quickshell !== "undefined") {
             var screens = Quickshell.screens
             if (screens.length > 0 && screenName === screens[0].name) {
@@ -517,22 +630,43 @@ Singleton {
     FileView {
         id: settingsFile
 
-        path: StandardPaths.writableLocation(StandardPaths.GenericStateLocation) + "/DankMaterialShell/session.json"
+        path: isGreeterMode ? "" : StandardPaths.writableLocation(StandardPaths.GenericStateLocation) + "/DankMaterialShell/session.json"
-        blockLoading: true
+        blockLoading: isGreeterMode
         blockWrites: true
-        watchChanges: true
+        watchChanges: !isGreeterMode
         onLoaded: {
+            if (!isGreeterMode) {
                 parseSettings(settingsFile.text())
                 hasTriedDefaultSession = false
             }
+        }
         onLoadFailed: error => {
-            if (!hasTriedDefaultSession) {
+            if (!isGreeterMode && !hasTriedDefaultSettings) {
-                hasTriedDefaultSession = true
+                hasTriedDefaultSettings = true
                 defaultSessionCheckProcess.running = true
             }
         }
     }
 
+    FileView {
+        id: greeterSessionFile
+
+        path: {
+            const greetCfgDir = Quickshell.env("DMS_GREET_CFG_DIR") || "/etc/greetd/.dms"
+            return greetCfgDir + "/session.json"
+        }
+        preload: isGreeterMode
+        blockLoading: false
+        blockWrites: true
+        watchChanges: false
+        printErrors: true
+        onLoaded: {
+            if (isGreeterMode) {
+                parseSettings(greeterSessionFile.text())
+            }
+        }
+    }
+
     Process {
         id: defaultSessionCheckProcess
 

Common/SettingsData.qml

@@ -12,12 +12,29 @@ import qs.Services
 Singleton {
     id: root
 
+    readonly property bool isGreeterMode: Quickshell.env("DMS_RUN_GREETER") === "1" || Quickshell.env("DMS_RUN_GREETER") === "true"
+
+    enum Position {
+        Top,
+        Bottom,
+        Left,
+        Right
+    }
+
+    enum AnimationSpeed {
+        None,
+        Shortest,
+        Short,
+        Medium,
+        Long
+    }
+
     // Theme settings
     property string currentThemeName: "blue"
     property string customThemeFile: ""
     property string matugenScheme: "scheme-tonal-spot"
-    property real topBarTransparency: 0.75
+    property real dankBarTransparency: 1.0
-    property real topBarWidgetTransparency: 0.85
+    property real dankBarWidgetTransparency: 1.0
     property real popupTransparency: 1.0
     property real dockTransparency: 1
     property bool use24HourClock: true
@@ -70,12 +87,13 @@ Singleton {
     property string clockDateFormat: ""
     property string lockDateFormat: ""
     property int mediaSize: 1
-    property var topBarLeftWidgets: ["launcherButton", "workspaceSwitcher", "focusedWindow"]
+    property var dankBarLeftWidgets: ["launcherButton", "workspaceSwitcher", "focusedWindow"]
-    property var topBarCenterWidgets: ["music", "clock", "weather"]
+    property var dankBarCenterWidgets: ["music", "clock", "weather"]
-    property var topBarRightWidgets: ["systemTray", "clipboard", "cpuUsage", "memUsage", "notificationButton", "battery", "controlCenterButton"]
+    property var dankBarRightWidgets: ["systemTray", "clipboard", "cpuUsage", "memUsage", "notificationButton", "battery", "controlCenterButton"]
-    property alias topBarLeftWidgetsModel: leftWidgetsModel
+    property var dankBarWidgetOrder: []
-    property alias topBarCenterWidgetsModel: centerWidgetsModel
+    property alias dankBarLeftWidgetsModel: leftWidgetsModel
-    property alias topBarRightWidgetsModel: rightWidgetsModel
+    property alias dankBarCenterWidgetsModel: centerWidgetsModel
+    property alias dankBarRightWidgetsModel: rightWidgetsModel
     property string appLauncherViewMode: "list"
     property string spotlightModalViewMode: "list"
     property string networkPreference: "auto"
@@ -117,17 +135,23 @@ Singleton {
     property bool showDock: false
     property bool dockAutoHide: false
     property bool dockGroupByApp: false
+    property bool dockOpenOnOverview: false
+    property int dockPosition: SettingsData.Position.Bottom
+    property real dockSpacing: 4
+    property real dockBottomGap: 0
     property real cornerRadius: 12
     property bool notificationOverlayEnabled: false
-    property bool topBarAutoHide: false
+    property bool dankBarAutoHide: false
-    property bool topBarOpenOnOverview: false
+    property bool dankBarOpenOnOverview: false
-    property bool topBarVisible: true
+    property bool dankBarVisible: true
-    property real topBarSpacing: 4
+    property real dankBarSpacing: 4
-    property real topBarBottomGap: 0
+    property real dankBarBottomGap: 0
-    property real topBarInnerPadding: 8
+    property real dankBarInnerPadding: 4
-    property bool topBarSquareCorners: false
+    property bool dankBarSquareCorners: false
-    property bool topBarNoBackground: false
+    property bool dankBarNoBackground: false
-    property bool topBarGothCornersEnabled: false
+    property bool dankBarGothCornersEnabled: false
+    property int dankBarPosition: SettingsData.Position.Top
+    property bool dankBarIsVertical: dankBarPosition === SettingsData.Position.Left || dankBarPosition === SettingsData.Position.Right
     property bool lockScreenShowPowerActions: true
     property bool hideBrightnessSlider: false
     property string widgetBackgroundColor: "sch"
@@ -135,19 +159,24 @@ Singleton {
     property int notificationTimeoutLow: 5000
     property int notificationTimeoutNormal: 5000
     property int notificationTimeoutCritical: 0
+    property int notificationPopupPosition: SettingsData.Position.Top
     property var screenPreferences: ({})
+    property int animationSpeed: SettingsData.AnimationSpeed.Short
     readonly property string defaultFontFamily: "Inter Variable"
     readonly property string defaultMonoFontFamily: "Fira Code"
     readonly property string _homeUrl: StandardPaths.writableLocation(StandardPaths.HomeLocation)
     readonly property string _configUrl: StandardPaths.writableLocation(StandardPaths.ConfigLocation)
     readonly property string _configDir: Paths.strip(_configUrl)
 
-    signal forceTopBarLayoutRefresh
+    signal forceDankBarLayoutRefresh
+    signal forceDockLayoutRefresh
     signal widgetDataChanged
     signal workspaceIconsUpdated
 
     property bool _loading: false
 
+    property var pluginSettings: ({})
+
     function getEffectiveTimeFormat() {
         if (use24HourClock) {
             return Locale.ShortFormat
@@ -179,9 +208,9 @@ Singleton {
         centerWidgetsModel.append(dummyItem)
         rightWidgetsModel.append(dummyItem)
 
-        updateListModel(leftWidgetsModel, topBarLeftWidgets)
+        updateListModel(leftWidgetsModel, dankBarLeftWidgets)
-        updateListModel(centerWidgetsModel, topBarCenterWidgets)
+        updateListModel(centerWidgetsModel, dankBarCenterWidgets)
-        updateListModel(rightWidgetsModel, topBarRightWidgets)
+        updateListModel(rightWidgetsModel, dankBarRightWidgets)
     }
 
     function loadSettings() {
@@ -209,8 +238,8 @@ Singleton {
                 }
                 customThemeFile = settings.customThemeFile !== undefined ? settings.customThemeFile : ""
                 matugenScheme = settings.matugenScheme !== undefined ? settings.matugenScheme : "scheme-tonal-spot"
-                topBarTransparency = settings.topBarTransparency !== undefined ? (settings.topBarTransparency > 1 ? settings.topBarTransparency / 100 : settings.topBarTransparency) : 0.75
+                dankBarTransparency = settings.dankBarTransparency !== undefined ? (settings.dankBarTransparency > 1 ? settings.dankBarTransparency / 100 : settings.dankBarTransparency) : (settings.topBarTransparency !== undefined ? (settings.topBarTransparency > 1 ? settings.topBarTransparency / 100 : settings.topBarTransparency) : 1.0)
-                topBarWidgetTransparency = settings.topBarWidgetTransparency !== undefined ? (settings.topBarWidgetTransparency > 1 ? settings.topBarWidgetTransparency / 100 : settings.topBarWidgetTransparency) : 0.85
+                dankBarWidgetTransparency = settings.dankBarWidgetTransparency !== undefined ? (settings.dankBarWidgetTransparency > 1 ? settings.dankBarWidgetTransparency / 100 : settings.dankBarWidgetTransparency) : (settings.topBarWidgetTransparency !== undefined ? (settings.topBarWidgetTransparency > 1 ? settings.topBarWidgetTransparency / 100 : settings.topBarWidgetTransparency) : 1.0)
                 popupTransparency = settings.popupTransparency !== undefined ? (settings.popupTransparency > 1 ? settings.popupTransparency / 100 : settings.popupTransparency) : 1.0
                 dockTransparency = settings.dockTransparency !== undefined ? (settings.dockTransparency > 1 ? settings.dockTransparency / 100 : settings.dockTransparency) : 1
                 use24HourClock = settings.use24HourClock !== undefined ? settings.use24HourClock : true
@@ -264,23 +293,24 @@ Singleton {
                 clockDateFormat = settings.clockDateFormat !== undefined ? settings.clockDateFormat : ""
                 lockDateFormat = settings.lockDateFormat !== undefined ? settings.lockDateFormat : ""
                 mediaSize = settings.mediaSize !== undefined ? settings.mediaSize : (settings.mediaCompactMode !== undefined ? (settings.mediaCompactMode ? 0 : 1) : 1)
-                if (settings.topBarWidgetOrder) {
+                if (settings.dankBarWidgetOrder || settings.topBarWidgetOrder) {
-                    topBarLeftWidgets = settings.topBarWidgetOrder.filter(w => {
+                    var widgetOrder = settings.dankBarWidgetOrder || settings.topBarWidgetOrder
+                    dankBarLeftWidgets = widgetOrder.filter(w => {
                                                                               return ["launcherButton", "workspaceSwitcher", "focusedWindow"].includes(w)
                                                                           })
-                    topBarCenterWidgets = settings.topBarWidgetOrder.filter(w => {
+                    dankBarCenterWidgets = widgetOrder.filter(w => {
                                                                                 return ["clock", "music", "weather"].includes(w)
                                                                             })
-                    topBarRightWidgets = settings.topBarWidgetOrder.filter(w => {
+                    dankBarRightWidgets = widgetOrder.filter(w => {
                                                                                return ["systemTray", "clipboard", "systemResources", "notificationButton", "battery", "controlCenterButton"].includes(w)
                                                                            })
                 } else {
-                    var leftWidgets = settings.topBarLeftWidgets !== undefined ? settings.topBarLeftWidgets : ["launcherButton", "workspaceSwitcher", "focusedWindow"]
+                    var leftWidgets = settings.dankBarLeftWidgets !== undefined ? settings.dankBarLeftWidgets : (settings.topBarLeftWidgets !== undefined ? settings.topBarLeftWidgets : ["launcherButton", "workspaceSwitcher", "focusedWindow"])
-                    var centerWidgets = settings.topBarCenterWidgets !== undefined ? settings.topBarCenterWidgets : ["music", "clock", "weather"]
+                    var centerWidgets = settings.dankBarCenterWidgets !== undefined ? settings.dankBarCenterWidgets : (settings.topBarCenterWidgets !== undefined ? settings.topBarCenterWidgets : ["music", "clock", "weather"])
-                    var rightWidgets = settings.topBarRightWidgets !== undefined ? settings.topBarRightWidgets : ["systemTray", "clipboard", "cpuUsage", "memUsage", "notificationButton", "battery", "controlCenterButton"]
+                    var rightWidgets = settings.dankBarRightWidgets !== undefined ? settings.dankBarRightWidgets : (settings.topBarRightWidgets !== undefined ? settings.topBarRightWidgets : ["systemTray", "clipboard", "cpuUsage", "memUsage", "notificationButton", "battery", "controlCenterButton"])
-                    topBarLeftWidgets = leftWidgets
+                    dankBarLeftWidgets = leftWidgets
-                    topBarCenterWidgets = centerWidgets
+                    dankBarCenterWidgets = centerWidgets
-                    topBarRightWidgets = rightWidgets
+                    dankBarRightWidgets = rightWidgets
                     updateListModel(leftWidgetsModel, leftWidgets)
                     updateListModel(centerWidgetsModel, centerWidgets)
                     updateListModel(rightWidgetsModel, rightWidgets)
@@ -308,25 +338,33 @@ Singleton {
                 showDock = settings.showDock !== undefined ? settings.showDock : false
                 dockAutoHide = settings.dockAutoHide !== undefined ? settings.dockAutoHide : false
                 dockGroupByApp = settings.dockGroupByApp !== undefined ? settings.dockGroupByApp : false
+                dockPosition = settings.dockPosition !== undefined ? settings.dockPosition : SettingsData.Position.Bottom
+                dockSpacing = settings.dockSpacing !== undefined ? settings.dockSpacing : 4
+                dockBottomGap = settings.dockBottomGap !== undefined ? settings.dockBottomGap : 0
                 cornerRadius = settings.cornerRadius !== undefined ? settings.cornerRadius : 12
                 notificationOverlayEnabled = settings.notificationOverlayEnabled !== undefined ? settings.notificationOverlayEnabled : false
-                topBarAutoHide = settings.topBarAutoHide !== undefined ? settings.topBarAutoHide : false
+                dankBarAutoHide = settings.dankBarAutoHide !== undefined ? settings.dankBarAutoHide : (settings.topBarAutoHide !== undefined ? settings.topBarAutoHide : false)
-                topBarOpenOnOverview = settings.topBarOpenOnOverview !== undefined ? settings.topBarOpenOnOverview : false
+                dankBarOpenOnOverview = settings.dankBarOpenOnOverview !== undefined ? settings.dankBarOpenOnOverview : (settings.topBarOpenOnOverview !== undefined ? settings.topBarOpenOnOverview : false)
-                topBarVisible = settings.topBarVisible !== undefined ? settings.topBarVisible : true
+                dankBarVisible = settings.dankBarVisible !== undefined ? settings.dankBarVisible : (settings.topBarVisible !== undefined ? settings.topBarVisible : true)
+                dockOpenOnOverview = settings.dockOpenOnOverview !== undefined ? settings.dockOpenOnOverview : false
                 notificationTimeoutLow = settings.notificationTimeoutLow !== undefined ? settings.notificationTimeoutLow : 5000
                 notificationTimeoutNormal = settings.notificationTimeoutNormal !== undefined ? settings.notificationTimeoutNormal : 5000
                 notificationTimeoutCritical = settings.notificationTimeoutCritical !== undefined ? settings.notificationTimeoutCritical : 0
-                topBarSpacing = settings.topBarSpacing !== undefined ? settings.topBarSpacing : 4
+                notificationPopupPosition = settings.notificationPopupPosition !== undefined ? settings.notificationPopupPosition : SettingsData.Position.Top
-                topBarBottomGap = settings.topBarBottomGap !== undefined ? settings.topBarBottomGap : 0
+                dankBarSpacing = settings.dankBarSpacing !== undefined ? settings.dankBarSpacing : (settings.topBarSpacing !== undefined ? settings.topBarSpacing : 4)
-                topBarInnerPadding = settings.topBarInnerPadding !== undefined ? settings.topBarInnerPadding : 8
+                dankBarBottomGap = settings.dankBarBottomGap !== undefined ? settings.dankBarBottomGap : (settings.topBarBottomGap !== undefined ? settings.topBarBottomGap : 0)
-                topBarSquareCorners = settings.topBarSquareCorners !== undefined ? settings.topBarSquareCorners : false
+                dankBarInnerPadding = settings.dankBarInnerPadding !== undefined ? settings.dankBarInnerPadding : (settings.topBarInnerPadding !== undefined ? settings.topBarInnerPadding : 4)
-                topBarNoBackground = settings.topBarNoBackground !== undefined ? settings.topBarNoBackground : false
+                dankBarSquareCorners = settings.dankBarSquareCorners !== undefined ? settings.dankBarSquareCorners : (settings.topBarSquareCorners !== undefined ? settings.topBarSquareCorners : false)
-                topBarGothCornersEnabled = settings.topBarGothCornersEnabled !== undefined ? settings.topBarGothCornersEnabled : false
+                dankBarNoBackground = settings.dankBarNoBackground !== undefined ? settings.dankBarNoBackground : (settings.topBarNoBackground !== undefined ? settings.topBarNoBackground : false)
+                dankBarGothCornersEnabled = settings.dankBarGothCornersEnabled !== undefined ? settings.dankBarGothCornersEnabled : (settings.topBarGothCornersEnabled !== undefined ? settings.topBarGothCornersEnabled : false)
+                dankBarPosition = settings.dankBarPosition !== undefined ? settings.dankBarPosition : (settings.dankBarAtBottom !== undefined ? (settings.dankBarAtBottom ? SettingsData.Position.Bottom : SettingsData.Position.Top) : (settings.topBarAtBottom !== undefined ? (settings.topBarAtBottom ? SettingsData.Position.Bottom : SettingsData.Position.Top) : SettingsData.Position.Top))
                 lockScreenShowPowerActions = settings.lockScreenShowPowerActions !== undefined ? settings.lockScreenShowPowerActions : true
                 hideBrightnessSlider = settings.hideBrightnessSlider !== undefined ? settings.hideBrightnessSlider : false
                 widgetBackgroundColor = settings.widgetBackgroundColor !== undefined ? settings.widgetBackgroundColor : "sch"
                 surfaceBase = settings.surfaceBase !== undefined ? settings.surfaceBase : "s"
                 screenPreferences = settings.screenPreferences !== undefined ? settings.screenPreferences : ({})
+                pluginSettings = settings.pluginSettings !== undefined ? settings.pluginSettings : ({})
+                animationSpeed = settings.animationSpeed !== undefined ? settings.animationSpeed : SettingsData.AnimationSpeed.Short
                 applyStoredTheme()
                 detectAvailableIconThemes()
                 detectQtTools()
@@ -349,8 +387,8 @@ Singleton {
                                                 "currentThemeName": currentThemeName,
                                                 "customThemeFile": customThemeFile,
                                                 "matugenScheme": matugenScheme,
-                                                "topBarTransparency": topBarTransparency,
+                                                "dankBarTransparency": dankBarTransparency,
-                                                "topBarWidgetTransparency": topBarWidgetTransparency,
+                                                "dankBarWidgetTransparency": dankBarWidgetTransparency,
                                                 "popupTransparency": popupTransparency,
                                                 "dockTransparency": dockTransparency,
                                                 "use24HourClock": use24HourClock,
@@ -395,9 +433,9 @@ Singleton {
                                                 "clockDateFormat": clockDateFormat,
                                                 "lockDateFormat": lockDateFormat,
                                                 "mediaSize": mediaSize,
-                                                "topBarLeftWidgets": topBarLeftWidgets,
+                                                "dankBarLeftWidgets": dankBarLeftWidgets,
-                                                "topBarCenterWidgets": topBarCenterWidgets,
+                                                "dankBarCenterWidgets": dankBarCenterWidgets,
-                                                "topBarRightWidgets": topBarRightWidgets,
+                                                "dankBarRightWidgets": dankBarRightWidgets,
                                                 "appLauncherViewMode": appLauncherViewMode,
                                                 "spotlightModalViewMode": spotlightModalViewMode,
                                                 "networkPreference": networkPreference,
@@ -421,17 +459,22 @@ Singleton {
                                                 "showDock": showDock,
                                                 "dockAutoHide": dockAutoHide,
                                                 "dockGroupByApp": dockGroupByApp,
+                                                "dockOpenOnOverview": dockOpenOnOverview,
+                                                "dockPosition": dockPosition,
+                                                "dockSpacing": dockSpacing,
+                                                "dockBottomGap": dockBottomGap,
                                                 "cornerRadius": cornerRadius,
                                                 "notificationOverlayEnabled": notificationOverlayEnabled,
-                                                "topBarAutoHide": topBarAutoHide,
+                                                "dankBarAutoHide": dankBarAutoHide,
-                                                "topBarOpenOnOverview": topBarOpenOnOverview,
+                                                "dankBarOpenOnOverview": dankBarOpenOnOverview,
-                                                "topBarVisible": topBarVisible,
+                                                "dankBarVisible": dankBarVisible,
-                                                "topBarSpacing": topBarSpacing,
+                                                "dankBarSpacing": dankBarSpacing,
-                                                "topBarBottomGap": topBarBottomGap,
+                                                "dankBarBottomGap": dankBarBottomGap,
-                                                "topBarInnerPadding": topBarInnerPadding,
+                                                "dankBarInnerPadding": dankBarInnerPadding,
-                                                "topBarSquareCorners": topBarSquareCorners,
+                                                "dankBarSquareCorners": dankBarSquareCorners,
-                                                "topBarNoBackground": topBarNoBackground,
+                                                "dankBarNoBackground": dankBarNoBackground,
-                                                "topBarGothCornersEnabled": topBarGothCornersEnabled,
+                                                "dankBarGothCornersEnabled": dankBarGothCornersEnabled,
+                                                "dankBarPosition": dankBarPosition,
                                                 "lockScreenShowPowerActions": lockScreenShowPowerActions,
                                                 "hideBrightnessSlider": hideBrightnessSlider,
                                                 "widgetBackgroundColor": widgetBackgroundColor,
@@ -439,7 +482,10 @@ Singleton {
                                                 "notificationTimeoutLow": notificationTimeoutLow,
                                                 "notificationTimeoutNormal": notificationTimeoutNormal,
                                                 "notificationTimeoutCritical": notificationTimeoutCritical,
-                                                "screenPreferences": screenPreferences
+                                                "notificationPopupPosition": notificationPopupPosition,
+                                                "screenPreferences": screenPreferences,
+                                                "pluginSettings": pluginSettings,
+                                                "animationSpeed": animationSpeed
                                             }, null, 2))
     }
 
@@ -555,11 +601,11 @@ Singleton {
 
     function applyStoredTheme() {
         if (typeof Theme !== "undefined")
-            Theme.switchTheme(currentThemeName, false)
+            Theme.switchTheme(currentThemeName, false, false)
         else
             Qt.callLater(() => {
                              if (typeof Theme !== "undefined")
-                             Theme.switchTheme(currentThemeName, false)
+                             Theme.switchTheme(currentThemeName, false, false)
                          })
     }
 
@@ -586,13 +632,13 @@ Singleton {
         }
     }
 
-    function setTopBarTransparency(transparency) {
+    function setDankBarTransparency(transparency) {
-        topBarTransparency = transparency
+        dankBarTransparency = transparency
         saveSettings()
     }
 
-    function setTopBarWidgetTransparency(transparency) {
+    function setDankBarWidgetTransparency(transparency) {
-        topBarWidgetTransparency = transparency
+        dankBarWidgetTransparency = transparency
         saveSettings()
     }
 
@@ -727,25 +773,25 @@ Singleton {
         saveSettings()
     }
 
-    function setTopBarWidgetOrder(order) {
+    function setDankBarWidgetOrder(order) {
-        topBarWidgetOrder = order
+        dankBarWidgetOrder = order
         saveSettings()
     }
 
-    function setTopBarLeftWidgets(order) {
+    function setDankBarLeftWidgets(order) {
-        topBarLeftWidgets = order
+        dankBarLeftWidgets = order
         updateListModel(leftWidgetsModel, order)
         saveSettings()
     }
 
-    function setTopBarCenterWidgets(order) {
+    function setDankBarCenterWidgets(order) {
-        topBarCenterWidgets = order
+        dankBarCenterWidgets = order
         updateListModel(centerWidgetsModel, order)
         saveSettings()
     }
 
-    function setTopBarRightWidgets(order) {
+    function setDankBarRightWidgets(order) {
-        topBarRightWidgets = order
+        dankBarRightWidgets = order
         updateListModel(rightWidgetsModel, order)
         saveSettings()
     }
@@ -778,13 +824,13 @@ Singleton {
         widgetDataChanged()
     }
 
-    function resetTopBarWidgetsToDefault() {
+    function resetDankBarWidgetsToDefault() {
         var defaultLeft = ["launcherButton", "workspaceSwitcher", "focusedWindow"]
         var defaultCenter = ["music", "clock", "weather"]
         var defaultRight = ["systemTray", "clipboard", "notificationButton", "battery", "controlCenterButton"]
-        topBarLeftWidgets = defaultLeft
+        dankBarLeftWidgets = defaultLeft
-        topBarCenterWidgets = defaultCenter
+        dankBarCenterWidgets = defaultCenter
-        topBarRightWidgets = defaultRight
+        dankBarRightWidgets = defaultRight
         updateListModel(leftWidgetsModel, defaultLeft)
         updateListModel(centerWidgetsModel, defaultCenter)
         updateListModel(rightWidgetsModel, defaultRight)
@@ -951,6 +997,24 @@ Singleton {
 
     function setShowDock(enabled) {
         showDock = enabled
+        if (enabled && dockPosition === dankBarPosition) {
+            if (dankBarPosition === SettingsData.Position.Top) {
+                setDockPosition(SettingsData.Position.Bottom)
+                return
+            }
+            if (dankBarPosition === SettingsData.Position.Bottom) {
+                setDockPosition(SettingsData.Position.Top)
+                return
+            }
+            if (dankBarPosition === SettingsData.Position.Left) {
+                setDockPosition(SettingsData.Position.Right)
+                return
+            }
+            if (dankBarPosition === SettingsData.Position.Right) {
+                setDockPosition(SettingsData.Position.Left)
+                return
+            }
+        }
         saveSettings()
     }
 
@@ -964,6 +1028,11 @@ Singleton {
         saveSettings()
     }
 
+    function setdockOpenOnOverview(enabled) {
+        dockOpenOnOverview = enabled
+        saveSettings()
+    }
+
     function setCornerRadius(radius) {
         cornerRadius = radius
         saveSettings()
@@ -974,23 +1043,23 @@ Singleton {
         saveSettings()
     }
 
-    function setTopBarAutoHide(enabled) {
+    function setDankBarAutoHide(enabled) {
-        topBarAutoHide = enabled
+        dankBarAutoHide = enabled
         saveSettings()
     }
 
-    function setTopBarOpenOnOverview(enabled) {
+    function setDankBarOpenOnOverview(enabled) {
-        topBarOpenOnOverview = enabled
+        dankBarOpenOnOverview = enabled
         saveSettings()
     }
 
-    function setTopBarVisible(visible) {
+    function setDankBarVisible(visible) {
-        topBarVisible = visible
+        dankBarVisible = visible
         saveSettings()
     }
 
-    function toggleTopBarVisible() {
+    function toggleDankBarVisible() {
-        topBarVisible = !topBarVisible
+        dankBarVisible = !dankBarVisible
         saveSettings()
     }
 
@@ -1009,36 +1078,162 @@ Singleton {
         saveSettings()
     }
 
-    function setTopBarSpacing(spacing) {
+    function setNotificationPopupPosition(position) {
-        topBarSpacing = spacing
+        notificationPopupPosition = position
         saveSettings()
     }
 
-    function setTopBarBottomGap(gap) {
+    function sendTestNotifications() {
-        topBarBottomGap = gap
+        sendTestNotification(0)
+        testNotifTimer1.start()
+        testNotifTimer2.start()
+    }
+
+    function sendTestNotification(index) {
+        const notifications = [
+            ["Notification Position Test", "DMS test notification 1 of 3 ~ Hi there!", "dialog-information"],
+            ["Second Test", "DMS Notification 2 of 3 ~ Check it out!", "emblem-default"],
+            ["Third Test", "DMS notification 3 of 3 ~ Enjoy!", "emblem-favorite"]
+        ]
+
+        if (index < 0 || index >= notifications.length) {
+            return
+        }
+
+        const notif = notifications[index]
+        testNotificationProcess.command = ["notify-send", "-h", "int:transient:1", "-a", "DMS", "-i", notif[2], notif[0], notif[1]]
+        testNotificationProcess.running = true
+    }
+
+    property Process testNotificationProcess
+
+    testNotificationProcess: Process {
+        command: []
+        running: false
+    }
+
+    property Timer testNotifTimer1
+
+    testNotifTimer1: Timer {
+        interval: 400
+        repeat: false
+        onTriggered: sendTestNotification(1)
+    }
+
+    property Timer testNotifTimer2
+
+    testNotifTimer2: Timer {
+        interval: 800
+        repeat: false
+        onTriggered: sendTestNotification(2)
+    }
+
+    function setDankBarSpacing(spacing) {
+        dankBarSpacing = spacing
         saveSettings()
     }
 
-    function setTopBarInnerPadding(padding) {
+    function setDankBarBottomGap(gap) {
-        topBarInnerPadding = padding
+        dankBarBottomGap = gap
         saveSettings()
     }
 
-    function setTopBarSquareCorners(enabled) {
+    function setDankBarInnerPadding(padding) {
-        topBarSquareCorners = enabled
+        dankBarInnerPadding = padding
         saveSettings()
     }
 
-    function setTopBarNoBackground(enabled) {
+    function setDankBarSquareCorners(enabled) {
-        topBarNoBackground = enabled
+        dankBarSquareCorners = enabled
         saveSettings()
     }
 
-    function setTopBarGothCornersEnabled(enabled) {
+    function setDankBarNoBackground(enabled) {
-        topBarGothCornersEnabled = enabled
+        dankBarNoBackground = enabled
         saveSettings()
     }
 
+    function setDankBarGothCornersEnabled(enabled) {
+        dankBarGothCornersEnabled = enabled
+        saveSettings()
+    }
+
+    function setDankBarPosition(position) {
+        dankBarPosition = position
+        if (position === SettingsData.Position.Bottom && dockPosition === SettingsData.Position.Bottom && showDock) {
+            setDockPosition(SettingsData.Position.Top)
+            return
+        }
+        if (position === SettingsData.Position.Top && dockPosition === SettingsData.Position.Top && showDock) {
+            setDockPosition(SettingsData.Position.Bottom)
+            return
+        }
+        if (position === SettingsData.Position.Left && dockPosition === SettingsData.Position.Left && showDock) {
+            setDockPosition(SettingsData.Position.Right)
+            return
+        }
+        if (position === SettingsData.Position.Right && dockPosition === SettingsData.Position.Right && showDock) {
+            setDockPosition(SettingsData.Position.Left)
+            return
+        }
+        saveSettings()
+    }
+
+    function setDockPosition(position) {
+        dockPosition = position
+        if (position === SettingsData.Position.Bottom && dankBarPosition === SettingsData.Position.Bottom && showDock) {
+            setDankBarPosition(SettingsData.Position.Top)
+        }
+        if (position === SettingsData.Position.Top && dankBarPosition === SettingsData.Position.Top && showDock) {
+            setDankBarPosition(SettingsData.Position.Bottom)
+        }
+        if (position === SettingsData.Position.Left && dankBarPosition === SettingsData.Position.Left && showDock) {
+            setDankBarPosition(SettingsData.Position.Right)
+        }
+        if (position === SettingsData.Position.Right && dankBarPosition === SettingsData.Position.Right && showDock) {
+            setDankBarPosition(SettingsData.Position.Left)
+        }
+        saveSettings()
+        Qt.callLater(() => forceDockLayoutRefresh())
+    }
+    function setDockSpacing(spacing) {
+        dockSpacing = spacing
+        saveSettings()
+    }
+    function setDockBottomGap(gap) {
+        dockBottomGap = gap
+        saveSettings()
+    }
+    function setDockOpenOnOverview(enabled) {
+        dockOpenOnOverview = enabled
+        saveSettings()
+    }
+
+    function getPopupYPosition(barHeight) {
+        const gothOffset = dankBarGothCornersEnabled ? Theme.cornerRadius : 0
+        return barHeight + dankBarSpacing + dankBarBottomGap - gothOffset + Theme.popupDistance
+    }
+
+    function getPopupTriggerPosition(globalPos, screen, barThickness, widgetWidth) {
+        const screenX = screen ? screen.x : 0
+        const screenY = screen ? screen.y : 0
+        const relativeX = globalPos.x - screenX
+        const relativeY = globalPos.y - screenY
+
+        if (dankBarPosition === SettingsData.Position.Left || dankBarPosition === SettingsData.Position.Right) {
+            return {
+                x: relativeY,
+                y: barThickness + dankBarSpacing + Theme.popupDistance,
+                width: widgetWidth
+            }
+        }
+        return {
+            x: relativeX,
+            y: barThickness + dankBarSpacing + dankBarBottomGap + Theme.popupDistance,
+            width: widgetWidth
+        }
+    }
+
     function setLockScreenShowPowerActions(enabled) {
         lockScreenShowPowerActions = enabled
         saveSettings()
@@ -1075,15 +1270,49 @@ Singleton {
         return Quickshell.screens.filter(screen => prefs.includes(screen.name))
     }
 
+    // Plugin settings functions
+    function getPluginSetting(pluginId, key, defaultValue) {
+        if (!pluginSettings[pluginId]) {
+            return defaultValue
+        }
+        return pluginSettings[pluginId][key] !== undefined ? pluginSettings[pluginId][key] : defaultValue
+    }
+
+    function setPluginSetting(pluginId, key, value) {
+        if (!pluginSettings[pluginId]) {
+            pluginSettings[pluginId] = {}
+        }
+        pluginSettings[pluginId][key] = value
+        saveSettings()
+    }
+
+    function removePluginSettings(pluginId) {
+        if (pluginSettings[pluginId]) {
+            delete pluginSettings[pluginId]
+            saveSettings()
+        }
+    }
+
+    function getPluginSettingsForPlugin(pluginId) {
+        return pluginSettings[pluginId] || {}
+    }
+
+    function setAnimationSpeed(speed) {
+        animationSpeed = speed
+        saveSettings()
+    }
+
     function _shq(s) {
         return "'" + String(s).replace(/'/g, "'\\''") + "'"
     }
 
     Component.onCompleted: {
+        if (!isGreeterMode) {
             loadSettings()
             fontCheckTimer.start()
             initializeListModels()
         }
+    }
 
     ListModel {
         id: leftWidgetsModel
@@ -1123,20 +1352,22 @@ Singleton {
     FileView {
         id: settingsFile
 
-        path: StandardPaths.writableLocation(StandardPaths.ConfigLocation) + "/DankMaterialShell/settings.json"
+        path: isGreeterMode ? "" : StandardPaths.writableLocation(StandardPaths.ConfigLocation) + "/DankMaterialShell/settings.json"
-        blockLoading: true
+        blockLoading: isGreeterMode
         blockWrites: true
         atomicWrites: true
-        watchChanges: true
+        watchChanges: !isGreeterMode
         onLoaded: {
+            if (!isGreeterMode) {
                 parseSettings(settingsFile.text())
                 hasTriedDefaultSettings = false
             }
+        }
         onLoadFailed: error => {
-            if (!hasTriedDefaultSettings) {
+            if (!isGreeterMode && !hasTriedDefaultSettings) {
                 hasTriedDefaultSettings = true
                 defaultSettingsCheckProcess.running = true
-            } else {
+            } else if (!isGreeterMode) {
                 applyStoredTheme()
             }
         }
@@ -1221,22 +1452,22 @@ Singleton {
 
     IpcHandler {
         function reveal(): string {
-            root.setTopBarVisible(true)
+            root.setDankBarVisible(true)
             return "BAR_SHOW_SUCCESS"
         }
 
         function hide(): string {
-            root.setTopBarVisible(false)
+            root.setDankBarVisible(false)
             return "BAR_HIDE_SUCCESS"
         }
 
         function toggle(): string {
-            root.toggleTopBarVisible()
+            root.toggleDankBarVisible()
-            return topBarVisible ? "BAR_SHOW_SUCCESS" : "BAR_HIDE_SUCCESS"
+            return root.dankBarVisible ? "BAR_SHOW_SUCCESS" : "BAR_HIDE_SUCCESS"
         }
 
         function status(): string {
-            return topBarVisible ? "visible" : "hidden"
+            return root.dankBarVisible ? "visible" : "hidden"
         }
 
         target: "bar"

Common/StockThemes.js

@@ -2,101 +2,101 @@
 // Separated from Theme.qml to keep that file clean
 
 const CatppuccinMocha = {
-    surface: "#45475a",
+    surface: "#313244",
     surfaceText: "#cdd6f4",
-    surfaceVariant: "#45475a",
+    surfaceVariant: "#313244",
     surfaceVariantText: "#a6adc8",
     background: "#1e1e2e",
     backgroundText: "#cdd6f4",
     outline: "#6c7086",
-    surfaceContainer: "#313244",
+    surfaceContainer: "#45475a",
     surfaceContainerHigh: "#585b70",
-    surfaceContainerHighest: "#7f849c"
+    surfaceContainerHighest: "#6c7086"
 }
 
 const CatppuccinLatte = {
-    surface: "#bcc0cc",
+    surface: "#e6e9ef",
     surfaceText: "#4c4f69",
-    surfaceVariant: "#bcc0cc",
+    surfaceVariant: "#e6e9ef",
     surfaceVariantText: "#6c6f85",
     background: "#eff1f5",
     backgroundText: "#4c4f69",
     outline: "#9ca0b0",
-    surfaceContainer: "#ccd0da",
+    surfaceContainer: "#dce0e8",
-    surfaceContainerHigh: "#acb0be",
+    surfaceContainerHigh: "#ccd0da",
-    surfaceContainerHighest: "#8c8fa1"
+    surfaceContainerHighest: "#bcc0cc"
 }
 
 const CatppuccinVariants = {
     "cat-rosewater": {
         name: "Rosewater",
-        dark: { primary: "#f5e0dc", secondary: "#f2cdcd", primaryText: "#1e1e2e", primaryContainer: "#8b6b5e", surfaceTint: "#f5e0dc" },
+        dark: { primary: "#f5e0dc", secondary: "#f2cdcd", primaryText: "#1e1e2e", primaryContainer: "#7d5d56", surfaceTint: "#f5e0dc" },
-        light: { primary: "#dc8a78", secondary: "#dd7878", primaryText: "#ffffff", primaryContainer: "#f4d2ca", surfaceTint: "#dc8a78" }
+        light: { primary: "#dc8a78", secondary: "#dd7878", primaryText: "#ffffff", primaryContainer: "#f6e7e3", surfaceTint: "#dc8a78" }
     },
     "cat-flamingo": {
         name: "Flamingo",
-        dark: { primary: "#f2cdcd", secondary: "#f5e0dc", primaryText: "#1e1e2e", primaryContainer: "#885d62", surfaceTint: "#f2cdcd" },
+        dark: { primary: "#f2cdcd", secondary: "#f5e0dc", primaryText: "#1e1e2e", primaryContainer: "#7a555a", surfaceTint: "#f2cdcd" },
-        light: { primary: "#dd7878", secondary: "#dc8a78", primaryText: "#ffffff", primaryContainer: "#f4caca", surfaceTint: "#dd7878" }
+        light: { primary: "#dd7878", secondary: "#dc8a78", primaryText: "#ffffff", primaryContainer: "#f6e5e5", surfaceTint: "#dd7878" }
     },
     "cat-pink": {
         name: "Pink",
-        dark: { primary: "#f5c2e7", secondary: "#cba6f7", primaryText: "#1e1e2e", primaryContainer: "#8b537a", surfaceTint: "#f5c2e7" },
+        dark: { primary: "#f5c2e7", secondary: "#cba6f7", primaryText: "#1e1e2e", primaryContainer: "#7a3f69", surfaceTint: "#f5c2e7" },
-        light: { primary: "#ea76cb", secondary: "#8839ef", primaryText: "#ffffff", primaryContainer: "#f7c9e7", surfaceTint: "#ea76cb" }
+        light: { primary: "#ea76cb", secondary: "#8839ef", primaryText: "#ffffff", primaryContainer: "#f7d7ee", surfaceTint: "#ea76cb" }
     },
     "cat-mauve": {
         name: "Mauve",
-        dark: { primary: "#cba6f7", secondary: "#b4befe", primaryText: "#1e1e2e", primaryContainer: "#61378a", surfaceTint: "#cba6f7" },
+        dark: { primary: "#cba6f7", secondary: "#b4befe", primaryText: "#1e1e2e", primaryContainer: "#55307f", surfaceTint: "#cba6f7" },
-        light: { primary: "#8839ef", secondary: "#7287fd", primaryText: "#ffffff", primaryContainer: "#e4d3ff", surfaceTint: "#8839ef" }
+        light: { primary: "#8839ef", secondary: "#7287fd", primaryText: "#ffffff", primaryContainer: "#eadcff", surfaceTint: "#8839ef" }
     },
     "cat-red": {
         name: "Red",
-        dark: { primary: "#f38ba8", secondary: "#eba0ac", primaryText: "#1e1e2e", primaryContainer: "#891c3b", surfaceTint: "#f38ba8" },
+        dark: { primary: "#f38ba8", secondary: "#eba0ac", primaryText: "#1e1e2e", primaryContainer: "#6f2438", surfaceTint: "#f38ba8" },
-        light: { primary: "#d20f39", secondary: "#e64553", primaryText: "#ffffff", primaryContainer: "#f1b8c4", surfaceTint: "#d20f39" }
+        light: { primary: "#d20f39", secondary: "#e64553", primaryText: "#ffffff", primaryContainer: "#f6d0d6", surfaceTint: "#d20f39" }
     },
     "cat-maroon": {
         name: "Maroon",
-        dark: { primary: "#eba0ac", secondary: "#f38ba8", primaryText: "#1e1e2e", primaryContainer: "#81313f", surfaceTint: "#eba0ac" },
+        dark: { primary: "#eba0ac", secondary: "#f38ba8", primaryText: "#1e1e2e", primaryContainer: "#6d3641", surfaceTint: "#eba0ac" },
-        light: { primary: "#e64553", secondary: "#d20f39", primaryText: "#ffffff", primaryContainer: "#f4c3c8", surfaceTint: "#e64553" }
+        light: { primary: "#e64553", secondary: "#d20f39", primaryText: "#ffffff", primaryContainer: "#f7d8dc", surfaceTint: "#e64553" }
     },
     "cat-peach": {
         name: "Peach",
-        dark: { primary: "#fab387", secondary: "#f9e2af", primaryText: "#1e1e2e", primaryContainer: "#90441a", surfaceTint: "#fab387" },
+        dark: { primary: "#fab387", secondary: "#f9e2af", primaryText: "#1e1e2e", primaryContainer: "#734226", surfaceTint: "#fab387" },
-        light: { primary: "#fe640b", secondary: "#df8e1d", primaryText: "#ffffff", primaryContainer: "#ffddcc", surfaceTint: "#fe640b" }
+        light: { primary: "#fe640b", secondary: "#df8e1d", primaryText: "#ffffff", primaryContainer: "#ffe4d5", surfaceTint: "#fe640b" }
     },
     "cat-yellow": {
         name: "Yellow",
-        dark: { primary: "#f9e2af", secondary: "#a6e3a1", primaryText: "#1e1e2e", primaryContainer: "#8f7342", surfaceTint: "#f9e2af" },
+        dark: { primary: "#f9e2af", secondary: "#a6e3a1", primaryText: "#1e1e2e", primaryContainer: "#6e5a2f", surfaceTint: "#f9e2af" },
-        light: { primary: "#df8e1d", secondary: "#40a02b", primaryText: "#ffffff", primaryContainer: "#fff3cc", surfaceTint: "#df8e1d" }
+        light: { primary: "#df8e1d", secondary: "#40a02b", primaryText: "#ffffff", primaryContainer: "#fff6d6", surfaceTint: "#df8e1d" }
     },
     "cat-green": {
         name: "Green",
-        dark: { primary: "#a6e3a1", secondary: "#94e2d5", primaryText: "#1e1e2e", primaryContainer: "#3c7534", surfaceTint: "#a6e3a1" },
+        dark: { primary: "#a6e3a1", secondary: "#94e2d5", primaryText: "#1e1e2e", primaryContainer: "#2f5f36", surfaceTint: "#a6e3a1" },
-        light: { primary: "#40a02b", secondary: "#179299", primaryText: "#ffffff", primaryContainer: "#d4f5d4", surfaceTint: "#40a02b" }
+        light: { primary: "#40a02b", secondary: "#179299", primaryText: "#ffffff", primaryContainer: "#dff4e0", surfaceTint: "#40a02b" }
     },
     "cat-teal": {
         name: "Teal",
-        dark: { primary: "#94e2d5", secondary: "#89dceb", primaryText: "#1e1e2e", primaryContainer: "#2a7468", surfaceTint: "#94e2d5" },
+        dark: { primary: "#94e2d5", secondary: "#89dceb", primaryText: "#1e1e2e", primaryContainer: "#2e5e59", surfaceTint: "#94e2d5" },
-        light: { primary: "#179299", secondary: "#04a5e5", primaryText: "#ffffff", primaryContainer: "#ccf2f2", surfaceTint: "#179299" }
+        light: { primary: "#179299", secondary: "#04a5e5", primaryText: "#ffffff", primaryContainer: "#daf3f1", surfaceTint: "#179299" }
     },
     "cat-sky": {
         name: "Sky",
-        dark: { primary: "#89dceb", secondary: "#74c7ec", primaryText: "#1e1e2e", primaryContainer: "#196e7e", surfaceTint: "#89dceb" },
+        dark: { primary: "#89dceb", secondary: "#74c7ec", primaryText: "#1e1e2e", primaryContainer: "#24586a", surfaceTint: "#89dceb" },
-        light: { primary: "#04a5e5", secondary: "#209fb5", primaryText: "#ffffff", primaryContainer: "#ccebff", surfaceTint: "#04a5e5" }
+        light: { primary: "#04a5e5", secondary: "#209fb5", primaryText: "#ffffff", primaryContainer: "#dbf1fb", surfaceTint: "#04a5e5" }
     },
     "cat-sapphire": {
         name: "Sapphire",
-        dark: { primary: "#74c7ec", secondary: "#89b4fa", primaryText: "#1e1e2e", primaryContainer: "#0a597f", surfaceTint: "#74c7ec" },
+        dark: { primary: "#74c7ec", secondary: "#89b4fa", primaryText: "#1e1e2e", primaryContainer: "#1f4d6f", surfaceTint: "#74c7ec" },
-        light: { primary: "#209fb5", secondary: "#1e66f5", primaryText: "#ffffff", primaryContainer: "#d0f0f5", surfaceTint: "#209fb5" }
+        light: { primary: "#209fb5", secondary: "#1e66f5", primaryText: "#ffffff", primaryContainer: "#def3f8", surfaceTint: "#209fb5" }
     },
     "cat-blue": {
         name: "Blue",
-        dark: { primary: "#89b4fa", secondary: "#b4befe", primaryText: "#1e1e2e", primaryContainer: "#19468d", surfaceTint: "#89b4fa" },
+        dark: { primary: "#89b4fa", secondary: "#b4befe", primaryText: "#1e1e2e", primaryContainer: "#243f75", surfaceTint: "#89b4fa" },
-        light: { primary: "#1e66f5", secondary: "#7287fd", primaryText: "#ffffff", primaryContainer: "#ccd9ff", surfaceTint: "#1e66f5" }
+        light: { primary: "#1e66f5", secondary: "#7287fd", primaryText: "#ffffff", primaryContainer: "#e0e9ff", surfaceTint: "#1e66f5" }
     },
     "cat-lavender": {
         name: "Lavender",
-        dark: { primary: "#b4befe", secondary: "#cba6f7", primaryText: "#1e1e2e", primaryContainer: "#4a5091", surfaceTint: "#b4befe" },
+        dark: { primary: "#b4befe", secondary: "#cba6f7", primaryText: "#1e1e2e", primaryContainer: "#3f4481", surfaceTint: "#b4befe" },
-        light: { primary: "#7287fd", secondary: "#8839ef", primaryText: "#ffffff", primaryContainer: "#dde1ff", surfaceTint: "#7287fd" }
+        light: { primary: "#7287fd", secondary: "#8839ef", primaryText: "#ffffff", primaryContainer: "#e5e8ff", surfaceTint: "#7287fd" }
     }
 }
 
@@ -290,9 +290,9 @@ const StockThemes = {
             background: "#131315",
             backgroundText: "#e4e2e3",
             outline: "#929092",
-            surfaceContainer: "#2a2a2a",
+            surfaceContainer: "#353535",
-            surfaceContainerHigh: "#2a2a2b",
+            surfaceContainerHigh: "#424242",
-            surfaceContainerHighest: "#353535",
+            surfaceContainerHighest: "#505050",
             error: "#ffb4ab",
             warning: "#3f4759",
             info: "#595e6c",
@@ -476,8 +476,9 @@ const StockThemes = {
             background: "#ffffff",
             backgroundText: "#1a1a1a",
             outline: "#757577",
-            surfaceContainer: "#f5f5f6",
+            surfaceContainer: "#e8e8ea",
-            surfaceContainerHigh: "#eaeaeb",
+            surfaceContainerHigh: "#dcdcde",
+            surfaceContainerHighest: "#d0d0d2",
             error: "#ba1a1a",
             warning: "#f9e79f",
             info: "#5d6475",

Common/Theme.qml

@@ -16,11 +16,12 @@ Singleton {
 
     readonly property bool envDisableMatugen: Quickshell.env("DMS_DISABLE_MATUGEN") === "1" || Quickshell.env("DMS_DISABLE_MATUGEN") === "true"
 
-    readonly property real popupDistance: 4
+    // ! TODO - Synchronize with niri/hyprland gaps?
+    readonly property real popupDistance: 2
 
     property string currentTheme: "blue"
     property string currentThemeCategory: "generic"
-    property bool isLightMode: false
+    property bool isLightMode: typeof SessionData !== "undefined" ? SessionData.isLightMode : false
 
     readonly property string dynamic: "dynamic"
     readonly property string custom : "custom"
@@ -32,7 +33,6 @@ Singleton {
         if (typeof SessionData === "undefined") return ""
 
         if (SessionData.perMonitorWallpaper) {
-            // Use first monitor's wallpaper for dynamic theming
             var screens = Quickshell.screens
             if (screens.length > 0) {
                 var firstMonitorWallpaper = SessionData.getMonitorWallpaper(screens[0].name)
@@ -82,11 +82,20 @@ Singleton {
     Component.onCompleted: {
         Quickshell.execDetached(["mkdir", "-p", stateDir])
         matugenCheck.running = true
-        if (typeof SessionData !== "undefined")
+        if (typeof SessionData !== "undefined") {
             SessionData.isLightModeChanged.connect(root.onLightModeChanged)
+            isLightMode = SessionData.isLightMode
+        }
 
         if (typeof SettingsData !== "undefined" && SettingsData.currentThemeName) {
-            switchTheme(SettingsData.currentThemeName, false)
+            switchTheme(SettingsData.currentThemeName, false, false)
+        }
+    }
+
+    function applyGreeterTheme(themeName) {
+        switchTheme(themeName, false, false)
+        if (themeName === dynamic && dynamicColorsFileView.path) {
+            dynamicColorsFileView.reload()
         }
     }
 
@@ -232,11 +241,22 @@ Singleton {
     property color shadowMedium: Qt.rgba(0, 0, 0, 0.08)
     property color shadowStrong: Qt.rgba(0, 0, 0, 0.3)
 
-    property int shorterDuration: 100
+    readonly property var animationDurations: [
-    property int shortDuration: 150
+        { shorter: 0, short: 0, medium: 0, long: 0, extraLong: 0 },
-    property int mediumDuration: 300
+        { shorter: 50, short: 75, medium: 150, long: 250, extraLong: 500 },
-    property int longDuration: 500
+        { shorter: 100, short: 150, medium: 300, long: 500, extraLong: 1000 },
-    property int extraLongDuration: 1000
+        { shorter: 150, short: 225, medium: 450, long: 750, extraLong: 1500 },
+        { shorter: 200, short: 300, medium: 600, long: 1000, extraLong: 2000 }
+    ]
+
+    readonly property int currentAnimationSpeed: typeof SettingsData !== "undefined" ? SettingsData.animationSpeed : SettingsData.AnimationSpeed.Short
+    readonly property var currentDurations: animationDurations[currentAnimationSpeed] || animationDurations[SettingsData.AnimationSpeed.Short]
+
+    property int shorterDuration: currentDurations.shorter
+    property int shortDuration: currentDurations.short
+    property int mediumDuration: currentDurations.medium
+    property int longDuration: currentDurations.long
+    property int extraLongDuration: currentDurations.extraLong
     property int standardEasing: Easing.OutCubic
     property int emphasizedEasing: Easing.OutQuart
 
@@ -256,8 +276,8 @@ Singleton {
     property real iconSizeLarge: 32
 
     property real panelTransparency: 0.85
-    property real widgetTransparency: typeof SettingsData !== "undefined" && SettingsData.topBarWidgetTransparency !== undefined ? SettingsData.topBarWidgetTransparency : 0.85
+    property real widgetTransparency: typeof SettingsData !== "undefined" && SettingsData.dankBarWidgetTransparency !== undefined ? SettingsData.dankBarWidgetTransparency : 1.0
-    property real popupTransparency: typeof SettingsData !== "undefined" && SettingsData.popupTransparency !== undefined ? SettingsData.popupTransparency : 0.92
+    property real popupTransparency: typeof SettingsData !== "undefined" && SettingsData.popupTransparency !== undefined ? SettingsData.popupTransparency : 1.0
 
     function screenTransition() {
         CompositorService.isNiri && NiriService.doScreenTransition()
@@ -266,7 +286,12 @@ Singleton {
     function switchTheme(themeName, savePrefs = true, enableTransition = true) {
         if (enableTransition) {
             screenTransition()
+            themeTransitionTimer.themeName = themeName
+            themeTransitionTimer.savePrefs = savePrefs
+            themeTransitionTimer.restart()
+            return
         }
+
         if (themeName === dynamic) {
             currentTheme = dynamic
             currentThemeCategory = dynamic
@@ -278,34 +303,45 @@ Singleton {
             }
         } else {
             currentTheme = themeName
-            // Determine category based on theme name
             if (StockThemes.isCatppuccinVariant(themeName)) {
                 currentThemeCategory = "catppuccin"
             } else {
                 currentThemeCategory = "generic"
             }
         }
-        if (savePrefs && typeof SettingsData !== "undefined")
+        const isGreeterMode = (typeof SessionData !== "undefined" && SessionData.isGreeterMode)
+        if (savePrefs && typeof SettingsData !== "undefined" && !isGreeterMode)
             SettingsData.setTheme(currentTheme)
 
+        if (!isGreeterMode) {
             generateSystemThemesFromCurrentTheme()
         }
+    }
 
-    function setLightMode(light, savePrefs = true) {
+    function setLightMode(light, savePrefs = true, enableTransition = false) {
+        if (enableTransition) {
             screenTransition()
+            lightModeTransitionTimer.lightMode = light
+            lightModeTransitionTimer.savePrefs = savePrefs
+            lightModeTransitionTimer.restart()
+            return
+        }
+
+        const isGreeterMode = (typeof SessionData !== "undefined" && SessionData.isGreeterMode)
         isLightMode = light
-        if (savePrefs && typeof SessionData !== "undefined")
+        if (savePrefs && typeof SessionData !== "undefined" && !isGreeterMode)
             SessionData.setLightMode(isLightMode)
+        if (!isGreeterMode) {
             PortalService.setLightMode(isLightMode)
             generateSystemThemesFromCurrentTheme()
         }
+    }
 
     function toggleLightMode(savePrefs = true) {
-        setLightMode(!isLightMode, savePrefs)
+        setLightMode(!isLightMode, savePrefs, true)
     }
 
     function forceGenerateSystemThemes() {
-        screenTransition()
         if (!matugenAvailable) {
             return
         }
@@ -329,8 +365,10 @@ Singleton {
     }
 
     function switchThemeCategory(category, defaultTheme) {
-        currentThemeCategory = category
+        screenTransition()
-        switchTheme(defaultTheme, true, false)
+        themeCategoryTransitionTimer.category = category
+        themeCategoryTransitionTimer.defaultTheme = defaultTheme
+        themeCategoryTransitionTimer.restart()
     }
 
     function getCatppuccinColor(variantName) {
@@ -354,7 +392,6 @@ Singleton {
     }
 
     function loadCustomTheme(themeData) {
-        screenTransition()
         if (themeData.dark || themeData.light) {
             const colorMode = (typeof SessionData !== "undefined" && SessionData.isLightMode) ? "light" : "dark"
             const selectedTheme = themeData[colorMode] || themeData.dark || themeData.light
@@ -574,7 +611,8 @@ Singleton {
     }
 
     function generateSystemThemesFromCurrentTheme() {
-        if (!matugenAvailable)
+        const isGreeterMode = (typeof SessionData !== "undefined" && SessionData.isGreeterMode)
+        if (!matugenAvailable || isGreeterMode)
             return
 
         const isLight = (typeof SessionData !== "undefined" && SessionData.isLightMode)
@@ -638,14 +676,16 @@ Singleton {
         qtApplier.running = true
     }
 
+    function withAlpha(c, a) { return Qt.rgba(c.r, c.g, c.b, a); }
 
     Process {
         id: matugenCheck
         command: ["which", "matugen"]
         onExited: code => {
             matugenAvailable = (code === 0) && !envDisableMatugen
-            if (!matugenAvailable) {
+            const isGreeterMode = (typeof SessionData !== "undefined" && SessionData.isGreeterMode)
-                console.log("matugen not not available in path or disabled via DMS_DISABLE_MATUGEN")
+
+            if (!matugenAvailable || isGreeterMode) {
                 return
             }
 
@@ -696,10 +736,7 @@ Singleton {
         onExited: exitCode => {
             workerRunning = false
 
-            if (exitCode === 2) {
+            if (exitCode !== 0 && exitCode !== 2) {
-                // Exit code 2 means wallpaper/color not found - this is expected on first run
-                console.log("Theme worker: wallpaper/color not found, skipping theme generation")
-            } else if (exitCode !== 0) {
                 if (typeof ToastService !== "undefined") {
                     ToastService.showError("Theme worker failed (" + exitCode + ")")
                 }
@@ -788,8 +825,14 @@ Singleton {
 
     FileView {
         id: dynamicColorsFileView
-        path: stateDir + "/dms-colors.json"
+        path: {
-        watchChanges: currentTheme === dynamic
+            const greetCfgDir = Quickshell.env("DMS_GREET_CFG_DIR") || "/etc/greetd/.dms"
+            const colorsPath = SessionData.isGreeterMode
+                ? greetCfgDir + "/colors.json"
+                : stateDir + "/dms-colors.json"
+            return colorsPath
+        }
+        watchChanges: currentTheme === dynamic && !SessionData.isGreeterMode
 
         function parseAndLoadColors() {
             try {
@@ -802,6 +845,7 @@ Singleton {
                     }
                 }
             } catch (e) {
+                console.error("Theme: Failed to parse dynamic colors:", e)
                 if (typeof ToastService !== "undefined") {
                     ToastService.wallpaperErrorStatus = "error"
                     ToastService.showError("Dynamic colors parse error: " + e.message)
@@ -837,12 +881,12 @@ Singleton {
         }
 
         function light(): string {
-            root.setLightMode(true)
+            root.setLightMode(true, true, true)
             return "light"
         }
 
         function dark(): string {
-            root.setLightMode(false)
+            root.setLightMode(false, true, true)
             return "dark"
         }
 
@@ -850,4 +894,35 @@ Singleton {
             return root.isLightMode ? "light" : "dark"
         }
     }
+
+    // These timers are for screen transitions, since sometimes QML still beats the niri call
+    Timer {
+        id: themeTransitionTimer
+        interval: 50
+        repeat: false
+        property string themeName: ""
+        property bool savePrefs: true
+        onTriggered: root.switchTheme(themeName, savePrefs, false)
+    }
+
+    Timer {
+        id: lightModeTransitionTimer
+        interval: 100
+        repeat: false
+        property bool lightMode: false
+        property bool savePrefs: true
+        onTriggered: root.setLightMode(lightMode, savePrefs, false)
+    }
+
+    Timer {
+        id: themeCategoryTransitionTimer
+        interval: 50
+        repeat: false
+        property string category: ""
+        property string defaultTheme: ""
+        onTriggered: {
+            root.currentThemeCategory = category
+            root.switchTheme(defaultTheme, true, false)
+        }
+    }
 }

DMSGreeter.qml

@@ -0,0 +1,25 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Services.Greetd
+import qs.Common
+import qs.Modules.Greetd
+
+ShellRoot {
+    id: root
+
+    WlSessionLock {
+        id: sessionLock
+        locked: true
+
+        onLockedChanged: {
+            if (!locked) {
+                console.log("Greetd session unlocked, exiting")
+            }
+        }
+
+        GreeterSurface {
+            lock: sessionLock
+        }
+    }
+}

DMSShell.qml

@@ -0,0 +1,641 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import qs.Common
+import qs.Modals
+import qs.Modals.Clipboard
+import qs.Modals.Common
+import qs.Modals.Settings
+import qs.Modals.Spotlight
+import qs.Modules
+import qs.Modules.AppDrawer
+import qs.Modules.DankDash
+import qs.Modules.ControlCenter
+import qs.Modules.Dock
+import qs.Modules.Lock
+import qs.Modules.Notepad
+import qs.Modules.Notifications.Center
+import qs.Widgets
+import qs.Modules.Notifications.Popup
+import qs.Modules.OSD
+import qs.Modules.ProcessList
+import qs.Modules.Settings
+import qs.Modules.DankBar
+import qs.Modules.DankBar.Popouts
+import qs.Modules.Plugins
+import qs.Services
+
+
+Item {
+  Component.onCompleted: {
+    PortalService.init()
+    // Initialize DisplayService night mode functionality
+    DisplayService.nightModeEnabled
+    // Initialize WallpaperCyclingService
+    WallpaperCyclingService.cyclingActive
+    // Initialize PluginService by accessing its properties
+    PluginService.pluginDirectory
+  }
+
+  WallpaperBackground {}
+
+  Lock {
+      id: lock
+
+      anchors.fill: parent
+  }
+
+  Loader {
+      id: dankBarLoader
+      asynchronous: false
+
+      property var currentPosition: SettingsData.dankBarPosition
+
+      sourceComponent: DankBar {
+          onColorPickerRequested: colorPickerModal.show()
+      }
+
+      onCurrentPositionChanged: {
+          const component = sourceComponent
+          sourceComponent = null
+          Qt.callLater(() => {
+              sourceComponent = component
+          })
+      }
+  }
+
+  Loader {
+      id: dockLoader
+      active: true
+      asynchronous: false
+
+      property var currentPosition: SettingsData.dockPosition
+
+      sourceComponent: Dock {
+          contextMenu: dockContextMenuLoader.item ? dockContextMenuLoader.item : null
+      }
+
+      onLoaded: {
+          if (item) {
+              dockContextMenuLoader.active = true
+          }
+      }
+
+      onCurrentPositionChanged: {
+          console.log("DEBUG: Dock position changed to:", currentPosition, "- recreating dock")
+          const comp = sourceComponent
+          sourceComponent = null
+          Qt.callLater(() => {
+              sourceComponent = comp
+          })
+      }
+  }
+
+  Loader {
+      id: dankDashPopoutLoader
+
+      active: false
+      asynchronous: true
+
+      sourceComponent: Component {
+          DankDashPopout {
+              id: dankDashPopout
+          }
+      }
+  }
+
+  LazyLoader {
+      id: dockContextMenuLoader
+
+      active: false
+
+      DockContextMenu {
+          id: dockContextMenu
+      }
+  }
+
+  LazyLoader {
+      id: notificationCenterLoader
+
+      active: false
+
+      NotificationCenterPopout {
+          id: notificationCenter
+      }
+  }
+
+  Variants {
+      model: SettingsData.getFilteredScreens("notifications")
+
+      delegate: NotificationPopupManager {
+          modelData: item
+      }
+  }
+
+  LazyLoader {
+      id: controlCenterLoader
+
+      active: false
+
+      property var modalRef: colorPickerModal
+
+      ControlCenterPopout {
+          id: controlCenterPopout
+          colorPickerModal: controlCenterLoader.modalRef
+
+          onPowerActionRequested: (action, title, message) => {
+                                      powerConfirmModalLoader.active = true
+                                      if (powerConfirmModalLoader.item) {
+                                          powerConfirmModalLoader.item.confirmButtonColor = action === "poweroff" ? Theme.error : action === "reboot" ? Theme.warning : Theme.primary
+                                          powerConfirmModalLoader.item.show(title, message, function () {
+                                              switch (action) {
+                                              case "logout":
+                                                  SessionService.logout()
+                                                  break
+                                              case "suspend":
+                                                  SessionService.suspend()
+                                                  break
+                                              case "hibernate":
+                                                  SessionService.hibernate()
+                                                  break
+                                              case "reboot":
+                                                  SessionService.reboot()
+                                                  break
+                                              case "poweroff":
+                                                  SessionService.poweroff()
+                                                  break
+                                              }
+                                          }, function () {})
+                                      }
+                                  }
+          onLockRequested: {
+              lock.activate()
+          }
+      }
+  }
+
+  LazyLoader {
+      id: wifiPasswordModalLoader
+
+      active: false
+
+      WifiPasswordModal {
+          id: wifiPasswordModal
+      }
+  }
+
+  LazyLoader {
+      id: networkInfoModalLoader
+
+      active: false
+
+      NetworkInfoModal {
+          id: networkInfoModal
+      }
+  }
+
+  LazyLoader {
+      id: batteryPopoutLoader
+
+      active: false
+
+      BatteryPopout {
+          id: batteryPopout
+      }
+  }
+
+  LazyLoader {
+      id: vpnPopoutLoader
+
+      active: false
+
+      VpnPopout {
+          id: vpnPopout
+      }
+  }
+
+  LazyLoader {
+      id: powerMenuLoader
+
+      active: false
+
+      PowerMenu {
+          id: powerMenu
+
+          onPowerActionRequested: (action, title, message) => {
+                                      powerConfirmModalLoader.active = true
+                                      if (powerConfirmModalLoader.item) {
+                                          powerConfirmModalLoader.item.confirmButtonColor = action === "poweroff" ? Theme.error : action === "reboot" ? Theme.warning : Theme.primary
+                                          powerConfirmModalLoader.item.show(title, message, function () {
+                                              switch (action) {
+                                              case "logout":
+                                                  SessionService.logout()
+                                                  break
+                                              case "suspend":
+                                                  SessionService.suspend()
+                                                  break
+                                              case "hibernate":
+                                                  SessionService.hibernate()
+                                                  break
+                                              case "reboot":
+                                                  SessionService.reboot()
+                                                  break
+                                              case "poweroff":
+                                                  SessionService.poweroff()
+                                                  break
+                                              }
+                                          }, function () {})
+                                      }
+                                  }
+      }
+  }
+
+  LazyLoader {
+      id: powerConfirmModalLoader
+
+      active: false
+
+      ConfirmModal {
+          id: powerConfirmModal
+      }
+  }
+
+  LazyLoader {
+      id: processListPopoutLoader
+
+      active: false
+
+      ProcessListPopout {
+          id: processListPopout
+      }
+  }
+
+  SettingsModal {
+      id: settingsModal
+  }
+
+  LazyLoader {
+      id: appDrawerLoader
+
+      active: false
+
+      AppDrawerPopout {
+          id: appDrawerPopout
+      }
+  }
+
+  SpotlightModal {
+      id: spotlightModal
+  }
+
+  ClipboardHistoryModal {
+      id: clipboardHistoryModalPopup
+  }
+
+  NotificationModal {
+      id: notificationModal
+  }
+  ColorPickerModal {
+      id: colorPickerModal
+  }
+
+  LazyLoader {
+      id: processListModalLoader
+
+      active: false
+
+      ProcessListModal {
+          id: processListModal
+      }
+  }
+
+  LazyLoader {
+      id: systemUpdateLoader
+
+      active: false
+
+      SystemUpdatePopout {
+          id: systemUpdatePopout
+      }
+  }
+
+  Variants {
+      id: notepadSlideoutVariants
+      model: SettingsData.getFilteredScreens("notepad")
+
+      delegate: DankSlideout {
+          id: notepadSlideout
+          modelData: item
+          title: qsTr("Notepad")
+          slideoutWidth: 480
+          expandable: true
+          expandedWidthValue: 960
+          customTransparency: SettingsData.notepadTransparencyOverride
+
+          content: Component {
+              Notepad {
+                  onHideRequested: {
+                      notepadSlideout.hide()
+                  }
+              }
+          }
+
+          function toggle() {
+              if (isVisible) {
+                  hide()
+              } else {
+                  show()
+              }
+          }
+      }
+  }
+
+  LazyLoader {
+      id: powerMenuModalLoader
+
+      active: false
+
+      PowerMenuModal {
+          id: powerMenuModal
+
+          onPowerActionRequested: (action, title, message) => {
+                                      powerConfirmModalLoader.active = true
+                                      if (powerConfirmModalLoader.item) {
+                                          powerConfirmModalLoader.item.confirmButtonColor = action === "poweroff" ? Theme.error : action === "reboot" ? Theme.warning : Theme.primary
+                                          powerConfirmModalLoader.item.show(title, message, function () {
+                                              switch (action) {
+                                              case "logout":
+                                                  SessionService.logout()
+                                                  break
+                                              case "suspend":
+                                                  SessionService.suspend()
+                                                  break
+                                              case "hibernate":
+                                                  SessionService.hibernate()
+                                                  break
+                                              case "reboot":
+                                                  SessionService.reboot()
+                                                  break
+                                              case "poweroff":
+                                                  SessionService.poweroff()
+                                                  break
+                                              }
+                                          }, function () {})
+                                      }
+                                  }
+      }
+  }
+
+  IpcHandler {
+      function open() {
+          powerMenuModalLoader.active = true
+          if (powerMenuModalLoader.item)
+              powerMenuModalLoader.item.open()
+
+          return "POWERMENU_OPEN_SUCCESS"
+      }
+
+      function close() {
+          if (powerMenuModalLoader.item)
+              powerMenuModalLoader.item.close()
+
+          return "POWERMENU_CLOSE_SUCCESS"
+      }
+
+      function toggle() {
+          powerMenuModalLoader.active = true
+          if (powerMenuModalLoader.item)
+              powerMenuModalLoader.item.toggle()
+
+          return "POWERMENU_TOGGLE_SUCCESS"
+      }
+
+      target: "powermenu"
+  }
+
+  IpcHandler {
+      function open(): string {
+          processListModalLoader.active = true
+          if (processListModalLoader.item)
+              processListModalLoader.item.show()
+
+          return "PROCESSLIST_OPEN_SUCCESS"
+      }
+
+      function close(): string {
+          if (processListModalLoader.item)
+              processListModalLoader.item.hide()
+
+          return "PROCESSLIST_CLOSE_SUCCESS"
+      }
+
+      function toggle(): string {
+          processListModalLoader.active = true
+          if (processListModalLoader.item)
+              processListModalLoader.item.toggle()
+
+          return "PROCESSLIST_TOGGLE_SUCCESS"
+      }
+
+      target: "processlist"
+  }
+
+  IpcHandler {
+      function open(): string {
+          controlCenterLoader.active = true
+          if (controlCenterLoader.item) {
+              controlCenterLoader.item.open()
+              return "CONTROL_CENTER_OPEN_SUCCESS"
+          }
+          return "CONTROL_CENTER_OPEN_FAILED"
+      }
+
+      function close(): string {
+          if (controlCenterLoader.item) {
+              controlCenterLoader.item.close()
+              return "CONTROL_CENTER_CLOSE_SUCCESS"
+          }
+          return "CONTROL_CENTER_CLOSE_FAILED"
+      }
+
+      function toggle(): string {
+          controlCenterLoader.active = true
+          if (controlCenterLoader.item) {
+              controlCenterLoader.item.toggle()
+              return "CONTROL_CENTER_TOGGLE_SUCCESS"
+          }
+          return "CONTROL_CENTER_TOGGLE_FAILED"
+      }
+
+      target: "control-center"
+  }
+
+  IpcHandler {
+      function open(tab: string): string {
+          dankDashPopoutLoader.active = true
+          if (dankDashPopoutLoader.item) {
+              switch (tab.toLowerCase()) {
+              case "media":
+                  dankDashPopoutLoader.item.currentTabIndex = 1
+                  break
+              case "weather":
+                  dankDashPopoutLoader.item.currentTabIndex = SettingsData.weatherEnabled ? 2 : 0
+                  break
+              default:
+                  dankDashPopoutLoader.item.currentTabIndex = 0
+                  break
+              }
+              dankDashPopoutLoader.item.setTriggerPosition(Screen.width / 2, Theme.barHeight + Theme.spacingS, 100, "center", Screen)
+              dankDashPopoutLoader.item.dashVisible = true
+              return "DASH_OPEN_SUCCESS"
+          }
+          return "DASH_OPEN_FAILED"
+      }
+
+      function close(): string {
+          if (dankDashPopoutLoader.item) {
+              dankDashPopoutLoader.item.dashVisible = false
+              return "DASH_CLOSE_SUCCESS"
+          }
+          return "DASH_CLOSE_FAILED"
+      }
+
+      function toggle(tab: string): string {
+          dankDashPopoutLoader.active = true
+          if (dankDashPopoutLoader.item) {
+              if (dankDashPopoutLoader.item.dashVisible) {
+                  dankDashPopoutLoader.item.dashVisible = false
+              } else {
+                  switch (tab.toLowerCase()) {
+                  case "media":
+                      dankDashPopoutLoader.item.currentTabIndex = 1
+                      break
+                  case "weather":
+                      dankDashPopoutLoader.item.currentTabIndex = SettingsData.weatherEnabled ? 2 : 0
+                      break
+                  default:
+                      dankDashPopoutLoader.item.currentTabIndex = 0
+                      break
+                  }
+                  dankDashPopoutLoader.item.setTriggerPosition(Screen.width / 2, Theme.barHeight + Theme.spacingS, 100, "center", Screen)
+                  dankDashPopoutLoader.item.dashVisible = true
+              }
+              return "DASH_TOGGLE_SUCCESS"
+          }
+          return "DASH_TOGGLE_FAILED"
+      }
+
+      target: "dash"
+  }
+
+  IpcHandler {
+      function getFocusedScreenName() {
+          if (CompositorService.isHyprland && Hyprland.focusedWorkspace && Hyprland.focusedWorkspace.monitor) {
+              return Hyprland.focusedWorkspace.monitor.name
+          }
+          if (CompositorService.isNiri && NiriService.currentOutput) {
+              return NiriService.currentOutput
+          }
+          return ""
+      }
+
+      function getActiveNotepadInstance() {
+          if (notepadSlideoutVariants.instances.length === 0) {
+              return null
+          }
+
+          if (notepadSlideoutVariants.instances.length === 1) {
+              return notepadSlideoutVariants.instances[0]
+          }
+
+          var focusedScreen = getFocusedScreenName()
+          if (focusedScreen && notepadSlideoutVariants.instances.length > 0) {
+              for (var i = 0; i < notepadSlideoutVariants.instances.length; i++) {
+                  var slideout = notepadSlideoutVariants.instances[i]
+                  if (slideout.modelData && slideout.modelData.name === focusedScreen) {
+                      return slideout
+                  }
+              }
+          }
+
+          for (var i = 0; i < notepadSlideoutVariants.instances.length; i++) {
+              var slideout = notepadSlideoutVariants.instances[i]
+              if (slideout.isVisible) {
+                  return slideout
+              }
+          }
+
+          return notepadSlideoutVariants.instances[0]
+      }
+
+      function open(): string {
+          var instance = getActiveNotepadInstance()
+          if (instance) {
+              instance.show()
+              return "NOTEPAD_OPEN_SUCCESS"
+          }
+          return "NOTEPAD_OPEN_FAILED"
+      }
+
+      function close(): string {
+          var instance = getActiveNotepadInstance()
+          if (instance) {
+              instance.hide()
+              return "NOTEPAD_CLOSE_SUCCESS"
+          }
+          return "NOTEPAD_CLOSE_FAILED"
+      }
+
+      function toggle(): string {
+          var instance = getActiveNotepadInstance()
+          if (instance) {
+              instance.toggle()
+              return "NOTEPAD_TOGGLE_SUCCESS"
+          }
+          return "NOTEPAD_TOGGLE_FAILED"
+      }
+
+      target: "notepad"
+  }
+
+  Variants {
+      model: SettingsData.getFilteredScreens("toast")
+
+      delegate: Toast {
+          modelData: item
+          visible: ToastService.toastVisible
+      }
+  }
+
+  Variants {
+      model: SettingsData.getFilteredScreens("osd")
+
+      delegate: VolumeOSD {
+          modelData: item
+      }
+  }
+
+  Variants {
+      model: SettingsData.getFilteredScreens("osd")
+
+      delegate: MicMuteOSD {
+          modelData: item
+      }
+  }
+
+  Variants {
+      model: SettingsData.getFilteredScreens("osd")
+
+      delegate: BrightnessOSD {
+          modelData: item
+      }
+  }
+
+  Variants {
+      model: SettingsData.getFilteredScreens("osd")
+
+      delegate: IdleInhibitorOSD {
+          modelData: item
+      }
+  }
+}

Modals/Clipboard/ClipboardKeyboardController.qml

@@ -53,7 +53,7 @@ QtObject {
                 modal.hide()
                 event.accepted = true
             }
-        } else if (event.key === Qt.Key_Down) {
+        } else if (event.key === Qt.Key_Down || event.key === Qt.Key_Tab) {
             if (!modal.keyboardNavigationActive) {
                 modal.keyboardNavigationActive = true
                 modal.selectedIndex = 0
@@ -62,7 +62,7 @@ QtObject {
                 selectNext()
                 event.accepted = true
             }
-        } else if (event.key === Qt.Key_Up) {
+        } else if (event.key === Qt.Key_Up || event.key === Qt.Key_Backtab) {
             if (!modal.keyboardNavigationActive) {
                 modal.keyboardNavigationActive = true
                 modal.selectedIndex = 0
@@ -74,6 +74,42 @@ QtObject {
                 selectPrevious()
                 event.accepted = true
             }
+        } else if (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) {
+            if (!modal.keyboardNavigationActive) {
+                modal.keyboardNavigationActive = true
+                modal.selectedIndex = 0
+            } else {
+                selectNext()
+            }
+            event.accepted = true
+        } else if (event.key === Qt.Key_P && event.modifiers & Qt.ControlModifier) {
+            if (!modal.keyboardNavigationActive) {
+                modal.keyboardNavigationActive = true
+                modal.selectedIndex = 0
+            } else if (modal.selectedIndex === 0) {
+                modal.keyboardNavigationActive = false
+            } else {
+                selectPrevious()
+            }
+            event.accepted = true
+        } else if (event.key === Qt.Key_J && event.modifiers & Qt.ControlModifier) {
+            if (!modal.keyboardNavigationActive) {
+                modal.keyboardNavigationActive = true
+                modal.selectedIndex = 0
+            } else {
+                selectNext()
+            }
+            event.accepted = true
+        } else if (event.key === Qt.Key_K && event.modifiers & Qt.ControlModifier) {
+            if (!modal.keyboardNavigationActive) {
+                modal.keyboardNavigationActive = true
+                modal.selectedIndex = 0
+            } else if (modal.selectedIndex === 0) {
+                modal.keyboardNavigationActive = false
+            } else {
+                selectPrevious()
+            }
+            event.accepted = true
         } else if (event.key === Qt.Key_Delete && (event.modifiers & Qt.ShiftModifier)) {
             modal.clearAll()
             modal.hide()

Modals/Common/ConfirmModal.qml

@@ -93,6 +93,48 @@ DankModal {
             selectedButton = 1
             event.accepted = true
             break
+        case Qt.Key_N:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = (selectedButton + 1) % 2
+                event.accepted = true
+            }
+            break
+        case Qt.Key_P:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = selectedButton === -1 ? 1 : (selectedButton - 1 + 2) % 2
+                event.accepted = true
+            }
+            break
+        case Qt.Key_J:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = 1
+                event.accepted = true
+            }
+            break
+        case Qt.Key_K:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = 0
+                event.accepted = true
+            }
+            break
+        case Qt.Key_H:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = 0
+                event.accepted = true
+            }
+            break
+        case Qt.Key_L:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = 1
+                event.accepted = true
+            }
+            break
         case Qt.Key_Tab:
             keyboardNavigation = true
             selectedButton = selectedButton === -1 ? 0 : (selectedButton + 1) % 2

Modals/Common/DankModal.qml

@@ -22,7 +22,7 @@ PanelWindow {
     property bool closeOnEscapeKey: true
     property bool closeOnBackgroundClick: true
     property string animationType: "scale"
-    property int animationDuration: Theme.shorterDuration
+    property int animationDuration: Theme.shortDuration
     property var animationEasing: Theme.emphasizedEasing
     property color backgroundColor: Theme.surfaceContainer
     property color borderColor: Theme.outlineMedium
@@ -34,6 +34,7 @@ PanelWindow {
     property bool shouldHaveFocus: shouldBeVisible
     property bool allowFocusOverride: false
     property bool allowStacking: false
+    property bool keepContentLoaded: false
 
     signal opened
     signal dialogClosed
@@ -90,7 +91,7 @@ PanelWindow {
     Timer {
         id: closeTimer
 
-        interval: animationDuration + 50
+        interval: animationDuration + 100
         onTriggered: {
             visible = false
         }
@@ -158,7 +159,6 @@ PanelWindow {
         border.width: root.borderWidth
         layer.enabled: root.enableShadow
         opacity: root.shouldBeVisible ? 1 : 0
-        scale: root.animationType === "scale" ? (root.shouldBeVisible ? 1 : 0.9) : 1
         transform: root.animationType === "slide" ? slideTransform : null
 
         Translate {
@@ -172,7 +172,7 @@ PanelWindow {
             id: contentLoader
 
             anchors.fill: parent
-            active: root.visible
+            active: root.keepContentLoaded || root.shouldBeVisible || root.visible
             asynchronous: false
         }
 
@@ -183,15 +183,6 @@ PanelWindow {
             }
         }
 
-        Behavior on scale {
-            enabled: root.animationType === "scale"
-
-            NumberAnimation {
-                duration: root.animationDuration
-                easing.type: root.animationEasing
-            }
-        }
-
         layer.effect: MultiEffect {
             shadowEnabled: true
             shadowHorizontalOffset: 0
@@ -207,8 +198,8 @@ PanelWindow {
 
         objectName: "modalFocusScope"
         anchors.fill: parent
-        visible: root.visible // Only active when the modal is visible
+        visible: root.shouldBeVisible || root.visible
-        focus: root.visible
+        focus: root.shouldBeVisible
         Keys.onEscapePressed: event => {
                                   if (root.closeOnEscapeKey && shouldHaveFocus) {
                                       root.close()
@@ -223,7 +214,7 @@ PanelWindow {
 
         Connections {
             function onShouldHaveFocusChanged() {
-                if (shouldHaveFocus && visible) {
+                if (shouldHaveFocus && shouldBeVisible) {
                     Qt.callLater(() => focusScope.forceActiveFocus())
                 }
             }

Modals/FileBrowser/FileBrowserModal.qml

@@ -239,7 +239,12 @@ DankModal {
                 return
             }
             if (!keyboardNavigationActive) {
-                if (event.key === Qt.Key_Tab || event.key === Qt.Key_Down || event.key === Qt.Key_Right) {
+                const isInitKey = event.key === Qt.Key_Tab || event.key === Qt.Key_Down || event.key === Qt.Key_Right ||
+                                  (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) ||
+                                  (event.key === Qt.Key_J && event.modifiers & Qt.ControlModifier) ||
+                                  (event.key === Qt.Key_L && event.modifiers & Qt.ControlModifier)
+
+                if (isInitKey) {
                     keyboardNavigationActive = true
                     if (currentPath !== homeDir) {
                         backButtonFocused = true
@@ -281,6 +286,69 @@ DankModal {
                 }
                 event.accepted = true
                 break
+            case Qt.Key_N:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (backButtonFocused) {
+                        backButtonFocused = false
+                        selectedIndex = 0
+                    } else if (selectedIndex < totalItems - 1) {
+                        selectedIndex++
+                    }
+                    event.accepted = true
+                }
+                break
+            case Qt.Key_P:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (selectedIndex > 0) {
+                        selectedIndex--
+                    } else if (currentPath !== homeDir) {
+                        backButtonFocused = true
+                        selectedIndex = -1
+                    }
+                    event.accepted = true
+                }
+                break
+            case Qt.Key_J:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (selectedIndex < totalItems - 1) {
+                        selectedIndex++
+                    }
+                    event.accepted = true
+                }
+                break
+            case Qt.Key_K:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (selectedIndex > 0) {
+                        selectedIndex--
+                    } else if (currentPath !== homeDir) {
+                        backButtonFocused = true
+                        selectedIndex = -1
+                    }
+                    event.accepted = true
+                }
+                break
+            case Qt.Key_H:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (!backButtonFocused && selectedIndex > 0) {
+                        selectedIndex--
+                    } else if (currentPath !== homeDir) {
+                        backButtonFocused = true
+                        selectedIndex = -1
+                    }
+                    event.accepted = true
+                }
+                break
+            case Qt.Key_L:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (backButtonFocused) {
+                        backButtonFocused = false
+                        selectedIndex = 0
+                    } else if (selectedIndex < totalItems - 1) {
+                        selectedIndex++
+                    }
+                    event.accepted = true
+                }
+                break
             case Qt.Key_Left:
                 if (backButtonFocused)
                     return

Modals/PowerMenuModal.qml

@@ -57,13 +57,11 @@ DankModal {
     modalFocusScope.Keys.onPressed: (event) => {
         switch (event.key) {
         case Qt.Key_Up:
+        case Qt.Key_Backtab:
             selectedIndex = (selectedIndex - 1 + optionCount) % optionCount;
             event.accepted = true;
             break;
         case Qt.Key_Down:
-            selectedIndex = (selectedIndex + 1) % optionCount;
-            event.accepted = true;
-            break;
         case Qt.Key_Tab:
             selectedIndex = (selectedIndex + 1) % optionCount;
             event.accepted = true;
@@ -78,6 +76,30 @@ DankModal {
             }
             event.accepted = true;
             break;
+        case Qt.Key_N:
+            if (event.modifiers & Qt.ControlModifier) {
+                selectedIndex = (selectedIndex + 1) % optionCount;
+                event.accepted = true;
+            }
+            break;
+        case Qt.Key_P:
+            if (event.modifiers & Qt.ControlModifier) {
+                selectedIndex = (selectedIndex - 1 + optionCount) % optionCount;
+                event.accepted = true;
+            }
+            break;
+        case Qt.Key_J:
+            if (event.modifiers & Qt.ControlModifier) {
+                selectedIndex = (selectedIndex + 1) % optionCount;
+                event.accepted = true;
+            }
+            break;
+        case Qt.Key_K:
+            if (event.modifiers & Qt.ControlModifier) {
+                selectedIndex = (selectedIndex - 1 + optionCount) % optionCount;
+                event.accepted = true;
+            }
+            break;
         }
     }
 

Modals/Settings/SettingsContent.qml

@@ -67,7 +67,7 @@ Item {
             visible: active
             asynchronous: true
 
-            sourceComponent: TopBarTab {
+            sourceComponent: DankBarTab {
             }
 
         }
@@ -154,13 +154,26 @@ Item {
         }
 
         Loader {
-            id: aboutLoader
+            id: pluginsLoader
 
             anchors.fill: parent
             active: root.currentIndex === 10
             visible: active
             asynchronous: true
 
+            sourceComponent: PluginsTab {
+            }
+
+        }
+
+        Loader {
+            id: aboutLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 11
+            visible: active
+            asynchronous: true
+
             sourceComponent: AboutTab {
             }
 

Modals/Settings/SettingsModal.qml

@@ -34,7 +34,7 @@ DankModal {
 
     objectName: "settingsModal"
     width: 800
-    height: 750
+    height: 800
     visible: false
     onBackgroundClicked: () => {
         return hide();

Modals/Settings/SettingsSidebar.qml

@@ -18,7 +18,7 @@ Rectangle {
         "text": "Weather",
         "icon": "cloud"
     }, {
-        "text": "Top Bar",
+        "text": "Dank Bar",
         "icon": "toolbar"
     }, {
         "text": "Widgets",
@@ -38,6 +38,9 @@ Rectangle {
     }, {
         "text": "Power",
         "icon": "power_settings_new"
+    }, {
+        "text": "Plugins",
+        "icon": "extension"
     }, {
         "text": "About",
         "icon": "info"
@@ -83,7 +86,7 @@ Rectangle {
                 width: parent.width - Theme.spacingS * 2
                 height: 44
                 radius: Theme.cornerRadius
-                color: isActive ? Theme.primaryContainer : tabMouseArea.containsMouse ? Theme.surfaceHover : "transparent"
+                color: isActive ? Theme.primaryContainer : tabMouseArea.containsMouse ? Theme.surfaceHover : Theme.withAlpha(Theme.primaryContainer, 0)
 
                 Row {
                     anchors.left: parent.left

Modals/Spotlight/SpotlightContent.qml

@@ -33,6 +33,46 @@ Item {
                         } else if (event.key === Qt.Key_Left && appLauncher.viewMode === "grid") {
                             appLauncher.selectPreviousInRow()
                             event.accepted = true
+                        } else if (event.key == Qt.Key_J && event.modifiers & Qt.ControlModifier) {
+                            appLauncher.selectNext()
+                            event.accepted = true
+                        } else if (event.key == Qt.Key_K && event.modifiers & Qt.ControlModifier) {
+                            appLauncher.selectPrevious()
+                            event.accepted = true
+                        } else if (event.key == Qt.Key_L && event.modifiers & Qt.ControlModifier && appLauncher.viewMode === "grid") {
+                            appLauncher.selectNextInRow()
+                            event.accepted = true
+                        } else if (event.key == Qt.Key_H && event.modifiers & Qt.ControlModifier && appLauncher.viewMode === "grid") {
+                            appLauncher.selectPreviousInRow()
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Tab) {
+                            if (appLauncher.viewMode === "grid") {
+                                appLauncher.selectNextInRow()
+                            } else {
+                                appLauncher.selectNext()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Backtab) {
+                            if (appLauncher.viewMode === "grid") {
+                                appLauncher.selectPreviousInRow()
+                            } else {
+                                appLauncher.selectPrevious()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) {
+                            if (appLauncher.viewMode === "grid") {
+                                appLauncher.selectNextInRow()
+                            } else {
+                                appLauncher.selectNext()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_P && event.modifiers & Qt.ControlModifier) {
+                            if (appLauncher.viewMode === "grid") {
+                                appLauncher.selectPreviousInRow()
+                            } else {
+                                appLauncher.selectPrevious()
+                            }
+                            event.accepted = true
                         } else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
                             appLauncher.launchSelected()
                             event.accepted = true
@@ -124,7 +164,7 @@ Item {
                                         else if (appLauncher.model.count > 0)
                                         appLauncher.launchApp(appLauncher.model.get(0))
                                         event.accepted = true
-                                    } else if (event.key === Qt.Key_Down || event.key === Qt.Key_Up || event.key === Qt.Key_Left || event.key === Qt.Key_Right || ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && text.length === 0)) {
+                                    } else if (event.key === Qt.Key_Down || event.key === Qt.Key_Up || event.key === Qt.Key_Left || event.key === Qt.Key_Right || event.key === Qt.Key_Tab || event.key === Qt.Key_Backtab || ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && text.length === 0)) {
                                         event.accepted = false
                                     }
                                 }

Modals/Spotlight/SpotlightModal.qml

@@ -32,11 +32,7 @@ DankModal {
     function hide() {
         spotlightOpen = false
         close()
-        if (contentLoader.item && contentLoader.item.appLauncher) {
+        cleanupTimer.restart()
-            contentLoader.item.appLauncher.searchQuery = ""
-            contentLoader.item.appLauncher.selectedIndex = 0
-            contentLoader.item.appLauncher.setCategory("All")
-        }
     }
 
     function toggle() {
@@ -55,6 +51,7 @@ DankModal {
     borderColor: Theme.outlineMedium
     borderWidth: 1
     enableShadow: true
+    keepContentLoaded: true
     onVisibleChanged: () => {
                           if (visible && !spotlightOpen) {
                               show()
@@ -72,6 +69,19 @@ DankModal {
                          }
     content: spotlightContent
 
+    Timer {
+        id: cleanupTimer
+
+        interval: animationDuration + 50
+        onTriggered: {
+            if (contentLoader.item && contentLoader.item.appLauncher) {
+                contentLoader.item.appLauncher.searchQuery = ""
+                contentLoader.item.appLauncher.selectedIndex = 0
+                contentLoader.item.appLauncher.setCategory("All")
+            }
+        }
+    }
+
     Connections {
         function onCloseAllModalsExcept(excludedModal) {
             if (excludedModal !== spotlightModal && !allowStacking && spotlightOpen) {

Modules/AppDrawer/AppDrawerPopout.qml

@@ -12,7 +12,6 @@ import qs.Widgets
 DankPopout {
     id: appDrawerPopout
 
-    property string triggerSection: "left"
     property var triggerScreen: null
 
     // Setting to Exclusive, so virtual keyboards can send input to app drawer
@@ -33,9 +32,9 @@ DankPopout {
     popupWidth: 520
     popupHeight: 600
     triggerX: Theme.spacingL
-    triggerY: Math.max(26 + SettingsData.topBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.topBarInnerPadding)) + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance
+    triggerY: Math.max(26 + SettingsData.dankBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.dankBarInnerPadding)) + SettingsData.dankBarSpacing + SettingsData.dankBarBottomGap - 2
     triggerWidth: 40
-    positioning: "center"
+    positioning: ""
     screen: triggerScreen
 
     onShouldBeVisibleChanged: {
@@ -128,6 +127,44 @@ DankPopout {
                         return
                     }
 
+                    if (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) {
+                        appLauncher.selectNext()
+                        event.accepted = true
+                        return
+                    }
+
+                    if (event.key === Qt.Key_P && event.modifiers & Qt.ControlModifier) {
+                        appLauncher.selectPrevious()
+                        event.accepted = true
+                        return
+                    }
+
+                    if (event.key === Qt.Key_J && event.modifiers & Qt.ControlModifier) {
+                        appLauncher.selectNext()
+                        event.accepted = true
+                        return
+                    }
+
+                    if (event.key === Qt.Key_K && event.modifiers & Qt.ControlModifier) {
+                        appLauncher.selectPrevious()
+                        event.accepted = true
+                        return
+                    }
+
+                    if (appLauncher.viewMode === "grid") {
+                        if (event.key === Qt.Key_L && event.modifiers & Qt.ControlModifier) {
+                            appLauncher.selectNextInRow()
+                            event.accepted = true
+                            return
+                        }
+
+                        if (event.key === Qt.Key_H && event.modifiers & Qt.ControlModifier) {
+                            appLauncher.selectPreviousInRow()
+                            event.accepted = true
+                            return
+                        }
+                    }
+
                     if (!searchField.activeFocus && event.text && /[a-zA-Z0-9\s]/.test(event.text)) {
                         searchField.forceActiveFocus()
                         searchField.insertText(event.text)

Modules/ControlCenter/Components/DetailHost.qml

@@ -7,6 +7,7 @@ Item {
 
     property string expandedSection: ""
     property var expandedWidgetData: null
+    property var bluetoothCodecSelector: null
 
     Loader {
         width: parent.width
@@ -42,7 +43,17 @@ Item {
 
     Component {
         id: bluetoothDetailComponent
-        BluetoothDetail {}
+        BluetoothDetail {
+            id: bluetoothDetail
+            onShowCodecSelector: function(device) {
+                if (root.bluetoothCodecSelector) {
+                    root.bluetoothCodecSelector.show(device)
+                    root.bluetoothCodecSelector.codecSelected.connect(function(deviceAddress, codecName) {
+                        bluetoothDetail.updateDeviceCodecDisplay(deviceAddress, codecName)
+                    })
+                }
+            }
+        }
     }
 
     Component {

Modules/ControlCenter/Components/DragDropDetailHost.qml

@@ -69,8 +69,23 @@ Item {
     Component {
         id: diskUsageDetailComponent
         DiskUsageDetail {
-            currentMountPath: root.expandedWidgetData?.currentMountPath || "/"
+            currentMountPath: root.expandedWidgetData?.mountPath || "/"
             instanceId: root.expandedWidgetData?.instanceId || ""
+
+            onMountPathChanged: (newMountPath) => {
+                if (root.expandedWidgetData && root.expandedWidgetData.id === "diskUsage") {
+                    const widgets = SettingsData.controlCenterWidgets || []
+                    const newWidgets = widgets.map(w => {
+                        if (w.id === "diskUsage" && w.instanceId === root.expandedWidgetData.instanceId) {
+                            const updatedWidget = Object.assign({}, w)
+                            updatedWidget.mountPath = newMountPath
+                            return updatedWidget
+                        }
+                        return w
+                    })
+                    SettingsData.setControlCenterWidgets(newWidgets)
+                }
+            }
         }
     }
 }

Modules/ControlCenter/Components/DragDropGrid.qml

@@ -3,8 +3,9 @@ import qs.Common
 import qs.Services
 import qs.Modules.ControlCenter.Widgets
 import qs.Modules.ControlCenter.Components
+import "../utils/layout.js" as LayoutUtils
 
-Item {
+Column {
     id: root
 
     property bool editMode: false
@@ -12,72 +13,32 @@ Item {
     property int expandedWidgetIndex: -1
     property var model: null
     property var expandedWidgetData: null
+    property var bluetoothCodecSelector: null
+    property bool darkModeTransitionPending: false
 
     signal expandClicked(var widgetData, int globalIndex)
     signal removeWidget(int index)
     signal moveWidget(int fromIndex, int toIndex)
     signal toggleWidgetSize(int index)
 
-    readonly property int gridColumns: 4
+    spacing: editMode ? Theme.spacingL : Theme.spacingS
-    readonly property real cellWidth: (width - (gridSpacing + 1) * (gridColumns - 1)) / gridColumns
-    readonly property real cellHeight: 60
-    readonly property real gridSpacing: 4
 
-    height: {
+    property var currentRowWidgets: []
-        const dummy = [SettingsData.controlCenterWidgets?.length, widgetPositions.length]
+    property real currentRowWidth: 0
-        return calculateGridHeight() + (detailHost.active ? detailHost.height + Theme.spacingL : 0)
+    property int expandedRowIndex: -1
+    property var colorPickerModal: null
+
+    function calculateRowsAndWidgets() {
+        return LayoutUtils.calculateRowsAndWidgets(root, expandedSection, expandedWidgetIndex)
     }
 
-    function calculateGridHeight() {
+    property var layoutResult: {
-        const widgets = SettingsData.controlCenterWidgets || []
+        const dummy = [expandedSection, expandedWidgetIndex, model?.controlCenterWidgets]
-        if (widgets.length === 0)
+        return calculateRowsAndWidgets()
-            return 0
-
-        let rows = []
-        let currentRow = []
-        let currentWidth = 0
-        const spacing = gridSpacing
-        const baseWidth = width
-
-        for (var i = 0; i < widgets.length; i++) {
-            const widget = widgets[i]
-            const widgetWidth = widget.width || 50
-
-            let itemWidth
-            if (widgetWidth <= 25) {
-                itemWidth = (baseWidth - spacing * 3) / 4
-            } else if (widgetWidth <= 50) {
-                itemWidth = (baseWidth - spacing) / 2
-            } else if (widgetWidth <= 75) {
-                itemWidth = (baseWidth - spacing * 2) * 0.75
-            } else {
-                itemWidth = baseWidth
     }
 
-            if (currentRow.length > 0 && (currentWidth + spacing + itemWidth > baseWidth)) {
+    onLayoutResultChanged: {
-                rows.push([...currentRow])
+        expandedRowIndex = layoutResult.expandedRowIndex
-                currentRow = [widget]
-                currentWidth = itemWidth
-            } else {
-                currentRow.push(widget)
-                currentWidth += (currentRow.length > 1 ? spacing : 0) + itemWidth
-            }
-        }
-
-        if (currentRow.length > 0) {
-            rows.push(currentRow)
-        }
-
-        return rows.length * cellHeight + (rows.length > 0 ? (rows.length - 1) * spacing : 0)
-    }
-
-    DragDropDetailHost {
-        id: detailHost
-        y: calculateGridHeight()
-        anchors.left: parent.left
-        anchors.right: parent.right
-        expandedSection: root.expandedSection
-        expandedWidgetData: root.expandedWidgetData
     }
 
     function moveToTop(item) {
@@ -92,18 +53,66 @@ Item {
     }
 
     Repeater {
-        id: widgetRepeater
+        model: root.layoutResult.rows
-        model: SettingsData.controlCenterWidgets || []
+
+        Column {
+            width: root.width
+            spacing: 0
+            property int rowIndex: index
+            property var rowWidgets: modelData
+            property bool isSliderOnlyRow: {
+                const widgets = rowWidgets || []
+                if (widgets.length === 0) return false
+                return widgets.every(w => w.id === "volumeSlider" || w.id === "brightnessSlider" || w.id === "inputVolumeSlider")
+            }
+            topPadding: isSliderOnlyRow ? (root.editMode ? 4 : -6) : 0
+            bottomPadding: isSliderOnlyRow ? (root.editMode ? 4 : -6) : 0
+
+            Flow {
+                width: parent.width
+                spacing: Theme.spacingS
+
+                Repeater {
+                    model: rowWidgets || []
 
                     DragDropWidgetWrapper {
-            id: widgetWrapper
+                        widgetData: modelData
+                        property int globalWidgetIndex: {
+                            const widgets = SettingsData.controlCenterWidgets || []
+                            for (var i = 0; i < widgets.length; i++) {
+                                if (widgets[i].id === modelData.id) {
+                                    if (modelData.id === "diskUsage") {
+                                        if (widgets[i].instanceId === modelData.instanceId) {
+                                            return i
+                                        }
+                                    } else {
+                                        return i
+                                    }
+                                }
+                            }
+                            return -1
+                        }
+                        property int widgetWidth: modelData.width || 50
+                        width: {
+                            const baseWidth = root.width
+                            const spacing = Theme.spacingS
+                            if (widgetWidth <= 25) {
+                                return (baseWidth - spacing * 3) / 4
+                            } else if (widgetWidth <= 50) {
+                                return (baseWidth - spacing) / 2
+                            } else if (widgetWidth <= 75) {
+                                return (baseWidth - spacing * 2) * 0.75
+                            } else {
+                                return baseWidth
+                            }
+                        }
+                        height: isSliderOnlyRow ? 48 : 60
 
                         editMode: root.editMode
-            widgetData: modelData
+                        widgetIndex: globalWidgetIndex
-            widgetIndex: index
+                        gridCellWidth: width
-            gridCellWidth: root.cellWidth
+                        gridCellHeight: height
-            gridCellHeight: root.cellHeight
+                        gridColumns: 4
-            gridColumns: root.gridColumns
                         gridLayout: root
                         isSlider: {
                             const id = modelData.id || ""
@@ -121,102 +130,41 @@ Item {
                             } else if (id === "inputVolumeSlider") {
                                 return inputAudioSliderComponent
                             } else if (id === "battery") {
-                    const widgetWidth = modelData.width || 50
                                 return widgetWidth <= 25 ? smallBatteryComponent : batteryPillComponent
                             } else if (id === "diskUsage") {
                                 return diskUsagePillComponent
+                            } else if (id === "colorPicker") {
+                                return colorPickerPillComponent
                             } else {
-                    const widgetWidth = modelData.width || 50
                                 return widgetWidth <= 25 ? smallToggleComponent : toggleButtonComponent
                             }
                         }
 
-            x: calculateWidgetX(index)
-            y: calculateWidgetY(index)
-
                         onWidgetMoved: (fromIndex, toIndex) => root.moveWidget(fromIndex, toIndex)
                         onRemoveWidget: index => root.removeWidget(index)
                         onToggleWidgetSize: index => root.toggleWidgetSize(index)
-
-            Behavior on x {
-                enabled: !editMode
-                NumberAnimation {
-                    duration: Theme.mediumDuration
-                    easing.type: Easing.OutCubic
-                }
-            }
-
-            Behavior on y {
-                enabled: !editMode
-                NumberAnimation {
-                    duration: Theme.mediumDuration
-                    easing.type: Easing.OutCubic
                     }
                 }
             }
+
+            DetailHost {
+                width: parent.width
+                height: active ? (250 + Theme.spacingS) : 0
+                property bool active: {
+                    if (root.expandedSection === "") return false
+
+                    if (root.expandedSection.startsWith("diskUsage_") && root.expandedWidgetData) {
+                        const expandedInstanceId = root.expandedWidgetData.instanceId
+                        return rowWidgets.some(w => w.id === "diskUsage" && w.instanceId === expandedInstanceId)
                     }
 
-    property var widgetPositions: calculateAllWidgetPositions()
+                    return rowIndex === root.expandedRowIndex
-
-    function calculateAllWidgetPositions() {
-        const widgets = SettingsData.controlCenterWidgets || []
-        let positions = []
-        let currentX = 0
-        let currentY = 0
-
-        for (var i = 0; i < widgets.length; i++) {
-            const widget = widgets[i]
-            const widgetWidth = widget.width || 50
-            let cellsNeeded = 1
-
-            if (widgetWidth <= 25)
-                cellsNeeded = 1
-            else if (widgetWidth <= 50)
-                cellsNeeded = 2
-            else if (widgetWidth <= 75)
-                cellsNeeded = 3
-            else
-                cellsNeeded = 4
-
-            if (currentX + cellsNeeded > gridColumns) {
-                currentX = 0
-                currentY++
                 }
-
+                visible: active
-            const horizontalSpacing = gridSpacing
+                expandedSection: root.expandedSection
-            positions[i] = {
+                expandedWidgetData: root.expandedWidgetData
-                "x": currentX * cellWidth + (currentX > 0 ? currentX * horizontalSpacing : 0),
+                bluetoothCodecSelector: root.bluetoothCodecSelector
-                "y": currentY * cellHeight + (currentY > 0 ? currentY * gridSpacing : 0),
-                "cellsUsed": cellsNeeded
             }
-
-            currentX += cellsNeeded
-
-            if (currentX >= gridColumns) {
-                currentX = 0
-                currentY++
-            }
-        }
-
-        return positions
-    }
-
-    function calculateWidgetX(widgetIndex) {
-        if (widgetIndex < 0 || widgetIndex >= widgetPositions.length)
-            return 0
-        return widgetPositions[widgetIndex].x
-    }
-
-    function calculateWidgetY(widgetIndex) {
-        if (widgetIndex < 0 || widgetIndex >= widgetPositions.length)
-            return 0
-        return widgetPositions[widgetIndex].y
-    }
-
-    Connections {
-        target: SettingsData
-        function onControlCenterWidgetsChanged() {
-            widgetPositions = calculateAllWidgetPositions()
         }
     }
 
@@ -227,7 +175,7 @@ Item {
             property int widgetIndex: parent.widgetIndex || 0
             property var widgetDef: root.model?.getWidgetForId(widgetData.id || "")
             width: parent.width
-            height: cellHeight
+            height: 60
             iconName: {
                 switch (widgetData.id || "") {
                 case "wifi":
@@ -395,10 +343,9 @@ Item {
                     return false
                 }
             }
-            enabled: !root.editMode && (widgetDef?.enabled ?? true)
+            enabled: widgetDef?.enabled ?? true
             onToggled: {
-                if (root.editMode)
+                if (root.editMode) return
-                    return
                 switch (widgetData.id || "") {
                 case "wifi":
                 {
@@ -431,12 +378,11 @@ Item {
                 }
             }
             onExpandClicked: {
-                if (!root.editMode)
+                if (root.editMode) return
                 root.expandClicked(widgetData, widgetIndex)
             }
             onWheelEvent: function (wheelEvent) {
-                if (root.editMode)
+                if (root.editMode) return
-                    return
                 const id = widgetData.id || ""
                 if (id === "audioOutput") {
                     if (!AudioService.sink || !AudioService.sink.audio)
@@ -471,43 +417,67 @@ Item {
 
     Component {
         id: audioSliderComponent
+        Item {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            width: parent.width
+            height: 16
+
             AudioSliderRow {
+                anchors.centerIn: parent
                 width: parent.width
                 height: 14
-            enabled: !root.editMode
                 property color sliderTrackColor: Theme.surfaceContainerHigh
             }
         }
+    }
 
     Component {
         id: brightnessSliderComponent
+        Item {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            width: parent.width
+            height: 16
+
             BrightnessSliderRow {
+                anchors.centerIn: parent
                 width: parent.width
                 height: 14
-            enabled: !root.editMode
                 property color sliderTrackColor: Theme.surfaceContainerHigh
             }
         }
+    }
 
     Component {
         id: inputAudioSliderComponent
+        Item {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            width: parent.width
+            height: 16
+
             InputAudioSliderRow {
+                anchors.centerIn: parent
                 width: parent.width
                 height: 14
-            enabled: !root.editMode
                 property color sliderTrackColor: Theme.surfaceContainerHigh
             }
         }
+    }
 
     Component {
         id: batteryPillComponent
         BatteryPill {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
             width: parent.width
-            height: cellHeight
+            height: 60
-            enabled: !root.editMode
+
             onExpandClicked: {
-                if (!root.editMode)
+                if (!root.editMode) {
-                    root.expandClicked(parent.widgetData, parent.widgetIndex)
+                    root.expandClicked(widgetData, widgetIndex)
+                }
             }
         }
     }
@@ -515,12 +485,15 @@ Item {
     Component {
         id: smallBatteryComponent
         SmallBatteryButton {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
             width: parent.width
             height: 48
-            enabled: !root.editMode
+
             onClicked: {
-                if (!root.editMode)
+                if (!root.editMode) {
-                    root.expandClicked(parent.widgetData, parent.widgetIndex)
+                    root.expandClicked(widgetData, widgetIndex)
+                }
             }
         }
     }
@@ -530,9 +503,8 @@ Item {
         ToggleButton {
             property var widgetData: parent.widgetData || {}
             property int widgetIndex: parent.widgetIndex || 0
-            property var widgetDef: root.model?.getWidgetForId(widgetData.id || "")
             width: parent.width
-            height: cellHeight
+            height: 60
 
             iconName: {
                 switch (widgetData.id || "") {
@@ -545,7 +517,7 @@ Item {
                 case "idleInhibitor":
                     return SessionService.idleInhibited ? "motion_sensor_active" : "motion_sensor_idle"
                 default:
-                    return widgetDef?.icon || "help"
+                    return "help"
                 }
             }
 
@@ -560,11 +532,17 @@ Item {
                 case "idleInhibitor":
                     return SessionService.idleInhibited ? "Keeping Awake" : "Keep Awake"
                 default:
-                    return widgetDef?.text || "Unknown"
+                    return "Unknown"
                 }
             }
 
-            iconRotation: widgetData.id === "darkMode" && SessionData.isLightMode ? 180 : 0
+            iconRotation: {
+                if (widgetData.id !== "darkMode") return 0
+                if (darkModeTransitionPending) {
+                    return SessionData.isLightMode ? 0 : 180
+                }
+                return SessionData.isLightMode ? 180 : 0
+            }
 
             isActive: {
                 switch (widgetData.id || "") {
@@ -581,7 +559,15 @@ Item {
                 }
             }
 
-            enabled: !root.editMode && (widgetDef?.enabled ?? true)
+enabled: !root.editMode
+
+            onIconRotationCompleted: {
+                if (root.darkModeTransitionPending && widgetData.id === "darkMode") {
+                    root.darkModeTransitionPending = false
+                    Theme.screenTransition()
+                    Theme.toggleLightMode()
+                }
+            }
 
             onClicked: {
                 if (root.editMode)
@@ -595,7 +581,7 @@ Item {
                 }
                 case "darkMode":
                 {
-                    Theme.toggleLightMode()
+                    root.darkModeTransitionPending = true
                     break
                 }
                 case "doNotDisturb":
@@ -618,7 +604,6 @@ Item {
         SmallToggleButton {
             property var widgetData: parent.widgetData || {}
             property int widgetIndex: parent.widgetIndex || 0
-            property var widgetDef: root.model?.getWidgetForId(widgetData.id || "")
             width: parent.width
             height: 48
 
@@ -633,11 +618,17 @@ Item {
                 case "idleInhibitor":
                     return SessionService.idleInhibited ? "motion_sensor_active" : "motion_sensor_idle"
                 default:
-                    return widgetDef?.icon || "help"
+                    return "help"
                 }
             }
 
-            iconRotation: widgetData.id === "darkMode" && SessionData.isLightMode ? 180 : 0
+            iconRotation: {
+                if (widgetData.id !== "darkMode") return 0
+                if (darkModeTransitionPending) {
+                    return SessionData.isLightMode ? 0 : 180
+                }
+                return SessionData.isLightMode ? 180 : 0
+            }
 
             isActive: {
                 switch (widgetData.id || "") {
@@ -654,7 +645,15 @@ Item {
                 }
             }
 
-            enabled: !root.editMode && (widgetDef?.enabled ?? true)
+enabled: !root.editMode
+
+            onIconRotationCompleted: {
+                if (root.darkModeTransitionPending && widgetData.id === "darkMode") {
+                    root.darkModeTransitionPending = false
+                    Theme.screenTransition()
+                    Theme.toggleLightMode()
+                }
+            }
 
             onClicked: {
                 if (root.editMode)
@@ -668,7 +667,7 @@ Item {
                 }
                 case "darkMode":
                 {
-                    Theme.toggleLightMode()
+                    root.darkModeTransitionPending = true
                     break
                 }
                 case "doNotDisturb":
@@ -689,15 +688,31 @@ Item {
     Component {
         id: diskUsagePillComponent
         DiskUsagePill {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
             width: parent.width
-            height: cellHeight
+            height: 60
-            enabled: !root.editMode
+
-            mountPath: parent.widgetData?.mountPath || "/"
+            mountPath: widgetData.mountPath || "/"
-            instanceId: parent.widgetData?.instanceId || ""
+            instanceId: widgetData.instanceId || ""
+
             onExpandClicked: {
-                if (!root.editMode)
+                if (!root.editMode) {
-                    root.expandClicked(parent.widgetData, parent.widgetIndex)
+                    root.expandClicked(widgetData, widgetIndex)
                 }
             }
         }
+    }
+
+    Component {
+        id: colorPickerPillComponent
+        ColorPickerPill {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            width: parent.width
+            height: 60
+
+            colorPickerModal: root.colorPickerModal
+        }
+    }
 }

Modules/ControlCenter/Components/DragDropWidgetWrapper.qml

@@ -16,6 +16,8 @@ Item {
     property int gridColumns: 4
     property var gridLayout: null
 
+    z: dragArea.drag.active ? 10000 : 1
+
     signal widgetMoved(int fromIndex, int toIndex)
     signal removeWidget(int index)
     signal toggleWidgetSize(int index)
@@ -27,7 +29,7 @@ Item {
         else if (widgetWidth <= 75) return gridCellWidth * 3
         else return gridCellWidth * 4
     }
-    height: gridCellHeight
+    height: isSlider ? 16 : gridCellHeight
 
     Rectangle {
         id: dragIndicator
@@ -37,7 +39,7 @@ Item {
         border.width: dragArea.drag.active ? 2 : 0
         radius: Theme.cornerRadius
         opacity: dragArea.drag.active ? 0.8 : 1.0
-        z: dragArea.drag.active ? 1000 : 1
+        z: dragArea.drag.active ? 10000 : 1
 
         Behavior on border.width {
             NumberAnimation { duration: 150 }
@@ -56,13 +58,14 @@ Item {
         property int globalWidgetIndex: root.widgetIndex
         property int widgetWidth: root.widgetData?.width || 50
 
+
         MouseArea {
             id: editModeBlocker
             anchors.fill: parent
             enabled: root.editMode
             acceptedButtons: Qt.AllButtons
-            onPressed: mouse.accepted = true
+            onPressed: function(mouse) { mouse.accepted = true }
-            onWheel: wheel.accepted = true
+            onWheel: function(wheel) { wheel.accepted = true }
             z: 100
         }
     }
@@ -71,23 +74,23 @@ Item {
         id: dragArea
         anchors.fill: parent
         enabled: editMode
-        cursorShape: editMode ? Qt.OpenHandCursor : Qt.ArrowCursor
+        cursorShape: editMode ? Qt.OpenHandCursor : Qt.PointingHandCursor
         drag.target: editMode ? root : null
         drag.axis: Drag.XAndYAxis
         drag.smoothed: true
 
-        onPressed: {
+        onPressed: function(mouse) {
             if (editMode) {
                 cursorShape = Qt.ClosedHandCursor
-                root.z = 1000
+                if (root.gridLayout && root.gridLayout.moveToTop) {
-                root.parent.moveToTop(root)
+                    root.gridLayout.moveToTop(root)
+                }
             }
         }
 
-        onReleased: {
+        onReleased: function(mouse) {
             if (editMode) {
                 cursorShape = Qt.OpenHandCursor
-                root.z = 1
                 root.snapToGrid()
             }
         }
@@ -97,6 +100,19 @@ Item {
     Drag.hotSpot.x: width / 2
     Drag.hotSpot.y: height / 2
 
+    function swapIndices(i, j) {
+        if (i === j) return;
+        const arr = SettingsData.controlCenterWidgets;
+        if (!arr || i < 0 || j < 0 || i >= arr.length || j >= arr.length) return;
+
+        const copy = arr.slice();
+        const tmp = copy[i];
+        copy[i] = copy[j];
+        copy[j] = tmp;
+
+        SettingsData.setControlCenterWidgets(copy);
+    }
+
     function snapToGrid() {
         if (!editMode || !gridLayout) return
 
@@ -104,80 +120,90 @@ Item {
         const cellWidth = gridLayout.width / gridColumns
         const cellHeight = gridCellHeight + Theme.spacingS
 
-        let targetCol = Math.max(0, Math.round(globalPos.x / cellWidth))
+        const centerX = globalPos.x + (root.width / 2)
-        let targetRow = Math.max(0, Math.round(globalPos.y / cellHeight))
+        const centerY = globalPos.y + (root.height / 2)
 
-        const widgetCells = Math.ceil(root.width / cellWidth)
+        let targetCol = Math.max(0, Math.floor(centerX / cellWidth))
+        let targetRow = Math.max(0, Math.floor(centerY / cellHeight))
 
-        if (targetCol + widgetCells > gridColumns) {
+        targetCol = Math.min(targetCol, gridColumns - 1)
-            targetCol = Math.max(0, gridColumns - widgetCells)
-        }
 
         const newIndex = findBestInsertionIndex(targetRow, targetCol)
 
         if (newIndex !== widgetIndex && newIndex >= 0 && newIndex < (SettingsData.controlCenterWidgets?.length || 0)) {
-            widgetMoved(widgetIndex, newIndex)
+            swapIndices(widgetIndex, newIndex)
         }
     }
 
     function findBestInsertionIndex(targetRow, targetCol) {
-        const widgets = SettingsData.controlCenterWidgets || []
+        const widgets = SettingsData.controlCenterWidgets || [];
-        if (!widgets.length) return 0
+        const n = widgets.length;
+        if (!n || widgetIndex < 0 || widgetIndex >= n) return -1;
 
-        const targetPosition = targetRow * gridColumns + targetCol
+        function spanFor(width) {
+            const w = width ?? 50;
+            if (w <= 25) return 1;
+            if (w <= 50) return 2;
+            if (w <= 75) return 3;
+            return 4;
+        }
 
-        // Find the widget position closest to our target
+        const cols = gridColumns || 4;
-        let bestIndex = 0
-        let bestDistance = Infinity
 
-        for (let i = 0; i <= widgets.length; i++) {
+        let row = 0, col = 0;
-            if (i === widgetIndex) continue
+        let draggedOrigKey = null;
 
-            let currentPos = calculatePositionForIndex(i)
+        const pos = [];
-            let distance = Math.abs(currentPos - targetPosition)
 
-            if (distance < bestDistance) {
+        for (let i = 0; i < n; i++) {
-                bestDistance = distance
+            const span = Math.min(spanFor(widgets[i].width), cols);
-                bestIndex = i > widgetIndex ? i - 1 : i
+
+            if (col + span > cols) {
+                row++;
+                col = 0;
+            }
+
+            const startCol = col;
+            const centerKey = row * cols + (startCol + (span - 1) / 2);
+
+            if (i === widgetIndex) {
+                draggedOrigKey = centerKey;
+            } else {
+                pos.push({ index: i, row, startCol, span, centerKey });
+            }
+
+            col += span;
+            if (col >= cols) {
+                row++;
+                col = 0;
             }
         }
 
-        return Math.max(0, Math.min(bestIndex, widgets.length - 1))
+        if (pos.length === 0) return -1;
-    }
 
-    function calculatePositionForIndex(index) {
+        const centerColCoord = targetCol + 0.5;
-        const widgets = SettingsData.controlCenterWidgets || []
+        const targetKey = targetRow * cols + centerColCoord;
-        let currentX = 0
-        let currentY = 0
 
-        for (let i = 0; i < index && i < widgets.length; i++) {
+        for (let k = 0; k < pos.length; k++) {
-            if (i === widgetIndex) continue
+            const p = pos[k];
-
+            if (p.row === targetRow && centerColCoord >= p.startCol && centerColCoord < (p.startCol + p.span)) {
-            const widget = widgets[i]
+                return p.index;
-            const widgetWidth = widget.width || 50
-            let cellsNeeded = widgetWidth <= 25 ? 1 : widgetWidth <= 50 ? 2 : widgetWidth <= 75 ? 3 : 4
-
-            if (currentX + cellsNeeded > gridColumns) {
-                currentX = 0
-                currentY++
-            }
-
-            currentX += cellsNeeded
-            if (currentX >= gridColumns) {
-                currentX = 0
-                currentY++
             }
         }
 
-        return currentY * gridColumns + currentX
+        let lo = 0, hi = pos.length - 1;
-    }
+        if (targetKey <= pos[0].centerKey) return pos[0].index;
+        if (targetKey >= pos[hi].centerKey) return pos[hi].index;
 
-    function getWidgetWidth(widgetWidth) {
+        while (lo <= hi) {
-        const cellWidth = gridLayout ? gridLayout.width / gridColumns : gridCellWidth
+            const mid = (lo + hi) >> 1;
-        if (widgetWidth <= 25) return cellWidth
+            const mk = pos[mid].centerKey;
-        else if (widgetWidth <= 50) return cellWidth * 2
+            if (targetKey < mk) hi = mid - 1;
-        else if (widgetWidth <= 75) return cellWidth * 3
+            else if (targetKey > mk) lo = mid + 1;
-        else return cellWidth * 4
+            else return pos[mid].index;
+        }
+        const movingUp = (draggedOrigKey != null) ? (targetKey < draggedOrigKey) : false;
+        return (movingUp ? pos[lo].index : pos[hi].index);
     }
 
     Rectangle {
@@ -200,11 +226,12 @@ Item {
 
         MouseArea {
             anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
             onClicked: removeWidget(widgetIndex)
         }
     }
 
-    PieChartSizeControl {
+    SizeControls {
         anchors.bottom: parent.bottom
         anchors.left: parent.left
         anchors.margins: -6

Modules/ControlCenter/Components/SizeControls.qml

@@ -0,0 +1,52 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Widgets
+
+Row {
+    id: root
+
+    property int currentSize: 50
+    property bool isSlider: false
+    property int widgetIndex: -1
+
+    signal sizeChanged(int newSize)
+
+    readonly property var availableSizes: isSlider ? [50, 100] : [25, 50, 75, 100]
+
+    spacing: 2
+
+    Repeater {
+        model: root.availableSizes
+
+        Rectangle {
+            width: 16
+            height: 16
+            radius: 3
+            color: modelData === root.currentSize ? Theme.primary : Theme.surfaceContainer
+            border.color: modelData === root.currentSize ? Theme.primary : Theme.outline
+            border.width: 1
+
+            StyledText {
+                anchors.centerIn: parent
+                text: modelData.toString()
+                font.pixelSize: 8
+                font.weight: Font.Medium
+                color: modelData === root.currentSize ? Theme.primaryContainer : Theme.surfaceText
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    root.currentSize = modelData
+                    root.sizeChanged(modelData)
+                }
+            }
+
+            Behavior on color {
+                ColorAnimation { duration: Theme.shortDuration }
+            }
+        }
+    }
+}

Modules/ControlCenter/Components/WidgetGrid.qml

@@ -1,719 +0,0 @@
-import QtQuick
-import qs.Common
-import qs.Services
-import qs.Modules.ControlCenter.Widgets
-import qs.Modules.ControlCenter.Components
-import "../utils/layout.js" as LayoutUtils
-
-Column {
-    id: root
-
-    property bool editMode: false
-    property string expandedSection: ""
-    property int expandedWidgetIndex: -1
-    property var model: null
-    property var expandedWidgetData: null
-
-    signal expandClicked(var widgetData, int globalIndex)
-    signal removeWidget(int index)
-    signal moveWidget(int fromIndex, int toIndex)
-    signal toggleWidgetSize(int index)
-
-    spacing: editMode ? Theme.spacingL : Theme.spacingS
-
-    property var currentRowWidgets: []
-    property real currentRowWidth: 0
-    property int expandedRowIndex: -1
-
-    function calculateRowsAndWidgets() {
-        return LayoutUtils.calculateRowsAndWidgets(root, expandedSection, expandedWidgetIndex)
-    }
-
-    property var layoutResult: {
-        const dummy = [expandedSection, expandedWidgetIndex, model?.controlCenterWidgets]
-        return calculateRowsAndWidgets()
-    }
-
-    onLayoutResultChanged: {
-        expandedRowIndex = layoutResult.expandedRowIndex
-    }
-
-    Repeater {
-        model: root.layoutResult.rows
-
-        Column {
-            width: root.width
-            spacing: 0
-            property int rowIndex: index
-            property var rowWidgets: modelData
-            property bool isSliderOnlyRow: {
-                const widgets = rowWidgets || []
-                if (widgets.length === 0) return false
-                return widgets.every(w => w.id === "volumeSlider" || w.id === "brightnessSlider" || w.id === "inputVolumeSlider")
-            }
-            topPadding: isSliderOnlyRow ? (root.editMode ? 4 : -12) : 0
-            bottomPadding: isSliderOnlyRow ? (root.editMode ? 4 : -12) : 0
-
-            Flow {
-                width: parent.width
-                spacing: Theme.spacingS
-
-                Repeater {
-                    model: rowWidgets || []
-
-                    Item {
-                        property var widgetData: modelData
-                        property int globalWidgetIndex: {
-                            const widgets = SettingsData.controlCenterWidgets || []
-                            for (var i = 0; i < widgets.length; i++) {
-                                if (widgets[i].id === modelData.id) {
-                                    if (modelData.id === "diskUsage") {
-                                        if (widgets[i].instanceId === modelData.instanceId) {
-                                            return i
-                                        }
-                                    } else {
-                                        return i
-                                    }
-                                }
-                            }
-                            return -1
-                        }
-                        property int widgetWidth: modelData.width || 50
-                        width: {
-                            const baseWidth = root.width
-                            const spacing = Theme.spacingS
-                            if (widgetWidth <= 25) {
-                                return (baseWidth - spacing * 3) / 4
-                            } else if (widgetWidth <= 50) {
-                                return (baseWidth - spacing) / 2
-                            } else if (widgetWidth <= 75) {
-                                return (baseWidth - spacing * 2) * 0.75
-                            } else {
-                                return baseWidth
-                            }
-                        }
-                        height: 60
-
-                        Loader {
-                            id: widgetLoader
-                            anchors.fill: parent
-                            property var widgetData: parent.widgetData
-                            property int widgetIndex: parent.globalWidgetIndex
-                            property int globalWidgetIndex: parent.globalWidgetIndex
-                            property int widgetWidth: parent.widgetWidth
-
-                            sourceComponent: {
-                                const id = modelData.id || ""
-                                if (id === "wifi" || id === "bluetooth" || id === "audioOutput" || id === "audioInput") {
-                                    return compoundPillComponent
-                                } else if (id === "volumeSlider") {
-                                    return audioSliderComponent
-                                } else if (id === "brightnessSlider") {
-                                    return brightnessSliderComponent
-                                } else if (id === "inputVolumeSlider") {
-                                    return inputAudioSliderComponent
-                                } else if (id === "battery") {
-                                    return widgetWidth <= 25 ? smallBatteryComponent : batteryPillComponent
-                                } else if (id === "diskUsage") {
-                                    return diskUsagePillComponent
-                                } else {
-                                    return widgetWidth <= 25 ? smallToggleComponent : toggleButtonComponent
-                                }
-                            }
-
-                        }
-                    }
-                }
-            }
-
-            DetailHost {
-                width: parent.width
-                height: active ? (250 + Theme.spacingS) : 0
-                property bool active: {
-                    if (root.expandedSection === "") return false
-
-                    if (root.expandedSection.startsWith("diskUsage_") && root.expandedWidgetData) {
-                        const expandedInstanceId = root.expandedWidgetData.instanceId
-                        return rowWidgets.some(w => w.id === "diskUsage" && w.instanceId === expandedInstanceId)
-                    }
-
-                    return rowIndex === root.expandedRowIndex
-                }
-                visible: active
-                expandedSection: root.expandedSection
-                expandedWidgetData: root.expandedWidgetData
-            }
-        }
-    }
-
-    Component {
-        id: compoundPillComponent
-        CompoundPill {
-            property var widgetData: parent.widgetData || {}
-            property int widgetIndex: parent.widgetIndex || 0
-            property var widgetDef: root.model?.getWidgetForId(widgetData.id || "")
-            width: parent.width
-            height: 60
-            iconName: {
-                switch (widgetData.id || "") {
-                case "wifi": {
-                    if (NetworkService.wifiToggling) {
-                        return "sync"
-                    }
-                    if (NetworkService.networkStatus === "ethernet") {
-                        return "settings_ethernet"
-                    }
-                    if (NetworkService.networkStatus === "wifi") {
-                        return NetworkService.wifiSignalIcon
-                    }
-                    if (NetworkService.wifiEnabled) {
-                        return "wifi_off"
-                    }
-                    return "wifi_off"
-                }
-                case "bluetooth": {
-                    if (!BluetoothService.available) {
-                        return "bluetooth_disabled"
-                    }
-                    if (!BluetoothService.adapter || !BluetoothService.adapter.enabled) {
-                        return "bluetooth_disabled"
-                    }
-                    return "bluetooth"
-                }
-                case "audioOutput": {
-                    if (!AudioService.sink) return "volume_off"
-                    let volume = AudioService.sink.audio.volume
-                    let muted = AudioService.sink.audio.muted
-                    if (muted || volume === 0.0) return "volume_off"
-                    if (volume <= 0.33) return "volume_down"
-                    if (volume <= 0.66) return "volume_up"
-                    return "volume_up"
-                }
-                case "audioInput": {
-                    if (!AudioService.source) return "mic_off"
-                    let muted = AudioService.source.audio.muted
-                    return muted ? "mic_off" : "mic"
-                }
-                default: return widgetDef?.icon || "help"
-                }
-            }
-            primaryText: {
-                switch (widgetData.id || "") {
-                case "wifi": {
-                    if (NetworkService.wifiToggling) {
-                        return NetworkService.wifiEnabled ? "Disabling WiFi..." : "Enabling WiFi..."
-                    }
-                    if (NetworkService.networkStatus === "ethernet") {
-                        return "Ethernet"
-                    }
-                    if (NetworkService.networkStatus === "wifi" && NetworkService.currentWifiSSID) {
-                        return NetworkService.currentWifiSSID
-                    }
-                    if (NetworkService.wifiEnabled) {
-                        return "Not connected"
-                    }
-                    return "WiFi off"
-                }
-                case "bluetooth": {
-                    if (!BluetoothService.available) {
-                        return "Bluetooth"
-                    }
-                    if (!BluetoothService.adapter) {
-                        return "No adapter"
-                    }
-                    if (!BluetoothService.adapter.enabled) {
-                        return "Disabled"
-                    }
-                    return "Enabled"
-                }
-                case "audioOutput": return AudioService.sink?.description || "No output device"
-                case "audioInput": return AudioService.source?.description || "No input device"
-                default: return widgetDef?.text || "Unknown"
-                }
-            }
-            secondaryText: {
-                switch (widgetData.id || "") {
-                case "wifi": {
-                    if (NetworkService.wifiToggling) {
-                        return "Please wait..."
-                    }
-                    if (NetworkService.networkStatus === "ethernet") {
-                        return "Connected"
-                    }
-                    if (NetworkService.networkStatus === "wifi") {
-                        return NetworkService.wifiSignalStrength > 0 ? NetworkService.wifiSignalStrength + "%" : "Connected"
-                    }
-                    if (NetworkService.wifiEnabled) {
-                        return "Select network"
-                    }
-                    return ""
-                }
-                case "bluetooth": {
-                    if (!BluetoothService.available) {
-                        return "No adapters"
-                    }
-                    if (!BluetoothService.adapter || !BluetoothService.adapter.enabled) {
-                        return "Off"
-                    }
-                    const primaryDevice = (() => {
-                        if (!BluetoothService.adapter || !BluetoothService.adapter.devices) {
-                            return null
-                        }
-                        let devices = [...BluetoothService.adapter.devices.values.filter(dev => dev && (dev.paired || dev.trusted))]
-                        for (let device of devices) {
-                            if (device && device.connected) {
-                                return device
-                            }
-                        }
-                        return null
-                    })()
-                    if (primaryDevice) {
-                        return primaryDevice.name || primaryDevice.alias || primaryDevice.deviceName || "Connected Device"
-                    }
-                    return "No devices"
-                }
-                case "audioOutput": {
-                    if (!AudioService.sink) {
-                        return "Select device"
-                    }
-                    if (AudioService.sink.audio.muted) {
-                        return "Muted"
-                    }
-                    return Math.round(AudioService.sink.audio.volume * 100) + "%"
-                }
-                case "audioInput": {
-                    if (!AudioService.source) {
-                        return "Select device"
-                    }
-                    if (AudioService.source.audio.muted) {
-                        return "Muted"
-                    }
-                    return Math.round(AudioService.source.audio.volume * 100) + "%"
-                }
-                default: return widgetDef?.description || ""
-                }
-            }
-            isActive: {
-                switch (widgetData.id || "") {
-                case "wifi": {
-                    if (NetworkService.wifiToggling) {
-                        return false
-                    }
-                    if (NetworkService.networkStatus === "ethernet") {
-                        return true
-                    }
-                    if (NetworkService.networkStatus === "wifi") {
-                        return true
-                    }
-                    return NetworkService.wifiEnabled
-                }
-                case "bluetooth": return !!(BluetoothService.available && BluetoothService.adapter && BluetoothService.adapter.enabled)
-                case "audioOutput": return !!(AudioService.sink && !AudioService.sink.audio.muted)
-                case "audioInput": return !!(AudioService.source && !AudioService.source.audio.muted)
-                default: return false
-                }
-            }
-            enabled: (widgetDef?.enabled ?? true)
-            onToggled: {
-                if (root.editMode) return
-                switch (widgetData.id || "") {
-                case "wifi": {
-                    if (NetworkService.networkStatus !== "ethernet" && !NetworkService.wifiToggling) {
-                        NetworkService.toggleWifiRadio()
-                    }
-                    break
-                }
-                case "bluetooth": {
-                    if (BluetoothService.available && BluetoothService.adapter) {
-                        BluetoothService.adapter.enabled = !BluetoothService.adapter.enabled
-                    }
-                    break
-                }
-                case "audioOutput": {
-                    if (AudioService.sink && AudioService.sink.audio) {
-                        AudioService.sink.audio.muted = !AudioService.sink.audio.muted
-                    }
-                    break
-                }
-                case "audioInput": {
-                    if (AudioService.source && AudioService.source.audio) {
-                        AudioService.source.audio.muted = !AudioService.source.audio.muted
-                    }
-                    break
-                }
-                }
-            }
-            onExpandClicked: {
-                if (root.editMode) return
-                root.expandClicked(widgetData, widgetIndex)
-            }
-            onWheelEvent: function (wheelEvent) {
-                const id = widgetData.id || ""
-                if (id === "audioOutput") {
-                    if (!AudioService.sink || !AudioService.sink.audio) return
-                    let delta = wheelEvent.angleDelta.y
-                    let currentVolume = AudioService.sink.audio.volume * 100
-                    let newVolume
-                    if (delta > 0)
-                        newVolume = Math.min(100, currentVolume + 5)
-                    else
-                        newVolume = Math.max(0, currentVolume - 5)
-                    AudioService.sink.audio.muted = false
-                    AudioService.sink.audio.volume = newVolume / 100
-                    wheelEvent.accepted = true
-                } else if (id === "audioInput") {
-                    if (!AudioService.source || !AudioService.source.audio) return
-                    let delta = wheelEvent.angleDelta.y
-                    let currentVolume = AudioService.source.audio.volume * 100
-                    let newVolume
-                    if (delta > 0)
-                        newVolume = Math.min(100, currentVolume + 5)
-                    else
-                        newVolume = Math.max(0, currentVolume - 5)
-                    AudioService.source.audio.muted = false
-                    AudioService.source.audio.volume = newVolume / 100
-                    wheelEvent.accepted = true
-                }
-            }
-
-            EditModeOverlay {
-                anchors.fill: parent
-                editMode: root.editMode
-                widgetData: parent.widgetData
-                widgetIndex: parent.widgetIndex
-                showSizeControls: true
-                isSlider: false
-                onRemoveWidget: (index) => root.removeWidget(index)
-                onToggleWidgetSize: (index) => root.toggleWidgetSize(index)
-                onMoveWidget: (fromIndex, toIndex) => root.moveWidget(fromIndex, toIndex)
-            }
-        }
-    }
-
-    Component {
-        id: audioSliderComponent
-        Item {
-            property var widgetData: parent.widgetData || {}
-            property int widgetIndex: parent.widgetIndex || 0
-            property var widgetDef: root.model?.getWidgetForId(widgetData.id || "")
-            width: parent.width
-            height: 16
-
-            AudioSliderRow {
-                anchors.centerIn: parent
-                width: parent.width
-                height: 14
-                property color sliderTrackColor: Theme.surfaceContainerHigh
-            }
-
-            EditModeOverlay {
-                anchors.fill: parent
-                editMode: root.editMode
-                widgetData: parent.widgetData
-                widgetIndex: parent.widgetIndex
-                showSizeControls: true
-                isSlider: true
-                onRemoveWidget: (index) => root.removeWidget(index)
-                onToggleWidgetSize: (index) => root.toggleWidgetSize(index)
-                onMoveWidget: (fromIndex, toIndex) => root.moveWidget(fromIndex, toIndex)
-            }
-        }
-    }
-
-    Component {
-        id: brightnessSliderComponent
-        Item {
-            property var widgetData: parent.widgetData || {}
-            property int widgetIndex: parent.widgetIndex || 0
-            width: parent.width
-            height: 16
-
-            BrightnessSliderRow {
-                anchors.centerIn: parent
-                width: parent.width
-                height: 14
-                property color sliderTrackColor: Theme.surfaceContainerHigh
-            }
-
-            EditModeOverlay {
-                anchors.fill: parent
-                editMode: root.editMode
-                widgetData: parent.widgetData
-                widgetIndex: parent.widgetIndex
-                showSizeControls: true
-                isSlider: true
-                onRemoveWidget: (index) => root.removeWidget(index)
-                onToggleWidgetSize: (index) => root.toggleWidgetSize(index)
-                onMoveWidget: (fromIndex, toIndex) => root.moveWidget(fromIndex, toIndex)
-            }
-        }
-    }
-
-    Component {
-        id: inputAudioSliderComponent
-        Item {
-            property var widgetData: parent.widgetData || {}
-            property int widgetIndex: parent.widgetIndex || 0
-            width: parent.width
-            height: 16
-
-            InputAudioSliderRow {
-                anchors.centerIn: parent
-                width: parent.width
-                height: 14
-                property color sliderTrackColor: Theme.surfaceContainerHigh
-            }
-
-            EditModeOverlay {
-                anchors.fill: parent
-                editMode: root.editMode
-                widgetData: parent.widgetData
-                widgetIndex: parent.widgetIndex
-                showSizeControls: true
-                isSlider: true
-                onRemoveWidget: (index) => root.removeWidget(index)
-                onToggleWidgetSize: (index) => root.toggleWidgetSize(index)
-                onMoveWidget: (fromIndex, toIndex) => root.moveWidget(fromIndex, toIndex)
-            }
-        }
-    }
-
-    Component {
-        id: batteryPillComponent
-        BatteryPill {
-            property var widgetData: parent.widgetData || {}
-            property int widgetIndex: parent.widgetIndex || 0
-            width: parent.width
-            height: 60
-
-            onExpandClicked: {
-                if (!root.editMode) {
-                    root.expandClicked(widgetData, widgetIndex)
-                }
-            }
-
-            EditModeOverlay {
-                anchors.fill: parent
-                editMode: root.editMode
-                widgetData: parent.widgetData
-                widgetIndex: parent.widgetIndex
-                showSizeControls: true
-                isSlider: false
-                onRemoveWidget: (index) => root.removeWidget(index)
-                onToggleWidgetSize: (index) => root.toggleWidgetSize(index)
-                onMoveWidget: (fromIndex, toIndex) => root.moveWidget(fromIndex, toIndex)
-            }
-        }
-    }
-
-    Component {
-        id: smallBatteryComponent
-        SmallBatteryButton {
-            property var widgetData: parent.widgetData || {}
-            property int widgetIndex: parent.widgetIndex || 0
-            width: parent.width
-            height: 48
-
-            onClicked: {
-                if (!root.editMode) {
-                    root.expandClicked(widgetData, widgetIndex)
-                }
-            }
-
-            EditModeOverlay {
-                anchors.fill: parent
-                editMode: root.editMode
-                widgetData: parent.widgetData
-                widgetIndex: parent.widgetIndex
-                showSizeControls: true
-                isSlider: false
-                onRemoveWidget: (index) => root.removeWidget(index)
-                onToggleWidgetSize: (index) => root.toggleWidgetSize(index)
-                onMoveWidget: (fromIndex, toIndex) => root.moveWidget(fromIndex, toIndex)
-            }
-        }
-    }
-
-    Component {
-        id: toggleButtonComponent
-        ToggleButton {
-            property var widgetData: parent.widgetData || {}
-            property int widgetIndex: parent.widgetIndex || 0
-            property var widgetDef: root.model?.getWidgetForId(widgetData.id || "")
-            width: parent.width
-            height: 60
-
-            iconName: {
-                switch (widgetData.id || "") {
-                case "nightMode": return DisplayService.nightModeEnabled ? "nightlight" : "dark_mode"
-                case "darkMode": return "contrast"
-                case "doNotDisturb": return SessionData.doNotDisturb ? "do_not_disturb_on" : "do_not_disturb_off"
-                case "idleInhibitor": return SessionService.idleInhibited ? "motion_sensor_active" : "motion_sensor_idle"
-                default: return widgetDef?.icon || "help"
-                }
-            }
-
-            text: {
-                switch (widgetData.id || "") {
-                case "nightMode": return "Night Mode"
-                case "darkMode": return SessionData.isLightMode ? "Light Mode" : "Dark Mode"
-                case "doNotDisturb": return "Do Not Disturb"
-                case "idleInhibitor": return SessionService.idleInhibited ? "Keeping Awake" : "Keep Awake"
-                default: return widgetDef?.text || "Unknown"
-                }
-            }
-
-            secondaryText: ""
-
-            iconRotation: widgetData.id === "darkMode" && SessionData.isLightMode ? 180 : 0
-
-            isActive: {
-                switch (widgetData.id || "") {
-                case "nightMode": return DisplayService.nightModeEnabled || false
-                case "darkMode": return !SessionData.isLightMode
-                case "doNotDisturb": return SessionData.doNotDisturb || false
-                case "idleInhibitor": return SessionService.idleInhibited || false
-                default: return false
-                }
-            }
-
-            enabled: (widgetDef?.enabled ?? true) && !root.editMode
-
-            onClicked: {
-                switch (widgetData.id || "") {
-                case "nightMode": {
-                    if (DisplayService.automationAvailable) {
-                        DisplayService.toggleNightMode()
-                    }
-                    break
-                }
-                case "darkMode": {
-                    Theme.toggleLightMode()
-                    break
-                }
-                case "doNotDisturb": {
-                    SessionData.setDoNotDisturb(!SessionData.doNotDisturb)
-                    break
-                }
-                case "idleInhibitor": {
-                    SessionService.toggleIdleInhibit()
-                    break
-                }
-                }
-            }
-
-            EditModeOverlay {
-                anchors.fill: parent
-                editMode: root.editMode
-                widgetData: parent.widgetData
-                widgetIndex: parent.widgetIndex
-                showSizeControls: true
-                isSlider: false
-                onRemoveWidget: (index) => root.removeWidget(index)
-                onToggleWidgetSize: (index) => root.toggleWidgetSize(index)
-                onMoveWidget: (fromIndex, toIndex) => root.moveWidget(fromIndex, toIndex)
-            }
-        }
-    }
-
-    Component {
-        id: smallToggleComponent
-        SmallToggleButton {
-            property var widgetData: parent.widgetData || {}
-            property int widgetIndex: parent.widgetIndex || 0
-            property var widgetDef: root.model?.getWidgetForId(widgetData.id || "")
-            width: parent.width
-            height: 48
-
-            iconName: {
-                switch (widgetData.id || "") {
-                case "nightMode": return DisplayService.nightModeEnabled ? "nightlight" : "dark_mode"
-                case "darkMode": return "contrast"
-                case "doNotDisturb": return SessionData.doNotDisturb ? "do_not_disturb_on" : "do_not_disturb_off"
-                case "idleInhibitor": return SessionService.idleInhibited ? "motion_sensor_active" : "motion_sensor_idle"
-                default: return widgetDef?.icon || "help"
-                }
-            }
-
-            iconRotation: widgetData.id === "darkMode" && SessionData.isLightMode ? 180 : 0
-
-            isActive: {
-                switch (widgetData.id || "") {
-                case "nightMode": return DisplayService.nightModeEnabled || false
-                case "darkMode": return !SessionData.isLightMode
-                case "doNotDisturb": return SessionData.doNotDisturb || false
-                case "idleInhibitor": return SessionService.idleInhibited || false
-                default: return false
-                }
-            }
-
-            enabled: (widgetDef?.enabled ?? true) && !root.editMode
-
-            onClicked: {
-                switch (widgetData.id || "") {
-                case "nightMode": {
-                    if (DisplayService.automationAvailable) {
-                        DisplayService.toggleNightMode()
-                    }
-                    break
-                }
-                case "darkMode": {
-                    Theme.toggleLightMode()
-                    break
-                }
-                case "doNotDisturb": {
-                    SessionData.setDoNotDisturb(!SessionData.doNotDisturb)
-                    break
-                }
-                case "idleInhibitor": {
-                    SessionService.toggleIdleInhibit()
-                    break
-                }
-                }
-            }
-
-            EditModeOverlay {
-                anchors.fill: parent
-                editMode: root.editMode
-                widgetData: parent.widgetData
-                widgetIndex: parent.widgetIndex
-                showSizeControls: true
-                isSlider: false
-                onRemoveWidget: (index) => root.removeWidget(index)
-                onToggleWidgetSize: (index) => root.toggleWidgetSize(index)
-                onMoveWidget: (fromIndex, toIndex) => root.moveWidget(fromIndex, toIndex)
-            }
-        }
-    }
-
-    Component {
-        id: diskUsagePillComponent
-        DiskUsagePill {
-            property var widgetData: parent.widgetData || {}
-            property int widgetIndex: parent.widgetIndex || 0
-            width: parent.width
-            height: 60
-
-            mountPath: widgetData.mountPath || "/"
-            instanceId: widgetData.instanceId || ""
-
-            onExpandClicked: {
-                if (!root.editMode) {
-                    root.expandClicked(widgetData, widgetIndex)
-                }
-            }
-
-            EditModeOverlay {
-                anchors.fill: parent
-                editMode: root.editMode
-                widgetData: parent.widgetData
-                widgetIndex: parent.widgetIndex
-                showSizeControls: true
-                isSlider: false
-                onRemoveWidget: (index) => root.removeWidget(index)
-                onToggleWidgetSize: (index) => root.toggleWidgetSize(index)
-                onMoveWidget: (fromIndex, toIndex) => root.moveWidget(fromIndex, toIndex)
-            }
-        }
-    }
-}

Modules/ControlCenter/ControlCenterPopout.qml

@@ -10,7 +10,7 @@ import qs.Common
 import qs.Modules.ControlCenter
 import qs.Modules.ControlCenter.Widgets
 import qs.Modules.ControlCenter.Details
-import qs.Modules.TopBar
+import qs.Modules.DankBar
 import qs.Services
 import qs.Widgets
 import qs.Modules.ControlCenter.Components
@@ -22,7 +22,6 @@ DankPopout {
 
     property string expandedSection: ""
     property bool powerOptionsExpanded: false
-    property string triggerSection: "right"
     property var triggerScreen: null
     property bool editMode: false
     property int expandedWidgetIndex: -1
@@ -66,9 +65,9 @@ DankPopout {
     popupWidth: 550
     popupHeight: Math.min((triggerScreen?.height ?? 1080) - 100, contentLoader.item && contentLoader.item.implicitHeight > 0 ? contentLoader.item.implicitHeight + 20 : 400)
     triggerX: (triggerScreen?.width ?? 1920) - 600 - Theme.spacingL
-    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.popupDistance
+    triggerY: Theme.barHeight - 4 + SettingsData.dankBarSpacing
     triggerWidth: 80
-    positioning: "center"
+    positioning: ""
     screen: triggerScreen
     shouldBeVisible: false
     visible: shouldBeVisible
@@ -102,7 +101,7 @@ DankPopout {
             property alias bluetoothCodecSelector: bluetoothCodecSelector
 
             color: {
-                const transparency = Theme.popupTransparency || 0.92
+                const transparency = Theme.popupTransparency
                 const surface = Theme.surfaceContainer || Qt.rgba(0.1, 0.1, 0.1, 1)
                 return Qt.rgba(surface.r, surface.g, surface.b, transparency)
             }
@@ -153,6 +152,8 @@ DankPopout {
                     expandedWidgetIndex: root.expandedWidgetIndex
                     expandedWidgetData: root.expandedWidgetData
                     model: widgetModel
+                    bluetoothCodecSelector: bluetoothCodecSelector
+                    colorPickerModal: root.colorPickerModal
                     onExpandClicked: (widgetData, globalIndex) => {
                         root.expandedWidgetIndex = globalIndex
                         root.expandedWidgetData = widgetData
@@ -222,4 +223,6 @@ DankPopout {
         id: batteryDetailComponent
         BatteryDetail {}
     }
+
+    property var colorPickerModal: null
 }

Modules/ControlCenter/Models/WidgetModel.qml

@@ -116,6 +116,14 @@ QtObject {
             "enabled": DgopService.dgopAvailable,
             "warning": !DgopService.dgopAvailable ? "Requires 'dgop' tool" : undefined,
             "allowMultiple": true
+        },
+        {
+            "id": "colorPicker",
+            "text": "Color Picker",
+            "description": "Choose colors from palette",
+            "icon": "palette",
+            "type": "action",
+            "enabled": true
         }
     ]
 

Modules/ControlCenter/Widgets/AudioSliderRow.qml

@@ -20,11 +20,7 @@ Row {
         height: Theme.iconSize + Theme.spacingS * 2
         anchors.verticalCenter: parent.verticalCenter
         radius: (Theme.iconSize + Theme.spacingS * 2) / 2
-        color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+        color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.primary, 0)
-
-        Behavior on color {
-            ColorAnimation { duration: Theme.shortDuration }
-        }
 
         MouseArea {
             id: iconArea
@@ -34,7 +30,9 @@ Row {
             cursorShape: Qt.PointingHandCursor
             onClicked: {
                 if (defaultSink) {
+                    AudioService.suppressOSD = true
                     defaultSink.audio.muted = !defaultSink.audio.muted
+                    AudioService.suppressOSD = false
                 }
             }
         }
@@ -71,6 +69,9 @@ Row {
         valueOverride: actualVolumePercent
         thumbOutlineColor: Theme.surfaceContainer
         trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Theme.surfaceContainerHigh
+        onIsDraggingChanged: {
+            AudioService.suppressOSD = isDragging
+        }
         onSliderValueChanged: function(newValue) {
             if (defaultSink) {
                 defaultSink.audio.volume = newValue / 100.0

Modules/ControlCenter/Widgets/BrightnessSliderRow.qml

@@ -18,17 +18,13 @@ Row {
         radius: (Theme.iconSize + Theme.spacingS * 2) / 2
         color: iconArea.containsMouse
                ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
-               : "transparent"
+               : Theme.withAlpha(Theme.primary, 0)
-
-        Behavior on color {
-            ColorAnimation { duration: Theme.shortDuration }
-        }
 
         MouseArea {
             id: iconArea
             anchors.fill: parent
             hoverEnabled: true
-            cursorShape: Qt.PointingHandCursor
+            cursorShape: DisplayService.devices.length > 1 ? Qt.PointingHandCursor : Qt.ArrowCursor
 
             onClicked: function(event) {
                 if (DisplayService.devices.length > 1) {
@@ -41,6 +37,22 @@ Row {
                 }
             }
 
+            onEntered: {
+                tooltipLoader.active = true
+                if (tooltipLoader.item) {
+                    const tooltipText = DisplayService.currentDevice ? "bl device: " + DisplayService.currentDevice : "Backlight Control"
+                    const p = iconArea.mapToItem(null, iconArea.width / 2, 0)
+                    tooltipLoader.item.show(tooltipText, p.x, p.y - 40, null)
+                }
+            }
+
+            onExited: {
+                if (tooltipLoader.item) {
+                    tooltipLoader.item.hide()
+                }
+                tooltipLoader.active = false
+            }
+
             DankIcon {
                 anchors.centerIn: parent
                 name: {
@@ -141,4 +153,10 @@ Row {
             onObjectRemoved: (index, object) => deviceMenu.removeItem(object)
         }
     }
+
+    Loader {
+        id: tooltipLoader
+        active: false
+        sourceComponent: DankTooltip {}
+    }
 }

Modules/ControlCenter/Widgets/ColorPickerPill.qml

@@ -0,0 +1,33 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import qs.Common
+import qs.Services
+import qs.Widgets
+import qs.Modules.ControlCenter.Widgets
+
+CompoundPill {
+    id: root
+
+    property var colorPickerModal: null
+
+    isActive: true
+    iconName: "palette"
+    iconColor: Theme.primary
+    primaryText: "Color Picker"
+    secondaryText: "Choose a color"
+
+    onToggled: {
+        console.log("ColorPickerPill toggled, modal:", colorPickerModal)
+        if (colorPickerModal) {
+            colorPickerModal.show()
+        }
+    }
+
+    onExpandClicked: {
+        console.log("ColorPickerPill expandClicked, modal:", colorPickerModal)
+        if (colorPickerModal) {
+            colorPickerModal.show()
+        }
+    }
+}

Modules/ControlCenter/Widgets/CompoundPill.qml

@@ -41,7 +41,7 @@ Rectangle {
     readonly property color _labelSecondary: Theme.surfaceVariantText
     readonly property color _tileBgActive: Theme.primary
     readonly property color _tileBgInactive: {
-        const transparency = Theme.popupTransparency || 0.92
+        const transparency = Theme.popupTransparency
         const surface = Theme.surfaceContainer || Qt.rgba(0.1, 0.1, 0.1, 1)
         return Qt.rgba(surface.r, surface.g, surface.b, transparency)
     }

Modules/ControlCenter/Widgets/InputAudioSliderRow.qml

@@ -20,11 +20,7 @@ Row {
         height: Theme.iconSize + Theme.spacingS * 2
         anchors.verticalCenter: parent.verticalCenter
         radius: (Theme.iconSize + Theme.spacingS * 2) / 2
-        color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+        color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.primary, 0)
-
-        Behavior on color {
-            ColorAnimation { duration: Theme.shortDuration }
-        }
 
         MouseArea {
             id: iconArea
@@ -34,7 +30,9 @@ Row {
             cursorShape: Qt.PointingHandCursor
             onClicked: {
                 if (defaultSource) {
+                    AudioService.suppressOSD = true
                     defaultSource.audio.muted = !defaultSource.audio.muted
+                    AudioService.suppressOSD = false
                 }
             }
         }
@@ -69,6 +67,9 @@ Row {
         valueOverride: actualVolumePercent
         thumbOutlineColor: Theme.surfaceContainer
         trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Theme.surfaceContainerHigh
+        onIsDraggingChanged: {
+            AudioService.suppressOSD = isDragging
+        }
         onSliderValueChanged: function(newValue) {
             if (defaultSource) {
                 defaultSource.audio.volume = newValue / 100.0

Modules/ControlCenter/Widgets/SmallBatteryButton.qml

@@ -91,13 +91,6 @@ Rectangle {
         onClicked: root.clicked()
     }
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-    }
-
     Behavior on radius {
         NumberAnimation {
             duration: Theme.shortDuration

Modules/ControlCenter/Widgets/SmallToggleButton.qml

@@ -12,6 +12,7 @@ Rectangle {
     property real iconRotation: 0
 
     signal clicked()
+    signal iconRotationCompleted()
 
     width: parent ? ((parent.width - parent.spacing * 3) / 4) : 48
     height: 48
@@ -58,6 +59,7 @@ Rectangle {
         size: Theme.iconSize
         color: isActive ? _tileIconActive : _tileIconInactive
         rotation: iconRotation
+        onRotationCompleted: root.iconRotationCompleted()
     }
 
     MouseArea {
@@ -69,13 +71,6 @@ Rectangle {
         onClicked: root.clicked()
     }
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-    }
-
     Behavior on radius {
         NumberAnimation {
             duration: Theme.shortDuration

Modules/ControlCenter/Widgets/ToggleButton.qml

@@ -14,6 +14,7 @@ Rectangle {
     property real iconRotation: 0
 
     signal clicked()
+    signal iconRotationCompleted()
 
     width: parent ? parent.width : 200
     height: 60
@@ -46,7 +47,7 @@ Rectangle {
     Rectangle {
         anchors.fill: parent
         radius: Theme.cornerRadius
-        color: mouseArea.containsMouse ? hoverTint(_containerBg) : "transparent"
+        color: mouseArea.containsMouse ? hoverTint(_containerBg) : Theme.withAlpha(_containerBg, 0)
         opacity: mouseArea.containsMouse ? 0.08 : 0.0
 
         Behavior on opacity {
@@ -66,6 +67,7 @@ Rectangle {
             color: isActive ? Theme.primaryContainer : Theme.primary
             anchors.verticalCenter: parent.verticalCenter
             rotation: root.iconRotation
+            onRotationCompleted: root.iconRotationCompleted()
         }
 
         Item {
@@ -110,13 +112,6 @@ Rectangle {
         onClicked: root.clicked()
     }
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-    }
-
     Behavior on radius {
         NumberAnimation {
             duration: Theme.shortDuration

Modules/DankBar/AutoHideManager.qml

@@ -0,0 +1,179 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import qs.Common
+import qs.Services
+
+Item {
+    id: root
+
+    required property var barWindow
+    required property var axis
+    required property var appDrawerLoader
+    required property var dankDashPopoutLoader
+    required property var processListPopoutLoader
+    required property var notificationCenterLoader
+    required property var batteryPopoutLoader
+    required property var vpnPopoutLoader
+    required property var controlCenterLoader
+    required property var clipboardHistoryModalPopup
+    required property var systemUpdateLoader
+    required property var notepadInstance
+
+    property alias reveal: core.reveal
+    property alias autoHide: core.autoHide
+    property alias backgroundTransparency: core.backgroundTransparency
+    property alias hasActivePopout: core.hasActivePopout
+    property alias mouseArea: topBarMouseArea
+
+    Item {
+        id: inputMask
+
+        readonly property int barThickness: barWindow.px(barWindow.effectiveBarThickness + SettingsData.dankBarSpacing)
+
+        readonly property bool showing: SettingsData.dankBarVisible && (core.reveal
+                                 || (CompositorService.isNiri && NiriService.inOverview && SettingsData.dankBarOpenOnOverview)
+                                 || !core.autoHide)
+
+        readonly property int maskThickness: showing ? barThickness : 1
+
+        x: {
+            if (!axis.isVertical) {
+                return 0
+            } else {
+                switch (SettingsData.dankBarPosition) {
+                case SettingsData.Position.Left:  return 0
+                case SettingsData.Position.Right: return parent.width - maskThickness
+                default: return 0
+                }
+            }
+        }
+        y: {
+            if (axis.isVertical) {
+                return 0
+            } else {
+                switch (SettingsData.dankBarPosition) {
+                case SettingsData.Position.Top:    return 0
+                case SettingsData.Position.Bottom: return parent.height - maskThickness
+                default: return 0
+                }
+            }
+        }
+        width: axis.isVertical ? maskThickness : parent.width
+        height: axis.isVertical ? parent.height : maskThickness
+    }
+
+    Region {
+        id: mask
+        item: inputMask
+    }
+
+    property alias maskRegion: mask
+
+    QtObject {
+        id: core
+
+        property real backgroundTransparency: SettingsData.dankBarTransparency
+        property bool autoHide: SettingsData.dankBarAutoHide
+        property bool revealSticky: false
+
+        property bool notepadInstanceVisible: notepadInstance?.isVisible ?? false
+
+        readonly property bool hasActivePopout: {
+            const loaders = [{
+                                 "loader": appDrawerLoader,
+                                 "prop": "shouldBeVisible"
+                             }, {
+                                 "loader": dankDashPopoutLoader,
+                                 "prop": "shouldBeVisible"
+                             }, {
+                                 "loader": processListPopoutLoader,
+                                 "prop": "shouldBeVisible"
+                             }, {
+                                 "loader": notificationCenterLoader,
+                                 "prop": "shouldBeVisible"
+                             }, {
+                                 "loader": batteryPopoutLoader,
+                                 "prop": "shouldBeVisible"
+                             }, {
+                                 "loader": vpnPopoutLoader,
+                                 "prop": "shouldBeVisible"
+                             }, {
+                                 "loader": controlCenterLoader,
+                                 "prop": "shouldBeVisible"
+                             }, {
+                                 "loader": clipboardHistoryModalPopup,
+                                 "prop": "visible"
+                             }, {
+                                 "loader": systemUpdateLoader,
+                                 "prop": "shouldBeVisible"
+                             }]
+            return notepadInstanceVisible || loaders.some(item => {
+                if (item.loader) {
+                    return item.loader?.item?.[item.prop]
+                }
+                return false
+            })
+        }
+
+        property bool reveal: {
+            if (CompositorService.isNiri && NiriService.inOverview) {
+                return SettingsData.dankBarOpenOnOverview
+            }
+            return SettingsData.dankBarVisible && (!autoHide || topBarMouseArea.containsMouse || hasActivePopout || revealSticky)
+        }
+
+        onHasActivePopoutChanged: {
+            if (!hasActivePopout && autoHide && !topBarMouseArea.containsMouse) {
+                revealSticky = true
+                revealHold.restart()
+            }
+        }
+    }
+
+    Timer {
+        id: revealHold
+        interval: 250
+        repeat: false
+        onTriggered: core.revealSticky = false
+    }
+
+    Connections {
+        function onDankBarTransparencyChanged() {
+            core.backgroundTransparency = SettingsData.dankBarTransparency
+        }
+
+        target: SettingsData
+    }
+
+    Connections {
+        target: topBarMouseArea
+        function onContainsMouseChanged() {
+            if (topBarMouseArea.containsMouse) {
+                core.revealSticky = true
+                revealHold.stop()
+            } else {
+                if (core.autoHide && !core.hasActivePopout) {
+                    revealHold.restart()
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        id: topBarMouseArea
+        y: !barWindow.isVertical ? (SettingsData.dankBarPosition === SettingsData.Position.Bottom ? parent.height - height : 0) : 0
+        x: barWindow.isVertical ? (SettingsData.dankBarPosition === SettingsData.Position.Right ? parent.width - width : 0) : 0
+        height: !barWindow.isVertical ? barWindow.px(barWindow.effectiveBarThickness + SettingsData.dankBarSpacing) : undefined
+        width: barWindow.isVertical ? barWindow.px(barWindow.effectiveBarThickness + SettingsData.dankBarSpacing) : undefined
+        anchors {
+            left: !barWindow.isVertical ? parent.left : (SettingsData.dankBarPosition === SettingsData.Position.Left ? parent.left : undefined)
+            right: !barWindow.isVertical ? parent.right : (SettingsData.dankBarPosition === SettingsData.Position.Right ? parent.right : undefined)
+            top: barWindow.isVertical ? parent.top : undefined
+            bottom: barWindow.isVertical ? parent.bottom : undefined
+        }
+        hoverEnabled: SettingsData.dankBarAutoHide && !core.reveal
+        acceptedButtons: Qt.NoButton
+        enabled: SettingsData.dankBarAutoHide && !core.reveal
+    }
+}

Modules/DankBar/AxisContext.qml

@@ -0,0 +1,57 @@
+import QtQuick
+
+QtObject {
+    id: root
+
+    property string edge: "top"
+
+    readonly property string orientation: isVertical ? "vertical" : "horizontal"
+    readonly property bool isVertical: edge === "left" || edge === "right"
+    readonly property bool isHorizontal: !isVertical
+
+    function primarySize(item) {
+        return isVertical ? item.height : item.width
+    }
+
+    function crossSize(item) {
+        return isVertical ? item.width : item.height
+    }
+
+    function setPrimaryPos(item, value) {
+        if (isVertical) {
+            item.y = value
+        } else {
+            item.x = value
+        }
+    }
+
+    function getPrimaryPos(item) {
+        return isVertical ? item.y : item.x
+    }
+
+    function primaryAnchor(anchors) {
+        return isVertical ? anchors.verticalCenter : anchors.horizontalCenter
+    }
+
+    function crossAnchor(anchors) {
+        return isVertical ? anchors.horizontalCenter : anchors.verticalCenter
+    }
+
+    function outerVisualEdge() {
+        if (edge === "bottom") return "bottom"
+        if (edge === "left") return "right"
+        if (edge === "right") return "left"
+        if (edge === "top") return "top"
+        return "bottom"
+    }
+
+    signal axisEdgeChanged()
+    signal axisOrientationChanged()
+    signal changed()  // Single coalesced signal
+
+    onEdgeChanged: {
+        axisEdgeChanged()
+        axisOrientationChanged()
+        changed()
+    }
+}

Modules/DankBar/BarCanvas.qml

@@ -0,0 +1,210 @@
+import QtQuick
+import qs.Common
+
+Item {
+    id: root
+
+    required property var barWindow
+    required property var axis
+
+    anchors.fill: parent
+
+    anchors.left: parent.left
+    anchors.top: parent.top
+    anchors.leftMargin: -(SettingsData.dankBarGothCornersEnabled && axis.isVertical && axis.edge === "right" ? barWindow._wingR : 0)
+    anchors.rightMargin: -(SettingsData.dankBarGothCornersEnabled && axis.isVertical && axis.edge === "left" ? barWindow._wingR : 0)
+    anchors.topMargin: -(SettingsData.dankBarGothCornersEnabled && !axis.isVertical && axis.edge === "bottom" ? barWindow._wingR : 0)
+    anchors.bottomMargin: -(SettingsData.dankBarGothCornersEnabled && !axis.isVertical && axis.edge === "top" ? barWindow._wingR : 0)
+
+    Canvas {
+        id: barShape
+        anchors.fill: parent
+        antialiasing: true
+        renderTarget: Canvas.FramebufferObject
+        renderStrategy: Canvas.Cooperative
+
+        readonly property real correctWidth: root.width
+        readonly property real correctHeight: root.height
+        canvasSize: Qt.size(barWindow.px(correctWidth), barWindow.px(correctHeight))
+
+        property real wing: SettingsData.dankBarGothCornersEnabled ? barWindow._wingR : 0
+        property real rt: SettingsData.dankBarSquareCorners ? 0 : Theme.cornerRadius
+
+        onWingChanged: requestPaint()
+        onRtChanged: requestPaint()
+        onCorrectWidthChanged: requestPaint()
+        onCorrectHeightChanged: requestPaint()
+        onVisibleChanged: if (visible) requestPaint()
+        Component.onCompleted: requestPaint()
+
+        Connections {
+            target: barWindow
+            function on_BgColorChanged() { barShape.requestPaint() }
+            function on_DprChanged() { barShape.requestPaint() }
+        }
+
+        Connections {
+            target: Theme
+            function onIsLightModeChanged() { barShape.requestPaint() }
+        }
+
+        onPaint: {
+            const ctx = getContext("2d")
+            const scale = barWindow._dpr
+            const W = barWindow.px(barWindow.isVertical ? correctHeight : correctWidth)
+            const H_raw = barWindow.px(barWindow.isVertical ? correctWidth : correctHeight)
+            const R = barWindow.px(wing)
+            const RT = barWindow.px(rt)
+            const H = H_raw - (R > 0 ? R : 0)
+            const isTop = SettingsData.dankBarPosition === SettingsData.Position.Top
+            const isBottom = SettingsData.dankBarPosition === SettingsData.Position.Bottom
+            const isLeft = SettingsData.dankBarPosition === SettingsData.Position.Left
+            const isRight = SettingsData.dankBarPosition === SettingsData.Position.Right
+
+            ctx.scale(scale, scale)
+
+            function drawTopPath() {
+                ctx.beginPath()
+                ctx.moveTo(RT, 0)
+                ctx.lineTo(W - RT, 0)
+                ctx.arcTo(W, 0, W, RT, RT)
+                ctx.lineTo(W, H)
+
+                if (R > 0) {
+                    ctx.lineTo(W, H + R)
+                    ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true)
+                    ctx.lineTo(R, H)
+                    ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true)
+                    ctx.lineTo(0, H + R)
+                } else {
+                    ctx.lineTo(W, H - RT)
+                    ctx.arcTo(W, H, W - RT, H, RT)
+                    ctx.lineTo(RT, H)
+                    ctx.arcTo(0, H, 0, H - RT, RT)
+                }
+
+                ctx.lineTo(0, RT)
+                ctx.arcTo(0, 0, RT, 0, RT)
+                ctx.closePath()
+            }
+
+            ctx.reset()
+            ctx.clearRect(0, 0, W, H_raw)
+
+            ctx.save()
+            if (isBottom) {
+                ctx.translate(W, H_raw)
+                ctx.rotate(Math.PI)
+            } else if (isLeft) {
+                ctx.translate(0, W)
+                ctx.rotate(-Math.PI / 2)
+            } else if (isRight) {
+                ctx.translate(H_raw, 0)
+                ctx.rotate(Math.PI / 2)
+            }
+
+            drawTopPath()
+            ctx.restore()
+
+            ctx.fillStyle = barWindow._bgColor
+            ctx.fill()
+        }
+    }
+
+    Canvas {
+        id: barTint
+        anchors.fill: parent
+        antialiasing: true
+        renderTarget: Canvas.FramebufferObject
+        renderStrategy: Canvas.Cooperative
+
+        readonly property real correctWidth: root.width
+        readonly property real correctHeight: root.height
+        canvasSize: Qt.size(barWindow.px(correctWidth), barWindow.px(correctHeight))
+
+        property real wing: SettingsData.dankBarGothCornersEnabled ? barWindow._wingR : 0
+        property real rt: SettingsData.dankBarSquareCorners ? 0 : Theme.cornerRadius
+        property real alphaTint: (barWindow._bgColor?.a ?? 1) < 0.99 ? (Theme.stateLayerOpacity ?? 0) : 0
+
+        onWingChanged: requestPaint()
+        onRtChanged: requestPaint()
+        onAlphaTintChanged: requestPaint()
+        onCorrectWidthChanged: requestPaint()
+        onCorrectHeightChanged: requestPaint()
+        onVisibleChanged: if (visible) requestPaint()
+        Component.onCompleted: requestPaint()
+
+        Connections {
+            target: barWindow
+            function on_BgColorChanged() { barTint.requestPaint() }
+            function on_DprChanged() { barTint.requestPaint() }
+        }
+
+        Connections {
+            target: Theme
+            function onIsLightModeChanged() { barTint.requestPaint() }
+        }
+
+        onPaint: {
+            const ctx = getContext("2d")
+            const scale = barWindow._dpr
+            const W = barWindow.px(barWindow.isVertical ? correctHeight : correctWidth)
+            const H_raw = barWindow.px(barWindow.isVertical ? correctWidth : correctHeight)
+            const R = barWindow.px(wing)
+            const RT = barWindow.px(rt)
+            const H = H_raw - (R > 0 ? R : 0)
+            const isTop = SettingsData.dankBarPosition === SettingsData.Position.Top
+            const isBottom = SettingsData.dankBarPosition === SettingsData.Position.Bottom
+            const isLeft = SettingsData.dankBarPosition === SettingsData.Position.Left
+            const isRight = SettingsData.dankBarPosition === SettingsData.Position.Right
+
+            ctx.scale(scale, scale)
+
+            function drawTopPath() {
+                ctx.beginPath()
+                ctx.moveTo(RT, 0)
+                ctx.lineTo(W - RT, 0)
+                ctx.arcTo(W, 0, W, RT, RT)
+                ctx.lineTo(W, H)
+
+                if (R > 0) {
+                    ctx.lineTo(W, H + R)
+                    ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true)
+                    ctx.lineTo(R, H)
+                    ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true)
+                    ctx.lineTo(0, H + R)
+                } else {
+                    ctx.lineTo(W, H - RT)
+                    ctx.arcTo(W, H, W - RT, H, RT)
+                    ctx.lineTo(RT, H)
+                    ctx.arcTo(0, H, 0, H - RT, RT)
+                }
+
+                ctx.lineTo(0, RT)
+                ctx.arcTo(0, 0, RT, 0, RT)
+                ctx.closePath()
+            }
+
+            ctx.reset()
+            ctx.clearRect(0, 0, W, H_raw)
+
+            ctx.save()
+            if (isBottom) {
+                ctx.translate(W, H_raw)
+                ctx.rotate(Math.PI)
+            } else if (isLeft) {
+                ctx.translate(0, W)
+                ctx.rotate(-Math.PI / 2)
+            } else if (isRight) {
+                ctx.translate(H_raw, 0)
+                ctx.rotate(Math.PI / 2)
+            }
+
+            drawTopPath()
+            ctx.restore()
+
+            ctx.fillStyle = Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, alphaTint)
+            ctx.fill()
+        }
+    }
+}

Modules/DankBar/CenterSection.qml

@@ -0,0 +1,446 @@
+import QtQuick
+import qs.Common
+import qs.Services
+
+Item {
+    id: root
+
+    property var widgetsModel: null
+    property var components: null
+    property bool noBackground: false
+    required property var axis
+    property string section: "center"
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+
+    readonly property bool isVertical: axis?.isVertical ?? false
+    readonly property real spacing: noBackground ? 2 : Theme.spacingXS
+
+    property var centerWidgets: []
+    property int totalWidgets: 0
+    property real totalSize: 0
+
+    function updateLayout() {
+        const containerSize = isVertical ? height : width
+        if (containerSize <= 0 || !visible) {
+            return
+        }
+
+        centerWidgets = []
+        totalWidgets = 0
+        totalSize = 0
+
+        let configuredWidgets = 0
+        for (var i = 0; i < centerRepeater.count; i++) {
+            const item = centerRepeater.itemAt(i)
+            if (item && getWidgetVisible(item.widgetId)) {
+                configuredWidgets++
+                if (item.active && item.item) {
+                    centerWidgets.push(item.item)
+                    totalWidgets++
+                    totalSize += isVertical ? item.item.height : item.item.width
+                }
+            }
+        }
+
+        if (totalWidgets > 1) {
+            totalSize += spacing * (totalWidgets - 1)
+        }
+
+        positionWidgets(configuredWidgets)
+    }
+
+    function positionWidgets(configuredWidgets) {
+        if (totalWidgets === 0 || (isVertical ? height : width) <= 0) {
+            return
+        }
+
+        const parentCenter = (isVertical ? height : width) / 2
+        const isOdd = configuredWidgets % 2 === 1
+
+        centerWidgets.forEach(widget => {
+            if (isVertical) {
+                widget.anchors.verticalCenter = undefined
+            } else {
+                widget.anchors.horizontalCenter = undefined
+            }
+        })
+
+        if (isOdd) {
+            const middleIndex = Math.floor(configuredWidgets / 2)
+            let currentActiveIndex = 0
+            let middleWidget = null
+
+            for (var i = 0; i < centerRepeater.count; i++) {
+                const item = centerRepeater.itemAt(i)
+                if (item && getWidgetVisible(item.widgetId)) {
+                    if (currentActiveIndex === middleIndex && item.active && item.item) {
+                        middleWidget = item.item
+                        break
+                    }
+                    currentActiveIndex++
+                }
+            }
+
+            if (middleWidget) {
+                const middleSize = isVertical ? middleWidget.height : middleWidget.width
+                if (isVertical) {
+                    middleWidget.y = parentCenter - (middleSize / 2)
+                } else {
+                    middleWidget.x = parentCenter - (middleSize / 2)
+                }
+
+                let leftWidgets = []
+                let rightWidgets = []
+                let foundMiddle = false
+
+                for (var i = 0; i < centerWidgets.length; i++) {
+                    if (centerWidgets[i] === middleWidget) {
+                        foundMiddle = true
+                        continue
+                    }
+                    if (!foundMiddle) {
+                        leftWidgets.push(centerWidgets[i])
+                    } else {
+                        rightWidgets.push(centerWidgets[i])
+                    }
+                }
+
+                let currentPos = isVertical ? middleWidget.y : middleWidget.x
+                for (var i = leftWidgets.length - 1; i >= 0; i--) {
+                    const size = isVertical ? leftWidgets[i].height : leftWidgets[i].width
+                    currentPos -= (spacing + size)
+                    if (isVertical) {
+                        leftWidgets[i].y = currentPos
+                    } else {
+                        leftWidgets[i].x = currentPos
+                    }
+                }
+
+                currentPos = (isVertical ? middleWidget.y : middleWidget.x) + middleSize
+                for (var i = 0; i < rightWidgets.length; i++) {
+                    currentPos += spacing
+                    if (isVertical) {
+                        rightWidgets[i].y = currentPos
+                    } else {
+                        rightWidgets[i].x = currentPos
+                    }
+                    currentPos += isVertical ? rightWidgets[i].height : rightWidgets[i].width
+                }
+            }
+        } else {
+            let configuredLeftIndex = (configuredWidgets / 2) - 1
+            let configuredRightIndex = configuredWidgets / 2
+            const halfSpacing = spacing / 2
+
+            let leftWidget = null
+            let rightWidget = null
+            let leftWidgets = []
+            let rightWidgets = []
+
+            let currentConfigIndex = 0
+            for (var i = 0; i < centerRepeater.count; i++) {
+                const item = centerRepeater.itemAt(i)
+                if (item && getWidgetVisible(item.widgetId)) {
+                    if (item.active && item.item) {
+                        if (currentConfigIndex < configuredLeftIndex) {
+                            leftWidgets.push(item.item)
+                        } else if (currentConfigIndex === configuredLeftIndex) {
+                            leftWidget = item.item
+                        } else if (currentConfigIndex === configuredRightIndex) {
+                            rightWidget = item.item
+                        } else {
+                            rightWidgets.push(item.item)
+                        }
+                    }
+                    currentConfigIndex++
+                }
+            }
+
+            if (leftWidget && rightWidget) {
+                const leftSize = isVertical ? leftWidget.height : leftWidget.width
+                if (isVertical) {
+                    leftWidget.y = parentCenter - halfSpacing - leftSize
+                    rightWidget.y = parentCenter + halfSpacing
+                } else {
+                    leftWidget.x = parentCenter - halfSpacing - leftSize
+                    rightWidget.x = parentCenter + halfSpacing
+                }
+
+                let currentPos = isVertical ? leftWidget.y : leftWidget.x
+                for (var i = leftWidgets.length - 1; i >= 0; i--) {
+                    const size = isVertical ? leftWidgets[i].height : leftWidgets[i].width
+                    currentPos -= (spacing + size)
+                    if (isVertical) {
+                        leftWidgets[i].y = currentPos
+                    } else {
+                        leftWidgets[i].x = currentPos
+                    }
+                }
+
+                currentPos = (isVertical ? rightWidget.y + rightWidget.height : rightWidget.x + rightWidget.width)
+                for (var i = 0; i < rightWidgets.length; i++) {
+                    currentPos += spacing
+                    if (isVertical) {
+                        rightWidgets[i].y = currentPos
+                    } else {
+                        rightWidgets[i].x = currentPos
+                    }
+                    currentPos += isVertical ? rightWidgets[i].height : rightWidgets[i].width
+                }
+            } else if (leftWidget && !rightWidget) {
+                const leftSize = isVertical ? leftWidget.height : leftWidget.width
+                if (isVertical) {
+                    leftWidget.y = parentCenter - halfSpacing - leftSize
+                } else {
+                    leftWidget.x = parentCenter - halfSpacing - leftSize
+                }
+
+                let currentPos = isVertical ? leftWidget.y : leftWidget.x
+                for (var i = leftWidgets.length - 1; i >= 0; i--) {
+                    const size = isVertical ? leftWidgets[i].height : leftWidgets[i].width
+                    currentPos -= (spacing + size)
+                    if (isVertical) {
+                        leftWidgets[i].y = currentPos
+                    } else {
+                        leftWidgets[i].x = currentPos
+                    }
+                }
+
+                currentPos = (isVertical ? leftWidget.y + leftWidget.height : leftWidget.x + leftWidget.width) + spacing
+                for (var i = 0; i < rightWidgets.length; i++) {
+                    currentPos += spacing
+                    if (isVertical) {
+                        rightWidgets[i].y = currentPos
+                    } else {
+                        rightWidgets[i].x = currentPos
+                    }
+                    currentPos += isVertical ? rightWidgets[i].height : rightWidgets[i].width
+                }
+            } else if (!leftWidget && rightWidget) {
+                if (isVertical) {
+                    rightWidget.y = parentCenter + halfSpacing
+                } else {
+                    rightWidget.x = parentCenter + halfSpacing
+                }
+
+                let currentPos = (isVertical ? rightWidget.y : rightWidget.x) - spacing
+                for (var i = leftWidgets.length - 1; i >= 0; i--) {
+                    const size = isVertical ? leftWidgets[i].height : leftWidgets[i].width
+                    currentPos -= size
+                    if (isVertical) {
+                        leftWidgets[i].y = currentPos
+                    } else {
+                        leftWidgets[i].x = currentPos
+                    }
+                    currentPos -= spacing
+                }
+
+                currentPos = (isVertical ? rightWidget.y + rightWidget.height : rightWidget.x + rightWidget.width)
+                for (var i = 0; i < rightWidgets.length; i++) {
+                    currentPos += spacing
+                    if (isVertical) {
+                        rightWidgets[i].y = currentPos
+                    } else {
+                        rightWidgets[i].x = currentPos
+                    }
+                    currentPos += isVertical ? rightWidgets[i].height : rightWidgets[i].width
+                }
+            } else if (totalWidgets === 1 && centerWidgets[0]) {
+                const size = isVertical ? centerWidgets[0].height : centerWidgets[0].width
+                if (isVertical) {
+                    centerWidgets[0].y = parentCenter - (size / 2)
+                } else {
+                    centerWidgets[0].x = parentCenter - (size / 2)
+                }
+            }
+        }
+    }
+
+    function getWidgetVisible(widgetId) {
+        const widgetVisibility = {
+            "cpuUsage": DgopService.dgopAvailable,
+            "memUsage": DgopService.dgopAvailable,
+            "cpuTemp": DgopService.dgopAvailable,
+            "gpuTemp": DgopService.dgopAvailable,
+            "network_speed_monitor": DgopService.dgopAvailable
+        }
+        return widgetVisibility[widgetId] ?? true
+    }
+
+    function getWidgetComponent(widgetId) {
+        // Build dynamic component map including plugins
+        let baseMap = {
+            "launcherButton": "launcherButtonComponent",
+            "workspaceSwitcher": "workspaceSwitcherComponent",
+            "focusedWindow": "focusedWindowComponent",
+            "runningApps": "runningAppsComponent",
+            "clock": "clockComponent",
+            "music": "mediaComponent",
+            "weather": "weatherComponent",
+            "systemTray": "systemTrayComponent",
+            "privacyIndicator": "privacyIndicatorComponent",
+            "clipboard": "clipboardComponent",
+            "cpuUsage": "cpuUsageComponent",
+            "memUsage": "memUsageComponent",
+            "diskUsage": "diskUsageComponent",
+            "cpuTemp": "cpuTempComponent",
+            "gpuTemp": "gpuTempComponent",
+            "notificationButton": "notificationButtonComponent",
+            "battery": "batteryComponent",
+            "controlCenterButton": "controlCenterButtonComponent",
+            "idleInhibitor": "idleInhibitorComponent",
+            "spacer": "spacerComponent",
+            "separator": "separatorComponent",
+            "network_speed_monitor": "networkComponent",
+            "keyboard_layout_name": "keyboardLayoutNameComponent",
+            "vpn": "vpnComponent",
+            "notepadButton": "notepadButtonComponent",
+            "colorPicker": "colorPickerComponent",
+            "systemUpdate": "systemUpdateComponent"
+        }
+
+        // For built-in components, get from components property
+        const componentKey = baseMap[widgetId]
+        if (componentKey && root.components[componentKey]) {
+            return root.components[componentKey]
+        }
+
+        // For plugin components, get from PluginService
+        let pluginMap = PluginService.getWidgetComponents()
+        return pluginMap[widgetId] || null
+    }
+
+    height: parent.height
+    width: parent.width
+    anchors.centerIn: parent
+
+    Timer {
+        id: layoutTimer
+        interval: 0
+        repeat: false
+        onTriggered: root.updateLayout()
+    }
+
+    Component.onCompleted: {
+        layoutTimer.restart()
+    }
+
+    onWidthChanged: {
+        if (width > 0) {
+            layoutTimer.restart()
+        }
+    }
+
+    onHeightChanged: {
+        if (height > 0) {
+            layoutTimer.restart()
+        }
+    }
+
+    onVisibleChanged: {
+        if (visible && (isVertical ? height : width) > 0) {
+            layoutTimer.restart()
+        }
+    }
+
+    Repeater {
+        id: centerRepeater
+        model: root.widgetsModel
+
+
+        Loader {
+            property string widgetId: model.widgetId
+            property var widgetData: model
+            property int spacerSize: model.size || 20
+
+            anchors.verticalCenter: !root.isVertical ? parent.verticalCenter : undefined
+            anchors.horizontalCenter: root.isVertical ? parent.horizontalCenter : undefined
+            active: root.getWidgetVisible(model.widgetId) && (model.widgetId !== "music" || MprisController.activePlayer !== null)
+            sourceComponent: root.getWidgetComponent(model.widgetId)
+            opacity: (model.enabled !== false) ? 1 : 0
+            asynchronous: false
+
+            onLoaded: {
+                if (!item) {
+                    return
+                }
+                item.widthChanged.connect(() => layoutTimer.restart())
+                item.heightChanged.connect(() => layoutTimer.restart())
+                if (model.widgetId === "spacer") {
+                    item.spacerSize = Qt.binding(() => model.size || 20)
+                }
+                if (root.axis && "axis" in item) {
+                    item.axis = root.axis
+                }
+                if (root.axis && "isVertical" in item) {
+                    try {
+                        item.isVertical = root.axis.isVertical
+                    } catch (e) {
+                    }
+                }
+
+                // Inject properties for plugin widgets
+                if ("section" in item) {
+                    item.section = root.section
+                }
+                if ("parentScreen" in item) {
+                    item.parentScreen = root.parentScreen
+                }
+                if ("widgetThickness" in item) {
+                    item.widgetThickness = root.widgetThickness
+                }
+                if ("barThickness" in item) {
+                    item.barThickness = root.barThickness
+                }
+
+                // Inject PluginService for plugin widgets
+                if (item.pluginService !== undefined) {
+                    console.log("CenterSection: Injecting PluginService into plugin widget:", model.widgetId)
+                    item.pluginService = PluginService
+                    if (item.loadTimezones) {
+                        console.log("CenterSection: Calling loadTimezones for widget:", model.widgetId)
+                        item.loadTimezones()
+                    }
+                }
+
+                layoutTimer.restart()
+            }
+
+            onActiveChanged: {
+                layoutTimer.restart()
+            }
+        }
+    }
+
+    Connections {
+        target: widgetsModel
+        function onCountChanged() {
+            layoutTimer.restart()
+        }
+    }
+
+    // Listen for plugin changes and refresh components
+    Connections {
+        target: PluginService
+        function onPluginLoaded(pluginId) {
+            // Force refresh of component lookups
+            for (var i = 0; i < centerRepeater.count; i++) {
+                var item = centerRepeater.itemAt(i)
+                if (item && item.widgetId === pluginId) {
+                    item.sourceComponent = root.getWidgetComponent(pluginId)
+                }
+            }
+        }
+        function onPluginUnloaded(pluginId) {
+            // Force refresh of component lookups
+            for (var i = 0; i < centerRepeater.count; i++) {
+                var item = centerRepeater.itemAt(i)
+                if (item && item.widgetId === pluginId) {
+                    item.sourceComponent = root.getWidgetComponent(pluginId)
+                }
+            }
+        }
+    }
+}

Modules/DankBar/LeftSection.qml

@@ -0,0 +1,82 @@
+import QtQuick
+import qs.Common
+
+Item {
+    id: root
+
+    property var widgetsModel: null
+    property var components: null
+    property bool noBackground: false
+    required property var axis
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+
+    readonly property bool isVertical: axis?.isVertical ?? false
+
+    implicitHeight: layoutLoader.item ? (layoutLoader.item.implicitHeight || layoutLoader.item.height) : 0
+    implicitWidth: layoutLoader.item ? (layoutLoader.item.implicitWidth || layoutLoader.item.width) : 0
+
+    Loader {
+        id: layoutLoader
+        anchors.fill: parent
+        sourceComponent: root.isVertical ? columnComp : rowComp
+    }
+
+    Component {
+        id: rowComp
+        Row {
+            spacing: noBackground ? 2 : Theme.spacingXS
+            Repeater {
+                model: root.widgetsModel
+                Item {
+                    width: widgetLoader.item ? widgetLoader.item.width : 0
+                    height: widgetLoader.item ? widgetLoader.item.height : 0
+                    WidgetHost {
+                        id: widgetLoader
+                        anchors.verticalCenter: parent.verticalCenter
+                        widgetId: model.widgetId
+                        widgetData: model
+                        spacerSize: model.size || 20
+                        components: root.components
+                        isInColumn: false
+                        axis: root.axis
+                        section: "left"
+                        parentScreen: root.parentScreen
+                        widgetThickness: root.widgetThickness
+                        barThickness: root.barThickness
+                    }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: columnComp
+        Column {
+            width: Math.max(parent.width, 200)
+            spacing: noBackground ? 2 : Theme.spacingXS
+            Repeater {
+                model: root.widgetsModel
+                Item {
+                    width: parent.width
+                    height: widgetLoader.item ? widgetLoader.item.height : 0
+                    WidgetHost {
+                        id: widgetLoader
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        widgetId: model.widgetId
+                        widgetData: model
+                        spacerSize: model.size || 20
+                        components: root.components
+                        isInColumn: true
+                        axis: root.axis
+                        section: "left"
+                        parentScreen: root.parentScreen
+                        widgetThickness: root.widgetThickness
+                        barThickness: root.barThickness
+                    }
+                }
+            }
+        }
+    }
+}

Modules/DankBar/Popouts/BatteryPopout.qml

@@ -11,7 +11,6 @@ import qs.Widgets
 DankPopout {
     id: root
 
-    property string triggerSection: "right"
     property var triggerScreen: null
 
     function setTriggerPosition(x, y, width, section, screen) {
@@ -45,9 +44,9 @@ DankPopout {
     popupWidth: 400
     popupHeight: contentLoader.item ? contentLoader.item.implicitHeight : 400
     triggerX: Screen.width - 380 - Theme.spacingL
-    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.popupDistance
+    triggerY: Theme.barHeight - 4 + SettingsData.dankBarSpacing
     triggerWidth: 70
-    positioning: "center"
+    positioning: ""
     screen: triggerScreen
     shouldBeVisible: false
     visible: shouldBeVisible

Modules/DankBar/Popouts/VpnPopout.qml

@@ -13,7 +13,6 @@ import qs.Widgets
 DankPopout {
     id: root
 
-    property string triggerSection: "right"
     property var triggerScreen: null
 
     function setTriggerPosition(x, y, width, section, screen) {
@@ -27,9 +26,9 @@ DankPopout {
     popupWidth: 360
     popupHeight: Math.min(Screen.height - 100, contentLoader.item ? contentLoader.item.implicitHeight : 260)
     triggerX: Screen.width - 380 - Theme.spacingL
-    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.popupDistance
+    triggerY: Theme.barHeight - 4 + SettingsData.dankBarSpacing
     triggerWidth: 70
-    positioning: "center"
+    positioning: ""
     screen: triggerScreen
     shouldBeVisible: false
     visible: shouldBeVisible

Modules/DankBar/RightSection.qml

@@ -0,0 +1,84 @@
+import QtQuick
+import qs.Common
+
+Item {
+    id: root
+
+    property var widgetsModel: null
+    property var components: null
+    property bool noBackground: false
+    required property var axis
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+
+    readonly property bool isVertical: axis?.isVertical ?? false
+
+    implicitHeight: layoutLoader.item ? layoutLoader.item.implicitHeight : 0
+    implicitWidth: layoutLoader.item ? layoutLoader.item.implicitWidth : 0
+
+    Loader {
+        id: layoutLoader
+        width: parent.width
+        height: parent.height
+        sourceComponent: root.isVertical ? columnComp : rowComp
+    }
+
+    Component {
+        id: rowComp
+        Row {
+            spacing: noBackground ? 2 : Theme.spacingXS
+            anchors.right: parent ? parent.right : undefined
+            Repeater {
+                model: root.widgetsModel
+                Item {
+                    width: widgetLoader.item ? widgetLoader.item.width : 0
+                    height: widgetLoader.item ? widgetLoader.item.height : 0
+                    WidgetHost {
+                        id: widgetLoader
+                        anchors.verticalCenter: parent.verticalCenter
+                        widgetId: model.widgetId
+                        widgetData: model
+                        spacerSize: model.size || 20
+                        components: root.components
+                        isInColumn: false
+                        axis: root.axis
+                        section: "right"
+                        parentScreen: root.parentScreen
+                        widgetThickness: root.widgetThickness
+                        barThickness: root.barThickness
+                    }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: columnComp
+        Column {
+            width: parent ? parent.width : 0
+            spacing: noBackground ? 2 : Theme.spacingXS
+            Repeater {
+                model: root.widgetsModel
+                Item {
+                    width: parent.width
+                    height: widgetLoader.item ? widgetLoader.item.height : 0
+                    WidgetHost {
+                        id: widgetLoader
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        widgetId: model.widgetId
+                        widgetData: model
+                        spacerSize: model.size || 20
+                        components: root.components
+                        isInColumn: true
+                        axis: root.axis
+                        section: "right"
+                        parentScreen: root.parentScreen
+                        widgetThickness: root.widgetThickness
+                        barThickness: root.barThickness
+                    }
+                }
+            }
+        }
+    }
+}

Modules/DankBar/WidgetHost.qml

@@ -0,0 +1,149 @@
+import QtQuick
+import Quickshell.Services.Mpris
+import qs.Services
+
+Loader {
+    id: root
+
+    property string widgetId: ""
+    property var widgetData: null
+    property int spacerSize: 20
+    property var components: null
+    property bool isInColumn: false
+    property var axis: null
+    property string section: "center"
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+
+    asynchronous: false
+
+    active: getWidgetVisible(widgetId, DgopService.dgopAvailable) &&
+            (widgetId !== "music" || MprisController.activePlayer !== null)
+    sourceComponent: getWidgetComponent(widgetId, components)
+    opacity: getWidgetEnabled(widgetData?.enabled) ? 1 : 0
+
+    signal contentItemReady(var item)
+
+    Binding {
+        target: root.item
+        when: root.item && "parentScreen" in root.item
+        property: "parentScreen"
+        value: root.parentScreen
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "section" in root.item
+        property: "section"
+        value: root.section
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "widgetThickness" in root.item
+        property: "widgetThickness"
+        value: root.widgetThickness
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "barThickness" in root.item
+        property: "barThickness"
+        value: root.barThickness
+        restoreMode: Binding.RestoreNone
+    }
+
+    Binding {
+        target: root.item
+        when: root.item && "axis" in root.item
+        property: "axis"
+        value: root.axis
+        restoreMode: Binding.RestoreNone
+    }
+
+    onLoaded: {
+        if (item) {
+            contentItemReady(item)
+            if (widgetId === "spacer") {
+                item.spacerSize = Qt.binding(() => spacerSize)
+            }
+            if (axis && "isVertical" in item) {
+                try {
+                    item.isVertical = axis.isVertical
+                } catch (e) {
+                }
+            }
+
+            if (item.pluginService !== undefined) {
+                console.log("WidgetHost: Injecting PluginService into plugin widget:", widgetId)
+                item.pluginService = PluginService
+                if (item.loadTimezones) {
+                    console.log("WidgetHost: Calling loadTimezones for widget:", widgetId)
+                    item.loadTimezones()
+                }
+            }
+        }
+    }
+
+    function getWidgetComponent(widgetId, components) {
+        // Build component map for built-in widgets
+        const componentMap = {
+            "launcherButton": components.launcherButtonComponent,
+            "workspaceSwitcher": components.workspaceSwitcherComponent,
+            "focusedWindow": components.focusedWindowComponent,
+            "runningApps": components.runningAppsComponent,
+            "clock": components.clockComponent,
+            "music": components.mediaComponent,
+            "weather": components.weatherComponent,
+            "systemTray": components.systemTrayComponent,
+            "privacyIndicator": components.privacyIndicatorComponent,
+            "clipboard": components.clipboardComponent,
+            "cpuUsage": components.cpuUsageComponent,
+            "memUsage": components.memUsageComponent,
+            "diskUsage": components.diskUsageComponent,
+            "cpuTemp": components.cpuTempComponent,
+            "gpuTemp": components.gpuTempComponent,
+            "notificationButton": components.notificationButtonComponent,
+            "battery": components.batteryComponent,
+            "controlCenterButton": components.controlCenterButtonComponent,
+            "idleInhibitor": components.idleInhibitorComponent,
+            "spacer": components.spacerComponent,
+            "separator": components.separatorComponent,
+            "network_speed_monitor": components.networkComponent,
+            "keyboard_layout_name": components.keyboardLayoutNameComponent,
+            "vpn": components.vpnComponent,
+            "notepadButton": components.notepadButtonComponent,
+            "colorPicker": components.colorPickerComponent,
+            "systemUpdate": components.systemUpdateComponent
+        }
+
+        // Check for built-in component first
+        if (componentMap[widgetId]) {
+            return componentMap[widgetId]
+        }
+
+        // Check for plugin component
+        let pluginMap = PluginService.getWidgetComponents()
+        return pluginMap[widgetId] || null
+    }
+
+    function getWidgetVisible(widgetId, dgopAvailable) {
+        const widgetVisibility = {
+            "cpuUsage": dgopAvailable,
+            "memUsage": dgopAvailable,
+            "cpuTemp": dgopAvailable,
+            "gpuTemp": dgopAvailable,
+            "network_speed_monitor": dgopAvailable
+        }
+
+        return widgetVisibility[widgetId] ?? true
+    }
+
+    function getWidgetEnabled(enabled) {
+        return enabled !== false
+    }
+}

Modules/DankBar/Widgets/Battery.qml

@@ -0,0 +1,126 @@
+import QtQuick
+import Quickshell.Services.UPower
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: battery
+
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
+    property bool batteryPopupVisible: false
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
+
+    signal toggleBatteryPopup()
+
+    width: isVertical ? widgetThickness : (batteryContent.implicitWidth + horizontalPadding * 2)
+    height: isVertical ? (batteryColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = batteryArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+    visible: true
+
+    Column {
+        id: batteryColumn
+        visible: battery.isVertical
+        anchors.centerIn: parent
+        spacing: 1
+
+        DankIcon {
+            name: BatteryService.getBatteryIcon()
+            size: Theme.iconSize - 8
+            color: {
+                if (!BatteryService.batteryAvailable) {
+                    return Theme.surfaceText
+                }
+
+                if (BatteryService.isLowBattery && !BatteryService.isCharging) {
+                    return Theme.error
+                }
+
+                if (BatteryService.isCharging || BatteryService.isPluggedIn) {
+                    return Theme.primary
+                }
+
+                return Theme.surfaceText
+            }
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        StyledText {
+            text: BatteryService.batteryLevel.toString()
+            font.pixelSize: Theme.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+            anchors.horizontalCenter: parent.horizontalCenter
+            visible: BatteryService.batteryAvailable
+        }
+    }
+
+    Row {
+        id: batteryContent
+        visible: !battery.isVertical
+        anchors.centerIn: parent
+        spacing: SettingsData.dankBarNoBackground ? 1 : 2
+
+        DankIcon {
+            name: BatteryService.getBatteryIcon()
+            size: Theme.iconSize - 6
+            color: {
+                if (!BatteryService.batteryAvailable) {
+                    return Theme.surfaceText;
+                }
+
+                if (BatteryService.isLowBattery && !BatteryService.isCharging) {
+                    return Theme.error;
+                }
+
+                if (BatteryService.isCharging || BatteryService.isPluggedIn) {
+                    return Theme.primary;
+                }
+
+                return Theme.surfaceText;
+            }
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        StyledText {
+            text: `${BatteryService.batteryLevel}%`
+            font.pixelSize: Theme.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+            visible: BatteryService.batteryAvailable
+        }
+
+    }
+
+    MouseArea {
+        id: batteryArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0)
+                const currentScreen = parentScreen || Screen
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
+                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+            }
+            toggleBatteryPopup();
+        }
+    }
+}

Modules/DankBar/Widgets/ClipboardButton.qml

@@ -0,0 +1,57 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Item {
+    id: root
+
+    property bool isActive: false
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
+    property string section: "right"
+    property var clipboardHistoryModal: null
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
+
+    signal clicked()
+
+    width: widgetThickness
+    height: widgetThickness
+
+    MouseArea {
+        id: clipboardArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton
+        onPressed: {
+            root.clicked()
+        }
+    }
+
+    Rectangle {
+        id: clipboardContent
+
+        anchors.fill: parent
+        radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+        color: {
+            if (SettingsData.dankBarNoBackground) {
+                return "transparent"
+            }
+
+            const baseColor = clipboardArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor
+            return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency)
+        }
+
+        DankIcon {
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            name: "content_paste"
+            size: widgetThickness - 8
+            color: Theme.surfaceText
+        }
+    }
+}

Modules/DankBar/Widgets/Clock.qml

@@ -0,0 +1,267 @@
+import QtQuick
+import Quickshell
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
+    property bool compactMode: false
+    property string section: "center"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real barThickness: 48
+    property real widgetThickness: 30
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 2 : Theme.spacingS
+
+    signal clockClicked
+
+    width: isVertical ? widgetThickness : (clockRow.implicitWidth + horizontalPadding * 2)
+    height: isVertical ? (clockColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = clockMouseArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
+    Column {
+        id: clockColumn
+        visible: root.isVertical
+        anchors.centerIn: parent
+        spacing: -2
+
+        Row {
+            spacing: 0
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            StyledText {
+                text: {
+                    if (SettingsData.use24HourClock) {
+                        return String(systemClock?.date?.getHours()).padStart(2, '0').charAt(0)
+                    } else {
+                        const hours = systemClock?.date?.getHours()
+                        const display = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours
+                        return String(display).padStart(2, '0').charAt(0)
+                    }
+                }
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.primary
+                font.weight: Font.Normal
+                width: 9
+                horizontalAlignment: Text.AlignHCenter
+            }
+
+            StyledText {
+                text: {
+                    if (SettingsData.use24HourClock) {
+                        return String(systemClock?.date?.getHours()).padStart(2, '0').charAt(1)
+                    } else {
+                        const hours = systemClock?.date?.getHours()
+                        const display = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours
+                        return String(display).padStart(2, '0').charAt(1)
+                    }
+                }
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.primary
+                font.weight: Font.Normal
+                width: 9
+                horizontalAlignment: Text.AlignHCenter
+            }
+        }
+
+        Row {
+            spacing: 0
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            StyledText {
+                text: String(systemClock?.date?.getMinutes()).padStart(2, '0').charAt(0)
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.primary
+                font.weight: Font.Normal
+                width: 9
+                horizontalAlignment: Text.AlignHCenter
+            }
+
+            StyledText {
+                text: String(systemClock?.date?.getMinutes()).padStart(2, '0').charAt(1)
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.primary
+                font.weight: Font.Normal
+                width: 9
+                horizontalAlignment: Text.AlignHCenter
+            }
+        }
+
+        Item {
+            width: 12
+            height: Theme.spacingM
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            Rectangle {
+                width: 12
+                height: 1
+                color: Theme.outlineButton
+                anchors.centerIn: parent
+            }
+        }
+
+        Row {
+            spacing: 0
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            StyledText {
+                text: {
+                    const locale = Qt.locale()
+                    const dateFormatShort = locale.dateFormat(Locale.ShortFormat)
+                    const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M')
+                    const value = dayFirst ? String(systemClock?.date?.getDate()).padStart(2, '0') : String(systemClock?.date?.getMonth() + 1).padStart(2, '0')
+                    return value.charAt(0)
+                }
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceText
+                font.weight: {
+                    const locale = Qt.locale()
+                    const dateFormatShort = locale.dateFormat(Locale.ShortFormat)
+                    const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M')
+                    return dayFirst ? Font.Normal : Font.Light
+                }
+                width: 9
+                horizontalAlignment: Text.AlignHCenter
+            }
+
+            StyledText {
+                text: {
+                    const locale = Qt.locale()
+                    const dateFormatShort = locale.dateFormat(Locale.ShortFormat)
+                    const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M')
+                    const value = dayFirst ? String(systemClock?.date?.getDate()).padStart(2, '0') : String(systemClock?.date?.getMonth() + 1).padStart(2, '0')
+                    return value.charAt(1)
+                }
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceText
+                font.weight: {
+                    const locale = Qt.locale()
+                    const dateFormatShort = locale.dateFormat(Locale.ShortFormat)
+                    const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M')
+                    return dayFirst ? Font.Normal : Font.Light
+                }
+                width: 9
+                horizontalAlignment: Text.AlignHCenter
+            }
+        }
+
+        Row {
+            spacing: 0
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            StyledText {
+                text: {
+                    const locale = Qt.locale()
+                    const dateFormatShort = locale.dateFormat(Locale.ShortFormat)
+                    const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M')
+                    const value = dayFirst ? String(systemClock?.date?.getMonth() + 1).padStart(2, '0') : String(systemClock?.date?.getDate()).padStart(2, '0')
+                    return value.charAt(0)
+                }
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceText
+                font.weight: {
+                    const locale = Qt.locale()
+                    const dateFormatShort = locale.dateFormat(Locale.ShortFormat)
+                    const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M')
+                    return dayFirst ? Font.Light : Font.Normal
+                }
+                width: 9
+                horizontalAlignment: Text.AlignHCenter
+            }
+
+            StyledText {
+                text: {
+                    const locale = Qt.locale()
+                    const dateFormatShort = locale.dateFormat(Locale.ShortFormat)
+                    const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M')
+                    const value = dayFirst ? String(systemClock?.date?.getMonth() + 1).padStart(2, '0') : String(systemClock?.date?.getDate()).padStart(2, '0')
+                    return value.charAt(1)
+                }
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceText
+                font.weight: {
+                    const locale = Qt.locale()
+                    const dateFormatShort = locale.dateFormat(Locale.ShortFormat)
+                    const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M')
+                    return dayFirst ? Font.Light : Font.Normal
+                }
+                width: 9
+                horizontalAlignment: Text.AlignHCenter
+            }
+        }
+    }
+
+    Row {
+        id: clockRow
+
+        visible: !root.isVertical
+        anchors.centerIn: parent
+        spacing: Theme.spacingS
+
+        StyledText {
+            text: {
+                const format = SettingsData.use24HourClock ? "HH:mm" : "h:mm AP"
+                return systemClock?.date?.toLocaleTimeString(Qt.locale(), format)
+            }
+            font.pixelSize: Theme.fontSizeMedium - 1
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        StyledText {
+            text: "•"
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.outlineButton
+            anchors.verticalCenter: parent.verticalCenter
+            visible: !SettingsData.clockCompactMode
+        }
+
+        StyledText {
+            text: {
+                if (SettingsData.clockDateFormat && SettingsData.clockDateFormat.length > 0) {
+                    return systemClock?.date?.toLocaleDateString(Qt.locale(), SettingsData.clockDateFormat)
+                }
+
+                return systemClock?.date?.toLocaleDateString(Qt.locale(), "ddd d")
+            }
+            font.pixelSize: Theme.fontSizeMedium - 1
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+            visible: !SettingsData.clockCompactMode
+        }
+    }
+
+    SystemClock {
+        id: systemClock
+        precision: SystemClock.Seconds
+    }
+
+    MouseArea {
+        id: clockMouseArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0)
+                const currentScreen = parentScreen || Screen
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
+                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+            }
+            root.clockClicked()
+        }
+    }
+
+}

Modules/DankBar/Widgets/ColorPicker.qml

@@ -5,21 +5,23 @@ import qs.Widgets
 Rectangle {
     id: root
 
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
     property bool isActive: false
     property string section: "right"
     property var popupTarget: null
     property var parentScreen: null
-    property real widgetHeight: 30
+    property real widgetThickness: 30
-    property real barHeight: 48
+    property real barThickness: 48
-    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
     signal clicked()
 
-    width: colorPickerIcon.width + horizontalPadding * 2
+    width: isVertical ? widgetThickness : (colorPickerIcon.width + horizontalPadding * 2)
-    height: widgetHeight
+    height: isVertical ? (colorPickerIcon.height + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     color: {
-        if (SettingsData.topBarNoBackground) {
+        if (SettingsData.dankBarNoBackground) {
             return "transparent";
         }
 
@@ -43,12 +45,10 @@ Rectangle {
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
         onPressed: {
-            console.log("Color picker button clicked!")
             root.colorPickerRequested();
         }
     }
 
-    // Signal to notify TopBar to open color picker
     signal colorPickerRequested()
 
 }

Modules/DankBar/Widgets/ControlCenterButton.qml

@@ -6,6 +6,8 @@ import qs.Widgets
 Rectangle {
     id: root
 
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
     property bool isActive: false
     property string section: "right"
     property var popupTarget: null
@@ -14,17 +16,17 @@ Rectangle {
     property bool showNetworkIcon: SettingsData.controlCenterShowNetworkIcon
     property bool showBluetoothIcon: SettingsData.controlCenterShowBluetoothIcon
     property bool showAudioIcon: SettingsData.controlCenterShowAudioIcon
-    property real widgetHeight: 30
+    property real widgetThickness: 30
-    property real barHeight: 48
+    property real barThickness: 48
-    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
     signal clicked()
 
-    width: controlIndicators.implicitWidth + horizontalPadding * 2
+    width: isVertical ? widgetThickness : (controlIndicators.implicitWidth + horizontalPadding * 2)
-    height: widgetHeight
+    height: isVertical ? (controlColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     color: {
-        if (SettingsData.topBarNoBackground) {
+        if (SettingsData.dankBarNoBackground) {
             return "transparent";
         }
 
@@ -32,9 +34,106 @@ Rectangle {
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
 
+    Column {
+        id: controlColumn
+        visible: root.isVertical
+        anchors.centerIn: parent
+        spacing: Theme.spacingXS
+
+        DankIcon {
+            name: {
+                if (NetworkService.wifiToggling) {
+                    return "sync"
+                }
+
+                if (NetworkService.networkStatus === "ethernet") {
+                    return "lan"
+                }
+
+                return NetworkService.wifiSignalIcon
+            }
+            size: Theme.iconSize - 8
+            color: {
+                if (NetworkService.wifiToggling) {
+                    return Theme.primary
+                }
+
+                return NetworkService.networkStatus !== "disconnected" ? Theme.primary : Theme.outlineButton
+            }
+            anchors.horizontalCenter: parent.horizontalCenter
+            visible: root.showNetworkIcon
+        }
+
+        DankIcon {
+            name: "bluetooth"
+            size: Theme.iconSize - 8
+            color: BluetoothService.enabled ? Theme.primary : Theme.outlineButton
+            anchors.horizontalCenter: parent.horizontalCenter
+            visible: root.showBluetoothIcon && BluetoothService.available && BluetoothService.enabled
+        }
+
+        Rectangle {
+            width: audioIconV.implicitWidth + 4
+            height: audioIconV.implicitHeight + 4
+            color: "transparent"
+            anchors.horizontalCenter: parent.horizontalCenter
+            visible: root.showAudioIcon
+
+            DankIcon {
+                id: audioIconV
+
+                name: {
+                    if (AudioService.sink && AudioService.sink.audio) {
+                        if (AudioService.sink.audio.muted || AudioService.sink.audio.volume === 0) {
+                            return "volume_off"
+                        } else if (AudioService.sink.audio.volume * 100 < 33) {
+                            return "volume_down"
+                        } else {
+                            return "volume_up"
+                        }
+                    }
+                    return "volume_up"
+                }
+                size: Theme.iconSize - 8
+                color: Theme.surfaceText
+                anchors.centerIn: parent
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                hoverEnabled: true
+                acceptedButtons: Qt.NoButton
+                onWheel: function(wheelEvent) {
+                    let delta = wheelEvent.angleDelta.y
+                    let currentVolume = (AudioService.sink && AudioService.sink.audio && AudioService.sink.audio.volume * 100) || 0
+                    let newVolume
+                    if (delta > 0) {
+                        newVolume = Math.min(100, currentVolume + 5)
+                    } else {
+                        newVolume = Math.max(0, currentVolume - 5)
+                    }
+                    if (AudioService.sink && AudioService.sink.audio) {
+                        AudioService.sink.audio.muted = false
+                        AudioService.sink.audio.volume = newVolume / 100
+                        AudioService.volumeChanged()
+                    }
+                    wheelEvent.accepted = true
+                }
+            }
+        }
+
+        DankIcon {
+            name: "settings"
+            size: Theme.iconSize - 8
+            color: controlCenterArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText
+            anchors.horizontalCenter: parent.horizontalCenter
+            visible: !root.showNetworkIcon && !root.showBluetoothIcon && !root.showAudioIcon
+        }
+    }
+
     Row {
         id: controlIndicators
-
+        visible: !root.isVertical
         anchors.centerIn: parent
         spacing: Theme.spacingXS
 
@@ -156,11 +255,10 @@ Rectangle {
         cursorShape: Qt.PointingHandCursor
         onPressed: {
             if (popupTarget && popupTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0);
+                const globalPos = mapToGlobal(0, 0)
-                const currentScreen = parentScreen || Screen;
+                const currentScreen = parentScreen || Screen
-                const screenX = currentScreen.x || 0;
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
-                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
-                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
             root.clicked();
         }

Modules/DankBar/Widgets/CpuMonitor.qml

@@ -7,21 +7,23 @@ import qs.Widgets
 Rectangle {
     id: root
 
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
     property bool showPercentage: true
     property bool showIcon: true
     property var toggleProcessList
     property string section: "right"
     property var popupTarget: null
     property var parentScreen: null
-    property real barHeight: 48
+    property real barThickness: 48
-    property real widgetHeight: 30
+    property real widgetThickness: 30
-    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
-    width: cpuContent.implicitWidth + horizontalPadding * 2
+    width: isVertical ? widgetThickness : (cpuContent.implicitWidth + horizontalPadding * 2)
-    height: widgetHeight
+    height: isVertical ? (cpuColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     color: {
-        if (SettingsData.topBarNoBackground) {
+        if (SettingsData.dankBarNoBackground) {
             return "transparent";
         }
 
@@ -43,11 +45,10 @@ Rectangle {
         cursorShape: Qt.PointingHandCursor
         onPressed: {
             if (popupTarget && popupTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0);
+                const globalPos = mapToGlobal(0, 0)
-                const currentScreen = parentScreen || Screen;
+                const currentScreen = parentScreen || Screen
-                const screenX = currentScreen.x || 0;
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
-                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
-                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
             DgopService.setSortBy("cpu");
             if (root.toggleProcessList) {
@@ -57,9 +58,47 @@ Rectangle {
         }
     }
 
+    Column {
+        id: cpuColumn
+        visible: root.isVertical
+        anchors.centerIn: parent
+        spacing: 1
+
+        DankIcon {
+            name: "memory"
+            size: Theme.iconSize - 8
+            color: {
+                if (DgopService.cpuUsage > 80) {
+                    return Theme.tempDanger;
+                }
+
+                if (DgopService.cpuUsage > 60) {
+                    return Theme.tempWarning;
+                }
+
+                return Theme.surfaceText;
+            }
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        StyledText {
+            text: {
+                if (DgopService.cpuUsage === undefined || DgopService.cpuUsage === null || DgopService.cpuUsage === 0) {
+                    return "--";
+                }
+
+                return DgopService.cpuUsage.toFixed(0);
+            }
+            font.pixelSize: Theme.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+
     Row {
         id: cpuContent
-
+        visible: !root.isVertical
         anchors.centerIn: parent
         spacing: 3
 

Modules/DankBar/Widgets/CpuTemperature.qml

@@ -7,21 +7,23 @@ import qs.Widgets
 Rectangle {
     id: root
 
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
     property bool showPercentage: true
     property bool showIcon: true
     property var toggleProcessList
     property string section: "right"
     property var popupTarget: null
     property var parentScreen: null
-    property real barHeight: 48
+    property real barThickness: 48
-    property real widgetHeight: 30
+    property real widgetThickness: 30
-    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
-    width: cpuTempContent.implicitWidth + horizontalPadding * 2
+    width: isVertical ? widgetThickness : (cpuTempContent.implicitWidth + horizontalPadding * 2)
-    height: widgetHeight
+    height: isVertical ? (cpuTempColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     color: {
-        if (SettingsData.topBarNoBackground) {
+        if (SettingsData.dankBarNoBackground) {
             return "transparent";
         }
 
@@ -43,11 +45,10 @@ Rectangle {
         cursorShape: Qt.PointingHandCursor
         onPressed: {
             if (popupTarget && popupTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0);
+                const globalPos = mapToGlobal(0, 0)
-                const currentScreen = parentScreen || Screen;
+                const currentScreen = parentScreen || Screen
-                const screenX = currentScreen.x || 0;
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
-                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
-                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
             DgopService.setSortBy("cpu");
             if (root.toggleProcessList) {
@@ -57,9 +58,47 @@ Rectangle {
         }
     }
 
+    Column {
+        id: cpuTempColumn
+        visible: root.isVertical
+        anchors.centerIn: parent
+        spacing: 1
+
+        DankIcon {
+            name: "memory"
+            size: Theme.iconSize - 8
+            color: {
+                if (DgopService.cpuTemperature > 85) {
+                    return Theme.tempDanger;
+                }
+
+                if (DgopService.cpuTemperature > 69) {
+                    return Theme.tempWarning;
+                }
+
+                return Theme.surfaceText;
+            }
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        StyledText {
+            text: {
+                if (DgopService.cpuTemperature === undefined || DgopService.cpuTemperature === null || DgopService.cpuTemperature < 0) {
+                    return "--";
+                }
+
+                return Math.round(DgopService.cpuTemperature).toString();
+            }
+            font.pixelSize: Theme.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+
     Row {
         id: cpuTempContent
-
+        visible: !root.isVertical
         anchors.centerIn: parent
         spacing: 3
 

Modules/DankBar/Widgets/DiskUsage.qml

@@ -7,10 +7,13 @@ import qs.Widgets
 Rectangle {
     id: root
 
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
     property var widgetData: null
-    property real widgetHeight: 30
+    property var parentScreen: null
+    property real widgetThickness: 30
     property string mountPath: (widgetData && widgetData.mountPath !== undefined) ? widgetData.mountPath : "/"
-    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
     property var selectedMount: {
         if (!DgopService.diskMounts || DgopService.diskMounts.length === 0) {
@@ -46,11 +49,11 @@ Rectangle {
         return parseFloat(percentStr) || 0
     }
 
-    width: diskContent.implicitWidth + horizontalPadding * 2
+    width: isVertical ? widgetThickness : (diskContent.implicitWidth + horizontalPadding * 2)
-    height: widgetHeight
+    height: isVertical ? (diskColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     color: {
-        if (SettingsData.topBarNoBackground) {
+        if (SettingsData.dankBarNoBackground) {
             return "transparent"
         }
 
@@ -100,10 +103,77 @@ Rectangle {
         target: SettingsData
     }
 
+    Loader {
+        id: tooltipLoader
+        active: false
+        sourceComponent: DankTooltip {}
+    }
+
+    MouseArea {
+        id: diskArea
+        anchors.fill: parent
+        hoverEnabled: root.isVertical
+        onEntered: {
+            if (root.isVertical && root.selectedMount) {
+                tooltipLoader.active = true
+                if (tooltipLoader.item) {
+                    const globalPos = mapToGlobal(width / 2, height / 2)
+                    const currentScreen = root.parentScreen || Screen
+                    const screenX = currentScreen ? currentScreen.x : 0
+                    const screenY = currentScreen ? currentScreen.y : 0
+                    const relativeY = globalPos.y - screenY
+                    const tooltipX = root.axis?.edge === "left" ? (Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS) : (currentScreen.width - Theme.barHeight - SettingsData.dankBarSpacing - Theme.spacingXS)
+                    const isLeft = root.axis?.edge === "left"
+                    tooltipLoader.item.show(root.selectedMount.mount, screenX + tooltipX, relativeY, currentScreen, isLeft, !isLeft)
+                }
+            }
+        }
+        onExited: {
+            if (tooltipLoader.item) {
+                tooltipLoader.item.hide()
+            }
+            tooltipLoader.active = false
+        }
+    }
+
+    Column {
+        id: diskColumn
+        visible: root.isVertical
+        anchors.centerIn: parent
+        spacing: 1
+
+        DankIcon {
+            name: "storage"
+            size: Theme.iconSize - 8
+            color: {
+                if (root.diskUsagePercent > 90) {
+                    return Theme.tempDanger
+                }
+                if (root.diskUsagePercent > 75) {
+                    return Theme.tempWarning
+                }
+                return Theme.surfaceText
+            }
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        StyledText {
+            text: {
+                if (root.diskUsagePercent === undefined || root.diskUsagePercent === null || root.diskUsagePercent === 0) {
+                    return "--"
+                }
+                return root.diskUsagePercent.toFixed(0)
+            }
+            font.pixelSize: Theme.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
 
     Row {
         id: diskContent
-
+        visible: !root.isVertical
         anchors.centerIn: parent
         spacing: 3
 

Modules/DankBar/Widgets/FocusedApp.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import Quickshell
 import Quickshell.Wayland
+import Quickshell.Widgets
 import Quickshell.Hyprland
 import qs.Common
 import qs.Services
@@ -9,14 +10,45 @@ import qs.Widgets
 Rectangle {
     id: root
 
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
+    property var parentScreen
     property bool compactMode: SettingsData.focusedWindowCompactMode
     property int availableWidth: 400
-    property real widgetHeight: 30
+    property real widgetThickness: 30
-    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 2 : Theme.spacingS
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 2 : Theme.spacingS
     readonly property int baseWidth: contentRow.implicitWidth + horizontalPadding * 2
     readonly property int maxNormalWidth: 456
     readonly property int maxCompactWidth: 288
     readonly property Toplevel activeWindow: ToplevelManager.activeToplevel
+    property var activeDesktopEntry: null
+
+    Component.onCompleted: {
+        updateDesktopEntry()
+    }
+
+    Connections {
+        target: DesktopEntries
+        function onApplicationsChanged() {
+            root.updateDesktopEntry()
+        }
+    }
+
+    Connections {
+        target: root
+        function onActiveWindowChanged() {
+            root.updateDesktopEntry()
+        }
+    }
+
+    function updateDesktopEntry() {
+        if (activeWindow && activeWindow.appId) {
+            const moddedId = Paths.moddedAppId(activeWindow.appId)
+            activeDesktopEntry = DesktopEntries.heuristicLookup(moddedId)
+        } else {
+            activeDesktopEntry = null
+        }
+    }
     readonly property bool hasWindowsOnCurrentWorkspace: {
         if (CompositorService.isNiri) {
             let currentWorkspaceId = null
@@ -54,15 +86,15 @@ Rectangle {
         return activeWindow && activeWindow.title
     }
 
-    width: !hasWindowsOnCurrentWorkspace ? 0 : (compactMode ? Math.min(baseWidth, maxCompactWidth) : Math.min(baseWidth, maxNormalWidth))
+    width: !hasWindowsOnCurrentWorkspace ? 0 : (isVertical ? widgetThickness : (compactMode ? Math.min(baseWidth, maxCompactWidth) : Math.min(baseWidth, maxNormalWidth)))
-    height: widgetHeight
+    height: !hasWindowsOnCurrentWorkspace ? 0 : (isVertical ? widgetThickness : widgetThickness)
-    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     color: {
         if (!activeWindow || !activeWindow.title) {
             return "transparent";
         }
 
-        if (SettingsData.topBarNoBackground) {
+        if (SettingsData.dankBarNoBackground) {
             return "transparent";
         }
 
@@ -72,11 +104,61 @@ Rectangle {
     clip: true
     visible: hasWindowsOnCurrentWorkspace
 
+    IconImage {
+        id: appIcon
+        anchors.centerIn: parent
+        width: 18
+        height: 18
+        visible: root.isVertical && activeWindow && status === Image.Ready
+        source: {
+            if (!activeWindow || !activeWindow.appId) return ""
+            const moddedId = Paths.moddedAppId(activeWindow.appId)
+            if (moddedId.toLowerCase().includes("steam_app")) return ""
+            return Quickshell.iconPath(activeDesktopEntry?.icon, true)
+        }
+        smooth: true
+        mipmap: true
+        asynchronous: true
+    }
+
+    DankIcon {
+        anchors.centerIn: parent
+        size: 18
+        name: "sports_esports"
+        color: Theme.surfaceText
+        visible: {
+            if (!root.isVertical || !activeWindow || !activeWindow.appId) return false
+            const moddedId = Paths.moddedAppId(activeWindow.appId)
+            return moddedId.toLowerCase().includes("steam_app")
+        }
+    }
+
+    Text {
+        anchors.centerIn: parent
+        visible: {
+            if (!root.isVertical || !activeWindow || !activeWindow.appId) return false
+            if (appIcon.status === Image.Ready) return false
+            const moddedId = Paths.moddedAppId(activeWindow.appId)
+            return !moddedId.toLowerCase().includes("steam_app")
+        }
+        text: {
+            if (!activeWindow || !activeWindow.appId) return "?"
+            if (activeDesktopEntry && activeDesktopEntry.name) {
+                return activeDesktopEntry.name.charAt(0).toUpperCase()
+            }
+            return activeWindow.appId.charAt(0).toUpperCase()
+        }
+        font.pixelSize: 10
+        color: Theme.surfaceText
+        font.weight: Font.Medium
+    }
+
     Row {
         id: contentRow
 
         anchors.centerIn: parent
         spacing: Theme.spacingS
+        visible: !root.isVertical
 
         StyledText {
             id: appText
@@ -117,7 +199,6 @@ Rectangle {
                     return title;
                 }
 
-                // Remove app name from end of title if it exists there
                 if (title.endsWith(" - " + appName)) {
                     return title.substring(0, title.length - (" - " + appName).length);
                 }
@@ -144,7 +225,39 @@ Rectangle {
         id: mouseArea
 
         anchors.fill: parent
-        hoverEnabled: true
+        hoverEnabled: root.isVertical
+        onEntered: {
+            if (root.isVertical && activeWindow && activeWindow.appId && root.parentScreen) {
+                tooltipLoader.active = true
+                if (tooltipLoader.item) {
+                    const globalPos = mapToGlobal(width / 2, height / 2)
+                    const currentScreen = root.parentScreen
+                    const screenX = currentScreen ? currentScreen.x : 0
+                    const screenY = currentScreen ? currentScreen.y : 0
+                    const relativeY = globalPos.y - screenY
+                    const tooltipX = root.axis?.edge === "left" ? (Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS) : (currentScreen.width - Theme.barHeight - SettingsData.dankBarSpacing - Theme.spacingXS)
+
+                    const appName = activeDesktopEntry && activeDesktopEntry.name ? activeDesktopEntry.name : activeWindow.appId
+                    const title = activeWindow.title || ""
+                    const tooltipText = appName + (title ? " • " + title : "")
+
+                    const isLeft = root.axis?.edge === "left"
+                    tooltipLoader.item.show(tooltipText, screenX + tooltipX, relativeY, currentScreen, isLeft, !isLeft)
+                }
+            }
+        }
+        onExited: {
+            if (tooltipLoader.item) {
+                tooltipLoader.item.hide()
+            }
+            tooltipLoader.active = false
+        }
+    }
+
+    Loader {
+        id: tooltipLoader
+        active: false
+        sourceComponent: DankTooltip {}
     }
 
 

Modules/DankBar/Widgets/GpuTemperature.qml

@@ -7,6 +7,8 @@ import qs.Widgets
 Rectangle {
     id: root
 
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
     property bool showPercentage: true
     property bool showIcon: true
     property var toggleProcessList
@@ -14,10 +16,10 @@ Rectangle {
     property var popupTarget: null
     property var parentScreen: null
     property var widgetData: null
-    property real barHeight: 48
+    property real barThickness: 48
-    property real widgetHeight: 30
+    property real widgetThickness: 30
     property int selectedGpuIndex: (widgetData && widgetData.selectedGpuIndex !== undefined) ? widgetData.selectedGpuIndex : 0
-    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
     property real displayTemp: {
         if (!DgopService.availableGpus || DgopService.availableGpus.length === 0) {
             return 0;
@@ -37,11 +39,11 @@ Rectangle {
             const sectionId = sections[s];
             let widgets = [];
             if (sectionId === "left") {
-                widgets = SettingsData.topBarLeftWidgets.slice();
+                widgets = SettingsData.dankBarLeftWidgets.slice();
             } else if (sectionId === "center") {
-                widgets = SettingsData.topBarCenterWidgets.slice();
+                widgets = SettingsData.dankBarCenterWidgets.slice();
             } else if (sectionId === "right") {
-                widgets = SettingsData.topBarRightWidgets.slice();
+                widgets = SettingsData.dankBarRightWidgets.slice();
             }
             for (let i = 0; i < widgets.length; i++) {
                 const widget = widgets[i];
@@ -53,11 +55,11 @@ Rectangle {
                         "pciId": pciId
                     };
                     if (sectionId === "left") {
-                        SettingsData.setTopBarLeftWidgets(widgets);
+                        SettingsData.setDankBarLeftWidgets(widgets);
                     } else if (sectionId === "center") {
-                        SettingsData.setTopBarCenterWidgets(widgets);
+                        SettingsData.setDankBarCenterWidgets(widgets);
                     } else if (sectionId === "right") {
-                        SettingsData.setTopBarRightWidgets(widgets);
+                        SettingsData.setDankBarRightWidgets(widgets);
                     }
                     return ;
                 }
@@ -65,11 +67,11 @@ Rectangle {
         }
     }
 
-    width: gpuTempContent.implicitWidth + horizontalPadding * 2
+    width: isVertical ? widgetThickness : (gpuTempContent.implicitWidth + horizontalPadding * 2)
-    height: widgetHeight
+    height: isVertical ? (gpuTempColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     color: {
-        if (SettingsData.topBarNoBackground) {
+        if (SettingsData.dankBarNoBackground) {
             return "transparent";
         }
 
@@ -78,20 +80,14 @@ Rectangle {
     }
     Component.onCompleted: {
         DgopService.addRef(["gpu"]);
-        console.log("GpuTemperature widget - pciId:", widgetData ? widgetData.pciId : "no widgetData", "selectedGpuIndex:", widgetData ? widgetData.selectedGpuIndex : "no widgetData");
-        // Add this widget's PCI ID to the service
         if (widgetData && widgetData.pciId) {
-            console.log("Adding GPU PCI ID to service:", widgetData.pciId);
             DgopService.addGpuPciId(widgetData.pciId);
         } else {
-            console.log("No PCI ID in widget data, starting auto-detection");
-            // No PCI ID saved, auto-detect and save the first GPU
             autoSaveTimer.running = true;
         }
     }
     Component.onDestruction: {
         DgopService.removeRef(["gpu"]);
-        // Remove this widget's PCI ID from the service
         if (widgetData && widgetData.pciId) {
             DgopService.removeGpuPciId(widgetData.pciId);
         }
@@ -117,11 +113,10 @@ Rectangle {
         cursorShape: Qt.PointingHandCursor
         onPressed: {
             if (popupTarget && popupTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0);
+                const globalPos = mapToGlobal(0, 0)
-                const currentScreen = parentScreen || Screen;
+                const currentScreen = parentScreen || Screen
-                const screenX = currentScreen.x || 0;
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
-                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
-                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
             DgopService.setSortBy("cpu");
             if (root.toggleProcessList) {
@@ -131,9 +126,47 @@ Rectangle {
         }
     }
 
+    Column {
+        id: gpuTempColumn
+        visible: root.isVertical
+        anchors.centerIn: parent
+        spacing: 1
+
+        DankIcon {
+            name: "auto_awesome_mosaic"
+            size: Theme.iconSize - 8
+            color: {
+                if (root.displayTemp > 80) {
+                    return Theme.tempDanger;
+                }
+
+                if (root.displayTemp > 65) {
+                    return Theme.tempWarning;
+                }
+
+                return Theme.surfaceText;
+            }
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        StyledText {
+            text: {
+                if (root.displayTemp === undefined || root.displayTemp === null || root.displayTemp === 0) {
+                    return "--";
+                }
+
+                return Math.round(root.displayTemp).toString();
+            }
+            font.pixelSize: Theme.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+
     Row {
         id: gpuTempContent
-
+        visible: !root.isVertical
         anchors.centerIn: parent
         spacing: 3
 

Modules/DankBar/Widgets/IdleInhibitor.qml

@@ -8,17 +8,19 @@ import qs.Widgets
 Rectangle {
     id: root
 
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
     property string section: "right"
     property var popupTarget: null
     property var parentScreen: null
-    property real widgetHeight: 30
+    property real widgetThickness: 30
-    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
-    width: idleIcon.width + horizontalPadding * 2
+    width: isVertical ? widgetThickness : (idleIcon.width + horizontalPadding * 2)
-    height: widgetHeight
+    height: isVertical ? (idleIcon.height + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     color: {
-        if (SettingsData.topBarNoBackground) {
+        if (SettingsData.dankBarNoBackground) {
             return "transparent";
         }
 

Modules/DankBar/Widgets/KeyboardLayoutName.qml

@@ -10,15 +10,18 @@ import qs.Widgets
 Rectangle {
     id: root
 
-    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
+    property real widgetThickness: 30
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
     property string currentLayout: ""
     property string hyprlandKeyboard: ""
 
-    width: contentRow.implicitWidth + horizontalPadding * 2
+    width: isVertical ? widgetThickness : (contentRow.implicitWidth + horizontalPadding * 2)
-    height: widgetHeight
+    height: isVertical ? (contentColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     color: {
-        if (SettingsData.topBarNoBackground) {
+        if (SettingsData.dankBarNoBackground) {
             return "transparent";
         }
 
@@ -47,11 +50,42 @@ Rectangle {
         }
     }
 
+    Column {
+        id: contentColumn
+
+        anchors.centerIn: parent
+        spacing: 1
+        visible: root.isVertical
+
+        DankIcon {
+            name: "keyboard"
+            size: Theme.iconSize - 8
+            color: Theme.surfaceText
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        StyledText {
+            text: {
+                if (!currentLayout) return ""
+                const parts = currentLayout.split(" ")
+                if (parts.length > 0) {
+                    return parts[0].substring(0, 2).toUpperCase()
+                }
+                return currentLayout.substring(0, 2).toUpperCase()
+            }
+            font.pixelSize: Theme.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+
     Row {
         id: contentRow
 
         anchors.centerIn: parent
         spacing: Theme.spacingS
+        visible: !root.isVertical
 
         StyledText {
             text: currentLayout

Modules/DankBar/Widgets/LauncherButton.qml

@@ -7,17 +7,19 @@ Item {
     id: root
 
     property bool isActive: false
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
     property string section: "left"
     property var popupTarget: null
     property var parentScreen: null
-    property real widgetHeight: 30
+    property real widgetThickness: 30
-    property real barHeight: 48
+    property real barThickness: 48
-    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
     signal clicked()
 
-    width: Theme.iconSize + horizontalPadding * 2
+    width: widgetThickness
-    height: widgetHeight
+    height: widgetThickness
 
     MouseArea {
         id: launcherArea
@@ -27,14 +29,13 @@ Item {
         cursorShape: Qt.PointingHandCursor
         acceptedButtons: Qt.LeftButton
         onPressed: {
+            root.clicked();
             if (popupTarget && popupTarget.setTriggerPosition) {
                 const globalPos = mapToGlobal(0, 0);
                 const currentScreen = parentScreen || Screen;
-                const screenX = currentScreen.x || 0;
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width);
-                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen);
-                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
-            root.clicked();
         }
     }
 
@@ -42,9 +43,9 @@ Item {
         id: launcherContent
 
         anchors.fill: parent
-        radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+        radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
         color: {
-            if (SettingsData.topBarNoBackground) {
+            if (SettingsData.dankBarNoBackground) {
                 return "transparent";
             }
 
@@ -55,8 +56,8 @@ Item {
         SystemLogo {
             visible: SettingsData.useOSLogo
             anchors.centerIn: parent
-            width: Theme.iconSize - 3
+            width: widgetThickness - 8
-            height: Theme.iconSize - 3
+            height: widgetThickness - 8
             colorOverride: SettingsData.osLogoColorOverride
             brightnessOverride: SettingsData.osLogoBrightness
             contrastOverride: SettingsData.osLogoContrast
@@ -64,9 +65,11 @@ Item {
 
         DankIcon {
             visible: !SettingsData.useOSLogo
-            anchors.centerIn: parent
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenterOffset: 1
             name: "apps"
-            size: Theme.iconSize - 6
+            size: widgetThickness - 8
             color: Theme.surfaceText
         }
     }

Modules/DankBar/Widgets/Media.qml

@@ -7,6 +7,8 @@ import qs.Widgets
 Rectangle {
     id: root
 
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
     readonly property MprisPlayer activePlayer: MprisController.activePlayer
     readonly property bool playerAvailable: activePlayer !== null
     property bool compactMode: false
@@ -21,27 +23,36 @@ Rectangle {
         }
     }
     readonly property int currentContentWidth: {
-        // Calculate actual content width:
+        if (isVertical) {
-        // AudioViz (20) + spacing + [text + spacing] + controls (prev:20 + spacing + play:24 + spacing + next:20) + padding
+            return widgetThickness;
+        }
         const controlsWidth = 20 + Theme.spacingXS + 24 + Theme.spacingXS + 20;
-        // ~72px total
         const audioVizWidth = 20;
         const contentWidth = audioVizWidth + Theme.spacingXS + controlsWidth;
         return contentWidth + (textWidth > 0 ? textWidth + Theme.spacingXS : 0) + horizontalPadding * 2;
     }
+    readonly property int currentContentHeight: {
+        if (!isVertical) {
+            return widgetThickness;
+        }
+        const audioVizHeight = 20;
+        const playButtonHeight = 24;
+        return audioVizHeight + Theme.spacingXS + playButtonHeight + horizontalPadding * 2;
+    }
     property string section: "center"
     property var popupTarget: null
     property var parentScreen: null
-    property real barHeight: 48
+    property real barThickness: 48
-    property real widgetHeight: 30
+    property real widgetThickness: 30
-    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
     signal clicked()
 
-    height: widgetHeight
+    width: currentContentWidth
-    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+    height: currentContentHeight
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     color: {
-        if (SettingsData.topBarNoBackground) {
+        if (SettingsData.dankBarNoBackground) {
             return "transparent";
         }
 
@@ -57,6 +68,7 @@ Rectangle {
                 target: root
                 opacity: 1
                 width: currentContentWidth
+                height: currentContentHeight
             }
 
         },
@@ -67,7 +79,8 @@ Rectangle {
             PropertyChanges {
                 target: root
                 opacity: 0
-                width: 0
+                width: isVertical ? widgetThickness : 0
+                height: isVertical ? 0 : widgetThickness
             }
 
         }
@@ -83,7 +96,7 @@ Rectangle {
                 }
 
                 NumberAnimation {
-                    properties: "opacity,width"
+                    properties: isVertical ? "opacity,height" : "opacity,width"
                     duration: Theme.shortDuration
                     easing.type: Theme.standardEasing
                 }
@@ -96,7 +109,7 @@ Rectangle {
             to: "shown"
 
             NumberAnimation {
-                properties: "opacity,width"
+                properties: isVertical ? "opacity,height" : "opacity,width"
                 duration: Theme.shortDuration
                 easing.type: Theme.standardEasing
             }
@@ -104,9 +117,107 @@ Rectangle {
         }
     ]
 
+    Column {
+        id: verticalLayout
+        visible: root.isVertical
+        anchors.centerIn: parent
+        spacing: Theme.spacingXS
+
+        AudioVisualization {
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            MouseArea {
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    if (root.popupTarget && root.popupTarget.setTriggerPosition) {
+                        const globalPos = parent.mapToGlobal(0, 0)
+                        const currentScreen = root.parentScreen || Screen
+                        const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, root.barThickness, parent.width)
+                        root.popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen)
+                    }
+                    root.clicked()
+                }
+                onEntered: {
+                    tooltipLoader.active = true
+                    if (tooltipLoader.item && activePlayer) {
+                        const globalPos = parent.mapToGlobal(parent.width / 2, parent.height / 2)
+                        const screenX = root.parentScreen ? root.parentScreen.x : 0
+                        const screenY = root.parentScreen ? root.parentScreen.y : 0
+                        const relativeY = globalPos.y - screenY
+                        const tooltipX = root.axis?.edge === "left" ? (Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS) : (root.parentScreen.width - Theme.barHeight - SettingsData.dankBarSpacing - Theme.spacingXS)
+
+                        let identity = activePlayer.identity || ""
+                        let isWebMedia = identity.toLowerCase().includes("firefox") || identity.toLowerCase().includes("chrome") || identity.toLowerCase().includes("chromium")
+                        let title = activePlayer.trackTitle || "Unknown Track"
+                        let subtitle = ""
+                        if (isWebMedia && activePlayer.trackTitle) {
+                            subtitle = activePlayer.trackArtist || identity
+                        } else {
+                            subtitle = activePlayer.trackArtist || ""
+                        }
+                        let tooltipText = subtitle.length > 0 ? title + " • " + subtitle : title
+
+                        const isLeft = root.axis?.edge === "left"
+                        tooltipLoader.item.show(tooltipText, screenX + tooltipX, relativeY, root.parentScreen, isLeft, !isLeft)
+                    }
+                }
+                onExited: {
+                    if (tooltipLoader.item) {
+                        tooltipLoader.item.hide()
+                    }
+                    tooltipLoader.active = false
+                }
+            }
+        }
+
+        Rectangle {
+            width: 24
+            height: 24
+            radius: 12
+            anchors.horizontalCenter: parent.horizontalCenter
+            color: activePlayer && activePlayer.playbackState === 1 ? Theme.primary : Theme.primaryHover
+            visible: root.playerAvailable
+            opacity: activePlayer ? 1 : 0.3
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: activePlayer && activePlayer.playbackState === 1 ? "pause" : "play_arrow"
+                size: 14
+                color: activePlayer && activePlayer.playbackState === 1 ? Theme.background : Theme.primary
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                enabled: root.playerAvailable
+                hoverEnabled: enabled
+                cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+                acceptedButtons: Qt.LeftButton | Qt.MiddleButton | Qt.RightButton
+                onClicked: (mouse) => {
+                    if (!activePlayer) return
+                    if (mouse.button === Qt.LeftButton) {
+                        activePlayer.togglePlaying()
+                    } else if (mouse.button === Qt.MiddleButton) {
+                        activePlayer.previous()
+                    } else if (mouse.button === Qt.RightButton) {
+                        activePlayer.next()
+                    }
+                }
+            }
+        }
+    }
+
+    Loader {
+        id: tooltipLoader
+        active: false
+        sourceComponent: DankTooltip {}
+    }
+
     Row {
         id: mediaRow
 
+        visible: !root.isVertical
         anchors.centerIn: parent
         spacing: Theme.spacingXS
 
@@ -208,13 +319,12 @@ Rectangle {
                     cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
                     onPressed: {
                         if (root.popupTarget && root.popupTarget.setTriggerPosition) {
-                            const globalPos = mapToGlobal(0, 0);
+                            const globalPos = mapToGlobal(0, 0)
-                            const currentScreen = root.parentScreen || Screen;
+                            const currentScreen = root.parentScreen || Screen
-                            const screenX = currentScreen.x || 0;
+                            const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, root.width)
-                            const relativeX = globalPos.x - screenX;
+                            root.popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen)
-                            root.popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, root.width, root.section, currentScreen);
                         }
-                        root.clicked();
+                        root.clicked()
                     }
                 }
 
@@ -330,7 +440,13 @@ Rectangle {
             duration: Theme.shortDuration
             easing.type: Theme.standardEasing
         }
+    }
 
+    Behavior on height {
+        NumberAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
     }
 
 }

Modules/DankBar/Widgets/NetworkMonitor.qml

@@ -8,10 +8,13 @@ import qs.Widgets
 Rectangle {
     id: root
 
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
     property int availableWidth: 400
     readonly property int baseWidth: contentRow.implicitWidth + Theme.spacingS * 2
     readonly property int maxNormalWidth: 456
-    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+    property real widgetThickness: 30
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
     function formatNetworkSpeed(bytesPerSec) {
         if (bytesPerSec < 1024) {
@@ -25,11 +28,11 @@ Rectangle {
         }
     }
 
-    width: contentRow.implicitWidth + horizontalPadding * 2
+    width: isVertical ? widgetThickness : (contentRow.implicitWidth + horizontalPadding * 2)
-    height: widgetHeight
+    height: isVertical ? (contentColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     color: {
-        if (SettingsData.topBarNoBackground) {
+        if (SettingsData.dankBarNoBackground) {
             return "transparent";
         }
 
@@ -51,11 +54,53 @@ Rectangle {
         cursorShape: Qt.PointingHandCursor
     }
 
+    Column {
+        id: contentColumn
+
+        anchors.centerIn: parent
+        spacing: 2
+        visible: root.isVertical
+
+        DankIcon {
+            name: "network_check"
+            size: Theme.iconSize - 8
+            color: Theme.surfaceText
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        StyledText {
+            text: {
+                const rate = DgopService.networkRxRate
+                if (rate < 1024) return rate.toFixed(0)
+                if (rate < 1024 * 1024) return (rate / 1024).toFixed(0) + "K"
+                return (rate / (1024 * 1024)).toFixed(0) + "M"
+            }
+            font.pixelSize: Theme.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.info
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        StyledText {
+            text: {
+                const rate = DgopService.networkTxRate
+                if (rate < 1024) return rate.toFixed(0)
+                if (rate < 1024 * 1024) return (rate / 1024).toFixed(0) + "K"
+                return (rate / (1024 * 1024)).toFixed(0) + "M"
+            }
+            font.pixelSize: Theme.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.error
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+
     Row {
         id: contentRow
 
         anchors.centerIn: parent
         spacing: Theme.spacingS
+        visible: !root.isVertical
 
         DankIcon {
             name: "network_check"

Modules/DankBar/Widgets/NotepadButton.qml

@@ -0,0 +1,96 @@
+import QtQuick
+import Quickshell.Hyprland
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
+    property string section: "right"
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
+
+    signal clicked()
+
+    readonly property string focusedScreenName: (
+        CompositorService.isHyprland && typeof Hyprland !== "undefined" && Hyprland.focusedWorkspace && Hyprland.focusedWorkspace.monitor ? (Hyprland.focusedWorkspace.monitor.name || "") :
+        CompositorService.isNiri && typeof NiriService !== "undefined" && NiriService.currentOutput ? NiriService.currentOutput : ""
+    )
+
+    function resolveNotepadInstance() {
+        if (typeof notepadSlideoutVariants === "undefined" || !notepadSlideoutVariants || !notepadSlideoutVariants.instances) {
+            return null
+        }
+
+        const targetScreen = focusedScreenName
+        if (targetScreen) {
+            for (var i = 0; i < notepadSlideoutVariants.instances.length; i++) {
+                var slideout = notepadSlideoutVariants.instances[i]
+                if (slideout.modelData && slideout.modelData.name === targetScreen) {
+                    return slideout
+                }
+            }
+        }
+
+        return notepadSlideoutVariants.instances.length > 0 ? notepadSlideoutVariants.instances[0] : null
+    }
+
+    readonly property var notepadInstance: resolveNotepadInstance()
+    readonly property bool isActive: notepadInstance?.isVisible ?? false
+
+    width: isVertical ? widgetThickness : (notepadIcon.width + horizontalPadding * 2)
+    height: isVertical ? (notepadIcon.height + horizontalPadding * 2) : widgetThickness
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = notepadArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
+    DankIcon {
+        id: notepadIcon
+
+        anchors.centerIn: parent
+        name: "assignment"
+        size: Theme.iconSize - 6
+        color: notepadArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText
+    }
+
+    Rectangle {
+        width: 6
+        height: 6
+        radius: 3
+        color: Theme.primary
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.rightMargin: SettingsData.dankBarNoBackground ? 0 : 4
+        anchors.topMargin: SettingsData.dankBarNoBackground ? 0 : 4
+        visible: NotepadStorageService.tabs && NotepadStorageService.tabs.length > 0
+        opacity: 0.8
+    }
+
+    MouseArea {
+        id: notepadArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            const inst = root.notepadInstance
+            if (inst) {
+                inst.toggle()
+            }
+            root.clicked()
+        }
+    }
+
+
+}

Modules/DankBar/Widgets/NotificationCenterButton.qml

@@ -0,0 +1,76 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Item {
+    id: root
+
+    property bool hasUnread: false
+    property bool isActive: false
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
+
+    signal clicked()
+
+    width: widgetThickness
+    height: widgetThickness
+
+    MouseArea {
+        id: notificationArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0)
+                const currentScreen = parentScreen || Screen
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
+                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+            }
+            root.clicked()
+        }
+    }
+
+    Rectangle {
+        id: notificationContent
+
+        anchors.fill: parent
+        radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+        color: {
+            if (SettingsData.dankBarNoBackground) {
+                return "transparent"
+            }
+
+            const baseColor = notificationArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor
+            return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency)
+        }
+
+        DankIcon {
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            name: SessionData.doNotDisturb ? "notifications_off" : "notifications"
+            size: widgetThickness - 8
+            color: SessionData.doNotDisturb ? Theme.error : (notificationArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText)
+        }
+
+        Rectangle {
+            width: 8
+            height: 8
+            radius: 4
+            color: Theme.error
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.rightMargin: SettingsData.dankBarNoBackground ? 0 : 6
+            anchors.topMargin: SettingsData.dankBarNoBackground ? 0 : 6
+            visible: root.hasUnread
+        }
+    }
+}

Modules/DankBar/Widgets/PrivacyIndicator.qml

@@ -7,23 +7,26 @@ import qs.Widgets
 Rectangle {
     id: root
 
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
     property string section: "right"
     property var popupTarget: null
     property var parentScreen: null
-    property real widgetHeight: 30
+    property real widgetThickness: 30
-    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 2 : Theme.spacingS
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 2 : Theme.spacingS
     readonly property bool hasActivePrivacy: PrivacyService.anyPrivacyActive
     readonly property int activeCount: PrivacyService.microphoneActive + PrivacyService.cameraActive + PrivacyService.screensharingActive
     readonly property real contentWidth: hasActivePrivacy ? (activeCount * 18 + (activeCount - 1) * Theme.spacingXS) : 0
+    readonly property real contentHeight: hasActivePrivacy ? (activeCount * 18 + (activeCount - 1) * Theme.spacingXS) : 0
 
-    width: hasActivePrivacy ? (contentWidth + horizontalPadding * 2) : 0
+    width: isVertical ? widgetThickness : (hasActivePrivacy ? (contentWidth + horizontalPadding * 2) : 0)
-    height: hasActivePrivacy ? widgetHeight : 0
+    height: isVertical ? (hasActivePrivacy ? (contentHeight + horizontalPadding * 2) : 0) : (hasActivePrivacy ? widgetThickness : 0)
-    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     visible: hasActivePrivacy
     opacity: hasActivePrivacy ? 1 : 0
     enabled: hasActivePrivacy
     color: {
-        if (SettingsData.topBarNoBackground) {
+        if (SettingsData.dankBarNoBackground) {
             return "transparent";
         }
 
@@ -43,10 +46,76 @@ Rectangle {
         }
     }
 
+    Column {
+        anchors.centerIn: parent
+        spacing: Theme.spacingXS
+        visible: root.isVertical && hasActivePrivacy
+
+        Item {
+            width: 18
+            height: 18
+            visible: PrivacyService.microphoneActive
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            DankIcon {
+                name: "mic"
+                size: Theme.iconSizeSmall
+                color: Theme.error
+                filled: true
+                anchors.centerIn: parent
+            }
+
+        }
+
+        Item {
+            width: 18
+            height: 18
+            visible: PrivacyService.cameraActive
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            DankIcon {
+                name: "camera_video"
+                size: Theme.iconSizeSmall
+                color: Theme.surfaceText
+                filled: true
+                anchors.centerIn: parent
+            }
+
+            Rectangle {
+                width: 6
+                height: 6
+                radius: 3
+                color: Theme.error
+                anchors.right: parent.right
+                anchors.top: parent.top
+                anchors.rightMargin: -2
+                anchors.topMargin: -1
+            }
+
+        }
+
+        Item {
+            width: 18
+            height: 18
+            visible: PrivacyService.screensharingActive
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            DankIcon {
+                name: "screen_share"
+                size: Theme.iconSizeSmall
+                color: Theme.warning
+                filled: true
+                anchors.centerIn: parent
+            }
+
+        }
+
+    }
+
     Row {
         anchors.centerIn: parent
         spacing: Theme.spacingXS
-        visible: hasActivePrivacy
+        visible: !root.isVertical && hasActivePrivacy
 
         Item {
             width: 18
@@ -158,7 +227,17 @@ Rectangle {
     }
 
     Behavior on width {
-        enabled: hasActivePrivacy && visible
+        enabled: hasActivePrivacy && visible && !isVertical
+
+        NumberAnimation {
+            duration: Theme.mediumDuration
+            easing.type: Theme.emphasizedEasing
+        }
+
+    }
+
+    Behavior on height {
+        enabled: hasActivePrivacy && visible && isVertical
 
         NumberAnimation {
             duration: Theme.mediumDuration

Modules/DankBar/Widgets/RamMonitor.qml

@@ -7,21 +7,23 @@ import qs.Widgets
 Rectangle {
     id: root
 
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
     property bool showPercentage: true
     property bool showIcon: true
     property var toggleProcessList
     property string section: "right"
     property var popupTarget: null
     property var parentScreen: null
-    property real barHeight: 48
+    property real barThickness: 48
-    property real widgetHeight: 30
+    property real widgetThickness: 30
-    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
 
-    width: ramContent.implicitWidth + horizontalPadding * 2
+    width: isVertical ? widgetThickness : (ramContent.implicitWidth + horizontalPadding * 2)
-    height: widgetHeight
+    height: isVertical ? (ramColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     color: {
-        if (SettingsData.topBarNoBackground) {
+        if (SettingsData.dankBarNoBackground) {
             return "transparent";
         }
 
@@ -43,11 +45,10 @@ Rectangle {
         cursorShape: Qt.PointingHandCursor
         onPressed: {
             if (popupTarget && popupTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0);
+                const globalPos = mapToGlobal(0, 0)
-                const currentScreen = parentScreen || Screen;
+                const currentScreen = parentScreen || Screen
-                const screenX = currentScreen.x || 0;
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
-                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
-                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
             DgopService.setSortBy("memory");
             if (root.toggleProcessList) {
@@ -57,9 +58,47 @@ Rectangle {
         }
     }
 
+    Column {
+        id: ramColumn
+        visible: root.isVertical
+        anchors.centerIn: parent
+        spacing: 1
+
+        DankIcon {
+            name: "developer_board"
+            size: Theme.iconSize - 8
+            color: {
+                if (DgopService.memoryUsage > 90) {
+                    return Theme.tempDanger;
+                }
+
+                if (DgopService.memoryUsage > 75) {
+                    return Theme.tempWarning;
+                }
+
+                return Theme.surfaceText;
+            }
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        StyledText {
+            text: {
+                if (DgopService.memoryUsage === undefined || DgopService.memoryUsage === null || DgopService.memoryUsage === 0) {
+                    return "--";
+                }
+
+                return DgopService.memoryUsage.toFixed(0);
+            }
+            font.pixelSize: Theme.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+
     Row {
         id: ramContent
-
+        visible: !root.isVertical
         anchors.centerIn: parent
         spacing: 3
 

Modules/DankBar/Widgets/RunningApps.qml

@@ -10,13 +10,14 @@ import qs.Widgets
 Rectangle {
     id: root
 
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
     property string section: "left"
     property var parentScreen
     property var hoveredItem: null
     property var topBar: null
-    property real widgetHeight: 30
+    property real widgetThickness: 30
-    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 2 : Theme.spacingS
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 2 : Theme.spacingS
-    // The visual root for this window
     property Item windowRoot: (Window.window ? Window.window.contentItem : null)
     readonly property var sortedToplevels: {
         if (SettingsData.runningAppsCurrentWorkspace) {
@@ -25,7 +26,7 @@ Rectangle {
         return CompositorService.sortedToplevels;
     }
     readonly property int windowCount: sortedToplevels.length
-    readonly property int calculatedWidth: {
+    readonly property int calculatedSize: {
         if (windowCount === 0) {
             return 0;
         }
@@ -37,9 +38,9 @@ Rectangle {
         }
     }
 
-    width: calculatedWidth
+    width: isVertical ? widgetThickness : calculatedSize
-    height: widgetHeight
+    height: isVertical ? calculatedSize : widgetThickness
-    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     visible: windowCount > 0
     clip: false
     color: {
@@ -47,7 +48,7 @@ Rectangle {
             return "transparent";
         }
 
-        if (SettingsData.topBarNoBackground) {
+        if (SettingsData.dankBarNoBackground) {
             return "transparent";
         }
 
@@ -143,15 +144,19 @@ Rectangle {
         }
     }
 
-    Row {
+    Loader {
-        id: windowRow
+        id: layoutLoader
-
         anchors.centerIn: parent
+        sourceComponent: root.isVertical ? columnLayout : rowLayout
+    }
+
+    Component {
+        id: rowLayout
+        Row {
             spacing: Theme.spacingXS
 
             Repeater {
                 id: windowRepeater
-
                 model: sortedToplevels
 
                 delegate: Item {
@@ -288,7 +293,7 @@ Rectangle {
                             }
                         } else if (mouse.button === Qt.RightButton) {
                             if (tooltipLoader.item) {
-                                tooltipLoader.item.hideTooltip();
+                                tooltipLoader.item.hide();
                             }
                             tooltipLoader.active = false;
 
@@ -299,29 +304,35 @@ Rectangle {
                                 const screenX = root.parentScreen ? root.parentScreen.x : 0;
                                 const screenY = root.parentScreen ? root.parentScreen.y : 0;
                                 const relativeX = globalPos.x - screenX;
-                                const yPos = Theme.barHeight + SettingsData.topBarSpacing - 7;
+                                const yPos = root.isVertical ? delegateItem.height / 2 : (Theme.barHeight + SettingsData.dankBarSpacing - 7);
                                 windowContextMenuLoader.item.showAt(relativeX, yPos);
                             }
                         }
                     }
                     onEntered: {
                         root.hoveredItem = delegateItem;
-                        const globalPos = delegateItem.mapToGlobal(
-                                    delegateItem.width / 2, delegateItem.height);
                         tooltipLoader.active = true;
                         if (tooltipLoader.item) {
-                            const tooltipY = Theme.barHeight
+                            if (root.isVertical) {
-                                    + SettingsData.topBarSpacing + Theme.spacingXS;
+                                const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, delegateItem.height / 2);
-                            tooltipLoader.item.showTooltip(
+                                const screenX = root.parentScreen ? root.parentScreen.x : 0;
-                                        delegateItem.tooltipText, globalPos.x,
+                                const screenY = root.parentScreen ? root.parentScreen.y : 0;
-                                        tooltipY, root.parentScreen);
+                                const relativeY = globalPos.y - screenY;
+                                const tooltipX = root.axis?.edge === "left" ? (Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS) : (root.parentScreen.width - Theme.barHeight - SettingsData.dankBarSpacing - Theme.spacingXS);
+                                const isLeft = root.axis?.edge === "left";
+                                tooltipLoader.item.show(delegateItem.tooltipText, screenX + tooltipX, relativeY, root.parentScreen, isLeft, !isLeft);
+                            } else {
+                                const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, delegateItem.height);
+                                const tooltipY = Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS;
+                                tooltipLoader.item.show(delegateItem.tooltipText, globalPos.x, tooltipY, root.parentScreen, false, false);
+                            }
                         }
                     }
                     onExited: {
                         if (root.hoveredItem === delegateItem) {
                             root.hoveredItem = null;
                             if (tooltipLoader.item) {
-                                tooltipLoader.item.hideTooltip();
+                                tooltipLoader.item.hide();
                             }
 
                             tooltipLoader.active = false;
@@ -331,13 +342,205 @@ Rectangle {
             }
         }
         }
+    }
+
+    Component {
+        id: columnLayout
+        Column {
+            spacing: Theme.spacingXS
+
+            Repeater {
+                id: windowRepeater
+                model: sortedToplevels
+
+                delegate: Item {
+                id: delegateItem
+
+                property bool isFocused: modelData.activated
+                property string appId: modelData.appId || ""
+                property string windowTitle: modelData.title || "(Unnamed)"
+                property var toplevelObject: modelData
+                property string tooltipText: {
+                    let appName = "Unknown";
+                    if (appId) {
+                        const desktopEntry = DesktopEntries.heuristicLookup(appId);
+                        appName = desktopEntry
+                                && desktopEntry.name ? desktopEntry.name : appId;
+                    }
+                    return appName + (windowTitle ? " • " + windowTitle : "")
+                }
+
+                width: SettingsData.runningAppsCompactMode ? 24 : (24 + Theme.spacingXS + 120)
+                height: 24
+
+                Rectangle {
+                    anchors.fill: parent
+                    radius: Theme.cornerRadius
+                    color: {
+                        if (isFocused) {
+                            return mouseArea.containsMouse ? Qt.rgba(
+                                                                 Theme.primary.r,
+                                                                 Theme.primary.g,
+                                                                 Theme.primary.b,
+                                                                 0.3) : Qt.rgba(
+                                                                 Theme.primary.r,
+                                                                 Theme.primary.g,
+                                                                 Theme.primary.b,
+                                                                 0.2);
+                        } else {
+                            return mouseArea.containsMouse ? Qt.rgba(
+                                                                 Theme.primaryHover.r,
+                                                                 Theme.primaryHover.g,
+                                                                 Theme.primaryHover.b,
+                                                                 0.1) : "transparent";
+                        }
+                    }
+
+                }
+
+                IconImage {
+                    id: iconImg
+                    anchors.left: parent.left
+                    anchors.leftMargin: SettingsData.runningAppsCompactMode ? (parent.width - 18) / 2 : Theme.spacingXS
+                    anchors.verticalCenter: parent.verticalCenter
+                    width: 18
+                    height: 18
+                    source: {
+                        const moddedId = Paths.moddedAppId(appId)
+                        if (moddedId.toLowerCase().includes("steam_app")) {
+                            return ""
+                        }
+                        return Quickshell.iconPath(DesktopEntries.heuristicLookup(moddedId)?.icon, true)
+                    }
+                    smooth: true
+                    mipmap: true
+                    asynchronous: true
+                    visible: status === Image.Ready
+                }
+
+                DankIcon {
+                    anchors.left: parent.left
+                    anchors.leftMargin: SettingsData.runningAppsCompactMode ? (parent.width - 18) / 2 : Theme.spacingXS
+                    anchors.verticalCenter: parent.verticalCenter
+                    size: 18
+                    name: "sports_esports"
+                    color: Theme.surfaceText
+                    visible: {
+                        const moddedId = Paths.moddedAppId(appId)
+                        return moddedId.toLowerCase().includes("steam_app")
+                    }
+                }
+
+                Text {
+                    anchors.centerIn: parent
+                    visible: {
+                        const moddedId = Paths.moddedAppId(appId)
+                        const isSteamApp = moddedId.toLowerCase().includes("steam_app")
+                        return !iconImg.visible && !isSteamApp
+                    }
+                    text: {
+                        if (!appId) {
+                            return "?";
+                        }
+
+                        const desktopEntry = DesktopEntries.heuristicLookup(appId);
+                        if (desktopEntry && desktopEntry.name) {
+                            return desktopEntry.name.charAt(0).toUpperCase();
+                        }
+
+                        return appId.charAt(0).toUpperCase();
+                    }
+                    font.pixelSize: 10
+                    color: Theme.surfaceText
+                    font.weight: Font.Medium
+                }
+
+                StyledText {
+                    anchors.left: iconImg.right
+                    anchors.leftMargin: Theme.spacingXS
+                    anchors.right: parent.right
+                    anchors.rightMargin: Theme.spacingS
+                    anchors.verticalCenter: parent.verticalCenter
+                    visible: !SettingsData.runningAppsCompactMode
+                    text: windowTitle
+                    font.pixelSize: Theme.fontSizeMedium - 1
+                    color: Theme.surfaceText
+                    font.weight: Font.Medium
+                    elide: Text.ElideRight
+                    maximumLineCount: 1
+                }
+
+                MouseArea {
+                    id: mouseArea
+
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    acceptedButtons: Qt.LeftButton | Qt.RightButton
+                    onClicked: (mouse) => {
+                        if (mouse.button === Qt.LeftButton) {
+                            if (toplevelObject) {
+                                toplevelObject.activate();
+                            }
+                        } else if (mouse.button === Qt.RightButton) {
+                            if (tooltipLoader.item) {
+                                tooltipLoader.item.hide();
+                            }
+                            tooltipLoader.active = false;
+
+                            windowContextMenuLoader.active = true;
+                            if (windowContextMenuLoader.item) {
+                                windowContextMenuLoader.item.currentWindow = toplevelObject;
+                                const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, 0);
+                                const screenX = root.parentScreen ? root.parentScreen.x : 0;
+                                const screenY = root.parentScreen ? root.parentScreen.y : 0;
+                                const relativeX = globalPos.x - screenX;
+                                const yPos = root.isVertical ? delegateItem.height / 2 : (Theme.barHeight + SettingsData.dankBarSpacing - 7);
+                                windowContextMenuLoader.item.showAt(relativeX, yPos);
+                            }
+                        }
+                    }
+                    onEntered: {
+                        root.hoveredItem = delegateItem;
+                        tooltipLoader.active = true;
+                        if (tooltipLoader.item) {
+                            if (root.isVertical) {
+                                const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, delegateItem.height / 2);
+                                const screenX = root.parentScreen ? root.parentScreen.x : 0;
+                                const screenY = root.parentScreen ? root.parentScreen.y : 0;
+                                const relativeY = globalPos.y - screenY;
+                                const tooltipX = root.axis?.edge === "left" ? (Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS) : (root.parentScreen.width - Theme.barHeight - SettingsData.dankBarSpacing - Theme.spacingXS);
+                                const isLeft = root.axis?.edge === "left";
+                                tooltipLoader.item.show(delegateItem.tooltipText, screenX + tooltipX, relativeY, root.parentScreen, isLeft, !isLeft);
+                            } else {
+                                const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, delegateItem.height);
+                                const tooltipY = Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS;
+                                tooltipLoader.item.show(delegateItem.tooltipText, globalPos.x, tooltipY, root.parentScreen, false, false);
+                            }
+                        }
+                    }
+                    onExited: {
+                        if (root.hoveredItem === delegateItem) {
+                            root.hoveredItem = null;
+                            if (tooltipLoader.item) {
+                                tooltipLoader.item.hide();
+                            }
+
+                            tooltipLoader.active = false;
+                        }
+                    }
+                }
+            }
+        }
+        }
+    }
 
     Loader {
         id: tooltipLoader
 
         active: false
 
-        sourceComponent: RunningAppsTooltip {}
+        sourceComponent: DankTooltip {}
     }
     
     Loader {

Modules/DankBar/Widgets/SystemTrayBar.qml

@@ -0,0 +1,630 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Services.SystemTray
+import Quickshell.Wayland
+import Quickshell.Widgets
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
+    property var parentWindow: null
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property bool isAtBottom: false
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 2 : Theme.spacingS
+    readonly property int calculatedSize: SystemTray.items.values.length > 0 ? SystemTray.items.values.length * 24 + horizontalPadding * 2 : 0
+
+    width: isVertical ? widgetThickness : calculatedSize
+    height: isVertical ? calculatedSize : widgetThickness
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SystemTray.items.values.length === 0) {
+            return "transparent";
+        }
+
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+    visible: SystemTray.items.values.length > 0
+
+    Loader {
+        id: layoutLoader
+        anchors.centerIn: parent
+        sourceComponent: root.isVertical ? columnComp : rowComp
+    }
+
+    Component {
+        id: rowComp
+        Row {
+            spacing: 0
+
+            Repeater {
+                model: SystemTray.items.values
+
+                delegate: Item {
+                property var trayItem: modelData
+                property string iconSource: {
+                    let icon = trayItem && trayItem.icon;
+                    if (typeof icon === 'string' || icon instanceof String) {
+                        if (icon === "") {
+                            return "";
+                        }
+                        if (icon.includes("?path=")) {
+                            const split = icon.split("?path=");
+                            if (split.length !== 2) {
+                                return icon;
+                            }
+
+                            const name = split[0];
+                            const path = split[1];
+                            const fileName = name.substring(name.lastIndexOf("/") + 1);
+                            return `file://${path}/${fileName}`;
+                        }
+                        if (icon.startsWith("/") && !icon.startsWith("file://")) {
+                            return `file://${icon}`;
+                        }
+                        return icon;
+                    }
+                    return "";
+                }
+
+                width: 24
+                height: 24
+
+                Rectangle {
+                    anchors.fill: parent
+                    radius: Theme.cornerRadius
+                    color: trayItemArea.containsMouse ? Theme.primaryHover : "transparent"
+
+
+                }
+
+                IconImage {
+                    anchors.centerIn: parent
+                    width: 16
+                    height: 16
+                    source: parent.iconSource
+                    asynchronous: true
+                    smooth: true
+                    mipmap: true
+                }
+
+                MouseArea {
+                    id: trayItemArea
+
+                    anchors.fill: parent
+                    acceptedButtons: Qt.LeftButton | Qt.RightButton
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: (mouse) => {
+                        if (!trayItem) {
+                            return;
+                        }
+
+                        if (mouse.button === Qt.LeftButton && !trayItem.onlyMenu) {
+                            trayItem.activate();
+                            return ;
+                        }
+                        if (trayItem.hasMenu) {
+                            root.showForTrayItem(trayItem, parent, parentScreen, root.isAtBottom, root.isVertical, root.axis);
+                        }
+                    }
+                }
+
+            }
+
+        }
+        }
+    }
+
+    Component {
+        id: columnComp
+        Column {
+            spacing: 0
+
+            Repeater {
+                model: SystemTray.items.values
+
+                delegate: Item {
+                property var trayItem: modelData
+                property string iconSource: {
+                    let icon = trayItem && trayItem.icon;
+                    if (typeof icon === 'string' || icon instanceof String) {
+                        if (icon === "") {
+                            return "";
+                        }
+                        if (icon.includes("?path=")) {
+                            const split = icon.split("?path=");
+                            if (split.length !== 2) {
+                                return icon;
+                            }
+
+                            const name = split[0];
+                            const path = split[1];
+                            const fileName = name.substring(name.lastIndexOf("/") + 1);
+                            return `file://${path}/${fileName}`;
+                        }
+                        if (icon.startsWith("/") && !icon.startsWith("file://")) {
+                            return `file://${icon}`;
+                        }
+                        return icon;
+                    }
+                    return "";
+                }
+
+                width: 24
+                height: 24
+
+                Rectangle {
+                    anchors.fill: parent
+                    radius: Theme.cornerRadius
+                    color: trayItemArea.containsMouse ? Theme.primaryHover : "transparent"
+                }
+
+                IconImage {
+                    anchors.centerIn: parent
+                    width: 16
+                    height: 16
+                    source: parent.iconSource
+                    asynchronous: true
+                    smooth: true
+                    mipmap: true
+                }
+
+                MouseArea {
+                    id: trayItemArea
+
+                    anchors.fill: parent
+                    acceptedButtons: Qt.LeftButton | Qt.RightButton
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: (mouse) => {
+                        if (!trayItem) {
+                            return;
+                        }
+
+                        if (mouse.button === Qt.LeftButton && !trayItem.onlyMenu) {
+                            trayItem.activate();
+                            return ;
+                        }
+                        if (trayItem.hasMenu) {
+                            root.showForTrayItem(trayItem, parent, parentScreen, root.isAtBottom, root.isVertical, root.axis);
+                        }
+                    }
+                }
+
+            }
+
+        }
+        }
+    }
+
+    Component {
+        id: trayMenuComponent
+
+        Rectangle {
+            id: menuRoot
+
+            property var trayItem: null
+            property var anchorItem: null
+            property var parentScreen: null
+            property bool isAtBottom: false
+            property bool isVertical: false
+            property var axis: null
+            property bool showMenu: false
+            property var menuHandle: null
+
+            ListModel { id: entryStack }
+            function topEntry() {
+                return entryStack.count ? entryStack.get(entryStack.count - 1).handle : null
+            }
+
+            function showForTrayItem(item, anchor, screen, atBottom, vertical, axisObj) {
+                trayItem = item
+                anchorItem = anchor
+                parentScreen = screen
+                isAtBottom = atBottom
+                isVertical = vertical
+                axis = axisObj
+                menuHandle = item?.menu
+
+                if (parentScreen) {
+                    for (var i = 0; i < Quickshell.screens.length; i++) {
+                        const s = Quickshell.screens[i]
+                        if (s === parentScreen) {
+                            menuWindow.screen = s
+                            break
+                        }
+                    }
+                }
+
+                showMenu = true
+            }
+
+            function close() {
+                showMenu = false
+            }
+
+            function showSubMenu(entry) {
+                if (!entry || !entry.hasChildren) return;
+
+                entryStack.append({ handle: entry });
+
+                const h = entry.menu || entry;
+                if (h && typeof h.updateLayout === "function") h.updateLayout();
+
+                submenuHydrator.menu = h;
+                submenuHydrator.open();
+                Qt.callLater(() => submenuHydrator.close());
+            }
+
+            function goBack() {
+                if (!entryStack.count) return;
+                entryStack.remove(entryStack.count - 1);
+            }
+
+            width: 0
+            height: 0
+            color: "transparent"
+
+            PanelWindow {
+                id: menuWindow
+                visible: menuRoot.showMenu && (menuRoot.trayItem?.hasMenu ?? false)
+                WlrLayershell.layer: WlrLayershell.Overlay
+                WlrLayershell.exclusiveZone: -1
+                WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
+                color: "transparent"
+
+                anchors {
+                    top: true
+                    left: true
+                    right: true
+                    bottom: true
+                }
+
+                property point anchorPos: Qt.point(screen.width / 2, screen.height / 2)
+
+                onVisibleChanged: {
+                    if (visible) {
+                        updatePosition()
+                    }
+                }
+
+                function updatePosition() {
+                    if (!menuRoot.anchorItem || !menuRoot.trayItem) {
+                        anchorPos = Qt.point(screen.width / 2, screen.height / 2)
+                        return
+                    }
+
+                    const globalPos = menuRoot.anchorItem.mapToGlobal(0, 0)
+                    const screenX = screen.x || 0
+                    const screenY = screen.y || 0
+                    const relativeX = globalPos.x - screenX
+                    const relativeY = globalPos.y - screenY
+
+                    const widgetThickness = Math.max(20, 26 + SettingsData.dankBarInnerPadding * 0.6)
+                    const effectiveBarThickness = Math.max(widgetThickness + SettingsData.dankBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.dankBarInnerPadding))
+
+                    if (menuRoot.isVertical) {
+                        const edge = menuRoot.axis?.edge
+                        let targetX
+                        if (edge === "left") {
+                            targetX = effectiveBarThickness + SettingsData.dankBarSpacing + Theme.popupDistance
+                        } else {
+                            const popupX = effectiveBarThickness + SettingsData.dankBarSpacing + Theme.popupDistance
+                            targetX = screen.width - popupX
+                        }
+                        anchorPos = Qt.point(targetX, relativeY + menuRoot.anchorItem.height / 2)
+                    } else {
+                        let targetY
+                        if (menuRoot.isAtBottom) {
+                            const popupY = effectiveBarThickness + SettingsData.dankBarSpacing + SettingsData.dankBarBottomGap + Theme.popupDistance
+                            targetY = screen.height - popupY
+                        } else {
+                            targetY = effectiveBarThickness + SettingsData.dankBarSpacing + SettingsData.dankBarBottomGap + Theme.popupDistance
+                        }
+                        anchorPos = Qt.point(relativeX + menuRoot.anchorItem.width / 2, targetY)
+                    }
+                }
+
+                Rectangle {
+                    id: menuContainer
+
+                    width: Math.min(500, Math.max(250, menuColumn.implicitWidth + Theme.spacingS * 2))
+                    height: Math.max(40, menuColumn.implicitHeight + Theme.spacingS * 2)
+
+                    x: {
+                        if (menuRoot.isVertical) {
+                            const edge = menuRoot.axis?.edge
+                            if (edge === "left") {
+                                const targetX = menuWindow.anchorPos.x
+                                return Math.min(menuWindow.screen.width - width - 10, targetX)
+                            } else {
+                                const targetX = menuWindow.anchorPos.x - width
+                                return Math.max(10, targetX)
+                            }
+                        } else {
+                            const left = 10
+                            const right = menuWindow.width - width - 10
+                            const want = menuWindow.anchorPos.x - width / 2
+                            return Math.max(left, Math.min(right, want))
+                        }
+                    }
+
+                    y: {
+                        if (menuRoot.isVertical) {
+                            const top = 10
+                            const bottom = menuWindow.height - height - 10
+                            const want = menuWindow.anchorPos.y - height / 2
+                            return Math.max(top, Math.min(bottom, want))
+                        } else {
+                            if (menuRoot.isAtBottom) {
+                                const targetY = menuWindow.anchorPos.y - height
+                                return Math.max(10, targetY)
+                            } else {
+                                const targetY = menuWindow.anchorPos.y
+                                return Math.min(menuWindow.screen.height - height - 10, targetY)
+                            }
+                        }
+                    }
+
+                    color: Theme.popupBackground()
+                    radius: Theme.cornerRadius
+                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+                    border.width: 1
+
+                    opacity: menuRoot.showMenu ? 1 : 0
+                    scale: menuRoot.showMenu ? 1 : 0.85
+
+                    Rectangle {
+                        anchors.fill: parent
+                        anchors.topMargin: 4
+                        anchors.leftMargin: 2
+                        anchors.rightMargin: -2
+                        anchors.bottomMargin: -4
+                        radius: parent.radius
+                        color: Qt.rgba(0, 0, 0, 0.15)
+                        z: parent.z - 1
+                    }
+
+                    QsMenuAnchor {
+                        id: submenuHydrator
+                        anchor.window: menuWindow
+                    }
+
+                    QsMenuOpener {
+                        id: rootOpener
+                        menu: menuRoot.menuHandle
+                    }
+
+                    QsMenuOpener {
+                        id: subOpener
+                        menu: {
+                            const e = menuRoot.topEntry();
+                            return e ? (e.menu || e) : null;
+                        }
+                    }
+
+
+                    Column {
+                        id: menuColumn
+
+                        width: parent.width - Theme.spacingS * 2
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.top: parent.top
+                        anchors.topMargin: Theme.spacingS
+                        spacing: 1
+
+                        Rectangle {
+                            visible: entryStack.count > 0
+                            width: parent.width
+                            height: 28
+                            radius: Theme.cornerRadius
+                            color: backArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+                            Row {
+                                anchors.left: parent.left
+                                anchors.leftMargin: Theme.spacingS
+                                anchors.verticalCenter: parent.verticalCenter
+                                spacing: Theme.spacingXS
+
+                                DankIcon {
+                                    name: "arrow_back"
+                                    size: 16
+                                    color: Theme.surfaceText
+                                    anchors.verticalCenter: parent.verticalCenter
+                                }
+
+                                StyledText {
+                                    text: "Back"
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: Theme.surfaceText
+                                    anchors.verticalCenter: parent.verticalCenter
+                                }
+                            }
+
+                            MouseArea {
+                                id: backArea
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: menuRoot.goBack()
+                            }
+                        }
+
+                        Rectangle {
+                            visible: entryStack.count > 0
+                            width: parent.width
+                            height: 1
+                            color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                        }
+
+                        Repeater {
+                            model: entryStack.count
+                                   ? (subOpener.children ? subOpener.children
+                                                         : (menuRoot.topEntry()?.children || []))
+                                   : rootOpener.children
+
+                            Rectangle {
+                                property var menuEntry: modelData
+
+                                width: menuColumn.width
+                                height: menuEntry?.isSeparator ? 1 : 28
+                                radius: menuEntry?.isSeparator ? 0 : Theme.cornerRadius
+                                color: {
+                                    if (menuEntry?.isSeparator) {
+                                        return Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                                    }
+                                    return itemArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+                                }
+
+                                MouseArea {
+                                    id: itemArea
+                                    anchors.fill: parent
+                                    enabled: !menuEntry?.isSeparator && (menuEntry?.enabled !== false)
+                                    hoverEnabled: true
+                                    cursorShape: Qt.PointingHandCursor
+
+                                    onClicked: {
+                                        if (!menuEntry || menuEntry.isSeparator) return;
+
+                                        if (menuEntry.hasChildren) {
+                                            menuRoot.showSubMenu(menuEntry);
+                                        } else {
+                                            if (typeof menuEntry.activate === "function") {
+                                                menuEntry.activate();
+                                            } else if (typeof menuEntry.triggered === "function") {
+                                                menuEntry.triggered();
+                                            }
+                                            Qt.createQmlObject('import QtQuick; Timer { interval: 80; running: true; repeat: false; onTriggered: menuRoot.close() }', menuRoot);
+                                        }
+                                    }
+                                }
+
+                                Row {
+                                    anchors.left: parent.left
+                                    anchors.leftMargin: Theme.spacingS
+                                    anchors.right: parent.right
+                                    anchors.rightMargin: Theme.spacingS
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    spacing: Theme.spacingXS
+                                    visible: !menuEntry?.isSeparator
+
+                                    Rectangle {
+                                        width: 16
+                                        height: 16
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        visible: menuEntry?.buttonType !== undefined && menuEntry.buttonType !== 0
+                                        radius: menuEntry?.buttonType === 2 ? 8 : 2
+                                        border.width: 1
+                                        border.color: Theme.outline
+                                        color: "transparent"
+
+                                        Rectangle {
+                                            anchors.centerIn: parent
+                                            width: parent.width - 6
+                                            height: parent.height - 6
+                                            radius: parent.radius - 3
+                                            color: Theme.primary
+                                            visible: menuEntry?.checkState === 2
+                                        }
+
+                                        DankIcon {
+                                            anchors.centerIn: parent
+                                            name: "check"
+                                            size: 10
+                                            color: Theme.primaryText
+                                            visible: menuEntry?.buttonType === 1 && menuEntry?.checkState === 2
+                                        }
+                                    }
+
+                                    Item {
+                                        width: 16
+                                        height: 16
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        visible: menuEntry?.icon && menuEntry.icon !== ""
+
+                                        Image {
+                                            anchors.fill: parent
+                                            source: menuEntry?.icon || ""
+                                            sourceSize.width: 16
+                                            sourceSize.height: 16
+                                            fillMode: Image.PreserveAspectFit
+                                            smooth: true
+                                        }
+                                    }
+
+                                    StyledText {
+                                        text: menuEntry?.text || ""
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: (menuEntry?.enabled !== false) ? Theme.surfaceText : Theme.surfaceTextMedium
+                                        elide: Text.ElideRight
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        width: Math.max(150, parent.width - 64)
+                                        wrapMode: Text.NoWrap
+                                    }
+
+                                    Item {
+                                        width: 16
+                                        height: 16
+                                        anchors.verticalCenter: parent.verticalCenter
+
+                                        DankIcon {
+                                            anchors.centerIn: parent
+                                            name: "chevron_right"
+                                            size: 14
+                                            color: Theme.surfaceText
+                                            visible: menuEntry?.hasChildren ?? false
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    Behavior on opacity {
+                        NumberAnimation {
+                            duration: Theme.mediumDuration
+                            easing.type: Theme.emphasizedEasing
+                        }
+                    }
+
+                    Behavior on scale {
+                        NumberAnimation {
+                            duration: Theme.mediumDuration
+                            easing.type: Theme.emphasizedEasing
+                        }
+                    }
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    z: -1
+                    onClicked: menuRoot.close()
+                }
+            }
+        }
+    }
+
+    property var currentTrayMenu: null
+
+    function showForTrayItem(item, anchor, screen, atBottom, vertical, axisObj) {
+        if (currentTrayMenu) {
+            currentTrayMenu.destroy()
+        }
+        currentTrayMenu = trayMenuComponent.createObject(null)
+        if (currentTrayMenu) {
+            currentTrayMenu.showForTrayItem(item, anchor, screen, atBottom, vertical ?? false, axisObj)
+        }
+    }
+
+}

Modules/DankBar/Widgets/SystemUpdate.qml

@@ -0,0 +1,154 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
+    property bool isActive: false
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
+    readonly property bool hasUpdates: SystemUpdateService.updateCount > 0
+    readonly property bool isChecking: SystemUpdateService.isChecking
+
+    signal clicked()
+
+    width: isVertical ? widgetThickness : (updaterIcon.width + horizontalPadding * 2)
+    height: isVertical ? widgetThickness : widgetThickness
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = updaterArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
+    DankIcon {
+        id: statusIcon
+
+        anchors.centerIn: parent
+        visible: root.isVertical
+        name: {
+            if (isChecking) return "refresh";
+            if (SystemUpdateService.hasError) return "error";
+            if (hasUpdates) return "system_update_alt";
+            return "check_circle";
+        }
+        size: Theme.iconSize - 6
+        color: {
+            if (SystemUpdateService.hasError) return Theme.error;
+            if (hasUpdates) return Theme.primary;
+            return (updaterArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText);
+        }
+
+        RotationAnimation {
+            id: rotationAnimation
+            target: statusIcon
+            property: "rotation"
+            from: 0
+            to: 360
+            duration: 1000
+            running: isChecking
+            loops: Animation.Infinite
+
+            onRunningChanged: {
+                if (!running) {
+                    statusIcon.rotation = 0
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        width: 8
+        height: 8
+        radius: 4
+        color: Theme.error
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.rightMargin: SettingsData.dankBarNoBackground ? 0 : 6
+        anchors.topMargin: SettingsData.dankBarNoBackground ? 0 : 6
+        visible: root.isVertical && root.hasUpdates && !root.isChecking
+    }
+
+    Row {
+        id: updaterIcon
+
+        anchors.centerIn: parent
+        spacing: Theme.spacingXS
+        visible: !root.isVertical
+
+        DankIcon {
+            id: statusIconHorizontal
+
+            anchors.verticalCenter: parent.verticalCenter
+            name: {
+                if (isChecking) return "refresh";
+                if (SystemUpdateService.hasError) return "error";
+                if (hasUpdates) return "system_update_alt";
+                return "check_circle";
+            }
+            size: Theme.iconSize - 6
+            color: {
+                if (SystemUpdateService.hasError) return Theme.error;
+                if (hasUpdates) return Theme.primary;
+                return (updaterArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText);
+            }
+
+            RotationAnimation {
+                id: rotationAnimationHorizontal
+                target: statusIconHorizontal
+                property: "rotation"
+                from: 0
+                to: 360
+                duration: 1000
+                running: isChecking
+                loops: Animation.Infinite
+
+                onRunningChanged: {
+                    if (!running) {
+                        statusIconHorizontal.rotation = 0
+                    }
+                }
+            }
+        }
+
+        StyledText {
+            id: countText
+
+            anchors.verticalCenter: parent.verticalCenter
+            text: SystemUpdateService.updateCount.toString()
+            font.pixelSize: Theme.fontSizeSmall
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+            visible: hasUpdates && !isChecking
+        }
+    }
+
+    MouseArea {
+        id: updaterArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0)
+                const currentScreen = parentScreen || Screen
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
+                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+            }
+            root.clicked();
+        }
+    }
+
+}

Modules/DankBar/Widgets/Vpn.qml

@@ -0,0 +1,103 @@
+import QtQuick
+import Quickshell
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
+    property int widgetThickness: 28
+    property int barThickness: 32
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
+
+    signal toggleVpnPopup()
+
+    width: isVertical ? widgetThickness : (Theme.iconSize + horizontalPadding * 2)
+    height: isVertical ? (Theme.iconSize + horizontalPadding * 2) : widgetThickness
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent";
+        }
+
+        const baseColor = clickArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
+    DankIcon {
+        id: icon
+
+        name: VpnService.isBusy ? "sync" : (VpnService.connected ? "vpn_lock" : "vpn_key_off")
+        size: Theme.iconSize - 6
+        color: VpnService.connected ? Theme.primary : Theme.surfaceText
+        anchors.centerIn: parent
+    }
+
+    Loader {
+        id: tooltipLoader
+        active: false
+        sourceComponent: DankTooltip {}
+    }
+
+    MouseArea {
+        id: clickArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0)
+                const currentScreen = parentScreen || Screen
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
+                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+            }
+            root.toggleVpnPopup();
+        }
+        onEntered: {
+            if (root.parentScreen && !(popupTarget && popupTarget.shouldBeVisible)) {
+                tooltipLoader.active = true
+                if (tooltipLoader.item) {
+                    let tooltipText = ""
+                    if (!VpnService.connected) {
+                        tooltipText = "VPN Disconnected"
+                    } else {
+                        const names = VpnService.activeNames || []
+                        if (names.length <= 1) {
+                            tooltipText = "VPN Connected • " + (names[0] || "")
+                        } else {
+                            tooltipText = "VPN Connected • " + names[0] + " +" + (names.length - 1)
+                        }
+                    }
+
+                    if (root.isVertical) {
+                        const globalPos = mapToGlobal(width / 2, height / 2)
+                        const screenX = root.parentScreen ? root.parentScreen.x : 0
+                        const screenY = root.parentScreen ? root.parentScreen.y : 0
+                        const relativeY = globalPos.y - screenY
+                        const tooltipX = root.axis?.edge === "left" ? (Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS) : (root.parentScreen.width - Theme.barHeight - SettingsData.dankBarSpacing - Theme.spacingXS)
+                        const isLeft = root.axis?.edge === "left"
+                        tooltipLoader.item.show(tooltipText, screenX + tooltipX, relativeY, root.parentScreen, isLeft, !isLeft)
+                    } else {
+                        const globalPos = mapToGlobal(width / 2, height)
+                        const tooltipY = Theme.barHeight + SettingsData.dankBarSpacing + Theme.spacingXS
+                        tooltipLoader.item.show(tooltipText, globalPos.x, tooltipY, root.parentScreen, false, false)
+                    }
+                }
+            }
+        }
+        onExited: {
+            if (tooltipLoader.item) {
+                tooltipLoader.item.hide()
+            }
+            tooltipLoader.active = false
+        }
+    }
+
+}

Modules/DankBar/Widgets/Weather.qml

@@ -6,21 +6,23 @@ import qs.Widgets
 Rectangle {
     id: root
 
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
     property string section: "center"
     property var popupTarget: null
     property var parentScreen: null
-    property real barHeight: 48
+    property real barThickness: 48
-    property real widgetHeight: 30
+    property real widgetThickness: 30
-    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 2 : Theme.spacingS
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 2 : Theme.spacingS
 
     signal clicked()
 
     visible: SettingsData.weatherEnabled
-    width: visible ? Math.min(100, weatherRow.implicitWidth + horizontalPadding * 2) : 0
+    width: isVertical ? widgetThickness : (visible ? Math.min(100, weatherRow.implicitWidth + horizontalPadding * 2) : 0)
-    height: widgetHeight
+    height: isVertical ? (weatherColumn.implicitHeight + horizontalPadding * 2) : widgetThickness
-    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     color: {
-        if (SettingsData.topBarNoBackground) {
+        if (SettingsData.dankBarNoBackground) {
             return "transparent";
         }
 
@@ -32,9 +34,37 @@ Rectangle {
         service: WeatherService
     }
 
+    Column {
+        id: weatherColumn
+        visible: root.isVertical
+        anchors.centerIn: parent
+        spacing: 1
+
+        DankIcon {
+            name: WeatherService.getWeatherIcon(WeatherService.weather.wCode)
+            size: Theme.iconSize - 4
+            color: Theme.primary
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        StyledText {
+            text: {
+                const temp = SettingsData.useFahrenheit ? WeatherService.weather.tempF : WeatherService.weather.temp;
+                if (temp === undefined || temp === null || temp === 0) {
+                    return "--";
+                }
+                return temp;
+            }
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceText
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+
     Row {
         id: weatherRow
 
+        visible: !root.isVertical
         anchors.centerIn: parent
         spacing: Theme.spacingXS
 
@@ -69,11 +99,10 @@ Rectangle {
         cursorShape: Qt.PointingHandCursor
         onPressed: {
             if (popupTarget && popupTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0);
+                const globalPos = mapToGlobal(0, 0)
-                const currentScreen = parentScreen || Screen;
+                const currentScreen = parentScreen || Screen
-                const screenX = currentScreen.x || 0;
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
-                const relativeX = globalPos.x - screenX;
+                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
-                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
             root.clicked();
         }

Modules/DankBar/Widgets/WorkspaceSwitcher.qml

@@ -10,6 +10,8 @@ import qs.Widgets
 Rectangle {
     id: root
 
+    property bool isVertical: axis?.isVertical ?? false
+    property var axis: null
     property string screenName: ""
     property real widgetHeight: 30
     property int currentWorkspace: {
@@ -192,7 +194,9 @@ Rectangle {
         return currentMonitor.activeWorkspace?.id ?? 1
     }
 
-    readonly property real padding: (widgetHeight - workspaceRow.implicitHeight) / 2
+    readonly property real padding: isVertical
+        ? Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+        : (widgetHeight - workspaceRow.implicitHeight) / 2
 
     function getRealWorkspaces() {
         return root.workspaceList.filter(ws => {
@@ -221,11 +225,11 @@ Rectangle {
         }
     }
 
-    width: workspaceRow.implicitWidth + padding * 2
+    width: isVertical ? widgetHeight : (workspaceRow.implicitWidth + padding * 2)
-    height: widgetHeight
+    height: isVertical ? (workspaceRow.implicitHeight + padding * 2) : widgetHeight
-    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
     color: {
-        if (SettingsData.topBarNoBackground)
+        if (SettingsData.dankBarNoBackground)
             return "transparent"
         const baseColor = Theme.widgetBaseBackgroundColor
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency)
@@ -261,11 +265,12 @@ Rectangle {
                  }
     }
 
-    Row {
+    Flow {
         id: workspaceRow
 
         anchors.centerIn: parent
         spacing: Theme.spacingS
+        flow: isVertical ? Flow.TopToBottom : Flow.LeftToRight
 
         Repeater {
             model: root.workspaceList
@@ -332,16 +337,32 @@ Rectangle {
                 }
 
                 width: {
+                    if (root.isVertical) {
+                        return SettingsData.showWorkspaceApps ? widgetHeight * 0.7 : widgetHeight * 0.5;
+                    } else {
                         if (SettingsData.showWorkspaceApps && loadedIcons.length > 0) {
                             const numIcons = Math.min(loadedIcons.length, SettingsData.maxWorkspaceIcons);
                             const iconsWidth = numIcons * 18 + (numIcons > 0 ? (numIcons - 1) * Theme.spacingXS : 0);
-                        const baseWidth = isActive ? root.widgetHeight * 1.0 + Theme.spacingXS : root.widgetHeight * 0.8;
+                            const baseWidth = isActive ? root.widgetHeight * 0.9 + Theme.spacingXS : root.widgetHeight * 0.7;
                             return baseWidth + iconsWidth;
                         }
-                    return isActive ? root.widgetHeight * 1.2 : root.widgetHeight * 0.8;
+                        return isActive ? root.widgetHeight * 1.05 : root.widgetHeight * 0.7;
                     }
-                height: SettingsData.showWorkspaceApps ? widgetHeight * 0.8 : widgetHeight * 0.6
+                }
-                radius: height / 2
+                height: {
+                    if (root.isVertical) {
+                        if (SettingsData.showWorkspaceApps && loadedIcons.length > 0) {
+                            const numIcons = Math.min(loadedIcons.length, SettingsData.maxWorkspaceIcons);
+                            const iconsHeight = numIcons * 18 + (numIcons > 0 ? (numIcons - 1) * Theme.spacingXS : 0);
+                            const baseHeight = isActive ? root.widgetHeight * 0.9 + Theme.spacingXS : root.widgetHeight * 0.7;
+                            return baseHeight + iconsHeight;
+                        }
+                        return isActive ? root.widgetHeight * 1.05 : root.widgetHeight * 0.7;
+                    } else {
+                        return SettingsData.showWorkspaceApps ? widgetHeight * 0.7 : widgetHeight * 0.5;
+                    }
+                }
+                radius: Math.min(width, height) / 2
                 color: isActive ? Theme.primary : isPlaceholder ? Theme.surfaceTextLight : isHovered ? Theme.outlineButton : Theme.surfaceTextAlpha
 
                 Behavior on width {
@@ -352,10 +373,20 @@ Rectangle {
                     }
                 }
 
+                Behavior on height {
+                    enabled: root.isVertical && (!SettingsData.showWorkspaceApps || SettingsData.maxWorkspaceIcons <= 3)
+                    NumberAnimation {
+                        duration: Theme.mediumDuration
+                        easing.type: Theme.emphasizedEasing
+                    }
+                }
+
                 MouseArea {
                     id: mouseArea
 
-                    anchors.fill: parent
+                    anchors.centerIn: parent
+                    width: root.isVertical ? parent.width + Theme.spacingXL : parent.width
+                    height: root.isVerical ? parent.height : parent.height + Theme.spacingXL
                     hoverEnabled: !isPlaceholder
                     cursorShape: isPlaceholder ? Qt.ArrowCursor : Qt.PointingHandCursor
                     enabled: !isPlaceholder
@@ -372,15 +403,20 @@ Rectangle {
                     }
                 }
 
-                // Loader for App Icons
                 Loader {
                     id: appIconsLoader
                     anchors.fill: parent
                     active: SettingsData.showWorkspaceApps
                     sourceComponent: Item {
-                        Row {
+                        Loader {
                             id: contentRow
                             anchors.centerIn: parent
+                            sourceComponent: root.isVertical ? columnLayout : rowLayout
+                        }
+
+                        Component {
+                            id: rowLayout
+                            Row {
                                 spacing: 4
                                 visible: loadedIcons.length > 0
 
@@ -446,6 +482,76 @@ Rectangle {
                                 }
                             }
                         }
+
+                        Component {
+                            id: columnLayout
+                            Column {
+                                spacing: 4
+                                visible: loadedIcons.length > 0
+
+                                Repeater {
+                                    model: loadedIcons.slice(0, SettingsData.maxWorkspaceIcons)
+                                    delegate: Item {
+                                        width: 18
+                                        height: 18
+
+                                        IconImage {
+                                            id: appIcon
+                                            property var windowId: modelData.windowId
+                                            anchors.fill: parent
+                                            source: modelData.icon
+                                            opacity: modelData.active ? 1.0 : appMouseArea.containsMouse ? 0.8 : 0.6
+                                            visible: !modelData.isSteamApp
+                                        }
+
+                                        DankIcon {
+                                            anchors.centerIn: parent
+                                            size: 18
+                                            name: "sports_esports"
+                                            color: Theme.surfaceText
+                                            opacity: modelData.active ? 1.0 : appMouseArea.containsMouse ? 0.8 : 0.6
+                                            visible: modelData.isSteamApp
+                                        }
+
+                                        MouseArea {
+                                            id: appMouseArea
+                                            hoverEnabled: true
+                                            anchors.fill: parent
+                                            enabled: isActive
+                                            cursorShape: Qt.PointingHandCursor
+                                            onClicked: {
+                                                if (CompositorService.isHyprland) {
+                                                    Hyprland.dispatch(`focuswindow address:${appIcon.windowId}`)
+                                                } else if (CompositorService.isNiri) {
+                                                    NiriService.focusWindow(appIcon.windowId)
+                                                }
+                                            }
+                                        }
+
+                                        Rectangle {
+                                            visible: modelData.count > 1 && !isActive
+                                            width: 12
+                                            height: 12
+                                            radius: 6
+                                            color: "black"
+                                            border.color: "white"
+                                            border.width: 1
+                                            anchors.right: parent.right
+                                            anchors.bottom: parent.bottom
+                                            z: 2
+
+                                            Text {
+                                                anchors.centerIn: parent
+                                                text: modelData.count
+                                                font.pixelSize: 8
+                                                color: "white"
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
                 }
 
                 // Loader for Custom Name Icon

Modules/DankDash/DankDashPopout.qml

@@ -13,30 +13,33 @@ DankPopout {
     id: root
 
     property bool dashVisible: false
-    property string triggerSection: "center"
     property var triggerScreen: null
     property int currentTabIndex: 0
 
     function setTriggerPosition(x, y, width, section, screen) {
-        if (section === "center") {
+        triggerSection = section
+        triggerScreen = screen
+        triggerY = y
+
+        if (section === "center" && (SettingsData.dankBarPosition === SettingsData.Position.Top || SettingsData.dankBarPosition === SettingsData.Position.Bottom)) {
             const screenWidth = screen ? screen.width : Screen.width
             triggerX = (screenWidth - popupWidth) / 2
             triggerWidth = popupWidth
+        } else if (section === "center" && (SettingsData.dankBarPosition === SettingsData.Position.Left || SettingsData.dankBarPosition === SettingsData.Position.Right)) {
+            const screenHeight = screen ? screen.height : Screen.height
+            triggerX = (screenHeight - popupHeight) / 2
+            triggerWidth = popupHeight
         } else {
             triggerX = x
             triggerWidth = width
         }
-        triggerY = y
-        triggerSection = section
-        triggerScreen = screen
     }
 
     popupWidth: 700
     popupHeight: contentLoader.item ? contentLoader.item.implicitHeight : 500
     triggerX: Screen.width - 620 - Theme.spacingL
-    triggerY: Math.max(26 + SettingsData.topBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.topBarInnerPadding)) + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance
+    triggerY: Math.max(26 + SettingsData.dankBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.dankBarInnerPadding)) + SettingsData.dankBarSpacing + SettingsData.dankBarBottomGap - 2
     triggerWidth: 80
-    positioning: "center"
     shouldBeVisible: dashVisible
     visible: shouldBeVisible
 

Modules/DankDash/MediaPlayerTab.qml

@@ -338,28 +338,28 @@ Item {
             }
         }
 
-        Rectangle {
+        Popup {
             id: audioDevicesDropdown
             width: 280
             height: audioDevicesButton.devicesExpanded ? Math.max(200, Math.min(280, audioDevicesDropdown.availableDevices.length * 50 + 100)) : 0
-            x: parent.width + Theme.spacingS
+            x: root.width + Theme.spacingS
             y: audioDevicesButton.y - 50
             visible: audioDevicesButton.devicesExpanded
-            clip: true
+            closePolicy: Popup.NoAutoClose
-            z: 150  
+            modal: false
+            dim: false
+            padding: 0
 
             property var availableDevices: Pipewire.nodes.values.filter(node => {
                 return node.audio && node.isSink && !node.isStream
             })
 
+            background: Rectangle {
                 color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
                 border.width: 2
                 radius: Theme.cornerRadius * 2
 
-            opacity: audioDevicesButton.devicesExpanded ? 1 : 0
-            
-            // Drop shadow effect
                 layer.enabled: true
                 layer.effect: MultiEffect {
                     shadowEnabled: true
@@ -369,6 +369,7 @@ Item {
                     shadowColor: Qt.rgba(0, 0, 0, 0.4)
                     shadowOpacity: 0.7
                 }
+            }
 
             Behavior on height {
                 NumberAnimation {
@@ -378,8 +379,22 @@ Item {
                 }
             }
 
-            Behavior on opacity {
+            enter: Transition {
                 NumberAnimation {
+                    property: "opacity"
+                    from: 0
+                    to: 1
+                    duration: Anims.durShort
+                    easing.type: Easing.BezierSpline
+                    easing.bezierCurve: Anims.standard
+                }
+            }
+
+            exit: Transition {
+                NumberAnimation {
+                    property: "opacity"
+                    from: 1
+                    to: 0
                     duration: Anims.durShort
                     easing.type: Easing.BezierSpline
                     easing.bezierCurve: Anims.standard
@@ -471,7 +486,6 @@ Item {
                                     onClicked: {
                                         if (modelData) {
                                             Pipewire.preferredDefaultAudioSink = modelData
-                                            console.log("Current default sink after change:", AudioService.sink ? AudioService.sink.name : "null")
                                         }
                                         audioDevicesButton.devicesExpanded = false
                                     }
@@ -486,23 +500,24 @@ Item {
             }
         }
 
-        Rectangle {
+        Popup {
             id: playerSelectorDropdown
             width: 240
             height: playerSelectorButton.playersExpanded ? Math.max(180, Math.min(240, (root.allPlayers?.length || 0) * 50 + 80)) : 0
-            x: parent.width + Theme.spacingS
+            x: root.width + Theme.spacingS
             y: playerSelectorButton.y - 50
             visible: playerSelectorButton.playersExpanded
-            clip: true
+            closePolicy: Popup.NoAutoClose
-            z: 150
+            modal: false
+            dim: false
+            padding: 0
 
+            background: Rectangle {
                 color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
                 border.width: 2
                 radius: Theme.cornerRadius * 2
 
-            opacity: playerSelectorButton.playersExpanded ? 1 : 0
-
                 layer.enabled: true
                 layer.effect: MultiEffect {
                     shadowEnabled: true
@@ -512,6 +527,7 @@ Item {
                     shadowColor: Qt.rgba(0, 0, 0, 0.4)
                     shadowOpacity: 0.7
                 }
+            }
 
             Behavior on height {
                 NumberAnimation {
@@ -521,8 +537,22 @@ Item {
                 }
             }
 
-            Behavior on opacity {
+            enter: Transition {
                 NumberAnimation {
+                    property: "opacity"
+                    from: 0
+                    to: 1
+                    duration: Anims.durShort
+                    easing.type: Easing.BezierSpline
+                    easing.bezierCurve: Anims.standard
+                }
+            }
+
+            exit: Transition {
+                NumberAnimation {
+                    property: "opacity"
+                    from: 1
+                    to: 0
                     duration: Anims.durShort
                     easing.type: Easing.BezierSpline
                     easing.bezierCurve: Anims.standard
@@ -797,13 +827,18 @@ Item {
                             spacing: Theme.spacingM
                             height: parent.height
 
+                        Item {
+                            width: 50
+                            height: 50
+                            anchors.verticalCenter: parent.verticalCenter
+                            visible: activePlayer && activePlayer.shuffleSupported
+
                             Rectangle {
                                 width: 40
                                 height: 40
                                 radius: 20
+                                anchors.centerIn: parent
                                 color: shuffleArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
-                            anchors.verticalCenter: parent.verticalCenter
-                            visible: activePlayer && activePlayer.shuffleSupported
 
                                 DankIcon {
                                     anchors.centerIn: parent
@@ -832,13 +867,19 @@ Item {
                                     }
                                 }
                             }
+                        }
+
+                        Item {
+                            width: 50
+                            height: 50
+                            anchors.verticalCenter: parent.verticalCenter
 
                             Rectangle {
                                 width: 40
                                 height: 40
                                 radius: 20
+                                anchors.centerIn: parent
                                 color: prevBtnArea.containsMouse ? Theme.surfaceContainerHigh : "transparent"
-                            anchors.verticalCenter: parent.verticalCenter
 
                                 DankIcon {
                                     anchors.centerIn: parent
@@ -865,13 +906,19 @@ Item {
                                     }
                                 }
                             }
+                        }
+
+                        Item {
+                            width: 50
+                            height: 50
+                            anchors.verticalCenter: parent.verticalCenter
 
                             Rectangle {
                                 width: 50
                                 height: 50
                                 radius: 25
+                                anchors.centerIn: parent
                                 color: Theme.primary
-                            anchors.verticalCenter: parent.verticalCenter
 
                                 DankIcon {
                                     anchors.centerIn: parent
@@ -892,19 +939,25 @@ Item {
                                 layer.effect: MultiEffect {
                                     shadowEnabled: true
                                     shadowHorizontalOffset: 0
-                                shadowVerticalOffset: 6
+                                    shadowVerticalOffset: 0
                                     shadowBlur: 1.0
                                     shadowColor: Qt.rgba(0, 0, 0, 0.3)
                                     shadowOpacity: 0.3
                                 }
                             }
+                        }
+
+                        Item {
+                            width: 50
+                            height: 50
+                            anchors.verticalCenter: parent.verticalCenter
 
                             Rectangle {
                                 width: 40
                                 height: 40
                                 radius: 20
+                                anchors.centerIn: parent
                                 color: nextBtnArea.containsMouse ? Theme.surfaceContainerHigh : "transparent"
-                            anchors.verticalCenter: parent.verticalCenter
 
                                 DankIcon {
                                     anchors.centerIn: parent
@@ -921,14 +974,20 @@ Item {
                                     onClicked: activePlayer && activePlayer.next()
                                 }
                             }
+                        }
+
+                        Item {
+                            width: 50
+                            height: 50
+                            anchors.verticalCenter: parent.verticalCenter
+                            visible: activePlayer && activePlayer.loopSupported
 
                             Rectangle {
                                 width: 40
                                 height: 40
                                 radius: 20
+                                anchors.centerIn: parent
                                 color: repeatArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
-                            anchors.verticalCenter: parent.verticalCenter
-                            visible: activePlayer && activePlayer.loopSupported
 
                                 DankIcon {
                                     anchors.centerIn: parent
@@ -979,6 +1038,7 @@ Item {
                     }      
                 }         
             }            
+        }                  
 
         Rectangle {
             id: playerSelectorButton
@@ -1010,10 +1070,29 @@ Item {
                 onClicked: {
                     parent.playersExpanded = !parent.playersExpanded
                 }
+                onEntered: {
+                    playerTooltipLoader.active = true
+                    if (playerTooltipLoader.item) {
+                        const p = playerSelectorButton.mapToItem(null, playerSelectorButton.width / 2, 0)
+                        playerTooltipLoader.item.show("Media Player", p.x, p.y - 40, null)
+                    }
+                }
+                onExited: {
+                    if (playerTooltipLoader.item) {
+                        playerTooltipLoader.item.hide()
+                    }
+                    playerTooltipLoader.active = false
+                }
             }
 
         }
 
+        Loader {
+            id: playerTooltipLoader
+            active: false
+            sourceComponent: DankTooltip {}
+        }
+
         Rectangle {
             id: volumeButton
             width: 40
@@ -1024,7 +1103,7 @@ Item {
             color: volumeButtonArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : "transparent"
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
             border.width: 1
-            z: 100
+            z: 101
 
             property bool volumeExpanded: false
 
@@ -1068,24 +1147,106 @@ Item {
 
         }
 
+
         Rectangle {
+            id: audioDevicesButton
+            width: 40
+            height: 40
+            radius: 20
+            x: parent.width - 40 - Theme.spacingM
+            y: 240  
+            color: audioDevicesArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : "transparent"
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
+            border.width: 1
+            z: 100
+
+            property bool devicesExpanded: false
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: parent.devicesExpanded ? "expand_less" : "speaker"
+                size: 18
+                color: Theme.surfaceText
+            }
+
+            MouseArea {
+                id: audioDevicesArea
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    parent.devicesExpanded = !parent.devicesExpanded
+                }
+                onEntered: {
+                    audioDevicesTooltipLoader.active = true
+                    if (audioDevicesTooltipLoader.item) {
+                        const p = audioDevicesButton.mapToItem(null, audioDevicesButton.width / 2, 0)
+                        audioDevicesTooltipLoader.item.show("Output Device", p.x, p.y - 40, null)
+                    }
+                }
+                onExited: {
+                    if (audioDevicesTooltipLoader.item) {
+                        audioDevicesTooltipLoader.item.hide()
+                    }
+                    audioDevicesTooltipLoader.active = false
+                }
+            }
+
+        }
+
+        Loader {
+            id: audioDevicesTooltipLoader
+            active: false
+            sourceComponent: DankTooltip {}
+        }
+
+    }
+
+    Popup {
         id: volumeSliderPanel
         width: 60
         height: 180
-            radius: Theme.cornerRadius * 2
+        x: root.width + Theme.spacingS
-            x: parent.width + Theme.spacingS
         y: volumeButton.y - 50
+        visible: volumeButton.volumeExpanded
+        closePolicy: Popup.NoAutoClose
+        modal: false
+        dim: false
+        padding: 0
+
+        background: Rectangle {
+            radius: Theme.cornerRadius * 2
             color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95)
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
             border.width: 1
-            visible: volumeButton.volumeExpanded
-            clip: true
-            z: 110
 
-            opacity: volumeButton.volumeExpanded ? 1 : 0
+            layer.enabled: true
+            layer.effect: MultiEffect {
+                shadowEnabled: true
+                shadowHorizontalOffset: 0
+                shadowVerticalOffset: 8
+                shadowBlur: 1.0
+                shadowColor: Qt.rgba(0, 0, 0, 0.4)
+                shadowOpacity: 0.7
+            }
+        }
 
-            Behavior on opacity {
+        enter: Transition {
             NumberAnimation {
+                property: "opacity"
+                from: 0
+                to: 1
+                duration: Anims.durShort
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Anims.standard
+            }
+        }
+
+        exit: Transition {
+            NumberAnimation {
+                property: "opacity"
+                from: 1
+                to: 0
                 duration: Anims.durShort
                 easing.type: Easing.BezierSpline
                 easing.bezierCurve: Anims.standard
@@ -1108,8 +1269,6 @@ Item {
                 property bool containsMouse: volumeSliderArea.containsMouse
                 property bool active: volumeSliderArea.containsMouse || volumeSliderArea.pressed || dragging
 
-                    function withAlpha(c, a) { return Qt.rgba(c.r, c.g, c.b, a) }
-
                 Rectangle {
                     id: sliderTrack
                     width: parent.width
@@ -1197,7 +1356,7 @@ Item {
                         }
                     }
 
-                        scale: active ? 1.05 : 1.0
+                    scale: volumeSlider.active ? 1.05 : 1.0
 
                     Behavior on scale {
                         NumberAnimation {
@@ -1274,39 +1433,4 @@ Item {
             }
         }
     }
-
-        Rectangle {
-            id: audioDevicesButton
-            width: 40
-            height: 40
-            radius: 20
-            x: parent.width - 40 - Theme.spacingM
-            y: 240  
-            color: audioDevicesArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : "transparent"
-            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
-            border.width: 1
-            z: 100
-
-            property bool devicesExpanded: false
-
-            DankIcon {
-                anchors.centerIn: parent
-                name: parent.devicesExpanded ? "expand_less" : "speaker"
-                size: 18
-                color: Theme.surfaceText
-            }
-
-            MouseArea {
-                id: audioDevicesArea
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    parent.devicesExpanded = !parent.devicesExpanded
-                }
-            }
-
-        }
-
-    }
 }

Modules/DankDash/Overview/UserInfoCard.qml

@@ -13,34 +13,13 @@ Card {
         anchors.verticalCenter: parent.verticalCenter
         spacing: Theme.spacingM
 
-        Item {
+        DankCircularImage {
             id: avatarContainer
 
-            property bool hasImage: profileImageLoader.status === Image.Ready
-            
             width: 77
             height: 77
             anchors.verticalCenter: parent.verticalCenter
-            
+            imageSource: {
-            Rectangle {
-                anchors.fill: parent
-                radius: 36
-                color: Theme.primary
-                visible: !avatarContainer.hasImage
-                
-                StyledText {
-                    anchors.centerIn: parent
-                    text: UserInfoService.username.length > 0 ? UserInfoService.username.charAt(0).toUpperCase() : "b"
-                    font.pixelSize: Theme.fontSizeXLarge + 4
-                    font.weight: Font.Bold
-                    color: Theme.background
-                }
-            }
-            
-            Image {
-                id: profileImageLoader
-                
-                source: {
                 if (PortalService.profileImage === "")
                     return ""
 
@@ -49,47 +28,7 @@ Card {
 
                 return PortalService.profileImage
             }
-                smooth: true
+            fallbackIcon: "person"
-                asynchronous: true
-                mipmap: true
-                cache: true
-                visible: false
-            }
-            
-            MultiEffect {
-                anchors.fill: parent
-                anchors.margins: 2
-                source: profileImageLoader
-                maskEnabled: true
-                maskSource: circularMask
-                visible: avatarContainer.hasImage
-                maskThresholdMin: 0.5
-                maskSpreadAtMin: 1
-            }
-            
-            Item {
-                id: circularMask
-                width: 77 - 4
-                height: 77 - 4
-                layer.enabled: true
-                layer.smooth: true
-                visible: false
-                
-                Rectangle {
-                    anchors.fill: parent
-                    radius: width / 2
-                    color: "black"
-                    antialiasing: true
-                }
-            }
-            
-            DankIcon {
-                anchors.centerIn: parent
-                name: "person"
-                size: Theme.iconSize + 8
-                color: Theme.error
-                visible: PortalService.profileImage !== "" && profileImageLoader.status === Image.Error
-            }
         }
 
         Column {

Modules/Dock/Dock.qml

@@ -7,22 +7,59 @@ import qs.Common
 import qs.Services
 import qs.Widgets
 
-PanelWindow {
+pragma ComponentBehavior: Bound
+
+Variants {
+    id: dockVariants
+    model: SettingsData.getFilteredScreens("dock")
+
+    property var contextMenu
+
+    delegate: PanelWindow {
         id: dock
 
         WlrLayershell.namespace: "quickshell:dock"
 
-    WlrLayershell.layer: WlrLayershell.Top
+        readonly property bool isVertical: SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right
-    WlrLayershell.exclusiveZone: -1
-    WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
 
-    property var modelData
+        anchors {
-    property var contextMenu
+            top: !isVertical ? (SettingsData.dockPosition === SettingsData.Position.Top) : true
+            bottom: !isVertical ? (SettingsData.dockPosition === SettingsData.Position.Bottom) : true
+            left: !isVertical ? true : (SettingsData.dockPosition === SettingsData.Position.Left)
+            right: !isVertical ? true : (SettingsData.dockPosition === SettingsData.Position.Right)
+        }
+
+        property var modelData: item
     property bool autoHide: SettingsData.dockAutoHide
     property real backgroundTransparency: SettingsData.dockTransparency
     property bool groupByApp: SettingsData.dockGroupByApp
 
-    property bool contextMenuOpen: (contextMenu && contextMenu.visible && contextMenu.screen === modelData)
+    readonly property real widgetHeight: Math.max(20, 26 + SettingsData.dankBarInnerPadding * 0.6)
+    readonly property real effectiveBarHeight: Math.max(widgetHeight + SettingsData.dankBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.dankBarInnerPadding))
+    readonly property real barSpacing: {
+        const barIsHorizontal = (SettingsData.dankBarPosition === SettingsData.Position.Top || SettingsData.dankBarPosition === SettingsData.Position.Bottom)
+        const barIsVertical = (SettingsData.dankBarPosition === SettingsData.Position.Left || SettingsData.dankBarPosition === SettingsData.Position.Right)
+        const samePosition = (SettingsData.dockPosition === SettingsData.dankBarPosition)
+        const dockIsHorizontal = !isVertical
+        const dockIsVertical = isVertical
+
+        if (!SettingsData.dankBarVisible) return 0
+        if (dockIsHorizontal && barIsHorizontal && samePosition) {
+            return SettingsData.dankBarSpacing + effectiveBarHeight + SettingsData.dankBarBottomGap
+        }
+        if (dockIsVertical && barIsVertical && samePosition) {
+            return SettingsData.dankBarSpacing + effectiveBarHeight + SettingsData.dankBarBottomGap
+        }
+        return 0
+    }
+
+    readonly property real dockMargin: SettingsData.dockSpacing
+    readonly property real positionSpacing: barSpacing + SettingsData.dockBottomGap
+    readonly property real _dpr: (dock.screen && dock.screen.devicePixelRatio) ? dock.screen.devicePixelRatio : 1
+    function px(v) { return Math.round(v * _dpr) / _dpr }
+
+
+    property bool contextMenuOpen: (dockVariants.contextMenu && dockVariants.contextMenu.visible && dockVariants.contextMenu.screen === modelData)
     property bool windowIsFullscreen: {
         if (!ToplevelManager.activeToplevel) {
             return false
@@ -31,7 +68,28 @@ PanelWindow {
         const fullscreenApps = ["vlc", "mpv", "kodi", "steam", "lutris", "wine", "dosbox"]
         return fullscreenApps.some(app => activeWindow.appId && activeWindow.appId.toLowerCase().includes(app))
     }
-    property bool reveal: (!autoHide || dockMouseArea.containsMouse || dockApps.requestDockShow || contextMenuOpen) && !windowIsFullscreen
+    property bool revealSticky: false
+
+    Timer {
+        id: revealHold
+        interval: 250
+        repeat: false
+        onTriggered: dock.revealSticky = false
+    }
+
+    property bool reveal: {
+        if (CompositorService.isNiri && NiriService.inOverview) {
+            return SettingsData.dockOpenOnOverview
+        }
+        return (!autoHide || dockMouseArea.containsMouse || dockApps.requestDockShow || contextMenuOpen || revealSticky) && !windowIsFullscreen
+    }
+
+    onContextMenuOpenChanged: {
+        if (!contextMenuOpen && autoHide && !dockMouseArea.containsMouse) {
+            revealSticky = true
+            revealHold.restart()
+        }
+    }
 
     Connections {
         target: SettingsData
@@ -44,113 +102,30 @@ PanelWindow {
     visible: SettingsData.showDock
     color: "transparent"
 
-    anchors {
-        bottom: true
-        left: true
-        right: true
-    }
 
-    margins {
+    exclusiveZone: {
-        left: 0
+        if (!SettingsData.showDock || autoHide) return -1
-        right: 0
+        if (barSpacing > 0) return -1
+        return px(58 + SettingsData.dockSpacing + SettingsData.dockBottomGap)
     }
 
-    implicitHeight: 100
-    exclusiveZone: autoHide ? -1 : 65 - 16
-
     mask: Region {
         item: dockMouseArea
     }
 
-    MouseArea {
-        id: dockMouseArea
-        property real currentScreen: modelData ? modelData : dock.screen
-        property real screenWidth: currentScreen ? currentScreen.geometry.width : 1920
-        property real maxDockWidth: Math.min(screenWidth * 0.8, 1200)
-
-        height: dock.reveal ? 65 : 20
-        width: dock.reveal ? Math.min(dockBackground.width + 32, maxDockWidth) : Math.min(Math.max(dockBackground.width + 64, 200), screenWidth * 0.5)
-        anchors {
-            bottom: parent.bottom
-            horizontalCenter: parent.horizontalCenter
-        }
-        hoverEnabled: true
-
-        Behavior on height {
-            NumberAnimation {
-                duration: 200
-                easing.type: Easing.OutCubic
-            }
-        }
-
-        Item {
-            id: dockContainer
-            anchors.fill: parent
-
-            transform: Translate {
-                id: dockSlide
-                y: dock.reveal ? 0 : 60
-
-                Behavior on y {
-                    NumberAnimation {
-                        duration: 200
-                        easing.type: Easing.OutCubic
-                    }
-                }
-            }
-
-            Rectangle {
-                id: dockBackground
-                objectName: "dockBackground"
-                anchors {
-                    top: parent.top
-                    bottom: parent.bottom
-                    horizontalCenter: parent.horizontalCenter
-                }
-
-                width: dockApps.implicitWidth + 12
-                height: parent.height - 8
-
-                anchors.topMargin: 4
-                anchors.bottomMargin: 1
-
-                color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, backgroundTransparency)
-                radius: Theme.cornerRadius
-                border.width: 1
-                border.color: Theme.outlineMedium
-                layer.enabled: true
-
-                Rectangle {
-                    anchors.fill: parent
-                    color: Qt.rgba(Theme.surfaceTint.r, Theme.surfaceTint.g, Theme.surfaceTint.b, 0.04)
-                    radius: parent.radius
-                }
-
-                DockApps {
-                    id: dockApps
-
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    anchors.topMargin: 4
-                    anchors.bottomMargin: 4
-
-                    contextMenu: dock.contextMenu
-                    groupByApp: dock.groupByApp
-                }
-            }
-
     Rectangle {
         id: appTooltip
+        z: 1000
 
         property var hoveredButton: {
             if (!dockApps.children[0]) {
                 return null
             }
-                    const row = dockApps.children[0]
+            const layoutItem = dockApps.children[0]
+            const flowLayout = layoutItem.children[0]
             let repeater = null
-                    for (var i = 0; i < row.children.length; i++) {
+            for (var i = 0; i < flowLayout.children.length; i++) {
-                        const child = row.children[i]
+                const child = flowLayout.children[i]
                 if (child && typeof child.count !== "undefined" && typeof child.itemAt === "function") {
                     repeater = child
                     break
@@ -171,16 +146,40 @@ PanelWindow {
         property string tooltipText: hoveredButton ? hoveredButton.tooltipText : ""
 
         visible: hoveredButton !== null && tooltipText !== ""
-                width: tooltipLabel.implicitWidth + 24
+        width: px(tooltipLabel.implicitWidth + 24)
-                height: tooltipLabel.implicitHeight + 12
+        height: px(tooltipLabel.implicitHeight + 12)
 
         color: Theme.surfaceContainer
         radius: Theme.cornerRadius
         border.width: 1
         border.color: Theme.outlineMedium
 
-                y: -height - 8
+        x: {
-                x: hoveredButton ? hoveredButton.mapToItem(dockContainer, hoveredButton.width / 2, 0).x - width / 2 : 0
+            if (!hoveredButton) return 0
+            const buttonPos = hoveredButton.mapToItem(dock.contentItem, 0, 0)
+            if (!dock.isVertical) {
+                return buttonPos.x + hoveredButton.width / 2 - width / 2
+            } else {
+                if (SettingsData.dockPosition === SettingsData.Position.Right) {
+                    return buttonPos.x - width - Theme.spacingS
+                } else {
+                    return buttonPos.x + hoveredButton.width + Theme.spacingS
+                }
+            }
+        }
+        y: {
+            if (!hoveredButton) return 0
+            const buttonPos = hoveredButton.mapToItem(dock.contentItem, 0, 0)
+            if (!dock.isVertical) {
+                if (SettingsData.dockPosition === SettingsData.Position.Bottom) {
+                    return buttonPos.y - height - Theme.spacingS
+                } else {
+                    return buttonPos.y + hoveredButton.height + Theme.spacingS
+                }
+            } else {
+                return buttonPos.y + hoveredButton.height / 2 - height / 2
+            }
+        }
 
         StyledText {
             id: tooltipLabel
@@ -190,6 +189,166 @@ PanelWindow {
             color: Theme.surfaceText
         }
     }
+
+    Item {
+        id: dockCore
+        anchors.fill: parent
+
+        Connections {
+            target: dockMouseArea
+            function onContainsMouseChanged() {
+                if (dockMouseArea.containsMouse) {
+                    dock.revealSticky = true
+                    revealHold.stop()
+                } else {
+                    if (dock.autoHide && !dock.contextMenuOpen) {
+                        revealHold.restart()
+                    }
+                }
+            }
+        }
+
+        MouseArea {
+            id: dockMouseArea
+            property real currentScreen: modelData ? modelData : dock.screen
+            property real screenWidth: currentScreen ? currentScreen.geometry.width : 1920
+            property real screenHeight: currentScreen ? currentScreen.geometry.height : 1080
+            property real maxDockWidth: Math.min(screenWidth * 0.8, 1200)
+            property real maxDockHeight: Math.min(screenHeight * 0.8, 1200)
+
+            height: {
+                if (dock.isVertical) {
+                    return dock.reveal ? Math.min(dockBackground.implicitHeight + 32, maxDockHeight) : Math.min(Math.max(dockBackground.implicitHeight + 64, 200), screenHeight * 0.5)
+                } else {
+                    return dock.reveal ? px(58 + SettingsData.dockSpacing + SettingsData.dockBottomGap) : 1
+                }
+            }
+            width: {
+                if (dock.isVertical) {
+                    return dock.reveal ? px(58 + SettingsData.dockSpacing + SettingsData.dockBottomGap) : 1
+                } else {
+                    return dock.reveal ? Math.min(dockBackground.implicitWidth + 32, maxDockWidth) : Math.min(Math.max(dockBackground.implicitWidth + 64, 200), screenWidth * 0.5)
+                }
+            }
+            anchors {
+                top: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Bottom ? undefined : parent.top) : undefined
+                bottom: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Bottom ? parent.bottom : undefined) : undefined
+                horizontalCenter: !dock.isVertical ? parent.horizontalCenter : undefined
+                left: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Right ? undefined : parent.left) : undefined
+                right: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Right ? parent.right : undefined) : undefined
+                verticalCenter: dock.isVertical ? parent.verticalCenter : undefined
+            }
+            hoverEnabled: true
+            acceptedButtons: Qt.NoButton
+
+            Behavior on height {
+                NumberAnimation {
+                    duration: 200
+                    easing.type: Easing.OutCubic
+                }
+            }
+
+            Behavior on width {
+                NumberAnimation {
+                    duration: 200
+                    easing.type: Easing.OutCubic
+                }
+            }
+
+            Item {
+                id: dockContainer
+                anchors.fill: parent
+
+                transform: Translate {
+                    id: dockSlide
+                    x: {
+                        if (!dock.isVertical) return 0
+                        if (dock.reveal) return 0
+                        if (SettingsData.dockPosition === SettingsData.Position.Right) {
+                            return 60
+                        } else {
+                            return -60
+                        }
+                    }
+                    y: {
+                        if (dock.isVertical) return 0
+                        if (dock.reveal) return 0
+                        if (SettingsData.dockPosition === SettingsData.Position.Bottom) {
+                            return 60
+                        } else {
+                            return -60
+                        }
+                    }
+
+                    Behavior on x {
+                        NumberAnimation {
+                            duration: 200
+                            easing.type: Easing.OutCubic
+                        }
+                    }
+
+                    Behavior on y {
+                        NumberAnimation {
+                            duration: 200
+                            easing.type: Easing.OutCubic
+                        }
+                    }
+                }
+
+                Rectangle {
+                    id: dockBackground
+                    objectName: "dockBackground"
+                    anchors {
+                        top: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Bottom ? undefined : parent.top) : undefined
+                        bottom: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Bottom ? parent.bottom : undefined) : undefined
+                        horizontalCenter: !dock.isVertical ? parent.horizontalCenter : undefined
+                        left: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Right ? undefined : parent.left) : undefined
+                        right: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Right ? parent.right : undefined) : undefined
+                        verticalCenter: dock.isVertical ? parent.verticalCenter : undefined
+                    }
+                    anchors.topMargin: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Bottom ? 0 : barSpacing + 4) : 0
+                    anchors.bottomMargin: !dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Bottom ? barSpacing + 1 : 0) : 0
+                    anchors.leftMargin: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Right ? 0 : barSpacing + 4) : 0
+                    anchors.rightMargin: dock.isVertical ? (SettingsData.dockPosition === SettingsData.Position.Right ? barSpacing + 1 : 0) : 0
+
+                    implicitWidth: dock.isVertical ? (dockApps.implicitHeight + SettingsData.dockSpacing * 2) : (dockApps.implicitWidth + SettingsData.dockSpacing * 2)
+                    implicitHeight: dock.isVertical ? (dockApps.implicitWidth + SettingsData.dockSpacing * 2) : (dockApps.implicitHeight + SettingsData.dockSpacing * 2)
+                    width: implicitWidth
+                    height: implicitHeight
+
+                    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, backgroundTransparency)
+                    radius: Theme.cornerRadius
+                    border.width: 1
+                    border.color: Theme.outlineMedium
+                    layer.enabled: true
+
+                    Rectangle {
+                        anchors.fill: parent
+                        color: Qt.rgba(Theme.surfaceTint.r, Theme.surfaceTint.g, Theme.surfaceTint.b, 0.04)
+                        radius: parent.radius
+                    }
+
+                    DockApps {
+                        id: dockApps
+
+                        anchors.top: !dock.isVertical ? parent.top : undefined
+                        anchors.bottom: !dock.isVertical ? parent.bottom : undefined
+                        anchors.horizontalCenter: !dock.isVertical ? parent.horizontalCenter : undefined
+                        anchors.left: dock.isVertical ? parent.left : undefined
+                        anchors.right: dock.isVertical ? parent.right : undefined
+                        anchors.verticalCenter: dock.isVertical ? parent.verticalCenter : undefined
+                        anchors.topMargin: !dock.isVertical ? SettingsData.dockSpacing : 0
+                        anchors.bottomMargin: !dock.isVertical ? SettingsData.dockSpacing : 0
+                        anchors.leftMargin: dock.isVertical ? SettingsData.dockSpacing : 0
+                        anchors.rightMargin: dock.isVertical ? SettingsData.dockSpacing : 0
+
+                        contextMenu: dockVariants.contextMenu
+                        groupByApp: dock.groupByApp
+                        isVertical: dock.isVertical
+                    }
+                }
+            }
+        }
         }
     }
 }

Modules/Dock/DockAppButton.qml

@@ -25,6 +25,27 @@ Item {
     property string windowTitle: ""
     property bool isHovered: mouseArea.containsMouse && !dragging
     property bool showTooltip: mouseArea.containsMouse && !dragging
+    property var cachedDesktopEntry: null
+
+    function updateDesktopEntry() {
+        if (!appData || appData.appId === "__SEPARATOR__") {
+            cachedDesktopEntry = null
+            return
+        }
+        const moddedId = Paths.moddedAppId(appData.appId)
+        cachedDesktopEntry = DesktopEntries.heuristicLookup(moddedId)
+    }
+
+    Component.onCompleted: updateDesktopEntry()
+
+    onAppDataChanged: updateDesktopEntry()
+
+    Connections {
+        target: DesktopEntries
+        function onApplicationsChanged() {
+            updateDesktopEntry()
+        }
+    }
     property bool isWindowFocused: {
         if (!appData) {
             return false
@@ -55,8 +76,7 @@ Item {
         }
 
         if ((appData.type === "window" && showWindowTitle) || (appData.type === "grouped" && appData.windowTitle)) {
-            const desktopEntry = DesktopEntries.heuristicLookup(appData.appId)
+            const appName = cachedDesktopEntry && cachedDesktopEntry.name ? cachedDesktopEntry.name : appData.appId
-            const appName = desktopEntry && desktopEntry.name ? desktopEntry.name : appData.appId
             const title = appData.type === "window" ? windowTitle : appData.windowTitle
             return appName + (title ? " • " + title : "")
         }
@@ -65,8 +85,7 @@ Item {
             return ""
         }
 
-        const desktopEntry = DesktopEntries.heuristicLookup(appData.appId)
+        return cachedDesktopEntry && cachedDesktopEntry.name ? cachedDesktopEntry.name : appData.appId
-        return desktopEntry && desktopEntry.name ? desktopEntry.name : appData.appId
     }
 
     width: 40
@@ -255,7 +274,7 @@ Item {
                        if (mouse.button === Qt.LeftButton) {
                            if (appData.type === "pinned") {
                                if (appData && appData.appId) {
-                                   const desktopEntry = DesktopEntries.heuristicLookup(appData.appId)
+                                   const desktopEntry = cachedDesktopEntry
                                    if (desktopEntry) {
                                        AppUsageHistoryData.addAppUsage({
                                                                            "id": appData.appId,
@@ -275,7 +294,7 @@ Item {
                            } else if (appData.type === "grouped") {
                                if (appData.windowCount === 0) {
                                    if (appData && appData.appId) {
-                                       const desktopEntry = DesktopEntries.heuristicLookup(appData.appId)
+                                       const desktopEntry = cachedDesktopEntry
                                        if (desktopEntry) {
                                            AppUsageHistoryData.addAppUsage({
                                                                                "id": appData.appId,
@@ -305,7 +324,7 @@ Item {
                            }
                        } else if (mouse.button === Qt.MiddleButton) {
                            if (appData && appData.appId) {
-                               const desktopEntry = DesktopEntries.heuristicLookup(appData.appId)
+                               const desktopEntry = cachedDesktopEntry
                                if (desktopEntry) {
                                    AppUsageHistoryData.addAppUsage({
                                                                        "id": appData.appId,
@@ -341,8 +360,7 @@ Item {
             if (moddedId.toLowerCase().includes("steam_app")) {
                 return ""
             }
-            const desktopEntry = DesktopEntries.heuristicLookup(moddedId)
+            return cachedDesktopEntry && cachedDesktopEntry.icon ? Quickshell.iconPath(cachedDesktopEntry.icon, true) : ""
-            return desktopEntry && desktopEntry.icon ? Quickshell.iconPath(desktopEntry.icon, true) : ""
         }
         mipmap: true
         smooth: true
@@ -381,7 +399,7 @@ Item {
                     return "?"
                 }
 
-                const desktopEntry = DesktopEntries.heuristicLookup(appData.appId)
+                const desktopEntry = cachedDesktopEntry
                 if (desktopEntry && desktopEntry.name) {
                     return desktopEntry.name.charAt(0).toUpperCase()
                 }

Modules/Dock/DockApps.qml

@@ -13,9 +13,10 @@ Item {
     property bool requestDockShow: false
     property int pinnedAppCount: 0
     property bool groupByApp: false
+    property bool isVertical: false
 
-    implicitWidth: row.width
+    implicitWidth: isVertical ? appLayout.height : appLayout.width
-    implicitHeight: row.height
+    implicitHeight: isVertical ? appLayout.width : appLayout.height
 
     function movePinnedApp(fromIndex, toIndex) {
         if (fromIndex === toIndex) {
@@ -33,11 +34,16 @@ Item {
         SessionData.setPinnedApps(currentPinned)
     }
 
-    Row {
+    Item {
-        id: row
+        id: appLayout
-        spacing: 2
         anchors.centerIn: parent
-        height: 40
+        width: layoutFlow.width
+        height: layoutFlow.height
+
+        Flow {
+            id: layoutFlow
+            flow: root.isVertical ? Flow.TopToBottom : Flow.LeftToRight
+            spacing: 8
 
         Repeater {
             id: repeater
@@ -219,6 +225,7 @@ Item {
             }
         }
         }
+    }
 
     Connections {
         target: CompositorService

Modules/Dock/DockContextMenu.qml

@@ -92,17 +92,41 @@ PanelWindow {
         }
 
         const dockBackground = findDockBackground(dockWindow.contentItem)
+        let actualDockWidth = dockWindow.width
         if (dockBackground) {
             actualDockHeight = dockBackground.height
+            actualDockWidth = dockBackground.width
         }
 
-        const dockBottomMargin = 16
+        const isVertical = SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right
-        const buttonScreenY = root.screen.height - actualDockHeight - dockBottomMargin - 20
+        const dockMargin = 16
+        let buttonScreenX, buttonScreenY
+
+        if (isVertical) {
+            const dockContentHeight = dockWindow.height
+            const screenHeight = root.screen.height
+            const dockTopMargin = Math.round((screenHeight - dockContentHeight) / 2)
+            buttonScreenY = dockTopMargin + buttonPosInDock.y + anchorItem.height / 2
+
+            if (SettingsData.dockPosition === SettingsData.Position.Right) {
+                buttonScreenX = root.screen.width - actualDockWidth - dockMargin - 20
+            } else {
+                buttonScreenX = actualDockWidth + dockMargin + 20
+            }
+        } else {
+            const isDockAtBottom = SettingsData.dockPosition === SettingsData.Position.Bottom
+
+            if (isDockAtBottom) {
+                buttonScreenY = root.screen.height - actualDockHeight - dockMargin - 20
+            } else {
+                buttonScreenY = actualDockHeight + dockMargin + 20
+            }
 
             const dockContentWidth = dockWindow.width
             const screenWidth = root.screen.width
             const dockLeftMargin = Math.round((screenWidth - dockContentWidth) / 2)
-        const buttonScreenX = dockLeftMargin + buttonPosInDock.x + anchorItem.width / 2
+            buttonScreenX = dockLeftMargin + buttonPosInDock.x + anchorItem.width / 2
+        }
 
         anchorPos = Qt.point(buttonScreenX, buttonScreenY)
     }
@@ -114,12 +138,37 @@ PanelWindow {
         height: Math.max(60, menuColumn.implicitHeight + Theme.spacingS * 2)
 
         x: {
+            const isVertical = SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right
+            if (isVertical) {
+                const isDockAtRight = SettingsData.dockPosition === SettingsData.Position.Right
+                if (isDockAtRight) {
+                    return Math.max(10, root.anchorPos.x - width + 30)
+                } else {
+                    return Math.min(root.width - width - 10, root.anchorPos.x - 30)
+                }
+            } else {
                 const left = 10
                 const right = root.width - width - 10
                 const want = root.anchorPos.x - width / 2
                 return Math.max(left, Math.min(right, want))
             }
-        y: Math.max(10, root.anchorPos.y - height + 30)
+        }
+        y: {
+            const isVertical = SettingsData.dockPosition === SettingsData.Position.Left || SettingsData.dockPosition === SettingsData.Position.Right
+            if (isVertical) {
+                const top = 10
+                const bottom = root.height - height - 10
+                const want = root.anchorPos.y - height / 2
+                return Math.max(top, Math.min(bottom, want))
+            } else {
+                const isDockAtBottom = SettingsData.dockPosition === SettingsData.Position.Bottom
+                if (isDockAtBottom) {
+                    return Math.max(10, root.anchorPos.y - height + 30)
+                } else {
+                    return Math.min(root.height - height - 10, root.anchorPos.y - 30)
+                }
+            }
+        }
         color: Theme.popupBackground()
         radius: Theme.cornerRadius
         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)

Modules/Greetd/GreetdMemory.qml

@@ -0,0 +1,105 @@
+pragma Singleton
+pragma ComponentBehavior: Bound
+
+import QtCore
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import qs.Common
+
+Singleton {
+    id: root
+
+    readonly property string greetCfgDir: Quickshell.env("DMS_GREET_CFG_DIR") || "/etc/greetd/.dms"
+    readonly property string sessionConfigPath: greetCfgDir + "/session.json"
+    readonly property string memoryFile: greetCfgDir + "/memory.json"
+
+    property string lastSessionId: ""
+    property string lastSuccessfulUser: ""
+    property bool isLightMode: false
+    property bool nightModeEnabled: false
+
+    Component.onCompleted: {
+        Quickshell.execDetached(["mkdir", "-p", greetCfgDir])
+        loadMemory()
+        loadSessionConfig()
+    }
+
+    function loadMemory() {
+        parseMemory(memoryFileView.text())
+    }
+
+    function loadSessionConfig() {
+        parseSessionConfig(sessionConfigFileView.text())
+    }
+
+    function parseSessionConfig(content) {
+        try {
+            if (content && content.trim()) {
+                const config = JSON.parse(content)
+                isLightMode = config.isLightMode !== undefined ? config.isLightMode : false
+                nightModeEnabled = config.nightModeEnabled !== undefined ? config.nightModeEnabled : false
+            }
+        } catch (e) {
+            console.warn("Failed to parse greeter session config:", e)
+        }
+    }
+
+    function parseMemory(content) {
+        try {
+            if (content && content.trim()) {
+                const memory = JSON.parse(content)
+                lastSessionId = memory.lastSessionId !== undefined ? memory.lastSessionId : ""
+                lastSuccessfulUser = memory.lastSuccessfulUser !== undefined ? memory.lastSuccessfulUser : ""
+            }
+        } catch (e) {
+            console.warn("Failed to parse greetd memory:", e)
+        }
+    }
+
+    function saveMemory() {
+        memoryFileView.setText(JSON.stringify({
+            "lastSessionId": lastSessionId,
+            "lastSuccessfulUser": lastSuccessfulUser
+        }, null, 2))
+    }
+
+    function setLastSessionId(id) {
+        lastSessionId = id || ""
+        saveMemory()
+    }
+
+    function setLastSuccessfulUser(username) {
+        lastSuccessfulUser = username || ""
+        saveMemory()
+    }
+
+    FileView {
+        id: memoryFileView
+        path: root.memoryFile
+        blockLoading: false
+        blockWrites: false
+        atomicWrites: true
+        watchChanges: false
+        printErrors: false
+        onLoaded: {
+            parseMemory(memoryFileView.text())
+        }
+    }
+
+    FileView {
+        id: sessionConfigFileView
+        path: root.sessionConfigPath
+        blockLoading: false
+        blockWrites: true
+        atomicWrites: false
+        watchChanges: false
+        printErrors: true
+        onLoaded: {
+            parseSessionConfig(sessionConfigFileView.text())
+        }
+        onLoadFailed: error => {
+            console.warn("Could not load greeter session config from", root.sessionConfigPath, "error:", error)
+        }
+    }
+}

Modules/Greetd/GreetdSettings.qml

@@ -0,0 +1,114 @@
+pragma Singleton
+pragma ComponentBehavior: Bound
+
+import QtCore
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import qs.Common
+
+Singleton {
+    id: root
+
+    readonly property string configPath: {
+        const greetCfgDir = Quickshell.env("DMS_GREET_CFG_DIR") || "/etc/greetd/.dms"
+        return greetCfgDir + "/settings.json"
+    }
+
+    property string currentThemeName: "blue"
+    property bool settingsLoaded: false
+    property string customThemeFile: ""
+    property string matugenScheme: "scheme-tonal-spot"
+    property bool use24HourClock: true
+    property bool useFahrenheit: false
+    property bool nightModeEnabled: false
+    property string weatherLocation: "New York, NY"
+    property string weatherCoordinates: "40.7128,-74.0060"
+    property bool useAutoLocation: false
+    property bool weatherEnabled: true
+    property string iconTheme: "System Default"
+    property bool useOSLogo: false
+    property string osLogoColorOverride: ""
+    property real osLogoBrightness: 0.5
+    property real osLogoContrast: 1
+    property string fontFamily: "Inter Variable"
+    property string monoFontFamily: "Fira Code"
+    property int fontWeight: Font.Normal
+    property real fontScale: 1.0
+    property real cornerRadius: 12
+    property string widgetBackgroundColor: "sch"
+    property string surfaceBase: "s"
+    property string lockDateFormat: ""
+    property bool lockScreenShowPowerActions: true
+    property var screenPreferences: ({})
+    property int animationSpeed: 2
+
+    readonly property string defaultFontFamily: "Inter Variable"
+    readonly property string defaultMonoFontFamily: "Fira Code"
+
+    function parseSettings(content) {
+        try {
+            if (content && content.trim()) {
+                const settings = JSON.parse(content)
+                currentThemeName = settings.currentThemeName !== undefined ? settings.currentThemeName : "blue"
+                customThemeFile = settings.customThemeFile !== undefined ? settings.customThemeFile : ""
+                matugenScheme = settings.matugenScheme !== undefined ? settings.matugenScheme : "scheme-tonal-spot"
+                use24HourClock = settings.use24HourClock !== undefined ? settings.use24HourClock : true
+                useFahrenheit = settings.useFahrenheit !== undefined ? settings.useFahrenheit : false
+                nightModeEnabled = settings.nightModeEnabled !== undefined ? settings.nightModeEnabled : false
+                weatherLocation = settings.weatherLocation !== undefined ? settings.weatherLocation : "New York, NY"
+                weatherCoordinates = settings.weatherCoordinates !== undefined ? settings.weatherCoordinates : "40.7128,-74.0060"
+                useAutoLocation = settings.useAutoLocation !== undefined ? settings.useAutoLocation : false
+                weatherEnabled = settings.weatherEnabled !== undefined ? settings.weatherEnabled : true
+                iconTheme = settings.iconTheme !== undefined ? settings.iconTheme : "System Default"
+                useOSLogo = settings.useOSLogo !== undefined ? settings.useOSLogo : false
+                osLogoColorOverride = settings.osLogoColorOverride !== undefined ? settings.osLogoColorOverride : ""
+                osLogoBrightness = settings.osLogoBrightness !== undefined ? settings.osLogoBrightness : 0.5
+                osLogoContrast = settings.osLogoContrast !== undefined ? settings.osLogoContrast : 1
+                fontFamily = settings.fontFamily !== undefined ? settings.fontFamily : defaultFontFamily
+                monoFontFamily = settings.monoFontFamily !== undefined ? settings.monoFontFamily : defaultMonoFontFamily
+                fontWeight = settings.fontWeight !== undefined ? settings.fontWeight : Font.Normal
+                fontScale = settings.fontScale !== undefined ? settings.fontScale : 1.0
+                cornerRadius = settings.cornerRadius !== undefined ? settings.cornerRadius : 12
+                widgetBackgroundColor = settings.widgetBackgroundColor !== undefined ? settings.widgetBackgroundColor : "sch"
+                surfaceBase = settings.surfaceBase !== undefined ? settings.surfaceBase : "s"
+                lockDateFormat = settings.lockDateFormat !== undefined ? settings.lockDateFormat : ""
+                lockScreenShowPowerActions = settings.lockScreenShowPowerActions !== undefined ? settings.lockScreenShowPowerActions : true
+                screenPreferences = settings.screenPreferences !== undefined ? settings.screenPreferences : ({})
+                animationSpeed = settings.animationSpeed !== undefined ? settings.animationSpeed : 2
+                settingsLoaded = true
+
+                if (typeof Theme !== "undefined") {
+                    Theme.applyGreeterTheme(currentThemeName)
+                }
+            }
+        } catch (e) {
+            console.warn("Failed to parse greetd settings:", e)
+        }
+    }
+
+    function getEffectiveLockDateFormat() {
+        return lockDateFormat && lockDateFormat.length > 0 ? lockDateFormat : Locale.LongFormat
+    }
+
+    function getFilteredScreens(componentId) {
+        const prefs = screenPreferences && screenPreferences[componentId] || ["all"]
+        if (prefs.includes("all")) {
+            return Quickshell.screens
+        }
+        return Quickshell.screens.filter(screen => prefs.includes(screen.name))
+    }
+
+    FileView {
+        id: settingsFile
+        path: root.configPath
+        blockLoading: false
+        blockWrites: true
+        atomicWrites: false
+        watchChanges: false
+        printErrors: true
+        onLoaded: {
+            parseSettings(settingsFile.text())
+        }
+    }
+}

Modules/Greetd/GreeterState.qml

@@ -0,0 +1,28 @@
+import QtQuick
+import Quickshell
+pragma Singleton
+pragma ComponentBehavior: Bound
+
+Singleton {
+    id: root
+
+    property string passwordBuffer: ""
+    property string username: ""
+    property string usernameInput: ""
+    property bool showPasswordInput: false
+    property string selectedSession: ""
+    property string pamState: ""
+    property bool unlocking: false
+
+    property var sessionList: []
+    property var sessionExecs: []
+    property int currentSessionIndex: 0
+
+    function reset() {
+        showPasswordInput = false
+        username = ""
+        usernameInput = ""
+        passwordBuffer = ""
+        pamState = ""
+    }
+}

Modules/Greetd/GreeterSurface.qml

@@ -0,0 +1,18 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Services.Greetd
+
+WlSessionLockSurface {
+    id: root
+
+    required property WlSessionLock lock
+
+    color: "transparent"
+
+    GreeterContent {
+        anchors.fill: parent
+        screenName: root.screen?.name ?? ""
+        sessionLock: root.lock
+    }
+}

Modules/Greetd/README.md

@@ -0,0 +1,79 @@
+# Dank (dms) Greeter
+
+A greeter for [greetd](https://github.com/kennylevinsen/greetd) that follows the aesthetics of the dms lock screen.
+
+## Features
+
+- **Multi user**: Login with any system user
+- **dms sync**: Sync settings with dms for consistent styling between shell and greeter
+- **niri or Hyprland**: Use either niri or Hyprland for the greeter's compositor.
+- **Custom PAM**: Supports custom PAM configuration in `/etc/pam.d/dankshell`
+- **Session Memory**: Remembers last selected session and user
+
+## Installation
+
+The easiest thing is to run `dms greeter install` or `dms` for interactive installation.
+
+Manual installation:
+1. Install `greetd` (in most distro's standard repositories)
+2. Copy `assets/dms-niri.kdl` or `assets/dms-hypr.conf` to `/etc/greetd`
+  - niri if you want to run the greeter under niri, hypr if you want to run the greeter under Hyprland
+3. Copy `assets/greet-niri.sh` or `assets/greet-hyprland.sh` to `/etc/greetd/start-dms.sh`
+4. Edit `/etc/greetd/dms-niri.kdl` or `/etc/greetd/dms-hypr.conf` and replace `_DMS_PATH_` with the absolute path to dms, e.g. `/home/joecool/.config/quickshell/dms`
+5. Edit or create `/etc/greetd/config.toml` 
+```toml
+[terminal]
+# The VT to run the greeter on. Can be "next", "current" or a number
+# designating the VT.
+vt = 1
+
+# The default session, also known as the greeter.
+[default_session]
+
+# `agreety` is the bundled agetty/login-lookalike. You can replace `/bin/sh`
+# with whatever you want started, such as `sway`.
+
+# The user to run the command as. The privileges this user must have depends
+# on the greeter. A graphical greeter may for example require the user to be
+# in the `video` group.
+user = "greeter"
+
+command = "/etc/greetd/start-dms.sh"%
+```
+
+Enable the greeter with `sudo systemctl enable greetd`
+
+## Usage
+
+To run dms in greeter mode you just need to set `DMS_RUN_GREETER=1` in the environment.
+
+```bash
+DMS_RUN_GREETER=1 qs -p /path/to/dms
+```
+
+### Configuration
+
+#### Compositor
+
+You can configure compositor specific settings such as outputs/displays the same as you would in niri or Hyprland.
+
+Simply edit `/etc/greetd/dms-niri.kdl` or `/etc/greetd/dms-hypr.conf` to change compositor settings for the greeter
+
+#### Personalization
+
+Wallpapers and themes and weather and clock formats and things are a TODO on the documentation, but it's configured exactly the same as dms.
+
+You can synchronize those configurations with a specific user if you want greeter settings to always mirror the shell.
+
+```bash
+# For core settings (theme, clock formats, etc)
+sudo ln -sf ~/.config/DankMaterialShell/settings.json /etc/greetd/.dms/settings.json
+# For state (mainly you would configure wallpaper in this file)
+sudo ln -sf ~/.local/state/DankMaterialShell/session.json /etc/greetd/.dms/session.json
+# For wallpaper based theming
+sudo ln -sf ~/.cache/quickshell/dankshell/dms-colors.json /etc/greetd/.dms/dms-colors.json
+```
+
+You can override the configuration path with the `DMS_GREET_CFG_DIR` environment variable, the default is `/etc/greetd/.dms`
+
+It should be writable by the greeter user.

Modules/Greetd/assets/dms-hypr.conf

@@ -0,0 +1,6 @@
+env = DMS_RUN_GREETER,1
+env = QT_QPA_PLATFORM,wayland
+env = QT_WAYLAND_DISABLE_WINDOWDECORATION,1
+env = EGL_PLATFORM,gbm
+
+exec = sh -c "qs -p _DMS_PATH_; hyprctl dispatch exit"

Modules/Greetd/assets/dms-niri.kdl

@@ -0,0 +1,21 @@
+hotkey-overlay {
+    skip-at-startup
+}
+
+environment {
+    DMS_RUN_GREETER "1"
+    QT_QPA_PLATFORM "wayland"
+    QT_WAYLAND_DISABLE_WINDOWDECORATION "1"
+}
+
+spawn-at-startup "sh" "-c" "qs -p _DMS_PATH_; niri msg action quit --skip-confirmation"
+
+debug {
+  keep-max-bpc-unchanged
+}
+
+gestures {
+   hot-corners {
+     off
+   }
+}

Modules/Greetd/assets/greet-hyprland.sh

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+EGL_PLATFORM=gbm Hyprland -c /etc/greetd/dms-hypr.conf

Modules/Greetd/assets/greet-niri.sh

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+EGL_PLATFORM=gbm niri -c /etc/greetd/dms-niri.kdl

Modules/Lock/LockScreenContent.qml

@@ -44,10 +44,8 @@ Item {
         powerDialogVisible = false
     }
 
-    property var facts: ["A photon takes 100,000 to 200,000 years bouncing through the Sun's dense core, then races to Earth in just 8 minutes 20 seconds.", "A teaspoon of neutron star matter would weigh a billion metric tons here on Earth.", "Right now, 100 trillion solar neutrinos are passing through your body every second.", "The Sun converts 4 million metric tons of matter into pure energy every second—enough to power Earth for 500,000 years.", "The universe still glows with leftover heat from the Big Bang—just 2.7 degrees above absolute zero.", "There's a nebula out there that's actually colder than empty space itself.", "We've detected black holes crashing together by measuring spacetime stretch by less than 1/10,000th the width of a proton.", "Fast radio bursts can release more energy in 5 milliseconds than our Sun produces in 3 days.", "Our galaxy might be crawling with billions of rogue planets drifting alone in the dark.", "Distant galaxies can move away from us faster than light because space itself is stretching.", "The edge of what we can see is 46.5 billion light-years away, even though the universe is only 13.8 billion years old.", "The universe is mostly invisible: 5% regular matter, 27% dark matter, 68% dark energy.", "A day on Venus lasts longer than its entire year around the Sun.", "On Mercury, the time between sunrises is 176 Earth days long.", "In about 4.5 billion years, our galaxy will smash into Andromeda.", "Most of the gold in your jewelry was forged when neutron stars collided somewhere in space.", "PSR J1748-2446ad, the fastest spinning star, rotates 716 times per second—its equator moves at 24% the speed of light.", "Cosmic rays create particles that shouldn't make it to Earth's surface, but time dilation lets them sneak through.", "Jupiter's magnetic field is so huge that if we could see it, it would look bigger than the Moon in our sky.", "Interstellar space is so empty it's like a cube 32 kilometers wide containing just a single grain of sand.", "Voyager 1 is 24 billion kilometers away but won't leave the Sun's gravitational influence for another 30,000 years.", "Counting to a billion at one number per second would take over 31 years.", "Space is so vast, even speeding at light-speed, you'd never return past the cosmic horizon.", "Astronauts on the ISS age about 0.01 seconds less each year than people on Earth.", "Sagittarius B2, a dust cloud near our galaxy's center, contains ethyl formate—the compound that gives raspberries their flavor and rum its smell.", "Beyond 16 billion light-years, the cosmic event horizon marks where space expands too fast for light to ever reach us again.", "Even at light-speed, you'd never catch up to most galaxies—space expands faster.", "Only around 5% of galaxies are ever reachable—even at light-speed.", "If the Sun vanished, we'd still orbit it for 8 minutes before drifting away.", "If a planet 65 million light-years away looked at Earth now, it'd see dinosaurs.", "Our oldest radio signals will reach the Milky Way's center in 26,000 years.", "Every atom in your body heavier than hydrogen was forged in the nuclear furnace of a dying star.", "The Moon moves 3.8 centimeters farther from Earth every year.", "The universe creates 275 million new stars every single day.", "Jupiter's Great Red Spot is a storm twice the size of Earth that has been raging for at least 350 years.", "If you watched someone fall into a black hole, they'd appear frozen at the event horizon forever—time effectively stops from your perspective.", "The Boötes Supervoid is a cosmic desert 1.8 billion light-years across with 60% fewer galaxies than it should have."]
-
     function pickRandomFact() {
-        randomFact = facts[Math.floor(Math.random() * facts.length)]
+        randomFact = Facts.getRandomFact()
     }
 
     Component.onCompleted: {
@@ -180,27 +178,10 @@ Item {
                 spacing: Theme.spacingL
                 Layout.fillWidth: true
 
-                Item {
+                DankCircularImage {
-                    id: avatarContainer
-
-                    property bool hasImage: profileImageLoader.status === Image.Ready
-
                     Layout.preferredWidth: 60
                     Layout.preferredHeight: 60
-
+                    imageSource: {
-                    Rectangle {
-                        anchors.fill: parent
-                        radius: width / 2
-                        color: "transparent"
-                        border.color: Theme.primary
-                        border.width: 1
-                        visible: parent.hasImage
-                    }
-
-                    Image {
-                        id: profileImageLoader
-
-                        source: {
                         if (PortalService.profileImage === "") {
                             return ""
                         }
@@ -211,62 +192,7 @@ Item {
 
                         return PortalService.profileImage
                     }
-                        smooth: true
+                    fallbackIcon: "person"
-                        asynchronous: true
-                        mipmap: true
-                        cache: true
-                        visible: false
-                    }
-
-                    MultiEffect {
-                        anchors.fill: parent
-                        anchors.margins: 5
-                        source: profileImageLoader
-                        maskEnabled: true
-                        maskSource: circularMask
-                        visible: avatarContainer.hasImage
-                        maskThresholdMin: 0.5
-                        maskSpreadAtMin: 1
-                    }
-
-                    Item {
-                        id: circularMask
-
-                        width: 60 - 10
-                        height: 60 - 10
-                        layer.enabled: true
-                        layer.smooth: true
-                        visible: false
-
-                        Rectangle {
-                            anchors.fill: parent
-                            radius: width / 2
-                            color: "black"
-                            antialiasing: true
-                        }
-                    }
-
-                    Rectangle {
-                        anchors.fill: parent
-                        radius: width / 2
-                        color: Theme.primary
-                        visible: !parent.hasImage
-
-                        DankIcon {
-                            anchors.centerIn: parent
-                            name: "person"
-                            size: Theme.iconSize + 4
-                            color: Theme.primaryText
-                        }
-                    }
-
-                    DankIcon {
-                        anchors.centerIn: parent
-                        name: "warning"
-                        size: Theme.iconSize + 4
-                        color: Theme.primaryText
-                        visible: PortalService.profileImage !== "" && profileImageLoader.status === Image.Error
-                    }
                 }
 
                 Rectangle {

Modules/Notepad/NotepadTabs.qml

@@ -63,7 +63,7 @@ Column {
                         width: calculatedWidth
                         height: 32
                         radius: Theme.cornerRadius
-                        color: isActive ? Theme.primaryPressed : isHovered ? Theme.primaryHoverLight : "transparent"
+                        color: isActive ? Theme.primaryPressed : isHovered ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryPressed, 0)
                         border.width: isActive ? 0 : 1
                         border.color: Theme.outlineMedium
 
@@ -104,7 +104,7 @@ Column {
                                 width: 20
                                 height: 20
                                 radius: 10
-                                color: closeMouseArea.containsMouse ? Theme.surfaceTextHover : "transparent"
+                                color: closeMouseArea.containsMouse ? Theme.surfaceTextHover : Theme.withAlpha(Theme.surfaceTextHover, 0)
                                 visible: NotepadStorageService.tabs.length > 1
                                 anchors.verticalCenter: parent.verticalCenter
 

Modules/Notifications/Center/NotificationCenterPopout.qml

@@ -13,7 +13,6 @@ DankPopout {
     id: root
 
     property bool notificationHistoryVisible: false
-    property string triggerSection: "right"
     property var triggerScreen: null
 
     NotificationKeyboardController {
@@ -35,10 +34,10 @@ DankPopout {
 
     popupWidth: 400
     popupHeight: contentLoader.item ? contentLoader.item.implicitHeight : 400
-    triggerX: Screen.width - 400 - Theme.spacingL
+    triggerX: 0
-    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.popupDistance
+    triggerY: 0
     triggerWidth: 40
-    positioning: "center"
+    positioning: ""
     screen: triggerScreen
     shouldBeVisible: notificationHistoryVisible
     visible: shouldBeVisible

Modules/Notifications/Center/NotificationKeyboardController.qml

@@ -411,6 +411,78 @@ QtObject {
                 selectPrevious()
                 event.accepted = true
             }
+        } else if (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) {
+            if (!keyboardNavigationActive) {
+                keyboardNavigationActive = true
+                rebuildFlatNavigation()
+                selectedFlatIndex = 0
+                updateSelectedIdFromIndex()
+                if (listView) {
+                    listView.keyboardActive = true
+                }
+                selectionVersion++
+                ensureVisible()
+            } else {
+                selectNext()
+            }
+            event.accepted = true
+        } else if (event.key === Qt.Key_P && event.modifiers & Qt.ControlModifier) {
+            if (!keyboardNavigationActive) {
+                keyboardNavigationActive = true
+                rebuildFlatNavigation()
+                selectedFlatIndex = 0
+                updateSelectedIdFromIndex()
+                if (listView) {
+                    listView.keyboardActive = true
+                }
+                selectionVersion++
+                ensureVisible()
+            } else if (selectedFlatIndex === 0) {
+                keyboardNavigationActive = false
+                if (listView) {
+                    listView.keyboardActive = false
+                }
+                selectionVersion++
+            } else {
+                selectPrevious()
+            }
+            event.accepted = true
+        } else if (event.key === Qt.Key_J && event.modifiers & Qt.ControlModifier) {
+            if (!keyboardNavigationActive) {
+                keyboardNavigationActive = true
+                rebuildFlatNavigation()
+                selectedFlatIndex = 0
+                updateSelectedIdFromIndex()
+                if (listView) {
+                    listView.keyboardActive = true
+                }
+                selectionVersion++
+                ensureVisible()
+            } else {
+                selectNext()
+            }
+            event.accepted = true
+        } else if (event.key === Qt.Key_K && event.modifiers & Qt.ControlModifier) {
+            if (!keyboardNavigationActive) {
+                keyboardNavigationActive = true
+                rebuildFlatNavigation()
+                selectedFlatIndex = 0
+                updateSelectedIdFromIndex()
+                if (listView) {
+                    listView.keyboardActive = true
+                }
+                selectionVersion++
+                ensureVisible()
+            } else if (selectedFlatIndex === 0) {
+                keyboardNavigationActive = false
+                if (listView) {
+                    listView.keyboardActive = false
+                }
+                selectionVersion++
+            } else {
+                selectPrevious()
+            }
+            event.accepted = true
         } else if (keyboardNavigationActive) {
             if (event.key === Qt.Key_Space) {
                 toggleGroupExpanded()
@@ -425,7 +497,10 @@ QtObject {
                 clearSelected()
                 event.accepted = true
             } else if (event.key === Qt.Key_Tab) {
-                selectNextWrapping()
+                selectNext()
+                event.accepted = true
+            } else if (event.key === Qt.Key_Backtab) {
+                selectPrevious()
                 event.accepted = true
             } else if (event.key >= Qt.Key_1 && event.key <= Qt.Key_9) {
                 const actionIndex = event.key - Qt.Key_1

Modules/Notifications/Popup/NotificationPopup.qml

@@ -76,7 +76,6 @@ PanelWindow {
     color: "transparent"
     implicitWidth: 400
     implicitHeight: 122
-    onScreenYChanged: margins.top = Theme.barHeight - 4 + SettingsData.topBarSpacing + 4 + screenY
     onHasValidDataChanged: {
         if (!hasValidData && !exiting && !_isDestroying) {
             forceExit()
@@ -108,14 +107,94 @@ PanelWindow {
         }
     }
 
-    anchors {
+    property bool isTopCenter: SettingsData.notificationPopupPosition === -1
-        top: true
+
-        right: true
+    anchors.top: isTopCenter || SettingsData.notificationPopupPosition === SettingsData.Position.Top || SettingsData.notificationPopupPosition === SettingsData.Position.Left
-    }
+    anchors.bottom: SettingsData.notificationPopupPosition === SettingsData.Position.Bottom || SettingsData.notificationPopupPosition === SettingsData.Position.Right
+    anchors.left: SettingsData.notificationPopupPosition === SettingsData.Position.Left || SettingsData.notificationPopupPosition === SettingsData.Position.Bottom
+    anchors.right: SettingsData.notificationPopupPosition === SettingsData.Position.Top || SettingsData.notificationPopupPosition === SettingsData.Position.Right
 
     margins {
-        top: Theme.barHeight - 4 + SettingsData.topBarSpacing + 4
+        top: getTopMargin()
-        right: 12
+        bottom: getBottomMargin()
+        left: getLeftMargin()
+        right: getRightMargin()
+    }
+
+    function getTopMargin() {
+        const popupPos = SettingsData.notificationPopupPosition
+        const barPos = SettingsData.dankBarPosition
+        const isTop = isTopCenter || popupPos === SettingsData.Position.Top || popupPos === SettingsData.Position.Left
+
+        if (!isTop) return 0
+
+        const effectiveBarThickness = Math.max(26 + SettingsData.dankBarInnerPadding * 0.6 + SettingsData.dankBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.dankBarInnerPadding))
+        const exclusiveZone = effectiveBarThickness + SettingsData.dankBarSpacing + SettingsData.dankBarBottomGap
+
+        let base = Theme.popupDistance
+        if (barPos === SettingsData.Position.Top) {
+            base = exclusiveZone
+        }
+
+        return base + screenY
+    }
+
+    function getBottomMargin() {
+        const popupPos = SettingsData.notificationPopupPosition
+        const barPos = SettingsData.dankBarPosition
+        const isBottom = popupPos === SettingsData.Position.Bottom || popupPos === SettingsData.Position.Right
+
+        if (!isBottom) return 0
+
+        const effectiveBarThickness = Math.max(26 + SettingsData.dankBarInnerPadding * 0.6 + SettingsData.dankBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.dankBarInnerPadding))
+        const exclusiveZone = effectiveBarThickness + SettingsData.dankBarSpacing + SettingsData.dankBarBottomGap
+
+        let base = Theme.popupDistance
+        if (barPos === SettingsData.Position.Bottom) {
+            base = exclusiveZone
+        }
+
+        return base + screenY
+    }
+
+    function getLeftMargin() {
+        if (isTopCenter) {
+            return (screen.width - implicitWidth) / 2
+        }
+
+        const popupPos = SettingsData.notificationPopupPosition
+        const barPos = SettingsData.dankBarPosition
+        const isLeft = popupPos === SettingsData.Position.Left || popupPos === SettingsData.Position.Bottom
+
+        if (!isLeft) return 0
+
+        const effectiveBarThickness = Math.max(26 + SettingsData.dankBarInnerPadding * 0.6 + SettingsData.dankBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.dankBarInnerPadding))
+        const exclusiveZone = effectiveBarThickness + SettingsData.dankBarSpacing + SettingsData.dankBarBottomGap
+
+        if (barPos === SettingsData.Position.Left) {
+            return exclusiveZone
+        }
+
+        return Theme.popupDistance
+    }
+
+    function getRightMargin() {
+        if (isTopCenter) return 0
+
+        const popupPos = SettingsData.notificationPopupPosition
+        const barPos = SettingsData.dankBarPosition
+        const isRight = popupPos === SettingsData.Position.Top || popupPos === SettingsData.Position.Right
+
+        if (!isRight) return 0
+
+        const effectiveBarThickness = Math.max(26 + SettingsData.dankBarInnerPadding * 0.6 + SettingsData.dankBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.dankBarInnerPadding))
+        const exclusiveZone = effectiveBarThickness + SettingsData.dankBarSpacing + SettingsData.dankBarBottomGap
+
+        if (barPos === SettingsData.Position.Right) {
+            return exclusiveZone
+        }
+
+        return Theme.popupDistance
     }
 
     Item {
@@ -123,7 +202,7 @@ PanelWindow {
 
         anchors.fill: parent
         visible: win.hasValidData
-        layer.enabled: (enterX.running || exitAnim.running)
+        layer.enabled: true
         layer.smooth: true
 
         Rectangle {
@@ -455,7 +534,12 @@ PanelWindow {
         transform: Translate {
             id: tx
 
-            x: Anims.slidePx
+            x: {
+                if (isTopCenter) return 0
+                const isLeft = SettingsData.notificationPopupPosition === SettingsData.Position.Left || SettingsData.notificationPopupPosition === SettingsData.Position.Bottom
+                return isLeft ? -Anims.slidePx : Anims.slidePx
+            }
+            y: isTopCenter ? -Anims.slidePx : 0
         }
     }
 
@@ -463,15 +547,23 @@ PanelWindow {
         id: enterX
 
         target: tx
-        property: "x"
+        property: isTopCenter ? "y" : "x"
-        from: Anims.slidePx
+        from: {
+            if (isTopCenter) return -Anims.slidePx
+            const isLeft = SettingsData.notificationPopupPosition === SettingsData.Position.Left || SettingsData.notificationPopupPosition === SettingsData.Position.Bottom
+            return isLeft ? -Anims.slidePx : Anims.slidePx
+        }
         to: 0
         duration: Anims.durMed
         easing.type: Easing.BezierSpline
-        easing.bezierCurve: Anims.emphasizedDecel
+        easing.bezierCurve: isTopCenter ? Anims.standardDecel : Anims.emphasizedDecel
         onStopped: {
-            if (!win.exiting && !win._isDestroying && Math.abs(tx.x) < 0.5) {
+            if (!win.exiting && !win._isDestroying) {
-                win.entered()
+                if (isTopCenter) {
+                    if (Math.abs(tx.y) < 0.5) win.entered()
+                } else {
+                    if (Math.abs(tx.x) < 0.5) win.entered()
+                }
             }
         }
     }
@@ -483,9 +575,13 @@ PanelWindow {
 
         PropertyAnimation {
             target: tx
-            property: "x"
+            property: isTopCenter ? "y" : "x"
             from: 0
-            to: Anims.slidePx
+            to: {
+                if (isTopCenter) return -Anims.slidePx
+                const isLeft = SettingsData.notificationPopupPosition === SettingsData.Position.Left || SettingsData.notificationPopupPosition === SettingsData.Position.Bottom
+                return isLeft ? -Anims.slidePx : Anims.slidePx
+            }
             duration: Anims.durShort
             easing.type: Easing.BezierSpline
             easing.bezierCurve: Anims.emphasizedAccel

Modules/OSD/VolumeOSD.qml

@@ -12,11 +12,23 @@ DankOSD {
     enableMouseInteraction: true
 
     Connections {
-        target: AudioService
+        target: AudioService.sink && AudioService.sink.audio ? AudioService.sink.audio : null
 
         function onVolumeChanged() {
+            if (!AudioService.suppressOSD) {
                 root.show()
             }
+        }
+
+        function onMutedChanged() {
+            if (!AudioService.suppressOSD) {
+                root.show()
+            }
+        }
+    }
+
+    Connections {
+        target: AudioService
 
         function onSinkChanged() {
             if (root.shouldBeVisible) {

Modules/Plugins/BaseHorizontalPill.qml

@@ -0,0 +1,53 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property var axis: null
+    property string section: "center"
+    property var popoutTarget: null
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+    property alias content: contentLoader.sourceComponent
+
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
+
+    signal clicked()
+
+    width: contentLoader.item ? (contentLoader.item.implicitWidth + horizontalPadding * 2) : 0
+    height: widgetThickness
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent"
+        }
+
+        const baseColor = mouseArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency)
+    }
+
+    Loader {
+        id: contentLoader
+        anchors.centerIn: parent
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popoutTarget && popoutTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0)
+                const currentScreen = parentScreen || Screen
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
+                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+            }
+            root.clicked()
+        }
+    }
+}

Modules/Plugins/BaseVerticalPill.qml

@@ -0,0 +1,53 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property var axis: null
+    property string section: "center"
+    property var popoutTarget: null
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+    property alias content: contentLoader.sourceComponent
+
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
+
+    signal clicked()
+
+    width: widgetThickness
+    height: contentLoader.item ? (contentLoader.item.implicitHeight + horizontalPadding * 2) : 0
+    radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+    color: {
+        if (SettingsData.dankBarNoBackground) {
+            return "transparent"
+        }
+
+        const baseColor = mouseArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency)
+    }
+
+    Loader {
+        id: contentLoader
+        anchors.centerIn: parent
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popoutTarget && popoutTarget.setTriggerPosition) {
+                const globalPos = mapToGlobal(0, 0)
+                const currentScreen = parentScreen || Screen
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, height)
+                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+            }
+            root.clicked()
+        }
+    }
+}

Modules/Plugins/ListSetting.qml

@@ -0,0 +1,131 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Column {
+    id: root
+
+    required property string settingKey
+    required property string label
+    property string description: ""
+    property var items: []
+    property Component delegate: null
+
+    width: parent.width
+    spacing: Theme.spacingM
+
+    Component.onCompleted: {
+        const settings = findSettings()
+        if (settings) {
+            items = settings.loadValue(settingKey, [])
+        }
+    }
+
+    onItemsChanged: {
+        const settings = findSettings()
+        if (settings) {
+            settings.saveValue(settingKey, items)
+        }
+    }
+
+    function findSettings() {
+        let item = parent
+        while (item) {
+            if (item.saveValue !== undefined && item.loadValue !== undefined) {
+                return item
+            }
+            item = item.parent
+        }
+        return null
+    }
+
+    function addItem(item) {
+        items = items.concat([item])
+    }
+
+    function removeItem(index) {
+        const newItems = items.slice()
+        newItems.splice(index, 1)
+        items = newItems
+    }
+
+    StyledText {
+        text: root.label
+        font.pixelSize: Theme.fontSizeMedium
+        font.weight: Font.Medium
+        color: Theme.surfaceText
+    }
+
+    StyledText {
+        text: root.description
+        font.pixelSize: Theme.fontSizeSmall
+        color: Theme.surfaceVariantText
+        width: parent.width
+        wrapMode: Text.WordWrap
+        visible: root.description !== ""
+    }
+
+    Column {
+        width: parent.width
+        spacing: Theme.spacingS
+
+        Repeater {
+            model: root.items
+            delegate: root.delegate ? root.delegate : defaultDelegate
+        }
+
+        StyledText {
+            text: "No items added yet"
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceVariantText
+            visible: root.items.length === 0
+        }
+    }
+
+    Component {
+        id: defaultDelegate
+        StyledRect {
+            width: parent.width
+            height: 40
+            radius: Theme.cornerRadius
+            color: Theme.surfaceContainerHigh
+            border.width: 0
+
+            StyledText {
+                anchors.left: parent.left
+                anchors.leftMargin: Theme.spacingM
+                anchors.verticalCenter: parent.verticalCenter
+                text: modelData
+                color: Theme.surfaceText
+            }
+
+            Rectangle {
+                anchors.right: parent.right
+                anchors.rightMargin: Theme.spacingM
+                anchors.verticalCenter: parent.verticalCenter
+                width: 60
+                height: 28
+                color: removeArea.containsMouse ? Theme.errorHover : Theme.error
+                radius: Theme.cornerRadius
+
+                StyledText {
+                    anchors.centerIn: parent
+                    text: "Remove"
+                    color: Theme.errorText
+                    font.pixelSize: Theme.fontSizeSmall
+                    font.weight: Font.Medium
+                }
+
+                MouseArea {
+                    id: removeArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        root.removeItem(index)
+                    }
+                }
+            }
+        }
+    }
+}

Modules/Plugins/ListSettingWithInput.qml

@@ -0,0 +1,230 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Column {
+    id: root
+
+    required property string settingKey
+    required property string label
+    property string description: ""
+    property var fields: []
+    property var items: []
+
+    width: parent.width
+    spacing: Theme.spacingM
+
+    Component.onCompleted: {
+        const settings = findSettings()
+        if (settings) {
+            items = settings.loadValue(settingKey, [])
+        }
+    }
+
+    onItemsChanged: {
+        const settings = findSettings()
+        if (settings) {
+            settings.saveValue(settingKey, items)
+        }
+    }
+
+    function findSettings() {
+        let item = parent
+        while (item) {
+            if (item.saveValue !== undefined && item.loadValue !== undefined) {
+                return item
+            }
+            item = item.parent
+        }
+        return null
+    }
+
+    function addItem(item) {
+        items = items.concat([item])
+    }
+
+    function removeItem(index) {
+        const newItems = items.slice()
+        newItems.splice(index, 1)
+        items = newItems
+    }
+
+    StyledText {
+        text: root.label
+        font.pixelSize: Theme.fontSizeMedium
+        font.weight: Font.Medium
+        color: Theme.surfaceText
+    }
+
+    StyledText {
+        text: root.description
+        font.pixelSize: Theme.fontSizeSmall
+        color: Theme.surfaceVariantText
+        width: parent.width
+        wrapMode: Text.WordWrap
+        visible: root.description !== ""
+    }
+
+    Flow {
+        width: parent.width
+        spacing: Theme.spacingS
+
+        Repeater {
+            model: root.fields
+
+            StyledText {
+                text: modelData.label
+                font.pixelSize: Theme.fontSizeSmall
+                font.weight: Font.Medium
+                color: Theme.surfaceText
+                width: modelData.width || 200
+            }
+        }
+    }
+
+    Flow {
+        id: inputRow
+        width: parent.width
+        spacing: Theme.spacingS
+
+        property var inputFields: []
+
+        Repeater {
+            id: inputRepeater
+            model: root.fields
+
+            DankTextField {
+                width: modelData.width || 200
+                placeholderText: modelData.placeholder || ""
+
+                Component.onCompleted: {
+                    inputRow.inputFields.push(this)
+                }
+
+                Keys.onReturnPressed: {
+                    addButton.clicked()
+                }
+            }
+        }
+
+        DankButton {
+            id: addButton
+            width: 50
+            height: 36
+            text: "Add"
+
+            onClicked: {
+                let newItem = {}
+                let hasValue = false
+
+                for (let i = 0; i < root.fields.length; i++) {
+                    const field = root.fields[i]
+                    const input = inputRow.inputFields[i]
+                    const value = input.text.trim()
+
+                    if (value !== "") {
+                        hasValue = true
+                    }
+
+                    if (field.required && value === "") {
+                        return
+                    }
+
+                    newItem[field.id] = value || (field.default || "")
+                }
+
+                if (hasValue) {
+                    root.addItem(newItem)
+                    for (let i = 0; i < inputRow.inputFields.length; i++) {
+                        inputRow.inputFields[i].text = ""
+                    }
+                    if (inputRow.inputFields.length > 0) {
+                        inputRow.inputFields[0].forceActiveFocus()
+                    }
+                }
+            }
+        }
+    }
+
+    StyledText {
+        text: "Current Items"
+        font.pixelSize: Theme.fontSizeMedium
+        font.weight: Font.Medium
+        color: Theme.surfaceText
+        visible: root.items.length > 0
+    }
+
+    Column {
+        width: parent.width
+        spacing: Theme.spacingS
+
+        Repeater {
+            model: root.items
+
+            StyledRect {
+                width: parent.width
+                height: 40
+                radius: Theme.cornerRadius
+                color: Theme.surfaceContainerHigh
+                border.width: 0
+
+                Row {
+                    anchors.left: parent.left
+                    anchors.leftMargin: Theme.spacingM
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: Theme.spacingM
+
+                    Repeater {
+                        model: root.fields
+
+                        StyledText {
+                            text: {
+                                const value = root.items[index][modelData.id]
+                                return value || ""
+                            }
+                            color: Theme.surfaceText
+                            font.pixelSize: Theme.fontSizeMedium
+                            width: modelData.width || 200
+                            elide: Text.ElideRight
+                        }
+                    }
+                }
+
+                Rectangle {
+                    anchors.right: parent.right
+                    anchors.rightMargin: Theme.spacingM
+                    anchors.verticalCenter: parent.verticalCenter
+                    width: 60
+                    height: 28
+                    color: removeArea.containsMouse ? Theme.errorHover : Theme.error
+                    radius: Theme.cornerRadius
+
+                    StyledText {
+                        anchors.centerIn: parent
+                        text: "Remove"
+                        color: Theme.errorText
+                        font.pixelSize: Theme.fontSizeSmall
+                        font.weight: Font.Medium
+                    }
+
+                    MouseArea {
+                        id: removeArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            root.removeItem(index)
+                        }
+                    }
+                }
+            }
+        }
+
+        StyledText {
+            text: "No items added yet"
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceVariantText
+            visible: root.items.length === 0
+        }
+    }
+}

Modules/Plugins/PluginComponent.qml

@@ -0,0 +1,69 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    property var axis: null
+    property string section: "center"
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+
+    property Component horizontalBarPill: null
+    property Component verticalBarPill: null
+    property Component popoutContent: null
+    property real popoutWidth: 400
+    property real popoutHeight: 400
+
+    readonly property bool isVertical: axis?.isVertical ?? false
+    readonly property bool hasHorizontalPill: horizontalBarPill !== null
+    readonly property bool hasVerticalPill: verticalBarPill !== null
+    readonly property bool hasPopout: popoutContent !== null
+
+    width: isVertical ? (hasVerticalPill ? verticalPill.width : 0) : (hasHorizontalPill ? horizontalPill.width : 0)
+    height: isVertical ? (hasVerticalPill ? verticalPill.height : 0) : (hasHorizontalPill ? horizontalPill.height : 0)
+
+    BaseHorizontalPill {
+        id: horizontalPill
+        visible: !isVertical && hasHorizontalPill
+        axis: root.axis
+        section: root.section
+        popoutTarget: hasPopout ? pluginPopout : null
+        parentScreen: root.parentScreen
+        widgetThickness: root.widgetThickness
+        barThickness: root.barThickness
+        content: root.horizontalBarPill
+        onClicked: {
+            if (hasPopout) {
+                pluginPopout.toggle()
+            }
+        }
+    }
+
+    BaseVerticalPill {
+        id: verticalPill
+        visible: isVertical && hasVerticalPill
+        axis: root.axis
+        section: root.section
+        popoutTarget: hasPopout ? pluginPopout : null
+        parentScreen: root.parentScreen
+        widgetThickness: root.widgetThickness
+        barThickness: root.barThickness
+        content: root.verticalBarPill
+        onClicked: {
+            if (hasPopout) {
+                pluginPopout.toggle()
+            }
+        }
+    }
+
+    PluginPopout {
+        id: pluginPopout
+        contentWidth: root.popoutWidth
+        contentHeight: root.popoutHeight
+        pluginContent: root.popoutContent
+    }
+}