Add VERSION file for v0.0.30

This reverts commit 5a5c860cef.

.github/workflows/release.yml

@@ -17,6 +17,17 @@ jobs:
         with:
           fetch-depth: 0 # Fetch full history for changelog generation
 
+      # Create VERSION file
+      - name: Create VERSION file
+        run: |
+          echo "${{ github.ref_name }}" > VERSION
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git add VERSION
+          git commit -m "Add VERSION file for ${{ github.ref_name }}"
+          git tag -f ${{ github.ref_name }}
+          git push origin ${{ github.ref_name }} --force
+
       # Generate changelog
       - name: Generate Changelog
         id: changelog

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)
-    ├── DankIcon.qml
-    ├── DankSlider.qml
-    ├── DankToggle.qml
-    ├── DankTabBar.qml
-    ├── DankGridView.qml
-    ├── DankListView.qml
-    └── [13 more widgets]
+├── Widgets/        # Reusable UI controls (19 files)
+│   ├── DankIcon.qml
+│   ├── DankSlider.qml
+│   ├── DankToggle.qml
+│   ├── DankTabBar.qml
+│   ├── DankGridView.qml
+│   ├── DankListView.qml
+│   └── [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**:
@@ -408,10 +424,10 @@ When modifying the shell:
 
    Singleton {
        id: root
-       
+
        property bool featureAvailable: false
        property type currentValue: defaultValue
-       
+
        function performAction(param) {
            // Implementation
        }
@@ -422,7 +438,7 @@ When modifying the shell:
    ```qml
    // In module files
    property alias serviceValue: NewService.currentValue
-   
+
    SomeControl {
        visible: NewService.featureAvailable
        enabled: NewService.featureAvailable
@@ -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
 

Common/SettingsData.qml

@@ -175,6 +175,8 @@ Singleton {
 
     property bool _loading: false
 
+    property var pluginSettings: ({})
+
     function getEffectiveTimeFormat() {
         if (use24HourClock) {
             return Locale.ShortFormat
@@ -361,6 +363,7 @@ Singleton {
                 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()
@@ -481,6 +484,7 @@ Singleton {
                                                 "notificationTimeoutCritical": notificationTimeoutCritical,
                                                 "notificationPopupPosition": notificationPopupPosition,
                                                 "screenPreferences": screenPreferences,
+                                                "pluginSettings": pluginSettings,
                                                 "animationSpeed": animationSpeed
                                             }, null, 2))
     }
@@ -1266,6 +1270,33 @@ 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()
@@ -1322,7 +1353,7 @@ Singleton {
         id: settingsFile
 
         path: isGreeterMode ? "" : StandardPaths.writableLocation(StandardPaths.ConfigLocation) + "/DankMaterialShell/settings.json"
-        blockLoading: isGreeterMode
+        blockLoading: true
         blockWrites: true
         atomicWrites: true
         watchChanges: !isGreeterMode

Common/Theme.qml

@@ -678,6 +678,10 @@ Singleton {
 
     function withAlpha(c, a) { return Qt.rgba(c.r, c.g, c.b, a); }
 
+    function snap(value, dpr) {
+        return Math.round(value * dpr) / dpr
+    }
+
     Process {
         id: matugenCheck
         command: ["which", "matugen"]

DMSGreeter.qml

@@ -10,7 +10,11 @@ ShellRoot {
 
     WlSessionLock {
         id: sessionLock
-        locked: true
+        locked: false
+
+        Component.onCompleted: {
+            Qt.callLater(() => { locked = true })
+        }
 
         onLockedChanged: {
             if (!locked) {

DMSShell.qml

@@ -1,3 +1,6 @@
+//@ pragma Env QSG_RENDER_LOOP=threaded
+//@ pragma UseQApplication
+
 import QtQuick
 import Quickshell
 import Quickshell.Io
@@ -22,16 +25,21 @@ 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 {
+ShellRoot {
+  id: root
+
   Component.onCompleted: {
-      PortalService.init()
-      // Initialize DisplayService night mode functionality
-      DisplayService.nightModeEnabled
-      // Initialize WallpaperCyclingService
-      WallpaperCyclingService.cyclingActive
+    PortalService.init()
+    // Initialize DisplayService night mode functionality
+    DisplayService.nightModeEnabled
+    // Initialize WallpaperCyclingService
+    WallpaperCyclingService.cyclingActive
+    // Initialize PluginService by accessing its properties
+    PluginService.pluginDirectory
   }
 
   WallpaperBackground {}
@@ -135,36 +143,13 @@ Item {
       active: false
 
       property var modalRef: colorPickerModal
+      property LazyLoader powerModalLoaderRef: powerMenuModalLoader
 
       ControlCenterPopout {
           id: controlCenterPopout
           colorPickerModal: controlCenterLoader.modalRef
+          powerMenuModalLoader: controlCenterLoader.powerModalLoaderRef
 
-          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()
           }
@@ -387,7 +372,7 @@ Item {
       function open() {
           powerMenuModalLoader.active = true
           if (powerMenuModalLoader.item)
-              powerMenuModalLoader.item.open()
+              powerMenuModalLoader.item.openCentered()
 
           return "POWERMENU_OPEN_SUCCESS"
       }
@@ -401,8 +386,13 @@ Item {
 
       function toggle() {
           powerMenuModalLoader.active = true
-          if (powerMenuModalLoader.item)
-              powerMenuModalLoader.item.toggle()
+          if (powerMenuModalLoader.item) {
+              if (powerMenuModalLoader.item.shouldBeVisible) {
+                  powerMenuModalLoader.item.close()
+              } else {
+                  powerMenuModalLoader.item.openCentered()
+              }
+          }
 
           return "POWERMENU_TOGGLE_SUCCESS"
       }

Modals/Common/DankModal.qml

@@ -157,8 +157,7 @@ PanelWindow {
         radius: root.cornerRadius
         border.color: root.borderColor
         border.width: root.borderWidth
-        layer.enabled: root.enableShadow
-        opacity: root.shouldBeVisible ? 1 : 0
+        layer.enabled: true
         transform: root.animationType === "slide" ? slideTransform : null
 
         Translate {
@@ -176,13 +175,6 @@ PanelWindow {
             asynchronous: false
         }
 
-        Behavior on opacity {
-            NumberAnimation {
-                duration: root.animationDuration
-                easing.type: root.animationEasing
-            }
-        }
-
         layer.effect: MultiEffect {
             shadowEnabled: true
             shadowHorizontalOffset: 0
@@ -190,6 +182,15 @@ PanelWindow {
             shadowBlur: 1
             shadowColor: Theme.shadowStrong
             shadowOpacity: 0.3
+            source: contentContainer
+            opacity: root.shouldBeVisible ? 1 : 0
+
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: animationDuration
+                    easing.type: animationEasing
+                }
+            }
         }
     }
 

Modals/PowerMenuModal.qml

@@ -9,9 +9,25 @@ DankModal {
 
     property int selectedIndex: 0
     property int optionCount: SessionService.hibernateSupported ? 5 : 4
+    property rect parentBounds: Qt.rect(0, 0, 0, 0)
+    property var parentScreen: null
 
     signal powerActionRequested(string action, string title, string message)
 
+    function openCentered() {
+        parentBounds = Qt.rect(0, 0, 0, 0)
+        parentScreen = null
+        backgroundOpacity = 0.5
+        open()
+    }
+
+    function openFromControlCenter(bounds, targetScreen) {
+        parentBounds = bounds
+        parentScreen = targetScreen
+        backgroundOpacity = 0
+        open()
+    }
+
     function selectOption(action) {
         close();
         const actions = {
@@ -47,6 +63,16 @@ DankModal {
     width: 320
     height: contentLoader.item ? contentLoader.item.implicitHeight : 300
     enableShadow: true
+    screen: parentScreen
+    positioning: parentBounds.width > 0 ? "custom" : "center"
+    customPosition: {
+        if (parentBounds.width > 0) {
+            const centerX = parentBounds.x + (parentBounds.width - width) / 2
+            const centerY = parentBounds.y + (parentBounds.height - height) / 2
+            return Qt.point(centerX, centerY)
+        }
+        return Qt.point(0, 0)
+    }
     onBackgroundClicked: () => {
         return close();
     }

Modals/Settings/PowerSettings.qml

@@ -79,7 +79,6 @@ Item {
                         property var timeoutOptions: ["Never", "1 minute", "2 minutes", "3 minutes", "5 minutes", "10 minutes", "15 minutes", "20 minutes", "30 minutes", "1 hour", "1 hour 30 minutes", "2 hours", "3 hours"]
                         property var timeoutValues: [0, 60, 120, 180, 300, 600, 900, 1200, 1800, 3600, 5400, 7200, 10800]
 
-                        width: parent.width
                         text: "Automatically lock after"
                         options: timeoutOptions
 
@@ -116,7 +115,6 @@ Item {
                         property var timeoutOptions: ["Never", "1 minute", "2 minutes", "3 minutes", "5 minutes", "10 minutes", "15 minutes", "20 minutes", "30 minutes", "1 hour", "1 hour 30 minutes", "2 hours", "3 hours"]
                         property var timeoutValues: [0, 60, 120, 180, 300, 600, 900, 1200, 1800, 3600, 5400, 7200, 10800]
 
-                        width: parent.width
                         text: "Turn off monitors after"
                         options: timeoutOptions
 
@@ -153,7 +151,6 @@ Item {
                         property var timeoutOptions: ["Never", "1 minute", "2 minutes", "3 minutes", "5 minutes", "10 minutes", "15 minutes", "20 minutes", "30 minutes", "1 hour", "1 hour 30 minutes", "2 hours", "3 hours"]
                         property var timeoutValues: [0, 60, 120, 180, 300, 600, 900, 1200, 1800, 3600, 5400, 7200, 10800]
 
-                        width: parent.width
                         text: "Suspend system after"
                         options: timeoutOptions
 
@@ -190,7 +187,6 @@ Item {
                         property var timeoutOptions: ["Never", "1 minute", "2 minutes", "3 minutes", "5 minutes", "10 minutes", "15 minutes", "20 minutes", "30 minutes", "1 hour", "1 hour 30 minutes", "2 hours", "3 hours"]
                         property var timeoutValues: [0, 60, 120, 180, 300, 600, 900, 1200, 1800, 3600, 5400, 7200, 10800]
 
-                        width: parent.width
                         text: "Hibernate system after"
                         options: timeoutOptions
                         visible: SessionService.hibernateSupported

Modals/Settings/SettingsContent.qml

@@ -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

@@ -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 : Theme.withAlpha(Theme.primaryContainer, 0)
+                color: isActive ? Theme.primary : tabMouseArea.containsMouse ? Theme.surfaceHover : "transparent"
 
                 Row {
                     anchors.left: parent.left
@@ -94,14 +97,14 @@ Rectangle {
                     DankIcon {
                         name: modelData.icon || ""
                         size: Theme.iconSize - 2
-                        color: parent.parent.isActive ? Theme.surfaceText : Theme.surfaceText
+                        color: parent.parent.isActive ? Theme.primaryText : Theme.surfaceText
                         anchors.verticalCenter: parent.verticalCenter
                     }
 
                     StyledText {
                         text: modelData.text || ""
                         font.pixelSize: Theme.fontSizeMedium
-                        color: parent.parent.isActive ? Theme.surfaceText : Theme.surfaceText
+                        color: parent.parent.isActive ? Theme.primaryText : Theme.surfaceText
                         font.weight: parent.parent.isActive ? Font.Medium : Font.Normal
                         anchors.verticalCenter: parent.verticalCenter
                     }

Modules/AppDrawer/AppDrawerPopout.qml

@@ -271,18 +271,17 @@ DankPopout {
                         spacing: Theme.spacingM
                         visible: searchField.text.length === 0
                         leftPadding: Theme.spacingS
-                        topPadding: Theme.spacingXS
 
-                        Item {
-                            width: 200
-                            height: 36
+                        Rectangle {
+                            width: 180
+                            height: 40
+                            radius: Theme.cornerRadius
+                            color: "transparent"
 
                             DankDropdown {
                                 anchors.fill: parent
-                            anchors.leftMargin: Theme.spacingS
-                            anchors.rightMargin: Theme.spacingS
-                            anchors.bottomMargin: Theme.spacingS
                                 text: ""
+                                dropdownWidth: 180
                                 currentValue: appLauncher.selectedCategory
                                 options: appLauncher.categories
                                 optionIcons: appLauncher.categoryIcons
@@ -293,7 +292,7 @@ DankPopout {
                         }
 
                         Item {
-                            width: parent.width - 310
+                            width: parent.width - 290
                             height: 1
                         }
 

Modules/ControlCenter/Components/ActionTile.qml

@@ -59,7 +59,7 @@ Rectangle {
         DankIcon {
             name: root.iconName
             size: Theme.iconSize
-            color: isActive ? Theme.primaryContainer : Theme.primary
+            color: isActive ? Theme.primaryText : Theme.primary
             anchors.verticalCenter: parent.verticalCenter
         }
 
@@ -77,7 +77,7 @@ Rectangle {
                     width: parent.width
                     text: root.text
                     style: Typography.Style.Body
-                    color: isActive ? Theme.primaryContainer : Theme.surfaceText
+                    color: isActive ? Theme.primaryText : Theme.surfaceText
                     elide: Text.ElideRight
                     wrapMode: Text.NoWrap
                 }
@@ -86,7 +86,7 @@ Rectangle {
                     width: parent.width
                     text: root.secondaryText
                     style: Typography.Style.Caption
-                    color: isActive ? Theme.primaryContainer : Theme.surfaceVariantText
+                    color: isActive ? Theme.primaryText : Theme.surfaceVariantText
                     visible: text.length > 0
                     elide: Text.ElideRight
                     wrapMode: Text.NoWrap

Modules/ControlCenter/Components/EditControls.qml

@@ -7,6 +7,7 @@ Row {
     id: root
 
     property var availableWidgets: []
+    property Item popoutContent: null
 
     signal addWidget(string widgetId)
     signal resetToDefault()
@@ -19,7 +20,9 @@ Row {
 
     Popup {
         id: addWidgetPopup
-        anchors.centerIn: parent
+        parent: popoutContent
+        x: parent ? Math.round((parent.width - width) / 2) : 0
+        y: parent ? Math.round((parent.height - height) / 2) : 0
         width: 400
         height: 300
         modal: true

Modules/ControlCenter/Components/HeaderPane.qml

@@ -6,10 +6,9 @@ import qs.Widgets
 Rectangle {
     id: root
 
-    property bool powerOptionsExpanded: false
     property bool editMode: false
 
-    signal powerActionRequested(string action, string title, string message)
+    signal powerButtonClicked()
     signal lockRequested()
     signal editModeToggled()
 
@@ -83,13 +82,11 @@ Rectangle {
 
         DankActionButton {
             buttonSize: 36
-            iconName: root.powerOptionsExpanded ? "expand_less" : "power_settings_new"
+            iconName: "power_settings_new"
             iconSize: Theme.iconSize - 4
-            iconColor: root.powerOptionsExpanded ? Theme.primary : Theme.surfaceText
+            iconColor: Theme.surfaceText
             backgroundColor: "transparent"
-            onClicked: {
-                root.powerOptionsExpanded = !root.powerOptionsExpanded
-            }
+            onClicked: root.powerButtonClicked()
         }
 
         DankActionButton {

Modules/ControlCenter/Components/PowerOptionsPane.qml

@@ -1,70 +0,0 @@
-import QtQuick
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-Item {
-    id: root
-
-    property bool expanded: false
-
-    signal powerActionRequested(string action, string title, string message)
-
-    implicitHeight: expanded ? 60 : 0
-    height: implicitHeight
-    clip: true
-
-    Rectangle {
-        width: parent.width
-        height: 60
-        radius: Theme.cornerRadius
-        color: Theme.surfaceContainerHigh
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                              Theme.outline.b, 0.08)
-        border.width: root.expanded ? 1 : 0
-        opacity: root.expanded ? 1 : 0
-        clip: true
-
-        Row {
-            anchors.centerIn: parent
-            spacing: SessionService.hibernateSupported ? Theme.spacingS : Theme.spacingL
-            visible: root.expanded
-
-            PowerButton {
-                width: SessionService.hibernateSupported ? 85 : 100
-                iconName: "logout"
-                text: "Logout"
-                onPressed: root.powerActionRequested("logout", "Logout", "Are you sure you want to logout?")
-            }
-
-            PowerButton {
-                width: SessionService.hibernateSupported ? 85 : 100
-                iconName: "restart_alt"
-                text: "Restart"
-                onPressed: root.powerActionRequested("reboot", "Restart", "Are you sure you want to restart?")
-            }
-
-            PowerButton {
-                width: SessionService.hibernateSupported ? 85 : 100
-                iconName: "bedtime"
-                text: "Suspend"
-                onPressed: root.powerActionRequested("suspend", "Suspend", "Are you sure you want to suspend?")
-            }
-
-            PowerButton {
-                width: SessionService.hibernateSupported ? 85 : 100
-                iconName: "ac_unit"
-                text: "Hibernate"
-                visible: SessionService.hibernateSupported
-                onPressed: root.powerActionRequested("hibernate", "Hibernate", "Are you sure you want to hibernate?")
-            }
-
-            PowerButton {
-                width: SessionService.hibernateSupported ? 85 : 100
-                iconName: "power_settings_new"
-                text: "Shutdown"
-                onPressed: root.powerActionRequested("poweroff", "Shutdown", "Are you sure you want to shutdown?")
-            }
-        }
-    }
-}

Modules/ControlCenter/Components/SizeControls.qml

@@ -32,7 +32,7 @@ Row {
                 text: modelData.toString()
                 font.pixelSize: 8
                 font.weight: Font.Medium
-                color: modelData === root.currentSize ? Theme.primaryContainer : Theme.surfaceText
+                color: modelData === root.currentSize ? Theme.primaryText : Theme.surfaceText
             }
 
             MouseArea {

Modules/ControlCenter/ControlCenterPopout.qml

@@ -21,13 +21,11 @@ DankPopout {
     id: root
 
     property string expandedSection: ""
-    property bool powerOptionsExpanded: false
     property var triggerScreen: null
     property bool editMode: false
     property int expandedWidgetIndex: -1
     property var expandedWidgetData: null
 
-    signal powerActionRequested(string action, string title, string message)
     signal lockRequested
 
     function collapseAll() {
@@ -122,28 +120,24 @@ DankPopout {
                 HeaderPane {
                     id: headerPane
                     width: parent.width
-                    powerOptionsExpanded: root.powerOptionsExpanded
                     editMode: root.editMode
-                    onPowerOptionsExpandedChanged: root.powerOptionsExpanded = powerOptionsExpanded
                     onEditModeToggled: root.editMode = !root.editMode
-                    onPowerActionRequested: (action, title, message) => root.powerActionRequested(action, title, message)
+                    onPowerButtonClicked: {
+                        if (powerMenuModalLoader) {
+                            powerMenuModalLoader.active = true
+                            if (powerMenuModalLoader.item) {
+                                const popoutPos = controlContent.mapToItem(null, 0, 0)
+                                const bounds = Qt.rect(popoutPos.x, popoutPos.y, controlContent.width, controlContent.height)
+                                powerMenuModalLoader.item.openFromControlCenter(bounds, root.triggerScreen)
+                            }
+                        }
+                    }
                     onLockRequested: {
                         root.close()
                         root.lockRequested()
                     }
                 }
 
-                PowerOptionsPane {
-                    id: powerOptionsPane
-                    width: parent.width
-                    expanded: root.powerOptionsExpanded
-                    onPowerActionRequested: (action, title, message) => {
-                        root.powerOptionsExpanded = false
-                        root.close()
-                        root.powerActionRequested(action, title, message)
-                    }
-                }
-
                 DragDropGrid {
                     id: widgetGrid
                     width: parent.width
@@ -171,6 +165,7 @@ DankPopout {
                 EditControls {
                     width: parent.width
                     visible: editMode
+                    popoutContent: controlContent
                     availableWidgets: {
                         const existingIds = (SettingsData.controlCenterWidgets || []).map(w => w.id)
                         return widgetModel.baseWidgetDefinitions.filter(w => w.allowMultiple || !existingIds.includes(w.id))
@@ -225,4 +220,5 @@ DankPopout {
     }
 
     property var colorPickerModal: null
+    property var powerMenuModalLoader: null
 }

Modules/ControlCenter/Widgets/CompoundPill.qml

@@ -49,7 +49,7 @@ Rectangle {
         Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
     readonly property color _tileRingInactive:
         Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.18)
-    readonly property color _tileIconActive: Theme.primaryContainer
+    readonly property color _tileIconActive: Theme.primaryText
     readonly property color _tileIconInactive: Theme.primary
 
     property int _padH: Theme.spacingS

Modules/ControlCenter/Widgets/SmallBatteryButton.qml

@@ -28,7 +28,7 @@ Rectangle {
     readonly property color _tileBgInactive: Theme.surfaceContainerHigh
     readonly property color _tileRingActive:
         Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
-    readonly property color _tileIconActive: Theme.primaryContainer
+    readonly property color _tileIconActive: Theme.primaryText
     readonly property color _tileIconInactive: Theme.primary
 
     color: {

Modules/ControlCenter/Widgets/SmallToggleButton.qml

@@ -30,7 +30,7 @@ Rectangle {
     readonly property color _tileBgInactive: Theme.surfaceContainerHigh
     readonly property color _tileRingActive:
         Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
-    readonly property color _tileIconActive: Theme.primaryContainer
+    readonly property color _tileIconActive: Theme.primaryText
     readonly property color _tileIconInactive: Theme.primary
 
     color: {

Modules/ControlCenter/Widgets/ToggleButton.qml

@@ -64,7 +64,7 @@ Rectangle {
         DankIcon {
             name: root.iconName
             size: Theme.iconSize
-            color: isActive ? Theme.primaryContainer : Theme.primary
+            color: isActive ? Theme.primaryText : Theme.primary
             anchors.verticalCenter: parent.verticalCenter
             rotation: root.iconRotation
             onRotationCompleted: root.iconRotationCompleted()
@@ -84,7 +84,7 @@ Rectangle {
                     width: parent.width
                     text: root.text
                     font.pixelSize: Theme.fontSizeMedium
-                    color: isActive ? Theme.primaryContainer : Theme.surfaceText
+                    color: isActive ? Theme.primaryText : Theme.surfaceText
                     font.weight: Font.Medium
                     elide: Text.ElideRight
                     wrapMode: Text.NoWrap
@@ -94,7 +94,7 @@ Rectangle {
                     width: parent.width
                     text: root.secondaryText
                     font.pixelSize: Theme.fontSizeSmall
-                    color: isActive ? Theme.primaryContainer : Theme.surfaceVariantText
+                    color: isActive ? Theme.primaryText : Theme.surfaceVariantText
                     visible: text.length > 0
                     elide: Text.ElideRight
                     wrapMode: Text.NoWrap

Modules/DankBar/CenterSection.qml

@@ -9,6 +9,10 @@ Item {
     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
@@ -266,7 +270,8 @@ Item {
     }
 
     function getWidgetComponent(widgetId) {
-        const componentMap = {
+        // Build dynamic component map including plugins
+        let baseMap = {
             "launcherButton": "launcherButtonComponent",
             "workspaceSwitcher": "workspaceSwitcherComponent",
             "focusedWindow": "focusedWindowComponent",
@@ -296,8 +301,15 @@ Item {
             "systemUpdate": "systemUpdateComponent"
         }
 
-        const componentKey = componentMap[widgetId]
-        return componentKey ? root.components[componentKey] : null
+        // 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
@@ -337,6 +349,7 @@ Item {
         id: centerRepeater
         model: root.widgetsModel
 
+
         Loader {
             property string widgetId: model.widgetId
             property var widgetData: model
@@ -359,11 +372,37 @@ Item {
                     item.spacerSize = Qt.binding(() => model.size || 20)
                 }
                 if (root.axis && "axis" in item) {
-                    item.axis = root.axis
+                    item.axis = Qt.binding(() => root.axis)
                 }
                 if (root.axis && "isVertical" in item) {
-                    item.isVertical = root.axis.isVertical
+                    try {
+                        item.isVertical = Qt.binding(() => root.axis.isVertical)
+                    } catch (e) {
+                    }
                 }
+
+                // Inject properties for plugin widgets
+                if ("section" in item) {
+                    item.section = root.section
+                }
+                if ("parentScreen" in item) {
+                    item.parentScreen = Qt.binding(() => root.parentScreen)
+                }
+                if ("widgetThickness" in item) {
+                    item.widgetThickness = Qt.binding(() => root.widgetThickness)
+                }
+                if ("barThickness" in item) {
+                    item.barThickness = Qt.binding(() => root.barThickness)
+                }
+
+                // Inject PluginService for plugin widgets
+                if (item.pluginService !== undefined) {
+                    if (item.pluginId !== undefined) {
+                        item.pluginId = model.widgetId
+                    }
+                    item.pluginService = PluginService
+                }
+
                 layoutTimer.restart()
             }
 
@@ -379,4 +418,27 @@ Item {
             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/DankBar.qml

@@ -95,6 +95,18 @@ Item {
                 Qt.callLater(() => Qt.callLater(forceWidgetRefresh))
             }
 
+            Connections {
+                target: PluginService
+                function onPluginLoaded(pluginId) {
+                    console.log("DankBar: Plugin loaded:", pluginId)
+                    SettingsData.widgetDataChanged()
+                }
+                function onPluginUnloaded(pluginId) {
+                    console.log("DankBar: Plugin unloaded:", pluginId)
+                    SettingsData.widgetDataChanged()
+                }
+            }
+
             function forceWidgetRefresh() {
             }
 
@@ -315,9 +327,10 @@ Item {
                 bottom: barWindow.isVertical ? parent.bottom : undefined
             }
             // Only enable mouse handling while hidden (for reveal-on-edge logic).
-            hoverEnabled: SettingsData.dankBarAutoHide && !topBarCore.reveal
+            readonly property bool inOverview: CompositorService.isNiri && NiriService.inOverview && SettingsData.dankBarOpenOnOverview
+            hoverEnabled: SettingsData.dankBarAutoHide && !topBarCore.reveal && !inOverview
             acceptedButtons: Qt.NoButton
-            enabled: SettingsData.dankBarAutoHide && !topBarCore.reveal
+            enabled: SettingsData.dankBarAutoHide && !topBarCore.reveal && !inOverview
 
             Item {
                 id: topBarContainer
@@ -366,7 +379,13 @@ Item {
                         anchors.bottomMargin: !barWindow.isVertical ? SettingsData.dankBarInnerPadding / 2 : Math.max(Theme.spacingXS, SettingsData.dankBarInnerPadding * 0.8)
                         clip: true
 
-                    readonly property int availableWidth: width
+                        property int componentMapRevision: 0
+
+                        function updateComponentMap() {
+                            componentMapRevision++
+                        }
+
+                        readonly property int availableWidth: width
                         readonly property int launcherButtonWidth: 40
                         readonly property int workspaceSwitcherWidth: 120
                         readonly property int focusedAppMaxWidth: 456
@@ -421,35 +440,44 @@ Item {
                             return widgetVisibility[widgetId] ?? true
                         }
 
-                        readonly property var componentMap: ({
-                                                                 "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
-                                                             })
+                        readonly property var componentMap: {
+                            // This property depends on componentMapRevision to ensure it updates when plugins change
+                            componentMapRevision;
+
+                            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
+                            }
+
+                            // Merge with plugin widgets
+                            let pluginMap = PluginService.getWidgetComponents()
+                            return Object.assign(baseMap, pluginMap)
+                        }
 
                         function getWidgetComponent(widgetId) {
                             return componentMap[widgetId] || null
@@ -504,6 +532,9 @@ Item {
                                     widgetsModel: SettingsData.dankBarLeftWidgetsModel
                                     components: topBarContent.allComponents
                                     noBackground: SettingsData.dankBarNoBackground
+                                    parentScreen: barWindow.screen
+                                    widgetThickness: barWindow.widgetThickness
+                                    barThickness: barWindow.effectiveBarThickness
                                 }
 
                                 RightSection {
@@ -516,6 +547,9 @@ Item {
                                     widgetsModel: SettingsData.dankBarRightWidgetsModel
                                     components: topBarContent.allComponents
                                     noBackground: SettingsData.dankBarNoBackground
+                                    parentScreen: barWindow.screen
+                                    widgetThickness: barWindow.widgetThickness
+                                    barThickness: barWindow.effectiveBarThickness
                                 }
 
                                 CenterSection {
@@ -528,6 +562,9 @@ Item {
                                     widgetsModel: SettingsData.dankBarCenterWidgetsModel
                                     components: topBarContent.allComponents
                                     noBackground: SettingsData.dankBarNoBackground
+                                    parentScreen: barWindow.screen
+                                    widgetThickness: barWindow.widgetThickness
+                                    barThickness: barWindow.effectiveBarThickness
                                 }
                             }
 
@@ -547,6 +584,9 @@ Item {
                                     widgetsModel: SettingsData.dankBarLeftWidgetsModel
                                     components: topBarContent.allComponents
                                     noBackground: SettingsData.dankBarNoBackground
+                                    parentScreen: barWindow.screen
+                                    widgetThickness: barWindow.widgetThickness
+                                    barThickness: barWindow.effectiveBarThickness
                                 }
 
                                 CenterSection {
@@ -560,6 +600,9 @@ Item {
                                     widgetsModel: SettingsData.dankBarCenterWidgetsModel
                                     components: topBarContent.allComponents
                                     noBackground: SettingsData.dankBarNoBackground
+                                    parentScreen: barWindow.screen
+                                    widgetThickness: barWindow.widgetThickness
+                                    barThickness: barWindow.effectiveBarThickness
                                 }
 
                                 RightSection {
@@ -574,6 +617,9 @@ Item {
                                     widgetsModel: SettingsData.dankBarRightWidgetsModel
                                     components: topBarContent.allComponents
                                     noBackground: SettingsData.dankBarNoBackground
+                                    parentScreen: barWindow.screen
+                                    widgetThickness: barWindow.widgetThickness
+                                    barThickness: barWindow.effectiveBarThickness
                                 }
                             }
                         }
@@ -1016,6 +1062,7 @@ Item {
                                 }
                             }
                         }
+
                     }
                 }
             }

Modules/DankBar/LeftSection.qml

@@ -8,6 +8,9 @@ Item {
     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
 
@@ -38,6 +41,10 @@ Item {
                         components: root.components
                         isInColumn: false
                         axis: root.axis
+                        section: "left"
+                        parentScreen: root.parentScreen
+                        widgetThickness: root.widgetThickness
+                        barThickness: root.barThickness
                     }
                 }
             }
@@ -63,6 +70,10 @@ Item {
                         components: root.components
                         isInColumn: true
                         axis: root.axis
+                        section: "left"
+                        parentScreen: root.parentScreen
+                        widgetThickness: root.widgetThickness
+                        barThickness: root.barThickness
                     }
                 }
             }

Modules/DankBar/Popouts/BatteryPopout.qml

@@ -273,7 +273,7 @@ DankPopout {
                         height: 32
                         radius: 16
                         color: closeBatteryArea.containsMouse ? Theme.errorHover : "transparent"
-                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.top: parent.top
 
                         DankIcon {
                             anchors.centerIn: parent

Modules/DankBar/RightSection.qml

@@ -8,6 +8,9 @@ Item {
     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
 
@@ -40,6 +43,10 @@ Item {
                         components: root.components
                         isInColumn: false
                         axis: root.axis
+                        section: "right"
+                        parentScreen: root.parentScreen
+                        widgetThickness: root.widgetThickness
+                        barThickness: root.barThickness
                     }
                 }
             }
@@ -65,6 +72,10 @@ Item {
                         components: root.components
                         isInColumn: true
                         axis: root.axis
+                        section: "right"
+                        parentScreen: root.parentScreen
+                        widgetThickness: root.widgetThickness
+                        barThickness: root.barThickness
                     }
                 }
             }

Modules/DankBar/WidgetHost.qml

@@ -11,6 +11,10 @@ Loader {
     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
 
@@ -21,17 +25,64 @@ Loader {
 
     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 && "axis" in item) {
-                item.axis = axis
-            }
             if (axis && "isVertical" in item) {
-                item.isVertical = axis.isVertical
+                try {
+                    item.isVertical = axis.isVertical
+                } catch (e) {
+                }
+            }
+
+            if (item.pluginService !== undefined) {
+                if (item.pluginId !== undefined) {
+                    item.pluginId = widgetId
+                }
+                item.pluginService = PluginService
             }
         }
     }
@@ -67,7 +118,12 @@ Loader {
             "systemUpdate": components.systemUpdateComponent
         }
 
-        return componentMap[widgetId] || null
+        if (componentMap[widgetId]) {
+            return componentMap[widgetId]
+        }
+
+        let pluginMap = PluginService.getWidgetComponents()
+        return pluginMap[widgetId] || null
     }
 
     function getWidgetVisible(widgetId, dgopAvailable) {

Modules/DankBar/Widgets/ClipboardButton.qml

@@ -50,7 +50,7 @@ Item {
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
             name: "content_paste"
-            size: widgetThickness - 8
+            size: Theme.iconSize - 6
             color: Theme.surfaceText
         }
     }

Modules/DankBar/Widgets/Clock.qml

@@ -51,7 +51,7 @@ Rectangle {
                     }
                 }
                 font.pixelSize: Theme.fontSizeSmall
-                color: Theme.primary
+                color: Theme.surfaceText
                 font.weight: Font.Normal
                 width: 9
                 horizontalAlignment: Text.AlignHCenter
@@ -68,7 +68,7 @@ Rectangle {
                     }
                 }
                 font.pixelSize: Theme.fontSizeSmall
-                color: Theme.primary
+                color: Theme.surfaceText
                 font.weight: Font.Normal
                 width: 9
                 horizontalAlignment: Text.AlignHCenter
@@ -82,7 +82,7 @@ Rectangle {
             StyledText {
                 text: String(systemClock?.date?.getMinutes()).padStart(2, '0').charAt(0)
                 font.pixelSize: Theme.fontSizeSmall
-                color: Theme.primary
+                color: Theme.surfaceText
                 font.weight: Font.Normal
                 width: 9
                 horizontalAlignment: Text.AlignHCenter
@@ -91,7 +91,7 @@ Rectangle {
             StyledText {
                 text: String(systemClock?.date?.getMinutes()).padStart(2, '0').charAt(1)
                 font.pixelSize: Theme.fontSizeSmall
-                color: Theme.primary
+                color: Theme.surfaceText
                 font.weight: Font.Normal
                 width: 9
                 horizontalAlignment: Text.AlignHCenter
@@ -124,13 +124,8 @@ Rectangle {
                     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
-                }
+                color: Theme.primary
+                font.weight: Font.Light
                 width: 9
                 horizontalAlignment: Text.AlignHCenter
             }
@@ -144,13 +139,8 @@ Rectangle {
                     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
-                }
+                color: Theme.primary
+                font.weight: Font.Light
                 width: 9
                 horizontalAlignment: Text.AlignHCenter
             }
@@ -169,13 +159,8 @@ Rectangle {
                     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
-                }
+                color: Theme.primary
+                font.weight: Font.Light
                 width: 9
                 horizontalAlignment: Text.AlignHCenter
             }
@@ -189,13 +174,8 @@ Rectangle {
                     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
-                }
+                color: Theme.primary
+                font.weight: Font.Light
                 width: 9
                 horizontalAlignment: Text.AlignHCenter
             }

Modules/DankBar/Widgets/LauncherButton.qml

@@ -56,8 +56,8 @@ Item {
         SystemLogo {
             visible: SettingsData.useOSLogo
             anchors.centerIn: parent
-            width: widgetThickness - 8
-            height: widgetThickness - 8
+            width: Theme.iconSize - 3
+            height: Theme.iconSize - 3
             colorOverride: SettingsData.osLogoColorOverride
             brightnessOverride: SettingsData.osLogoBrightness
             contrastOverride: SettingsData.osLogoContrast
@@ -65,11 +65,9 @@ Item {
 
         DankIcon {
             visible: !SettingsData.useOSLogo
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.verticalCenterOffset: 1
+            anchors.centerIn: parent
             name: "apps"
-            size: widgetThickness - 8
+            size: Theme.iconSize - 6
             color: Theme.surfaceText
         }
     }

Modules/DankBar/Widgets/NotificationCenterButton.qml

@@ -57,7 +57,7 @@ Item {
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
             name: SessionData.doNotDisturb ? "notifications_off" : "notifications"
-            size: widgetThickness - 8
+            size: Theme.iconSize - 6
             color: SessionData.doNotDisturb ? Theme.error : (notificationArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText)
         }
 

Modules/DankBar/Widgets/WorkspaceSwitcher.qml

@@ -293,19 +293,30 @@ Rectangle {
                 property bool isHovered: mouseArea.containsMouse
 
                 property var loadedWorkspaceData: null
+                property bool loadedIsUrgent: false
+                property bool isUrgent: {
+                    if (CompositorService.isHyprland) {
+                        return modelData?.urgent ?? false
+                    }
+                    if (CompositorService.isNiri) {
+                        return loadedIsUrgent
+                    }
+                    return false
+                }
                 property var loadedIconData: null
                 property bool loadedHasIcon: false
                 property var loadedIcons: []
 
                 Timer {
                     id: dataUpdateTimer
-                    interval: 50 // Defer data calculation by 50ms
+                    interval: 50
                     onTriggered: {
                         if (isPlaceholder) {
                             delegateRoot.loadedWorkspaceData = null
                             delegateRoot.loadedIconData = null
                             delegateRoot.loadedHasIcon = false
                             delegateRoot.loadedIcons = []
+                            delegateRoot.loadedIsUrgent = false
                             return
                         }
 
@@ -316,6 +327,7 @@ Rectangle {
                             wsData = modelData;
                         }
                         delegateRoot.loadedWorkspaceData = wsData;
+                        delegateRoot.loadedIsUrgent = wsData?.is_urgent ?? false;
 
                         var icData = null;
                         if (wsData?.name) {
@@ -363,7 +375,10 @@ Rectangle {
                     }
                 }
                 radius: Math.min(width, height) / 2
-                color: isActive ? Theme.primary : isPlaceholder ? Theme.surfaceTextLight : isHovered ? Theme.outlineButton : Theme.surfaceTextAlpha
+                color: isActive ? Theme.primary : isUrgent ? Theme.error : isPlaceholder ? Theme.surfaceTextLight : isHovered ? Theme.outlineButton : Theme.surfaceTextAlpha
+
+                border.width: isUrgent && !isActive ? 2 : 0
+                border.color: isUrgent && !isActive ? Theme.error : Theme.withAlpha(Theme.error, 0)
 
                 Behavior on width {
                     enabled: (!SettingsData.showWorkspaceApps || SettingsData.maxWorkspaceIcons <= 3)
@@ -381,6 +396,20 @@ Rectangle {
                     }
                 }
 
+                Behavior on color {
+                    ColorAnimation {
+                        duration: Theme.mediumDuration
+                        easing.type: Theme.emphasizedEasing
+                    }
+                }
+
+                Behavior on border.width {
+                    NumberAnimation {
+                        duration: Theme.shortDuration
+                        easing.type: Theme.emphasizedEasing
+                    }
+                }
+
                 MouseArea {
                     id: mouseArea
 
@@ -619,6 +648,7 @@ Rectangle {
                     target: NiriService
                     enabled: CompositorService.isNiri
                     function onAllWorkspacesChanged() { delegateRoot.updateAllData() }
+                    function onWindowUrgentChanged() { delegateRoot.updateAllData() }
                 }
                 Connections {
                     target: SettingsData

Modules/DankDash/MediaPlayerTab.qml

@@ -17,7 +17,7 @@ Item {
     property MprisPlayer activePlayer: MprisController.activePlayer
     property var allPlayers: MprisController.availablePlayers
 
-
+    readonly property bool isRightEdge: SettingsData.dankBarPosition === SettingsData.Position.Right
     property var defaultSink: AudioService.sink
 
     // Palette that stays stable across track switches until new colors are ready
@@ -342,7 +342,7 @@ Item {
             id: audioDevicesDropdown
             width: 280
             height: audioDevicesButton.devicesExpanded ? Math.max(200, Math.min(280, audioDevicesDropdown.availableDevices.length * 50 + 100)) : 0
-            x: root.width + Theme.spacingS
+            x: isRightEdge ? -width - Theme.spacingS : root.width + Theme.spacingS
             y: audioDevicesButton.y - 50
             visible: audioDevicesButton.devicesExpanded
             closePolicy: Popup.NoAutoClose
@@ -504,7 +504,7 @@ Item {
             id: playerSelectorDropdown
             width: 240
             height: playerSelectorButton.playersExpanded ? Math.max(180, Math.min(240, (root.allPlayers?.length || 0) * 50 + 80)) : 0
-            x: root.width + Theme.spacingS
+            x: isRightEdge ? -width - Theme.spacingS : root.width + Theme.spacingS
             y: playerSelectorButton.y - 50
             visible: playerSelectorButton.playersExpanded
             closePolicy: Popup.NoAutoClose
@@ -1045,7 +1045,7 @@ Item {
             width: 40
             height: 40
             radius: 20
-            x: parent.width - 40 - Theme.spacingM
+            x: isRightEdge ? Theme.spacingM : parent.width - 40 - Theme.spacingM
             y: 185
             color: playerSelectorArea.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)
@@ -1098,7 +1098,7 @@ Item {
             width: 40
             height: 40
             radius: 20
-            x: parent.width - 40 - Theme.spacingM
+            x: isRightEdge ? Theme.spacingM : parent.width - 40 - Theme.spacingM
             y: 130
             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)
@@ -1153,8 +1153,8 @@ Item {
             width: 40
             height: 40
             radius: 20
-            x: parent.width - 40 - Theme.spacingM
-            y: 240  
+            x: isRightEdge ? Theme.spacingM : 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
@@ -1206,7 +1206,7 @@ Item {
         id: volumeSliderPanel
         width: 60
         height: 180
-        x: root.width + Theme.spacingS
+        x: isRightEdge ? -width - Theme.spacingS : root.width + Theme.spacingS
         y: volumeButton.y - 50
         visible: volumeButton.volumeExpanded
         closePolicy: Popup.NoAutoClose

Modules/Greetd/GreeterContent.qml

@@ -17,8 +17,12 @@ Item {
 
     required property var sessionLock
 
+    readonly property string xdgDataDirs: Quickshell.env("XDG_DATA_DIRS")
     property string screenName: ""
     property string randomFact: ""
+    property string hyprlandCurrentLayout: ""
+    property string hyprlandKeyboard: ""
+    property int hyprlandLayoutCount: 0
     property bool isPrimaryScreen: {
         if (!Qt.application.screens || Qt.application.screens.length === 0)
             return true
@@ -61,6 +65,11 @@ Item {
             sessionListProc.running = true
             applyLastSuccessfulUser()
         }
+
+        if (CompositorService.isHyprland) {
+            updateHyprlandLayout()
+            hyprlandLayoutUpdateTimer.start()
+        }
     }
 
     function applyLastSuccessfulUser() {
@@ -75,6 +84,56 @@ Item {
 
     Component.onDestruction: {
         WeatherService.removeRef()
+        if (CompositorService.isHyprland) {
+            hyprlandLayoutUpdateTimer.stop()
+        }
+    }
+
+    function updateHyprlandLayout() {
+        if (CompositorService.isHyprland) {
+            hyprlandLayoutProcess.running = true
+        }
+    }
+
+    Process {
+        id: hyprlandLayoutProcess
+        running: false
+        command: ["hyprctl", "-j", "devices"]
+        stdout: StdioCollector {
+            onStreamFinished: {
+                try {
+                    const data = JSON.parse(text)
+                    const mainKeyboard = data.keyboards.find(kb => kb.main === true)
+                    hyprlandKeyboard = mainKeyboard.name
+                    if (mainKeyboard && mainKeyboard.active_keymap) {
+                        const parts = mainKeyboard.active_keymap.split(" ")
+                        if (parts.length > 0) {
+                            hyprlandCurrentLayout = parts[0].substring(0, 2).toUpperCase()
+                        } else {
+                            hyprlandCurrentLayout = mainKeyboard.active_keymap.substring(0, 2).toUpperCase()
+                        }
+                    } else {
+                        hyprlandCurrentLayout = ""
+                    }
+                    if (mainKeyboard && mainKeyboard.layout_names) {
+                        hyprlandLayoutCount = mainKeyboard.layout_names.length
+                    } else {
+                        hyprlandLayoutCount = 0
+                    }
+                } catch (e) {
+                    hyprlandCurrentLayout = ""
+                    hyprlandLayoutCount = 0
+                }
+            }
+        }
+    }
+
+    Timer {
+        id: hyprlandLayoutUpdateTimer
+        interval: 1000
+        running: false
+        repeat: true
+        onTriggered: updateHyprlandLayout()
     }
 
     // ! This was for development and testing, just leaving so people can see how I did it.
@@ -438,6 +497,8 @@ Item {
                 StyledText {
                     Layout.fillWidth: true
                     Layout.preferredHeight: 20
+                    Layout.topMargin: -Theme.spacingS
+                    Layout.bottomMargin: -Theme.spacingS
                     text: {
                         if (GreeterState.pamState === "error")
                             return "Authentication error - try again"
@@ -448,7 +509,6 @@ Item {
                     color: Theme.error
                     font.pixelSize: Theme.fontSizeSmall
                     horizontalAlignment: Text.AlignHCenter
-                    visible: GreeterState.pamState !== ""
                     opacity: GreeterState.pamState !== "" ? 1 : 0
 
                     Behavior on opacity {
@@ -461,7 +521,7 @@ Item {
 
                 Rectangle {
                     Layout.alignment: Qt.AlignHCenter
-                    Layout.topMargin: Theme.spacingS
+                    Layout.topMargin: 0
                     Layout.preferredWidth: switchUserRow.width + Theme.spacingL * 2
                     Layout.preferredHeight: 40
                     radius: Theme.cornerRadius
@@ -516,6 +576,91 @@ Item {
             anchors.margins: Theme.spacingXL
             spacing: Theme.spacingL
 
+            Item {
+                width: keyboardLayoutRow.width
+                height: keyboardLayoutRow.height
+                anchors.verticalCenter: parent.verticalCenter
+                visible: {
+                    if (CompositorService.isNiri) {
+                        return NiriService.keyboardLayoutNames.length > 1
+                    } else if (CompositorService.isHyprland) {
+                        return hyprlandLayoutCount > 1
+                    }
+                    return false
+                }
+
+                Row {
+                    id: keyboardLayoutRow
+                    spacing: 4
+
+                    Item {
+                        width: Theme.iconSize
+                        height: Theme.iconSize
+
+                        DankIcon {
+                            name: "keyboard"
+                            size: Theme.iconSize
+                            color: "white"
+                            anchors.centerIn: parent
+                        }
+                    }
+
+                    Item {
+                        width: childrenRect.width
+                        height: Theme.iconSize
+
+                        StyledText {
+                            text: {
+                                if (CompositorService.isNiri) {
+                                    const layout = NiriService.getCurrentKeyboardLayoutName()
+                                    if (!layout) return ""
+                                    const parts = layout.split(" ")
+                                    if (parts.length > 0) {
+                                        return parts[0].substring(0, 2).toUpperCase()
+                                    }
+                                    return layout.substring(0, 2).toUpperCase()
+                                } else if (CompositorService.isHyprland) {
+                                    return hyprlandCurrentLayout
+                                }
+                                return ""
+                            }
+                            font.pixelSize: Theme.fontSizeMedium
+                            font.weight: Font.Light
+                            color: "white"
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+                }
+
+                MouseArea {
+                    id: keyboardLayoutArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        if (CompositorService.isNiri) {
+                            NiriService.cycleKeyboardLayout()
+                        } else if (CompositorService.isHyprland) {
+                            Quickshell.execDetached([
+                                "hyprctl",
+                                "switchxkblayout",
+                                hyprlandKeyboard,
+                                "next"
+                            ])
+                            updateHyprlandLayout()
+                        }
+                    }
+                }
+            }
+
+            Rectangle {
+                width: 1
+                height: 24
+                color: Qt.rgba(255, 255, 255, 0.2)
+                anchors.verticalCenter: parent.verticalCenter
+                visible: MprisController.activePlayer
+            }
+
             Row {
                 spacing: Theme.spacingS
                 visible: MprisController.activePlayer
@@ -970,7 +1115,7 @@ Item {
                                     if (idx >= 0) {
                                         GreeterState.currentSessionIndex = idx
                                         GreeterState.selectedSession = GreeterState.sessionExecs[idx]
-                                        GreetdMemory.setLastSessionId(GreeterState.sessionExecs[idx].split(" ")[0])
+                                        GreetdMemory.setLastSessionId(GreeterState.sessionPaths[idx])
                                     }
                                 }
             }
@@ -987,6 +1132,7 @@ Item {
     property string currentSessionName: GreeterState.sessionList[GreeterState.currentSessionIndex] || ""
     property int pendingParsers: 0
 
+
     function finalizeSessionSelection() {
         if (GreeterState.sessionList.length === 0) {
             return
@@ -997,8 +1143,8 @@ Item {
         const savedSession = GreetdMemory.lastSessionId
         let foundSaved = false
         if (savedSession) {
-            for (var i = 0; i < GreeterState.sessionExecs.length; i++) {
-                if (GreeterState.sessionExecs[i].toLowerCase().includes(savedSession.toLowerCase()) || GreeterState.sessionList[i].toLowerCase().includes(savedSession.toLowerCase())) {
+            for (var i = 0; i < GreeterState.sessionPaths.length; i++) {
+                if (GreeterState.sessionPaths[i] === savedSession) {
                     GreeterState.currentSessionIndex = i
                     foundSaved = true
                     break
@@ -1015,7 +1161,14 @@ Item {
 
     Process {
         id: sessionListProc
-        command: ["find", "/usr/share/wayland-sessions", "/usr/share/xsessions", "-name", "*.desktop", "-type", "f"]
+        command: ["find"]
+            .concat("/usr/share/wayland-sessions")
+            .concat("/usr/share/xsessions")
+            .concat("/usr/local/share/wayland-sessions")
+            .concat("/usr/local/share/xsessions")
+            .concat(xdgDataDirs.split(":").map(d => d + "/wayland-sessions"))
+            .concat(xdgDataDirs.split(":").map(d => d + "/xsessions"))
+            .concat(["-name", "*.desktop", "-type", "f", "-follow"])
         running: false
 
         stdout: SplitParser {
@@ -1059,10 +1212,13 @@ Item {
                         if (!GreeterState.sessionList.includes(name)) {
                             let newList = GreeterState.sessionList.slice()
                             let newExecs = GreeterState.sessionExecs.slice()
+                            let newPaths = GreeterState.sessionPaths.slice()
                             newList.push(name)
                             newExecs.push(exec)
+                            newPaths.push(desktopPath)
                             GreeterState.sessionList = newList
                             GreeterState.sessionExecs = newExecs
+                            GreeterState.sessionPaths = newPaths
                             root.sessionCount = GreeterState.sessionList.length
                         }
                     }
@@ -1098,17 +1254,16 @@ Item {
             GreeterState.unlocking = true
             const sessionCmd = GreeterState.selectedSession || GreeterState.sessionExecs[GreeterState.currentSessionIndex]
             if (sessionCmd) {
-                GreetdMemory.setLastSessionId(sessionCmd.split(" ")[0])
+                GreetdMemory.setLastSessionId(GreeterState.sessionPaths[GreeterState.currentSessionIndex])
                 GreetdMemory.setLastSuccessfulUser(GreeterState.username)
-                Greetd.launch(sessionCmd.split(" "), [], true)
+                Greetd.launch(sessionCmd.split(" "), ["XDG_SESSION_TYPE=wayland"], true)
             }
         }
 
         function onAuthFailure(message) {
             GreeterState.pamState = "fail"
-            GreeterState.reset()
+            GreeterState.passwordBuffer = ""
             inputField.text = ""
-            PortalService.profileImage = ""
             placeholderDelay.restart()
         }
 

Modules/Greetd/GreeterState.qml

@@ -16,6 +16,7 @@ Singleton {
 
     property var sessionList: []
     property var sessionExecs: []
+    property var sessionPaths: []
     property int currentSessionIndex: 0
 
     function reset() {

Modules/Greetd/README.md

@@ -12,13 +12,16 @@ A greeter for [greetd](https://github.com/kennylevinsen/greetd) that follows the
 
 ## Installation
 
+### Automatic
+
 The easiest thing is to run `dms greeter install` or `dms` for interactive installation.
 
-Manual installation:
+### Manual
+
 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`
+3. Copy `assets/greet-niri.sh` or `assets/greet-hyprland.sh` to `/usr/local/bin/start-dms-greetd.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
@@ -38,11 +41,29 @@ vt = 1
 # in the `video` group.
 user = "greeter"
 
-command = "/etc/greetd/start-dms.sh"%
+command = "/usr/local/bin/start-dms-greetd.sh"
 ```
 
 Enable the greeter with `sudo systemctl enable greetd`
 
+### NixOS
+
+To install the greeter on NixOS add the repo to your flake inputs as described in the readme. Then somewhere in your NixOS config add this to imports:
+```nix
+imports = [
+  inputs.dankMaterialShell.nixosModules.greeter
+]
+```
+
+Enable the greeter with this in your NixOS config:
+```nix
+programs.dankMaterialShell.greeter = {
+  enable = true;
+  compositor = "niri"; # or set to hyprland
+  configHome = "/home/user"; # optionally symlinks that users DMS settings to the greeters data directory
+};
+```
+
 ## Usage
 
 To run dms in greeter mode you just need to set `DMS_RUN_GREETER=1` in the environment.

Modules/Greetd/assets/dms-hypr.conf

@@ -1,6 +1,3 @@
 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

@@ -4,8 +4,6 @@ hotkey-overlay {
 
 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"
@@ -18,4 +16,8 @@ gestures {
    hot-corners {
      off
    }
+}
+
+layout {
+  background-color "#000000"
 }

Modules/Greetd/assets/greet-hyprland.sh

@@ -1,3 +1,8 @@
 #!/bin/sh
 
-EGL_PLATFORM=gbm Hyprland -c /etc/greetd/dms-hypr.conf
+export XDG_SESSION_TYPE=wayland
+export QT_QPA_PLATFORM=wayland
+export QT_WAYLAND_DISABLE_WINDOWDECORATION=1
+export EGL_PLATFORM=gbm
+
+exec Hyprland -c /etc/greetd/dms-hypr.conf

Modules/Greetd/assets/greet-niri.sh

@@ -1,3 +1,8 @@
 #!/bin/sh
 
-EGL_PLATFORM=gbm niri -c /etc/greetd/dms-niri.kdl
+export XDG_SESSION_TYPE=wayland
+export QT_QPA_PLATFORM=wayland
+export QT_WAYLAND_DISABLE_WINDOWDECORATION=1
+export EGL_PLATFORM=gbm
+
+exec niri -c /etc/greetd/dms-niri.kdl

Modules/Lock/LockScreenContent.qml

@@ -20,6 +20,9 @@ Item {
     property bool unlocking: false
     property string pamState: ""
     property string randomFact: ""
+    property string hyprlandCurrentLayout: ""
+    property string hyprlandKeyboard: ""
+    property int hyprlandLayoutCount: 0
 
     signal unlockRequested
 
@@ -55,6 +58,11 @@ Item {
 
         WeatherService.addRef()
         UserInfoService.refreshUserInfo()
+
+        if (CompositorService.isHyprland) {
+            updateHyprlandLayout()
+            hyprlandLayoutUpdateTimer.start()
+        }
     }
     onDemoModeChanged: {
         if (demoMode) {
@@ -63,6 +71,56 @@ Item {
     }
     Component.onDestruction: {
         WeatherService.removeRef()
+        if (CompositorService.isHyprland) {
+            hyprlandLayoutUpdateTimer.stop()
+        }
+    }
+
+    function updateHyprlandLayout() {
+        if (CompositorService.isHyprland) {
+            hyprlandLayoutProcess.running = true
+        }
+    }
+
+    Process {
+        id: hyprlandLayoutProcess
+        running: false
+        command: ["hyprctl", "-j", "devices"]
+        stdout: StdioCollector {
+            onStreamFinished: {
+                try {
+                    const data = JSON.parse(text)
+                    const mainKeyboard = data.keyboards.find(kb => kb.main === true)
+                    hyprlandKeyboard = mainKeyboard.name
+                    if (mainKeyboard && mainKeyboard.active_keymap) {
+                        const parts = mainKeyboard.active_keymap.split(" ")
+                        if (parts.length > 0) {
+                            hyprlandCurrentLayout = parts[0].substring(0, 2).toUpperCase()
+                        } else {
+                            hyprlandCurrentLayout = mainKeyboard.active_keymap.substring(0, 2).toUpperCase()
+                        }
+                    } else {
+                        hyprlandCurrentLayout = ""
+                    }
+                    if (mainKeyboard && mainKeyboard.layout_names) {
+                        hyprlandLayoutCount = mainKeyboard.layout_names.length
+                    } else {
+                        hyprlandLayoutCount = 0
+                    }
+                } catch (e) {
+                    hyprlandCurrentLayout = ""
+                    hyprlandLayoutCount = 0
+                }
+            }
+        }
+    }
+
+    Timer {
+        id: hyprlandLayoutUpdateTimer
+        interval: 1000
+        running: false
+        repeat: true
+        onTriggered: updateHyprlandLayout()
     }
 
     Loader {
@@ -520,7 +578,7 @@ Item {
 
             StyledText {
                 Layout.fillWidth: true
-                Layout.preferredHeight: root.pamState ? 20 : 0
+                Layout.preferredHeight: 20
                 text: {
                     if (root.pamState === "error") {
                         return "Authentication error - try again"
@@ -536,7 +594,6 @@ Item {
                 color: Theme.error
                 font.pixelSize: Theme.fontSizeSmall
                 horizontalAlignment: Text.AlignHCenter
-                visible: root.pamState !== ""
                 opacity: root.pamState !== "" ? 1 : 0
 
                 Behavior on opacity {
@@ -545,13 +602,6 @@ Item {
                         easing.type: Theme.standardEasing
                     }
                 }
-
-                Behavior on Layout.preferredHeight {
-                    NumberAnimation {
-                        duration: Theme.shortDuration
-                        easing.type: Theme.standardEasing
-                    }
-                }
             }
         }
 
@@ -572,6 +622,92 @@ Item {
             anchors.margins: Theme.spacingXL
             spacing: Theme.spacingL
 
+            Item {
+                width: keyboardLayoutRow.width
+                height: keyboardLayoutRow.height
+                anchors.verticalCenter: parent.verticalCenter
+                visible: {
+                    if (CompositorService.isNiri) {
+                        return NiriService.keyboardLayoutNames.length > 1
+                    } else if (CompositorService.isHyprland) {
+                        return hyprlandLayoutCount > 1
+                    }
+                    return false
+                }
+
+                Row {
+                    id: keyboardLayoutRow
+                    spacing: 4
+
+                    Item {
+                        width: Theme.iconSize
+                        height: Theme.iconSize
+
+                        DankIcon {
+                            name: "keyboard"
+                            size: Theme.iconSize
+                            color: "white"
+                            anchors.centerIn: parent
+                        }
+                    }
+
+                    Item {
+                        width: childrenRect.width
+                        height: Theme.iconSize
+
+                        StyledText {
+                            text: {
+                                if (CompositorService.isNiri) {
+                                    const layout = NiriService.getCurrentKeyboardLayoutName()
+                                    if (!layout) return ""
+                                    const parts = layout.split(" ")
+                                    if (parts.length > 0) {
+                                        return parts[0].substring(0, 2).toUpperCase()
+                                    }
+                                    return layout.substring(0, 2).toUpperCase()
+                                } else if (CompositorService.isHyprland) {
+                                    return hyprlandCurrentLayout
+                                }
+                                return ""
+                            }
+                            font.pixelSize: Theme.fontSizeMedium
+                            font.weight: Font.Light
+                            color: "white"
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+                }
+
+                MouseArea {
+                    id: keyboardLayoutArea
+                    anchors.fill: parent
+                    enabled: !demoMode
+                    hoverEnabled: enabled
+                    cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+                    onClicked: {
+                        if (CompositorService.isNiri) {
+                            NiriService.cycleKeyboardLayout()
+                        } else if (CompositorService.isHyprland) {
+                            Quickshell.execDetached([
+                                "hyprctl",
+                                "switchxkblayout",
+                                hyprlandKeyboard,
+                                "next"
+                            ])
+                            updateHyprlandLayout()
+                        }
+                    }
+                }
+            }
+
+            Rectangle {
+                width: 1
+                height: 24
+                color: Qt.rgba(255, 255, 255, 0.2)
+                anchors.verticalCenter: parent.verticalCenter
+                visible: MprisController.activePlayer
+            }
+
             Row {
                 spacing: Theme.spacingS
                 visible: MprisController.activePlayer
@@ -1036,6 +1172,8 @@ Item {
                              return
                          }
                          console.log("Authentication failed:", res)
+                         passwordField.text = ""
+                         root.passwordBuffer = ""
                          if (res === PamResult.Error)
                          root.pamState = "error"
                          else if (res === PamResult.MaxTries)

Modules/Notepad/NotepadSettings.qml

@@ -163,7 +163,7 @@ Item {
 
                 DankDropdown {
                     id: fontDropdown
-                    anchors.left: parent.left
+                    anchors.left: parent.left 
                     anchors.leftMargin: -Theme.spacingM
                     width: parent.width + Theme.spacingM
                     text: "Font Family"

Modules/Notifications/Center/NotificationSettings.qml

@@ -157,7 +157,6 @@ Rectangle {
         }
 
         DankDropdown {
-            width: parent.width
             text: "Low Priority"
             description: "Timeout for low priority notifications"
             currentValue: getTimeoutText(SettingsData.notificationTimeoutLow)
@@ -173,7 +172,6 @@ Rectangle {
         }
 
         DankDropdown {
-            width: parent.width
             text: "Normal Priority"
             description: "Timeout for normal priority notifications"
             currentValue: getTimeoutText(SettingsData.notificationTimeoutNormal)
@@ -189,7 +187,6 @@ Rectangle {
         }
 
         DankDropdown {
-            width: parent.width
             text: "Critical Priority"
             description: "Timeout for critical priority notifications"
             currentValue: getTimeoutText(SettingsData.notificationTimeoutCritical)

Modules/Plugins/BasePill.qml

@@ -0,0 +1,54 @@
+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 bool isVerticalOrientation: false
+    property alias content: contentLoader.sourceComponent
+
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
+
+    signal clicked()
+
+    width: isVerticalOrientation ? widgetThickness : contentLoader.item ? (contentLoader.item.implicitWidth + horizontalPadding * 2) : 0
+    height: isVerticalOrientation ? (contentLoader.item ? (contentLoader.item.implicitHeight + horizontalPadding * 2) : 0) : 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/ListSetting.qml

@@ -0,0 +1,132 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Column {
+    id: root
+
+    required property string settingKey
+    required property string label
+    property string description: ""
+    property var defaultValue: []
+    property var items: defaultValue
+    property Component delegate: null
+
+    width: parent.width
+    spacing: Theme.spacingM
+
+    Component.onCompleted: {
+        const settings = findSettings()
+        if (settings) {
+            items = settings.loadValue(settingKey, defaultValue)
+        }
+    }
+
+    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,256 @@
+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 defaultValue: []
+    property var items: defaultValue
+
+    width: parent.width
+    spacing: Theme.spacingM
+
+    property bool isLoading: false
+
+    Component.onCompleted: {
+        loadValue()
+    }
+
+    function loadValue() {
+        const settings = findSettings()
+        if (settings) {
+            isLoading = true
+            items = settings.loadValue(settingKey, defaultValue)
+            isLoading = false
+        }
+    }
+
+    onItemsChanged: {
+        if (isLoading) {
+            return
+        }
+        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
+
+                required property int index
+                required property var modelData
+
+                Row {
+                    id: itemRow
+                    anchors.left: parent.left
+                    anchors.leftMargin: Theme.spacingM
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: Theme.spacingM
+
+                    property var itemData: parent.modelData
+
+                    Repeater {
+                        model: root.fields
+
+                        StyledText {
+                            required property int index
+                            required property var modelData
+
+                            text: {
+                                const field = modelData
+                                const item = itemRow.itemData
+                                if (!field || !field.id || !item) {
+                                    return ""
+                                }
+                                const value = item[field.id]
+                                return value || ""
+                            }
+                            color: Theme.surfaceText
+                            font.pixelSize: Theme.fontSizeMedium
+                            width: modelData ? (modelData.width || 200) : 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.onError
+                        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,109 @@
+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 string pluginId: ""
+    property var pluginService: null
+
+    property Component horizontalBarPill: null
+    property Component verticalBarPill: null
+    property Component popoutContent: null
+    property real popoutWidth: 400
+    property real popoutHeight: 400
+
+    property var pluginData: ({})
+
+    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
+
+    Component.onCompleted: {
+        loadPluginData()
+    }
+
+    onPluginServiceChanged: {
+        loadPluginData()
+    }
+
+    onPluginIdChanged: {
+        loadPluginData()
+    }
+
+    Connections {
+        target: pluginService
+        function onPluginDataChanged(changedPluginId) {
+            if (changedPluginId === pluginId) {
+                loadPluginData()
+            }
+        }
+    }
+
+    function loadPluginData() {
+        if (!pluginService || !pluginId) {
+            pluginData = {}
+            return
+        }
+        pluginData = SettingsData.getPluginSettingsForPlugin(pluginId)
+    }
+
+    width: isVertical ? (hasVerticalPill ? verticalPill.width : 0) : (hasHorizontalPill ? horizontalPill.width : 0)
+    height: isVertical ? (hasVerticalPill ? verticalPill.height : 0) : (hasHorizontalPill ? horizontalPill.height : 0)
+
+    BasePill {
+        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()
+            }
+        }
+    }
+
+    BasePill {
+        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
+        isVerticalOrientation: true
+        onClicked: {
+            if (hasPopout) {
+                pluginPopout.toggle()
+            }
+        }
+    }
+
+    function closePopout() {
+        if (pluginPopout) {
+            pluginPopout.close()
+        }
+    }
+
+    PluginPopout {
+        id: pluginPopout
+        contentWidth: root.popoutWidth
+        contentHeight: root.popoutHeight
+        pluginContent: root.popoutContent
+    }
+}

Modules/Plugins/PluginPopout.qml

@@ -0,0 +1,87 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+DankPopout {
+    id: root
+
+    property var triggerScreen: null
+    property Component pluginContent: null
+    property real contentWidth: 400
+    property real contentHeight: 400
+
+    function setTriggerPosition(x, y, width, section, screen) {
+        triggerX = x
+        triggerY = y
+        triggerWidth = width
+        triggerSection = section
+        triggerScreen = screen
+    }
+
+    popupWidth: contentWidth
+    popupHeight: popoutContent.item ? popoutContent.item.implicitHeight : contentHeight
+    screen: triggerScreen
+    shouldBeVisible: false
+    visible: shouldBeVisible
+
+    content: Component {
+        Rectangle {
+            id: popoutContainer
+
+            implicitHeight: popoutColumn.implicitHeight + Theme.spacingL * 2
+            color: Theme.popupBackground()
+            radius: Theme.cornerRadius
+            border.width: 0
+            antialiasing: true
+            smooth: true
+            focus: true
+
+            Component.onCompleted: {
+                if (root.shouldBeVisible) {
+                    forceActiveFocus()
+                }
+            }
+
+            Keys.onPressed: event => {
+                if (event.key === Qt.Key_Escape) {
+                    root.close()
+                    event.accepted = true
+                }
+            }
+
+            Connections {
+                target: root
+                function onShouldBeVisibleChanged() {
+                    if (root.shouldBeVisible) {
+                        Qt.callLater(() => {
+                            popoutContainer.forceActiveFocus()
+                        })
+                    }
+                }
+            }
+
+            Column {
+                id: popoutColumn
+                width: parent.width - Theme.spacingS * 2
+                height: parent.height - Theme.spacingS * 2
+                x: Theme.spacingS
+                y: Theme.spacingS
+                spacing: Theme.spacingS
+
+                Loader {
+                    id: popoutContent
+                    width: parent.width
+                    sourceComponent: root.pluginContent
+
+                    onLoaded: {
+                        if (item && "closePopout" in item) {
+                            item.closePopout = function() {
+                                root.close()
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

Modules/Plugins/PluginSettings.qml

@@ -0,0 +1,70 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    required property string pluginId
+    property var pluginService: null
+    default property alias content: settingsColumn.children
+
+    signal settingChanged()
+
+    implicitHeight: hasPermission ? settingsColumn.implicitHeight : errorText.implicitHeight
+    height: implicitHeight
+
+    readonly property bool hasPermission: pluginService && pluginService.hasPermission ? pluginService.hasPermission(pluginId, "settings_write") : true
+
+    onPluginServiceChanged: {
+        if (pluginService) {
+            for (let i = 0; i < settingsColumn.children.length; i++) {
+                const child = settingsColumn.children[i]
+                if (child.loadValue) {
+                    child.loadValue()
+                }
+            }
+        }
+    }
+
+    function saveValue(key, value) {
+        if (!pluginService) {
+            return
+        }
+        if (!hasPermission) {
+            console.warn("PluginSettings: Plugin", pluginId, "does not have settings_write permission")
+            return
+        }
+        if (pluginService.savePluginData) {
+            pluginService.savePluginData(pluginId, key, value)
+            settingChanged()
+        }
+    }
+
+    function loadValue(key, defaultValue) {
+        if (pluginService && pluginService.loadPluginData) {
+            return pluginService.loadPluginData(pluginId, key, defaultValue)
+        }
+        return defaultValue
+    }
+
+    StyledText {
+        id: errorText
+        visible: pluginService && !root.hasPermission
+        anchors.fill: parent
+        text: "This plugin does not have 'settings_write' permission.\n\nAdd \"permissions\": [\"settings_read\", \"settings_write\"] to plugin.json"
+        color: Theme.error
+        font.pixelSize: Theme.fontSizeMedium
+        wrapMode: Text.WordWrap
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    Column {
+        id: settingsColumn
+        visible: root.hasPermission
+        width: parent.width
+        spacing: Theme.spacingM
+    }
+}

Modules/Plugins/PopoutComponent.qml

@@ -0,0 +1,76 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Column {
+    id: root
+
+    property string headerText: ""
+    property string detailsText: ""
+    property bool showCloseButton: false
+    property var closePopout: null
+
+    readonly property int headerHeight: popoutHeader.visible ? popoutHeader.height : 0
+    readonly property int detailsHeight: popoutDetails.visible ? popoutDetails.implicitHeight : 0
+
+    spacing: 0
+
+    Item {
+        id: popoutHeader
+        width: parent.width
+        height: 40
+        visible: headerText.length > 0
+
+        StyledText {
+            anchors.left: parent.left
+            anchors.leftMargin: Theme.spacingS
+            anchors.verticalCenter: parent.verticalCenter
+            text: root.headerText
+            font.pixelSize: Theme.fontSizeLarge + 4
+            font.weight: Font.Bold
+            color: Theme.surfaceText
+        }
+
+        Rectangle {
+            id: closeButton
+            width: 32
+            height: 32
+            radius: 16
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            color: closeArea.containsMouse ? Theme.errorHover : "transparent"
+            visible: root.showCloseButton
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: "close"
+                size: Theme.iconSize - 4
+                color: closeArea.containsMouse ? Theme.error : Theme.surfaceText
+            }
+
+            MouseArea {
+                id: closeArea
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onPressed: {
+                    if (root.closePopout) {
+                        root.closePopout()
+                    }
+                }
+            }
+        }
+    }
+
+    StyledText {
+        id: popoutDetails
+        width: parent.width
+        leftPadding: Theme.spacingS
+        bottomPadding: Theme.spacingS
+        text: root.detailsText
+        font.pixelSize: Theme.fontSizeMedium
+        color: Theme.surfaceVariantText
+        visible: detailsText.length > 0
+        wrapMode: Text.WordWrap
+    }
+}

Modules/Plugins/SelectionSetting.qml

@@ -0,0 +1,91 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Column {
+    id: root
+
+    required property string settingKey
+    required property string label
+    property string description: ""
+    required property var options
+    property string defaultValue: ""
+    property string value: defaultValue
+
+    width: parent.width
+    spacing: Theme.spacingS
+
+    function loadValue() {
+        const settings = findSettings()
+        if (settings && settings.pluginService) {
+            value = settings.loadValue(settingKey, defaultValue)
+        }
+    }
+
+    Component.onCompleted: {
+        loadValue()
+    }
+
+    readonly property var optionLabels: {
+        const labels = []
+        for (let i = 0; i < options.length; i++) {
+            labels.push(options[i].label || options[i])
+        }
+        return labels
+    }
+
+    readonly property var valueToLabel: {
+        const map = {}
+        for (let i = 0; i < options.length; i++) {
+            const opt = options[i]
+            if (typeof opt === 'object') {
+                map[opt.value] = opt.label
+            } else {
+                map[opt] = opt
+            }
+        }
+        return map
+    }
+
+    readonly property var labelToValue: {
+        const map = {}
+        for (let i = 0; i < options.length; i++) {
+            const opt = options[i]
+            if (typeof opt === 'object') {
+                map[opt.label] = opt.value
+            } else {
+                map[opt] = opt
+            }
+        }
+        return map
+    }
+
+    onValueChanged: {
+        const settings = findSettings()
+        if (settings) {
+            settings.saveValue(settingKey, value)
+        }
+    }
+
+    function findSettings() {
+        let item = parent
+        while (item) {
+            if (item.saveValue !== undefined && item.loadValue !== undefined) {
+                return item
+            }
+            item = item.parent
+        }
+        return null
+    }
+
+    DankDropdown {
+        width: parent.width
+        text: root.label
+        description: root.description
+        currentValue: root.valueToLabel[root.value] || root.value
+        options: root.optionLabels
+        onValueChanged: newValue => {
+            root.value = root.labelToValue[newValue] || newValue
+        }
+    }
+}

Modules/Plugins/SliderSetting.qml

@@ -0,0 +1,81 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Column {
+    id: root
+
+    required property string settingKey
+    required property string label
+    property string description: ""
+    property int defaultValue: 0
+    property int value: defaultValue
+    property int minimum: 0
+    property int maximum: 100
+    property string leftIcon: ""
+    property string rightIcon: ""
+    property string unit: ""
+
+    width: parent.width
+    spacing: Theme.spacingS
+
+    function loadValue() {
+        const settings = findSettings()
+        if (settings && settings.pluginService) {
+            value = settings.loadValue(settingKey, defaultValue)
+        }
+    }
+
+    Component.onCompleted: {
+        loadValue()
+    }
+
+    onValueChanged: {
+        const settings = findSettings()
+        if (settings) {
+            settings.saveValue(settingKey, value)
+        }
+    }
+
+    function findSettings() {
+        let item = parent
+        while (item) {
+            if (item.saveValue !== undefined && item.loadValue !== undefined) {
+                return item
+            }
+            item = item.parent
+        }
+        return null
+    }
+
+    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 !== ""
+    }
+
+    DankSlider {
+        width: parent.width
+        value: root.value
+        minimum: root.minimum
+        maximum: root.maximum
+        leftIcon: root.leftIcon
+        rightIcon: root.rightIcon
+        unit: root.unit
+        wheelEnabled: false
+        thumbOutlineColor: Theme.surfaceContainerHighest
+        onSliderValueChanged: newValue => {
+            root.value = newValue
+        }
+    }
+}

Modules/Plugins/StringSetting.qml

@@ -0,0 +1,65 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Column {
+    id: root
+
+    required property string settingKey
+    required property string label
+    property string description: ""
+    property string placeholder: ""
+    property string defaultValue: ""
+    property string value: defaultValue
+
+    width: parent.width
+    spacing: Theme.spacingS
+
+    Component.onCompleted: {
+        const settings = findSettings()
+        if (settings) {
+            value = settings.loadValue(settingKey, defaultValue)
+            textField.text = value
+        }
+    }
+
+    function findSettings() {
+        let item = parent
+        while (item) {
+            if (item.saveValue !== undefined && item.loadValue !== undefined) {
+                return item
+            }
+            item = item.parent
+        }
+        return null
+    }
+
+    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 !== ""
+    }
+
+    DankTextField {
+        id: textField
+        width: parent.width
+        placeholderText: root.placeholder
+        onEditingFinished: {
+            root.value = text
+            const settings = findSettings()
+            if (settings) {
+                settings.saveValue(settingKey, text)
+            }
+        }
+    }
+}

Modules/Plugins/ToggleSetting.qml

@@ -0,0 +1,72 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Row {
+    id: root
+
+    required property string settingKey
+    required property string label
+    property string description: ""
+    property bool defaultValue: false
+    property bool value: defaultValue
+
+    width: parent.width
+    spacing: Theme.spacingM
+
+    Component.onCompleted: {
+        const settings = findSettings()
+        if (settings) {
+            value = settings.loadValue(settingKey, defaultValue)
+        }
+    }
+
+    onValueChanged: {
+        const settings = findSettings()
+        if (settings) {
+            settings.saveValue(settingKey, value)
+        }
+    }
+
+    function findSettings() {
+        let item = parent
+        while (item) {
+            if (item.saveValue !== undefined && item.loadValue !== undefined) {
+                return item
+            }
+            item = item.parent
+        }
+        return null
+    }
+
+    Column {
+        width: parent.width - toggle.width - Theme.spacingM
+        spacing: Theme.spacingXS
+        anchors.verticalCenter: parent.verticalCenter
+
+        StyledText {
+            text: root.label
+            font.pixelSize: Theme.fontSizeLarge
+            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 !== ""
+        }
+    }
+
+    DankToggle {
+        id: toggle
+        anchors.verticalCenter: parent.verticalCenter
+        checked: root.value
+        onToggled: isChecked => {
+            root.value = isChecked
+        }
+    }
+}

Modules/Settings/AboutTab.qml

@@ -56,7 +56,7 @@ Item {
                     }
 
                     StyledText {
-                        text: "DankMaterialShell"
+                        text: SystemUpdateService.shellVersion ? `dms ${SystemUpdateService.shellVersion}` : "dms"
                         font.pixelSize: Theme.fontSizeXLarge
                         font.weight: Font.Bold
                         color: Theme.surfaceText
@@ -257,8 +257,8 @@ Item {
                     }
 
                     StyledText {
-                        text: `DankMaterialShell is a modern desktop with a <a href="https://m3.material.io/" style="text-decoration:none; color:${Theme.primary};">material</a>-ish design.
-                        <br /><br/>The goal is to provide a high level of functionality and customization so that it can be a suitable replacement for complete desktop environments like Gnome, KDE, or Cosmic.
+                        text: `dms is a highly customizable, modern desktop shell with a <a href="https://m3.material.io/" style="text-decoration:none; color:${Theme.primary};">material 3 inspired</a> design.
+                        <br /><br/>It is built on top of <a href="https://quickshell.org" style="text-decoration:none; color:${Theme.primary};">Quickshell</a>, a QT6 framework for building desktop shells.
                         `
                         textFormat: Text.RichText
                         font.pixelSize: Theme.fontSizeMedium
@@ -478,6 +478,34 @@ Item {
                                 anchors.verticalCenter: parent.verticalCenter
                             }
                         }
+
+                        StyledText {
+                            text: "Dank Suite:"
+                            font.pixelSize: Theme.fontSizeMedium
+                            font.weight: Font.Medium
+                            color: Theme.surfaceText
+                        }
+
+                        Row {
+                            spacing: 4
+                            
+                            StyledText {
+                                text: `<a href="https://danklinux.com" style="text-decoration:none; color:${Theme.primary};">danklinux.com</a>`
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceVariantText
+                                linkColor: Theme.primary
+                                textFormat: Text.RichText
+                                onLinkActivated: url => Qt.openUrlExternally(url)
+                                anchors.verticalCenter: parent.verticalCenter
+
+                                MouseArea {
+                                    anchors.fill: parent
+                                    cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
+                                    acceptedButtons: Qt.NoButton
+                                    propagateComposedEvents: true
+                                }
+                            }
+                        }
                     }
                 }
             }

Modules/Settings/DankBarTab.qml

@@ -8,7 +8,17 @@ import qs.Widgets
 Item {
     id: dankBarTab
 
-    property var baseWidgetDefinitions: [{
+    function getWidgetsForPopup() {
+        return baseWidgetDefinitions.filter(widget => {
+            if (widget.warning && widget.warning.includes("Plugin is disabled")) {
+                return false
+            }
+            return true
+        })
+    }
+
+    property var baseWidgetDefinitions: {
+        var coreWidgets = [{
             "id": "launcherButton",
             "text": "App Launcher",
             "description": "Quick access to application launcher",
@@ -177,6 +187,24 @@ Item {
             "icon": "update",
             "enabled": SystemUpdateService.distributionSupported
         }]
+
+        // Add all available plugins (loaded and unloaded)
+        var allPlugins = PluginService.getAvailablePlugins()
+        for (var i = 0; i < allPlugins.length; i++) {
+            var plugin = allPlugins[i]
+            var isLoaded = PluginService.isPluginLoaded(plugin.id)
+            coreWidgets.push({
+                "id": plugin.id,
+                "text": plugin.name,
+                "description": plugin.description || "Plugin widget",
+                "icon": plugin.icon || "extension",
+                "enabled": isLoaded,
+                "warning": !isLoaded ? "Plugin is disabled - enable in Plugins settings to use" : undefined
+            })
+        }
+
+        return coreWidgets
+    }
     property var defaultLeftWidgets: [{
             "id": "launcherButton",
             "enabled": true
@@ -1129,7 +1157,7 @@ Item {
                                             }
                         onAddWidget: sectionId => {
                                          widgetSelectionPopup.allWidgets
-                                         = dankBarTab.baseWidgetDefinitions
+                                         = dankBarTab.getWidgetsForPopup()
                                          widgetSelectionPopup.targetSection = sectionId
                                          widgetSelectionPopup.safeOpen()
                                      }
@@ -1201,7 +1229,7 @@ Item {
                                             }
                         onAddWidget: sectionId => {
                                          widgetSelectionPopup.allWidgets
-                                         = dankBarTab.baseWidgetDefinitions
+                                         = dankBarTab.getWidgetsForPopup()
                                          widgetSelectionPopup.targetSection = sectionId
                                          widgetSelectionPopup.safeOpen()
                                      }
@@ -1273,7 +1301,7 @@ Item {
                                             }
                         onAddWidget: sectionId => {
                                          widgetSelectionPopup.allWidgets
-                                         = dankBarTab.baseWidgetDefinitions
+                                         = dankBarTab.getWidgetsForPopup()
                                          widgetSelectionPopup.targetSection = sectionId
                                          widgetSelectionPopup.safeOpen()
                                      }

Modules/Settings/PersonalizationTab.qml

@@ -520,7 +520,6 @@ Item {
                             DankDropdown {
                                 id: monitorDropdown
 
-                                width: parent.width - parent.leftPadding
                                 text: "Monitor"
                                 description: "Select monitor to configure wallpaper"
                                 currentValue: selectedMonitorName || "No monitors"
@@ -678,7 +677,6 @@ Item {
                                 property var intervalOptions: ["1 minute", "5 minutes", "15 minutes", "30 minutes", "1 hour", "1.5 hours", "2 hours", "3 hours", "4 hours", "6 hours", "8 hours", "12 hours"]
                                 property var intervalValues: [60, 300, 900, 1800, 3600, 5400, 7200, 10800, 14400, 21600, 28800, 43200]
 
-                                width: parent.width - parent.leftPadding
                                 visible: {
                                     if (SessionData.perMonitorWallpaper) {
                                         return SessionData.getMonitorCyclingSettings(selectedMonitorName).mode === "interval"
@@ -833,7 +831,6 @@ Item {
                     }
 
                     DankDropdown {
-                        width: parent.width
                         text: "Transition Effect"
                         description: "Visual effect used when wallpaper changes"
                         currentValue: {
@@ -851,8 +848,6 @@ Item {
                         width: parent.width
                         spacing: Theme.spacingS
                         visible: SessionData.wallpaperTransition === "random"
-                        leftPadding: Theme.spacingM
-                        rightPadding: Theme.spacingM
 
                         StyledText {
                             text: "Include Transitions"
@@ -866,12 +861,12 @@ Item {
                             font.pixelSize: Theme.fontSizeSmall
                             color: Theme.surfaceVariantText
                             wrapMode: Text.WordWrap
-                            width: parent.width - parent.leftPadding - parent.rightPadding
+                            width: parent.width
                         }
 
                         DankButtonGroup {
                             id: transitionGroup
-                            width: parent.width - parent.leftPadding - parent.rightPadding
+                            width: parent.width
                             selectionMode: "multi"
                             model: SessionData.availableWallpaperTransitions.filter(t => t !== "none")
                             initialSelection: SessionData.includedTransitions
@@ -959,7 +954,6 @@ Item {
 
                     DankDropdown {
                         id: personalizationMatugenPaletteDropdown
-                        width: parent.width
                         text: "Matugen Palette"
                         description: "Select the palette algorithm used for wallpaper-based colors"
                         options: Theme.availableMatugenSchemes.map(function (option) { return option.label })
@@ -1075,7 +1069,6 @@ Item {
                     }
 
                     DankDropdown {
-                        width: parent.width
                         text: "Temperature"
                         description: "Color temperature for night mode"
                         currentValue: SessionData.nightModeTemperature + "K"
@@ -1424,7 +1417,6 @@ Item {
                     }
 
                     DankDropdown {
-                        width: parent.width
                         text: "Popup Position"
                         description: "Choose where notification popups appear on screen"
                         currentValue: {
@@ -1506,7 +1498,6 @@ Item {
                     }
 
                     DankDropdown {
-                        width: parent.width
                         text: "Font Family"
                         description: "Select system font family"
                         currentValue: {
@@ -1528,7 +1519,6 @@ Item {
                     }
 
                     DankDropdown {
-                        width: parent.width
                         text: "Font Weight"
                         description: "Select font weight"
                         currentValue: {
@@ -1595,7 +1585,6 @@ Item {
                     }
 
                     DankDropdown {
-                        width: parent.width
                         text: "Monospace Font"
                         description: "Select monospace font for process list and technical displays"
                         currentValue: {

Modules/Settings/PluginsTab.qml

@@ -0,0 +1,446 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: pluginsTab
+
+    property string expandedPluginId: ""
+
+
+    DankFlickable {
+        anchors.fill: parent
+        anchors.topMargin: Theme.spacingL
+        clip: true
+        contentHeight: mainColumn.height
+        contentWidth: width
+
+        Column {
+            id: mainColumn
+
+            width: parent.width
+            spacing: Theme.spacingXL
+
+            StyledRect {
+                width: parent.width
+                height: headerColumn.implicitHeight + Theme.spacingL * 2
+                radius: Theme.cornerRadius
+                color: Theme.surfaceContainerHigh
+                border.width: 0
+
+                Column {
+                    id: headerColumn
+
+                    anchors.fill: parent
+                    anchors.margins: Theme.spacingL
+                    spacing: Theme.spacingM
+
+                    Row {
+                        width: parent.width
+                        spacing: Theme.spacingM
+
+                        DankIcon {
+                            name: "extension"
+                            size: Theme.iconSize
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        Column {
+                            anchors.verticalCenter: parent.verticalCenter
+                            spacing: Theme.spacingXS
+
+                            StyledText {
+                                text: "Plugin Management"
+                                font.pixelSize: Theme.fontSizeLarge
+                                color: Theme.surfaceText
+                                font.weight: Font.Medium
+                            }
+
+                            StyledText {
+                                text: "Manage and configure plugins for extending DMS functionality"
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.surfaceVariantText
+                            }
+                        }
+                    }
+
+                    Row {
+                        width: parent.width
+                        spacing: Theme.spacingM
+
+                        DankButton {
+                            text: "Scan for Plugins"
+                            iconName: "refresh"
+                            onClicked: {
+                                PluginService.scanPlugins()
+                                ToastService.showInfo("Scanning for plugins...")
+                            }
+                        }
+
+                        DankButton {
+                            text: "Create Plugin Directory"
+                            iconName: "create_new_folder"
+                            onClicked: {
+                                PluginService.createPluginDirectory()
+                                ToastService.showInfo("Created plugin directory: " + PluginService.pluginDirectory)
+                            }
+                        }
+                    }
+                }
+            }
+
+            StyledRect {
+                width: parent.width
+                height: directoryColumn.implicitHeight + Theme.spacingL * 2
+                radius: Theme.cornerRadius
+                color: Theme.surfaceContainerHigh
+                border.width: 0
+
+                Column {
+                    id: directoryColumn
+
+                    anchors.fill: parent
+                    anchors.margins: Theme.spacingL
+                    spacing: Theme.spacingM
+
+                    StyledText {
+                        text: "Plugin Directory"
+                        font.pixelSize: Theme.fontSizeLarge
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                    }
+
+                    StyledText {
+                        text: PluginService.pluginDirectory
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceVariantText
+                        font.family: "monospace"
+                    }
+
+                    StyledText {
+                        text: "Place plugin directories here. Each plugin should have a plugin.json manifest file."
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceVariantText
+                        wrapMode: Text.WordWrap
+                        width: parent.width
+                    }
+                }
+            }
+
+            StyledRect {
+                width: parent.width
+                height: Math.max(200, availableColumn.implicitHeight + Theme.spacingL * 2)
+                radius: Theme.cornerRadius
+                color: Theme.surfaceContainerHigh
+                border.width: 0
+
+                Column {
+                    id: availableColumn
+
+                    anchors.fill: parent
+                    anchors.margins: Theme.spacingL
+                    spacing: Theme.spacingM
+
+                    StyledText {
+                        text: "Available Plugins"
+                        font.pixelSize: Theme.fontSizeLarge
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                    }
+
+                    Column {
+                        width: parent.width
+                        spacing: Theme.spacingM
+
+                        Repeater {
+                            id: pluginRepeater
+                            model: PluginService.getAvailablePlugins()
+
+                            StyledRect {
+                                id: pluginDelegate
+                                width: parent.width
+                                height: pluginItemColumn.implicitHeight + Theme.spacingM * 2 + settingsContainer.height
+                                radius: Theme.cornerRadius
+
+                                property var pluginData: modelData
+                                property string pluginId: pluginData ? pluginData.id : ""
+                                property string pluginName: pluginData ? (pluginData.name || pluginData.id) : ""
+                                property string pluginVersion: pluginData ? (pluginData.version || "1.0.0") : ""
+                                property string pluginAuthor: pluginData ? (pluginData.author || "Unknown") : ""
+                                property string pluginDescription: pluginData ? (pluginData.description || "") : ""
+                                property string pluginIcon: pluginData ? (pluginData.icon || "extension") : "extension"
+                                property string pluginSettingsPath: pluginData ? (pluginData.settingsPath || "") : ""
+                                property var pluginPermissions: pluginData ? (pluginData.permissions || []) : []
+                                property bool hasSettings: pluginData && pluginData.settings !== undefined && pluginData.settings !== ""
+                                property bool isExpanded: pluginsTab.expandedPluginId === pluginId
+
+
+                                color: pluginMouseArea.containsMouse ? Theme.surfacePressed : (isExpanded ? Theme.surfaceContainerHighest : Theme.surfaceContainerHigh)
+                                border.width: 0
+
+                                MouseArea {
+                                    id: pluginMouseArea
+                                    anchors.fill: parent
+                                    anchors.bottomMargin: pluginDelegate.isExpanded ? settingsContainer.height : 0
+                                    hoverEnabled: true
+                                    cursorShape: pluginDelegate.hasSettings ? Qt.PointingHandCursor : Qt.ArrowCursor
+                                    onClicked: {
+                                        if (pluginDelegate.hasSettings) {
+                                            pluginsTab.expandedPluginId = pluginsTab.expandedPluginId === pluginDelegate.pluginId ? "" : pluginDelegate.pluginId
+                                        }
+                                    }
+                                }
+
+                                Column {
+                                    id: pluginItemColumn
+                                    width: parent.width
+                                    anchors.top: parent.top
+                                    anchors.left: parent.left
+                                    anchors.right: parent.right
+                                    anchors.margins: Theme.spacingM
+                                    spacing: Theme.spacingM
+
+                                    Row {
+                                        width: parent.width
+                                        spacing: Theme.spacingM
+
+                                        DankIcon {
+                                            name: pluginDelegate.pluginIcon
+                                            size: Theme.iconSize
+                                            color: PluginService.isPluginLoaded(pluginDelegate.pluginId) ? Theme.primary : Theme.surfaceVariantText
+                                            anchors.verticalCenter: parent.verticalCenter
+                                        }
+
+                                        Column {
+                                            width: parent.width - Theme.iconSize - Theme.spacingM - toggleRow.width - Theme.spacingM
+                                            spacing: Theme.spacingXS
+                                            anchors.verticalCenter: parent.verticalCenter
+
+                                            Row {
+                                                spacing: Theme.spacingXS
+                                                width: parent.width
+
+                                                StyledText {
+                                                    text: pluginDelegate.pluginName
+                                                    font.pixelSize: Theme.fontSizeLarge
+                                                    color: Theme.surfaceText
+                                                    font.weight: Font.Medium
+                                                    anchors.verticalCenter: parent.verticalCenter
+                                                }
+
+                                                DankIcon {
+                                                    name: pluginDelegate.hasSettings ? (pluginDelegate.isExpanded ? "expand_less" : "expand_more") : ""
+                                                    size: 16
+                                                    color: pluginDelegate.hasSettings ? Theme.primary : "transparent"
+                                                    anchors.verticalCenter: parent.verticalCenter
+                                                    visible: pluginDelegate.hasSettings
+                                                }
+                                            }
+
+                                            StyledText {
+                                                text: "v" + pluginDelegate.pluginVersion + " by " + pluginDelegate.pluginAuthor
+                                                font.pixelSize: Theme.fontSizeSmall
+                                                color: Theme.surfaceVariantText
+                                                width: parent.width
+                                            }
+                                        }
+
+                                        Row {
+                                            id: toggleRow
+                                            anchors.verticalCenter: parent.verticalCenter
+                                            spacing: Theme.spacingXS
+
+                                            Rectangle {
+                                                width: 28
+                                                height: 28
+                                                radius: 14
+                                                color: reloadArea.containsMouse ? Theme.surfaceContainerHighest : "transparent"
+                                                visible: PluginService.isPluginLoaded(pluginDelegate.pluginId)
+
+                                                DankIcon {
+                                                    anchors.centerIn: parent
+                                                    name: "refresh"
+                                                    size: 16
+                                                    color: reloadArea.containsMouse ? Theme.primary : Theme.surfaceVariantText
+                                                }
+
+                                                MouseArea {
+                                                    id: reloadArea
+                                                    anchors.fill: parent
+                                                    hoverEnabled: true
+                                                    cursorShape: Qt.PointingHandCursor
+                                                    onClicked: {
+                                                        const currentPluginId = pluginDelegate.pluginId
+                                                        const currentPluginName = pluginDelegate.pluginName
+                                                        pluginsTab.isReloading = true
+                                                        if (PluginService.reloadPlugin(currentPluginId)) {
+                                                            ToastService.showInfo("Plugin reloaded: " + currentPluginName)
+                                                        } else {
+                                                            ToastService.showError("Failed to reload plugin: " + currentPluginName)
+                                                            pluginsTab.isReloading = false
+                                                        }
+                                                    }
+                                                }
+                                            }
+
+                                            DankToggle {
+                                                id: pluginToggle
+                                                anchors.verticalCenter: parent.verticalCenter
+                                                checked: PluginService.isPluginLoaded(pluginDelegate.pluginId)
+                                                onToggled: isChecked => {
+                                                    const currentPluginId = pluginDelegate.pluginId
+                                                    const currentPluginName = pluginDelegate.pluginName
+
+                                                    if (isChecked) {
+                                                        if (PluginService.enablePlugin(currentPluginId)) {
+                                                            ToastService.showInfo("Plugin enabled: " + currentPluginName)
+                                                        } else {
+                                                            ToastService.showError("Failed to enable plugin: " + currentPluginName)
+                                                            checked = false
+                                                        }
+                                                    } else {
+                                                        if (PluginService.disablePlugin(currentPluginId)) {
+                                                            ToastService.showInfo("Plugin disabled: " + currentPluginName)
+                                                            if (pluginDelegate.isExpanded) {
+                                                                pluginsTab.expandedPluginId = ""
+                                                            }
+                                                        } else {
+                                                            ToastService.showError("Failed to disable plugin: " + currentPluginName)
+                                                            checked = true
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+
+                                    StyledText {
+                                        width: parent.width
+                                        text: pluginDelegate.pluginDescription
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                        wrapMode: Text.WordWrap
+                                        visible: pluginDelegate.pluginDescription !== ""
+                                    }
+
+                                    Flow {
+                                        width: parent.width
+                                        spacing: Theme.spacingXS
+                                        visible: pluginDelegate.pluginPermissions && Array.isArray(pluginDelegate.pluginPermissions) && pluginDelegate.pluginPermissions.length > 0
+
+                                        Repeater {
+                                            model: pluginDelegate.pluginPermissions
+
+                                            Rectangle {
+                                                height: 20
+                                                width: permissionText.implicitWidth + Theme.spacingXS * 2
+                                                radius: 10
+                                                color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
+                                                border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
+                                                border.width: 1
+
+                                                StyledText {
+                                                    id: permissionText
+                                                    anchors.centerIn: parent
+                                                    text: modelData
+                                                    font.pixelSize: Theme.fontSizeSmall - 1
+                                                    color: Theme.primary
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+
+                                // Settings container
+                                Item {
+                                    id: settingsContainer
+                                    anchors.bottom: parent.bottom
+                                    anchors.left: parent.left
+                                    anchors.right: parent.right
+                                    height: pluginDelegate.isExpanded && pluginDelegate.hasSettings ? (settingsLoader.item ? settingsLoader.item.implicitHeight + Theme.spacingL * 2 : 0) : 0
+                                    clip: true
+
+                                    Rectangle {
+                                        anchors.fill: parent
+                                        color: Theme.surfaceContainerHighest
+                                        radius: Theme.cornerRadius
+                                        anchors.topMargin: Theme.spacingXS
+                                        border.width: 0
+                                    }
+
+                                    Loader {
+                                        id: settingsLoader
+                                        anchors.fill: parent
+                                        anchors.margins: Theme.spacingL
+                                        active: pluginDelegate.isExpanded && pluginDelegate.hasSettings && PluginService.isPluginLoaded(pluginDelegate.pluginId)
+                                        asynchronous: false
+
+                                        source: {
+                                            if (active && pluginDelegate.pluginSettingsPath) {
+                                                var path = pluginDelegate.pluginSettingsPath
+                                                if (!path.startsWith("file://")) {
+                                                    path = "file://" + path
+                                                }
+                                                return path
+                                            }
+                                            return ""
+                                        }
+
+                                        onLoaded: {
+                                            if (item && typeof PluginService !== "undefined") {
+                                                item.pluginService = PluginService
+                                            }
+                                        }
+                                    }
+
+                                    StyledText {
+                                        anchors.centerIn: parent
+                                        text: !PluginService.isPluginLoaded(pluginDelegate.pluginId) ?
+                                              "Enable plugin to access settings" :
+                                              (settingsLoader.status === Loader.Error ?
+                                               "Failed to load settings" :
+                                               "No configurable settings")
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                        visible: pluginDelegate.isExpanded && (!settingsLoader.active || settingsLoader.status === Loader.Error)
+                                    }
+                                }
+                            }
+                        }
+
+                        StyledText {
+                            width: parent.width
+                            text: "No plugins found.\nPlace plugins in " + PluginService.pluginDirectory
+                            font.pixelSize: Theme.fontSizeMedium
+                            color: Theme.surfaceVariantText
+                            horizontalAlignment: Text.AlignHCenter
+                            visible: pluginRepeater.model.length === 0
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    property bool isReloading: false
+
+    Connections {
+        target: PluginService
+        function onPluginLoaded() {
+            pluginRepeater.model = PluginService.getAvailablePlugins()
+            if (isReloading) {
+                isReloading = false
+            }
+        }
+        function onPluginUnloaded() {
+            pluginRepeater.model = PluginService.getAvailablePlugins()
+            if (!isReloading && pluginsTab.expandedPluginId !== "" && !PluginService.isPluginLoaded(pluginsTab.expandedPluginId)) {
+                pluginsTab.expandedPluginId = ""
+            }
+        }
+    }
+}

Modules/Settings/ThemeColorsTab.qml

@@ -651,7 +651,6 @@ Item {
 
                             DankDropdown {
                                 id: matugenPaletteDropdown
-                                width: parent.width
                                 text: "Matugen Palette"
                                 description: "Select the palette algorithm used for wallpaper-based colors"
                                 options: Theme.availableMatugenSchemes.map(function (option) { return option.label })
@@ -993,7 +992,6 @@ Item {
                         }
 
                         DankDropdown {
-                            width: parent.width - Theme.iconSize - Theme.spacingXS
                             anchors.verticalCenter: parent.verticalCenter
                             text: "Icon Theme"
                             description: "DankShell & System Icons\n(requires restart)"

Modules/Settings/TimeTab.qml

@@ -121,7 +121,6 @@ Item {
                     }
 
                     DankDropdown {
-                        width: parent.width
                         height: 50
                         text: "Top Bar Format"
                         description: "Preview: " + (SettingsData.clockDateFormat ? new Date().toLocaleDateString(Qt.locale(), SettingsData.clockDateFormat) : new Date().toLocaleDateString(Qt.locale(), "ddd d"))
@@ -185,7 +184,6 @@ Item {
                     }
 
                     DankDropdown {
-                        width: parent.width
                         height: 50
                         text: "Lock Screen Format"
                         description: "Preview: " + (SettingsData.lockDateFormat ? new Date().toLocaleDateString(Qt.locale(), SettingsData.lockDateFormat) : new Date().toLocaleDateString(Qt.locale(), Locale.LongFormat))

Modules/Settings/WidgetSelectionPopup.qml

@@ -21,23 +21,23 @@ Popup {
             filteredWidgets = allWidgets.slice()
             return
         }
-        
+
         var filtered = []
         var query = searchQuery.toLowerCase()
-        
+
         for (var i = 0; i < allWidgets.length; i++) {
             var widget = allWidgets[i]
             var text = widget.text ? widget.text.toLowerCase() : ""
             var description = widget.description ? widget.description.toLowerCase() : ""
             var id = widget.id ? widget.id.toLowerCase() : ""
-            
-            if (text.indexOf(query) !== -1 || 
-                description.indexOf(query) !== -1 || 
+
+            if (text.indexOf(query) !== -1 ||
+                description.indexOf(query) !== -1 ||
                 id.indexOf(query) !== -1) {
                 filtered.push(widget)
             }
         }
-        
+
         filteredWidgets = filtered
         selectedIndex = -1
         keyboardNavigationActive = false

Modules/Settings/WidgetsTabSection.qml

@@ -142,13 +142,14 @@ Column {
                         spacing: Theme.spacingXS
 
                         Item {
-                            width: 120
+                            width: 60
                             height: 32
                             visible: modelData.id === "gpuTemp"
 
                             DankDropdown {
                                 id: gpuDropdown
                                 anchors.fill: parent
+                                popupWidth: -1
                                 currentValue: {
                                     var selectedIndex = modelData.selectedGpuIndex
                                             !== undefined ? modelData.selectedGpuIndex : 0
@@ -223,12 +224,7 @@ Column {
                         Item {
                             width: 32
                             height: 32
-                            visible: (modelData.warning !== undefined
-                                      && modelData.warning !== "")
-                                     && (modelData.id === "cpuUsage"
-                                         || modelData.id === "memUsage"
-                                         || modelData.id === "cpuTemp"
-                                         || modelData.id === "gpuTemp")
+                            visible: modelData.warning !== undefined && modelData.warning !== ""
 
                             DankIcon {
                                 name: "warning"

PLUGINS/ExampleEmojiPlugin/EmojiSettings.qml

@@ -0,0 +1,97 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+import qs.Modules.Plugins
+
+PluginSettings {
+    id: root
+    pluginId: "exampleEmojiPlugin"
+
+    // Header section to explain what this plugin does
+    StyledText {
+        width: parent.width
+        text: "Emoji Cycler Settings"
+        font.pixelSize: Theme.fontSizeLarge
+        font.weight: Font.Bold
+        color: Theme.surfaceText
+    }
+
+    StyledText {
+        width: parent.width
+        text: "Configure which emojis appear in your bar, how quickly they cycle, and how many show at once."
+        font.pixelSize: Theme.fontSizeSmall
+        color: Theme.surfaceVariantText
+        wrapMode: Text.WordWrap
+    }
+
+    // Dropdown to select which emoji set to use
+    SelectionSetting {
+        settingKey: "emojiSet"
+        label: "Emoji Set"
+        description: "Choose which collection of emojis to cycle through"
+        options: [
+            {label: "Happy & Sad", value: "happySad"},
+            {label: "Hearts", value: "hearts"},
+            {label: "Hand Gestures", value: "hands"},
+            {label: "All Mixed", value: "mixed"}
+        ]
+        defaultValue: "happySad"
+
+        // Update the actual emoji array when selection changes
+        onValueChanged: {
+            const sets = {
+                "happySad": ["😊", "😢", "😂", "😭", "😍", "😡"],
+                "hearts": ["❤️", "🧡", "💛", "💚", "💙", "💜", "🖤", "🤍"],
+                "hands": ["👍", "👎", "👊", "✌️", "🤘", "👌", "✋", "🤚"],
+                "mixed": ["😊", "❤️", "👍", "🎉", "🔥", "✨", "🌟", "💯"]
+            }
+            const newEmojis = sets[value] || sets["happySad"]
+            root.saveValue("emojis", newEmojis)
+        }
+
+        Component.onCompleted: {
+            // Initialize the emojis array on first load
+            const currentSet = value || defaultValue
+            const sets = {
+                "happySad": ["😊", "😢", "😂", "😭", "😍", "😡"],
+                "hearts": ["❤️", "🧡", "💛", "💚", "💙", "💜", "🖤", "🤍"],
+                "hands": ["👍", "👎", "👊", "✌️", "🤘", "👌", "✋", "🤚"],
+                "mixed": ["😊", "❤️", "👍", "🎉", "🔥", "✨", "🌟", "💯"]
+            }
+            const emojis = sets[currentSet] || sets["happySad"]
+            root.saveValue("emojis", emojis)
+        }
+    }
+
+    // Slider to control how fast emojis cycle (in milliseconds)
+    SliderSetting {
+        settingKey: "cycleInterval"
+        label: "Cycle Speed"
+        description: "How quickly emojis rotate (in seconds)"
+        defaultValue: 3000
+        minimum: 500
+        maximum: 10000
+        unit: "ms"
+        leftIcon: "schedule"
+    }
+
+    // Slider to control max emojis shown in the bar
+    SliderSetting {
+        settingKey: "maxBarEmojis"
+        label: "Max Bar Emojis"
+        description: "Maximum number of emojis to display in the bar at once"
+        defaultValue: 3
+        minimum: 1
+        maximum: 8
+        unit: ""
+        rightIcon: "emoji_emotions"
+    }
+
+    StyledText {
+        width: parent.width
+        text: "💡 Tip: Click the emoji widget in your bar to open the emoji picker and copy any emoji to your clipboard!"
+        font.pixelSize: Theme.fontSizeSmall
+        color: Theme.surfaceVariantText
+        wrapMode: Text.WordWrap
+    }
+}

PLUGINS/ExampleEmojiPlugin/EmojiWidget.qml

@@ -0,0 +1,149 @@
+import QtQuick
+import Quickshell
+import qs.Common
+import qs.Services
+import qs.Widgets
+import qs.Modules.Plugins
+
+PluginComponent {
+    id: root
+
+    property var enabledEmojis: pluginData.emojis || ["😊", "😢", "❤️"]
+    property int cycleInterval: pluginData.cycleInterval || 3000
+    property int maxBarEmojis: pluginData.maxBarEmojis || 3
+
+    property int currentIndex: 0
+    property var displayedEmojis: []
+
+    Timer {
+        interval: root.cycleInterval
+        running: true
+        repeat: true
+        onTriggered: {
+            if (root.enabledEmojis.length > 0) {
+                root.currentIndex = (root.currentIndex + 1) % root.enabledEmojis.length
+                root.updateDisplayedEmojis()
+            }
+        }
+    }
+
+    function updateDisplayedEmojis() {
+        const maxToShow = Math.min(root.maxBarEmojis, root.enabledEmojis.length)
+        let emojis = []
+        for (let i = 0; i < maxToShow; i++) {
+            const idx = (root.currentIndex + i) % root.enabledEmojis.length
+            emojis.push(root.enabledEmojis[idx])
+        }
+        root.displayedEmojis = emojis
+    }
+
+    Component.onCompleted: {
+        updateDisplayedEmojis()
+    }
+
+    onEnabledEmojisChanged: updateDisplayedEmojis()
+    onMaxBarEmojisChanged: updateDisplayedEmojis()
+
+    horizontalBarPill: Component {
+        Row {
+            id: emojiRow
+            spacing: Theme.spacingXS
+
+            Repeater {
+                model: root.displayedEmojis
+                StyledText {
+                    text: modelData
+                    font.pixelSize: Theme.fontSizeLarge
+                }
+            }
+        }
+    }
+
+    verticalBarPill: Component {
+        Column {
+            id: emojiColumn
+            spacing: Theme.spacingXS
+
+            Repeater {
+                model: root.displayedEmojis
+                StyledText {
+                    text: modelData
+                    font.pixelSize: Theme.fontSizeMedium
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
+        }
+    }
+
+    popoutContent: Component {
+        PopoutComponent {
+            id: popoutColumn
+
+            headerText: "Emoji Picker"
+            detailsText: "Click an emoji to copy it to clipboard"
+            showCloseButton: true
+
+            property var allEmojis: [
+                "😀", "😃", "😄", "😁", "😆", "😅", "🤣", "😂", "🙂", "🙃",
+                "😉", "😊", "😇", "🥰", "😍", "🤩", "😘", "😗", "😚", "😙",
+                "😋", "😛", "😜", "🤪", "😝", "🤑", "🤗", "🤭", "🤫", "🤔",
+                "🤐", "🤨", "😐", "😑", "😶", "😏", "😒", "🙄", "😬", "🤥",
+                "😌", "😔", "😪", "🤤", "😴", "😷", "🤒", "🤕", "🤢", "🤮",
+                "🤧", "🥵", "🥶", "😶‍🌫️", "😵", "😵‍💫", "🤯", "🤠", "🥳", "😎",
+                "🤓", "🧐", "😕", "😟", "🙁", "☹️", "😮", "😯", "😲", "😳",
+                "🥺", "😦", "😧", "😨", "😰", "😥", "😢", "😭", "😱", "😖",
+                "😣", "😞", "😓", "😩", "😫", "🥱", "😤", "😡", "😠", "🤬",
+                "❤️", "🧡", "💛", "💚", "💙", "💜", "🖤", "🤍", "🤎", "💔",
+                "❤️‍🔥", "❤️‍🩹", "💕", "💞", "💓", "💗", "💖", "💘", "💝", "💟",
+                "👍", "👎", "👊", "✊", "🤛", "🤜", "🤞", "✌️", "🤟", "🤘",
+                "👌", "🤌", "🤏", "👈", "👉", "👆", "👇", "☝️", "✋", "🤚"
+            ]
+
+            Item {
+                width: parent.width
+                implicitHeight: root.popoutHeight - popoutColumn.headerHeight - popoutColumn.detailsHeight - Theme.spacingXL
+
+                DankGridView {
+                    id: emojiGrid
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    width: Math.floor(parent.width / 50) * 50
+                    height: parent.height
+                    clip: true
+                    cellWidth: 50
+                    cellHeight: 50
+                    model: popoutColumn.allEmojis
+
+                    delegate: StyledRect {
+                        width: 45
+                        height: 45
+                        radius: Theme.cornerRadius
+                        color: emojiMouseArea.containsMouse ? Theme.surfaceContainerHighest : Theme.surfaceContainerHigh
+                        border.width: 0
+
+                        StyledText {
+                            anchors.centerIn: parent
+                            text: modelData
+                            font.pixelSize: Theme.fontSizeXLarge
+                        }
+
+                        MouseArea {
+                            id: emojiMouseArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+
+                            onClicked: {
+                                Quickshell.execDetached(["sh", "-c", "echo -n '" + modelData + "' | wl-copy"])
+                                ToastService.showInfo("Copied " + modelData + " to clipboard")
+                                popoutColumn.closePopout()
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    popoutWidth: 400
+    popoutHeight: 500
+}

PLUGINS/ExampleEmojiPlugin/README.md

@@ -0,0 +1,56 @@
+# Emoji Cycler Plugin
+
+An example dms plugin that displays cycling emojis in your bar with an emoji picker popout.
+
+## Features
+
+- **Cycling Emojis**: Automatically rotates through your selected emoji set in the bar
+- **Emoji Picker**: Click the widget to open a grid of 120+ emojis
+- **Copy to Clipboard**: Click any emoji in the picker to copy it to clipboard (uses `wl-copy`)
+- **Customizable**: Choose emoji sets, cycle speed, and max emojis shown
+
+## Installation
+
+1. Copy this directory to `~/.config/DankMaterialShell/plugins/ExampleEmojiPlugin`
+2. Open DMS Settings → Plugins
+3. Click "Scan for Plugins"
+4. Enable "Emoji Cycler"
+5. Add `exampleEmojiPlugin` to your DankBar widget list
+
+## Settings
+
+### Emoji Set
+Choose from different emoji collections:
+- **Happy & Sad**: Mix of emotional faces
+- **Hearts**: Various colored hearts
+- **Hand Gestures**: Thumbs up, peace signs, etc.
+- **All Mixed**: A bit of everything
+
+### Cycle Speed
+Control how fast emojis rotate (500ms - 10000ms)
+
+### Max Bar Emojis
+How many emojis to display at once (1-8)
+
+## Usage
+
+**In the bar**: Watch emojis cycle through automatically
+**Click the widget**: Opens emoji picker with 120+ emojis
+**Click any emoji**: Copies it to clipboard and shows toast
+
+## Requirements
+
+- `wl-copy` (for clipboard support on Wayland)
+
+## Example Code Highlights
+
+This plugin demonstrates:
+- Using `PluginComponent` for bar integration
+- `SelectionSetting`, `SliderSetting` for configuration
+- Timer-based animation
+- Popout content with grid layout
+- External command execution (`Quickshell.execDetached`)
+- Toast notifications (`ToastService.show`)
+- Dynamic settings loading/saving
+
+Perfect template for creating your own DMS plugins!

PLUGINS/ExampleEmojiPlugin/plugin.json

@@ -0,0 +1,14 @@
+{
+    "id": "exampleEmojiPlugin",
+    "name": "Emoji Cycler",
+    "description": "Display cycling emojis in your bar with a handy emoji picker popout",
+    "version": "1.0.0",
+    "author": "AvengeMedia",
+    "icon": "mood",
+    "component": "./EmojiWidget.qml",
+    "settings": "./EmojiSettings.qml",
+    "permissions": [
+        "settings_read",
+        "settings_write"
+    ]
+}

PLUGINS/README.md

@@ -0,0 +1,729 @@
+# Plugin System
+
+The DMS shell includes an experimental plugin system that allows extending functionality through self-contained, dynamically-loaded QML components.
+
+## Overview
+
+The plugin system enables developers to create custom widgets that can be displayed in the DankBar alongside built-in widgets. Plugins are discovered, loaded, and managed through the **PluginService**, providing a clean separation between core shell functionality and user extensions.
+
+## Architecture
+
+### Core Components
+
+1. **PluginService** (`Services/PluginService.qml`)
+   - Singleton service managing plugin lifecycle
+   - Discovers plugins from `$CONFIGPATH/DankMaterialShell/plugins/`
+   - Handles loading, unloading, and state management
+   - Provides data persistence for plugin settings
+
+2. **PluginsTab** (`Modules/Settings/PluginsTab.qml`)
+   - UI for managing available plugins
+   - Access plugin settings
+
+3. **PluginsTab Settings** (`Modules/Settings/PluginsTab.qml`)
+   - Accordion-style plugin configuration interface
+   - Dynamically loads plugin settings components inline
+   - Provides consistent settings interface with proper focus handling
+
+4. **DankBar Integration** (`Modules/DankBar/DankBar.qml`)
+   - Renders plugin widgets in the bar
+   - Merges plugin components with built-in widgets
+   - Supports left, center, and right sections
+   - Supports any dankbar position (top/left/right/bottom)
+
+## Plugin Structure
+
+Each plugin must be a directory in `$CONFIGPATH/DankMaterialShell/plugins/` containing:
+
+```
+$CONFIGPATH/DankMaterialShell/plugins/YourPlugin/
+├── plugin.json          # Required: Plugin manifest
+├── YourWidget.qml       # Required: Widget component
+├── YourSettings.qml     # Optional: Settings UI
+└── *.js                 # Optional: JavaScript utilities
+```
+
+### Plugin Manifest (plugin.json)
+
+The manifest file defines plugin metadata and configuration:
+
+```json
+{
+    "id": "yourPlugin",
+    "name": "Your Plugin Name",
+    "description": "Brief description of what your plugin does",
+    "version": "1.0.0",
+    "author": "Your Name",
+    "icon": "material_icon_name",
+    "component": "./YourWidget.qml",
+    "settings": "./YourSettings.qml",
+    "permissions": [
+        "settings_read",
+        "settings_write"
+    ]
+}
+```
+
+**Required Fields:**
+- `id`: Unique plugin identifier (camelCase, no spaces)
+- `name`: Human-readable plugin name
+- `component`: Relative path to widget QML file
+
+**Optional Fields:**
+- `description`: Short description of plugin functionality (displayed in UI)
+- `version`: Semantic version string (displayed in UI)
+- `author`: Plugin creator name (displayed in UI)
+- `icon`: Material Design icon name (displayed in UI)
+- `settings`: Path to settings component (enables settings UI)
+- `permissions`: Required capabilities (enforced by PluginSettings component)
+
+**Permissions:**
+
+The plugin system enforces permissions when settings are accessed:
+- `settings_read`: Required to read plugin settings (currently not enforced)
+- `settings_write`: **Required** to use PluginSettings component and save settings
+
+If your plugin includes a settings component but doesn't declare `settings_write` permission, users will see an error message instead of the settings UI.
+
+### Widget Component
+
+The main widget component uses the **PluginComponent** wrapper which provides automatic property injection and bar integration:
+
+```qml
+import QtQuick
+import qs.Common
+import qs.Widgets
+import qs.Modules.Plugins
+
+PluginComponent {
+    // Define horizontal bar pill, for top and bottom DankBar positions (optional)
+    horizontalBarPill: Component {
+        StyledRect {
+            width: content.implicitWidth + Theme.spacingM * 2
+            height: parent.widgetThickness
+            radius: Theme.cornerRadius
+            color: Theme.surfaceContainerHigh
+
+            StyledText {
+                id: content
+                anchors.centerIn: parent
+                text: "Hello World"
+                color: Theme.surfaceText
+                font.pixelSize: Theme.fontSizeMedium
+            }
+        }
+    }
+
+    // Define vertical bar pill, for left and right DankBar positions (optional)
+    verticalBarPill: Component {
+        // Same as horizontal but optimized for vertical layout
+    }
+
+    // Define popout content, opens when clicking the bar pill (optional)
+    popoutContent: Component {
+        PopoutComponent {
+            headerText: "My Plugin"
+            detailsText: "Optional description text goes here"
+            showCloseButton: true
+
+            // Your popout content goes here
+            Column {
+                width: parent.width
+                spacing: Theme.spacingM
+
+                StyledText {
+                    text: "Popout Content"
+                    font.pixelSize: Theme.fontSizeLarge
+                    color: Theme.surfaceText
+                }
+            }
+        }
+    }
+
+    // Popout dimensions (required if popoutContent is set)
+    popoutWidth: 400
+    popoutHeight: 300
+}
+```
+
+**PluginComponent Properties (automatically injected):**
+- `axis`: Bar axis information (horizontal/vertical)
+- `section`: Bar section ("left", "center", "right")
+- `parentScreen`: Screen reference for multi-monitor support
+- `widgetThickness`: Recommended widget size perpendicular to bar
+- `barThickness`: Bar thickness parallel to edge
+
+**Component Options:**
+- `horizontalBarPill`: Component shown in horizontal bars
+- `verticalBarPill`: Component shown in vertical bars
+- `popoutContent`: Optional popout window content
+- `popoutWidth`: Popout window width
+- `popoutHeight`: Popout window height
+
+The PluginComponent automatically handles:
+- Bar orientation detection
+- Click handlers for popouts
+- Proper positioning and anchoring
+- Theme integration
+
+### PopoutComponent
+
+PopoutComponent provides a consistent header/content layout for plugin popouts:
+
+```qml
+import qs.Modules.Plugins
+
+PopoutComponent {
+    headerText: "Header Title"        // Main header text (bold, large)
+    detailsText: "Description text"   // Optional description (smaller, gray)
+    showCloseButton: true             // Show X button in top-right
+
+    // Access to exposed properties for dynamic sizing
+    readonly property int headerHeight    // Height of header area
+    readonly property int detailsHeight   // Height of description area
+
+    // Your content here - use parent.width for full width
+    // Calculate available height: root.popoutHeight - headerHeight - detailsHeight - spacing
+    DankGridView {
+        width: parent.width
+        height: parent.height
+        // ...
+    }
+}
+```
+
+**PopoutComponent Properties:**
+- `headerText`: Main header text (optional, hidden if empty)
+- `detailsText`: Description text below header (optional, hidden if empty)
+- `showCloseButton`: Show close button in header (default: false)
+- `closePopout`: Function to close popout (auto-injected by PluginPopout)
+- `headerHeight`: Readonly height of header (0 if not visible)
+- `detailsHeight`: Readonly height of description (0 if not visible)
+
+The component automatically handles spacing and layout. Content children are rendered below the description with proper padding.
+
+### Settings Component
+
+Optional settings UI loaded inline in the PluginsTab accordion interface. Use the simplified settings API with auto-storage components:
+
+```qml
+import QtQuick
+import qs.Common
+import qs.Widgets
+import qs.Modules.Plugins
+
+PluginSettings {
+    id: root
+    pluginId: "yourPlugin"
+
+    StringSetting {
+        settingKey: "apiKey"
+        label: "API Key"
+        description: "Your API key for accessing the service"
+        placeholder: "Enter API key..."
+    }
+
+    ToggleSetting {
+        settingKey: "notifications"
+        label: "Enable Notifications"
+        description: "Show desktop notifications for updates"
+        defaultValue: true
+    }
+
+    SelectionSetting {
+        settingKey: "updateInterval"
+        label: "Update Interval"
+        description: "How often to refresh data"
+        options: [
+            {label: "1 minute", value: "60"},
+            {label: "5 minutes", value: "300"},
+            {label: "15 minutes", value: "900"}
+        ]
+        defaultValue: "300"
+    }
+
+    ListSetting {
+        id: itemList
+        settingKey: "items"
+        label: "Saved Items"
+        description: "List of configured items"
+        delegate: Component {
+            StyledRect {
+                width: parent.width
+                height: 40
+                radius: Theme.cornerRadius
+                color: Theme.surfaceContainerHigh
+
+                StyledText {
+                    anchors.left: parent.left
+                    anchors.leftMargin: Theme.spacingM
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: modelData.name
+                    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: itemList.removeItem(index)
+                    }
+                }
+            }
+        }
+    }
+}
+```
+
+**Available Setting Components:**
+
+All settings automatically save on change and load on component creation.
+
+**How Default Values Work:**
+
+Each setting component has a `defaultValue` property that is used when no saved value exists. Define sensible defaults in your settings UI:
+
+```qml
+StringSetting {
+    settingKey: "apiKey"
+    defaultValue: ""  // Empty string if no key saved
+}
+
+ToggleSetting {
+    settingKey: "enabled"
+    defaultValue: true  // Enabled by default
+}
+
+ListSettingWithInput {
+    settingKey: "locations"
+    defaultValue: []  // Empty array if no locations saved
+}
+```
+
+1. **PluginSettings** - Root wrapper for all plugin settings
+   - `pluginId`: Your plugin ID (required)
+   - Auto-handles storage and provides saveValue/loadValue to children
+   - Place all other setting components inside this wrapper
+
+2. **StringSetting** - Text input field
+   - `settingKey`: Storage key (required)
+   - `label`: Display label (required)
+   - `description`: Help text (optional)
+   - `placeholder`: Input placeholder (optional)
+   - `defaultValue`: Default value (optional, default: `""`)
+   - Layout: Vertical stack (label, description, input field)
+
+3. **ToggleSetting** - Boolean toggle switch
+   - `settingKey`: Storage key (required)
+   - `label`: Display label (required)
+   - `description`: Help text (optional)
+   - `defaultValue`: Default boolean (optional, default: `false`)
+   - Layout: Horizontal (label/description left, toggle right)
+
+4. **SelectionSetting** - Dropdown menu
+   - `settingKey`: Storage key (required)
+   - `label`: Display label (required)
+   - `description`: Help text (optional)
+   - `options`: Array of `{label, value}` objects or simple strings (required)
+   - `defaultValue`: Default value (optional, default: `""`)
+   - Layout: Horizontal (label/description left, dropdown right)
+   - Stores the `value` field, displays the `label` field
+
+5. **ListSetting** - Manage list of items (manual add/remove)
+   - `settingKey`: Storage key (required)
+   - `label`: Display label (required)
+   - `description`: Help text (optional)
+   - `defaultValue`: Default array (optional, default: `[]`)
+   - `delegate`: Custom item delegate Component (optional)
+   - `addItem(item)`: Add item to list
+   - `removeItem(index)`: Remove item from list
+   - Use when you need custom UI for adding items
+
+6. **ListSettingWithInput** - Complete list management with built-in form
+   - `settingKey`: Storage key (required)
+   - `label`: Display label (required)
+   - `description`: Help text (optional)
+   - `defaultValue`: Default array (optional, default: `[]`)
+   - `fields`: Array of field definitions (required)
+     - `id`: Field ID in saved object (required)
+     - `label`: Column header text (required)
+     - `placeholder`: Input placeholder (optional)
+     - `width`: Column width in pixels (optional, default 200)
+     - `required`: Must have value to add (optional, default false)
+     - `default`: Default value if empty (optional)
+   - Automatically generates:
+     - Column headers from field labels
+     - Input fields with placeholders
+     - Add button with validation
+     - List display showing all field values
+     - Remove buttons for each item
+   - Best for collecting structured data (servers, locations, etc.)
+
+**Complete Settings Example:**
+
+```qml
+import QtQuick
+import qs.Common
+import qs.Widgets
+import qs.Modules.Plugins
+
+PluginSettings {
+    pluginId: "myPlugin"
+
+    StyledText {
+        width: parent.width
+        text: "General Settings"
+        font.pixelSize: Theme.fontSizeLarge
+        font.weight: Font.Bold
+        color: Theme.surfaceText
+    }
+
+    StringSetting {
+        settingKey: "apiKey"
+        label: "API Key"
+        description: "Your service API key"
+        placeholder: "sk-..."
+        defaultValue: ""
+    }
+
+    ToggleSetting {
+        settingKey: "enabled"
+        label: "Enable Feature"
+        description: "Turn this feature on or off"
+        defaultValue: true
+    }
+
+    SelectionSetting {
+        settingKey: "theme"
+        label: "Theme"
+        description: "Choose your preferred theme"
+        options: [
+            {label: "Dark", value: "dark"},
+            {label: "Light", value: "light"},
+            {label: "Auto", value: "auto"}
+        ]
+        defaultValue: "dark"
+    }
+
+    ListSettingWithInput {
+        settingKey: "locations"
+        label: "Locations"
+        description: "Track multiple locations"
+        defaultValue: []
+        fields: [
+            {id: "name", label: "Name", placeholder: "Home", width: 150, required: true},
+            {id: "timezone", label: "Timezone", placeholder: "America/New_York", width: 200, required: true}
+        ]
+    }
+}
+```
+
+**Key Benefits:**
+- Zero boilerplate - just define your settings
+- Automatic persistence to `settings.json`
+- Clean, consistent UI across all plugins
+- No manual `pluginService` calls needed
+- Proper layout and spacing handled automatically
+
+## PluginService API
+
+### Properties
+
+```qml
+PluginService.pluginDirectory: string
+// Path to plugins directory ($CONFIGPATH/DankMaterialShell/plugins)
+
+PluginService.availablePlugins: object
+// Map of all discovered plugins {pluginId: pluginInfo}
+
+PluginService.loadedPlugins: object
+// Map of currently loaded plugins {pluginId: pluginInfo}
+
+PluginService.pluginWidgetComponents: object
+// Map of loaded widget components {pluginId: Component}
+```
+
+### Functions
+
+```qml
+// Plugin Management
+PluginService.loadPlugin(pluginId: string): bool
+PluginService.unloadPlugin(pluginId: string): bool
+PluginService.reloadPlugin(pluginId: string): bool
+PluginService.enablePlugin(pluginId: string): bool
+PluginService.disablePlugin(pluginId: string): bool
+
+// Plugin Discovery
+PluginService.scanPlugins(): void
+PluginService.getAvailablePlugins(): array
+PluginService.getLoadedPlugins(): array
+PluginService.isPluginLoaded(pluginId: string): bool
+PluginService.getWidgetComponents(): object
+
+// Data Persistence
+PluginService.savePluginData(pluginId: string, key: string, value: any): bool
+PluginService.loadPluginData(pluginId: string, key: string, defaultValue: any): any
+```
+
+### Signals
+
+```qml
+PluginService.pluginLoaded(pluginId: string)
+PluginService.pluginUnloaded(pluginId: string)
+PluginService.pluginLoadFailed(pluginId: string, error: string)
+```
+
+## Creating a Plugin
+
+### Step 1: Create Plugin Directory
+
+```bash
+mkdir -p $CONFIGPATH/DankMaterialShell/plugins/MyPlugin
+cd $CONFIGPATH/DankMaterialShell/plugins/MyPlugin
+```
+
+### Step 2: Create Manifest
+
+Create `plugin.json`:
+
+```json
+{
+    "id": "myPlugin",
+    "name": "My Plugin",
+    "description": "A sample plugin",
+    "version": "1.0.0",
+    "author": "Your Name",
+    "icon": "extension",
+    "component": "./MyWidget.qml",
+    "settings": "./MySettings.qml",
+    "permissions": ["settings_read", "settings_write"]
+}
+```
+
+### Step 3: Create Widget Component
+
+Create `MyWidget.qml`:
+
+```qml
+import QtQuick
+import qs.Common
+import qs.Widgets
+import qs.Modules.Plugins
+
+PluginComponent {
+    horizontalBarPill: Component {
+        StyledRect {
+            width: textItem.implicitWidth + Theme.spacingM * 2
+            height: parent.widgetThickness
+            radius: Theme.cornerRadius
+            color: Theme.surfaceContainerHigh
+
+            StyledText {
+                id: textItem
+                anchors.centerIn: parent
+                text: "Hello World"
+                color: Theme.surfaceText
+                font.pixelSize: Theme.fontSizeMedium
+            }
+        }
+    }
+
+    verticalBarPill: Component {
+        StyledRect {
+            width: parent.widgetThickness
+            height: textItem.implicitWidth + Theme.spacingM * 2
+            radius: Theme.cornerRadius
+            color: Theme.surfaceContainerHigh
+
+            StyledText {
+                id: textItem
+                anchors.centerIn: parent
+                text: "Hello"
+                color: Theme.surfaceText
+                font.pixelSize: Theme.fontSizeSmall
+                rotation: 90
+            }
+        }
+    }
+}
+```
+
+**Note:** Use `PluginComponent` wrapper for automatic property injection and bar integration. Define separate components for horizontal and vertical orientations.
+
+### Step 4: Create Settings Component (Optional)
+
+Create `MySettings.qml`:
+
+```qml
+import QtQuick
+import qs.Common
+import qs.Widgets
+import qs.Modules.Plugins
+
+PluginSettings {
+    pluginId: "myPlugin"
+
+    StyledText {
+        width: parent.width
+        text: "Configure your plugin settings"
+        font.pixelSize: Theme.fontSizeMedium
+        color: Theme.surfaceVariantText
+        wrapMode: Text.WordWrap
+    }
+
+    StringSetting {
+        settingKey: "text"
+        label: "Display Text"
+        description: "Text shown in the bar widget"
+        placeholder: "Hello World"
+        defaultValue: "Hello World"
+    }
+
+    ToggleSetting {
+        settingKey: "showIcon"
+        label: "Show Icon"
+        description: "Display an icon next to the text"
+        defaultValue: true
+    }
+}
+```
+
+### Step 5: Enable Plugin
+
+1. Run the shell: `qs -p $CONFIGPATH/quickshell/dms/shell.qml`
+2. Open Settings (Ctrl+,)
+3. Navigate to Plugins tab
+4. Click "Scan for Plugins"
+5. Enable your plugin with the toggle switch
+6. Add the plugin to your DankBar configuration
+
+## Adding Plugin to DankBar
+
+After enabling a plugin, add it to the bar:
+
+1. Open Settings → Appearance → DankBar Layout
+2. Add a new widget entry with your plugin ID
+3. Choose section (left, center, right)
+4. Save and reload
+
+Or edit `$CONFIGPATH/quickshell/dms/config.json`:
+
+```json
+{
+    "dankBarLeftWidgets": [
+        {"widgetId": "myPlugin", "enabled": true}
+    ]
+}
+```
+
+## Best Practices
+
+1. **Use Existing Widgets**: Leverage `qs.Widgets` components (DankIcon, DankToggle, etc.) for consistency
+2. **Follow Theme**: Use `Theme` singleton for colors, spacing, and fonts
+3. **Data Persistence**: Use PluginService data APIs instead of manual file operations
+4. **Error Handling**: Gracefully handle missing dependencies and invalid data
+5. **Performance**: Keep widgets lightweight, avoid long operations that block the UI loop
+6. **Responsive Design**: Adapt to `compactMode` and different screen sizes
+7. **Documentation**: Include README.md explaining plugin usage
+8. **Versioning**: Use semantic versioning for updates
+9. **Dependencies**: Document external library requirements
+
+## Debugging
+
+### Console Logging
+
+View plugin logs:
+
+```bash
+qs -v -p $CONFIGPATH/quickshell/dms/shell.qml
+```
+
+Look for lines prefixed with:
+- `PluginService:` - Service operations
+- `PluginsTab:` - UI interactions
+- `PluginsTab:` - Settings loading and accordion interface
+
+### Common Issues
+
+1. **Plugin Not Detected**
+   - Check plugin.json syntax (use `jq` or JSON validator)
+   - Verify directory is in `$CONFIGPATH/DankMaterialShell/plugins/`
+   - Click "Scan for Plugins" in Settings
+
+2. **Widget Not Displaying**
+   - Ensure plugin is enabled in Settings
+   - Add plugin ID to DankBar widget list
+   - Check widget width/height properties
+
+3. **Settings Not Loading**
+   - Verify `settings` path in plugin.json
+   - Check settings component for errors
+   - Ensure plugin is enabled and loaded
+   - Review PluginsTab console output for injection issues
+
+4. **Data Not Persisting**
+   - Confirm pluginService.savePluginData() calls (with injection)
+   - Check `$CONFIGPATH/DankMaterialShell/settings.json` for pluginSettings data
+   - Verify plugin has settings permissions
+   - Ensure PluginService was properly injected into settings component
+
+## Security Considerations
+
+Plugins run with full QML runtime access. Only install plugins from trusted sources.
+
+**Permissions System:**
+- `settings_read`: Read plugin configuration (not currently enforced)
+- `settings_write`: **Required** to use PluginSettings - write plugin configuration (enforced)
+- `process`: Execute system commands (not currently enforced)
+- `network`: Network access (not currently enforced)
+
+Currently, only `settings_write` is enforced by the PluginSettings component.
+
+## API Stability
+
+The plugin API is currently **experimental**. Breaking changes may occur in minor version updates. Pin to specific DMS versions for production use.
+
+**Roadmap:**
+- Plugin marketplace/repository
+- Sandboxed plugin execution
+- Enhanced permission system
+- Plugin update notifications
+- Inter-plugin communication
+
+## Resources
+
+- **Example Plugins**: [Emoji Picker](./ExampleEmojiPlugin/) [WorldClock](https://github.com/rochacbruno/WorldClock)
+- **PluginService**: `Services/PluginService.qml`
+- **Settings UI**: `Modules/Settings/PluginsTab.qml`
+- **DankBar Integration**: `Modules/DankBar/DankBar.qml`
+- **Theme Reference**: `Common/Theme.qml`
+- **Widget Library**: `Widgets/`
+
+## Contributing
+
+Share your plugins with the community:
+
+1. Create a public repository with your plugin
+2. Include comprehensive README.md
+4. Add example screenshots
+5. Document dependencies and permissions
+
+For plugin system improvements, submit issues or PRs to the main DMS repository.

README.md

@@ -11,7 +11,7 @@
 
 </div>
 
-A modern Wayland desktop shell built with [Quickshell](https://quickshell.org/) and designed for the [niri](https://github.com/YaLTeR/niri) and [Hyprland](https://hyprland.org/) compositors. Features Material 3 design principles with a heavy focus on functionality and customizability.
+A modern Wayland desktop shell built with [Quickshell](https://quickshell.org/) and optimized for the [niri](https://github.com/YaLTeR/niri) and [Hyprland](https://hyprland.org/) compositors.
 
 ## Screenshots
 
@@ -122,6 +122,8 @@ curl -fsSL https://install.danklinux.com | sh
 - Configure bluetooth, wifi, and audio input+output devices.
 - A lock screen
 - Idle monitoring - configure auto lock, screen off, suspend, and hibernate with different knobs for battery + AC power.
+- A greeter
+- A comprehensive plugin system for endless customization possibilities.
 
 **TL;DR** *dms replaces your waybar, swaylock, swayidle, hypridle, hyprlock, fuzzels, walker, mako, and basically everything you use to stitch a desktop together*
 
@@ -245,17 +247,16 @@ sudo dnf copr enable errornointernet/quickshell && sudo dnf install quickshell-g
 
 **2.1 Install Material Symbols**
 ```bash
-mkdir -p ~/.local/share/fonts &&
-curl -L "https://github.com/google/material-design-icons/raw/master/variablefont/MaterialSymbolsRounded%5BFILL%2CGRAD%2Copsz%2Cwght%5D.ttf" -o ~/.local/share/fonts/MaterialSymbolsRounded.ttf
+sudo curl -L "https://github.com/google/material-design-icons/raw/master/variablefont/MaterialSymbolsRounded%5BFILL%2CGRAD%2Copsz%2Cwght%5D.ttf" -o /usr/share/fonts/MaterialSymbolsRounded.ttf
 ```
 **2.2 Install Inter Variable**
 ```bash
-curl -L "https://github.com/rsms/inter/raw/refs/tags/v4.1/docs/font-files/InterVariable.ttf" -o ~/.local/share/fonts/InterVariable.ttf
+sudo curl -L "https://github.com/rsms/inter/raw/refs/tags/v4.1/docs/font-files/InterVariable.ttf" -o /usr/share/fonts/InterVariable.ttf
 ```
 
 **2.3 Install Fira Code (monospace font)**
 ```bash
-curl -L "https://github.com/tonsky/FiraCode/releases/latest/download/FiraCode-Regular.ttf" -o ~/.local/share/fonts/FiraCode-Regular.ttf
+sudo curl -L "https://github.com/tonsky/FiraCode/releases/latest/download/FiraCode-Regular.ttf" -o /usr/share/fonts/FiraCode-Regular.ttf
 ```
 
 **2.4 Refresh font cache**
@@ -313,7 +314,7 @@ sudo sh -c "curl -L https://github.com/AvengeMedia/dgop/releases/latest/download
 
 A lot of options are subject to personal preference, but the below sets a good starting point for most features.
 
-### Niri Integration
+### niri Integration
 
 Add to your niri config
 
@@ -393,6 +394,17 @@ binds {
 }
 ```
 
+#### niri theming
+
+If using a niri build newer than [3933903](https://github.com/YaLTeR/niri/commit/39339032cee3453faa54c361a38db6d83756f750), you can synchronize colors and gaps with the shell settings by adding the following to your niri config.
+
+```bash
+# For colors
+echo -e 'include "dms/colors.kdl"' >> ~/.config/niri/config.kdl
+# For gaps, border widths, certain window rules
+echo -e 'include "dms/layout.kdl"' >> ~/.config/niri/config.kdl
+```
+
 ### Hyprland Integration
 
 Add to your Hyprland config (`~/.config/hypr/hyprland.conf`):
@@ -629,6 +641,16 @@ echo "app-notifications = no-clipboard-copy,no-config-reload" >> ~/.config/ghost
 echo "include dank-theme.conf" >> ~/.config/kitty/kitty.conf
 ```
 
+## Plugins
+
+dms features a plugin system - meaning you can create your own widgets and load other user widgets.
+
+More comprehensive details available in the [PLUGINS](PLUGINS/README.md) - and example [Emoji Plugin](PLUGINS/ExampleEmojiPlugin) is available for reference.
+
+The example plugin can be installed by `cp -R ./PLUGINS/ExampleEmojiPlugin ~/.config/DankMaterialShell/plugins` - then it will appear in dms settings.
+
+**Only install plugins from TRUSTED sources.** Plugins execute QML and javascript at runtime, plugins from third parties should be reviewed before enabling them in dms.
+
 ### Calendar Setup
 
 Sync your caldev compatible calendar (Google, Office365, etc.) for dashboard integration:

Services/AppSearchService.qml

@@ -5,6 +5,7 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import Quickshell
 import "../Common/fzf.js" as Fzf
+import qs.Common
 
 Singleton {
     id: root
@@ -19,6 +20,7 @@ Singleton {
 
         const queryLower = query.toLowerCase().trim()
         const scoredApps = []
+        const usageRanking = AppUsageHistoryData.getAppUsageRanking()
 
         for (const app of applications) {
             const name = (app.name || "").toLowerCase()
@@ -66,7 +68,20 @@ Singleton {
                 }
             }
             if (!matched && genericName.includes(queryLower)) {
-                score = 4000
+                if (genericName === queryLower) {
+                    score = 9000
+                } else if (genericName.startsWith(queryLower)) {
+                    score = 8500
+                } else {
+                    const genericWords = genericName.trim().split(/\s+/).filter(w => w.length > 0)
+                    if (genericWords.includes(queryLower)) {
+                        score = 8000
+                    } else if (genericWords.some(word => word.startsWith(queryLower))) {
+                        score = 7500
+                    } else {
+                        score = 7000
+                    }
+                }
                 matched = true
             } else if (!matched && comment.includes(queryLower)) {
                 score = 3000
@@ -85,6 +100,42 @@ Singleton {
             }
 
             if (matched) {
+                const appId = app.id || (app.execString || app.exec || "")
+                const idVariants = [
+                    appId,
+                    appId.replace(".desktop", ""),
+                    app.id,
+                    app.id ? app.id.replace(".desktop", "") : null
+                ].filter(id => id)
+
+                let usageData = null
+                for (const variant of idVariants) {
+                    if (usageRanking[variant]) {
+                        usageData = usageRanking[variant]
+                        break
+                    }
+                }
+
+                if (usageData) {
+                    const usageCount = usageData.usageCount || 0
+                    const lastUsed = usageData.lastUsed || 0
+                    const now = Date.now()
+                    const daysSinceUsed = (now - lastUsed) / (1000 * 60 * 60 * 24)
+
+                    let usageBonus = 0
+                    usageBonus += Math.min(usageCount * 100, 2000)
+
+                    if (daysSinceUsed < 1) {
+                        usageBonus += 1500
+                    } else if (daysSinceUsed < 7) {
+                        usageBonus += 1000
+                    } else if (daysSinceUsed < 30) {
+                        usageBonus += 500
+                    }
+
+                    score += usageBonus
+                }
+
                 scoredApps.push({
                                     "app": app,
                                     "score": score

Services/CompositorService.qml

@@ -82,6 +82,7 @@ Singleton {
 
     Component.onCompleted: {
         detectCompositor()
+        NiriService.generateNiriLayoutConfig()
     }
 
     function filterCurrentWorkspace(toplevels, screen) {
@@ -192,6 +193,7 @@ Singleton {
                 root.isHyprland = false
                 root.compositor = "niri"
                 console.log("CompositorService: Detected Niri with socket:", root.niriSocket)
+                NiriService.generateNiriBinds()
             } else {
                 root.isHyprland = false
                 root.isNiri = true
@@ -200,4 +202,4 @@ Singleton {
             }
         }
     }
-}
+}

Services/DisplayService.qml

@@ -708,7 +708,6 @@ Singleton {
 
         onExited: function (exitCode) {
             geoclueAvailable = (exitCode === 0)
-            console.log("DisplayService: geoclue available:", geoclueAvailable)
         }
     }
 

Services/NiriService.qml

@@ -2,10 +2,12 @@ pragma Singleton
 
 pragma ComponentBehavior: Bound
 
+import QtCore
 import QtQuick
 import Quickshell
 import Quickshell.Io
 import Quickshell.Wayland
+import qs.Common
 
 Singleton {
     id: root
@@ -21,6 +23,8 @@ Singleton {
 
     property var windows: []
 
+    signal windowUrgentChanged()
+
     property bool inOverview: false
 
     property int currentKeyboardLayoutIndex: 0
@@ -31,6 +35,7 @@ Singleton {
     property bool suppressConfigToast: true
     property bool suppressNextConfigToast: false
     property bool matugenSuppression: false
+    property bool configGenerationPending: false
 
     readonly property string socketPath: Quickshell.env("NIRI_SOCKET")
 
@@ -186,6 +191,9 @@ Singleton {
             case 'KeyboardLayoutSwitched':
                 handleKeyboardLayoutSwitched(event.KeyboardLayoutSwitched);
                 break;
+            case 'WorkspaceUrgencyChanged':
+                handleWorkspaceUrgencyChanged(event.WorkspaceUrgencyChanged);
+                break;
         }
     }
 
@@ -370,6 +378,22 @@ Singleton {
         currentKeyboardLayoutIndex = data.idx
     }
 
+    function handleWorkspaceUrgencyChanged(data) {
+        const ws = root.workspaces[data.id]
+        if (!ws) {
+            return
+        }
+
+        ws.is_urgent = data.urgent
+
+        const idx = allWorkspaces.findIndex(w => w.id === data.id)
+        if (idx >= 0) {
+            allWorkspaces[idx].is_urgent = data.urgent
+        }
+
+        windowUrgentChanged()
+    }
+
     Process {
         id: validateProcess
         command: ["niri", "validate"]
@@ -412,13 +436,13 @@ Singleton {
     }
 
     function doScreenTransition() {
-        send({
-                    "Action": {
-                        "DoScreenTransition": {
-                            "delay_ms": 0,
+        return send({
+                        "Action": {
+                            "DoScreenTransition": {
+                                "delay_ms": 0,
+                            }
                         }
-                    }
-                })
+                    })
     }
 
     function switchToWorkspace(workspaceIndex) {
@@ -652,6 +676,7 @@ Singleton {
         return result
     }
 
+
     Timer {
         id: suppressToastTimer
         interval: 3000
@@ -663,4 +688,101 @@ Singleton {
         interval: 2000
         onTriggered: root.matugenSuppression = false
     }
+
+    Timer {
+        id: configGenerationDebounce
+        interval: 100
+        onTriggered: root.doGenerateNiriLayoutConfig()
+    }
+
+    function generateNiriLayoutConfig() {
+        const niriSocket = Quickshell.env("NIRI_SOCKET")
+        if (!niriSocket || niriSocket.length === 0) {
+            return
+        }
+
+        if (configGenerationPending) {
+            return
+        }
+
+        configGenerationPending = true
+        configGenerationDebounce.restart()
+    }
+
+    function doGenerateNiriLayoutConfig() {
+        console.log("NiriService: Generating layout config...")
+
+        const cornerRadius = typeof SettingsData !== "undefined" ? SettingsData.cornerRadius : 12
+        const gaps = typeof SettingsData !== "undefined" ? Math.max(4, SettingsData.dankBarSpacing) : 4
+
+        const configContent = `layout {
+    gaps ${gaps}
+
+    border {
+        width 2
+    }
+
+    focus-ring {
+        width 2
+    }
 }
+
+window-rule {
+    geometry-corner-radius ${cornerRadius}
+    clip-to-geometry true
+    tiled-state true
+    draw-border-with-background false
+}`
+
+        const configDir = Paths.strip(StandardPaths.writableLocation(StandardPaths.ConfigLocation))
+        const niriDmsDir = configDir + "/niri/dms"
+        const configPath = niriDmsDir + "/layout.kdl"
+
+        writeConfigProcess.configContent = configContent
+        writeConfigProcess.configPath = configPath
+        writeConfigProcess.command = ["sh", "-c", `mkdir -p "${niriDmsDir}" && cat > "${configPath}" << 'EOF'\n${configContent}\nEOF`]
+        writeConfigProcess.running = true
+        configGenerationPending = false
+    }
+
+    function generateNiriBinds() {
+        console.log("NiriService: Generating binds config...")
+
+        const configDir = Paths.strip(StandardPaths.writableLocation(StandardPaths.ConfigLocation))
+        const niriDmsDir = configDir + "/niri/dms"
+        const bindsPath = niriDmsDir + "/binds.kdl"
+        const sourceBindsPath = Paths.strip(Qt.resolvedUrl("niri-binds.kdl"))
+
+        writeBindsProcess.bindsPath = bindsPath
+        writeBindsProcess.command = ["sh", "-c", `mkdir -p "${niriDmsDir}" && cp "${sourceBindsPath}" "${bindsPath}"`]
+        writeBindsProcess.running = true
+    }
+
+    Process {
+        id: writeConfigProcess
+        property string configContent: ""
+        property string configPath: ""
+
+        onExited: exitCode => {
+            if (exitCode === 0) {
+                console.log("NiriService: Generated layout config at", configPath)
+            } else {
+                console.warn("NiriService: Failed to write layout config, exit code:", exitCode)
+            }
+        }
+    }
+
+    Process {
+        id: writeBindsProcess
+        property string bindsPath: ""
+
+        onExited: exitCode => {
+            if (exitCode === 0) {
+                console.log("NiriService: Generated binds config at", bindsPath)
+            } else {
+                console.warn("NiriService: Failed to write binds config, exit code:", exitCode)
+            }
+        }
+    }
+
+}

Services/PluginService.qml

@@ -0,0 +1,326 @@
+pragma Singleton
+
+pragma ComponentBehavior: Bound
+
+import QtCore
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import qs.Common
+
+Singleton {
+    id: root
+
+    property var availablePlugins: ({})
+    property var loadedPlugins: ({})
+    property var pluginWidgetComponents: ({})
+    property string pluginDirectory: {
+        var configDir = StandardPaths.writableLocation(StandardPaths.ConfigLocation)
+        var configDirStr = configDir.toString()
+        if (configDirStr.startsWith("file://")) {
+            configDirStr = configDirStr.substring(7)
+        }
+        return configDirStr + "/DankMaterialShell/plugins"
+    }
+    property string systemPluginDirectory: "/etc/xdg/quickshell/dms-plugins"
+    property var pluginDirectories: [pluginDirectory, systemPluginDirectory]
+
+    signal pluginLoaded(string pluginId)
+    signal pluginUnloaded(string pluginId)
+    signal pluginLoadFailed(string pluginId, string error)
+    signal pluginDataChanged(string pluginId)
+
+    Component.onCompleted: {
+        Qt.callLater(initializePlugins)
+    }
+
+    function initializePlugins() {
+        scanPlugins()
+    }
+
+    property int currentScanIndex: 0
+    property var scanResults: []
+
+    property var lsProcess: Process {
+        id: dirScanner
+
+        stdout: StdioCollector {
+            onStreamFinished: {
+                var output = text.trim()
+                var currentDir = pluginDirectories[currentScanIndex]
+                if (output) {
+                    var directories = output.split('\n')
+                    for (var i = 0; i < directories.length; i++) {
+                        var dir = directories[i].trim()
+                        if (dir) {
+                            var manifestPath = currentDir + "/" + dir + "/plugin.json"
+                            loadPluginManifest(manifestPath)
+                        }
+                    }
+                }
+            }
+        }
+
+        onExited: function(exitCode) {
+            currentScanIndex++
+            if (currentScanIndex < pluginDirectories.length) {
+                scanNextDirectory()
+            } else {
+                currentScanIndex = 0
+            }
+        }
+    }
+
+    function scanPlugins() {
+        currentScanIndex = 0
+        scanNextDirectory()
+    }
+
+    function scanNextDirectory() {
+        var dir = pluginDirectories[currentScanIndex]
+        lsProcess.command = ["find", "-L", dir, "-maxdepth", "1", "-type", "d", "-not", "-path", dir, "-exec", "basename", "{}", ";"]
+        lsProcess.running = true
+    }
+
+    property var manifestReaders: ({})
+
+    function loadPluginManifest(manifestPath) {
+        var readerId = "reader_" + Date.now() + "_" + Math.random()
+
+        var catProcess = Qt.createComponent("data:text/plain,import Quickshell.Io; Process { stdout: StdioCollector { } }")
+        if (catProcess.status === Component.Ready) {
+            var process = catProcess.createObject(root)
+            process.command = ["cat", manifestPath]
+            process.stdout.streamFinished.connect(function() {
+                try {
+                    var manifest = JSON.parse(process.stdout.text.trim())
+                    processManifest(manifest, manifestPath)
+                } catch (e) {
+                    console.error("PluginService: Failed to parse manifest", manifestPath, ":", e.message)
+                }
+                process.destroy()
+                delete manifestReaders[readerId]
+            })
+            process.exited.connect(function(exitCode) {
+                if (exitCode !== 0) {
+                    console.error("PluginService: Failed to read manifest file:", manifestPath, "exit code:", exitCode)
+                    process.destroy()
+                    delete manifestReaders[readerId]
+                }
+            })
+            manifestReaders[readerId] = process
+            process.running = true
+        } else {
+            console.error("PluginService: Failed to create manifest reader process")
+        }
+    }
+
+    function processManifest(manifest, manifestPath) {
+        registerPlugin(manifest, manifestPath)
+
+        // Auto-load plugin if it's enabled in settings (default to enabled)
+        var enabled = SettingsData.getPluginSetting(manifest.id, "enabled", true)
+        if (enabled) {
+            loadPlugin(manifest.id)
+        }
+    }
+
+    function registerPlugin(manifest, manifestPath) {
+        if (!manifest.id || !manifest.name || !manifest.component) {
+            console.error("PluginService: Invalid manifest, missing required fields:", manifestPath)
+            return
+        }
+
+        var pluginDir = manifestPath.substring(0, manifestPath.lastIndexOf('/'))
+
+        // Clean up relative paths by removing './' prefix
+        var componentFile = manifest.component
+        if (componentFile.startsWith('./')) {
+            componentFile = componentFile.substring(2)
+        }
+
+        var settingsFile = manifest.settings
+        if (settingsFile && settingsFile.startsWith('./')) {
+            settingsFile = settingsFile.substring(2)
+        }
+
+        var pluginInfo = {}
+        for (var key in manifest) {
+            pluginInfo[key] = manifest[key]
+        }
+        pluginInfo.manifestPath = manifestPath
+        pluginInfo.pluginDirectory = pluginDir
+        pluginInfo.componentPath = pluginDir + '/' + componentFile
+        pluginInfo.settingsPath = settingsFile ? pluginDir + '/' + settingsFile : null
+        pluginInfo.loaded = false
+
+        availablePlugins[manifest.id] = pluginInfo
+    }
+
+    function hasPermission(pluginId, permission) {
+        var plugin = availablePlugins[pluginId]
+        if (!plugin) {
+            return false
+        }
+        var permissions = plugin.permissions || []
+        return permissions.indexOf(permission) !== -1
+    }
+
+    function loadPlugin(pluginId) {
+        var plugin = availablePlugins[pluginId]
+        if (!plugin) {
+            console.error("PluginService: Plugin not found:", pluginId)
+            pluginLoadFailed(pluginId, "Plugin not found")
+            return false
+        }
+
+        if (plugin.loaded) {
+            return true
+        }
+
+        if (pluginWidgetComponents[pluginId]) {
+            var oldComponent = pluginWidgetComponents[pluginId]
+            if (oldComponent) {
+                oldComponent.destroy()
+            }
+            delete pluginWidgetComponents[pluginId]
+        }
+
+        try {
+            var componentUrl = "file://" + plugin.componentPath
+            var component = Qt.createComponent(componentUrl, Component.PreferSynchronous)
+
+            if (component.status === Component.Loading) {
+                component.statusChanged.connect(function() {
+                    if (component.status === Component.Error) {
+                        console.error("PluginService: Failed to create component for plugin:", pluginId, "Error:", component.errorString())
+                        pluginLoadFailed(pluginId, component.errorString())
+                        component.destroy()
+                    }
+                })
+            }
+
+            if (component.status === Component.Error) {
+                console.error("PluginService: Failed to create component for plugin:", pluginId, "Error:", component.errorString())
+                pluginLoadFailed(pluginId, component.errorString())
+                component.destroy()
+                return false
+            }
+
+            var newComponents = Object.assign({}, pluginWidgetComponents)
+            newComponents[pluginId] = component
+            pluginWidgetComponents = newComponents
+
+            plugin.loaded = true
+            loadedPlugins[pluginId] = plugin
+
+            pluginLoaded(pluginId)
+            return true
+
+        } catch (error) {
+            console.error("PluginService: Error loading plugin:", pluginId, "Error:", error.message)
+            pluginLoadFailed(pluginId, error.message)
+            return false
+        }
+    }
+
+    function unloadPlugin(pluginId) {
+        var plugin = loadedPlugins[pluginId]
+        if (!plugin) {
+            console.warn("PluginService: Plugin not loaded:", pluginId)
+            return false
+        }
+
+        try {
+            if (pluginWidgetComponents[pluginId]) {
+                var component = pluginWidgetComponents[pluginId]
+                if (component) {
+                    component.destroy()
+                }
+            }
+            var newComponents = Object.assign({}, pluginWidgetComponents)
+            delete newComponents[pluginId]
+            pluginWidgetComponents = newComponents
+
+            plugin.loaded = false
+            delete loadedPlugins[pluginId]
+
+            pluginUnloaded(pluginId)
+            return true
+
+        } catch (error) {
+            console.error("PluginService: Error unloading plugin:", pluginId, "Error:", error.message)
+            return false
+        }
+    }
+
+    function getWidgetComponents() {
+        return pluginWidgetComponents
+    }
+
+    function getAvailablePlugins() {
+        var result = []
+        for (var key in availablePlugins) {
+            result.push(availablePlugins[key])
+        }
+        return result
+    }
+
+    function getLoadedPlugins() {
+        var result = []
+        for (var key in loadedPlugins) {
+            result.push(loadedPlugins[key])
+        }
+        return result
+    }
+
+    function isPluginLoaded(pluginId) {
+        return loadedPlugins[pluginId] !== undefined
+    }
+
+    function enablePlugin(pluginId) {
+        SettingsData.setPluginSetting(pluginId, "enabled", true)
+        return loadPlugin(pluginId)
+    }
+
+    function disablePlugin(pluginId) {
+        SettingsData.setPluginSetting(pluginId, "enabled", false)
+        return unloadPlugin(pluginId)
+    }
+
+    function reloadPlugin(pluginId) {
+        if (isPluginLoaded(pluginId)) {
+            unloadPlugin(pluginId)
+        }
+        return loadPlugin(pluginId)
+    }
+
+    function savePluginData(pluginId, key, value) {
+        SettingsData.setPluginSetting(pluginId, key, value)
+        pluginDataChanged(pluginId)
+        return true
+    }
+
+    function loadPluginData(pluginId, key, defaultValue) {
+        return SettingsData.getPluginSetting(pluginId, key, defaultValue)
+    }
+
+    function createPluginDirectory() {
+        var mkdirProcess = Qt.createComponent("data:text/plain,import Quickshell.Io; Process { }")
+        if (mkdirProcess.status === Component.Ready) {
+            var process = mkdirProcess.createObject(root)
+            process.command = ["mkdir", "-p", pluginDirectory]
+            process.exited.connect(function(exitCode) {
+                if (exitCode !== 0) {
+                    console.error("PluginService: Failed to create plugin directory, exit code:", exitCode)
+                }
+                process.destroy()
+            })
+            process.running = true
+            return true
+        } else {
+            console.error("PluginService: Failed to create mkdir process")
+            return false
+        }
+    }
+}

Services/PortalService.qml

@@ -75,7 +75,7 @@ Singleton {
             return
         }
 
-        const colorScheme = isLightMode ? "prefer-light" : "prefer-dark"
+        const colorScheme = isLightMode ? "default" : "prefer-dark"
         const script = `gsettings set org.gnome.desktop.interface color-scheme '${colorScheme}'`
 
         systemColorSchemeSetProcess.command = ["bash", "-c", script]

Services/SystemUpdateService.qml

@@ -17,6 +17,7 @@ Singleton {
     property string pkgManager: ""
     property string distribution: ""
     property bool distributionSupported: false
+    property string shellVersion: ""
 
     readonly property list<string> supportedDistributions: ["arch", "cachyos", "manjaro", "endeavouros"]
     readonly property int updateCount: availableUpdates.length
@@ -43,6 +44,23 @@ Singleton {
         }
 
         stdout: StdioCollector {}
+
+        Component.onCompleted: {
+            versionDetection.running = true
+        }
+    }
+
+    Process {
+        id: versionDetection
+        command: ["sh", "-c", "if [ -d .git ]; then echo \"(git) $(git rev-parse --short HEAD)\"; elif [ -f VERSION ]; then cat VERSION; fi"]
+
+        onExited: (exitCode) => {
+            if (exitCode === 0) {
+                shellVersion = stdout.text.trim()
+            }
+        }
+
+        stdout: StdioCollector {}
     }
 
     Process {

Services/niri-binds.kdl

@@ -0,0 +1,55 @@
+binds {
+    Mod+Space hotkey-overlay-title="Application Launcher" { 
+        spawn "dms" "ipc" "call" "spotlight" "toggle"; 
+    }
+
+    Mod+V hotkey-overlay-title="Clipboard Manager" { 
+        spawn "dms" "ipc" "call" "clipboard" "toggle"; 
+    }
+
+    Mod+M hotkey-overlay-title="Task Manager" { 
+        spawn "dms" "ipc" "call" "processlist" "toggle"; 
+    }
+
+    Mod+Comma hotkey-overlay-title="Settings" { 
+        spawn "dms" "ipc" "call" "settings" "toggle"; 
+    }
+
+    Mod+N hotkey-overlay-title="Notification Center" {
+        spawn "dms" "ipc" "call" "notifications" "toggle"; 
+    }
+
+    Mod+Shift+N hotkey-overlay-title="Notepad" {
+      spawn "dms" "ipc" "call" "notepad" "toggle";  
+    }
+    
+    Mod+Alt+L hotkey-overlay-title="Lock Screen" { 
+        spawn "dms" "ipc" "call" "lock" "lock"; 
+    }
+
+    Ctrl+Alt+Delete hotkey-overlay-title="Task Manager" { 
+        spawn "dms" "ipc" "call" "processlist" "toggle"; 
+    }    
+
+    // Audio
+    XF86AudioRaiseVolume allow-when-locked=true {
+        spawn "dms" "ipc" "call" "audio" "increment" "3";
+    }
+    XF86AudioLowerVolume allow-when-locked=true {
+        spawn "dms" "ipc" "call" "audio" "decrement" "3";
+    }
+    XF86AudioMute allow-when-locked=true {
+        spawn "dms" "ipc" "call" "audio" "mute";
+    }
+    XF86AudioMicMute allow-when-locked=true {
+        spawn "dms" "ipc" "call" "audio" "micmute";
+    }
+    
+    // BL
+    XF86MonBrightnessUp allow-when-locked=true {
+       spawn "dms" "ipc" "call" "brightness" "increment" "5" "";
+    }
+    XF86MonBrightnessDown allow-when-locked=true {
+       spawn "dms" "ipc" "call" "brightness" "decrement" "5" "";
+    }  
+}

VERSION

@@ -0,0 +1 @@
+v0.0.30

Widgets/DankButton.qml

@@ -0,0 +1,75 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property string text: ""
+    property string iconName: ""
+    property int iconSize: Theme.iconSizeSmall
+    property bool enabled: true
+    property bool hovered: mouseArea.containsMouse
+    property bool pressed: mouseArea.pressed
+    property color backgroundColor: Theme.primary
+    property color textColor: Theme.primaryText
+    property int buttonHeight: 40
+    property int horizontalPadding: Theme.spacingL
+
+    signal clicked()
+
+    width: Math.max(contentRow.implicitWidth + horizontalPadding * 2, 64)
+    height: buttonHeight
+    radius: Theme.cornerRadius
+    color: backgroundColor
+    opacity: enabled ? 1 : 0.4
+
+    Rectangle {
+        id: stateLayer
+        anchors.fill: parent
+        radius: parent.radius
+        color: {
+            if (pressed) return Theme.primaryPressed
+            if (hovered) return Theme.primaryHover
+            return "transparent"
+        }
+
+        Behavior on color {
+            ColorAnimation {
+                duration: Theme.shorterDuration
+                easing.type: Theme.standardEasing
+            }
+        }
+    }
+
+    Row {
+        id: contentRow
+        anchors.centerIn: parent
+        spacing: Theme.spacingS
+
+        DankIcon {
+            name: root.iconName
+            size: root.iconSize
+            color: root.textColor
+            visible: root.iconName !== ""
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        StyledText {
+            text: root.text
+            font.pixelSize: Theme.fontSizeMedium
+            font.weight: Font.Medium
+            color: root.textColor
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+        enabled: root.enabled
+        onClicked: root.clicked()
+    }
+}

Widgets/DankButtonGroup.qml

@@ -80,7 +80,7 @@ Flow {
             width: Math.max(contentItem.implicitWidth + root.buttonPadding * 2, root.minButtonWidth) + (selected ? 4 : 0)
             height: root.buttonHeight
 
-            color: selected ? Theme.primaryContainer : Theme.primary
+            color: selected ? Theme.primary : Theme.surfaceVariant
             border.color: "transparent"
             border.width: 0
 
@@ -139,8 +139,8 @@ Flow {
                 topRightRadius: parent.topRightRadius
                 bottomRightRadius: parent.bottomRightRadius
                 color: {
-                    if (pressed) return selected ? Theme.primaryPressed : Theme.surfacePressed
-                    if (hovered) return selected ? Theme.primaryHover : Theme.surfaceHover
+                    if (pressed) return selected ? Theme.primaryPressed : Theme.surfaceTextHover
+                    if (hovered) return selected ? Theme.primaryHover : Theme.surfaceTextHover
                     return "transparent"
                 }
 
@@ -166,7 +166,7 @@ Flow {
                         id: checkIcon
                         name: "check"
                         size: root.checkIconSize
-                        color: segment.selected ? Theme.surfaceText : Theme.primaryText
+                        color: segment.selected ? Theme.primaryText : Theme.surfaceVariantText
                         visible: root.checkEnabled && segment.selected
                         opacity: segment.selected ? 1 : 0
                         scale: segment.selected ? 1 : 0.6
@@ -192,7 +192,7 @@ Flow {
                         text: typeof modelData === "string" ? modelData : modelData.text || ""
                         font.pixelSize: root.textSize
                         font.weight: segment.selected ? Font.Medium : Font.Normal
-                        color: segment.selected ? Theme.surfaceText : Theme.primaryText
+                        color: segment.selected ? Theme.primaryText : Theme.surfaceVariantText
                         anchors.verticalCenter: parent.verticalCenter
                     }
                 }

Widgets/DankDropdown.qml

@@ -1,10 +1,11 @@
 import "../Common/fzf.js" as Fzf
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Effects
 import qs.Common
 import qs.Widgets
 
-Rectangle {
+Item {
     id: root
 
     property string text: ""
@@ -12,50 +13,33 @@ Rectangle {
     property string currentValue: ""
     property var options: []
     property var optionIcons: []
-    property bool forceRecreate: false
     property bool enableFuzzySearch: false
     property int popupWidthOffset: 0
     property int maxPopupHeight: 400
     property bool openUpwards: false
     property int popupWidth: 0
     property bool alignPopupRight: false
+    property int dropdownWidth: 200
 
     signal valueChanged(string value)
 
     width: parent.width
-    height: 60
-    radius: Theme.cornerRadius
-    color: "transparent"
-    Component.onCompleted: forceRecreateTimer.start()
+    implicitHeight: Math.max(60, labelColumn.implicitHeight + Theme.spacingM)
+
     Component.onDestruction: {
-        const popup = popupLoader.item
+        const popup = dropdownMenu
         if (popup && popup.visible) {
             popup.close()
         }
     }
-    onVisibleChanged: {
-        const popup = popupLoader.item
-        if (!visible && popup && popup.visible) {
-            popup.close()
-        } else if (visible) {
-            forceRecreateTimer.start()
-        }
-    }
-
-    Timer {
-        id: forceRecreateTimer
-
-        interval: 50
-        repeat: false
-        onTriggered: root.forceRecreate = !root.forceRecreate
-    }
 
     Column {
+        id: labelColumn
+
         anchors.left: parent.left
         anchors.right: dropdown.left
         anchors.verticalCenter: parent.verticalCenter
-        anchors.leftMargin: Theme.spacingM
-        anchors.rightMargin: Theme.spacingM
+        anchors.rightMargin: Theme.spacingL
         spacing: Theme.spacingXS
 
         StyledText {
@@ -78,15 +62,14 @@ Rectangle {
     Rectangle {
         id: dropdown
 
-        width: root.width <= 60 ? root.width : 180
-        height: 36
+        width: root.popupWidth === -1 ? undefined : (root.popupWidth > 0 ? root.popupWidth : root.dropdownWidth)
+        height: 40
         anchors.right: parent.right
-        anchors.rightMargin: Theme.spacingM
         anchors.verticalCenter: parent.verticalCenter
         radius: Theme.cornerRadius
-        color: dropdownArea.containsMouse ? Theme.primaryHover : Theme.contentBackground()
-        border.color: Theme.surfaceVariantAlpha
-        border.width: 1
+        color: dropdownArea.containsMouse || dropdownMenu.visible ? Theme.surfaceContainerHigh : Theme.surfaceContainer
+        border.color: dropdownMenu.visible ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+        border.width: dropdownMenu.visible ? 2 : 1
 
         MouseArea {
             id: dropdownArea
@@ -95,42 +78,39 @@ Rectangle {
             hoverEnabled: true
             cursorShape: Qt.PointingHandCursor
             onClicked: {
-                const popup = popupLoader.item
-                if (!popup) {
+                if (dropdownMenu.visible) {
+                    dropdownMenu.close()
                     return
                 }
 
-                if (popup.visible) {
-                    popup.close()
-                    return
-                }
+                dropdownMenu.searchQuery = ""
+                dropdownMenu.updateFilteredOptions()
 
-                if (root.openUpwards || root.alignPopupRight) {
-                    popup.open()
-                    Qt.callLater(() => {
-                        if (root.openUpwards) {
-                            const pos = dropdown.mapToItem(Overlay.overlay, 0, 0)
-                            if (root.alignPopupRight) {
-                                popup.x = pos.x + dropdown.width - popup.width
-                            } else {
-                                popup.x = pos.x - (root.popupWidthOffset / 2)
-                            }
-                            popup.y = pos.y - popup.height - 4
-                        } else {
-                            const pos = dropdown.mapToItem(Overlay.overlay, 0, dropdown.height + 4)
-                            if (root.alignPopupRight) {
-                                popup.x = pos.x + dropdown.width - popup.width
-                            } else {
-                                popup.x = pos.x - (root.popupWidthOffset / 2)
-                            }
-                            popup.y = pos.y
-                        }
-                    })
+                dropdownMenu.open()
+
+                const pos = dropdown.mapToItem(Overlay.overlay, 0, 0)
+                const popupWidth = dropdownMenu.width
+                const popupHeight = dropdownMenu.height
+                const overlayHeight = Overlay.overlay.height
+
+                if (root.openUpwards || pos.y + dropdown.height + popupHeight + 4 > overlayHeight) {
+                    if (root.alignPopupRight) {
+                        dropdownMenu.x = pos.x + dropdown.width - popupWidth
+                    } else {
+                        dropdownMenu.x = pos.x - (root.popupWidthOffset / 2)
+                    }
+                    dropdownMenu.y = pos.y - popupHeight - 4
                 } else {
-                    const pos = dropdown.mapToItem(Overlay.overlay, 0, dropdown.height + 4)
-                    popup.x = pos.x - (root.popupWidthOffset / 2)
-                    popup.y = pos.y
-                    popup.open()
+                    if (root.alignPopupRight) {
+                        dropdownMenu.x = pos.x + dropdown.width - popupWidth
+                    } else {
+                        dropdownMenu.x = pos.x - (root.popupWidthOffset / 2)
+                    }
+                    dropdownMenu.y = pos.y + dropdown.height + 4
+                }
+
+                if (root.enableFuzzySearch && searchField.visible) {
+                    searchField.forceActiveFocus()
                 }
             }
         }
@@ -139,8 +119,10 @@ Rectangle {
             id: contentRow
 
             anchors.left: parent.left
+            anchors.right: expandIcon.left
             anchors.verticalCenter: parent.verticalCenter
             anchors.leftMargin: Theme.spacingM
+            anchors.rightMargin: Theme.spacingS
             spacing: Theme.spacingS
 
             DankIcon {
@@ -149,9 +131,9 @@ Rectangle {
                     return currentIndex >= 0 && root.optionIcons.length > currentIndex ? root.optionIcons[currentIndex] : ""
                 }
                 size: 18
-                color: Theme.surfaceVariantText
+                color: Theme.surfaceText
                 anchors.verticalCenter: parent.verticalCenter
-                visible: name !== "" && root.width > 60
+                visible: name !== ""
             }
 
             StyledText {
@@ -159,229 +141,220 @@ Rectangle {
                 font.pixelSize: Theme.fontSizeMedium
                 color: Theme.surfaceText
                 anchors.verticalCenter: parent.verticalCenter
-                width: root.width <= 60 ? dropdown.width - expandIcon.width - Theme.spacingS * 2 : dropdown.width - contentRow.x - expandIcon.width - Theme.spacingM - Theme.spacingS
-                elide: root.width <= 60 ? Text.ElideNone : Text.ElideRight
-                horizontalAlignment: root.width <= 60 ? Text.AlignHCenter : Text.AlignLeft
+                width: contentRow.width - (contentRow.children[0].visible ? contentRow.children[0].width + contentRow.spacing : 0)
+                elide: Text.ElideRight
             }
         }
 
         DankIcon {
             id: expandIcon
 
-            name: "expand_more"
+            name: dropdownMenu.visible ? "expand_less" : "expand_more"
             size: 20
-            color: Theme.surfaceVariantText
+            color: Theme.surfaceText
             anchors.right: parent.right
             anchors.verticalCenter: parent.verticalCenter
             anchors.rightMargin: Theme.spacingS
+
+            Behavior on rotation {
+                NumberAnimation {
+                    duration: Theme.shortDuration
+                    easing.type: Theme.standardEasing
+                }
+            }
         }
     }
 
-    Loader {
-        id: popupLoader
+    Popup {
+        id: dropdownMenu
 
-        property bool recreateFlag: root.forceRecreate
+        property string searchQuery: ""
+        property var filteredOptions: []
+        property int selectedIndex: -1
+        property var fzfFinder: new Fzf.Finder(root.options, {
+            "selector": option => option,
+            "limit": 50,
+            "casing": "case-insensitive"
+        })
 
-        active: true
-        onRecreateFlagChanged: {
-            active = false
-            active = true
+        function updateFilteredOptions() {
+            if (!root.enableFuzzySearch || searchQuery.length === 0) {
+                filteredOptions = root.options
+                selectedIndex = -1
+                return
+            }
+
+            const results = fzfFinder.find(searchQuery)
+            filteredOptions = results.map(result => result.item)
+            selectedIndex = -1
         }
 
-        sourceComponent: Component {
-            Popup {
-                id: dropdownMenu
+        function selectNext() {
+            if (filteredOptions.length === 0) {
+                return
+            }
+            selectedIndex = (selectedIndex + 1) % filteredOptions.length
+            listView.positionViewAtIndex(selectedIndex, ListView.Contain)
+        }
 
-                property string searchQuery: ""
-                property var filteredOptions: []
-                property int selectedIndex: -1
-                property var fzfFinder: new Fzf.Finder(root.options, {
-                                                           "selector": option => option,
-                                                           "limit": 50,
-                                                           "casing": "case-insensitive"
-                                                       })
+        function selectPrevious() {
+            if (filteredOptions.length === 0) {
+                return
+            }
+            selectedIndex = selectedIndex <= 0 ? filteredOptions.length - 1 : selectedIndex - 1
+            listView.positionViewAtIndex(selectedIndex, ListView.Contain)
+        }
 
-                function updateFilteredOptions() {
-                    if (!root.enableFuzzySearch || searchQuery.length === 0) {
-                        filteredOptions = root.options
-                        selectedIndex = -1
-                        return
-                    }
+        function selectCurrent() {
+            if (selectedIndex < 0 || selectedIndex >= filteredOptions.length) {
+                return
+            }
+            root.currentValue = filteredOptions[selectedIndex]
+            root.valueChanged(filteredOptions[selectedIndex])
+            close()
+        }
 
-                    const results = fzfFinder.find(searchQuery)
-                    filteredOptions = results.map(result => result.item)
-                    selectedIndex = -1
-                }
+        parent: Overlay.overlay
+        width: root.popupWidth === -1 ? undefined : (root.popupWidth > 0 ? root.popupWidth : (dropdown.width + root.popupWidthOffset))
+        height: Math.min(root.maxPopupHeight, (root.enableFuzzySearch ? 54 : 0) + Math.min(filteredOptions.length, 10) * 36 + 16)
+        padding: 0
+        modal: true
+        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
 
-                function selectNext() {
-                    if (filteredOptions.length === 0) {
-                        return
-                    }
-                    selectedIndex = (selectedIndex + 1) % filteredOptions.length
-                    listView.positionViewAtIndex(selectedIndex, ListView.Contain)
-                }
+        background: Rectangle {
+            color: "transparent"
+        }
 
-                function selectPrevious() {
-                    if (filteredOptions.length === 0) {
-                        return
-                    }
-                    selectedIndex = selectedIndex <= 0 ? filteredOptions.length - 1 : selectedIndex - 1
-                    listView.positionViewAtIndex(selectedIndex, ListView.Contain)
-                }
+        contentItem: Rectangle {
+            color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 1)
+            border.color: Theme.primary
+            border.width: 2
+            radius: Theme.cornerRadius
 
-                function selectCurrent() {
-                    if (selectedIndex < 0 || selectedIndex >= filteredOptions.length) {
-                        return
-                    }
-                    root.currentValue = filteredOptions[selectedIndex]
-                    root.valueChanged(filteredOptions[selectedIndex])
-                    close()
-                }
+            layer.enabled: true
+            layer.effect: MultiEffect {
+                shadowEnabled: true
+                shadowBlur: 0.4
+                shadowColor: Theme.shadowStrong
+                shadowVerticalOffset: 4
+            }
 
-                parent: Overlay.overlay
-                width: root.popupWidth > 0 ? root.popupWidth : (dropdown.width + root.popupWidthOffset)
-                height: Math.min(root.maxPopupHeight, (root.enableFuzzySearch ? 54 : 0) + Math.min(filteredOptions.length, 10) * 36 + 16)
-                padding: 0
-                modal: true
-                closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
-                onOpened: {
-                    searchQuery = ""
-                    updateFilteredOptions()
-                    if (root.enableFuzzySearch && searchField.visible) {
-                        searchField.forceActiveFocus()
-                    }
-                }
+            Column {
+                anchors.fill: parent
+                anchors.margins: Theme.spacingS
 
-                background: Rectangle {
-                    color: "transparent"
-                }
+                Rectangle {
+                    id: searchContainer
 
-                contentItem: Rectangle {
-                    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 1)
-                    border.color: Theme.primarySelected
-                    border.width: 1
+                    width: parent.width
+                    height: 42
+                    visible: root.enableFuzzySearch
                     radius: Theme.cornerRadius
+                    color: Theme.surfaceContainerHigh
+
+                    DankTextField {
+                        id: searchField
 
-                    Column {
                         anchors.fill: parent
-                        anchors.margins: Theme.spacingS
+                        anchors.margins: 1
+                        placeholderText: "Search..."
+                        text: dropdownMenu.searchQuery
+                        topPadding: Theme.spacingS
+                        bottomPadding: Theme.spacingS
+                        onTextChanged: {
+                            dropdownMenu.searchQuery = text
+                            dropdownMenu.updateFilteredOptions()
+                        }
+                        Keys.onDownPressed: dropdownMenu.selectNext()
+                        Keys.onUpPressed: dropdownMenu.selectPrevious()
+                        Keys.onReturnPressed: dropdownMenu.selectCurrent()
+                        Keys.onEnterPressed: dropdownMenu.selectCurrent()
+                        Keys.onPressed: event => {
+                            if (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) {
+                                dropdownMenu.selectNext()
+                                event.accepted = true
+                            } else if (event.key === Qt.Key_P && event.modifiers & Qt.ControlModifier) {
+                                dropdownMenu.selectPrevious()
+                                event.accepted = true
+                            } else if (event.key === Qt.Key_J && event.modifiers & Qt.ControlModifier) {
+                                dropdownMenu.selectNext()
+                                event.accepted = true
+                            } else if (event.key === Qt.Key_K && event.modifiers & Qt.ControlModifier) {
+                                dropdownMenu.selectPrevious()
+                                event.accepted = true
+                            }
+                        }
+                    }
+                }
 
-                        Rectangle {
-                            id: searchContainer
+                Item {
+                    width: 1
+                    height: Theme.spacingXS
+                    visible: root.enableFuzzySearch
+                }
 
-                            width: parent.width
-                            height: 42
-                            visible: root.enableFuzzySearch
-                            radius: Theme.cornerRadius
-                            color: Theme.surfaceVariantAlpha
+                DankListView {
+                    id: listView
 
-                            DankTextField {
-                                id: searchField
+                    width: parent.width
+                    height: parent.height - (root.enableFuzzySearch ? searchContainer.height + Theme.spacingXS : 0)
+                    clip: true
+                    model: dropdownMenu.filteredOptions
+                    spacing: 2
 
-                                anchors.fill: parent
-                                anchors.margins: 1
-                                placeholderText: "Search..."
-                                text: searchQuery
-                                topPadding: Theme.spacingS
-                                bottomPadding: Theme.spacingS
-                                onTextChanged: {
-                                    searchQuery = text
-                                    updateFilteredOptions()
-                                }
-                                Keys.onDownPressed: selectNext()
-                                Keys.onUpPressed: selectPrevious()
-                                Keys.onReturnPressed: selectCurrent()
-                                Keys.onEnterPressed: selectCurrent()
-                                Keys.onPressed: event => {
-                                    if (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) {
-                                        selectNext()
-                                        event.accepted = true
-                                    } else if (event.key === Qt.Key_P && event.modifiers & Qt.ControlModifier) {
-                                        selectPrevious()
-                                        event.accepted = true
-                                    } else if (event.key === Qt.Key_J && event.modifiers & Qt.ControlModifier) {
-                                        selectNext()
-                                        event.accepted = true
-                                    } else if (event.key === Qt.Key_K && event.modifiers & Qt.ControlModifier) {
-                                        selectPrevious()
-                                        event.accepted = true
-                                    }
-                                }
+                    interactive: true
+                    flickDeceleration: 1500
+                    maximumFlickVelocity: 2000
+                    boundsBehavior: Flickable.DragAndOvershootBounds
+                    boundsMovement: Flickable.FollowBoundsBehavior
+                    pressDelay: 0
+                    flickableDirection: Flickable.VerticalFlick
+
+                    delegate: Rectangle {
+                        property bool isSelected: dropdownMenu.selectedIndex === index
+                        property bool isCurrentValue: root.currentValue === modelData
+                        property int optionIndex: root.options.indexOf(modelData)
+
+                        width: ListView.view.width
+                        height: 32
+                        radius: Theme.cornerRadius
+                        color: isSelected ? Theme.primaryHover : optionArea.containsMouse ? Theme.primaryHoverLight : "transparent"
+
+                        Row {
+                            anchors.left: parent.left
+                            anchors.leftMargin: Theme.spacingS
+                            anchors.verticalCenter: parent.verticalCenter
+                            spacing: Theme.spacingS
+
+                            DankIcon {
+                                name: optionIndex >= 0 && root.optionIcons.length > optionIndex ? root.optionIcons[optionIndex] : ""
+                                size: 18
+                                color: isCurrentValue ? Theme.primary : Theme.surfaceText
+                                visible: name !== ""
+                            }
+
+                            StyledText {
+                                anchors.verticalCenter: parent.verticalCenter
+                                text: modelData
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: isCurrentValue ? Theme.primary : Theme.surfaceText
+                                font.weight: isCurrentValue ? Font.Medium : Font.Normal
+                                width: root.popupWidth > 0 ? undefined : (parent.parent.width - parent.x - Theme.spacingS)
+                                elide: root.popupWidth > 0 ? Text.ElideNone : Text.ElideRight
+                                wrapMode: Text.NoWrap
                             }
                         }
 
-                        Item {
-                            width: 1
-                            height: Theme.spacingXS
-                            visible: root.enableFuzzySearch
-                        }
+                        MouseArea {
+                            id: optionArea
 
-                        DankListView {
-                            id: listView
-
-                            property var popupRef: dropdownMenu
-
-                            width: parent.width
-                            height: parent.height - (root.enableFuzzySearch ? searchContainer.height + Theme.spacingXS : 0)
-                            clip: true
-                            model: filteredOptions
-                            spacing: 2
-
-                            interactive: true
-                            flickDeceleration: 1500
-                            maximumFlickVelocity: 2000
-                            boundsBehavior: Flickable.DragAndOvershootBounds
-                            boundsMovement: Flickable.FollowBoundsBehavior
-                            pressDelay: 0
-                            flickableDirection: Flickable.VerticalFlick
-
-                            delegate: Rectangle {
-                                property bool isSelected: selectedIndex === index
-                                property bool isCurrentValue: root.currentValue === modelData
-                                property int optionIndex: root.options.indexOf(modelData)
-
-                                width: ListView.view.width
-                                height: 32
-                                radius: Theme.cornerRadius
-                                color: isSelected ? Theme.primaryHover : optionArea.containsMouse ? Theme.primaryHoverLight : "transparent"
-
-                                Row {
-                                    anchors.left: parent.left
-                                    anchors.leftMargin: Theme.spacingS
-                                    anchors.verticalCenter: parent.verticalCenter
-                                    spacing: Theme.spacingS
-
-                                    DankIcon {
-                                        name: optionIndex >= 0 && root.optionIcons.length > optionIndex ? root.optionIcons[optionIndex] : ""
-                                        size: 18
-                                        color: isCurrentValue ? Theme.primary : Theme.surfaceVariantText
-                                        visible: name !== ""
-                                    }
-
-                                    StyledText {
-                                        anchors.verticalCenter: parent.verticalCenter
-                                        text: modelData
-                                        font.pixelSize: Theme.fontSizeMedium
-                                        color: isCurrentValue ? Theme.primary : Theme.surfaceText
-                                        font.weight: isCurrentValue ? Font.Medium : Font.Normal
-                                        width: root.popupWidth > 0 ? undefined : (parent.parent.width - parent.x - Theme.spacingS)
-                                        elide: root.popupWidth > 0 ? Text.ElideNone : Text.ElideRight
-                                        wrapMode: Text.NoWrap
-                                    }
-                                }
-
-                                MouseArea {
-                                    id: optionArea
-
-                                    anchors.fill: parent
-                                    hoverEnabled: true
-                                    cursorShape: Qt.PointingHandCursor
-                                    onClicked: {
-                                        root.currentValue = modelData
-                                        root.valueChanged(modelData)
-                                        listView.popupRef.close()
-                                    }
-                                }
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                root.currentValue = modelData
+                                root.valueChanged(modelData)
+                                dropdownMenu.close()
                             }
                         }
                     }

Widgets/DankPopout.qml

@@ -68,52 +68,69 @@ PanelWindow {
         bottom: true
     }
 
+    readonly property real screenWidth: root.screen.width
+    readonly property real screenHeight: root.screen.height
+    readonly property real dpr: root.screen.devicePixelRatio
+
+    readonly property real calculatedX: {
+        if (SettingsData.dankBarPosition === SettingsData.Position.Left) {
+            return triggerY
+        } else if (SettingsData.dankBarPosition === SettingsData.Position.Right) {
+            return screenWidth - triggerY - popupWidth
+        } else {
+            const centerX = triggerX + (triggerWidth / 2) - (popupWidth / 2)
+            return Math.max(Theme.popupDistance, Math.min(screenWidth - popupWidth - Theme.popupDistance, centerX))
+        }
+    }
+    readonly property real calculatedY: {
+        if (SettingsData.dankBarPosition === SettingsData.Position.Left || SettingsData.dankBarPosition === SettingsData.Position.Right) {
+            const centerY = triggerX + (triggerWidth / 2) - (popupHeight / 2)
+            return Math.max(Theme.popupDistance, Math.min(screenHeight - popupHeight - Theme.popupDistance, centerY))
+        } else if (SettingsData.dankBarPosition === SettingsData.Position.Bottom) {
+            return Math.max(Theme.popupDistance, Math.min(screenHeight - popupHeight - Theme.popupDistance, screenHeight - triggerY - popupHeight + Theme.popupDistance))
+        } else {
+            return Math.max(Theme.popupDistance, Math.min(screenHeight - popupHeight - Theme.popupDistance, triggerY + Theme.popupDistance))
+        }
+    }
+
+    readonly property real alignedWidth: Theme.snap(popupWidth, dpr)
+    readonly property real alignedHeight: Theme.snap(popupHeight, dpr)
+    readonly property real alignedX: Theme.snap(calculatedX, dpr)
+    readonly property real alignedY: Theme.snap(calculatedY, dpr)
+
     MouseArea {
         anchors.fill: parent
         enabled: shouldBeVisible
         onClicked: mouse => {
-                       var localPos = mapToItem(contentContainer, mouse.x, mouse.y)
-                       if (localPos.x < 0 || localPos.x > contentContainer.width || localPos.y < 0 || localPos.y > contentContainer.height) {
-                           backgroundClicked()
-                           close()
-                       }
-                   }
+            if (mouse.x < alignedX || mouse.x > alignedX + alignedWidth ||
+                mouse.y < alignedY || mouse.y > alignedY + alignedHeight) {
+                backgroundClicked()
+                close()
+            }
+        }
     }
 
-    Item {
-        id: contentContainer
-        layer.enabled: true
+    Loader {
+        id: contentLoader
+        x: alignedX
+        y: alignedY
+        width: alignedWidth
+        height: alignedHeight
+        active: root.visible
+        asynchronous: false
+        opacity: Quickshell.env("DMS_DISABLE_LAYER") === "true" ? (shouldBeVisible ? 1 : 0) : 1
+        layer.enabled: Quickshell.env("DMS_DISABLE_LAYER") !== "true"
+        layer.effect: MultiEffect {
+            source: contentLoader
+            opacity: shouldBeVisible ? 1 : 0
 
-        readonly property real screenWidth: root.screen ? root.screen.width : 1920
-        readonly property real screenHeight: root.screen ? root.screen.height : 1080
-        readonly property real gothOffset: SettingsData.dankBarGothCornersEnabled ? Theme.cornerRadius : 0
-        readonly property real calculatedX: {
-            if (SettingsData.dankBarPosition === SettingsData.Position.Left) {
-                return triggerY
-            } else if (SettingsData.dankBarPosition === SettingsData.Position.Right) {
-                return screenWidth - triggerY - popupWidth
-            } else {
-                const centerX = triggerX + (triggerWidth / 2) - (popupWidth / 2)
-                return Math.max(Theme.popupDistance, Math.min(screenWidth - popupWidth - Theme.popupDistance, centerX))
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: animationDuration
+                    easing.type: animationEasing
+                }
             }
         }
-        readonly property real calculatedY: {
-            if (SettingsData.dankBarPosition === SettingsData.Position.Left || SettingsData.dankBarPosition === SettingsData.Position.Right) {
-                const centerY = triggerX + (triggerWidth / 2) - (popupHeight / 2)
-                return Math.max(Theme.popupDistance, Math.min(screenHeight - popupHeight - Theme.popupDistance, centerY))
-            } else if (SettingsData.dankBarPosition === SettingsData.Position.Bottom) {
-                return Math.max(Theme.popupDistance, Math.min(screenHeight - popupHeight - Theme.popupDistance, screenHeight - triggerY - popupHeight + Theme.popupDistance))
-            } else {
-                return Math.max(Theme.popupDistance, Math.min(screenHeight - popupHeight - Theme.popupDistance, triggerY + Theme.popupDistance))
-            }
-        }
-        
-        width: Math.round(popupWidth)
-        height: Math.round(popupHeight)
-        x: Math.round(calculatedX)
-        y: Math.round(calculatedY)
-        opacity: shouldBeVisible ? 1 : 0
-        scale: 1
 
         Behavior on opacity {
             NumberAnimation {
@@ -121,28 +138,21 @@ PanelWindow {
                 easing.type: animationEasing
             }
         }
+    }
 
-        
-
-        Loader {
-            id: contentLoader
-            anchors.fill: parent
-            active: root.visible
-            asynchronous: false
-        }
-
-        Item {
-            anchors.fill: parent
-            focus: true
-            Keys.onPressed: event => {
-                                if (event.key === Qt.Key_Escape) {
-                                    close()
-                                    event.accepted = true
-                                }
-                            }
-            Component.onCompleted: forceActiveFocus()
-            onVisibleChanged: if (visible)
-                                  forceActiveFocus()
+    Item {
+        x: alignedX
+        y: alignedY
+        width: alignedWidth
+        height: alignedHeight
+        focus: true
+        Keys.onPressed: event => {
+            if (event.key === Qt.Key_Escape) {
+                close()
+                event.accepted = true
+            }
         }
+        Component.onCompleted: forceActiveFocus()
+        onVisibleChanged: if (visible) forceActiveFocus()
     }
 }

Widgets/DankSlideout.qml

@@ -10,6 +10,8 @@ pragma ComponentBehavior: Bound
 PanelWindow {
     id: root
 
+    WlrLayershell.namespace: "quickshell:slideout"
+
     property bool isVisible: false
     property var targetScreen: null
     property var modelData: null

Widgets/DankSlider.qml

@@ -44,7 +44,7 @@ Item {
         DankIcon {
             name: slider.leftIcon
             size: Theme.iconSize
-            color: slider.enabled ? Theme.onSurface : Theme.onSurface_38
+            color: slider.enabled ? Theme.surfaceText : Theme.onSurface_38
             anchors.verticalCenter: parent.verticalCenter
             visible: slider.leftIcon.length > 0
         }
@@ -265,7 +265,7 @@ Item {
         DankIcon {
             name: slider.rightIcon
             size: Theme.iconSize
-            color: slider.enabled ? Theme.onSurface : Theme.onSurface_38
+            color: slider.enabled ? Theme.surfaceText : Theme.onSurface_38
             anchors.verticalCenter: parent.verticalCenter
             visible: slider.rightIcon.length > 0
         }

matugen/configs/niri.toml

@@ -1,3 +1,3 @@
 [templates.niri]
 input_path = './matugen/templates/niri-colors.kdl'
-output_path = '~/.config/niri/dankshell-colors.kdl'
+output_path = '~/.config/niri/dms/colors.kdl'

shell.qml

@@ -1,10 +1,8 @@
-//@ pragma Env QSG_RENDER_LOOP=threaded
-//@ pragma UseQApplication
 import QtQuick
 import Quickshell
 
 ShellRoot {
-    id: root
+    id: entrypoint
 
     readonly property bool runGreeter: Quickshell.env("DMS_RUN_GREETER") === "1" || Quickshell.env("DMS_RUN_GREETER") === "true"
 
@@ -12,13 +10,13 @@ ShellRoot {
         id: dmsShellLoader
         asynchronous: false
         sourceComponent: DMSShell{}
-        active: !root.runGreeter
+        active: !entrypoint.runGreeter
     }
 
     Loader {
         id: dmsGreeterLoader
         asynchronous: false
         sourceComponent: DMSGreeter{}
-        active: root.runGreeter
+        active: entrypoint.runGreeter
     }
 }