Update VERSION to v0.1.15 (from DMS)

* Multi batteries support

* Multi batteries support DMS_PREFERRED_BATTERY fix

---------

Co-authored-by: Oleksandr <avktech@gmail.com>

.github/ISSUE_TEMPLATE/bug_report.md

@@ -26,6 +26,14 @@ assignees: ""
 - [ ] Hyprland
 - [ ] Other (specify)
 
+## Distribution
+
+<!-- Arch, Fedora, Debian, etc. -->
+
+## dms version
+
+<!-- Output of dms version command -->
+
 ## Description
 
 <!-- Brief description of the issue -->
@@ -45,6 +53,14 @@ assignees: ""
 ## Error Messages/Logs
 
 <!-- Please include any error messages, stack traces, or relevant logs -->
+<!-- you can get a log file with the following steps:
+dms kill
+mkdir ~/dms_logs
+nohup dms run > ~/dms_logs/dms-$(date +%s).txt 2>&1 &
+
+Then trigger your issue, and share the contents of ~/dms_logs/dms-<timestamp>.txt
+
+-->
 
 ```
 Paste error messages or logs here

.github/ISSUE_TEMPLATE/support_request.md

@@ -12,6 +12,14 @@ assignees: ""
 - [ ] Hyprland
 - [ ] other
 
+## Distribution
+
+<!-- Arch, Fedora, Debian, etc. -->
+
+## dms version
+
+<!-- Output of dms version command -->
+
 ## Description
 
 <!-- Brief description of the support needed -->

.github/workflows/copr-release.yml

@@ -0,0 +1,272 @@
+name: DMS Copr Stable Release
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Versioning (e.g., 0.1.14, leave empty for latest release)'
+        required: false
+        default: ''
+
+jobs:
+  build-and-upload:
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      
+      - name: Determine version
+        id: version
+        run: |
+          if [ -n "${{ github.event.inputs.version }}" ]; then
+            VERSION="${{ github.event.inputs.version }}"
+            echo "Using manual version: $VERSION"
+          elif [ "${{ github.event_name }}" = "release" ]; then
+            VERSION="${{ github.event.release.tag_name }}"
+            VERSION="${VERSION#v}"
+            echo "Using release version: $VERSION"
+          else
+            # Fallback to latest release
+            VERSION=$(curl -s https://api.github.com/repos/AvengeMedia/DankMaterialShell/releases/latest | jq -r '.tag_name' | sed 's/^v//')
+            echo "Using latest release version: $VERSION"
+          fi
+          
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+          echo "✅ Building DMS stable version: $VERSION"
+      
+      - name: Setup build environment
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y rpm wget curl jq gzip
+          mkdir -p ~/rpmbuild/{BUILD,BUILDROOT,RPMS,SOURCES,SPECS,SRPMS}
+          echo "✅ RPM build environment ready"
+      
+      - name: Download release assets
+        run: |
+          VERSION="${{ steps.version.outputs.version }}"
+          cd ~/rpmbuild/SOURCES
+          
+          echo "📦 Downloading DMS release assets for v${VERSION}..."
+          
+          # Download DMS QML source
+          wget "https://github.com/AvengeMedia/DankMaterialShell/releases/download/v${VERSION}/dms-qml.tar.gz" || {
+            echo "❌ Failed to download dms-qml.tar.gz for v${VERSION}"
+            exit 1
+          }
+          
+          # Download dms-cli (always use latest)
+          echo "📦 Downloading latest dms-cli..."
+          wget "https://github.com/AvengeMedia/danklinux/releases/latest/download/dms-distropkg-amd64.gz" || {
+            echo "❌ Failed to download dms-cli"
+            exit 1
+          }
+          
+          # Download dgop (always use latest)
+          echo "📦 Downloading latest dgop..."
+          wget "https://github.com/AvengeMedia/dgop/releases/latest/download/dgop-linux-amd64.gz" || {
+            echo "❌ Failed to download dgop"
+            exit 1
+          }
+          
+          echo "✅ All sources downloaded"
+          ls -lh
+      
+      - name: Generate stable spec file
+        run: |
+          VERSION="${{ steps.version.outputs.version }}"
+          CHANGELOG_DATE="$(date '+%a %b %d %Y')"
+
+          cat > ~/rpmbuild/SPECS/dms.spec <<'SPECEOF'
+          # Spec for DMS stable releases - Generated by GitHub Actions
+
+          %global debug_package %{nil}
+          %global version VERSION_PLACEHOLDER
+          %global pkg_summary DankMaterialShell - Material 3 inspired shell for Wayland compositors
+
+          Name:           dms
+          Version:        %{version}
+          Release:        1%{?dist}
+          Summary:        %{pkg_summary}
+
+          License:        GPL-3.0-only
+          URL:            https://github.com/AvengeMedia/DankMaterialShell
+
+          Source0:        dms-qml.tar.gz
+          Source1:        dms-distropkg-amd64.gz
+          Source2:        dgop-linux-amd64.gz
+
+          BuildRequires:  gzip
+
+          Requires:       (quickshell or quickshell-git)
+          Requires:       dms-cli
+          Requires:       dgop
+          Requires:       fira-code-fonts
+          Requires:       material-symbols-fonts
+          Requires:       rsms-inter-fonts
+
+          Recommends:     brightnessctl
+          Recommends:     cava
+          Recommends:     cliphist
+          Recommends:     hyprpicker
+          Recommends:     matugen
+          Recommends:     wl-clipboard
+          Recommends:     gammastep
+          Recommends:     NetworkManager
+          Recommends:     qt6-qtmultimedia
+          Suggests:       qt6ct
+
+          %description
+          DankMaterialShell (DMS) is a modern Wayland desktop shell built with Quickshell
+          and optimized for the niri and hyprland compositors. Features notifications,
+          app launcher, wallpaper customization, and fully customizable with plugins.
+
+          Includes auto-theming for GTK/Qt apps with matugen, 20+ customizable widgets,
+          process monitoring, notification center, clipboard history, dock, control center,
+          lock screen, and comprehensive plugin system.
+
+          %package -n dms-cli
+          Summary:        DankMaterialShell CLI tool
+          License:        GPL-3.0-only
+          URL:            https://github.com/AvengeMedia/danklinux
+
+          %description -n dms-cli
+          Command-line interface for DankMaterialShell configuration and management.
+          Provides native DBus bindings, NetworkManager integration, and system utilities.
+
+          %package -n dgop
+          Summary:        Stateless CPU/GPU monitor for DankMaterialShell
+          License:        MIT
+          URL:            https://github.com/AvengeMedia/dgop
+          Provides:       dgop
+
+          %description -n dgop
+          DGOP is a stateless system monitoring tool that provides CPU, GPU, memory, and
+          network statistics. Designed for integration with DankMaterialShell but can be
+          used standalone. This package always includes the latest stable dgop release.
+
+          %prep
+          %setup -q -c -n dms-qml
+
+          gunzip -c %{SOURCE1} > %{_builddir}/dms-cli
+          chmod +x %{_builddir}/dms-cli
+
+          gunzip -c %{SOURCE2} > %{_builddir}/dgop
+          chmod +x %{_builddir}/dgop
+
+          %build
+
+          %install
+          install -Dm755 %{_builddir}/dms-cli %{buildroot}%{_bindir}/dms
+          install -Dm755 %{_builddir}/dgop %{buildroot}%{_bindir}/dgop
+
+          install -dm755 %{buildroot}%{_sysconfdir}/xdg/quickshell/dms
+          cp -r %{_builddir}/dms-qml/* %{buildroot}%{_sysconfdir}/xdg/quickshell/dms/
+
+          rm -rf %{buildroot}%{_sysconfdir}/xdg/quickshell/dms/.git*
+          rm -f %{buildroot}%{_sysconfdir}/xdg/quickshell/dms/.gitignore
+          rm -rf %{buildroot}%{_sysconfdir}/xdg/quickshell/dms/.github
+          rm -f %{buildroot}%{_sysconfdir}/xdg/quickshell/dms/*.spec
+
+          %files
+          %license LICENSE
+          %doc README.md CONTRIBUTING.md
+          %{_sysconfdir}/xdg/quickshell/dms/
+
+          %files -n dms-cli
+          %{_bindir}/dms
+
+          %files -n dgop
+          %{_bindir}/dgop
+
+          %changelog
+          * CHANGELOG_DATE_PLACEHOLDER AvengeMedia <contact@avengemedia.com> - VERSION_PLACEHOLDER-1
+          - Stable release VERSION_PLACEHOLDER
+          - Built from GitHub release
+          - Includes latest dms-cli and dgop binaries
+          SPECEOF
+
+          sed -i "s/VERSION_PLACEHOLDER/${VERSION}/g" ~/rpmbuild/SPECS/dms.spec
+          sed -i "s/CHANGELOG_DATE_PLACEHOLDER/${CHANGELOG_DATE}/g" ~/rpmbuild/SPECS/dms.spec
+          
+          echo "✅ Spec file generated for v${VERSION}"
+          echo ""
+          echo "=== Spec file preview ==="
+          head -40 ~/rpmbuild/SPECS/dms.spec
+      
+      - name: Build SRPM
+        id: build
+        run: |
+          cd ~/rpmbuild/SPECS
+          
+          echo "🔨 Building SRPM..."
+          rpmbuild -bs dms.spec
+          
+          SRPM=$(ls ~/rpmbuild/SRPMS/*.src.rpm | tail -n 1)
+          SRPM_NAME=$(basename "$SRPM")
+          
+          echo "srpm_path=$SRPM" >> $GITHUB_OUTPUT
+          echo "srpm_name=$SRPM_NAME" >> $GITHUB_OUTPUT
+          
+          echo "✅ SRPM built: $SRPM_NAME"
+          echo ""
+          echo "=== SRPM Info ==="
+          rpm -qpi "$SRPM"
+      
+      - name: Upload SRPM artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: dms-stable-srpm-${{ steps.version.outputs.version }}
+          path: ${{ steps.build.outputs.srpm_path }}
+          retention-days: 90
+      
+      - name: Install Copr CLI
+        run: |
+          sudo apt-get install -y python3-pip
+          pip3 install copr-cli
+          
+          mkdir -p ~/.config
+          cat > ~/.config/copr << EOF
+          [copr-cli]
+          login = ${{ secrets.COPR_LOGIN }}
+          username = avengemedia
+          token = ${{ secrets.COPR_TOKEN }}
+          copr_url = https://copr.fedorainfracloud.org
+          EOF
+          chmod 600 ~/.config/copr
+          
+          echo "✅ Copr CLI configured"
+      
+      - name: Upload to Copr
+        run: |
+          SRPM="${{ steps.build.outputs.srpm_path }}"
+          VERSION="${{ steps.version.outputs.version }}"
+          
+          echo "🚀 Uploading SRPM to avengemedia/dms..."
+          echo "   SRPM: $(basename $SRPM)"
+          echo "   Version: $VERSION"
+          
+          BUILD_OUTPUT=$(copr-cli build avengemedia/dms "$SRPM" --nowait 2>&1)
+          echo "$BUILD_OUTPUT"
+          
+          BUILD_ID=$(echo "$BUILD_OUTPUT" | grep -oP 'Build was added to.*\K[0-9]+' || echo "unknown")
+          
+          if [ "$BUILD_ID" != "unknown" ]; then
+            echo "✅ Build submitted successfully!"
+            echo "🔗 https://copr.fedorainfracloud.org/coprs/avengemedia/dms/build/$BUILD_ID/"
+          else
+            echo "⚠️  Could not extract build ID, but upload may have succeeded"
+          fi
+      
+      - name: Build summary
+        if: always()
+        run: |
+          echo "### 🎉 DMS Stable Build Summary" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "- **Version:** ${{ steps.version.outputs.version }}" >> $GITHUB_STEP_SUMMARY
+          echo "- **SRPM:** ${{ steps.build.outputs.srpm_name }}" >> $GITHUB_STEP_SUMMARY
+          echo "- **Project:** https://copr.fedorainfracloud.org/coprs/avengemedia/dms/" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "Stable release has been built and uploaded to Copr!" >> $GITHUB_STEP_SUMMARY

.github/workflows/release.yml

@@ -1,59 +1,219 @@
-name: Create Release
+# Release from a dispatch event from the danklinux repo
+name: Create Release from DMS
+
 on:
-  push:
-    tags:
-      - 'v*'
+  repository_dispatch:
+    types: [dms_release]
+
+permissions:
+  contents: write
 
 concurrency:
-  group: release-${{ github.ref_name }}
+  group: release-${{ github.event.client_payload.tag }}
   cancel-in-progress: true
 
 jobs:
-  create_release:
-    name: 📦 Create GitHub Release
+  create_release_from_dms:
     runs-on: ubuntu-24.04
+    env:
+      TAG: ${{ github.event.client_payload.tag }}
+      DMS_REPO: ${{ github.event.client_payload.dms_repo }}
     steps:
       - uses: actions/checkout@v4
         with:
-          fetch-depth: 0 # Fetch full history for changelog generation
+          fetch-depth: 0
+
+      - name: Ensure VERSION and tag
+        run: |
+          set -euxo pipefail
+          git config user.name  "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+          echo "${TAG}" > VERSION
+
+          git add -A VERSION
+
+          if ! git diff --cached --quiet; then
+            git commit -m "Update VERSION to ${TAG} (from DMS)"
+          fi
+
+          git tag -f "${TAG}"
+
+          git push origin HEAD
+          git push -f origin "${TAG}"
 
-      # Generate changelog
       - name: Generate Changelog
         id: changelog
         run: |
-          # Get the previous tag
-          PREVIOUS_TAG=$(git describe --tags --abbrev=0 HEAD^ 2>/dev/null || echo "")
-
+          set -e
+          PREVIOUS_TAG=$(git describe --tags --abbrev=0 "${TAG}^" 2>/dev/null || echo "")
           if [ -z "$PREVIOUS_TAG" ]; then
-            echo "No previous tag found, using all commits"
             CHANGELOG=$(git log --oneline --pretty=format:"- %s (%h)" | head -50)
           else
-            echo "Generating changelog from $PREVIOUS_TAG to HEAD"
-            CHANGELOG=$(git log --oneline --pretty=format:"- %s (%h)" $PREVIOUS_TAG..HEAD)
+            CHANGELOG=$(git log --oneline --pretty=format:"- %s (%h)" "${PREVIOUS_TAG}..${TAG}")
           fi
 
-          # Create the changelog with proper formatting
-          cat > CHANGELOG.md << EOF
+          cat > RELEASE_BODY.md << 'EOF'
+          ## Assets
+
+          ### Complete Packages
+          - **`dms-full-amd64.tar.gz`** - Complete package for x86_64 systems (CLI binaries + QML source + installation guide)
+          - **`dms-full-arm64.tar.gz`** - Complete package for ARM64 systems (CLI binaries + QML source + installation guide)
+
+          ### Individual Components
+          - **`dms-cli-amd64.gz`** - DMS CLI binary for x86_64 systems
+          - **`dms-cli-arm64.gz`** - DMS CLI binary for ARM64 systems
+          - **`dms-distropkg-amd64.gz`** - DMS CLI binary built with distro_package tag for AMD64 systems
+          - **`dms-distropkg-arm64.gz`** - DMS CLI binary built with distro_package tag for ARM64 systems
+          - **`dms-qml.tar.gz`** - QML source code only
+
+          ### Checksums
+          - **`*.sha256`** - SHA256 checksums for verifying download integrity
+
+          **Installation:** Extract the `dms-full-*.tar.gz` package for your architecture and follow the `INSTALL.md` instructions inside.
+
+          ---
+
+          EOF
+
+          cat >> RELEASE_BODY.md << EOF
           ## What's Changed
 
           $CHANGELOG
 
-          **Full Changelog**: https://github.com/${{ github.repository }}/compare/${PREVIOUS_TAG}...${{ github.ref_name }}
+          **Full Changelog**: https://github.com/${{ github.repository }}/compare/${PREVIOUS_TAG}...${TAG}
           EOF
 
-          # Set output for use in release step
           echo "changelog<<EOF" >> $GITHUB_OUTPUT
-          cat CHANGELOG.md >> $GITHUB_OUTPUT
+          cat RELEASE_BODY.md >> $GITHUB_OUTPUT
           echo "EOF" >> $GITHUB_OUTPUT
 
-      # Create GitHub Release
-      - name: Create GitHub Release
-        uses: comnoco/create-release-action@v2.0.5
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Create/Update DankMaterialShell Release
+        uses: softprops/action-gh-release@v2
         with:
-          tag_name: ${{ github.ref_name }}
-          release_name: Release ${{ github.ref_name }}
+          tag_name: ${{ env.TAG }}
+          name: Release ${{ env.TAG }}
           body: ${{ steps.changelog.outputs.changelog }}
           draft: false
-          prerelease: ${{ contains(github.ref_name, '-') }}
+          prerelease: ${{ contains(env.TAG, '-') }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Download and prepare release assets
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          set -euxo pipefail
+
+          mkdir -p _release_assets
+
+          # Download DMS CLI binaries from the danklinux repo
+          gh release download "${TAG}" -R "${DMS_REPO}" --dir ./_dms_assets
+
+          # Rename CLI binaries to dms-cli-* format and copy distropkg binaries
+          for file in _dms_assets/dms-*.gz*; do
+            if [ -f "$file" ]; then
+              basename=$(basename "$file")
+              if [[ "$basename" == dms-distropkg-* ]]; then
+                cp "$file" "_release_assets/$basename"
+              else
+                newname=$(echo "$basename" | sed 's/^dms-/dms-cli-/')
+                cp "$file" "_release_assets/$newname"
+              fi
+            fi
+          done
+
+          # Create QML source package (exclude .git, .github, build artifacts)
+          tar --exclude='.git' \
+              --exclude='.github' \
+              --exclude='_dms_assets' \
+              --exclude='_release_assets' \
+              --exclude='*.tar.gz' \
+              -czf _release_assets/dms-qml.tar.gz .
+
+          # Generate checksum for QML package
+          (cd _release_assets && sha256sum dms-qml.tar.gz > dms-qml.tar.gz.sha256)
+
+          # Create full packages for each architecture
+          for arch in amd64 arm64; do
+            mkdir -p _temp_full/dms
+            mkdir -p _temp_full/bin
+
+            # Extract QML source to temp directory
+            tar -xzf _release_assets/dms-qml.tar.gz -C _temp_full/dms
+
+            # Copy CLI binary if it exists
+            if [ -f "_dms_assets/dms-${arch}.gz" ]; then
+              gunzip -c "_dms_assets/dms-${arch}.gz" > _temp_full/bin/dms
+              chmod +x _temp_full/bin/dms
+            fi
+
+            # Copy distropkg binary if it exists
+            if [ -f "_dms_assets/dms-distropkg-${arch}.gz" ]; then
+              gunzip -c "_dms_assets/dms-distropkg-${arch}.gz" > _temp_full/bin/dms-distropkg
+              chmod +x _temp_full/bin/dms-distropkg
+            fi
+
+            # Create INSTALL.md
+            cat > _temp_full/INSTALL.md << 'EOF'
+          # DankMaterialShell Installation
+
+          ## Requirements
+
+          - Wayland compositor (niri or Hyprland recommended)
+          - Quickshell framework
+          - Qt6
+
+          ## Installation Steps
+
+          1. **Install quickshell assets:**
+             ```bash
+             mkdir -p ~/.config/quickshell
+             cp -r dms ~/.config/quickshell/
+             ```
+
+          2. **Install the DMS CLI binaries:**
+             ```bash
+             sudo install -m 755 bin/dms /usr/local/bin/dms
+             # or install to a local directory:
+             mkdir -p ~/.local/bin
+             install -m 755 bin/dms ~/.local/bin/dms
+             ```
+
+          3. **Start the shell:**
+             ```bash
+             dms run
+             # or directly with quickshell (will lack some dbus integrations & plugin management):
+             quickshell -p ~/.config/quickshell/dms
+             ```
+
+          ## Configuration
+
+          - Settings are stored in `~/.config/DankMaterialShell/settings.json`
+          - Plugins go in `~/.config/DankMaterialShell/plugins/`
+          - See the documentation in the `dms/` directory for more details
+
+          ## Troubleshooting
+
+          - Run with verbose output: `quickshell -v -p ~/.config/quickshell/dms`
+          - Check logs in `~/.local/state/DankMaterialShell/`
+          - Ensure all dependencies are installed
+          EOF
+
+            # Create the full package
+            (cd _temp_full && tar -czf "../_release_assets/dms-full-${arch}.tar.gz" .)
+
+            # Generate checksum
+            (cd _release_assets && sha256sum "dms-full-${arch}.tar.gz" > "dms-full-${arch}.tar.gz.sha256")
+
+            # Cleanup
+            rm -rf _temp_full
+          done
+
+      - name: Attach all assets to release
+        uses: softprops/action-gh-release@v2
+        with:
+          tag_name: ${{ env.TAG }}
+          files: _release_assets/**
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -63,6 +63,11 @@ CLAUDE-temp.md
 niri-colors.generated.kdl
 ghostty-colors.generated.conf
 
+# Notepad files (should be in ~/.local/state/DankMaterialShell/)
+untitled-*.txt
+file:*
+notepad-files/
+
 result
 
 # If you prefer the allow list template instead of the deny list, see community template:
@@ -96,4 +101,4 @@ go.work.sum
 
 # Editor/IDE
 # .idea/
-# .vscode/
+# .vscode/

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,200 @@ When modifying the shell:
    }
    ```
 
+### Creating Plugins
+
+Plugins are external, dynamically-loaded components that extend DankMaterialShell functionality. Plugins are stored in `~/.config/DankMaterialShell/plugins/` and have their settings isolated from core DMS settings.
+
+**Plugin Types:**
+- **Widget plugins** (`"type": "widget"` or omit type field): Display UI components in DankBar
+- **Daemon plugins** (`"type": "daemon"`): Run invisibly in the background without UI
+
+#### Widget Plugins
+
+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",
+       "type": "widget",
+       "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
+
+#### Daemon Plugins
+
+Daemon plugins run invisibly in the background without any UI components. They're useful for monitoring system events, background tasks, or data synchronization.
+
+1. **Create plugin directory**:
+   ```bash
+   mkdir -p ~/.config/DankMaterialShell/plugins/YourDaemon
+   ```
+
+2. **Create manifest** (`plugin.json`):
+   ```json
+   {
+       "id": "yourDaemon",
+       "name": "Your Daemon",
+       "description": "Background daemon description",
+       "version": "1.0.0",
+       "author": "Your Name",
+       "icon": "settings_applications",
+       "type": "daemon",
+       "component": "./YourDaemon.qml",
+       "permissions": ["settings_read", "settings_write"]
+   }
+   ```
+
+3. **Create daemon component** (`YourDaemon.qml`):
+   ```qml
+   import QtQuick
+   import qs.Common
+   import qs.Services
+
+   Item {
+       id: root
+
+       property var pluginService: null
+
+       Connections {
+           target: SessionData
+           function onWallpaperPathChanged() {
+               console.log("Wallpaper changed:", SessionData.wallpaperPath)
+               if (pluginService) {
+                   pluginService.savePluginData("yourDaemon", "lastEvent", Date.now())
+               }
+           }
+       }
+
+       Component.onCompleted: {
+           console.log("Daemon started")
+       }
+   }
+   ```
+
+4. **Enable daemon**:
+   - Open Settings → Plugins
+   - Click "Scan for Plugins"
+   - Toggle daemon to enable
+   - Daemon runs automatically in background
+
+**Example**: See `PLUGINS/WallpaperWatcherDaemon/` for a complete daemon plugin that monitors wallpaper changes
+
+**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 +664,7 @@ When modifying the shell:
 - **Function Discovery**: Use grep/search tools to find existing utility functions before implementing new ones
 - **Modern QML Patterns**: Leverage new widgets like DankTextField, DankDropdown, CachingImage
 - **Structured Organization**: Follow the established Services/Modules/Widgets/Modals separation
+- **Plugin System**: For user extensions, create plugins instead of modifying core modules - see docs/PLUGINS.md
 
 ### Common Widget Patterns
 

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing
 
-Contributions are welcome and encourages.
+Contributions are welcome and encouraged.
 
 ## Formatting
 
@@ -27,4 +27,4 @@ Sometimes it just breaks code though. Like turning `"_\""` into `"_""`, so you m
 
 ## Pull request
 
-Include screenshots/video if applicable in your pull request if applicable, to visualize what your change is affecting.
+Include screenshots/video if applicable in your pull request if applicable, to visualize what your change is affecting.

Common/AppUsageHistoryData.qml

@@ -72,10 +72,6 @@ Singleton {
         saveSettings()
     }
 
-    function getAppUsageRanking() {
-        return appUsageRanking
-    }
-
     function getRankedApps() {
         var apps = []
         for (var appId in appUsageRanking) {

Common/CacheData.qml

@@ -0,0 +1,122 @@
+pragma Singleton
+
+pragma ComponentBehavior: Bound
+
+import QtCore
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+Singleton {
+    id: root
+
+    readonly property int cacheConfigVersion: 1
+
+    readonly property bool isGreeterMode: Quickshell.env("DMS_RUN_GREETER") === "1" || Quickshell.env("DMS_RUN_GREETER") === "true"
+
+    readonly property string _stateUrl: StandardPaths.writableLocation(StandardPaths.GenericCacheLocation)
+    readonly property string _stateDir: Paths.strip(_stateUrl)
+
+    property bool _loading: false
+
+    property string wallpaperLastPath: ""
+    property string profileLastPath: ""
+
+    Component.onCompleted: {
+        if (!isGreeterMode) {
+            loadCache()
+        }
+    }
+
+    function loadCache() {
+        _loading = true
+        parseCache(cacheFile.text())
+        _loading = false
+    }
+
+    function parseCache(content) {
+        _loading = true
+        try {
+            if (content && content.trim()) {
+                const cache = JSON.parse(content)
+
+                wallpaperLastPath = cache.wallpaperLastPath !== undefined ? cache.wallpaperLastPath : ""
+                profileLastPath = cache.profileLastPath !== undefined ? cache.profileLastPath : ""
+
+                if (cache.configVersion === undefined) {
+                    migrateFromUndefinedToV1(cache)
+                    cleanupUnusedKeys()
+                    saveCache()
+                }
+            }
+        } catch (e) {
+            console.warn("CacheData: Failed to parse cache:", e.message)
+        } finally {
+            _loading = false
+        }
+    }
+
+    function saveCache() {
+        if (_loading)
+            return
+        cacheFile.setText(JSON.stringify({
+                                             "wallpaperLastPath": wallpaperLastPath,
+                                             "profileLastPath": profileLastPath,
+                                             "configVersion": cacheConfigVersion
+                                         }, null, 2))
+    }
+
+    function migrateFromUndefinedToV1(cache) {
+        console.log("CacheData: Migrating configuration from undefined to version 1")
+    }
+
+    function cleanupUnusedKeys() {
+        const validKeys = [
+            "wallpaperLastPath",
+            "profileLastPath",
+            "configVersion"
+        ]
+
+        try {
+            const content = cacheFile.text()
+            if (!content || !content.trim()) return
+
+            const cache = JSON.parse(content)
+            let needsSave = false
+
+            for (const key in cache) {
+                if (!validKeys.includes(key)) {
+                    console.log("CacheData: Removing unused key:", key)
+                    delete cache[key]
+                    needsSave = true
+                }
+            }
+
+            if (needsSave) {
+                cacheFile.setText(JSON.stringify(cache, null, 2))
+            }
+        } catch (e) {
+            console.warn("CacheData: Failed to cleanup unused keys:", e.message)
+        }
+    }
+
+    FileView {
+        id: cacheFile
+
+        path: isGreeterMode ? "" : _stateDir + "/DankMaterialShell/cache.json"
+        blockLoading: true
+        blockWrites: true
+        atomicWrites: true
+        watchChanges: !isGreeterMode
+        onLoaded: {
+            if (!isGreeterMode) {
+                parseCache(cacheFile.text())
+            }
+        }
+        onLoadFailed: error => {
+            if (!isGreeterMode) {
+                console.log("CacheData: No cache file found, starting fresh")
+            }
+        }
+    }
+}

Common/DankSocket.qml

@@ -0,0 +1,62 @@
+import QtQuick
+import Quickshell.Io
+
+Item {
+    id: root
+
+    property alias path: socket.path
+    property alias parser: socket.parser
+    property bool connected: false
+
+    property int reconnectBaseMs: 400
+    property int reconnectMaxMs: 15000
+
+    property int _reconnectAttempt: 0
+
+    signal connectionStateChanged()
+
+    onConnectedChanged: {
+        socket.connected = connected
+    }
+
+    Socket {
+        id: socket
+
+        onConnectionStateChanged: {
+            root.connectionStateChanged()
+            if (connected) {
+                root._reconnectAttempt = 0
+                return
+            }
+            if (root.connected) {
+                root._scheduleReconnect()
+            }
+        }
+    }
+
+    Timer {
+        id: reconnectTimer
+        interval: 0
+        repeat: false
+        onTriggered: {
+            socket.connected = false
+            Qt.callLater(() => socket.connected = true)
+        }
+    }
+
+    function send(data) {
+        const json = typeof data === "string" ? data : JSON.stringify(data)
+        const message = json.endsWith("\n") ? json : json + "\n"
+        socket.write(message)
+        socket.flush()
+    }
+
+    function _scheduleReconnect() {
+        const pow = Math.min(_reconnectAttempt, 10)
+        const base = Math.min(reconnectBaseMs * Math.pow(2, pow), reconnectMaxMs)
+        const jitter = Math.floor(Math.random() * Math.floor(base / 4))
+        reconnectTimer.interval = base + jitter
+        reconnectTimer.restart()
+        _reconnectAttempt++
+    }
+}

Common/Facts.qml

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

Common/I18n.qml

@@ -0,0 +1,113 @@
+import QtQuick
+import Qt.labs.folderlistmodel
+import Quickshell
+import Quickshell.Io
+pragma Singleton
+pragma ComponentBehavior: Bound
+
+Singleton {
+    id: root
+
+    readonly property string _rawLocale: Qt.locale().name
+    readonly property string _lang: _rawLocale.split(/[_-]/)[0]
+    readonly property var    _candidates: {
+        const fullUnderscore = _rawLocale;
+        const fullHyphen     = _rawLocale.replace("_", "-");
+        return [fullUnderscore, fullHyphen, _lang].filter(c => c && c !== "en");
+    }
+
+  
+    readonly property url translationsFolder: Qt.resolvedUrl("../translations/poexports")
+
+    property string currentLocale: "en"
+    property var    translations: ({})
+    property bool   translationsLoaded: false
+
+    property url _selectedPath: ""
+
+    FolderListModel {
+        id: dir
+        folder: root.translationsFolder
+        nameFilters: ["*.json"]
+        showDirs: false
+        showDotAndDotDot: false
+
+        onStatusChanged: if (status === FolderListModel.Ready) root._pickTranslation()
+    }
+
+    FileView {
+        id: translationLoader
+        path: root._selectedPath
+
+        onLoaded: {
+            try {
+                root.translations = JSON.parse(text())
+                root.translationsLoaded = true
+                console.log(`I18n: Loaded translations for '${root.currentLocale}' ` +
+                            `(${Object.keys(root.translations).length} contexts)`)
+            } catch (e) {
+                console.warn(`I18n: Error parsing '${root.currentLocale}':`, e,
+                             "- falling back to English")
+                root._fallbackToEnglish()
+            }
+        }
+
+        onLoadFailed: (error) => {
+            console.warn(`I18n: Failed to load '${root.currentLocale}' (${error}), ` +
+                         "falling back to English")
+            root._fallbackToEnglish()
+        }
+    }
+
+    function _pickTranslation() {
+        const present = new Set()
+        for (let i = 0; i < dir.count; i++) {
+            const name = dir.get(i, "fileName") // e.g. "zh_CN.json"
+            if (name && name.endsWith(".json")) {
+                present.add(name.slice(0, -5))
+            }
+        }
+
+        for (let i = 0; i < _candidates.length; i++) {
+            const cand = _candidates[i]
+            if (present.has(cand)) {
+                _useLocale(cand, dir.folder + "/" + cand + ".json")
+                return
+            }
+        }
+
+        _fallbackToEnglish()
+    }
+
+    function _useLocale(localeTag, fileUrl) {
+        currentLocale = localeTag
+        _selectedPath = fileUrl
+        translationsLoaded = false
+        translations = ({})
+        console.log(`I18n: Using locale '${localeTag}' from ${fileUrl}`)
+    }
+
+    function _fallbackToEnglish() {
+        currentLocale = "en"
+        _selectedPath = ""
+        translationsLoaded = false
+        translations = ({})
+        console.warn("I18n: Falling back to built-in English strings")
+    }
+
+    function tr(term, context) {
+        if (!translationsLoaded || !translations) return term
+        const ctx = context || term
+        if (translations[ctx] && translations[ctx][term]) return translations[ctx][term]
+        for (const c in translations) {
+            if (translations[c] && translations[c][term]) return translations[c][term]
+        }
+        return term
+    }
+
+    function trContext(context, term) {
+        if (!translationsLoaded || !translations) return term
+        if (translations[context] && translations[context][term]) return translations[context][term]
+        return term
+    }
+}

Common/Paths.qml

@@ -38,6 +38,10 @@ Singleton {
         return stringify(path).replace("file://", "")
     }
 
+    function toFileUrl(path: string): string {
+        return path.startsWith("file://") ? path : "file://" + path
+    }
+
     function mkdir(path: url): void {
         Quickshell.execDetached(["mkdir", "-p", strip(path)])
     }

Common/Proc.qml

@@ -0,0 +1,69 @@
+pragma Singleton
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+Singleton {
+    id: root
+
+    property int defaultDebounceMs: 50
+    property var _procDebouncers: ({}) // id -> { timer, command, callback, waitMs }
+
+    function runCommand(id, command, callback, debounceMs) {
+        const wait = (typeof debounceMs === "number" && debounceMs >= 0) ? debounceMs : defaultDebounceMs
+
+        if (!_procDebouncers[id]) {
+            const t = Qt.createQmlObject('import QtQuick; Timer { repeat: false }', root)
+            t.triggered.connect(function() { _launchProc(id) })
+            _procDebouncers[id] = { timer: t, command: command, callback: callback, waitMs: wait }
+        } else {
+            _procDebouncers[id].command = command
+            _procDebouncers[id].callback = callback
+            _procDebouncers[id].waitMs = wait
+        }
+
+        const entry = _procDebouncers[id]
+        entry.timer.interval = entry.waitMs
+        entry.timer.restart()
+    }
+
+    function _launchProc(id) {
+        const entry = _procDebouncers[id]
+        if (!entry) return
+
+        const proc = Qt.createQmlObject('import Quickshell.Io; Process { running: false }', root)
+        const out = Qt.createQmlObject('import Quickshell.Io; StdioCollector {}', proc)
+        const err = Qt.createQmlObject('import Quickshell.Io; StdioCollector {}', proc)
+
+        proc.stdout = out
+        proc.stderr = err
+        proc.command = entry.command
+
+        let capturedOut = ""
+        let exitSeen = false
+        let exitCodeValue = -1
+
+        out.streamFinished.connect(function() {
+            capturedOut = out.text || ""
+            maybeComplete()
+        })
+
+        proc.exited.connect(function(code) {
+            exitSeen = true
+            exitCodeValue = code
+            maybeComplete()
+        })
+
+        function maybeComplete() {
+            if (!exitSeen) return
+            if (typeof entry.callback === "function") {
+                try { entry.callback(capturedOut, exitCodeValue) } catch (e) { console.warn("runCommand callback error:", e) }
+            }
+            try { proc.destroy() } catch (_) {}
+        }
+
+        proc.running = true
+    }
+}

Common/SessionData.qml

@@ -1,32 +1,48 @@
 pragma Singleton
-
 pragma ComponentBehavior: Bound
 
 import QtCore
 import QtQuick
 import Quickshell
 import Quickshell.Io
+import qs.Common
 import qs.Services
 
 Singleton {
-
     id: root
 
+    readonly property int sessionConfigVersion: 1
+
+    readonly property bool isGreeterMode: Quickshell.env("DMS_RUN_GREETER") === "1" || Quickshell.env("DMS_RUN_GREETER") === "true"
+    property bool hasTriedDefaultSession: false
+    readonly property string _stateUrl: StandardPaths.writableLocation(StandardPaths.GenericStateLocation)
+    readonly property string _stateDir: Paths.strip(_stateUrl)
+
     property bool isLightMode: false
+    property bool doNotDisturb: false
+
     property string wallpaperPath: ""
-    property string wallpaperLastPath: ""
-    property string profileLastPath: ""
     property bool perMonitorWallpaper: false
     property var monitorWallpapers: ({})
-    property bool doNotDisturb: false
+    property bool perModeWallpaper: false
+    property string wallpaperPathLight: ""
+    property string wallpaperPathDark: ""
+    property var monitorWallpapersLight: ({})
+    property var monitorWallpapersDark: ({})
+    property string wallpaperTransition: "fade"
+    readonly property var availableWallpaperTransitions: ["none", "fade", "wipe", "disc", "stripes", "iris bloom", "pixelate", "portal"]
+    property var includedTransitions: availableWallpaperTransitions.filter(t => t !== "none")
+
+    property bool wallpaperCyclingEnabled: false
+    property string wallpaperCyclingMode: "interval"
+    property int wallpaperCyclingInterval: 300
+    property string wallpaperCyclingTime: "06:00"
+    property var monitorCyclingSettings: ({})
+
     property bool nightModeEnabled: false
     property int nightModeTemperature: 4500
     property bool nightModeAutoEnabled: false
     property string nightModeAutoMode: "time"
-    
-    property bool hasTriedDefaultSession: false
-    readonly property string _stateUrl: StandardPaths.writableLocation(StandardPaths.GenericStateLocation)
-    readonly property string _stateDir: _stateUrl.startsWith("file://") ? _stateUrl.substring(7) : _stateUrl
     property int nightModeStartHour: 18
     property int nightModeStartMinute: 0
     property int nightModeEndHour: 6
@@ -34,29 +50,30 @@ Singleton {
     property real latitude: 0.0
     property real longitude: 0.0
     property string nightModeLocationProvider: ""
+
     property var pinnedApps: []
+    property var recentColors: []
+    property bool showThirdPartyPlugins: false
+    property string launchPrefix: ""
+    property string lastBrightnessDevice: ""
+
     property int selectedGpuIndex: 0
     property bool nvidiaGpuTempEnabled: false
     property bool nonNvidiaGpuTempEnabled: false
     property var enabledGpuPciIds: []
-    property bool wallpaperCyclingEnabled: false
-    property string wallpaperCyclingMode: "interval" // "interval" or "time"
-    property int wallpaperCyclingInterval: 300 // seconds (5 minutes)
-    property string wallpaperCyclingTime: "06:00" // HH:mm format
-    property string lastBrightnessDevice: ""
-    property string notepadContent: ""
-    property string notepadCurrentFileName: ""
-    property string notepadCurrentFileUrl: ""
-    property string notepadLastSavedContent: ""
-    property var notepadTabs: []
-    property int notepadCurrentTabIndex: 0
 
     Component.onCompleted: {
-        loadSettings()
+        if (!isGreeterMode) {
+            loadSettings()
+        }
     }
 
     function loadSettings() {
-        parseSettings(settingsFile.text())
+        if (isGreeterMode) {
+            parseSettings(greeterSessionFile.text())
+        } else {
+            parseSettings(settingsFile.text())
+        }
     }
 
     function parseSettings(content) {
@@ -65,16 +82,18 @@ Singleton {
                 var settings = JSON.parse(content)
                 isLightMode = settings.isLightMode !== undefined ? settings.isLightMode : false
                 wallpaperPath = settings.wallpaperPath !== undefined ? settings.wallpaperPath : ""
-                wallpaperLastPath = settings.wallpaperLastPath !== undefined ? settings.wallpaperLastPath : ""
-                profileLastPath = settings.profileLastPath !== undefined ? settings.profileLastPath : ""
                 perMonitorWallpaper = settings.perMonitorWallpaper !== undefined ? settings.perMonitorWallpaper : false
                 monitorWallpapers = settings.monitorWallpapers !== undefined ? settings.monitorWallpapers : {}
+                perModeWallpaper = settings.perModeWallpaper !== undefined ? settings.perModeWallpaper : false
+                wallpaperPathLight = settings.wallpaperPathLight !== undefined ? settings.wallpaperPathLight : ""
+                wallpaperPathDark = settings.wallpaperPathDark !== undefined ? settings.wallpaperPathDark : ""
+                monitorWallpapersLight = settings.monitorWallpapersLight !== undefined ? settings.monitorWallpapersLight : {}
+                monitorWallpapersDark = settings.monitorWallpapersDark !== undefined ? settings.monitorWallpapersDark : {}
                 doNotDisturb = settings.doNotDisturb !== undefined ? settings.doNotDisturb : false
                 nightModeEnabled = settings.nightModeEnabled !== undefined ? settings.nightModeEnabled : false
                 nightModeTemperature = settings.nightModeTemperature !== undefined ? settings.nightModeTemperature : 4500
                 nightModeAutoEnabled = settings.nightModeAutoEnabled !== undefined ? settings.nightModeAutoEnabled : false
                 nightModeAutoMode = settings.nightModeAutoMode !== undefined ? settings.nightModeAutoMode : "time"
-                // Handle legacy time format
                 if (settings.nightModeStartTime !== undefined) {
                     const parts = settings.nightModeStartTime.split(":")
                     nightModeStartHour = parseInt(parts[0]) || 18
@@ -103,45 +122,25 @@ Singleton {
                 wallpaperCyclingMode = settings.wallpaperCyclingMode !== undefined ? settings.wallpaperCyclingMode : "interval"
                 wallpaperCyclingInterval = settings.wallpaperCyclingInterval !== undefined ? settings.wallpaperCyclingInterval : 300
                 wallpaperCyclingTime = settings.wallpaperCyclingTime !== undefined ? settings.wallpaperCyclingTime : "06:00"
+                monitorCyclingSettings = settings.monitorCyclingSettings !== undefined ? settings.monitorCyclingSettings : {}
                 lastBrightnessDevice = settings.lastBrightnessDevice !== undefined ? settings.lastBrightnessDevice : ""
-                notepadContent = settings.notepadContent !== undefined ? settings.notepadContent : ""
-                
-                // Generate system themes but don't override user's theme choice
-                if (typeof Theme !== "undefined") {
-                    Theme.generateSystemThemesFromCurrentTheme()
+                launchPrefix = settings.launchPrefix !== undefined ? settings.launchPrefix : ""
+                wallpaperTransition = settings.wallpaperTransition !== undefined ? settings.wallpaperTransition : "fade"
+                includedTransitions = settings.includedTransitions !== undefined ? settings.includedTransitions : availableWallpaperTransitions.filter(t => t !== "none")
+                recentColors = settings.recentColors !== undefined ? settings.recentColors : []
+                showThirdPartyPlugins = settings.showThirdPartyPlugins !== undefined ? settings.showThirdPartyPlugins : false
+
+                if (settings.configVersion === undefined) {
+                    migrateFromUndefinedToV1(settings)
+                    saveSettings()
+                } else if (settings.configVersion === sessionConfigVersion) {
+                    cleanupUnusedKeys()
                 }
-                notepadCurrentFileName = settings.notepadCurrentFileName !== undefined ? settings.notepadCurrentFileName : ""
-                notepadCurrentFileUrl = settings.notepadCurrentFileUrl !== undefined ? settings.notepadCurrentFileUrl : ""
-                notepadLastSavedContent = settings.notepadLastSavedContent !== undefined ? settings.notepadLastSavedContent : ""
-                notepadTabs = settings.notepadTabs !== undefined ? settings.notepadTabs : []
-                notepadCurrentTabIndex = settings.notepadCurrentTabIndex !== undefined ? settings.notepadCurrentTabIndex : 0
-                
-                // Migrate legacy single notepad to tabs if needed
-                if (notepadTabs.length === 0 && (notepadContent || notepadCurrentFileName)) {
-                    notepadTabs = [{
-                        id: Date.now(),
-                        title: notepadCurrentFileName || "Untitled",
-                        content: notepadContent,
-                        fileName: notepadCurrentFileName,
-                        fileUrl: notepadCurrentFileUrl,
-                        lastSavedContent: notepadLastSavedContent,
-                        hasUnsavedChanges: false
-                    }]
-                    notepadCurrentTabIndex = 0
-                }
-                
-                // Ensure at least one tab exists
-                if (notepadTabs.length === 0) {
-                    notepadTabs = [{
-                        id: Date.now(),
-                        title: "Untitled",
-                        content: "",
-                        fileName: "",
-                        fileUrl: "",
-                        lastSavedContent: "",
-                        hasUnsavedChanges: false
-                    }]
-                    notepadCurrentTabIndex = 0
+
+                if (!isGreeterMode) {
+                    if (typeof Theme !== "undefined") {
+                        Theme.generateSystemThemesFromCurrentTheme()
+                    }
                 }
             }
         } catch (e) {
@@ -150,13 +149,17 @@ Singleton {
     }
 
     function saveSettings() {
+        if (isGreeterMode) return
         settingsFile.setText(JSON.stringify({
                                                 "isLightMode": isLightMode,
                                                 "wallpaperPath": wallpaperPath,
-                                                "wallpaperLastPath": wallpaperLastPath,
-                                                "profileLastPath": profileLastPath,
                                                 "perMonitorWallpaper": perMonitorWallpaper,
                                                 "monitorWallpapers": monitorWallpapers,
+                                                "perModeWallpaper": perModeWallpaper,
+                                                "wallpaperPathLight": wallpaperPathLight,
+                                                "wallpaperPathDark": wallpaperPathDark,
+                                                "monitorWallpapersLight": monitorWallpapersLight,
+                                                "monitorWallpapersDark": monitorWallpapersDark,
                                                 "doNotDisturb": doNotDisturb,
                                                 "nightModeEnabled": nightModeEnabled,
                                                 "nightModeTemperature": nightModeTemperature,
@@ -178,18 +181,106 @@ Singleton {
                                                 "wallpaperCyclingMode": wallpaperCyclingMode,
                                                 "wallpaperCyclingInterval": wallpaperCyclingInterval,
                                                 "wallpaperCyclingTime": wallpaperCyclingTime,
+                                                "monitorCyclingSettings": monitorCyclingSettings,
                                                 "lastBrightnessDevice": lastBrightnessDevice,
-                                                "notepadContent": notepadContent,
-                                                "notepadCurrentFileName": notepadCurrentFileName,
-                                                "notepadCurrentFileUrl": notepadCurrentFileUrl,
-                                                "notepadLastSavedContent": notepadLastSavedContent,
-                                                "notepadTabs": notepadTabs,
-                                                "notepadCurrentTabIndex": notepadCurrentTabIndex
+                                                "launchPrefix": launchPrefix,
+                                                "wallpaperTransition": wallpaperTransition,
+                                                "includedTransitions": includedTransitions,
+                                                "recentColors": recentColors,
+                                                "showThirdPartyPlugins": showThirdPartyPlugins,
+                                                "configVersion": sessionConfigVersion
                                             }, null, 2))
     }
 
+    function migrateFromUndefinedToV1(settings) {
+        console.log("SessionData: Migrating configuration from undefined to version 1")
+        if (typeof SettingsData !== "undefined") {
+            if (settings.acMonitorTimeout !== undefined) {
+                SettingsData.setAcMonitorTimeout(settings.acMonitorTimeout)
+            }
+            if (settings.acLockTimeout !== undefined) {
+                SettingsData.setAcLockTimeout(settings.acLockTimeout)
+            }
+            if (settings.acSuspendTimeout !== undefined) {
+                SettingsData.setAcSuspendTimeout(settings.acSuspendTimeout)
+            }
+            if (settings.acHibernateTimeout !== undefined) {
+                SettingsData.setAcHibernateTimeout(settings.acHibernateTimeout)
+            }
+            if (settings.batteryMonitorTimeout !== undefined) {
+                SettingsData.setBatteryMonitorTimeout(settings.batteryMonitorTimeout)
+            }
+            if (settings.batteryLockTimeout !== undefined) {
+                SettingsData.setBatteryLockTimeout(settings.batteryLockTimeout)
+            }
+            if (settings.batterySuspendTimeout !== undefined) {
+                SettingsData.setBatterySuspendTimeout(settings.batterySuspendTimeout)
+            }
+            if (settings.batteryHibernateTimeout !== undefined) {
+                SettingsData.setBatteryHibernateTimeout(settings.batteryHibernateTimeout)
+            }
+            if (settings.lockBeforeSuspend !== undefined) {
+                SettingsData.setLockBeforeSuspend(settings.lockBeforeSuspend)
+            }
+            if (settings.loginctlLockIntegration !== undefined) {
+                SettingsData.setLoginctlLockIntegration(settings.loginctlLockIntegration)
+            }
+            if (settings.launchPrefix !== undefined) {
+                SettingsData.setLaunchPrefix(settings.launchPrefix)
+            }
+        }
+        if (typeof CacheData !== "undefined") {
+            if (settings.wallpaperLastPath !== undefined) {
+                CacheData.wallpaperLastPath = settings.wallpaperLastPath
+            }
+            if (settings.profileLastPath !== undefined) {
+                CacheData.profileLastPath = settings.profileLastPath
+            }
+            CacheData.saveCache()
+        }
+    }
+
+    function cleanupUnusedKeys() {
+        const validKeys = [
+            "isLightMode", "wallpaperPath", "perMonitorWallpaper", "monitorWallpapers", "perModeWallpaper",
+            "wallpaperPathLight", "wallpaperPathDark", "monitorWallpapersLight",
+            "monitorWallpapersDark", "doNotDisturb", "nightModeEnabled",
+            "nightModeTemperature", "nightModeAutoEnabled", "nightModeAutoMode",
+            "nightModeStartHour", "nightModeStartMinute", "nightModeEndHour",
+            "nightModeEndMinute", "latitude", "longitude", "nightModeLocationProvider",
+            "pinnedApps", "selectedGpuIndex", "nvidiaGpuTempEnabled",
+            "nonNvidiaGpuTempEnabled", "enabledGpuPciIds", "wallpaperCyclingEnabled",
+            "wallpaperCyclingMode", "wallpaperCyclingInterval", "wallpaperCyclingTime",
+            "monitorCyclingSettings", "lastBrightnessDevice", "wallpaperTransition",
+            "includedTransitions", "recentColors", "showThirdPartyPlugins", "configVersion"
+        ]
+
+        try {
+            const content = settingsFile.text()
+            if (!content || !content.trim()) return
+
+            const settings = JSON.parse(content)
+            let needsSave = false
+
+            for (const key in settings) {
+                if (!validKeys.includes(key)) {
+                    console.log("SessionData: Removing unused key:", key)
+                    delete settings[key]
+                    needsSave = true
+                }
+            }
+
+            if (needsSave) {
+                settingsFile.setText(JSON.stringify(settings, null, 2))
+            }
+        } catch (e) {
+            console.warn("SessionData: Failed to cleanup unused keys:", e.message)
+        }
+    }
+
     function setLightMode(lightMode) {
         isLightMode = lightMode
+        syncWallpaperForCurrentMode()
         saveSettings()
     }
 
@@ -198,6 +289,212 @@ Singleton {
         saveSettings()
     }
 
+    function setWallpaperPath(path) {
+        wallpaperPath = path
+        saveSettings()
+    }
+
+    function setWallpaper(imagePath) {
+        wallpaperPath = imagePath
+        if (perModeWallpaper) {
+            if (isLightMode) {
+                wallpaperPathLight = imagePath
+            } else {
+                wallpaperPathDark = imagePath
+            }
+        }
+        saveSettings()
+
+        if (typeof Theme !== "undefined") {
+            Theme.generateSystemThemesFromCurrentTheme()
+        }
+    }
+
+    function setWallpaperColor(color) {
+        wallpaperPath = color
+        if (perModeWallpaper) {
+            if (isLightMode) {
+                wallpaperPathLight = color
+            } else {
+                wallpaperPathDark = color
+            }
+        }
+        saveSettings()
+
+        if (typeof Theme !== "undefined") {
+            Theme.generateSystemThemesFromCurrentTheme()
+        }
+    }
+
+    function clearWallpaper() {
+        wallpaperPath = ""
+        saveSettings()
+
+        if (typeof Theme !== "undefined") {
+            if (typeof SettingsData !== "undefined" && SettingsData.theme) {
+                Theme.switchTheme(SettingsData.theme)
+            } else {
+                Theme.switchTheme("blue")
+            }
+        }
+    }
+
+    function setPerMonitorWallpaper(enabled) {
+        perMonitorWallpaper = enabled
+        if (enabled && perModeWallpaper) {
+            syncWallpaperForCurrentMode()
+        }
+        saveSettings()
+
+        if (typeof Theme !== "undefined") {
+            Theme.generateSystemThemesFromCurrentTheme()
+        }
+    }
+
+    function setPerModeWallpaper(enabled) {
+        if (enabled && wallpaperCyclingEnabled) {
+            setWallpaperCyclingEnabled(false)
+        }
+        if (enabled && perMonitorWallpaper) {
+            var monitorCyclingAny = false
+            for (var key in monitorCyclingSettings) {
+                if (monitorCyclingSettings[key].enabled) {
+                    monitorCyclingAny = true
+                    break
+                }
+            }
+            if (monitorCyclingAny) {
+                var newSettings = Object.assign({}, monitorCyclingSettings)
+                for (var screenName in newSettings) {
+                    newSettings[screenName].enabled = false
+                }
+                monitorCyclingSettings = newSettings
+            }
+        }
+
+        perModeWallpaper = enabled
+        if (enabled) {
+            if (perMonitorWallpaper) {
+                monitorWallpapersLight = Object.assign({}, monitorWallpapers)
+                monitorWallpapersDark = Object.assign({}, monitorWallpapers)
+            } else {
+                wallpaperPathLight = wallpaperPath
+                wallpaperPathDark = wallpaperPath
+            }
+        } else {
+            syncWallpaperForCurrentMode()
+        }
+        saveSettings()
+
+        if (typeof Theme !== "undefined") {
+            Theme.generateSystemThemesFromCurrentTheme()
+        }
+    }
+
+    function setMonitorWallpaper(screenName, path) {
+        var newMonitorWallpapers = Object.assign({}, monitorWallpapers)
+        if (path && path !== "") {
+            newMonitorWallpapers[screenName] = path
+        } else {
+            delete newMonitorWallpapers[screenName]
+        }
+        monitorWallpapers = newMonitorWallpapers
+
+        if (perModeWallpaper) {
+            if (isLightMode) {
+                var newLight = Object.assign({}, monitorWallpapersLight)
+                if (path && path !== "") {
+                    newLight[screenName] = path
+                } else {
+                    delete newLight[screenName]
+                }
+                monitorWallpapersLight = newLight
+            } else {
+                var newDark = Object.assign({}, monitorWallpapersDark)
+                if (path && path !== "") {
+                    newDark[screenName] = path
+                } else {
+                    delete newDark[screenName]
+                }
+                monitorWallpapersDark = newDark
+            }
+        }
+
+        saveSettings()
+
+        if (typeof Theme !== "undefined" && typeof Quickshell !== "undefined") {
+            var screens = Quickshell.screens
+            if (screens.length > 0 && screenName === screens[0].name) {
+                Theme.generateSystemThemesFromCurrentTheme()
+            }
+        }
+    }
+
+    function setWallpaperTransition(transition) {
+        wallpaperTransition = transition
+        saveSettings()
+    }
+
+    function setWallpaperCyclingEnabled(enabled) {
+        wallpaperCyclingEnabled = enabled
+        saveSettings()
+    }
+
+    function setWallpaperCyclingMode(mode) {
+        wallpaperCyclingMode = mode
+        saveSettings()
+    }
+
+    function setWallpaperCyclingInterval(interval) {
+        wallpaperCyclingInterval = interval
+        saveSettings()
+    }
+
+    function setWallpaperCyclingTime(time) {
+        wallpaperCyclingTime = time
+        saveSettings()
+    }
+
+    function setMonitorCyclingEnabled(screenName, enabled) {
+        var newSettings = Object.assign({}, monitorCyclingSettings)
+        if (!newSettings[screenName]) {
+            newSettings[screenName] = { enabled: false, mode: "interval", interval: 300, time: "06:00" }
+        }
+        newSettings[screenName].enabled = enabled
+        monitorCyclingSettings = newSettings
+        saveSettings()
+    }
+
+    function setMonitorCyclingMode(screenName, mode) {
+        var newSettings = Object.assign({}, monitorCyclingSettings)
+        if (!newSettings[screenName]) {
+            newSettings[screenName] = { enabled: false, mode: "interval", interval: 300, time: "06:00" }
+        }
+        newSettings[screenName].mode = mode
+        monitorCyclingSettings = newSettings
+        saveSettings()
+    }
+
+    function setMonitorCyclingInterval(screenName, interval) {
+        var newSettings = Object.assign({}, monitorCyclingSettings)
+        if (!newSettings[screenName]) {
+            newSettings[screenName] = { enabled: false, mode: "interval", interval: 300, time: "06:00" }
+        }
+        newSettings[screenName].interval = interval
+        monitorCyclingSettings = newSettings
+        saveSettings()
+    }
+
+    function setMonitorCyclingTime(screenName, time) {
+        var newSettings = Object.assign({}, monitorCyclingSettings)
+        if (!newSettings[screenName]) {
+            newSettings[screenName] = { enabled: false, mode: "interval", interval: 300, time: "06:00" }
+        }
+        newSettings[screenName].time = time
+        monitorCyclingSettings = newSettings
+        saveSettings()
+    }
+
     function setNightModeEnabled(enabled) {
         nightModeEnabled = enabled
         saveSettings()
@@ -256,58 +553,6 @@ Singleton {
         saveSettings()
     }
 
-    function setWallpaperPath(path) {
-        wallpaperPath = path
-        saveSettings()
-    }
-
-    function setWallpaper(imagePath) {
-        wallpaperPath = imagePath
-        saveSettings()
-
-        if (typeof Theme !== "undefined") {
-            if (Theme.currentTheme === Theme.dynamic) {
-                Theme.extractColors()
-            }
-            Theme.generateSystemThemesFromCurrentTheme()
-        }
-    }
-
-    function setWallpaperColor(color) {
-        wallpaperPath = color
-        saveSettings()
-
-        if (typeof Theme !== "undefined") {
-            if (Theme.currentTheme === Theme.dynamic) {
-                Theme.extractColors()
-            }
-            Theme.generateSystemThemesFromCurrentTheme()
-        }
-    }
-
-    function clearWallpaper() {
-        wallpaperPath = ""
-        saveSettings()
-
-        if (typeof Theme !== "undefined") {
-            if (typeof SettingsData !== "undefined" && SettingsData.theme) {
-                Theme.switchTheme(SettingsData.theme)
-            } else {
-                Theme.switchTheme("blue")
-            }
-        }
-    }
-
-    function setWallpaperLastPath(path) {
-        wallpaperLastPath = path
-        saveSettings()
-    }
-
-    function setProfileLastPath(path) {
-        profileLastPath = path
-        saveSettings()
-    }
-
     function setPinnedApps(apps) {
         pinnedApps = apps
         saveSettings()
@@ -334,6 +579,31 @@ Singleton {
         return appId && pinnedApps.indexOf(appId) !== -1
     }
 
+    function addRecentColor(color) {
+        const colorStr = color.toString()
+        let recent = recentColors.slice()
+        recent = recent.filter(c => c !== colorStr)
+        recent.unshift(colorStr)
+        if (recent.length > 5) recent = recent.slice(0, 5)
+        recentColors = recent
+        saveSettings()
+    }
+
+    function setShowThirdPartyPlugins(enabled) {
+        showThirdPartyPlugins = enabled
+        saveSettings()
+    }
+
+    function setLaunchPrefix(prefix) {
+        launchPrefix = prefix
+        saveSettings()
+    }
+
+    function setLastBrightnessDevice(device) {
+        lastBrightnessDevice = device
+        saveSettings()
+    }
+
     function setSelectedGpuIndex(index) {
         selectedGpuIndex = index
         saveSettings()
@@ -354,63 +624,15 @@ Singleton {
         saveSettings()
     }
 
-    function setWallpaperCyclingEnabled(enabled) {
-        wallpaperCyclingEnabled = enabled
-        saveSettings()
-    }
+    function syncWallpaperForCurrentMode() {
+        if (!perModeWallpaper) return
 
-    function setWallpaperCyclingMode(mode) {
-        wallpaperCyclingMode = mode
-        saveSettings()
-    }
-
-    function setWallpaperCyclingInterval(interval) {
-        wallpaperCyclingInterval = interval
-        saveSettings()
-    }
-
-    function setWallpaperCyclingTime(time) {
-        wallpaperCyclingTime = time
-        saveSettings()
-    }
-
-    function setPerMonitorWallpaper(enabled) {
-        perMonitorWallpaper = enabled
-        
-        // Disable automatic cycling when per-monitor mode is enabled
-        if (enabled && wallpaperCyclingEnabled) {
-            wallpaperCyclingEnabled = false
+        if (perMonitorWallpaper) {
+            monitorWallpapers = isLightMode ? Object.assign({}, monitorWallpapersLight) : Object.assign({}, monitorWallpapersDark)
+            return
         }
-        
-        saveSettings()
 
-        // Refresh dynamic theming when per-monitor mode changes
-        if (typeof Theme !== "undefined") {
-            Theme.generateSystemThemesFromCurrentTheme()
-        }
-    }
-
-    function setMonitorWallpaper(screenName, path) {
-        var newMonitorWallpapers = Object.assign({}, monitorWallpapers)
-        if (path && path !== "") {
-            newMonitorWallpapers[screenName] = path
-        } else {
-            delete newMonitorWallpapers[screenName]
-        }
-        monitorWallpapers = newMonitorWallpapers
-        saveSettings()
-
-        // Trigger dynamic theming if this is the first monitor and dynamic theming is enabled
-        if (typeof Theme !== "undefined" && typeof Quickshell !== "undefined") {
-            var screens = Quickshell.screens
-            if (screens.length > 0 && screenName === screens[0].name) {
-                if (typeof SettingsData !== "undefined" && SettingsData.wallpaperDynamicTheming) {
-                    Theme.switchTheme("dynamic")
-                    Theme.extractColors()
-                }
-                Theme.generateSystemThemesFromCurrentTheme()
-            }
-        }
+        wallpaperPath = isLightMode ? wallpaperPathLight : wallpaperPathDark
     }
 
     function getMonitorWallpaper(screenName) {
@@ -420,35 +642,60 @@ Singleton {
         return monitorWallpapers[screenName] || wallpaperPath
     }
 
-    function setLastBrightnessDevice(device) {
-        lastBrightnessDevice = device
-        saveSettings()
+    function getMonitorCyclingSettings(screenName) {
+        return monitorCyclingSettings[screenName] || {
+            enabled: false,
+            mode: "interval",
+            interval: 300,
+            time: "06:00"
+        }
     }
 
     FileView {
         id: settingsFile
 
-        path: StandardPaths.writableLocation(StandardPaths.GenericStateLocation) + "/DankMaterialShell/session.json"
-        blockLoading: true
+        path: isGreeterMode ? "" : StandardPaths.writableLocation(StandardPaths.GenericStateLocation) + "/DankMaterialShell/session.json"
+        blockLoading: isGreeterMode
         blockWrites: true
-        watchChanges: true
+        watchChanges: !isGreeterMode
         onLoaded: {
-            parseSettings(settingsFile.text())
-            hasTriedDefaultSession = false
+            if (!isGreeterMode) {
+                parseSettings(settingsFile.text())
+                hasTriedDefaultSession = false
+            }
         }
         onLoadFailed: error => {
-            if (!hasTriedDefaultSession) {
+            if (!isGreeterMode && !hasTriedDefaultSession) {
                 hasTriedDefaultSession = true
                 defaultSessionCheckProcess.running = true
             }
         }
     }
 
+    FileView {
+        id: greeterSessionFile
+
+        path: {
+            const greetCfgDir = Quickshell.env("DMS_GREET_CFG_DIR") || "/etc/greetd/.dms"
+            return greetCfgDir + "/session.json"
+        }
+        preload: isGreeterMode
+        blockLoading: false
+        blockWrites: true
+        watchChanges: false
+        printErrors: true
+        onLoaded: {
+            if (isGreeterMode) {
+                parseSettings(greeterSessionFile.text())
+            }
+        }
+    }
+
     Process {
         id: defaultSessionCheckProcess
 
         command: ["sh", "-c", "CONFIG_DIR=\"" + _stateDir
-            + "/DankMaterialShell\"; if [ -f \"$CONFIG_DIR/default-session.json\" ] && [ ! -f \"$CONFIG_DIR/session.json\" ]; then cp \"$CONFIG_DIR/default-session.json\" \"$CONFIG_DIR/session.json\" && echo 'copied'; else echo 'not_found'; fi"]
+            + "/DankMaterialShell\"; if [ -f \"$CONFIG_DIR/default-session.json\" ] && [ ! -f \"$CONFIG_DIR/session.json\" ]; then cp --no-preserve=mode \"$CONFIG_DIR/default-session.json\" \"$CONFIG_DIR/session.json\" && echo 'copied'; else echo 'not_found'; fi"]
         running: false
         onExited: exitCode => {
             if (exitCode === 0) {

Common/StockThemes.js

@@ -1,41 +1,136 @@
 // Stock theme definitions for DankMaterialShell
 // Separated from Theme.qml to keep that file clean
 
+const CatppuccinMocha = {
+    surface: "#313244",
+    surfaceText: "#cdd6f4",
+    surfaceVariant: "#313244",
+    surfaceVariantText: "#a6adc8",
+    background: "#1e1e2e",
+    backgroundText: "#cdd6f4",
+    outline: "#6c7086",
+    surfaceContainer: "#45475a",
+    surfaceContainerHigh: "#585b70",
+    surfaceContainerHighest: "#6c7086"
+}
+
+const CatppuccinLatte = {
+    surface: "#e6e9ef",
+    surfaceText: "#4c4f69",
+    surfaceVariant: "#e6e9ef",
+    surfaceVariantText: "#6c6f85",
+    background: "#eff1f5",
+    backgroundText: "#4c4f69",
+    outline: "#9ca0b0",
+    surfaceContainer: "#dce0e8",
+    surfaceContainerHigh: "#ccd0da",
+    surfaceContainerHighest: "#bcc0cc"
+}
+
+const CatppuccinVariants = {
+    "cat-rosewater": {
+        name: "Rosewater",
+        dark: { primary: "#f5e0dc", secondary: "#f2cdcd", primaryText: "#1e1e2e", primaryContainer: "#7d5d56", surfaceTint: "#f5e0dc" },
+        light: { primary: "#dc8a78", secondary: "#dd7878", primaryText: "#ffffff", primaryContainer: "#f6e7e3", surfaceTint: "#dc8a78" }
+    },
+    "cat-flamingo": {
+        name: "Flamingo",
+        dark: { primary: "#f2cdcd", secondary: "#f5e0dc", primaryText: "#1e1e2e", primaryContainer: "#7a555a", surfaceTint: "#f2cdcd" },
+        light: { primary: "#dd7878", secondary: "#dc8a78", primaryText: "#ffffff", primaryContainer: "#f6e5e5", surfaceTint: "#dd7878" }
+    },
+    "cat-pink": {
+        name: "Pink",
+        dark: { primary: "#f5c2e7", secondary: "#cba6f7", primaryText: "#1e1e2e", primaryContainer: "#7a3f69", surfaceTint: "#f5c2e7" },
+        light: { primary: "#ea76cb", secondary: "#8839ef", primaryText: "#ffffff", primaryContainer: "#f7d7ee", surfaceTint: "#ea76cb" }
+    },
+    "cat-mauve": {
+        name: "Mauve",
+        dark: { primary: "#cba6f7", secondary: "#b4befe", primaryText: "#1e1e2e", primaryContainer: "#55307f", surfaceTint: "#cba6f7" },
+        light: { primary: "#8839ef", secondary: "#7287fd", primaryText: "#ffffff", primaryContainer: "#eadcff", surfaceTint: "#8839ef" }
+    },
+    "cat-red": {
+        name: "Red",
+        dark: { primary: "#f38ba8", secondary: "#eba0ac", primaryText: "#1e1e2e", primaryContainer: "#6f2438", surfaceTint: "#f38ba8" },
+        light: { primary: "#d20f39", secondary: "#e64553", primaryText: "#ffffff", primaryContainer: "#f6d0d6", surfaceTint: "#d20f39" }
+    },
+    "cat-maroon": {
+        name: "Maroon",
+        dark: { primary: "#eba0ac", secondary: "#f38ba8", primaryText: "#1e1e2e", primaryContainer: "#6d3641", surfaceTint: "#eba0ac" },
+        light: { primary: "#e64553", secondary: "#d20f39", primaryText: "#ffffff", primaryContainer: "#f7d8dc", surfaceTint: "#e64553" }
+    },
+    "cat-peach": {
+        name: "Peach",
+        dark: { primary: "#fab387", secondary: "#f9e2af", primaryText: "#1e1e2e", primaryContainer: "#734226", surfaceTint: "#fab387" },
+        light: { primary: "#fe640b", secondary: "#df8e1d", primaryText: "#ffffff", primaryContainer: "#ffe4d5", surfaceTint: "#fe640b" }
+    },
+    "cat-yellow": {
+        name: "Yellow",
+        dark: { primary: "#f9e2af", secondary: "#a6e3a1", primaryText: "#1e1e2e", primaryContainer: "#6e5a2f", surfaceTint: "#f9e2af" },
+        light: { primary: "#df8e1d", secondary: "#40a02b", primaryText: "#ffffff", primaryContainer: "#fff6d6", surfaceTint: "#df8e1d" }
+    },
+    "cat-green": {
+        name: "Green",
+        dark: { primary: "#a6e3a1", secondary: "#94e2d5", primaryText: "#1e1e2e", primaryContainer: "#2f5f36", surfaceTint: "#a6e3a1" },
+        light: { primary: "#40a02b", secondary: "#179299", primaryText: "#ffffff", primaryContainer: "#dff4e0", surfaceTint: "#40a02b" }
+    },
+    "cat-teal": {
+        name: "Teal",
+        dark: { primary: "#94e2d5", secondary: "#89dceb", primaryText: "#1e1e2e", primaryContainer: "#2e5e59", surfaceTint: "#94e2d5" },
+        light: { primary: "#179299", secondary: "#04a5e5", primaryText: "#ffffff", primaryContainer: "#daf3f1", surfaceTint: "#179299" }
+    },
+    "cat-sky": {
+        name: "Sky",
+        dark: { primary: "#89dceb", secondary: "#74c7ec", primaryText: "#1e1e2e", primaryContainer: "#24586a", surfaceTint: "#89dceb" },
+        light: { primary: "#04a5e5", secondary: "#209fb5", primaryText: "#ffffff", primaryContainer: "#dbf1fb", surfaceTint: "#04a5e5" }
+    },
+    "cat-sapphire": {
+        name: "Sapphire",
+        dark: { primary: "#74c7ec", secondary: "#89b4fa", primaryText: "#1e1e2e", primaryContainer: "#1f4d6f", surfaceTint: "#74c7ec" },
+        light: { primary: "#209fb5", secondary: "#1e66f5", primaryText: "#ffffff", primaryContainer: "#def3f8", surfaceTint: "#209fb5" }
+    },
+    "cat-blue": {
+        name: "Blue",
+        dark: { primary: "#89b4fa", secondary: "#b4befe", primaryText: "#1e1e2e", primaryContainer: "#243f75", surfaceTint: "#89b4fa" },
+        light: { primary: "#1e66f5", secondary: "#7287fd", primaryText: "#ffffff", primaryContainer: "#e0e9ff", surfaceTint: "#1e66f5" }
+    },
+    "cat-lavender": {
+        name: "Lavender",
+        dark: { primary: "#b4befe", secondary: "#cba6f7", primaryText: "#1e1e2e", primaryContainer: "#3f4481", surfaceTint: "#b4befe" },
+        light: { primary: "#7287fd", secondary: "#8839ef", primaryText: "#ffffff", primaryContainer: "#e5e8ff", surfaceTint: "#7287fd" }
+    }
+}
+
+function getCatppuccinTheme(variant, isLight = false) {
+    const variantData = CatppuccinVariants[variant]
+    if (!variantData) return null
+
+    const baseColors = isLight ? CatppuccinLatte : CatppuccinMocha
+    const accentColors = isLight ? variantData.light : variantData.dark
+
+    return Object.assign({
+        name: `${variantData.name}${isLight ? ' Light' : ''}`
+    }, baseColors, accentColors)
+}
+
 const StockThemes = {
     DARK: {
         blue: {
             name: "Blue",
             primary: "#42a5f5",
-            primaryText: "#ffffff",
-            primaryContainer: "#1976d2",
+            primaryText: "#000000",
+            primaryContainer: "#0d47a1",
             secondary: "#8ab4f8",
-            surface: "#1a1c1e",
-            surfaceText: "#e3e8ef",
-            surfaceVariant: "#44464f",
-            surfaceVariantText: "#c4c7c5",
+            surface: "#101418",
+            surfaceText: "#e0e2e8",
+            surfaceVariant: "#42474e",
+            surfaceVariantText: "#c2c7cf",
             surfaceTint: "#8ab4f8",
-            background: "#1a1c1e",
-            backgroundText: "#e3e8ef",
-            outline: "#8e918f",
-            surfaceContainer: "#1e2023",
-            surfaceContainerHigh: "#292b2f"
-        },
-        deepBlue: {
-            name: "Deep Blue",
-            primary: "#0061a4",
-            primaryText: "#ffffff",
-            primaryContainer: "#004881",
-            secondary: "#42a5f5",
-            surface: "#1a1c1e",
-            surfaceText: "#e3e8ef",
-            surfaceVariant: "#44464f",
-            surfaceVariantText: "#c4c7c5",
-            surfaceTint: "#8ab4f8",
-            background: "#1a1c1e",
-            backgroundText: "#e3e8ef",
-            outline: "#8e918f",
-            surfaceContainer: "#1e2023",
-            surfaceContainerHigh: "#292b2f"
+            background: "#101418",
+            backgroundText: "#e0e2e8",
+            outline: "#8c9199",
+            surfaceContainer: "#1d2024",
+            surfaceContainerHigh: "#272a2f",
+            surfaceContainerHighest: "#32353a"
         },
         purple: {
             name: "Purple",
@@ -43,135 +138,165 @@ const StockThemes = {
             primaryText: "#381E72",
             primaryContainer: "#4F378B",
             secondary: "#CCC2DC",
-            surface: "#10121E",
-            surfaceText: "#E6E0E9",
-            surfaceVariant: "#49454F",
-            surfaceVariantText: "#CAC4D0",
+            surface: "#141218",
+            surfaceText: "#e6e0e9",
+            surfaceVariant: "#49454e",
+            surfaceVariantText: "#cac4cf",
             surfaceTint: "#D0BCFF",
-            background: "#10121E",
-            backgroundText: "#E6E0E9",
-            outline: "#938F99",
-            surfaceContainer: "#1D1B20",
-            surfaceContainerHigh: "#2B2930"
+            background: "#141218",
+            backgroundText: "#e6e0e9",
+            outline: "#948f99",
+            surfaceContainer: "#211f24",
+            surfaceContainerHigh: "#2b292f",
+            surfaceContainerHighest: "#36343a"
         },
         green: {
             name: "Green",
             primary: "#4caf50",
-            primaryText: "#ffffff",
-            primaryContainer: "#388e3c",
+            primaryText: "#000000",
+            primaryContainer: "#1b5e20",
             secondary: "#81c995",
-            surface: "#0f1411",
-            surfaceText: "#e1f5e3",
-            surfaceVariant: "#404943",
-            surfaceVariantText: "#c1cbc4",
+            surface: "#10140f",
+            surfaceText: "#e0e4db",
+            surfaceVariant: "#424940",
+            surfaceVariantText: "#c2c9bd",
             surfaceTint: "#81c995",
-            background: "#0f1411",
-            backgroundText: "#e1f5e3",
-            outline: "#8b938c",
-            surfaceContainer: "#1a1f1b",
-            surfaceContainerHigh: "#252a26"
+            background: "#10140f",
+            backgroundText: "#e0e4db",
+            outline: "#8c9388",
+            surfaceContainer: "#1d211b",
+            surfaceContainerHigh: "#272b25",
+            surfaceContainerHighest: "#323630"
         },
         orange: {
             name: "Orange",
             primary: "#ff6d00",
-            primaryText: "#ffffff",
-            primaryContainer: "#e65100",
+            primaryText: "#000000",
+            primaryContainer: "#3e2723",
             secondary: "#ffb74d",
-            surface: "#1c1410",
-            surfaceText: "#f5f1ea",
-            surfaceVariant: "#4a453a",
-            surfaceVariantText: "#cbc5b8",
+            surface: "#1a120e",
+            surfaceText: "#f0dfd8",
+            surfaceVariant: "#52443d",
+            surfaceVariantText: "#d7c2b9",
             surfaceTint: "#ffb74d",
-            background: "#1c1410",
-            backgroundText: "#f5f1ea",
-            outline: "#958f84",
-            surfaceContainer: "#211e17",
-            surfaceContainerHigh: "#2c291f"
+            background: "#1a120e",
+            backgroundText: "#f0dfd8",
+            outline: "#a08d85",
+            surfaceContainer: "#271e1a",
+            surfaceContainerHigh: "#322824",
+            surfaceContainerHighest: "#3d332e"
         },
         red: {
             name: "Red",
             primary: "#f44336",
-            primaryText: "#ffffff",
-            primaryContainer: "#d32f2f",
+            primaryText: "#000000",
+            primaryContainer: "#4a0e0e",
             secondary: "#f28b82",
-            surface: "#1c1011",
-            surfaceText: "#f5e8ea",
-            surfaceVariant: "#4a3f41",
-            surfaceVariantText: "#cbc2c4",
+            surface: "#1a1110",
+            surfaceText: "#f1dedc",
+            surfaceVariant: "#534341",
+            surfaceVariantText: "#d8c2be",
             surfaceTint: "#f28b82",
-            background: "#1c1011",
-            backgroundText: "#f5e8ea",
-            outline: "#958b8d",
-            surfaceContainer: "#211b1c",
-            surfaceContainerHigh: "#2c2426"
+            background: "#1a1110",
+            backgroundText: "#f1dedc",
+            outline: "#a08c89",
+            surfaceContainer: "#271d1c",
+            surfaceContainerHigh: "#322826",
+            surfaceContainerHighest: "#3d3231"
         },
         cyan: {
             name: "Cyan",
             primary: "#00bcd4",
-            primaryText: "#ffffff",
-            primaryContainer: "#0097a7",
+            primaryText: "#000000",
+            primaryContainer: "#004d5c",
             secondary: "#4dd0e1",
-            surface: "#0f1617",
-            surfaceText: "#e8f4f5",
-            surfaceVariant: "#3f474a",
-            surfaceVariantText: "#c2c9cb",
+            surface: "#0e1416",
+            surfaceText: "#dee3e5",
+            surfaceVariant: "#3f484a",
+            surfaceVariantText: "#bfc8ca",
             surfaceTint: "#4dd0e1",
-            background: "#0f1617",
-            backgroundText: "#e8f4f5",
-            outline: "#8c9194",
-            surfaceContainer: "#1a1f20",
-            surfaceContainerHigh: "#252b2c"
+            background: "#0e1416",
+            backgroundText: "#dee3e5",
+            outline: "#899295",
+            surfaceContainer: "#1b2122",
+            surfaceContainerHigh: "#252b2c",
+            surfaceContainerHighest: "#303637"
         },
         pink: {
             name: "Pink",
             primary: "#e91e63",
-            primaryText: "#ffffff",
-            primaryContainer: "#c2185b",
+            primaryText: "#000000",
+            primaryContainer: "#4a0e2f",
             secondary: "#f8bbd9",
-            surface: "#1a1014",
-            surfaceText: "#f3e8ee",
-            surfaceVariant: "#483f45",
-            surfaceVariantText: "#c9c2c7",
+            surface: "#191112",
+            surfaceText: "#f0dee0",
+            surfaceVariant: "#524345",
+            surfaceVariantText: "#d6c2c3",
             surfaceTint: "#f8bbd9",
-            background: "#1a1014",
-            backgroundText: "#f3e8ee",
-            outline: "#938a90",
-            surfaceContainer: "#1f1b1e",
-            surfaceContainerHigh: "#2a2428"
+            background: "#191112",
+            backgroundText: "#f0dee0",
+            outline: "#9f8c8e",
+            surfaceContainer: "#261d1e",
+            surfaceContainerHigh: "#312829",
+            surfaceContainerHighest: "#3c3233"
         },
         amber: {
             name: "Amber",
             primary: "#ffc107",
             primaryText: "#000000",
-            primaryContainer: "#ff8f00",
+            primaryContainer: "#4a3c00",
             secondary: "#ffd54f",
-            surface: "#1a1710",
-            surfaceText: "#f3f0e8",
-            surfaceVariant: "#49453a",
-            surfaceVariantText: "#cac5b8",
+            surface: "#17130b",
+            surfaceText: "#ebe1d4",
+            surfaceVariant: "#4d4639",
+            surfaceVariantText: "#d0c5b4",
             surfaceTint: "#ffd54f",
-            background: "#1a1710",
-            backgroundText: "#f3f0e8",
-            outline: "#949084",
-            surfaceContainer: "#1f1e17",
-            surfaceContainerHigh: "#2a281f"
+            background: "#17130b",
+            backgroundText: "#ebe1d4",
+            outline: "#998f80",
+            surfaceContainer: "#231f17",
+            surfaceContainerHigh: "#2e2921",
+            surfaceContainerHighest: "#39342b"
         },
         coral: {
             name: "Coral",
             primary: "#ffb4ab",
-            primaryText: "#5f1412",
+            primaryText: "#000000",
             primaryContainer: "#8c1d18",
             secondary: "#f9dedc",
             surface: "#1a1110",
-            surfaceText: "#f1e8e7",
-            surfaceVariant: "#4a4142",
-            surfaceVariantText: "#cdc2c1",
+            surfaceText: "#f1dedc",
+            surfaceVariant: "#534341",
+            surfaceVariantText: "#d8c2bf",
             surfaceTint: "#ffb4ab",
             background: "#1a1110",
-            backgroundText: "#f1e8e7",
-            outline: "#968b8a",
-            surfaceContainer: "#201a19",
-            surfaceContainerHigh: "#2b2221"
+            backgroundText: "#f1dedc",
+            outline: "#a08c8a",
+            surfaceContainer: "#271d1c",
+            surfaceContainerHigh: "#322826",
+            surfaceContainerHighest: "#3d3231"
+        },
+        monochrome: {
+            name: "Monochrome",
+            primary: "#ffffff",
+            primaryText: "#2b303c",
+            primaryContainer: "#424753",
+            secondary: "#c4c6d0",
+            surface: "#2a2a2a",
+            surfaceText: "#e4e2e3",
+            surfaceVariant: "#474648",
+            surfaceVariantText: "#c8c6c7",
+            surfaceTint: "#c2c6d6",
+            background: "#131315",
+            backgroundText: "#e4e2e3",
+            outline: "#929092",
+            surfaceContainer: "#353535",
+            surfaceContainerHigh: "#424242",
+            surfaceContainerHighest: "#505050",
+            error: "#ffb4ab",
+            warning: "#3f4759",
+            info: "#595e6c",
+            matugen_type: "scheme-monochrome"
         }
     },
     LIGHT: {
@@ -181,33 +306,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#e3f2fd",
             secondary: "#42a5f5",
-            surface: "#fefefe",
-            surfaceText: "#1a1c1e",
-            surfaceVariant: "#e7e0ec",
-            surfaceVariantText: "#49454f",
+            surface: "#f7f9ff",
+            surfaceText: "#181c20",
+            surfaceVariant: "#dee3eb",
+            surfaceVariantText: "#42474e",
             surfaceTint: "#1976d2",
-            background: "#fefefe",
-            backgroundText: "#1a1c1e",
-            outline: "#79747e",
-            surfaceContainer: "#f3f3f3",
-            surfaceContainerHigh: "#ececec"
-        },
-        deepBlue: {
-            name: "Deep Blue Light",
-            primary: "#0061a4",
-            primaryText: "#ffffff",
-            primaryContainer: "#cfe5ff",
-            secondary: "#1976d2",
-            surface: "#fefefe",
-            surfaceText: "#1a1c1e",
-            surfaceVariant: "#e7e0ec",
-            surfaceVariantText: "#49454f",
-            surfaceTint: "#0061a4",
-            background: "#fefefe",
-            backgroundText: "#1a1c1e",
-            outline: "#79747e",
-            surfaceContainer: "#f3f3f3",
-            surfaceContainerHigh: "#ececec"
+            background: "#f7f9ff",
+            backgroundText: "#181c20",
+            outline: "#72777f",
+            surfaceContainer: "#eceef4",
+            surfaceContainerHigh: "#e6e8ee",
+            surfaceContainerHighest: "#e0e2e8"
         },
         purple: {
             name: "Purple Light",
@@ -215,16 +324,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#EADDFF",
             secondary: "#625B71",
-            surface: "#FFFBFE",
-            surfaceText: "#1C1B1F",
-            surfaceVariant: "#E7E0EC",
-            surfaceVariantText: "#49454F",
+            surface: "#fef7ff",
+            surfaceText: "#1d1b20",
+            surfaceVariant: "#e7e0eb",
+            surfaceVariantText: "#49454e",
             surfaceTint: "#6750A4",
-            background: "#FFFBFE",
-            backgroundText: "#1C1B1F",
-            outline: "#79747E",
-            surfaceContainer: "#F3EDF7",
-            surfaceContainerHigh: "#ECE6F0"
+            background: "#fef7ff",
+            backgroundText: "#1d1b20",
+            outline: "#7a757f",
+            surfaceContainer: "#f2ecf4",
+            surfaceContainerHigh: "#ece6ee",
+            surfaceContainerHighest: "#e6e0e9"
         },
         green: {
             name: "Green Light",
@@ -232,16 +342,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#e8f5e8",
             secondary: "#4caf50",
-            surface: "#fefefe",
-            surfaceText: "#1a1c1e",
-            surfaceVariant: "#e7e0ec",
-            surfaceVariantText: "#49454f",
+            surface: "#f7fbf1",
+            surfaceText: "#191d17",
+            surfaceVariant: "#dee5d8",
+            surfaceVariantText: "#424940",
             surfaceTint: "#2e7d32",
-            background: "#fefefe",
-            backgroundText: "#1a1c1e",
-            outline: "#79747e",
-            surfaceContainer: "#f3f3f3",
-            surfaceContainerHigh: "#ececec"
+            background: "#f7fbf1",
+            backgroundText: "#191d17",
+            outline: "#72796f",
+            surfaceContainer: "#ecefe6",
+            surfaceContainerHigh: "#e6e9e0",
+            surfaceContainerHighest: "#e0e4db"
         },
         orange: {
             name: "Orange Light",
@@ -249,16 +360,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#ffecb3",
             secondary: "#ff9800",
-            surface: "#fefefe",
-            surfaceText: "#1a1c1e",
-            surfaceVariant: "#e7e0ec",
-            surfaceVariantText: "#49454f",
+            surface: "#fff8f6",
+            surfaceText: "#221a16",
+            surfaceVariant: "#f4ded5",
+            surfaceVariantText: "#52443d",
             surfaceTint: "#e65100",
-            background: "#fefefe",
-            backgroundText: "#1a1c1e",
-            outline: "#79747e",
-            surfaceContainer: "#f3f3f3",
-            surfaceContainerHigh: "#ececec"
+            background: "#fff8f6",
+            backgroundText: "#221a16",
+            outline: "#85736c",
+            surfaceContainer: "#fceae3",
+            surfaceContainerHigh: "#f6e5de",
+            surfaceContainerHighest: "#f0dfd8"
         },
         red: {
             name: "Red Light",
@@ -266,16 +378,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#ffebee",
             secondary: "#f44336",
-            surface: "#fefefe",
-            surfaceText: "#1a1c1e",
-            surfaceVariant: "#e7e0ec",
-            surfaceVariantText: "#49454f",
+            surface: "#fff8f7",
+            surfaceText: "#231918",
+            surfaceVariant: "#f5ddda",
+            surfaceVariantText: "#534341",
             surfaceTint: "#d32f2f",
-            background: "#fefefe",
-            backgroundText: "#1a1c1e",
-            outline: "#79747e",
-            surfaceContainer: "#f3f3f3",
-            surfaceContainerHigh: "#ececec"
+            background: "#fff8f7",
+            backgroundText: "#231918",
+            outline: "#857370",
+            surfaceContainer: "#fceae7",
+            surfaceContainerHigh: "#f7e4e1",
+            surfaceContainerHighest: "#f1dedc"
         },
         cyan: {
             name: "Cyan Light",
@@ -283,16 +396,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#e0f2f1",
             secondary: "#00bcd4",
-            surface: "#fefefe",
-            surfaceText: "#1a1c1e",
-            surfaceVariant: "#e7e0ec",
-            surfaceVariantText: "#49454f",
+            surface: "#f5fafc",
+            surfaceText: "#171d1e",
+            surfaceVariant: "#dbe4e6",
+            surfaceVariantText: "#3f484a",
             surfaceTint: "#0097a7",
-            background: "#fefefe",
-            backgroundText: "#1a1c1e",
-            outline: "#79747e",
-            surfaceContainer: "#f3f3f3",
-            surfaceContainerHigh: "#ececec"
+            background: "#f5fafc",
+            backgroundText: "#171d1e",
+            outline: "#6f797b",
+            surfaceContainer: "#e9eff0",
+            surfaceContainerHigh: "#e3e9eb",
+            surfaceContainerHighest: "#dee3e5"
         },
         pink: {
             name: "Pink Light",
@@ -300,16 +414,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#fce4ec",
             secondary: "#e91e63",
-            surface: "#fefefe",
-            surfaceText: "#1a1c1e",
-            surfaceVariant: "#e7e0ec",
-            surfaceVariantText: "#49454f",
+            surface: "#fff8f7",
+            surfaceText: "#22191a",
+            surfaceVariant: "#f3dddf",
+            surfaceVariantText: "#524345",
             surfaceTint: "#c2185b",
-            background: "#fefefe",
-            backgroundText: "#1a1c1e",
-            outline: "#79747e",
-            surfaceContainer: "#f3f3f3",
-            surfaceContainerHigh: "#ececec"
+            background: "#fff8f7",
+            backgroundText: "#22191a",
+            outline: "#847375",
+            surfaceContainer: "#fbeaeb",
+            surfaceContainerHigh: "#f5e4e5",
+            surfaceContainerHighest: "#f0dee0"
         },
         amber: {
             name: "Amber Light",
@@ -317,16 +432,17 @@ const StockThemes = {
             primaryText: "#000000",
             primaryContainer: "#fff8e1",
             secondary: "#ffc107",
-            surface: "#fefefe",
-            surfaceText: "#1a1c1e",
-            surfaceVariant: "#e7e0ec",
-            surfaceVariantText: "#49454f",
+            surface: "#fff8f2",
+            surfaceText: "#1f1b13",
+            surfaceVariant: "#ede1cf",
+            surfaceVariantText: "#4d4639",
             surfaceTint: "#ff8f00",
-            background: "#fefefe",
-            backgroundText: "#1a1c1e",
-            outline: "#79747e",
-            surfaceContainer: "#f3f3f3",
-            surfaceContainerHigh: "#ececec"
+            background: "#fff8f2",
+            backgroundText: "#1f1b13",
+            outline: "#7f7667",
+            surfaceContainer: "#f6ecdf",
+            surfaceContainerHigh: "#f1e7d9",
+            surfaceContainerHighest: "#ebe1d4"
         },
         coral: {
             name: "Coral Light",
@@ -334,23 +450,56 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#ffdad6",
             secondary: "#ff5449",
-            surface: "#fefefe",
-            surfaceText: "#1a1c1e",
-            surfaceVariant: "#e7e0ec",
-            surfaceVariantText: "#49454f",
+            surface: "#fff8f7",
+            surfaceText: "#231918",
+            surfaceVariant: "#f5ddda",
+            surfaceVariantText: "#534341",
             surfaceTint: "#8c1d18",
-            background: "#fefefe",
-            backgroundText: "#1a1c1e",
-            outline: "#79747e",
-            surfaceContainer: "#f3f3f3",
-            surfaceContainerHigh: "#ececec"
+            background: "#fff8f7",
+            backgroundText: "#231918",
+            outline: "#857371",
+            surfaceContainer: "#fceae7",
+            surfaceContainerHigh: "#f6e4e2",
+            surfaceContainerHighest: "#f1dedc"
+        },
+        monochrome: {
+            name: "Monochrome Light",
+            primary: "#2b303c",
+            primaryText: "#ffffff",
+            primaryContainer: "#d6d7dc",
+            secondary: "#4a4d56",
+            surface: "#f5f5f6",
+            surfaceText: "#2a2a2a",
+            surfaceVariant: "#e0e0e2",
+            surfaceVariantText: "#424242",
+            surfaceTint: "#5a5f6e",
+            background: "#ffffff",
+            backgroundText: "#1a1a1a",
+            outline: "#757577",
+            surfaceContainer: "#e8e8ea",
+            surfaceContainerHigh: "#dcdcde",
+            surfaceContainerHighest: "#d0d0d2",
+            error: "#ba1a1a",
+            warning: "#f9e79f",
+            info: "#5d6475",
+            matugen_type: "scheme-monochrome"
         }
     }
 }
 
+const ThemeCategories = {
+    GENERIC: {
+        name: "Generic",
+        variants: ["blue", "purple", "green", "orange", "red", "cyan", "pink", "amber", "coral", "monochrome"]
+    },
+    CATPPUCCIN: {
+        name: "Catppuccin",
+        variants: Object.keys(CatppuccinVariants)
+    }
+}
+
 const ThemeNames = {
     BLUE: "blue",
-    DEEP_BLUE: "deepBlue",
     PURPLE: "purple",
     GREEN: "green",
     ORANGE: "orange",
@@ -359,6 +508,7 @@ const ThemeNames = {
     PINK: "pink",
     AMBER: "amber",
     CORAL: "coral",
+    MONOCHROME: "monochrome",
     DYNAMIC: "dynamic"
 }
 
@@ -366,15 +516,30 @@ function isStockTheme(themeName) {
     return Object.keys(StockThemes.DARK).includes(themeName)
 }
 
+function isCatppuccinVariant(themeName) {
+    return Object.keys(CatppuccinVariants).includes(themeName)
+}
+
 function getAvailableThemes(isLight = false) {
     return isLight ? StockThemes.LIGHT : StockThemes.DARK
 }
 
 function getThemeByName(themeName, isLight = false) {
+    if (isCatppuccinVariant(themeName)) {
+        return getCatppuccinTheme(themeName, isLight)
+    }
     const themes = getAvailableThemes(isLight)
     return themes[themeName] || themes.blue
 }
 
 function getAllThemeNames() {
     return Object.keys(StockThemes.DARK)
+}
+
+function getCatppuccinVariantNames() {
+    return Object.keys(CatppuccinVariants)
+}
+
+function getThemeCategories() {
+    return ThemeCategories
 }

DMSGreeter.qml

@@ -0,0 +1,29 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Services.Greetd
+import qs.Common
+import qs.Modules.Greetd
+
+Item {
+    id: root
+
+    WlSessionLock {
+        id: sessionLock
+        locked: false
+
+        Component.onCompleted: {
+            Qt.callLater(() => { locked = true })
+        }
+
+        onLockedChanged: {
+            if (!locked) {
+                console.log("Greetd session unlocked, exiting")
+            }
+        }
+
+        GreeterSurface {
+            lock: sessionLock
+        }
+    }
+}

DMSShell.qml

@@ -0,0 +1,539 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import qs.Common
+import qs.Modals
+import qs.Modals.Clipboard
+import qs.Modals.Common
+import qs.Modals.Settings
+import qs.Modals.Spotlight
+import qs.Modules
+import qs.Modules.AppDrawer
+import qs.Modules.DankDash
+import qs.Modules.ControlCenter
+import qs.Modules.Dock
+import qs.Modules.Lock
+import qs.Modules.Notepad
+import qs.Modules.Notifications.Center
+import qs.Widgets
+import qs.Modules.Notifications.Popup
+import qs.Modules.OSD
+import qs.Modules.ProcessList
+import qs.Modules.Settings
+import qs.Modules.DankBar
+import qs.Modules.DankBar.Popouts
+import qs.Modules.Plugins
+import qs.Services
+
+
+Item {
+  id: root
+
+  Instantiator {
+      id: daemonPluginInstantiator
+      asynchronous: true
+      model: Object.keys(PluginService.pluginDaemonComponents)
+
+      delegate: Loader {
+          id: daemonLoader
+          property string pluginId: modelData
+          sourceComponent: PluginService.pluginDaemonComponents[pluginId]
+
+          onLoaded: {
+              if (item) {
+                  item.pluginService = PluginService
+                  if (item.popoutService !== undefined) {
+                      item.popoutService = PopoutService
+                  }
+                  item.pluginId = pluginId
+                  console.log("Daemon plugin loaded:", pluginId)
+              }
+          }
+      }
+  }
+
+  WallpaperBackground {}
+
+  Lock {
+      id: lock
+  }
+
+  Loader {
+      id: dankBarLoader
+      asynchronous: false
+
+      property var currentPosition: SettingsData.dankBarPosition
+      property bool initialized: false
+
+      sourceComponent: DankBar {
+          onColorPickerRequested: {
+              if (colorPickerModal.shouldBeVisible) {
+                  colorPickerModal.close()
+              } else {
+                  colorPickerModal.show()
+              }
+          }
+      }
+
+      Component.onCompleted: {
+          initialized = true
+      }
+
+      onCurrentPositionChanged: {
+          if (!initialized) return
+
+          const component = sourceComponent
+          sourceComponent = null
+          sourceComponent = component
+      }
+  }
+
+  Loader {
+      id: dockLoader
+      active: true
+      asynchronous: false
+
+      property var currentPosition: SettingsData.dockPosition
+      property bool initialized: false
+
+      sourceComponent: Dock {
+          contextMenu: dockContextMenuLoader.item ? dockContextMenuLoader.item : null
+      }
+
+      onLoaded: {
+          if (item) {
+              dockContextMenuLoader.active = true
+          }
+      }
+
+      Component.onCompleted: {
+          initialized = true
+      }
+
+      onCurrentPositionChanged: {
+          if (!initialized) return
+
+          console.log("DEBUG: Dock position changed to:", currentPosition, "- recreating dock")
+          const comp = sourceComponent
+          sourceComponent = null
+          sourceComponent = comp
+      }
+  }
+
+  Loader {
+      id: dankDashPopoutLoader
+
+      active: false
+      asynchronous: true
+
+      sourceComponent: Component {
+          DankDashPopout {
+              id: dankDashPopout
+
+              Component.onCompleted: {
+                  PopoutService.dankDashPopout = dankDashPopout
+              }
+          }
+      }
+  }
+
+  LazyLoader {
+      id: dockContextMenuLoader
+
+      active: false
+
+      DockContextMenu {
+          id: dockContextMenu
+      }
+  }
+
+  LazyLoader {
+      id: notificationCenterLoader
+
+      active: false
+
+      NotificationCenterPopout {
+          id: notificationCenter
+
+          Component.onCompleted: {
+              PopoutService.notificationCenterPopout = notificationCenter
+          }
+      }
+  }
+
+  Variants {
+      model: SettingsData.getFilteredScreens("notifications")
+
+      delegate: NotificationPopupManager {
+          modelData: item
+      }
+  }
+
+  LazyLoader {
+      id: controlCenterLoader
+
+      active: false
+
+      property var modalRef: colorPickerModal
+      property LazyLoader powerModalLoaderRef: powerMenuModalLoader
+
+      ControlCenterPopout {
+          id: controlCenterPopout
+          colorPickerModal: controlCenterLoader.modalRef
+          powerMenuModalLoader: controlCenterLoader.powerModalLoaderRef
+
+          onLockRequested: {
+              lock.activate()
+          }
+
+          Component.onCompleted: {
+              PopoutService.controlCenterPopout = controlCenterPopout
+          }
+      }
+  }
+
+  LazyLoader {
+      id: wifiPasswordModalLoader
+
+      active: false
+
+      WifiPasswordModal {
+          id: wifiPasswordModal
+
+          Component.onCompleted: {
+              PopoutService.wifiPasswordModal = wifiPasswordModal
+          }
+      }
+  }
+
+  LazyLoader {
+      id: networkInfoModalLoader
+
+      active: false
+
+      NetworkInfoModal {
+          id: networkInfoModal
+
+          Component.onCompleted: {
+              PopoutService.networkInfoModal = networkInfoModal
+          }
+      }
+  }
+
+  LazyLoader {
+      id: batteryPopoutLoader
+
+      active: false
+
+      BatteryPopout {
+          id: batteryPopout
+
+          Component.onCompleted: {
+              PopoutService.batteryPopout = batteryPopout
+          }
+      }
+  }
+
+  LazyLoader {
+      id: vpnPopoutLoader
+
+      active: false
+
+      VpnPopout {
+          id: vpnPopout
+
+          Component.onCompleted: {
+              PopoutService.vpnPopout = vpnPopout
+          }
+      }
+  }
+
+  LazyLoader {
+    id: powerMenuLoader
+
+    active: false
+
+    PowerMenu {
+        id: powerMenu
+
+        onPowerActionRequested: (action, title, message) => {
+            if (SettingsData.powerActionConfirm) {
+                powerConfirmModalLoader.active = true
+                if (powerConfirmModalLoader.item) {
+                    powerConfirmModalLoader.item.confirmButtonColor = action === "poweroff" ? Theme.error : action === "reboot" ? Theme.warning : Theme.primary
+                    powerConfirmModalLoader.item.show(title, message, () => actionApply(action), function () {})
+                }
+            } else {
+                actionApply(action)
+            }
+        }
+
+        function actionApply(action) {
+            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
+            }
+        }
+    }
+  }
+
+  LazyLoader {
+      id: powerConfirmModalLoader
+
+      active: false
+
+      ConfirmModal {
+          id: powerConfirmModal
+      }
+  }
+
+  LazyLoader {
+      id: processListPopoutLoader
+
+      active: false
+
+      ProcessListPopout {
+          id: processListPopout
+
+          Component.onCompleted: {
+              PopoutService.processListPopout = processListPopout
+          }
+      }
+  }
+
+  SettingsModal {
+      id: settingsModal
+
+      Component.onCompleted: {
+          PopoutService.settingsModal = settingsModal
+      }
+  }
+
+  LazyLoader {
+      id: appDrawerLoader
+
+      active: false
+
+      AppDrawerPopout {
+          id: appDrawerPopout
+
+          Component.onCompleted: {
+              PopoutService.appDrawerPopout = appDrawerPopout
+          }
+      }
+  }
+
+  SpotlightModal {
+      id: spotlightModal
+
+      Component.onCompleted: {
+          PopoutService.spotlightModal = spotlightModal
+      }
+  }
+
+  ClipboardHistoryModal {
+      id: clipboardHistoryModalPopup
+
+      Component.onCompleted: {
+          PopoutService.clipboardHistoryModal = clipboardHistoryModalPopup
+      }
+  }
+
+  NotificationModal {
+      id: notificationModal
+
+      Component.onCompleted: {
+          PopoutService.notificationModal = notificationModal
+      }
+  }
+
+  DankColorPickerModal {
+      id: colorPickerModal
+
+      Component.onCompleted: {
+          PopoutService.colorPickerModal = colorPickerModal
+      }
+  }
+
+  LazyLoader {
+      id: processListModalLoader
+
+      active: false
+
+      ProcessListModal {
+          id: processListModal
+
+          Component.onCompleted: {
+              PopoutService.processListModal = processListModal
+          }
+      }
+  }
+
+  LazyLoader {
+      id: systemUpdateLoader
+
+      active: false
+
+      SystemUpdatePopout {
+          id: systemUpdatePopout
+
+          Component.onCompleted: {
+              PopoutService.systemUpdatePopout = systemUpdatePopout
+          }
+      }
+  }
+
+  Variants {
+      id: notepadSlideoutVariants
+      model: SettingsData.getFilteredScreens("notepad")
+
+      delegate: DankSlideout {
+          id: notepadSlideout
+          modelData: item
+          title: I18n.tr("Notepad")
+          slideoutWidth: 480
+          expandable: true
+          expandedWidthValue: 960
+          customTransparency: SettingsData.notepadTransparencyOverride
+
+          content: Component {
+              Notepad {
+                  onHideRequested: {
+                      notepadSlideout.hide()
+                  }
+              }
+          }
+
+          function toggle() {
+              if (isVisible) {
+                  hide()
+              } else {
+                  show()
+              }
+          }
+      }
+  }
+
+  LazyLoader {
+    id: powerMenuModalLoader
+
+    active: false
+
+    PowerMenuModal {
+        id: powerMenuModal
+
+        onPowerActionRequested: (action, title, message) => {
+            if (SettingsData.powerActionConfirm) {
+                powerConfirmModalLoader.active = true
+                if (powerConfirmModalLoader.item) {
+                    powerConfirmModalLoader.item.confirmButtonColor = action === "poweroff" ? Theme.error : action === "reboot" ? Theme.warning : Theme.primary
+                    powerConfirmModalLoader.item.show(title, message, () => actionApply(action), function () {})
+                }
+            } else {
+                actionApply(action)
+            }
+        }
+
+        function actionApply(action) {
+            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
+            }
+        }
+
+        Component.onCompleted: {
+            PopoutService.powerMenuModal = powerMenuModal
+        }
+    }
+  }
+
+  LazyLoader {
+      id: hyprKeybindsModalLoader
+
+      active: false
+
+      HyprKeybindsModal {
+          id: hyprKeybindsModal
+
+          Component.onCompleted: {
+              PopoutService.hyprKeybindsModal = hyprKeybindsModal
+          }
+      }
+  }
+
+  DMSShellIPC {
+      powerMenuModalLoader: powerMenuModalLoader
+      processListModalLoader: processListModalLoader
+      controlCenterLoader: controlCenterLoader
+      dankDashPopoutLoader: dankDashPopoutLoader
+      notepadSlideoutVariants: notepadSlideoutVariants
+      hyprKeybindsModalLoader: hyprKeybindsModalLoader
+  }
+
+  Variants {
+      model: SettingsData.getFilteredScreens("toast")
+
+      delegate: Toast {
+          modelData: item
+          visible: ToastService.toastVisible
+      }
+  }
+
+  Variants {
+      model: SettingsData.getFilteredScreens("osd")
+
+      delegate: VolumeOSD {
+          modelData: item
+      }
+  }
+
+  Variants {
+      model: SettingsData.getFilteredScreens("osd")
+
+      delegate: MicMuteOSD {
+          modelData: item
+      }
+  }
+
+  Variants {
+      model: SettingsData.getFilteredScreens("osd")
+
+      delegate: BrightnessOSD {
+          modelData: item
+      }
+  }
+
+  Variants {
+      model: SettingsData.getFilteredScreens("osd")
+
+      delegate: IdleInhibitorOSD {
+          modelData: item
+      }
+  }
+}

DMSShellIPC.qml

@@ -0,0 +1,353 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import Quickshell.Hyprland
+import qs.Common
+import qs.Services
+
+Item {
+    id: root
+
+    required property var powerMenuModalLoader
+    required property var processListModalLoader
+    required property var controlCenterLoader
+    required property var dankDashPopoutLoader
+    required property var notepadSlideoutVariants
+    required property var hyprKeybindsModalLoader
+
+    IpcHandler {
+        function open() {
+            root.powerMenuModalLoader.active = true
+            if (root.powerMenuModalLoader.item)
+                root.powerMenuModalLoader.item.openCentered()
+
+            return "POWERMENU_OPEN_SUCCESS"
+        }
+
+        function close() {
+            if (root.powerMenuModalLoader.item)
+                root.powerMenuModalLoader.item.close()
+
+            return "POWERMENU_CLOSE_SUCCESS"
+        }
+
+        function toggle() {
+            root.powerMenuModalLoader.active = true
+            if (root.powerMenuModalLoader.item) {
+                if (root.powerMenuModalLoader.item.shouldBeVisible) {
+                    root.powerMenuModalLoader.item.close()
+                } else {
+                    root.powerMenuModalLoader.item.openCentered()
+                }
+            }
+
+            return "POWERMENU_TOGGLE_SUCCESS"
+        }
+
+        target: "powermenu"
+    }
+
+    IpcHandler {
+        function open(): string {
+            root.processListModalLoader.active = true
+            if (root.processListModalLoader.item)
+                root.processListModalLoader.item.show()
+
+            return "PROCESSLIST_OPEN_SUCCESS"
+        }
+
+        function close(): string {
+            if (root.processListModalLoader.item)
+                root.processListModalLoader.item.hide()
+
+            return "PROCESSLIST_CLOSE_SUCCESS"
+        }
+
+        function toggle(): string {
+            root.processListModalLoader.active = true
+            if (root.processListModalLoader.item)
+                root.processListModalLoader.item.toggle()
+
+            return "PROCESSLIST_TOGGLE_SUCCESS"
+        }
+
+        target: "processlist"
+    }
+
+    IpcHandler {
+        function open(): string {
+            root.controlCenterLoader.active = true
+            if (root.controlCenterLoader.item) {
+                root.controlCenterLoader.item.open()
+                return "CONTROL_CENTER_OPEN_SUCCESS"
+            }
+            return "CONTROL_CENTER_OPEN_FAILED"
+        }
+
+        function close(): string {
+            if (root.controlCenterLoader.item) {
+                root.controlCenterLoader.item.close()
+                return "CONTROL_CENTER_CLOSE_SUCCESS"
+            }
+            return "CONTROL_CENTER_CLOSE_FAILED"
+        }
+
+        function toggle(): string {
+            root.controlCenterLoader.active = true
+            if (root.controlCenterLoader.item) {
+                root.controlCenterLoader.item.toggle()
+                return "CONTROL_CENTER_TOGGLE_SUCCESS"
+            }
+            return "CONTROL_CENTER_TOGGLE_FAILED"
+        }
+
+        target: "control-center"
+    }
+
+    IpcHandler {
+        function open(tab: string): string {
+            root.dankDashPopoutLoader.active = true
+            if (root.dankDashPopoutLoader.item) {
+                switch (tab.toLowerCase()) {
+                case "media":
+                    root.dankDashPopoutLoader.item.currentTabIndex = 1
+                    break
+                case "weather":
+                    root.dankDashPopoutLoader.item.currentTabIndex = SettingsData.weatherEnabled ? 2 : 0
+                    break
+                default:
+                    root.dankDashPopoutLoader.item.currentTabIndex = 0
+                    break
+                }
+                root.dankDashPopoutLoader.item.setTriggerPosition(Screen.width / 2, Theme.barHeight + Theme.spacingS, 100, "center", Screen)
+                root.dankDashPopoutLoader.item.dashVisible = true
+                return "DASH_OPEN_SUCCESS"
+            }
+            return "DASH_OPEN_FAILED"
+        }
+
+        function close(): string {
+            if (root.dankDashPopoutLoader.item) {
+                root.dankDashPopoutLoader.item.dashVisible = false
+                return "DASH_CLOSE_SUCCESS"
+            }
+            return "DASH_CLOSE_FAILED"
+        }
+
+        function toggle(tab: string): string {
+            root.dankDashPopoutLoader.active = true
+            if (root.dankDashPopoutLoader.item) {
+                if (root.dankDashPopoutLoader.item.dashVisible) {
+                    root.dankDashPopoutLoader.item.dashVisible = false
+                } else {
+                    switch (tab.toLowerCase()) {
+                    case "media":
+                        root.dankDashPopoutLoader.item.currentTabIndex = 1
+                        break
+                    case "weather":
+                        root.dankDashPopoutLoader.item.currentTabIndex = SettingsData.weatherEnabled ? 2 : 0
+                        break
+                    default:
+                        root.dankDashPopoutLoader.item.currentTabIndex = 0
+                        break
+                    }
+                    root.dankDashPopoutLoader.item.setTriggerPosition(Screen.width / 2, Theme.barHeight + Theme.spacingS, 100, "center", Screen)
+                    root.dankDashPopoutLoader.item.dashVisible = true
+                }
+                return "DASH_TOGGLE_SUCCESS"
+            }
+            return "DASH_TOGGLE_FAILED"
+        }
+
+        target: "dash"
+    }
+
+    IpcHandler {
+        function getFocusedScreenName() {
+            if (CompositorService.isHyprland && Hyprland.focusedWorkspace && Hyprland.focusedWorkspace.monitor) {
+                return Hyprland.focusedWorkspace.monitor.name
+            }
+            if (CompositorService.isNiri && NiriService.currentOutput) {
+                return NiriService.currentOutput
+            }
+            return ""
+        }
+
+        function getActiveNotepadInstance() {
+            if (root.notepadSlideoutVariants.instances.length === 0) {
+                return null
+            }
+
+            if (root.notepadSlideoutVariants.instances.length === 1) {
+                return root.notepadSlideoutVariants.instances[0]
+            }
+
+            var focusedScreen = getFocusedScreenName()
+            if (focusedScreen && root.notepadSlideoutVariants.instances.length > 0) {
+                for (var i = 0; i < root.notepadSlideoutVariants.instances.length; i++) {
+                    var slideout = root.notepadSlideoutVariants.instances[i]
+                    if (slideout.modelData && slideout.modelData.name === focusedScreen) {
+                        return slideout
+                    }
+                }
+            }
+
+            for (var i = 0; i < root.notepadSlideoutVariants.instances.length; i++) {
+                var slideout = root.notepadSlideoutVariants.instances[i]
+                if (slideout.isVisible) {
+                    return slideout
+                }
+            }
+
+            return root.notepadSlideoutVariants.instances[0]
+        }
+
+        function open(): string {
+            var instance = getActiveNotepadInstance()
+            if (instance) {
+                instance.show()
+                return "NOTEPAD_OPEN_SUCCESS"
+            }
+            return "NOTEPAD_OPEN_FAILED"
+        }
+
+        function close(): string {
+            var instance = getActiveNotepadInstance()
+            if (instance) {
+                instance.hide()
+                return "NOTEPAD_CLOSE_SUCCESS"
+            }
+            return "NOTEPAD_CLOSE_FAILED"
+        }
+
+        function toggle(): string {
+            var instance = getActiveNotepadInstance()
+            if (instance) {
+                instance.toggle()
+                return "NOTEPAD_TOGGLE_SUCCESS"
+            }
+            return "NOTEPAD_TOGGLE_FAILED"
+        }
+
+        target: "notepad"
+    }
+
+    IpcHandler {
+        function toggle(): string {
+            SessionService.toggleIdleInhibit()
+            return SessionService.idleInhibited ? "Idle inhibit enabled" : "Idle inhibit disabled"
+        }
+
+        function enable(): string {
+            SessionService.enableIdleInhibit()
+            return "Idle inhibit enabled"
+        }
+
+        function disable(): string {
+            SessionService.disableIdleInhibit()
+            return "Idle inhibit disabled"
+        }
+
+        function status(): string {
+            return SessionService.idleInhibited ? "Idle inhibit is enabled" : "Idle inhibit is disabled"
+        }
+
+        function reason(newReason: string): string {
+            if (!newReason) {
+                return `Current reason: ${SessionService.inhibitReason}`
+            }
+
+            SessionService.setInhibitReason(newReason)
+            return `Inhibit reason set to: ${newReason}`
+        }
+
+        target: "inhibit"
+    }
+
+    IpcHandler {
+        function list(): string {
+            return MprisController.availablePlayers.map(p => p.identity).join("\n")
+        }
+
+        function play(): void {
+            if (MprisController.activePlayer && MprisController.activePlayer.canPlay) {
+                MprisController.activePlayer.play()
+            }
+        }
+
+        function pause(): void {
+            if (MprisController.activePlayer && MprisController.activePlayer.canPause) {
+                MprisController.activePlayer.pause()
+            }
+        }
+
+        function playPause(): void {
+            if (MprisController.activePlayer && MprisController.activePlayer.canTogglePlaying) {
+                MprisController.activePlayer.togglePlaying()
+            }
+        }
+
+        function previous(): void {
+            if (MprisController.activePlayer && MprisController.activePlayer.canGoPrevious) {
+                MprisController.activePlayer.previous()
+            }
+        }
+
+        function next(): void {
+            if (MprisController.activePlayer && MprisController.activePlayer.canGoNext) {
+                MprisController.activePlayer.next()
+            }
+        }
+
+        function stop(): void {
+            if (MprisController.activePlayer) {
+                MprisController.activePlayer.stop()
+            }
+        }
+
+        target: "mpris"
+    }
+
+    IpcHandler {
+        function openBinds(): string {
+            if (!CompositorService.isHyprland) {
+                return "HYPR_NOT_AVAILABLE"
+            }
+            root.hyprKeybindsModalLoader.active = true
+            if (root.hyprKeybindsModalLoader.item) {
+                root.hyprKeybindsModalLoader.item.open()
+                return "HYPR_KEYBINDS_OPEN_SUCCESS"
+            }
+            return "HYPR_KEYBINDS_OPEN_FAILED"
+        }
+
+        function closeBinds(): string {
+            if (!CompositorService.isHyprland) {
+                return "HYPR_NOT_AVAILABLE"
+            }
+            if (root.hyprKeybindsModalLoader.item) {
+                root.hyprKeybindsModalLoader.item.close()
+                return "HYPR_KEYBINDS_CLOSE_SUCCESS"
+            }
+            return "HYPR_KEYBINDS_CLOSE_FAILED"
+        }
+
+        function toggleBinds(): string {
+            if (!CompositorService.isHyprland) {
+                return "HYPR_NOT_AVAILABLE"
+            }
+            root.hyprKeybindsModalLoader.active = true
+            if (root.hyprKeybindsModalLoader.item) {
+                if (root.hyprKeybindsModalLoader.item.shouldBeVisible) {
+                    root.hyprKeybindsModalLoader.item.close()
+                } else {
+                    root.hyprKeybindsModalLoader.item.open()
+                }
+                return "HYPR_KEYBINDS_TOGGLE_SUCCESS"
+            }
+            return "HYPR_KEYBINDS_TOGGLE_FAILED"
+        }
+
+        target: "hypr"
+    }
+}

Modals/Clipboard/ClipboardContent.qml

@@ -30,7 +30,7 @@ Item {
             showKeyboardHints: modal.showKeyboardHints
             onKeyboardHintsToggled: modal.showKeyboardHints = !modal.showKeyboardHints
             onClearAllClicked: {
-                clearConfirmDialog.show("Clear All History?", "This will permanently delete all clipboard history.", function () {
+                clearConfirmDialog.show(I18n.tr("Clear All History?"), I18n.tr("This will permanently delete all clipboard history."), function () {
                     modal.clearAll()
                     modal.hide()
                 }, function () {})
@@ -46,7 +46,7 @@ Item {
             leftIconName: "search"
             showClearButton: true
             focus: true
-            ignoreLeftRightKeys: true
+            ignoreTabKeys: true
             keyForwardTargets: [modal.modalFocusScope]
             onTextChanged: {
                 modal.searchText = text
@@ -77,15 +77,12 @@ Item {
             width: parent.width
             height: parent.height - ClipboardConstants.headerHeight - 70
             radius: Theme.cornerRadius
-            color: Theme.surfaceLight
-            border.color: Theme.outlineLight
-            border.width: 1
+            color: "transparent"
             clip: true
 
             DankListView {
                 id: clipboardListView
                 anchors.fill: parent
-                anchors.margins: Theme.spacingS
                 model: filteredModel
                 
                 currentIndex: clipboardContent.modal ? clipboardContent.modal.selectedIndex : 0
@@ -119,7 +116,7 @@ Item {
                 }
                 
                 StyledText {
-                    text: "No clipboard entries found"
+                    text: I18n.tr("No clipboard entries found")
                     anchors.centerIn: parent
                     font.pixelSize: Theme.fontSizeMedium
                     color: Theme.surfaceVariantText

Modals/Clipboard/ClipboardEntry.qml

@@ -24,17 +24,10 @@ Rectangle {
     radius: Theme.cornerRadius
     color: {
         if (isSelected) {
-            return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.2)
+            return Theme.primaryPressed
         }
-        return mouseArea.containsMouse ? Theme.primaryHover : Theme.primaryBackground
+        return mouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceContainerHigh
     }
-    border.color: {
-        if (isSelected) {
-            return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.5)
-        }
-        return Theme.outlineStrong
-    }
-    border.width: isSelected ? 1.5 : 1
 
     Row {
         anchors.fill: parent
@@ -87,11 +80,11 @@ Rectangle {
                     text: {
                         switch (entryType) {
                         case "image":
-                            return "Image • " + entryPreview
+                            return I18n.tr("Image") + " • " + entryPreview
                         case "long_text":
-                            return "Long Text"
+                            return I18n.tr("Long Text")
                         default:
-                            return "Text"
+                            return I18n.tr("Text")
                         }
                     }
                     font.pixelSize: Theme.fontSizeSmall

Modals/Clipboard/ClipboardHeader.qml

@@ -28,7 +28,7 @@ Item {
         }
 
         StyledText {
-            text: `Clipboard History (${totalCount})`
+            text: I18n.tr("Clipboard History") + ` (${totalCount})`
             font.pixelSize: Theme.fontSizeLarge
             color: Theme.surfaceText
             font.weight: Font.Medium

Modals/Clipboard/ClipboardHistoryModal.qml

@@ -60,6 +60,7 @@ DankModal {
         open()
         clipboardHistoryModal.searchText = ""
         clipboardHistoryModal.activeImageLoads = 0
+        clipboardHistoryModal.shouldHaveFocus = true
         refreshClipboard()
         keyboardController.reset()
 
@@ -91,7 +92,7 @@ DankModal {
     function copyEntry(entry) {
         const entryId = entry.split('\t')[0]
         Quickshell.execDetached(["sh", "-c", `cliphist decode ${entryId} | wl-copy`])
-        ToastService.showInfo("Copied to clipboard")
+        ToastService.showInfo(I18n.tr("Copied to clipboard"))
         hide()
     }
 
@@ -153,7 +154,7 @@ DankModal {
 
     ConfirmModal {
         id: clearConfirmDialog
-        confirmButtonText: "Clear All"
+        confirmButtonText: I18n.tr("Clear All")
         confirmButtonColor: Theme.primary
         onVisibleChanged: {
             if (visible) {

Modals/Clipboard/ClipboardKeyboardController.qml

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

Modals/Clipboard/ClipboardKeyboardHints.qml

@@ -6,6 +6,8 @@ import qs.Modals.Clipboard
 Rectangle {
     id: keyboardHints
 
+    readonly property string hintsText: I18n.tr("Shift+Del: Clear All • Esc: Close")
+
     height: ClipboardConstants.keyboardHintsHeight
     radius: Theme.cornerRadius
     color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95)
@@ -26,7 +28,7 @@ Rectangle {
         }
 
         StyledText {
-            text: "Shift+Del: Clear All • Esc: Close"
+            text: keyboardHints.hintsText
             font.pixelSize: Theme.fontSizeSmall
             color: Theme.surfaceText
             anchors.horizontalCenter: parent.horizontalCenter

Modals/Common/ConfirmModal.qml

@@ -68,9 +68,11 @@ DankModal {
         }
     }
     onOpened: {
-        modalFocusScope.forceActiveFocus()
-        modalFocusScope.focus = true
-        shouldHaveFocus = true
+        Qt.callLater(function () {
+            modalFocusScope.forceActiveFocus()
+            modalFocusScope.focus = true
+            shouldHaveFocus = true
+        })
     }
     modalFocusScope.Keys.onPressed: function (event) {
         switch (event.key) {
@@ -93,6 +95,48 @@ DankModal {
             selectedButton = 1
             event.accepted = true
             break
+        case Qt.Key_N:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = (selectedButton + 1) % 2
+                event.accepted = true
+            }
+            break
+        case Qt.Key_P:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = selectedButton === -1 ? 1 : (selectedButton - 1 + 2) % 2
+                event.accepted = true
+            }
+            break
+        case Qt.Key_J:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = 1
+                event.accepted = true
+            }
+            break
+        case Qt.Key_K:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = 0
+                event.accepted = true
+            }
+            break
+        case Qt.Key_H:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = 0
+                event.accepted = true
+            }
+            break
+        case Qt.Key_L:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = 1
+                event.accepted = true
+            }
+            break
         case Qt.Key_Tab:
             keyboardNavigation = true
             selectedButton = selectedButton === -1 ? 0 : (selectedButton + 1) % 2

Modals/Common/DankModal.qml

@@ -1,8 +1,9 @@
 import QtQuick
-import QtQuick.Effects
 import Quickshell
+import Quickshell.Hyprland
 import Quickshell.Wayland
 import qs.Common
+import qs.Services
 
 PanelWindow {
     id: root
@@ -11,10 +12,22 @@ PanelWindow {
 
     property alias content: contentLoader.sourceComponent
     property alias contentLoader: contentLoader
+    property Item directContent: null
     property real width: 400
     property real height: 300
     readonly property real screenWidth: screen ? screen.width : 1920
     readonly property real screenHeight: screen ? screen.height : 1080
+    readonly property real dpr: {
+        if (CompositorService.isNiri && screen) {
+            const niriScale = NiriService.displayScales[screen.name]
+            if (niriScale !== undefined) return niriScale
+        }
+        if (CompositorService.isHyprland && screen) {
+            const hyprlandMonitor = Hyprland.monitors.values.find(m => m.name === screen.name)
+            if (hyprlandMonitor?.scale !== undefined) return hyprlandMonitor.scale
+        }
+        return (screen?.devicePixelRatio) || 1
+    }
     property bool showBackground: true
     property real backgroundOpacity: 0.5
     property string positioning: "center"
@@ -22,7 +35,7 @@ PanelWindow {
     property bool closeOnEscapeKey: true
     property bool closeOnBackgroundClick: true
     property string animationType: "scale"
-    property int animationDuration: Theme.shorterDuration
+    property int animationDuration: Theme.shortDuration
     property var animationEasing: Theme.emphasizedEasing
     property color backgroundColor: Theme.surfaceContainer
     property color borderColor: Theme.outlineMedium
@@ -34,6 +47,7 @@ PanelWindow {
     property bool shouldHaveFocus: shouldBeVisible
     property bool allowFocusOverride: false
     property bool allowStacking: false
+    property bool keepContentLoaded: false
 
     signal opened
     signal dialogClosed
@@ -90,7 +104,7 @@ PanelWindow {
     Timer {
         id: closeTimer
 
-        interval: animationDuration + 50
+        interval: animationDuration + 100
         onTriggered: {
             visible = false
         }
@@ -133,22 +147,26 @@ PanelWindow {
     Rectangle {
         id: contentContainer
 
-        width: root.width
-        height: root.height
-        anchors.centerIn: positioning === "center" ? parent : undefined
+        width: Theme.px(root.width, dpr)
+        height: Theme.px(root.height, dpr)
+        anchors.centerIn: undefined
         x: {
-            if (positioning === "top-right") {
-                return Math.max(Theme.spacingL, root.screenWidth - width - Theme.spacingL)
+            if (positioning === "center") {
+                return Theme.snap((root.screenWidth - width) / 2, dpr)
+            } else if (positioning === "top-right") {
+                return Theme.px(Math.max(Theme.spacingL, root.screenWidth - width - Theme.spacingL), dpr)
             } else if (positioning === "custom") {
-                return root.customPosition.x
+                return Theme.snap(root.customPosition.x, dpr)
             }
             return 0
         }
         y: {
-            if (positioning === "top-right") {
-                return Theme.barHeight + Theme.spacingXS
+            if (positioning === "center") {
+                return Theme.snap((root.screenHeight - height) / 2, dpr)
+            } else if (positioning === "top-right") {
+                return Theme.px(Theme.barHeight + Theme.spacingXS, dpr)
             } else if (positioning === "custom") {
-                return root.customPosition.y
+                return Theme.snap(root.customPosition.y, dpr)
             }
             return 0
         }
@@ -156,49 +174,78 @@ PanelWindow {
         radius: root.cornerRadius
         border.color: root.borderColor
         border.width: root.borderWidth
-        layer.enabled: root.enableShadow
+        clip: false
+        layer.enabled: true
         opacity: root.shouldBeVisible ? 1 : 0
-        scale: root.animationType === "scale" ? (root.shouldBeVisible ? 1 : 0.9) : 1
         transform: root.animationType === "slide" ? slideTransform : null
 
         Translate {
             id: slideTransform
 
-            x: root.shouldBeVisible ? 0 : 15
-            y: root.shouldBeVisible ? 0 : -30
-        }
+            readonly property real rawX: root.shouldBeVisible ? 0 : 15
+            readonly property real rawY: root.shouldBeVisible ? 0 : -30
 
-        Loader {
-            id: contentLoader
-
-            anchors.fill: parent
-            active: root.visible
-            asynchronous: false
+            x: Theme.snap(rawX, root.dpr)
+            y: Theme.snap(rawY, root.dpr)
         }
 
         Behavior on opacity {
             NumberAnimation {
-                duration: root.animationDuration
-                easing.type: root.animationEasing
+                duration: animationDuration
+                easing.type: animationEasing
             }
         }
 
-        Behavior on scale {
-            enabled: root.animationType === "scale"
+        FocusScope {
+            anchors.fill: parent
+            focus: root.shouldBeVisible
+            clip: false
 
-            NumberAnimation {
-                duration: root.animationDuration
-                easing.type: root.animationEasing
+            Item {
+                id: directContentWrapper
+
+                anchors.fill: parent
+                visible: root.directContent !== null
+                focus: true
+                clip: false
+
+                Component.onCompleted: {
+                    if (root.directContent) {
+                        root.directContent.parent = directContentWrapper
+                        root.directContent.anchors.fill = directContentWrapper
+                        Qt.callLater(() => root.directContent.forceActiveFocus())
+                    }
+                }
+
+                Connections {
+                    function onDirectContentChanged() {
+                        if (root.directContent) {
+                            root.directContent.parent = directContentWrapper
+                            root.directContent.anchors.fill = directContentWrapper
+                            Qt.callLater(() => root.directContent.forceActiveFocus())
+                        }
+                    }
+
+                    target: root
+                }
             }
-        }
 
-        layer.effect: MultiEffect {
-            shadowEnabled: true
-            shadowHorizontalOffset: 0
-            shadowVerticalOffset: 8
-            shadowBlur: 1
-            shadowColor: Theme.shadowStrong
-            shadowOpacity: 0.3
+            Loader {
+                id: contentLoader
+
+                anchors.fill: parent
+                active: root.directContent === null && (root.keepContentLoaded || root.shouldBeVisible || root.visible)
+                asynchronous: false
+                focus: true
+                clip: false
+                visible: root.directContent === null
+
+                onLoaded: {
+                    if (item) {
+                        Qt.callLater(() => item.forceActiveFocus())
+                    }
+                }
+            }
         }
     }
 
@@ -207,8 +254,8 @@ PanelWindow {
 
         objectName: "modalFocusScope"
         anchors.fill: parent
-        visible: root.visible // Only active when the modal is visible
-        focus: root.visible
+        visible: root.shouldBeVisible || root.visible
+        focus: root.shouldBeVisible
         Keys.onEscapePressed: event => {
                                   if (root.closeOnEscapeKey && shouldHaveFocus) {
                                       root.close()
@@ -223,7 +270,7 @@ PanelWindow {
 
         Connections {
             function onShouldHaveFocusChanged() {
-                if (shouldHaveFocus && visible) {
+                if (shouldHaveFocus && shouldBeVisible) {
                     Qt.callLater(() => focusScope.forceActiveFocus())
                 }
             }

Modals/DankColorPickerModal.qml

@@ -0,0 +1,542 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Io
+import qs.Common
+import qs.Modals.Common
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: root
+
+    property string pickerTitle: "Choose Color"
+    property color selectedColor: SessionData.recentColors.length > 0 ? SessionData.recentColors[0] : Theme.primary
+    property var onColorSelectedCallback: null
+
+    signal colorSelected(color selectedColor)
+
+    property color currentColor: Theme.primary
+    property real hue: 0
+    property real saturation: 1
+    property real value: 1
+    property real alpha: 1
+    property real gradientX: 0
+    property real gradientY: 0
+
+    readonly property var standardColors: [
+        "#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4",
+        "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722",
+        "#d32f2f", "#c2185b", "#7b1fa2", "#512da8", "#303f9f", "#1976d2", "#0288d1", "#0097a7",
+        "#00796b", "#388e3c", "#689f38", "#afb42b", "#fbc02d", "#ffa000", "#f57c00", "#e64a19",
+        "#c62828", "#ad1457", "#6a1b9a", "#4527a0", "#283593", "#1565c0", "#0277bd", "#00838f",
+        "#00695c", "#2e7d32", "#558b2f", "#9e9d24", "#f9a825", "#ff8f00", "#ef6c00", "#d84315",
+        "#ffffff", "#9e9e9e", "#212121"
+    ]
+
+    function show() {
+        currentColor = selectedColor
+        updateFromColor(currentColor)
+        open()
+    }
+
+    function hide() {
+        onColorSelectedCallback = null
+        close()
+    }
+
+    onColorSelected: (color) => {
+        if (onColorSelectedCallback) {
+            onColorSelectedCallback(color)
+        }
+    }
+
+    function copyColorToClipboard(colorValue) {
+        Quickshell.execDetached(["sh", "-c", `echo "${colorValue}" | wl-copy`])
+        ToastService.showInfo(`Color ${colorValue} copied`)
+        SessionData.addRecentColor(currentColor)
+    }
+
+    function updateFromColor(color) {
+        hue = color.hsvHue
+        saturation = color.hsvSaturation
+        value = color.hsvValue
+        alpha = color.a
+        gradientX = saturation
+        gradientY = 1 - value
+    }
+
+    function updateColor() {
+        currentColor = Qt.hsva(hue, saturation, value, alpha)
+    }
+
+    function updateColorFromGradient(x, y) {
+        saturation = Math.max(0, Math.min(1, x))
+        value = Math.max(0, Math.min(1, 1 - y))
+        updateColor()
+        selectedColor = currentColor
+    }
+
+    function pickColorFromScreen() {
+        hide()
+        Proc.runCommand("hyprpicker", ["hyprpicker", "--format=hex"], (output, errorCode) => {
+            if (errorCode !== 0) {
+                console.warn("hyprpicker exited with code:", errorCode)
+                root.show()
+                return
+            }
+            const colorStr = output.trim()
+            if (colorStr.length >= 7 && colorStr.startsWith('#')) {
+                const pickedColor = Qt.color(colorStr)
+                root.selectedColor = pickedColor
+                root.currentColor = pickedColor
+                root.updateFromColor(pickedColor)
+                copyColorToClipboard(colorStr)
+                root.show()
+            }
+        })
+    }
+
+    width: 680
+    height: 680
+    backgroundColor: Theme.surfaceContainer
+    cornerRadius: Theme.cornerRadius
+    borderColor: Theme.outlineMedium
+    borderWidth: 1
+    keepContentLoaded: true
+
+    onBackgroundClicked: hide()
+
+    content: Component {
+        FocusScope {
+            id: colorContent
+
+            property alias hexInput: hexInput
+
+            anchors.fill: parent
+            focus: true
+
+            Keys.onEscapePressed: event => {
+                root.hide()
+                event.accepted = true
+            }
+
+            Column {
+                anchors.fill: parent
+                anchors.margins: Theme.spacingM
+                spacing: Theme.spacingM
+
+                Row {
+                    width: parent.width
+                    spacing: Theme.spacingS
+
+                    Column {
+                        width: parent.width - 90
+                        spacing: Theme.spacingXS
+
+                        StyledText {
+                            text: root.pickerTitle
+                            font.pixelSize: Theme.fontSizeLarge
+                            color: Theme.surfaceText
+                            font.weight: Font.Medium
+                        }
+
+                        StyledText {
+                            text: I18n.tr("Select a color from the palette or use custom sliders")
+                            font.pixelSize: Theme.fontSizeMedium
+                            color: Theme.surfaceTextMedium
+                        }
+                    }
+
+                    DankActionButton {
+                        iconName: "colorize"
+                        iconSize: Theme.iconSize - 4
+                        iconColor: Theme.surfaceText
+                        onClicked: () => {
+                            root.pickColorFromScreen()
+                        }
+                    }
+
+                    DankActionButton {
+                        iconName: "close"
+                        iconSize: Theme.iconSize - 4
+                        iconColor: Theme.surfaceText
+                        onClicked: () => {
+                            root.hide()
+                        }
+                    }
+                }
+
+                Row {
+                    width: parent.width
+                    spacing: Theme.spacingM
+
+                    Rectangle {
+                        id: gradientPicker
+                        width: parent.width - 70
+                        height: 280
+                        radius: Theme.cornerRadius
+                        border.color: Theme.outlineStrong
+                        border.width: 1
+                        clip: true
+
+                        Rectangle {
+                            anchors.fill: parent
+                            color: Qt.hsva(root.hue, 1, 1, 1)
+
+                            Rectangle {
+                                anchors.fill: parent
+                                gradient: Gradient {
+                                    orientation: Gradient.Horizontal
+                                    GradientStop { position: 0.0; color: "#ffffff" }
+                                    GradientStop { position: 1.0; color: "transparent" }
+                                }
+                            }
+
+                            Rectangle {
+                                anchors.fill: parent
+                                gradient: Gradient {
+                                    orientation: Gradient.Vertical
+                                    GradientStop { position: 0.0; color: "transparent" }
+                                    GradientStop { position: 1.0; color: "#000000" }
+                                }
+                            }
+                        }
+
+                        Rectangle {
+                            id: pickerCircle
+                            width: 16
+                            height: 16
+                            radius: 8
+                            border.color: "white"
+                            border.width: 2
+                            color: "transparent"
+                            x: root.gradientX * parent.width - width / 2
+                            y: root.gradientY * parent.height - height / 2
+
+                            Rectangle {
+                                anchors.centerIn: parent
+                                width: parent.width - 4
+                                height: parent.height - 4
+                                radius: width / 2
+                                border.color: "black"
+                                border.width: 1
+                                color: "transparent"
+                            }
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.CrossCursor
+                            onPressed: mouse => {
+                                const x = Math.max(0, Math.min(1, mouse.x / width))
+                                const y = Math.max(0, Math.min(1, mouse.y / height))
+                                root.gradientX = x
+                                root.gradientY = y
+                                root.updateColorFromGradient(x, y)
+                            }
+                            onPositionChanged: mouse => {
+                                if (pressed) {
+                                    const x = Math.max(0, Math.min(1, mouse.x / width))
+                                    const y = Math.max(0, Math.min(1, mouse.y / height))
+                                    root.gradientX = x
+                                    root.gradientY = y
+                                    root.updateColorFromGradient(x, y)
+                                }
+                            }
+                        }
+                    }
+
+                    Rectangle {
+                        id: hueSlider
+                        width: 50
+                        height: 280
+                        radius: Theme.cornerRadius
+                        border.color: Theme.outlineStrong
+                        border.width: 1
+
+                        gradient: Gradient {
+                            orientation: Gradient.Vertical
+                            GradientStop { position: 0.00; color: "#ff0000" }
+                            GradientStop { position: 0.17; color: "#ffff00" }
+                            GradientStop { position: 0.33; color: "#00ff00" }
+                            GradientStop { position: 0.50; color: "#00ffff" }
+                            GradientStop { position: 0.67; color: "#0000ff" }
+                            GradientStop { position: 0.83; color: "#ff00ff" }
+                            GradientStop { position: 1.00; color: "#ff0000" }
+                        }
+
+                        Rectangle {
+                            id: hueIndicator
+                            width: parent.width
+                            height: 4
+                            color: "white"
+                            border.color: "black"
+                            border.width: 1
+                            y: root.hue * parent.height - height / 2
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.SizeVerCursor
+                            onPressed: mouse => {
+                                const h = Math.max(0, Math.min(1, mouse.y / height))
+                                root.hue = h
+                                root.updateColor()
+                                root.selectedColor = root.currentColor
+                            }
+                            onPositionChanged: mouse => {
+                                if (pressed) {
+                                    const h = Math.max(0, Math.min(1, mouse.y / height))
+                                    root.hue = h
+                                    root.updateColor()
+                                    root.selectedColor = root.currentColor
+                                }
+                            }
+                        }
+                    }
+                }
+
+                Column {
+                    width: parent.width
+                    spacing: Theme.spacingS
+
+                    StyledText {
+                        text: I18n.tr("Material Colors")
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                    }
+
+                    GridView {
+                        width: parent.width
+                        height: 140
+                        cellWidth: 38
+                        cellHeight: 38
+                        clip: true
+                        interactive: false
+                        model: root.standardColors
+
+                        delegate: Rectangle {
+                            width: 36
+                            height: 36
+                            color: modelData
+                            radius: 4
+                            border.color: Theme.outlineStrong
+                            border.width: 1
+
+                            MouseArea {
+                                anchors.fill: parent
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: () => {
+                                    const pickedColor = Qt.color(modelData)
+                                    root.selectedColor = pickedColor
+                                    root.currentColor = pickedColor
+                                    root.updateFromColor(pickedColor)
+                                }
+                            }
+                        }
+                    }
+                }
+
+                Column {
+                    width: parent.width
+                    spacing: Theme.spacingS
+
+                    Row {
+                        width: parent.width
+                        spacing: Theme.spacingS
+
+                        Column {
+                            width: 210
+                            spacing: Theme.spacingXS
+
+                            StyledText {
+                                text: I18n.tr("Recent Colors")
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceText
+                                font.weight: Font.Medium
+                            }
+
+                            Row {
+                                width: parent.width
+                                spacing: Theme.spacingXS
+
+                                Repeater {
+                                    model: 5
+
+                                    Rectangle {
+                                        width: 36
+                                        height: 36
+                                        radius: 4
+                                        border.color: Theme.outlineStrong
+                                        border.width: 1
+
+                                        color: {
+                                            if (index < SessionData.recentColors.length) {
+                                                return SessionData.recentColors[index]
+                                            }
+                                            return Theme.surfaceContainerHigh
+                                        }
+
+                                        opacity: index < SessionData.recentColors.length ? 1.0 : 0.3
+
+                                        MouseArea {
+                                            anchors.fill: parent
+                                            cursorShape: index < SessionData.recentColors.length ? Qt.PointingHandCursor : Qt.ArrowCursor
+                                            enabled: index < SessionData.recentColors.length
+                                            onClicked: () => {
+                                                if (index < SessionData.recentColors.length) {
+                                                    const pickedColor = SessionData.recentColors[index]
+                                                    root.selectedColor = pickedColor
+                                                    root.currentColor = pickedColor
+                                                    root.updateFromColor(pickedColor)
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
+                        Column {
+                            width: parent.width - 330
+                            spacing: Theme.spacingXS
+
+                            StyledText {
+                                text: I18n.tr("Opacity")
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceText
+                                font.weight: Font.Medium
+                            }
+
+                            DankSlider {
+                                width: parent.width
+                                value: Math.round(root.alpha * 100)
+                                minimum: 0
+                                maximum: 100
+                                showValue: false
+                                onSliderValueChanged: (newValue) => {
+                                    root.alpha = newValue / 100
+                                    root.updateColor()
+                                    root.selectedColor = root.currentColor
+                                }
+                            }
+                        }
+
+                        Rectangle {
+                            width: 100
+                            height: 50
+                            radius: Theme.cornerRadius
+                            color: root.currentColor
+                            border.color: Theme.outlineStrong
+                            border.width: 2
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+                }
+
+                Row {
+                    width: parent.width
+                    spacing: Theme.spacingS
+
+                    StyledText {
+                        text: I18n.tr("Hex:")
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: Theme.surfaceTextMedium
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    DankTextField {
+                        id: hexInput
+                        width: 120
+                        height: 38
+                        text: root.currentColor.toString()
+                        font.pixelSize: Theme.fontSizeMedium
+                        textColor: {
+                            if (text.length === 0) return Theme.surfaceText
+                            const hexPattern = /^#?[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/
+                            return hexPattern.test(text) ? Theme.surfaceText : Theme.error
+                        }
+                        placeholderText: "#000000"
+                        backgroundColor: Theme.surfaceHover
+                        borderWidth: 1
+                        focusedBorderWidth: 2
+                        topPadding: Theme.spacingS
+                        bottomPadding: Theme.spacingS
+                        anchors.verticalCenter: parent.verticalCenter
+                        onAccepted: () => {
+                            const hexPattern = /^#?[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/
+                            if (!hexPattern.test(text)) return
+                            const color = Qt.color(text)
+                            if (color) {
+                                root.selectedColor = color
+                                root.currentColor = color
+                                root.updateFromColor(color)
+                            }
+                        }
+                    }
+
+                    DankButton {
+                        width: 80
+                        buttonHeight: 36
+                        text: I18n.tr("Apply")
+                        backgroundColor: Theme.primary
+                        textColor: Theme.background
+                        anchors.verticalCenter: parent.verticalCenter
+                        onClicked: {
+                            const hexPattern = /^#?[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/
+                            if (!hexPattern.test(hexInput.text)) return
+                            const color = Qt.color(hexInput.text)
+                            if (color) {
+                                root.currentColor = color
+                                root.updateFromColor(color)
+                                root.selectedColor = root.currentColor
+                                root.colorSelected(root.currentColor)
+                                SessionData.addRecentColor(root.currentColor)
+                                root.hide()
+                            }
+                        }
+                    }
+
+                    Item {
+                        width: parent.width - 460
+                        height: 1
+                    }
+
+                    DankButton {
+                        width: 70
+                        buttonHeight: 36
+                        text: I18n.tr("Cancel")
+                        backgroundColor: "transparent"
+                        textColor: Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
+                        onClicked: root.hide()
+
+                        Rectangle {
+                            anchors.fill: parent
+                            radius: Theme.cornerRadius
+                            color: "transparent"
+                            border.color: Theme.surfaceVariantAlpha
+                            border.width: 1
+                            z: -1
+                        }
+                    }
+
+                    DankButton {
+                        width: 70
+                        buttonHeight: 36
+                        text: I18n.tr("Copy")
+                        backgroundColor: Theme.primary
+                        textColor: Theme.background
+                        anchors.verticalCenter: parent.verticalCenter
+                        onClicked: {
+                            const colorString = root.currentColor.toString()
+                            root.copyColorToClipboard(colorString)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

Modals/FileBrowser/FileBrowserModal.qml

@@ -32,6 +32,10 @@ DankModal {
     property bool selectedFileIsDir: false
     property bool showOverwriteConfirmation: false
     property string pendingFilePath: ""
+    property bool weAvailable: false
+    property string wePath: ""
+    property bool weMode: false
+    property var parentModal: null
 
     signal fileSelected(string path)
 
@@ -44,15 +48,17 @@ DankModal {
     }
 
     function getLastPath() {
-        const lastPath = browserType === "wallpaper" ? SessionData.wallpaperLastPath : browserType === "profile" ? SessionData.profileLastPath : ""
+        const lastPath = browserType === "wallpaper" ? CacheData.wallpaperLastPath : browserType === "profile" ? CacheData.profileLastPath : ""
         return (lastPath && lastPath !== "") ? lastPath : homeDir
     }
 
     function saveLastPath(path) {
         if (browserType === "wallpaper") {
-            SessionData.setWallpaperLastPath(path)
+            CacheData.wallpaperLastPath = path
+            CacheData.saveCache()
         } else if (browserType === "profile") {
-            SessionData.setProfileLastPath(path)
+            CacheData.profileLastPath = path
+            CacheData.saveCache()
         }
     }
 
@@ -128,19 +134,59 @@ DankModal {
 
     objectName: "fileBrowserModal"
     allowStacking: true
+    closeOnEscapeKey: false
+    shouldHaveFocus: shouldBeVisible
     Component.onCompleted: {
         currentPath = getLastPath()
     }
+    
+    property var steamPaths: [
+        StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/.steam/steam/steamapps/workshop/content/431960",
+        StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/.local/share/Steam/steamapps/workshop/content/431960",
+        StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/.var/app/com.valvesoftware.Steam/.local/share/Steam/steamapps/workshop/content/431960",
+        StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/snap/steam/common/.local/share/Steam/steamapps/workshop/content/431960"
+    ]
+    property int currentPathIndex: 0
+    
+    function discoverWallpaperEngine() {
+        currentPathIndex = 0
+        checkNextPath()
+    }
+    
+    function checkNextPath() {
+        if (currentPathIndex >= steamPaths.length) {
+            return
+        }
+        
+        const wePath = steamPaths[currentPathIndex]
+        const cleanPath = wePath.replace(/^file:\/\//, '')
+        weDiscoveryProcess.command = ["test", "-d", cleanPath]
+        weDiscoveryProcess.wePath = wePath
+        weDiscoveryProcess.running = true
+    }
     width: 800
     height: 600
     enableShadow: true
     visible: false
     onBackgroundClicked: close()
     onOpened: {
-        modalFocusScope.forceActiveFocus()
+        if (parentModal) {
+            parentModal.shouldHaveFocus = false
+            parentModal.allowFocusOverride = true
+        }
+        Qt.callLater(() => {
+            if (contentLoader && contentLoader.item) {
+                contentLoader.item.forceActiveFocus()
+            }
+        })
     }
-    modalFocusScope.Keys.onPressed: function (event) {
-        keyboardController.handleKey(event)
+    onDialogClosed: {
+        if (parentModal) {
+            parentModal.allowFocusOverride = false
+            parentModal.shouldHaveFocus = Qt.binding(() => {
+                return parentModal.shouldBeVisible
+            })
+        }
     }
     onVisibleChanged: {
         if (visible) {
@@ -148,6 +194,9 @@ DankModal {
             selectedIndex = -1
             keyboardNavigationActive = false
             backButtonFocused = false
+            if (browserType === "wallpaper" && !weAvailable) {
+                discoverWallpaperEngine()
+            }
         }
     }
     onCurrentPathChanged: {
@@ -208,7 +257,12 @@ DankModal {
                 return
             }
             if (!keyboardNavigationActive) {
-                if (event.key === Qt.Key_Tab || event.key === Qt.Key_Down || event.key === Qt.Key_Right) {
+                const isInitKey = event.key === Qt.Key_Tab || event.key === Qt.Key_Down || event.key === Qt.Key_Right ||
+                                  (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) ||
+                                  (event.key === Qt.Key_J && event.modifiers & Qt.ControlModifier) ||
+                                  (event.key === Qt.Key_L && event.modifiers & Qt.ControlModifier)
+
+                if (isInitKey) {
                     keyboardNavigationActive = true
                     if (currentPath !== homeDir) {
                         backButtonFocused = true
@@ -250,6 +304,69 @@ DankModal {
                 }
                 event.accepted = true
                 break
+            case Qt.Key_N:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (backButtonFocused) {
+                        backButtonFocused = false
+                        selectedIndex = 0
+                    } else if (selectedIndex < totalItems - 1) {
+                        selectedIndex++
+                    }
+                    event.accepted = true
+                }
+                break
+            case Qt.Key_P:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (selectedIndex > 0) {
+                        selectedIndex--
+                    } else if (currentPath !== homeDir) {
+                        backButtonFocused = true
+                        selectedIndex = -1
+                    }
+                    event.accepted = true
+                }
+                break
+            case Qt.Key_J:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (selectedIndex < totalItems - 1) {
+                        selectedIndex++
+                    }
+                    event.accepted = true
+                }
+                break
+            case Qt.Key_K:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (selectedIndex > 0) {
+                        selectedIndex--
+                    } else if (currentPath !== homeDir) {
+                        backButtonFocused = true
+                        selectedIndex = -1
+                    }
+                    event.accepted = true
+                }
+                break
+            case Qt.Key_H:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (!backButtonFocused && selectedIndex > 0) {
+                        selectedIndex--
+                    } else if (currentPath !== homeDir) {
+                        backButtonFocused = true
+                        selectedIndex = -1
+                    }
+                    event.accepted = true
+                }
+                break
+            case Qt.Key_L:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (backButtonFocused) {
+                        backButtonFocused = false
+                        selectedIndex = 0
+                    } else if (selectedIndex < totalItems - 1) {
+                        selectedIndex++
+                    }
+                    event.accepted = true
+                }
+                break
             case Qt.Key_Left:
                 if (backButtonFocused)
                     return
@@ -334,11 +451,38 @@ DankModal {
             executeKeyboardSelection(targetIndex)
         }
     }
+    
+    Process {
+        id: weDiscoveryProcess
+        
+        property string wePath: ""
+        running: false
+        
+        onExited: exitCode => {
+            if (exitCode === 0) {
+                fileBrowserModal.weAvailable = true
+                fileBrowserModal.wePath = wePath
+            } else {
+                currentPathIndex++
+                checkNextPath()
+            }
+        }
+    }
 
     content: Component {
         Item {
             anchors.fill: parent
 
+            Keys.onPressed: event => {
+                keyboardController.handleKey(event)
+            }
+
+            onVisibleChanged: {
+                if (visible) {
+                    forceActiveFocus()
+                }
+            }
+
             Column {
                 anchors.fill: parent
                 anchors.margins: Theme.spacingM
@@ -373,6 +517,22 @@ DankModal {
                         anchors.verticalCenter: parent.verticalCenter
                         spacing: Theme.spacingS
 
+                        DankActionButton {
+                            circular: false
+                            iconName: "movie"
+                            iconSize: Theme.iconSize - 4
+                            iconColor: weMode ? Theme.primary : Theme.surfaceText
+                            visible: weAvailable && browserType === "wallpaper"
+                            onClicked: {
+                                weMode = !weMode
+                                if (weMode) {
+                                    navigateTo(wePath)
+                                } else {
+                                    navigateTo(getLastPath())
+                                }
+                            }
+                        }
+                        
                         DankActionButton {
                             circular: false
                             iconName: "info"
@@ -439,8 +599,8 @@ DankModal {
                     width: parent.width
                     height: parent.height - 80
                     clip: true
-                    cellWidth: 150
-                    cellHeight: 130
+                    cellWidth: weMode ? 255 : 150
+                    cellHeight: weMode ? 215 : 130
                     cacheBuffer: 260
                     model: folderModel
                     currentIndex: selectedIndex
@@ -463,11 +623,10 @@ DankModal {
                         required property bool fileIsDir
                         required property string filePath
                         required property string fileName
-                        required property url fileURL
                         required property int index
 
-                        width: 140
-                        height: 120
+                        width: weMode ? 245 : 140
+                        height: weMode ? 205 : 120
                         radius: Theme.cornerRadius
                         color: {
                             if (keyboardNavigationActive && delegateRoot.index === selectedIndex)
@@ -498,16 +657,33 @@ DankModal {
                             spacing: Theme.spacingXS
 
                             Item {
-                                width: 80
-                                height: 60
+                                width: weMode ? 225 : 80
+                                height: weMode ? 165 : 60
                                 anchors.horizontalCenter: parent.horizontalCenter
 
                                 CachingImage {
                                     anchors.fill: parent
-                                    source: (!delegateRoot.fileIsDir && isImageFile(delegateRoot.fileName)) ? ("file://" + delegateRoot.filePath) : ""
+                                    property var weExtensions: [".jpg", ".jpeg", ".png", ".webp", ".gif", ".bmp", ".tga"]
+                                    property int weExtIndex: 0
+                                    source: {
+                                        if (weMode && delegateRoot.fileIsDir) {
+                                            return "file://" + delegateRoot.filePath + "/preview" + weExtensions[weExtIndex]
+                                        }
+                                        return (!delegateRoot.fileIsDir && isImageFile(delegateRoot.fileName)) ? ("file://" + delegateRoot.filePath) : ""
+                                    }
+                                    onStatusChanged: {
+                                        if (weMode && delegateRoot.fileIsDir && status === Image.Error) {
+                                            if (weExtIndex < weExtensions.length - 1) {
+                                                weExtIndex++
+                                                source = "file://" + delegateRoot.filePath + "/preview" + weExtensions[weExtIndex]
+                                            } else {
+                                                source = ""
+                                            }
+                                        }
+                                    }
                                     fillMode: Image.PreserveAspectCrop
-                                    visible: !delegateRoot.fileIsDir && isImageFile(delegateRoot.fileName)
-                                    maxCacheSize: 80
+                                    visible: (!delegateRoot.fileIsDir && isImageFile(delegateRoot.fileName)) || (weMode && delegateRoot.fileIsDir)
+                                    maxCacheSize: weMode ? 225 : 80
                                 }
 
                                 DankIcon {
@@ -523,7 +699,7 @@ DankModal {
                                     name: "folder"
                                     size: Theme.iconSizeLarge
                                     color: Theme.primary
-                                    visible: delegateRoot.fileIsDir
+                                    visible: delegateRoot.fileIsDir && !weMode
                                 }
                             }
 
@@ -550,11 +726,15 @@ DankModal {
                                 // Update selected file info and index first
                                 selectedIndex = delegateRoot.index
                                 setSelectedFileData(delegateRoot.filePath, delegateRoot.fileName, delegateRoot.fileIsDir)
-                                if (delegateRoot.fileIsDir) {
+                                if (weMode && delegateRoot.fileIsDir) {
+                                    var sceneId = delegateRoot.filePath.split("/").pop()
+                                    fileSelected("we:" + sceneId)
+                                    fileBrowserModal.close()
+                                } else if (delegateRoot.fileIsDir) {
                                     navigateTo(delegateRoot.filePath)
                                 } else {
                                     fileSelected(delegateRoot.filePath)
-                                    fileBrowserModal.close() // Close modal after file selection
+                                    fileBrowserModal.close()
                                 }
                             }
                         }
@@ -566,7 +746,11 @@ DankModal {
                                     fileBrowserModal.keyboardSelectionRequested = false
                                     selectedIndex = delegateRoot.index
                                     setSelectedFileData(delegateRoot.filePath, delegateRoot.fileName, delegateRoot.fileIsDir)
-                                    if (delegateRoot.fileIsDir) {
+                                    if (weMode && delegateRoot.fileIsDir) {
+                                        var sceneId = delegateRoot.filePath.split("/").pop()
+                                        fileSelected("we:" + sceneId)
+                                        fileBrowserModal.close()
+                                    } else if (delegateRoot.fileIsDir) {
                                         navigateTo(delegateRoot.filePath)
                                     } else {
                                         fileSelected(delegateRoot.filePath)
@@ -598,7 +782,7 @@ DankModal {
                     width: parent.width - saveButton.width - Theme.spacingM
                     height: 40
                     text: defaultFileName
-                    placeholderText: "Enter filename..."
+                    placeholderText: I18n.tr("Enter filename...")
                     ignoreLeftRightKeys: false
                     focus: saveMode
                     topPadding: Theme.spacingS
@@ -631,7 +815,7 @@ DankModal {
 
                     StyledText {
                         anchors.centerIn: parent
-                        text: "Save"
+                        text: I18n.tr("Save")
                         color: fileNameInput.text.trim() !== "" ? Theme.primaryText : Theme.surfaceVariantText
                         font.pixelSize: Theme.fontSizeMedium
                     }
@@ -735,7 +919,7 @@ DankModal {
                         spacing: Theme.spacingM
                         
                         StyledText {
-                            text: qsTr("File Already Exists")
+                            text: I18n.tr("File Already Exists")
                             font.pixelSize: Theme.fontSizeLarge
                             font.weight: Font.Medium
                             color: Theme.surfaceText
@@ -743,7 +927,7 @@ DankModal {
                         }
                         
                         StyledText {
-                            text: qsTr("A file with this name already exists. Do you want to overwrite it?")
+                            text: I18n.tr("A file with this name already exists. Do you want to overwrite it?")
                             font.pixelSize: Theme.fontSizeMedium
                             color: Theme.surfaceTextMedium
                             width: parent.width
@@ -765,7 +949,7 @@ DankModal {
                                 
                                 StyledText {
                                     anchors.centerIn: parent
-                                    text: qsTr("Cancel")
+                                    text: I18n.tr("Cancel")
                                     font.pixelSize: Theme.fontSizeMedium
                                     color: Theme.surfaceText
                                     font.weight: Font.Medium
@@ -791,7 +975,7 @@ DankModal {
                                 
                                 StyledText {
                                     anchors.centerIn: parent
-                                    text: qsTr("Overwrite")
+                                    text: I18n.tr("Overwrite")
                                     font.pixelSize: Theme.fontSizeMedium
                                     color: Theme.background
                                     font.weight: Font.Medium

Modals/FileBrowser/FileInfo.qml

@@ -134,7 +134,7 @@ Rectangle {
             }
 
             StyledText {
-                text: "File Information"
+                text: I18n.tr("File Information")
                 font.pixelSize: Theme.fontSizeMedium
                 color: Theme.surfaceText
                 font.weight: Font.Medium
@@ -197,7 +197,7 @@ Rectangle {
     }
 
     StyledText {
-        text: "F1/I: Toggle • F10: Help"
+        text: I18n.tr("F1/I: Toggle • F10: Help")
         font.pixelSize: Theme.fontSizeSmall
         color: Theme.surfaceTextMedium
         anchors.bottom: parent.bottom

Modals/FileBrowser/KeyboardHints.qml

@@ -23,7 +23,7 @@ Rectangle {
         spacing: 2
 
         StyledText {
-            text: "Tab/Shift+Tab: Nav • ←→↑↓: Grid Nav • Enter/Space: Select"
+            text: I18n.tr("Tab/Shift+Tab: Nav • ←→↑↓: Grid Nav • Enter/Space: Select")
             font.pixelSize: Theme.fontSizeSmall
             color: Theme.surfaceText
             width: parent.width
@@ -32,7 +32,7 @@ Rectangle {
         }
 
         StyledText {
-            text: "Alt+←/Backspace: Back • F1/I: File Info • F10: Help • Esc: Close"
+            text: I18n.tr("Alt+←/Backspace: Back • F1/I: File Info • F10: Help • Esc: Close")
             font.pixelSize: Theme.fontSizeSmall
             color: Theme.surfaceText
             width: parent.width

Modals/HyprKeybindsModal.qml

@@ -0,0 +1,266 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import qs.Common
+import qs.Modals.Common
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: root
+
+    width: 1400
+    height: 900
+    onBackgroundClicked: close()
+
+    function categorizeKeybinds() {
+        const categories = {
+            "Workspace": [],
+            "Window": [],
+            "Monitor": [],
+            "Execute": [],
+            "System": [],
+            "Other": []
+        }
+
+        function addKeybind(keybind) {
+            const dispatcher = keybind.dispatcher || ""
+            if (dispatcher.includes("workspace")) {
+                categories["Workspace"].push(keybind)
+            } else if (dispatcher.includes("monitor")) {
+                categories["Monitor"].push(keybind)
+            } else if (dispatcher.includes("window") || dispatcher.includes("focus") || dispatcher.includes("move") || dispatcher.includes("swap") || dispatcher.includes("resize") || dispatcher === "killactive" || dispatcher === "fullscreen" || dispatcher === "togglefloating") {
+                categories["Window"].push(keybind)
+            } else if (dispatcher === "exec") {
+                categories["Execute"].push(keybind)
+            } else if (dispatcher === "exit" || dispatcher.includes("dpms")) {
+                categories["System"].push(keybind)
+            } else {
+                categories["Other"].push(keybind)
+            }
+        }
+
+        const allKeybinds = HyprKeybindsService.keybinds.keybinds || []
+        for (let i = 0; i < allKeybinds.length; i++) {
+            addKeybind(allKeybinds[i])
+        }
+
+        const children = HyprKeybindsService.keybinds.children || []
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i]
+            const childKeybinds = child.keybinds || []
+            for (let j = 0; j < childKeybinds.length; j++) {
+                addKeybind(childKeybinds[j])
+            }
+        }
+
+        categories["Workspace"].sort((a, b) => {
+            const dispA = a.dispatcher || ""
+            const dispB = b.dispatcher || ""
+            return dispA.localeCompare(dispB)
+        })
+
+        categories["Window"].sort((a, b) => {
+            const dispA = a.dispatcher || ""
+            const dispB = b.dispatcher || ""
+            return dispA.localeCompare(dispB)
+        })
+
+        categories["Monitor"].sort((a, b) => {
+            const dispA = a.dispatcher || ""
+            const dispB = b.dispatcher || ""
+            return dispA.localeCompare(dispB)
+        })
+
+        categories["Execute"].sort((a, b) => {
+            const modsA = a.mods || []
+            const keyA = a.key || ""
+            const bindA = [...modsA, keyA].join("+")
+
+            const modsB = b.mods || []
+            const keyB = b.key || ""
+            const bindB = [...modsB, keyB].join("+")
+
+            return bindA.localeCompare(bindB)
+        })
+
+        return categories
+    }
+
+    content: Component {
+        Item {
+            anchors.fill: parent
+
+            DankFlickable {
+                id: mainFlickable
+                anchors.fill: parent
+                anchors.margins: Theme.spacingL
+                contentWidth: rowLayout.implicitWidth
+                contentHeight: rowLayout.implicitHeight
+                clip: true
+
+                Row {
+                    id: rowLayout
+                    spacing: Theme.spacingM
+
+                    property var categories: root.categorizeKeybinds()
+                    property real columnWidth: (mainFlickable.width - spacing * 2) / 3
+
+                    Column {
+                        width: rowLayout.columnWidth
+                        spacing: Theme.spacingXS
+
+                        StyledText {
+                            text: "Window / Monitor"
+                            font.pixelSize: Theme.fontSizeMedium
+                            font.weight: Font.Bold
+                            color: Theme.primary
+                        }
+
+                        Rectangle {
+                            width: parent.width
+                            height: 1
+                            color: Theme.primary
+                            opacity: 0.3
+                        }
+
+                        Item { width: 1; height: Theme.spacingXS }
+
+                        Column {
+                            width: parent.width
+                            spacing: Theme.spacingXS
+
+                            Repeater {
+                                model: [...(rowLayout.categories["Window"] || []), ...(rowLayout.categories["Monitor"] || [])]
+
+                                Row {
+                                    width: parent.width
+                                    spacing: Theme.spacingS
+
+                                    StyledRect {
+                                        width: Math.min(140, parent.width * 0.42)
+                                        height: 22
+                                        radius: 4
+                                        opacity: 0.3
+
+                                        StyledText {
+                                            anchors.centerIn: parent
+                                            anchors.margins: 2
+                                            width: parent.width - 4
+                                            text: {
+                                                const mods = modelData.mods || []
+                                                const key = modelData.key || ""
+                                                const parts = [...mods, key]
+                                                return parts.join("+")
+                                            }
+                                            font.pixelSize: Theme.fontSizeSmall
+                                            font.weight: Font.Medium
+                                            isMonospace: true
+                                            elide: Text.ElideRight
+                                            horizontalAlignment: Text.AlignHCenter
+                                        }
+                                    }
+
+                                    StyledText {
+                                        width: parent.width - 150
+                                        text: {
+                                            const comment = modelData.comment || ""
+                                            if (comment) return comment
+
+                                            const dispatcher = modelData.dispatcher || ""
+                                            const params = modelData.params || ""
+                                            return params ? `${dispatcher} ${params}` : dispatcher
+                                        }
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        opacity: 0.9
+                                        elide: Text.ElideRight
+                                        anchors.verticalCenter: parent.verticalCenter
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    Repeater {
+                        model: ["Workspace", "Execute"]
+
+                        Column {
+                            width: rowLayout.columnWidth
+                            spacing: Theme.spacingXS
+
+                            StyledText {
+                                text: modelData
+                                font.pixelSize: Theme.fontSizeMedium
+                                font.weight: Font.Bold
+                                color: Theme.primary
+                            }
+
+                            Rectangle {
+                                width: parent.width
+                                height: 1
+                                color: Theme.primary
+                                opacity: 0.3
+                            }
+
+                            Item { width: 1; height: Theme.spacingXS }
+
+                            Column {
+                                width: parent.width
+                                spacing: Theme.spacingXS
+
+                                Repeater {
+                                    model: rowLayout.categories[modelData] || []
+
+                                    Row {
+                                        width: parent.width
+                                        spacing: Theme.spacingS
+
+                                        StyledRect {
+                                            width: Math.min(140, parent.width * 0.42)
+                                            height: 22
+                                            radius: 4
+                                            opacity: 0.3
+
+                                            StyledText {
+                                                anchors.centerIn: parent
+                                                anchors.margins: 2
+                                                width: parent.width - 4
+                                                text: {
+                                                    const mods = modelData.mods || []
+                                                    const key = modelData.key || ""
+                                                    const parts = [...mods, key]
+                                                    return parts.join("+")
+                                                }
+                                                font.pixelSize: Theme.fontSizeSmall
+                                                font.weight: Font.Medium
+                                                isMonospace: true
+                                                elide: Text.ElideRight
+                                                horizontalAlignment: Text.AlignHCenter
+                                            }
+                                        }
+
+                                        StyledText {
+                                            width: parent.width - 150
+                                            text: {
+                                                const comment = modelData.comment || ""
+                                                if (comment) return comment
+
+                                                const dispatcher = modelData.dispatcher || ""
+                                                const params = modelData.params || ""
+                                                return params ? `${dispatcher} ${params}` : dispatcher
+                                            }
+                                            font.pixelSize: Theme.fontSizeSmall
+                                            opacity: 0.9
+                                            elide: Text.ElideRight
+                                            anchors.verticalCenter: parent.verticalCenter
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

Modals/NetworkInfoModal.qml

@@ -56,7 +56,7 @@ DankModal {
                         spacing: Theme.spacingXS
 
                         StyledText {
-                            text: "Network Information"
+                            text: I18n.tr("Network Information")
                             font.pixelSize: Theme.fontSizeLarge
                             color: Theme.surfaceText
                             font.weight: Font.Medium
@@ -126,7 +126,7 @@ DankModal {
                             id: closeText
 
                             anchors.centerIn: parent
-                            text: "Close"
+                            text: I18n.tr("Close")
                             font.pixelSize: Theme.fontSizeMedium
                             color: Theme.background
                             font.weight: Font.Medium

Modals/NotificationModal.qml

@@ -27,6 +27,7 @@ DankModal {
                 modalKeyboardController.updateSelectedIdFromIndex()
                 if (notificationListRef) {
                     notificationListRef.keyboardActive = true
+                    notificationListRef.currentIndex = 0
                 }
                 modalKeyboardController.selectionVersion++
                 modalKeyboardController.ensureVisible()
@@ -53,6 +54,9 @@ DankModal {
     height: 700
     visible: false
     onBackgroundClicked: hide()
+    onOpened: () => {
+        Qt.callLater(() => modalFocusScope.forceActiveFocus());
+    }
     onShouldBeVisibleChanged: (shouldBeVisible) => {
         if (!shouldBeVisible) {
             notificationModalOpen = false

Modals/PowerMenuModal.qml

@@ -1,80 +1,141 @@
 import QtQuick
 import qs.Common
 import qs.Modals.Common
+import qs.Services
 import qs.Widgets
 
 DankModal {
     id: root
 
     property int selectedIndex: 0
-    property int optionCount: 4
+    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 selectOption() {
+    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 = [{
-            "action": "logout",
-            "title": "Log Out",
-            "message": "Are you sure you want to log out?"
-        }, {
-            "action": "suspend",
-            "title": "Suspend",
-            "message": "Are you sure you want to suspend the system?"
-        }, {
-            "action": "reboot",
-            "title": "Reboot",
-            "message": "Are you sure you want to reboot the system?"
-        }, {
-            "action": "poweroff",
-            "title": "Power Off",
-            "message": "Are you sure you want to power off the system?"
-        }];
-        const selected = actions[selectedIndex];
+        const actions = {
+            "logout": {
+                "title": I18n.tr("Log Out"),
+                "message": I18n.tr("Are you sure you want to log out?")
+            },
+            "suspend": {
+                "title": I18n.tr("Suspend"),
+                "message": I18n.tr("Are you sure you want to suspend the system?")
+            },
+            "hibernate": {
+                "title": I18n.tr("Hibernate"),
+                "message": I18n.tr("Are you sure you want to hibernate the system?")
+            },
+            "reboot": {
+                "title": I18n.tr("Reboot"),
+                "message": I18n.tr("Are you sure you want to reboot the system?")
+            },
+            "poweroff": {
+                "title": I18n.tr("Power Off"),
+                "message": I18n.tr("Are you sure you want to power off the system?")
+            }
+        }
+        const selected = actions[action]
         if (selected) {
-            root.powerActionRequested(selected.action, selected.title, selected.message);
+            root.powerActionRequested(action, selected.title, selected.message);
         }
 
     }
 
     shouldBeVisible: false
     width: 320
-    height: 300
+    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();
     }
     onOpened: () => {
         selectedIndex = 0;
-        modalFocusScope.forceActiveFocus();
+        Qt.callLater(() => modalFocusScope.forceActiveFocus());
     }
     modalFocusScope.Keys.onPressed: (event) => {
         switch (event.key) {
         case Qt.Key_Up:
+        case Qt.Key_Backtab:
             selectedIndex = (selectedIndex - 1 + optionCount) % optionCount;
             event.accepted = true;
             break;
         case Qt.Key_Down:
-            selectedIndex = (selectedIndex + 1) % optionCount;
-            event.accepted = true;
-            break;
         case Qt.Key_Tab:
             selectedIndex = (selectedIndex + 1) % optionCount;
             event.accepted = true;
             break;
         case Qt.Key_Return:
         case Qt.Key_Enter:
-            selectOption();
+            const actions = ["logout", "suspend"];
+            if (SessionService.hibernateSupported) actions.push("hibernate");
+            actions.push("reboot", "poweroff");
+            if (selectedIndex < actions.length) {
+                selectOption(actions[selectedIndex]);
+            }
             event.accepted = true;
             break;
+        case Qt.Key_N:
+            if (event.modifiers & Qt.ControlModifier) {
+                selectedIndex = (selectedIndex + 1) % optionCount;
+                event.accepted = true;
+            }
+            break;
+        case Qt.Key_P:
+            if (event.modifiers & Qt.ControlModifier) {
+                selectedIndex = (selectedIndex - 1 + optionCount) % optionCount;
+                event.accepted = true;
+            }
+            break;
+        case Qt.Key_J:
+            if (event.modifiers & Qt.ControlModifier) {
+                selectedIndex = (selectedIndex + 1) % optionCount;
+                event.accepted = true;
+            }
+            break;
+        case Qt.Key_K:
+            if (event.modifiers & Qt.ControlModifier) {
+                selectedIndex = (selectedIndex - 1 + optionCount) % optionCount;
+                event.accepted = true;
+            }
+            break;
         }
     }
 
     content: Component {
         Item {
             anchors.fill: parent
+            implicitHeight: mainColumn.implicitHeight + Theme.spacingL * 2
 
             Column {
+                id: mainColumn
                 anchors.fill: parent
                 anchors.margins: Theme.spacingL
                 spacing: Theme.spacingM
@@ -83,7 +144,7 @@ DankModal {
                     width: parent.width
 
                     StyledText {
-                        text: "Power Options"
+                        text: I18n.tr("Power Options")
                         font.pixelSize: Theme.fontSizeLarge
                         color: Theme.surfaceText
                         font.weight: Font.Medium
@@ -140,7 +201,7 @@ DankModal {
                             }
 
                             StyledText {
-                                text: "Log Out"
+                                text: I18n.tr("Log Out")
                                 font.pixelSize: Theme.fontSizeMedium
                                 color: Theme.surfaceText
                                 font.weight: Font.Medium
@@ -157,7 +218,7 @@ DankModal {
                             cursorShape: Qt.PointingHandCursor
                             onClicked: () => {
                                 selectedIndex = 0;
-                                selectOption();
+                                selectOption("logout");
                             }
                         }
 
@@ -193,7 +254,7 @@ DankModal {
                             }
 
                             StyledText {
-                                text: "Suspend"
+                                text: I18n.tr("Suspend")
                                 font.pixelSize: Theme.fontSizeMedium
                                 color: Theme.surfaceText
                                 font.weight: Font.Medium
@@ -210,7 +271,7 @@ DankModal {
                             cursorShape: Qt.PointingHandCursor
                             onClicked: () => {
                                 selectedIndex = 1;
-                                selectOption();
+                                selectOption("suspend");
                             }
                         }
 
@@ -222,15 +283,70 @@ DankModal {
                         radius: Theme.cornerRadius
                         color: {
                             if (selectedIndex === 2) {
-                                return Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.12);
-                            } else if (rebootArea.containsMouse) {
-                                return Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.08);
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
+                            } else if (hibernateArea.containsMouse) {
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08);
                             } else {
                                 return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08);
                             }
                         }
-                        border.color: selectedIndex === 2 ? Theme.warning : "transparent"
+                        border.color: selectedIndex === 2 ? Theme.primary : "transparent"
                         border.width: selectedIndex === 2 ? 1 : 0
+                        visible: SessionService.hibernateSupported
+
+                        Row {
+                            anchors.left: parent.left
+                            anchors.leftMargin: Theme.spacingM
+                            anchors.verticalCenter: parent.verticalCenter
+                            spacing: Theme.spacingM
+
+                            DankIcon {
+                                name: "ac_unit"
+                                size: Theme.iconSize
+                                color: Theme.surfaceText
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                            StyledText {
+                                text: I18n.tr("Hibernate")
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceText
+                                font.weight: Font.Medium
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                        }
+
+                        MouseArea {
+                            id: hibernateArea
+
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: () => {
+                                selectedIndex = 2;
+                                selectOption("hibernate");
+                            }
+                        }
+
+                    }
+
+                    Rectangle {
+                        width: parent.width
+                        height: 50
+                        radius: Theme.cornerRadius
+                        color: {
+                            const rebootIndex = SessionService.hibernateSupported ? 3 : 2;
+                            if (selectedIndex === rebootIndex) {
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
+                            } else if (rebootArea.containsMouse) {
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08);
+                            } else {
+                                return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08);
+                            }
+                        }
+                        border.color: selectedIndex === (SessionService.hibernateSupported ? 3 : 2) ? Theme.primary : "transparent"
+                        border.width: selectedIndex === (SessionService.hibernateSupported ? 3 : 2) ? 1 : 0
 
                         Row {
                             anchors.left: parent.left
@@ -246,7 +362,7 @@ DankModal {
                             }
 
                             StyledText {
-                                text: "Reboot"
+                                text: I18n.tr("Reboot")
                                 font.pixelSize: Theme.fontSizeMedium
                                 color: rebootArea.containsMouse ? Theme.warning : Theme.surfaceText
                                 font.weight: Font.Medium
@@ -262,8 +378,8 @@ DankModal {
                             hoverEnabled: true
                             cursorShape: Qt.PointingHandCursor
                             onClicked: () => {
-                                selectedIndex = 2;
-                                selectOption();
+                                selectedIndex = SessionService.hibernateSupported ? 3 : 2;
+                                selectOption("reboot");
                             }
                         }
 
@@ -274,16 +390,17 @@ DankModal {
                         height: 50
                         radius: Theme.cornerRadius
                         color: {
-                            if (selectedIndex === 3) {
-                                return Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12);
+                            const powerOffIndex = SessionService.hibernateSupported ? 4 : 3;
+                            if (selectedIndex === powerOffIndex) {
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
                             } else if (powerOffArea.containsMouse) {
-                                return Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.08);
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08);
                             } else {
                                 return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08);
                             }
                         }
-                        border.color: selectedIndex === 3 ? Theme.error : "transparent"
-                        border.width: selectedIndex === 3 ? 1 : 0
+                        border.color: selectedIndex === (SessionService.hibernateSupported ? 4 : 3) ? Theme.primary : "transparent"
+                        border.width: selectedIndex === (SessionService.hibernateSupported ? 4 : 3) ? 1 : 0
 
                         Row {
                             anchors.left: parent.left
@@ -299,7 +416,7 @@ DankModal {
                             }
 
                             StyledText {
-                                text: "Power Off"
+                                text: I18n.tr("Power Off")
                                 font.pixelSize: Theme.fontSizeMedium
                                 color: powerOffArea.containsMouse ? Theme.error : Theme.surfaceText
                                 font.weight: Font.Medium
@@ -315,8 +432,8 @@ DankModal {
                             hoverEnabled: true
                             cursorShape: Qt.PointingHandCursor
                             onClicked: () => {
-                                selectedIndex = 3;
-                                selectOption();
+                                selectedIndex = SessionService.hibernateSupported ? 4 : 3;
+                                selectOption("poweroff");
                             }
                         }
 
@@ -328,14 +445,6 @@ DankModal {
                     height: Theme.spacingS
                 }
 
-                StyledText {
-                    text: "↑↓ Navigate • Tab Cycle • Enter Select • Esc Close"
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.surfaceVariantText
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    opacity: 0.7
-                }
-
             }
 
         }

Modals/ProcessListModal.qml

@@ -123,7 +123,7 @@ DankModal {
                     }
 
                     StyledText {
-                        text: "System Monitor Unavailable"
+                        text: I18n.tr("System Monitor Unavailable")
                         font.pixelSize: Theme.fontSizeLarge
                         font.weight: Font.Bold
                         color: Theme.error
@@ -131,7 +131,7 @@ DankModal {
                     }
 
                     StyledText {
-                        text: "The 'dgop' tool is required for system monitoring.\nPlease install dgop to use this feature."
+                        text: I18n.tr("The 'dgop' tool is required for system monitoring.\nPlease install dgop to use this feature.")
                         font.pixelSize: Theme.fontSizeMedium
                         color: Theme.surfaceText
                         anchors.horizontalCenter: parent.horizontalCenter
@@ -154,7 +154,7 @@ DankModal {
                     height: 40
 
                     StyledText {
-                        text: "System Monitor"
+                        text: I18n.tr("System Monitor")
                         font.pixelSize: Theme.fontSizeLarge + 4
                         font.weight: Font.Bold
                         color: Theme.surfaceText
@@ -181,7 +181,7 @@ DankModal {
                 Rectangle {
                     Layout.fillWidth: true
                     height: 52
-                    color: Theme.surfaceSelected
+                    color: Theme.surfaceContainerHigh
                     radius: Theme.cornerRadius
                     border.color: Theme.outlineLight
                     border.width: 1
@@ -281,7 +281,7 @@ DankModal {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
                     radius: Theme.cornerRadius
-                    color: Theme.surfaceLight
+                    color: Theme.surfaceContainerHigh
                     border.color: Theme.outlineLight
                     border.width: 1
 

Modals/Settings/PowerSettings.qml

@@ -0,0 +1,557 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: powerTab
+
+    DankFlickable {
+        anchors.fill: parent
+        anchors.topMargin: Theme.spacingL
+        clip: true
+        contentHeight: mainColumn.height
+        contentWidth: width
+
+        Column {
+            id: mainColumn
+            width: parent.width
+            spacing: Theme.spacingXL
+
+            StyledText {
+                text: I18n.tr("Battery not detected - only AC power settings available")
+                font.pixelSize: Theme.fontSizeMedium
+                color: Theme.surfaceVariantText
+                visible: !BatteryService.batteryAvailable
+            }
+
+            StyledRect {
+                width: parent.width
+                height: lockScreenSection.implicitHeight + Theme.spacingL * 2
+                radius: Theme.cornerRadius
+                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                border.width: 0
+
+                Column {
+                    id: lockScreenSection
+                    anchors.fill: parent
+                    anchors.margins: Theme.spacingL
+                    spacing: Theme.spacingM
+
+                    Row {
+                        width: parent.width
+                        spacing: Theme.spacingM
+
+                        DankIcon {
+                            name: "lock"
+                            size: Theme.iconSize
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: I18n.tr("Lock Screen")
+                            font.pixelSize: Theme.fontSizeLarge
+                            font.weight: Font.Medium
+                            color: Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+
+                    DankToggle {
+                        width: parent.width
+                        text: I18n.tr("Show Power Actions")
+                        description: I18n.tr("Show power, restart, and logout buttons on the lock screen")
+                        checked: SettingsData.lockScreenShowPowerActions
+                        onToggled: checked => SettingsData.setLockScreenShowPowerActions(checked)
+                    }
+
+                    StyledText {
+                        text: I18n.tr("loginctl not available - lock integration requires DMS socket connection")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.warning
+                        visible: !SessionService.loginctlAvailable
+                        width: parent.width
+                        wrapMode: Text.Wrap
+                    }
+
+                    DankToggle {
+                        width: parent.width
+                        text: I18n.tr("Enable loginctl lock integration")
+                        description: I18n.tr("Bind lock screen to dbus signals from loginctl. Disable if using an external lock screen")
+                        checked: SessionService.loginctlAvailable && SettingsData.loginctlLockIntegration
+                        enabled: SessionService.loginctlAvailable
+                        onToggled: checked => {
+                            if (SessionService.loginctlAvailable) {
+                                SettingsData.setLoginctlLockIntegration(checked)
+                            }
+                        }
+                    }
+
+                    DankToggle {
+                        width: parent.width
+                        text: I18n.tr("Lock before suspend")
+                        description: I18n.tr("Automatically lock the screen when the system prepares to suspend")
+                        checked: SettingsData.lockBeforeSuspend
+                        visible: SessionService.loginctlAvailable && SettingsData.loginctlLockIntegration
+                        onToggled: checked => SettingsData.setLockBeforeSuspend(checked)
+                    }
+
+                    DankToggle {
+                        width: parent.width
+                        text: I18n.tr("Enable fingerprint authentication")
+                        description: I18n.tr("Use fingerprint reader for lock screen authentication (requires enrolled fingerprints)")
+                        checked: SettingsData.enableFprint
+                        visible: SettingsData.fprintdAvailable
+                        onToggled: checked => SettingsData.setEnableFprint(checked)
+                    }
+                }
+            }
+
+            StyledRect {
+                width: parent.width
+                height: timeoutSection.implicitHeight + Theme.spacingL * 2
+                radius: Theme.cornerRadius
+                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                border.width: 0
+
+                Column {
+                    id: timeoutSection
+                    anchors.fill: parent
+                    anchors.margins: Theme.spacingL
+                    spacing: Theme.spacingM
+
+                    Row {
+                        width: parent.width
+                        spacing: Theme.spacingM
+
+                        DankIcon {
+                            name: "schedule"
+                            size: Theme.iconSize
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: I18n.tr("Idle Settings")
+                            font.pixelSize: Theme.fontSizeLarge
+                            font.weight: Font.Medium
+                            color: Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        Item {
+                            width: Math.max(0, parent.width - parent.children[0].width - parent.children[1].width - powerCategory.width - Theme.spacingM * 3)
+                            height: parent.height
+                        }
+
+                        DankButtonGroup {
+                            id: powerCategory
+                            anchors.verticalCenter: parent.verticalCenter
+                            visible: BatteryService.batteryAvailable
+                            model: ["AC Power", "Battery"]
+                            currentIndex: 0
+                            selectionMode: "single"
+                            checkEnabled: false
+                        }
+                    }
+
+                    DankDropdown {
+                        id: lockDropdown
+                        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]
+
+                        text: I18n.tr("Automatically lock after")
+                        options: timeoutOptions
+
+                        Connections {
+                            target: powerCategory
+                            function onCurrentIndexChanged() {
+                                const currentTimeout = powerCategory.currentIndex === 0 ? SettingsData.acLockTimeout : SettingsData.batteryLockTimeout
+                                const index = lockDropdown.timeoutValues.indexOf(currentTimeout)
+                                lockDropdown.currentValue = index >= 0 ? lockDropdown.timeoutOptions[index] : "Never"
+                            }
+                        }
+
+                        Component.onCompleted: {
+                            const currentTimeout = powerCategory.currentIndex === 0 ? SettingsData.acLockTimeout : SettingsData.batteryLockTimeout
+                            const index = timeoutValues.indexOf(currentTimeout)
+                            currentValue = index >= 0 ? timeoutOptions[index] : "Never"
+                        }
+
+                        onValueChanged: value => {
+                            const index = timeoutOptions.indexOf(value)
+                            if (index >= 0) {
+                                const timeout = timeoutValues[index]
+                                if (powerCategory.currentIndex === 0) {
+                                    SettingsData.setAcLockTimeout(timeout)
+                                } else {
+                                    SettingsData.setBatteryLockTimeout(timeout)
+                                }
+                            }
+                        }
+                    }
+
+                    DankDropdown {
+                        id: monitorDropdown
+                        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]
+
+                        text: I18n.tr("Turn off monitors after")
+                        options: timeoutOptions
+
+                        Connections {
+                            target: powerCategory
+                            function onCurrentIndexChanged() {
+                                const currentTimeout = powerCategory.currentIndex === 0 ? SettingsData.acMonitorTimeout : SettingsData.batteryMonitorTimeout
+                                const index = monitorDropdown.timeoutValues.indexOf(currentTimeout)
+                                monitorDropdown.currentValue = index >= 0 ? monitorDropdown.timeoutOptions[index] : "Never"
+                            }
+                        }
+
+                        Component.onCompleted: {
+                            const currentTimeout = powerCategory.currentIndex === 0 ? SettingsData.acMonitorTimeout : SettingsData.batteryMonitorTimeout
+                            const index = timeoutValues.indexOf(currentTimeout)
+                            currentValue = index >= 0 ? timeoutOptions[index] : "Never"
+                        }
+
+                        onValueChanged: value => {
+                            const index = timeoutOptions.indexOf(value)
+                            if (index >= 0) {
+                                const timeout = timeoutValues[index]
+                                if (powerCategory.currentIndex === 0) {
+                                    SettingsData.setAcMonitorTimeout(timeout)
+                                } else {
+                                    SettingsData.setBatteryMonitorTimeout(timeout)
+                                }
+                            }
+                        }
+                    }
+
+                    DankDropdown {
+                        id: suspendDropdown
+                        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]
+
+                        text: I18n.tr("Suspend system after")
+                        options: timeoutOptions
+
+                        Connections {
+                            target: powerCategory
+                            function onCurrentIndexChanged() {
+                                const currentTimeout = powerCategory.currentIndex === 0 ? SettingsData.acSuspendTimeout : SettingsData.batterySuspendTimeout
+                                const index = suspendDropdown.timeoutValues.indexOf(currentTimeout)
+                                suspendDropdown.currentValue = index >= 0 ? suspendDropdown.timeoutOptions[index] : "Never"
+                            }
+                        }
+
+                        Component.onCompleted: {
+                            const currentTimeout = powerCategory.currentIndex === 0 ? SettingsData.acSuspendTimeout : SettingsData.batterySuspendTimeout
+                            const index = timeoutValues.indexOf(currentTimeout)
+                            currentValue = index >= 0 ? timeoutOptions[index] : "Never"
+                        }
+
+                        onValueChanged: value => {
+                            const index = timeoutOptions.indexOf(value)
+                            if (index >= 0) {
+                                const timeout = timeoutValues[index]
+                                if (powerCategory.currentIndex === 0) {
+                                    SettingsData.setAcSuspendTimeout(timeout)
+                                } else {
+                                    SettingsData.setBatterySuspendTimeout(timeout)
+                                }
+                            }
+                        }
+                    }
+
+                    DankDropdown {
+                        id: hibernateDropdown
+                        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]
+
+                        text: I18n.tr("Hibernate system after")
+                        options: timeoutOptions
+                        visible: SessionService.hibernateSupported
+
+                        Connections {
+                            target: powerCategory
+                            function onCurrentIndexChanged() {
+                                const currentTimeout = powerCategory.currentIndex === 0 ? SettingsData.acHibernateTimeout : SettingsData.batteryHibernateTimeout
+                                const index = hibernateDropdown.timeoutValues.indexOf(currentTimeout)
+                                hibernateDropdown.currentValue = index >= 0 ? hibernateDropdown.timeoutOptions[index] : "Never"
+                            }
+                        }
+
+                        Component.onCompleted: {
+                            const currentTimeout = powerCategory.currentIndex === 0 ? SettingsData.acHibernateTimeout : SettingsData.batteryHibernateTimeout
+                            const index = timeoutValues.indexOf(currentTimeout)
+                            currentValue = index >= 0 ? timeoutOptions[index] : "Never"
+                        }
+
+                        onValueChanged: value => {
+                            const index = timeoutOptions.indexOf(value)
+                            if (index >= 0) {
+                                const timeout = timeoutValues[index]
+                                if (powerCategory.currentIndex === 0) {
+                                    SettingsData.setAcHibernateTimeout(timeout)
+                                } else {
+                                    SettingsData.setBatteryHibernateTimeout(timeout)
+                                }
+                            }
+                        }
+                    }
+
+                    StyledText {
+                        text: I18n.tr("Idle monitoring not supported - requires newer Quickshell version")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.error
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        visible: !IdleService.idleMonitorAvailable
+                    }
+                }
+            }
+
+            StyledRect {
+                width: parent.width
+                height: powerCommandConfirmSection.implicitHeight + Theme.spacingL * 2
+                radius: Theme.cornerRadius
+                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                border.width: 0
+
+                Column {
+                    id: powerCommandConfirmSection
+                    anchors.fill: parent
+                    anchors.margins: Theme.spacingL
+                    spacing: Theme.spacingM
+
+                    Row {
+                        width: parent.width
+                        spacing: Theme.spacingM
+
+                        DankIcon {
+                            name: "check_circle"
+                            size: Theme.iconSize
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: I18n.tr("Power Action Confirmation")
+                            font.pixelSize: Theme.fontSizeLarge
+                            font.weight: Font.Medium
+                            color: Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+
+                    DankToggle {
+                        width: parent.width
+                        text: I18n.tr("Show Confirmation on Power Actions")
+                        description: I18n.tr("Request confirmation on power off, restart, suspend, hibernate and logout actions")
+                        checked: SettingsData.powerActionConfirm
+                        onToggled: checked => SettingsData.setPowerActionConfirm(checked)
+                    }
+                }
+            }
+
+            StyledRect {
+                width: parent.width
+                height: powerCommandCustomization.implicitHeight + Theme.spacingL * 2
+                radius: Theme.cornerRadius
+                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                border.width: 0
+
+                Column {
+                    id: powerCommandCustomization
+                    anchors.fill: parent
+                    anchors.margins: Theme.spacingL
+                    spacing: Theme.spacingL
+
+                    Row {
+                        width: parent.width
+                        spacing: Theme.spacingM
+
+                        DankIcon {
+                            name: "developer_mode"
+                            size: Theme.iconSize
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: I18n.tr("Custom Power Actions")
+                            font.pixelSize: Theme.fontSizeLarge
+                            font.weight: Font.Medium
+                            color: Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+
+                    Column {
+                        width: parent.width
+                        spacing: Theme.spacingXS
+                        anchors.left: parent.left
+
+                        StyledText {
+                            text: I18n.tr("Command or script to run instead of the standard logout procedure")
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceVariantText
+                        }
+
+                        DankTextField {
+                            id: customLogoutCommand
+                            width: parent.width
+                            height: 48
+                            placeholderText: "/usr/bin/myLogout.sh"
+                            backgroundColor: Theme.surfaceVariant
+                            normalBorderColor: Theme.primarySelected
+                            focusedBorderColor: Theme.primary
+
+                            Component.onCompleted: {
+                                if (SettingsData.customPowerActionLogout) {
+                                    text = SettingsData.customPowerActionLogout;
+                                }
+                            }
+
+                            onTextEdited: {
+                                SettingsData.setCustomPowerActionLogout(text.trim());
+                            }
+                        }
+                    }
+
+                    Column {
+                        width: parent.width
+                        spacing: Theme.spacingXS
+                        anchors.left: parent.left
+
+                        StyledText {
+                            text: I18n.tr("Command or script to run instead of the standard suspend procedure")
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceVariantText
+                        }
+
+                        DankTextField {
+                            id: customSuspendCommand
+                            width: parent.width
+                            height: 48
+                            placeholderText: "/usr/bin/mySuspend.sh"
+                            backgroundColor: Theme.surfaceVariant
+                            normalBorderColor: Theme.primarySelected
+                            focusedBorderColor: Theme.primary
+
+                            Component.onCompleted: {
+                                if (SettingsData.customPowerActionSuspend) {
+                                    text = SettingsData.customPowerActionSuspend;
+                                }
+                            }
+
+                            onTextEdited: {
+                                SettingsData.setCustomPowerActionSuspend(text.trim());
+                            }
+                        }
+                    }
+
+                    Column {
+                        width: parent.width
+                        spacing: Theme.spacingXS
+                        anchors.left: parent.left
+
+                        StyledText {
+                            text: I18n.tr("Command or script to run instead of the standard hibernate procedure")
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceVariantText
+                        }
+
+                        DankTextField {
+                            id: customHibernateCommand
+                            width: parent.width
+                            height: 48
+                            placeholderText: "/usr/bin/myHibernate.sh"
+                            backgroundColor: Theme.surfaceVariant
+                            normalBorderColor: Theme.primarySelected
+                            focusedBorderColor: Theme.primary
+
+                            Component.onCompleted: {
+                                if (SettingsData.customPowerActionHibernate) {
+                                    text = SettingsData.customPowerActionHibernate;
+                                }
+                            }
+
+                            onTextEdited: {
+                                SettingsData.setCustomPowerActionHibernate(text.trim());
+                            }
+                        }
+                    }
+
+                    Column {
+                        width: parent.width
+                        spacing: Theme.spacingXS
+                        anchors.left: parent.left
+
+                        StyledText {
+                            text: I18n.tr("Command or script to run instead of the standard reboot procedure")
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceVariantText
+                        }
+
+                        DankTextField {
+                            id: customRebootCommand
+                            width: parent.width
+                            height: 48
+                            placeholderText: "/usr/bin/myReboot.sh"
+                            backgroundColor: Theme.surfaceVariant
+                            normalBorderColor: Theme.primarySelected
+                            focusedBorderColor: Theme.primary
+
+                            Component.onCompleted: {
+                                if (SettingsData.customPowerActionReboot) {
+                                    text = SettingsData.customPowerActionReboot;
+                                }
+                            }
+
+                            onTextEdited: {
+                                SettingsData.setCustomPowerActionReboot(text.trim());
+                            }
+                        }
+                    }
+
+                    Column {
+                        width: parent.width
+                        spacing: Theme.spacingXS
+                        anchors.left: parent.left
+
+                        StyledText {
+                            text: I18n.tr("Command or script to run instead of the standard power off procedure")
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceVariantText
+                        }
+
+                        DankTextField {
+                            id: customPowerOffCommand
+                            width: parent.width
+                            height: 48
+                            placeholderText: "/usr/bin/myPowerOff.sh"
+                            backgroundColor: Theme.surfaceVariant
+                            normalBorderColor: Theme.primarySelected
+                            focusedBorderColor: Theme.primary
+
+                            Component.onCompleted: {
+                                if (SettingsData.customPowerActionPowerOff) {
+                                    text = SettingsData.customPowerActionPowerOff;
+                                }
+                            }
+
+                            onTextEdited: {
+                                SettingsData.setCustomPowerActionPowerOff(text.trim());
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

Modals/Settings/ProfileSection.qml

@@ -25,25 +25,15 @@ Rectangle {
         Item {
             id: profileImageContainer
 
-            property bool hasImage: profileImageSource.status === Image.Ready
-
             width: 80
             height: 80
             anchors.verticalCenter: parent.verticalCenter
 
-            Rectangle {
+            DankCircularImage {
+                id: profileImage
+
                 anchors.fill: parent
-                radius: width / 2
-                color: "transparent"
-                border.color: Theme.primary
-                border.width: 1
-                visible: parent.hasImage
-            }
-
-            Image {
-                id: profileImageSource
-
-                source: {
+                imageSource: {
                     if (PortalService.profileImage === "") {
                         return "";
                     }
@@ -52,55 +42,7 @@ Rectangle {
                     }
                     return PortalService.profileImage;
                 }
-                smooth: true
-                asynchronous: true
-                mipmap: true
-                cache: true
-                visible: false
-            }
-
-            MultiEffect {
-                anchors.fill: parent
-                anchors.margins: 5
-                source: profileImageSource
-                maskEnabled: true
-                maskSource: profileCircularMask
-                visible: profileImageContainer.hasImage
-                maskThresholdMin: 0.5
-                maskSpreadAtMin: 1
-            }
-
-            Item {
-                id: profileCircularMask
-
-                width: 70
-                height: 70
-                layer.enabled: true
-                layer.smooth: true
-                visible: false
-
-                Rectangle {
-                    anchors.fill: parent
-                    radius: width / 2
-                    color: "black"
-                    antialiasing: true
-                }
-
-            }
-
-            Rectangle {
-                anchors.fill: parent
-                radius: width / 2
-                color: Theme.primary
-                visible: !parent.hasImage
-
-                DankIcon {
-                    anchors.centerIn: parent
-                    name: "person"
-                    size: Theme.iconSizeLarge
-                    color: Theme.primaryText
-                }
-
+                fallbackIcon: "person"
             }
 
             Rectangle {
@@ -147,7 +89,7 @@ Rectangle {
                         height: 28
                         radius: 14
                         color: Qt.rgba(255, 255, 255, 0.9)
-                        visible: profileImageContainer.hasImage
+                        visible: profileImage.hasImage
 
                         DankIcon {
                             anchors.centerIn: parent

Modals/Settings/SettingsContent.qml

@@ -2,11 +2,12 @@ import QtQuick
 import qs.Common
 import qs.Modules.Settings
 
-Item {
+FocusScope {
     id: root
 
     property int currentIndex: 0
     property var parentModal: null
+    focus: true
 
     Rectangle {
         anchors.fill: parent
@@ -34,27 +35,14 @@ Item {
         }
 
         Loader {
-            id: timeLoader
+            id: timeWeatherLoader
 
             anchors.fill: parent
             active: root.currentIndex === 1
             visible: active
             asynchronous: true
 
-            sourceComponent: TimeTab {
-            }
-
-        }
-
-        Loader {
-            id: weatherLoader
-
-            anchors.fill: parent
-            active: root.currentIndex === 2
-            visible: active
-            asynchronous: true
-
-            sourceComponent: WeatherTab {
+            sourceComponent: TimeWeatherTab {
             }
 
         }
@@ -63,11 +51,12 @@ Item {
             id: topBarLoader
 
             anchors.fill: parent
-            active: root.currentIndex === 3
+            active: root.currentIndex === 2
             visible: active
             asynchronous: true
 
-            sourceComponent: TopBarTab {
+            sourceComponent: DankBarTab {
+                parentModal: root.parentModal
             }
 
         }
@@ -76,7 +65,7 @@ Item {
             id: widgetsLoader
 
             anchors.fill: parent
-            active: root.currentIndex === 4
+            active: root.currentIndex === 3
             visible: active
             asynchronous: true
 
@@ -89,7 +78,7 @@ Item {
             id: dockLoader
 
             anchors.fill: parent
-            active: root.currentIndex === 5
+            active: root.currentIndex === 4
             visible: active
             asynchronous: true
 
@@ -105,7 +94,7 @@ Item {
             id: displaysLoader
 
             anchors.fill: parent
-            active: root.currentIndex === 6
+            active: root.currentIndex === 5
             visible: active
             asynchronous: true
 
@@ -115,14 +104,14 @@ Item {
         }
 
         Loader {
-            id: recentAppsLoader
+            id: launcherLoader
 
             anchors.fill: parent
-            active: root.currentIndex === 7
+            active: root.currentIndex === 6
             visible: active
             asynchronous: true
 
-            sourceComponent: RecentAppsTab {
+            sourceComponent: LauncherTab {
             }
 
         }
@@ -131,7 +120,7 @@ Item {
             id: themeColorsLoader
 
             anchors.fill: parent
-            active: root.currentIndex === 8
+            active: root.currentIndex === 7
             visible: active
             asynchronous: true
 
@@ -141,13 +130,40 @@ Item {
         }
 
         Loader {
-            id: aboutLoader
+            id: powerLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 8
+            visible: active
+            asynchronous: true
+
+            sourceComponent: PowerSettings {
+            }
+
+        }
+
+        Loader {
+            id: pluginsLoader
 
             anchors.fill: parent
             active: root.currentIndex === 9
             visible: active
             asynchronous: true
 
+            sourceComponent: PluginsTab {
+                parentModal: root.parentModal
+            }
+
+        }
+
+        Loader {
+            id: aboutLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 10
+            visible: active
+            asynchronous: true
+
             sourceComponent: AboutTab {
             }
 

Modals/Settings/SettingsModal.qml

@@ -12,6 +12,7 @@ DankModal {
     id: settingsModal
 
     property Component settingsContent
+    property alias profileBrowser: profileBrowser
 
     signal closingModal()
 
@@ -33,7 +34,7 @@ DankModal {
 
     objectName: "settingsModal"
     width: 800
-    height: 750
+    height: 800
     visible: false
     onBackgroundClicked: () => {
         return hide();
@@ -77,6 +78,7 @@ DankModal {
         id: profileBrowser
 
         allowStacking: true
+        parentModal: settingsModal
         browserTitle: "Select Profile Image"
         browserIcon: "person"
         browserType: "profile"
@@ -86,12 +88,6 @@ DankModal {
             close();
         }
         onDialogClosed: () => {
-            if (settingsModal) {
-                settingsModal.allowFocusOverride = false;
-                settingsModal.shouldHaveFocus = Qt.binding(() => {
-                    return settingsModal.shouldBeVisible;
-                });
-            }
             allowStacking = true;
         }
     }
@@ -100,6 +96,7 @@ DankModal {
         id: wallpaperBrowser
 
         allowStacking: true
+        parentModal: settingsModal
         browserTitle: "Select Wallpaper"
         browserIcon: "wallpaper"
         browserType: "wallpaper"
@@ -114,7 +111,7 @@ DankModal {
     }
 
     settingsContent: Component {
-        Item {
+        FocusScope {
             anchors.fill: parent
             focus: true
 
@@ -143,7 +140,7 @@ DankModal {
                         }
 
                         StyledText {
-                            text: "Settings"
+                            text: I18n.tr("Settings")
                             font.pixelSize: Theme.fontSizeXLarge
                             color: Theme.surfaceText
                             font.weight: Font.Medium

Modals/Settings/SettingsSidebar.qml

@@ -9,34 +9,37 @@ Rectangle {
     property int currentIndex: 0
     property var parentModal: null
     readonly property var sidebarItems: [{
-        "text": "Personalization",
+        "text": I18n.tr("Personalization"),
         "icon": "person"
     }, {
-        "text": "Time & Date",
+        "text": I18n.tr("Time & Weather"),
         "icon": "schedule"
     }, {
-        "text": "Weather",
-        "icon": "cloud"
-    }, {
-        "text": "Top Bar",
+        "text": I18n.tr("Dank Bar"),
         "icon": "toolbar"
     }, {
-        "text": "Widgets",
+        "text": I18n.tr("Widgets"),
         "icon": "widgets"
     }, {
-        "text": "Dock",
+        "text": I18n.tr("Dock"),
         "icon": "dock_to_bottom"
     }, {
-        "text": "Displays",
+        "text": I18n.tr("Displays"),
         "icon": "monitor"
     }, {
-        "text": "Recent Apps",
-        "icon": "history"
+        "text": I18n.tr("Launcher"),
+        "icon": "apps"
     }, {
-        "text": "Theme & Colors",
+        "text": I18n.tr("Theme & Colors"),
         "icon": "palette"
     }, {
-        "text": "About",
+        "text": I18n.tr("Power & Security"),
+        "icon": "power"
+    }, {
+        "text": I18n.tr("Plugins"),
+        "icon": "extension"
+    }, {
+        "text": I18n.tr("About"),
         "icon": "info"
     }]
 
@@ -80,7 +83,7 @@ Rectangle {
                 width: parent.width - Theme.spacingS * 2
                 height: 44
                 radius: Theme.cornerRadius
-                color: isActive ? Theme.surfaceContainerHigh : tabMouseArea.containsMouse ? Theme.surfaceHover : "transparent"
+                color: isActive ? Theme.primary : tabMouseArea.containsMouse ? Theme.surfaceHover : "transparent"
 
                 Row {
                     anchors.left: parent.left
@@ -91,14 +94,14 @@ Rectangle {
                     DankIcon {
                         name: modelData.icon || ""
                         size: Theme.iconSize - 2
-                        color: parent.parent.isActive ? Theme.primary : 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.primary : Theme.surfaceText
+                        color: parent.parent.isActive ? Theme.primaryText : Theme.surfaceText
                         font.weight: parent.parent.isActive ? Font.Medium : Font.Normal
                         anchors.verticalCenter: parent.verticalCenter
                     }

Modals/Spotlight/SpotlightContent.qml

@@ -13,8 +13,13 @@ Item {
     property alias searchField: searchField
     property var parentModal: null
 
+    function resetScroll() {
+        resultsView.resetScroll()
+    }
+
     anchors.fill: parent
     focus: true
+    clip: false
     Keys.onPressed: event => {
                         if (event.key === Qt.Key_Escape) {
                             if (parentModal)
@@ -33,13 +38,49 @@ Item {
                         } else if (event.key === Qt.Key_Left && appLauncher.viewMode === "grid") {
                             appLauncher.selectPreviousInRow()
                             event.accepted = true
+                        } else if (event.key == Qt.Key_J && event.modifiers & Qt.ControlModifier) {
+                            appLauncher.selectNext()
+                            event.accepted = true
+                        } else if (event.key == Qt.Key_K && event.modifiers & Qt.ControlModifier) {
+                            appLauncher.selectPrevious()
+                            event.accepted = true
+                        } else if (event.key == Qt.Key_L && event.modifiers & Qt.ControlModifier && appLauncher.viewMode === "grid") {
+                            appLauncher.selectNextInRow()
+                            event.accepted = true
+                        } else if (event.key == Qt.Key_H && event.modifiers & Qt.ControlModifier && appLauncher.viewMode === "grid") {
+                            appLauncher.selectPreviousInRow()
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Tab) {
+                            if (appLauncher.viewMode === "grid") {
+                                appLauncher.selectNextInRow()
+                            } else {
+                                appLauncher.selectNext()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Backtab) {
+                            if (appLauncher.viewMode === "grid") {
+                                appLauncher.selectPreviousInRow()
+                            } else {
+                                appLauncher.selectPrevious()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) {
+                            if (appLauncher.viewMode === "grid") {
+                                appLauncher.selectNextInRow()
+                            } else {
+                                appLauncher.selectNext()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_P && event.modifiers & Qt.ControlModifier) {
+                            if (appLauncher.viewMode === "grid") {
+                                appLauncher.selectPreviousInRow()
+                            } else {
+                                appLauncher.selectPrevious()
+                            }
+                            event.accepted = true
                         } else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
                             appLauncher.launchSelected()
                             event.accepted = true
-                        } else if (!searchField.activeFocus && event.text && event.text.length > 0 && event.text.match(/[a-zA-Z0-9\\s]/)) {
-                            searchField.forceActiveFocus()
-                            searchField.insertText(event.text)
-                            event.accepted = true
                         }
                     }
 
@@ -59,43 +100,22 @@ Item {
 
     Column {
         anchors.fill: parent
-        anchors.margins: Theme.spacingL
-        spacing: Theme.spacingL
-
-        Rectangle {
-            width: parent.width
-            height: categorySelector.height + Theme.spacingM * 2
-            radius: Theme.cornerRadius
-            color: Theme.surfaceVariantAlpha
-            border.color: Theme.outlineMedium
-            border.width: 1
-            visible: appLauncher.categories.length > 1 || appLauncher.model.count > 0
-
-            CategorySelector {
-                id: categorySelector
-
-                anchors.centerIn: parent
-                width: parent.width - Theme.spacingM * 2
-                categories: appLauncher.categories
-                selectedCategory: appLauncher.selectedCategory
-                compact: false
-                onCategorySelected: category => {
-                                        appLauncher.setCategory(category)
-                                    }
-            }
-        }
+        anchors.margins: Theme.spacingM
+        spacing: Theme.spacingM
+        clip: false
 
         Row {
             width: parent.width
             spacing: Theme.spacingM
+            leftPadding: Theme.spacingS
 
             DankTextField {
                 id: searchField
 
-                width: parent.width - 80 - Theme.spacingM
+                width: parent.width - 80 - Theme.spacingL
                 height: 56
                 cornerRadius: Theme.cornerRadius
-                backgroundColor: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.7)
+                backgroundColor: Theme.surfaceContainerHigh
                 normalBorderColor: Theme.outlineMedium
                 focusedBorderColor: Theme.primary
                 leftIconName: "search"
@@ -107,7 +127,8 @@ Item {
                 font.pixelSize: Theme.fontSizeLarge
                 enabled: parentModal ? parentModal.spotlightOpen : true
                 placeholderText: ""
-                ignoreLeftRightKeys: true
+                ignoreLeftRightKeys: appLauncher.viewMode !== "list"
+                ignoreTabKeys: true
                 keyForwardTargets: [spotlightKeyHandler]
                 text: appLauncher.searchQuery
                 onTextEdited: () => {
@@ -125,7 +146,7 @@ Item {
                                         else if (appLauncher.model.count > 0)
                                         appLauncher.launchApp(appLauncher.model.get(0))
                                         event.accepted = true
-                                    } else if (event.key === Qt.Key_Down || event.key === Qt.Key_Up || event.key === Qt.Key_Left || event.key === Qt.Key_Right || ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && text.length === 0)) {
+                                    } else if (event.key === Qt.Key_Down || event.key === Qt.Key_Up || event.key === Qt.Key_Left || event.key === Qt.Key_Right || event.key === Qt.Key_Tab || event.key === Qt.Key_Backtab || ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && text.length === 0)) {
                                         event.accepted = false
                                     }
                                 }
@@ -141,8 +162,6 @@ Item {
                     height: 36
                     radius: Theme.cornerRadius
                     color: appLauncher.viewMode === "list" ? Theme.primaryHover : listViewArea.containsMouse ? Theme.surfaceHover : "transparent"
-                    border.color: appLauncher.viewMode === "list" ? Theme.primarySelected : "transparent"
-                    border.width: 1
 
                     DankIcon {
                         anchors.centerIn: parent
@@ -168,8 +187,6 @@ Item {
                     height: 36
                     radius: Theme.cornerRadius
                     color: appLauncher.viewMode === "grid" ? Theme.primaryHover : gridViewArea.containsMouse ? Theme.surfaceHover : "transparent"
-                    border.color: appLauncher.viewMode === "grid" ? Theme.primarySelected : "transparent"
-                    border.width: 1
 
                     DankIcon {
                         anchors.centerIn: parent
@@ -193,6 +210,7 @@ Item {
         }
 
         SpotlightResults {
+            id: resultsView
             appLauncher: spotlightKeyHandler.appLauncher
             contextMenu: contextMenu
         }
@@ -210,7 +228,7 @@ Item {
         visible: contextMenu.visible
         z: 999
         onClicked: () => {
-                       contextMenu.close()
+                       contextMenu.hide()
                    }
 
         MouseArea {

Modals/Spotlight/SpotlightContextMenu.qml

@@ -1,65 +1,73 @@
 import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Widgets
 import qs.Common
 import qs.Services
 import qs.Widgets
 
-Rectangle {
+Popup {
     id: contextMenu
 
     property var currentApp: null
-    property bool menuVisible: false
     property var appLauncher: null
     property var parentHandler: null
+    readonly property var desktopEntry: (currentApp && !currentApp.isPlugin && appLauncher && appLauncher._uniqueApps && currentApp.appIndex >= 0 && currentApp.appIndex < appLauncher._uniqueApps.length) ? appLauncher._uniqueApps[currentApp.appIndex] : null
 
     function show(x, y, app) {
         currentApp = app
-        const menuWidth = 180
-        const menuHeight = menuColumn.implicitHeight + Theme.spacingS * 2
-        let finalX = x + 8
-        let finalY = y + 8
-        if (parentHandler) {
-            if (finalX + menuWidth > parentHandler.width)
-                finalX = x - menuWidth - 8
-
-            if (finalY + menuHeight > parentHandler.height)
-                finalY = y - menuHeight - 8
-
-            finalX = Math.max(8, Math.min(finalX, parentHandler.width - menuWidth - 8))
-            finalY = Math.max(8, Math.min(finalY, parentHandler.height - menuHeight - 8))
-        }
-        contextMenu.x = finalX
-        contextMenu.y = finalY
-        contextMenu.visible = true
-        contextMenu.menuVisible = true
+        contextMenu.x = x + 4
+        contextMenu.y = y + 4
+        contextMenu.open()
     }
 
-    function close() {
-        contextMenu.menuVisible = false
-        Qt.callLater(() => {
-                         contextMenu.visible = false
-                     })
+    function hide() {
+        contextMenu.close()
     }
 
-    visible: false
-    width: 180
+    width: Math.max(180, menuColumn.implicitWidth + Theme.spacingS * 2)
     height: menuColumn.implicitHeight + Theme.spacingS * 2
-    radius: Theme.cornerRadius
-    color: Theme.popupBackground()
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 1
-    z: 1000
-    opacity: menuVisible ? 1 : 0
-    scale: menuVisible ? 1 : 0.85
+    padding: 0
+    closePolicy: Popup.CloseOnPressOutside
+    modal: false
+    dim: false
 
-    Rectangle {
-        anchors.fill: parent
-        anchors.topMargin: 4
-        anchors.leftMargin: 2
-        anchors.rightMargin: -2
-        anchors.bottomMargin: -4
-        radius: parent.radius
-        color: Qt.rgba(0, 0, 0, 0.15)
-        z: parent.z - 1
+    background: Rectangle {
+        radius: Theme.cornerRadius
+        color: Theme.popupBackground()
+        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+        border.width: 1
+
+        Rectangle {
+            anchors.fill: parent
+            anchors.topMargin: 4
+            anchors.leftMargin: 2
+            anchors.rightMargin: -2
+            anchors.bottomMargin: -4
+            radius: parent.radius
+            color: Qt.rgba(0, 0, 0, 0.15)
+            z: -1
+        }
+    }
+
+    enter: Transition {
+        NumberAnimation {
+            property: "opacity"
+            from: 0
+            to: 1
+            duration: Theme.shortDuration
+            easing.type: Theme.emphasizedEasing
+        }
+    }
+
+    exit: Transition {
+        NumberAnimation {
+            property: "opacity"
+            from: 1
+            to: 0
+            duration: Theme.shortDuration
+            easing.type: Theme.emphasizedEasing
+        }
     }
 
     Column {
@@ -70,12 +78,14 @@ Rectangle {
         spacing: 1
 
         Rectangle {
-            width: parent.width
+            implicitWidth: pinRow.implicitWidth + Theme.spacingS * 2
+            width: implicitWidth
             height: 32
             radius: Theme.cornerRadius
             color: pinMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
 
             Row {
+                id: pinRow
                 anchors.left: parent.left
                 anchors.leftMargin: Theme.spacingS
                 anchors.verticalCenter: parent.verticalCenter
@@ -83,10 +93,10 @@ Rectangle {
 
                 DankIcon {
                     name: {
-                        if (!contextMenu.currentApp || !contextMenu.currentApp.desktopEntry)
+                        if (!desktopEntry)
                             return "push_pin"
 
-                        const appId = contextMenu.currentApp.desktopEntry.id || contextMenu.currentApp.desktopEntry.execString || ""
+                        const appId = desktopEntry.id || desktopEntry.execString || ""
                         return SessionData.isPinnedApp(appId) ? "keep_off" : "push_pin"
                     }
                     size: Theme.iconSize - 2
@@ -97,11 +107,11 @@ Rectangle {
 
                 StyledText {
                     text: {
-                        if (!contextMenu.currentApp || !contextMenu.currentApp.desktopEntry)
-                            return "Pin to Dock"
+                        if (!desktopEntry)
+                            return I18n.tr("Pin to Dock")
 
-                        const appId = contextMenu.currentApp.desktopEntry.id || contextMenu.currentApp.desktopEntry.execString || ""
-                        return SessionData.isPinnedApp(appId) ? "Unpin from Dock" : "Pin to Dock"
+                        const appId = desktopEntry.id || desktopEntry.execString || ""
+                        return SessionData.isPinnedApp(appId) ? I18n.tr("Unpin from Dock") : I18n.tr("Pin to Dock")
                     }
                     font.pixelSize: Theme.fontSizeSmall
                     color: Theme.surfaceText
@@ -117,15 +127,15 @@ Rectangle {
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
                 onClicked: () => {
-                               if (!contextMenu.currentApp || !contextMenu.currentApp.desktopEntry)
+                               if (!desktopEntry)
                                return
 
-                               const appId = contextMenu.currentApp.desktopEntry.id || contextMenu.currentApp.desktopEntry.execString || ""
+                               const appId = desktopEntry.id || desktopEntry.execString || ""
                                if (SessionData.isPinnedApp(appId))
                                SessionData.removePinnedApp(appId)
                                else
                                SessionData.addPinnedApp(appId)
-                               contextMenu.close()
+                               contextMenu.hide()
                            }
             }
         }
@@ -144,13 +154,89 @@ Rectangle {
             }
         }
 
+        Repeater {
+            model: desktopEntry && desktopEntry.actions ? desktopEntry.actions : []
+
+            Rectangle {
+                implicitWidth: actionRow.implicitWidth + Theme.spacingS * 2
+                width: implicitWidth
+                height: 32
+                radius: Theme.cornerRadius
+                color: actionMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+                Row {
+                    id: actionRow
+                    anchors.left: parent.left
+                    anchors.leftMargin: Theme.spacingS
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: Theme.spacingS
+
+                    Item {
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: Theme.iconSize - 2
+                        height: Theme.iconSize - 2
+                        visible: modelData.icon && modelData.icon !== ""
+
+                        IconImage {
+                            anchors.fill: parent
+                            source: modelData.icon ? Quickshell.iconPath(modelData.icon, true) : ""
+                            smooth: true
+                            asynchronous: true
+                            visible: status === Image.Ready
+                        }
+                    }
+
+                    StyledText {
+                        text: modelData.name || ""
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceText
+                        font.weight: Font.Normal
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+                }
+
+                MouseArea {
+                    id: actionMouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        if (modelData && desktopEntry) {
+                            SessionService.launchDesktopAction(desktopEntry, modelData)
+                            if (appLauncher && contextMenu.currentApp) {
+                                appLauncher.appLaunched(contextMenu.currentApp)
+                            }
+                        }
+                        contextMenu.hide()
+                    }
+                }
+            }
+        }
+
         Rectangle {
-            width: parent.width
+            visible: desktopEntry && desktopEntry.actions && desktopEntry.actions.length > 0
+            width: parent.width - Theme.spacingS * 2
+            height: 5
+            anchors.horizontalCenter: parent.horizontalCenter
+            color: "transparent"
+
+            Rectangle {
+                anchors.centerIn: parent
+                width: parent.width
+                height: 1
+                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+            }
+        }
+
+        Rectangle {
+            implicitWidth: launchRow.implicitWidth + Theme.spacingS * 2
+            width: implicitWidth
             height: 32
             radius: Theme.cornerRadius
             color: launchMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
 
             Row {
+                id: launchRow
                 anchors.left: parent.left
                 anchors.leftMargin: Theme.spacingS
                 anchors.verticalCenter: parent.verticalCenter
@@ -165,7 +251,7 @@ Rectangle {
                 }
 
                 StyledText {
-                    text: "Launch"
+                    text: I18n.tr("Launch")
                     font.pixelSize: Theme.fontSizeSmall
                     color: Theme.surfaceText
                     font.weight: Font.Normal
@@ -183,23 +269,74 @@ Rectangle {
                                if (contextMenu.currentApp && appLauncher)
                                appLauncher.launchApp(contextMenu.currentApp)
 
-                               contextMenu.close()
+                               contextMenu.hide()
+                           }
+            }
+        }
+
+        Rectangle {
+            visible: SessionService.hasPrimeRun
+            width: parent.width - Theme.spacingS * 2
+            height: 5
+            anchors.horizontalCenter: parent.horizontalCenter
+            color: "transparent"
+
+            Rectangle {
+                anchors.centerIn: parent
+                width: parent.width
+                height: 1
+                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+            }
+        }
+
+        Rectangle {
+            visible: SessionService.hasPrimeRun
+            implicitWidth: primeRunRow.implicitWidth + Theme.spacingS * 2
+            width: implicitWidth
+            height: 32
+            radius: Theme.cornerRadius
+            color: primeRunMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+            Row {
+                id: primeRunRow
+                anchors.left: parent.left
+                anchors.leftMargin: Theme.spacingS
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: Theme.spacingS
+
+                DankIcon {
+                    name: "memory"
+                    size: Theme.iconSize - 2
+                    color: Theme.surfaceText
+                    opacity: 0.7
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StyledText {
+                    text: I18n.tr("Launch on dGPU")
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.surfaceText
+                    font.weight: Font.Normal
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
+
+            MouseArea {
+                id: primeRunMouseArea
+
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: () => {
+                               if (desktopEntry) {
+                                   SessionService.launchDesktopEntry(desktopEntry, true)
+                                   if (appLauncher && contextMenu.currentApp) {
+                                       appLauncher.appLaunched(contextMenu.currentApp)
+                                   }
+                               }
+                               contextMenu.hide()
                            }
             }
         }
     }
-
-    Behavior on opacity {
-        NumberAnimation {
-            duration: Theme.mediumDuration
-            easing.type: Theme.emphasizedEasing
-        }
-    }
-
-    Behavior on scale {
-        NumberAnimation {
-            duration: Theme.mediumDuration
-            easing.type: Theme.emphasizedEasing
-        }
-    }
 }

Modals/Spotlight/SpotlightModal.qml

@@ -13,29 +13,57 @@ DankModal {
     id: spotlightModal
 
     property bool spotlightOpen: false
-    property Component spotlightContent
+    property alias spotlightContent: spotlightContentInstance
 
     function show() {
         spotlightOpen = true
         open()
-        if (contentLoader.item && contentLoader.item.appLauncher) {
-            contentLoader.item.appLauncher.searchQuery = ""
-        }
 
         Qt.callLater(() => {
-                         if (contentLoader.item && contentLoader.item.searchField) {
-                             contentLoader.item.searchField.forceActiveFocus()
-                         }
-                     })
+            if (spotlightContent && spotlightContent.searchField) {
+                spotlightContent.searchField.forceActiveFocus()
+            }
+        })
+    }
+
+    function showWithQuery(query) {
+        if (spotlightContent) {
+            if (spotlightContent.appLauncher) {
+                spotlightContent.appLauncher.searchQuery = query
+            }
+            if (spotlightContent.searchField) {
+                spotlightContent.searchField.text = query
+            }
+        }
+
+        spotlightOpen = true
+        open()
+
+        Qt.callLater(() => {
+            if (spotlightContent && spotlightContent.searchField) {
+                spotlightContent.searchField.forceActiveFocus()
+            }
+        })
     }
 
     function hide() {
         spotlightOpen = false
         close()
-        if (contentLoader.item && contentLoader.item.appLauncher) {
-            contentLoader.item.appLauncher.searchQuery = ""
-            contentLoader.item.appLauncher.selectedIndex = 0
-            contentLoader.item.appLauncher.setCategory("All")
+    }
+
+    onDialogClosed: {
+        if (spotlightContent) {
+            if (spotlightContent.appLauncher) {
+                spotlightContent.appLauncher.searchQuery = ""
+                spotlightContent.appLauncher.selectedIndex = 0
+                spotlightContent.appLauncher.setCategory(I18n.tr("All"))
+            }
+            if (spotlightContent.resetScroll) {
+                spotlightContent.resetScroll()
+            }
+            if (spotlightContent.searchField) {
+                spotlightContent.searchField.text = ""
+            }
         }
     }
 
@@ -49,20 +77,21 @@ DankModal {
 
     shouldBeVisible: spotlightOpen
     width: 550
-    height: 600
+    height: 700
     backgroundColor: Theme.popupBackground()
     cornerRadius: Theme.cornerRadius
     borderColor: Theme.outlineMedium
     borderWidth: 1
     enableShadow: true
+    keepContentLoaded: true
     onVisibleChanged: () => {
                           if (visible && !spotlightOpen) {
                               show()
                           }
-                          if (visible && contentLoader.item) {
+                          if (visible && spotlightContent) {
                               Qt.callLater(() => {
-                                               if (contentLoader.item.searchField) {
-                                                   contentLoader.item.searchField.forceActiveFocus()
+                                               if (spotlightContent.searchField) {
+                                                   spotlightContent.searchField.forceActiveFocus()
                                                }
                                            })
                           }
@@ -70,7 +99,6 @@ DankModal {
     onBackgroundClicked: () => {
                              return hide()
                          }
-    content: spotlightContent
 
     Connections {
         function onCloseAllModalsExcept(excludedModal) {
@@ -98,12 +126,28 @@ DankModal {
             return "SPOTLIGHT_TOGGLE_SUCCESS"
         }
 
+        function openQuery(query: string): string {
+            spotlightModal.showWithQuery(query)
+            return "SPOTLIGHT_OPEN_QUERY_SUCCESS"
+        }
+
+        function toggleQuery(query: string): string {
+            if (spotlightModal.spotlightOpen) {
+                spotlightModal.hide()
+            } else {
+                spotlightModal.showWithQuery(query)
+            }
+            return "SPOTLIGHT_TOGGLE_QUERY_SUCCESS"
+        }
+
         target: "spotlight"
     }
 
-    spotlightContent: Component {
-        SpotlightContent {
-            parentModal: spotlightModal
-        }
+    SpotlightContent {
+        id: spotlightContentInstance
+
+        parentModal: spotlightModal
     }
+
+    directContent: spotlightContentInstance
 }

Modals/Spotlight/SpotlightResults.qml

@@ -10,12 +10,16 @@ Rectangle {
     property var appLauncher: null
     property var contextMenu: null
 
+    function resetScroll() {
+        resultsList.contentY = 0
+        resultsGrid.contentY = 0
+    }
+
     width: parent.width
     height: parent.height - y
     radius: Theme.cornerRadius
-    color: Theme.surfaceLight
-    border.color: Theme.outlineLight
-    border.width: 1
+    color: "transparent"
+    clip: true
 
     DankListView {
         id: resultsList
@@ -75,9 +79,7 @@ Rectangle {
             width: ListView.view.width
             height: resultsList.itemHeight
             radius: Theme.cornerRadius
-            color: ListView.isCurrentItem ? Theme.primaryPressed : listMouseArea.containsMouse ? Theme.primaryHoverLight : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.03)
-            border.color: ListView.isCurrentItem ? Theme.primarySelected : Theme.outlineMedium
-            border.width: ListView.isCurrentItem ? 2 : 1
+            color: ListView.isCurrentItem ? Theme.primaryPressed : listMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceContainerHigh
 
             Row {
                 anchors.fill: parent
@@ -128,6 +130,8 @@ Rectangle {
                         color: Theme.surfaceText
                         font.weight: Font.Medium
                         elide: Text.ElideRight
+                        wrapMode: Text.NoWrap
+                        maximumLineCount: 1
                     }
 
                     StyledText {
@@ -136,6 +140,7 @@ Rectangle {
                         font.pixelSize: Theme.fontSizeMedium
                         color: Theme.surfaceVariantText
                         elide: Text.ElideRight
+                        maximumLineCount: 1
                         visible: resultsList.showDescription && model.comment && model.comment.length > 0
                     }
                 }
@@ -159,8 +164,9 @@ Rectangle {
                 onClicked: mouse => {
                                if (mouse.button === Qt.LeftButton) {
                                    resultsList.itemClicked(index, model)
-                               } else if (mouse.button === Qt.RightButton) {
-                                   const modalPos = mapToItem(resultsContainer.parent, mouse.x, mouse.y)
+                               } else if (mouse.button === Qt.RightButton && !model.isPlugin) {
+                                   const globalPos = mapToItem(null, mouse.x, mouse.y)
+                                   const modalPos = resultsContainer.parent.mapFromItem(null, globalPos.x, globalPos.y)
                                    resultsList.itemRightClicked(index, model, modalPos.x, modalPos.y)
                                }
                            }
@@ -237,9 +243,7 @@ Rectangle {
             width: resultsGrid.cellWidth - resultsGrid.cellPadding
             height: resultsGrid.cellHeight - resultsGrid.cellPadding
             radius: Theme.cornerRadius
-            color: resultsGrid.currentIndex === index ? Theme.primaryPressed : gridMouseArea.containsMouse ? Theme.primaryHoverLight : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.03)
-            border.color: resultsGrid.currentIndex === index ? Theme.primarySelected : Theme.outlineMedium
-            border.width: resultsGrid.currentIndex === index ? 2 : 1
+            color: resultsGrid.currentIndex === index ? Theme.primaryPressed : gridMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceContainerHigh
 
             Column {
                 anchors.centerIn: parent
@@ -289,8 +293,8 @@ Rectangle {
                     font.weight: Font.Medium
                     elide: Text.ElideRight
                     horizontalAlignment: Text.AlignHCenter
-                    maximumLineCount: 2
-                    wrapMode: Text.WordWrap
+                    maximumLineCount: 1
+                    wrapMode: Text.NoWrap
                 }
             }
 
@@ -312,8 +316,9 @@ Rectangle {
                 onClicked: mouse => {
                                if (mouse.button === Qt.LeftButton) {
                                    resultsGrid.itemClicked(index, model)
-                               } else if (mouse.button === Qt.RightButton) {
-                                   const modalPos = mapToItem(resultsContainer.parent, mouse.x, mouse.y)
+                               } else if (mouse.button === Qt.RightButton && !model.isPlugin) {
+                                   const globalPos = mapToItem(null, mouse.x, mouse.y)
+                                   const modalPos = resultsContainer.parent.mapFromItem(null, globalPos.x, globalPos.y)
                                    resultsGrid.itemRightClicked(index, model, modalPos.x, modalPos.y)
                                }
                            }

Modals/WifiPasswordModal.qml

@@ -9,33 +9,70 @@ DankModal {
 
     property string wifiPasswordSSID: ""
     property string wifiPasswordInput: ""
+    property string wifiUsernameInput: ""
+    property bool requiresEnterprise: false
+
+    property string wifiRealmInput: ""
+    property bool wifiUseAtRealm: true
+    property string wifiAnonymousIdentityInput: ""
+    property string wifiDomainSuffixMatchInput: ""
 
     function show(ssid) {
         wifiPasswordSSID = ssid
         wifiPasswordInput = ""
+        wifiUsernameInput = ""
+        wifiRealmInput = ""
+        wifiUseAtRealm = true
+        wifiAnonymousIdentityInput = ""
+        wifiDomainSuffixMatchInput = ""
+
+        const network = NetworkService.wifiNetworks.find(n => n.ssid === ssid)
+        requiresEnterprise = network?.enterprise || false
+
         open()
         Qt.callLater(() => {
-                         if (contentLoader.item && contentLoader.item.passwordInput)
-                         contentLoader.item.passwordInput.forceActiveFocus()
+                         if (contentLoader.item) {
+                             if (requiresEnterprise && contentLoader.item.usernameInput) {
+                                 contentLoader.item.usernameInput.forceActiveFocus()
+                             } else if (contentLoader.item.passwordInput) {
+                                 contentLoader.item.passwordInput.forceActiveFocus()
+                             }
+                         }
                      })
     }
 
     shouldBeVisible: false
     width: 420
-    height: 230
+    height: requiresEnterprise ? 520 : 230
     onShouldBeVisibleChanged: () => {
-                                  if (!shouldBeVisible)
-                                  wifiPasswordInput = ""
+                                  if (!shouldBeVisible) {
+                                      wifiPasswordInput = ""
+                                      wifiUsernameInput = ""
+                                      wifiRealmInput = ""
+                                      wifiUseAtRealm = true
+                                      wifiAnonymousIdentityInput = ""
+                                      wifiDomainSuffixMatchInput = ""
+                                  }
                               }
     onOpened: {
         Qt.callLater(() => {
-                         if (contentLoader.item && contentLoader.item.passwordInput)
-                         contentLoader.item.passwordInput.forceActiveFocus()
+                         if (contentLoader.item) {
+                             if (requiresEnterprise && contentLoader.item.usernameInput) {
+                                 contentLoader.item.usernameInput.forceActiveFocus()
+                             } else if (contentLoader.item.passwordInput) {
+                                 contentLoader.item.passwordInput.forceActiveFocus()
+                             }
+                         }
                      })
     }
     onBackgroundClicked: () => {
                              close()
                              wifiPasswordInput = ""
+                             wifiUsernameInput = ""
+                             wifiRealmInput = ""
+                             wifiUseAtRealm = true
+                             wifiAnonymousIdentityInput = ""
+                             wifiDomainSuffixMatchInput = ""
                          }
 
     Connections {
@@ -55,6 +92,7 @@ DankModal {
         FocusScope {
             id: wifiContent
 
+            property alias usernameInput: usernameInput
             property alias passwordInput: passwordInput
 
             anchors.fill: parent
@@ -62,6 +100,11 @@ DankModal {
             Keys.onEscapePressed: event => {
                                       close()
                                       wifiPasswordInput = ""
+                                      wifiUsernameInput = ""
+                                      wifiRealmInput = ""
+                                      wifiUseAtRealm = true
+                                      wifiAnonymousIdentityInput = ""
+                                      wifiDomainSuffixMatchInput = ""
                                       event.accepted = true
                                   }
 
@@ -78,14 +121,14 @@ DankModal {
                         spacing: Theme.spacingXS
 
                         StyledText {
-                            text: "Connect to Wi-Fi"
+                            text: I18n.tr("Connect to Wi-Fi")
                             font.pixelSize: Theme.fontSizeLarge
                             color: Theme.surfaceText
                             font.weight: Font.Medium
                         }
 
                         StyledText {
-                            text: `Enter password for "${wifiPasswordSSID}"`
+                            text: requiresEnterprise ? I18n.tr("Enter credentials for ") + wifiPasswordSSID : I18n.tr("Enter password for ") + wifiPasswordSSID
                             font.pixelSize: Theme.fontSizeMedium
                             color: Theme.surfaceTextMedium
                             width: parent.width
@@ -100,10 +143,48 @@ DankModal {
                         onClicked: () => {
                                        close()
                                        wifiPasswordInput = ""
+                                       wifiUsernameInput = ""
                                    }
                     }
                 }
 
+                Rectangle {
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceHover
+                    border.color: usernameInput.activeFocus ? Theme.primary : Theme.outlineStrong
+                    border.width: usernameInput.activeFocus ? 2 : 1
+                    visible: requiresEnterprise
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: () => {
+                                       usernameInput.forceActiveFocus()
+                                   }
+                    }
+
+                    DankTextField {
+                        id: usernameInput
+
+                        anchors.fill: parent
+                        font.pixelSize: Theme.fontSizeMedium
+                        textColor: Theme.surfaceText
+                        text: wifiUsernameInput
+                        placeholderText: I18n.tr("Username")
+                        backgroundColor: "transparent"
+                        enabled: root.shouldBeVisible
+                        onTextEdited: () => {
+                                          wifiUsernameInput = text
+                                      }
+                        onAccepted: () => {
+                                        if (passwordInput) {
+                                            passwordInput.forceActiveFocus()
+                                        }
+                                    }
+                    }
+                }
+
                 Rectangle {
                     width: parent.width
                     height: 50
@@ -127,21 +208,36 @@ DankModal {
                         textColor: Theme.surfaceText
                         text: wifiPasswordInput
                         echoMode: showPasswordCheckbox.checked ? TextInput.Normal : TextInput.Password
-                        placeholderText: ""
+                        placeholderText: requiresEnterprise ? I18n.tr("Password") : ""
                         backgroundColor: "transparent"
-                        focus: true
+                        focus: !requiresEnterprise
                         enabled: root.shouldBeVisible
                         onTextEdited: () => {
                                           wifiPasswordInput = text
                                       }
                         onAccepted: () => {
-                                        NetworkService.connectToWifi(wifiPasswordSSID, passwordInput.text)
+                                        const username = requiresEnterprise ? usernameInput.text : ""
+                                        NetworkService.connectToWifi(
+                                            wifiPasswordSSID,
+                                            passwordInput.text,
+                                            username,
+                                            wifiRealmInput,
+                                            wifiUseAtRealm,
+                                            wifiAnonymousIdentityInput,
+                                            wifiDomainSuffixMatchInput
+                                        )
                                         close()
                                         wifiPasswordInput = ""
+                                        wifiUsernameInput = ""
+                                        wifiRealmInput = ""
+                                        wifiUseAtRealm = true
+                                        wifiAnonymousIdentityInput = ""
+                                        wifiDomainSuffixMatchInput = ""
                                         passwordInput.text = ""
+                                        if (requiresEnterprise) usernameInput.text = ""
                                     }
                         Component.onCompleted: () => {
-                                                   if (root.shouldBeVisible)
+                                                   if (root.shouldBeVisible && !requiresEnterprise)
                                                    focusDelayTimer.start()
                                                }
 
@@ -151,8 +247,13 @@ DankModal {
                             interval: 100
                             repeat: false
                             onTriggered: () => {
-                                             if (root.shouldBeVisible)
-                                             passwordInput.forceActiveFocus()
+                                             if (root.shouldBeVisible) {
+                                                 if (requiresEnterprise && usernameInput) {
+                                                     usernameInput.forceActiveFocus()
+                                                 } else {
+                                                     passwordInput.forceActiveFocus()
+                                                 }
+                                             }
                                          }
                         }
 
@@ -167,6 +268,164 @@ DankModal {
                     }
                 }
 
+                Rectangle {
+                    visible: requiresEnterprise
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceHover
+                    border.color: realmInput.activeFocus ? Theme.primary : Theme.outlineStrong
+                    border.width: realmInput.activeFocus ? 2 : 1
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: () => {
+                                       realmInput.forceActiveFocus()
+                                   }
+                    }
+
+                    DankTextField {
+                        id: realmInput
+
+                        anchors.fill: parent
+                        font.pixelSize: Theme.fontSizeMedium
+                        textColor: Theme.surfaceText
+                        text: wifiRealmInput
+                        placeholderText: I18n.tr("Realm / Domain (optional)")
+                        backgroundColor: "transparent"
+                        enabled: root.shouldBeVisible
+                        onTextEdited: () => {
+                                          wifiRealmInput = text
+                                      }
+                    }
+                }
+
+                Row {
+                    visible: requiresEnterprise
+                    spacing: Theme.spacingM
+                    width: parent.width
+
+                    Rectangle {
+                        id: atRealmBtn
+
+                        height: 36
+                        width: (parent.width - Theme.spacingM) / 2
+                        radius: Theme.cornerRadius
+                        color: wifiUseAtRealm ? Theme.primary : Theme.surfaceHover
+                        border.color: wifiUseAtRealm ? Theme.primary : Theme.outlineStrong
+                        border.width: 1
+
+                        MouseArea {
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: () => {
+                                           wifiUseAtRealm = true
+                                       }
+                        }
+
+                        StyledText {
+                            anchors.centerIn: parent
+                            text: "username@realm"
+                            color: wifiUseAtRealm ? Theme.background : Theme.surfaceText
+                            font.pixelSize: Theme.fontSizeMedium
+                            font.weight: Font.Medium
+                        }
+                    }
+
+                    Rectangle {
+                        id: domainSlashBtn
+
+                        height: 36
+                        width: (parent.width - Theme.spacingM) / 2
+                        radius: Theme.cornerRadius
+                        color: !wifiUseAtRealm ? Theme.primary : Theme.surfaceHover
+                        border.color: !wifiUseAtRealm ? Theme.primary : Theme.outlineStrong
+                        border.width: 1
+
+                        MouseArea {
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: () => {
+                                           wifiUseAtRealm = false
+                                       }
+                        }
+
+                        StyledText {
+                            anchors.centerIn: parent
+                            text: "DOMAIN\\username"
+                            color: !wifiUseAtRealm ? Theme.background : Theme.surfaceText
+                            font.pixelSize: Theme.fontSizeMedium
+                            font.weight: Font.Medium
+                        }
+                    }
+                }
+
+                Rectangle {
+                    visible: requiresEnterprise
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceHover
+                    border.color: anonInput.activeFocus ? Theme.primary : Theme.outlineStrong
+                    border.width: anonInput.activeFocus ? 2 : 1
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: () => {
+                                       anonInput.forceActiveFocus()
+                                   }
+                    }
+
+                    DankTextField {
+                        id: anonInput
+
+                        anchors.fill: parent
+                        font.pixelSize: Theme.fontSizeMedium
+                        textColor: Theme.surfaceText
+                        text: wifiAnonymousIdentityInput
+                        placeholderText: I18n.tr("Anonymous Identity (optional)")
+                        backgroundColor: "transparent"
+                        enabled: root.shouldBeVisible
+                        onTextEdited: () => {
+                                          wifiAnonymousIdentityInput = text
+                                      }
+                    }
+                }
+
+                Rectangle {
+                    visible: requiresEnterprise
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceHover
+                    border.color: domainMatchInput.activeFocus ? Theme.primary : Theme.outlineStrong
+                    border.width: domainMatchInput.activeFocus ? 2 : 1
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: () => {
+                                       domainMatchInput.forceActiveFocus()
+                                   }
+                    }
+
+                    DankTextField {
+                        id: domainMatchInput
+
+                        anchors.fill: parent
+                        font.pixelSize: Theme.fontSizeMedium
+                        textColor: Theme.surfaceText
+                        text: wifiDomainSuffixMatchInput
+                        placeholderText: I18n.tr("Server Domain for certificate (optional)")
+                        backgroundColor: "transparent"
+                        enabled: root.shouldBeVisible
+                        onTextEdited: () => {
+                                          wifiDomainSuffixMatchInput = text
+                                      }
+                    }
+                }
+
                 Row {
                     spacing: Theme.spacingS
 
@@ -201,7 +460,7 @@ DankModal {
                     }
 
                     StyledText {
-                        text: "Show password"
+                        text: I18n.tr("Show password")
                         font.pixelSize: Theme.fontSizeMedium
                         color: Theme.surfaceText
                         anchors.verticalCenter: parent.verticalCenter
@@ -229,7 +488,7 @@ DankModal {
                                 id: cancelText
 
                                 anchors.centerIn: parent
-                                text: "Cancel"
+                                text: I18n.tr("Cancel")
                                 font.pixelSize: Theme.fontSizeMedium
                                 color: Theme.surfaceText
                                 font.weight: Font.Medium
@@ -244,6 +503,11 @@ DankModal {
                                 onClicked: () => {
                                                close()
                                                wifiPasswordInput = ""
+                                               wifiUsernameInput = ""
+                                               wifiRealmInput = ""
+                                               wifiUseAtRealm = true
+                                               wifiAnonymousIdentityInput = ""
+                                               wifiDomainSuffixMatchInput = ""
                                            }
                             }
                         }
@@ -253,14 +517,14 @@ DankModal {
                             height: 36
                             radius: Theme.cornerRadius
                             color: connectArea.containsMouse ? Qt.darker(Theme.primary, 1.1) : Theme.primary
-                            enabled: passwordInput.text.length > 0
+                            enabled: requiresEnterprise ? (usernameInput.text.length > 0 && passwordInput.text.length > 0) : passwordInput.text.length > 0
                             opacity: enabled ? 1 : 0.5
 
                             StyledText {
                                 id: connectText
 
                                 anchors.centerIn: parent
-                                text: "Connect"
+                                text: I18n.tr("Connect")
                                 font.pixelSize: Theme.fontSizeMedium
                                 color: Theme.background
                                 font.weight: Font.Medium
@@ -274,10 +538,25 @@ DankModal {
                                 cursorShape: Qt.PointingHandCursor
                                 enabled: parent.enabled
                                 onClicked: () => {
-                                               NetworkService.connectToWifi(wifiPasswordSSID, passwordInput.text)
+                                               const username = requiresEnterprise ? usernameInput.text : ""
+                                               NetworkService.connectToWifi(
+                                                   wifiPasswordSSID,
+                                                   passwordInput.text,
+                                                   username,
+                                                   wifiRealmInput,
+                                                   wifiUseAtRealm,
+                                                   wifiAnonymousIdentityInput,
+                                                   wifiDomainSuffixMatchInput
+                                               )
                                                close()
                                                wifiPasswordInput = ""
+                                               wifiUsernameInput = ""
+                                               wifiRealmInput = ""
+                                               wifiUseAtRealm = true
+                                               wifiAnonymousIdentityInput = ""
+                                               wifiDomainSuffixMatchInput = ""
                                                passwordInput.text = ""
+                                               if (requiresEnterprise) usernameInput.text = ""
                                            }
                             }
 

Modules/AppDrawer/AppDrawerPopout.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Effects
 import Quickshell
 import Quickshell.Io
@@ -12,7 +13,6 @@ import qs.Widgets
 DankPopout {
     id: appDrawerPopout
 
-    property string triggerSection: "left"
     property var triggerScreen: null
 
     // Setting to Exclusive, so virtual keyboards can send input to app drawer
@@ -33,16 +33,16 @@ DankPopout {
     popupWidth: 520
     popupHeight: 600
     triggerX: Theme.spacingL
-    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.spacingXS
+    triggerY: Math.max(26 + SettingsData.dankBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.dankBarInnerPadding)) + SettingsData.dankBarSpacing + SettingsData.dankBarBottomGap - 2
     triggerWidth: 40
-    positioning: "center"
+    positioning: ""
     screen: triggerScreen
 
     onShouldBeVisibleChanged: {
         if (shouldBeVisible) {
             appLauncher.searchQuery = ""
             appLauncher.selectedIndex = 0
-            appLauncher.setCategory("All")
+            appLauncher.setCategory(I18n.tr("All"))
             Qt.callLater(() => {
                              if (contentLoader.item && contentLoader.item.searchField) {
                                  contentLoader.item.searchField.text = ""
@@ -95,7 +95,7 @@ DankPopout {
                     color: "transparent"
                     radius: parent.radius + Math.abs(modelData.margin)
                     border.color: modelData.color
-                    border.width: 1
+                    border.width: 0
                     z: modelData.z
                 }
             }
@@ -112,6 +112,8 @@ DankPopout {
                     mappings[Qt.Key_Up] = () => appLauncher.selectPrevious()
                     mappings[Qt.Key_Return] = () => appLauncher.launchSelected()
                     mappings[Qt.Key_Enter] = () => appLauncher.launchSelected()
+                    mappings[Qt.Key_Tab] = () => appLauncher.viewMode === "grid" ? appLauncher.selectNextInRow() : appLauncher.selectNext()
+                    mappings[Qt.Key_Backtab] = () => appLauncher.viewMode === "grid" ? appLauncher.selectPreviousInRow() : appLauncher.selectPrevious()
 
                     if (appLauncher.viewMode === "grid") {
                         mappings[Qt.Key_Right] = () => appLauncher.selectNextInRow()
@@ -128,38 +130,70 @@ DankPopout {
                         return
                     }
 
-                    if (!searchField.activeFocus && event.text && /[a-zA-Z0-9\s]/.test(event.text)) {
-                        searchField.forceActiveFocus()
-                        searchField.insertText(event.text)
+                    if (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) {
+                        appLauncher.selectNext()
                         event.accepted = true
+                        return
                     }
+
+                    if (event.key === Qt.Key_P && event.modifiers & Qt.ControlModifier) {
+                        appLauncher.selectPrevious()
+                        event.accepted = true
+                        return
+                    }
+
+                    if (event.key === Qt.Key_J && event.modifiers & Qt.ControlModifier) {
+                        appLauncher.selectNext()
+                        event.accepted = true
+                        return
+                    }
+
+                    if (event.key === Qt.Key_K && event.modifiers & Qt.ControlModifier) {
+                        appLauncher.selectPrevious()
+                        event.accepted = true
+                        return
+                    }
+
+                    if (appLauncher.viewMode === "grid") {
+                        if (event.key === Qt.Key_L && event.modifiers & Qt.ControlModifier) {
+                            appLauncher.selectNextInRow()
+                            event.accepted = true
+                            return
+                        }
+
+                        if (event.key === Qt.Key_H && event.modifiers & Qt.ControlModifier) {
+                            appLauncher.selectPreviousInRow()
+                            event.accepted = true
+                            return
+                        }
+                    }
+
                 }
 
                 Column {
-                    width: parent.width - Theme.spacingL * 2
-                    height: parent.height - Theme.spacingL * 2
-                    x: Theme.spacingL
-                    y: Theme.spacingL
-                    spacing: Theme.spacingL
+                    width: parent.width - Theme.spacingS * 2
+                    height: parent.height - Theme.spacingS * 2
+                    x: Theme.spacingS
+                    y: Theme.spacingS
+                    spacing: Theme.spacingS
 
-                    Row {
+                    Item {
                         width: parent.width
                         height: 40
 
                         StyledText {
+                            anchors.left: parent.left
+                            anchors.leftMargin: Theme.spacingS
                             anchors.verticalCenter: parent.verticalCenter
-                            text: "Applications"
+                            text: I18n.tr("Applications")
                             font.pixelSize: Theme.fontSizeLarge + 4
                             font.weight: Font.Bold
                             color: Theme.surfaceText
                         }
 
-                        Item {
-                            width: parent.width - 200
-                            height: 1
-                        }
-
                         StyledText {
+                            anchors.right: parent.right
+                            anchors.rightMargin: Theme.spacingS
                             anchors.verticalCenter: parent.verticalCenter
                             text: appLauncher.model.count + " apps"
                             font.pixelSize: Theme.fontSizeMedium
@@ -170,7 +204,8 @@ DankPopout {
                     DankTextField {
                         id: searchField
 
-                        width: parent.width
+                        width: parent.width - Theme.spacingS * 2
+                        anchors.horizontalCenter: parent.horizontalCenter
                         height: 52
                         cornerRadius: Theme.cornerRadius
                         backgroundColor: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.7)
@@ -183,7 +218,8 @@ DankPopout {
                         showClearButton: true
                         font.pixelSize: Theme.fontSizeLarge
                         enabled: appDrawerPopout.shouldBeVisible
-                        ignoreLeftRightKeys: true
+                        ignoreLeftRightKeys: appLauncher.viewMode !== "list"
+                        ignoreTabKeys: true
                         keyForwardTargets: [keyHandler]
                         onTextEdited: {
                             appLauncher.searchQuery = text
@@ -208,7 +244,7 @@ DankPopout {
                                 return
                             }
 
-                            const navigationKeys = [Qt.Key_Down, Qt.Key_Up, Qt.Key_Left, Qt.Key_Right]
+                            const navigationKeys = [Qt.Key_Down, Qt.Key_Up, Qt.Key_Left, Qt.Key_Right, Qt.Key_Tab, Qt.Key_Backtab]
                             const isNavigationKey = navigationKeys.includes(event.key)
                             const isEmptyEnter = isEnterKey && !hasText
 
@@ -231,14 +267,18 @@ DankPopout {
                         height: 40
                         spacing: Theme.spacingM
                         visible: searchField.text.length === 0
+                        leftPadding: Theme.spacingS
 
-                        Item {
-                            width: 200
-                            height: 36
+                        Rectangle {
+                            width: 180
+                            height: 40
+                            radius: Theme.cornerRadius
+                            color: "transparent"
 
                             DankDropdown {
                                 anchors.fill: parent
                                 text: ""
+                                dropdownWidth: 180
                                 currentValue: appLauncher.selectedCategory
                                 options: appLauncher.categories
                                 optionIcons: appLauncher.categoryIcons
@@ -249,7 +289,7 @@ DankPopout {
                         }
 
                         Item {
-                            width: parent.width - 300
+                            width: parent.width - 290
                             height: 1
                         }
 
@@ -286,15 +326,13 @@ DankPopout {
                     Rectangle {
                         width: parent.width
                         height: {
-                            let usedHeight = 40 + Theme.spacingL
-                            usedHeight += 52 + Theme.spacingL
-                            usedHeight += (searchField.text.length === 0 ? 40 + Theme.spacingL : 0)
+                            let usedHeight = 40 + Theme.spacingS
+                            usedHeight += 52 + Theme.spacingS
+                            usedHeight += (searchField.text.length === 0 ? 40 : 0)
                             return parent.height - usedHeight
                         }
                         radius: Theme.cornerRadius
-                        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
-                        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
-                        border.width: 1
+                        color: "transparent"
 
                         DankListView {
                             id: appList
@@ -323,7 +361,9 @@ DankPopout {
                             }
 
                             anchors.fill: parent
-                            anchors.margins: Theme.spacingS
+                            anchors.leftMargin: Theme.spacingS
+                            anchors.rightMargin: Theme.spacingS
+                            anchors.bottomMargin: Theme.spacingS
                             visible: appLauncher.viewMode === "list"
                             model: appLauncher.model
                             currentIndex: appLauncher.selectedIndex
@@ -353,9 +393,7 @@ DankPopout {
                                 width: ListView.view.width
                                 height: appList.itemHeight
                                 radius: Theme.cornerRadius
-                                color: ListView.isCurrentItem ? Theme.primaryPressed : listMouseArea.containsMouse ? Theme.primaryHoverLight : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.03)
-                                border.color: ListView.isCurrentItem ? Theme.primarySelected : Theme.outlineMedium
-                                border.width: ListView.isCurrentItem ? 2 : 1
+                                color: ListView.isCurrentItem ? Theme.primaryPressed : listMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceContainerHigh
 
                                 Row {
                                     anchors.fill: parent
@@ -371,6 +409,7 @@ DankPopout {
                                             id: listIconImg
 
                                             anchors.fill: parent
+                                            anchors.margins: Theme.spacingXS
                                             source: Quickshell.iconPath(model.icon, true)
                                             smooth: true
                                             asynchronous: true
@@ -379,10 +418,13 @@ DankPopout {
 
                                         Rectangle {
                                             anchors.fill: parent
+                                            anchors.leftMargin: Theme.spacingS
+                                            anchors.rightMargin: Theme.spacingS
+                                            anchors.bottomMargin: Theme.spacingM
                                             visible: !listIconImg.visible
                                             color: Theme.surfaceLight
                                             radius: Theme.cornerRadius
-                                            border.width: 1
+                                            border.width: 0
                                             border.color: Theme.primarySelected
 
                                             StyledText {
@@ -407,6 +449,8 @@ DankPopout {
                                             color: Theme.surfaceText
                                             font.weight: Font.Medium
                                             elide: Text.ElideRight
+                                            wrapMode: Text.NoWrap
+                                            maximumLineCount: 1
                                         }
 
                                         StyledText {
@@ -415,6 +459,7 @@ DankPopout {
                                             font.pixelSize: Theme.fontSizeMedium
                                             color: Theme.surfaceVariantText
                                             elide: Text.ElideRight
+                                            maximumLineCount: 1
                                             visible: appList.showDescription && model.comment && model.comment.length > 0
                                         }
                                     }
@@ -424,6 +469,9 @@ DankPopout {
                                     id: listMouseArea
 
                                     anchors.fill: parent
+                                    anchors.leftMargin: Theme.spacingS
+                                    anchors.rightMargin: Theme.spacingS
+                                    anchors.bottomMargin: Theme.spacingM
                                     hoverEnabled: true
                                     cursorShape: Qt.PointingHandCursor
                                     acceptedButtons: Qt.LeftButton | Qt.RightButton
@@ -439,7 +487,8 @@ DankPopout {
                                                    if (mouse.button === Qt.LeftButton) {
                                                        appList.itemClicked(index, model)
                                                    } else if (mouse.button === Qt.RightButton) {
-                                                       var panelPos = mapToItem(contextMenu.parent, mouse.x, mouse.y)
+                                                       var globalPos = mapToItem(null, mouse.x, mouse.y)
+                                                       var panelPos = contextMenu.parent.mapFromItem(null, globalPos.x, globalPos.y)
                                                        appList.itemRightClicked(index, model, panelPos.x, panelPos.y)
                                                    }
                                                }
@@ -483,7 +532,9 @@ DankPopout {
                             }
 
                             anchors.fill: parent
-                            anchors.margins: Theme.spacingS
+                            anchors.leftMargin: Theme.spacingS
+                            anchors.rightMargin: Theme.spacingS
+                            anchors.bottomMargin: Theme.spacingS
                             visible: appLauncher.viewMode === "grid"
                             model: appLauncher.model
                             clip: true
@@ -515,9 +566,7 @@ DankPopout {
                                 width: appGrid.cellWidth - appGrid.cellPadding
                                 height: appGrid.cellHeight - appGrid.cellPadding
                                 radius: Theme.cornerRadius
-                                color: appGrid.currentIndex === index ? Theme.primaryPressed : gridMouseArea.containsMouse ? Theme.primaryHoverLight : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.03)
-                                border.color: appGrid.currentIndex === index ? Theme.primarySelected : Theme.outlineMedium
-                                border.width: appGrid.currentIndex === index ? 2 : 1
+                                color: appGrid.currentIndex === index ? Theme.primaryPressed : gridMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceContainerHigh
 
                                 Column {
                                     anchors.centerIn: parent
@@ -534,6 +583,9 @@ DankPopout {
                                             id: gridIconImg
 
                                             anchors.fill: parent
+                            anchors.leftMargin: Theme.spacingS
+                            anchors.rightMargin: Theme.spacingS
+                            anchors.bottomMargin: Theme.spacingS
                                             source: Quickshell.iconPath(model.icon, true)
                                             smooth: true
                                             asynchronous: true
@@ -542,10 +594,13 @@ DankPopout {
 
                                         Rectangle {
                                             anchors.fill: parent
+                            anchors.leftMargin: Theme.spacingS
+                            anchors.rightMargin: Theme.spacingS
+                            anchors.bottomMargin: Theme.spacingS
                                             visible: !gridIconImg.visible
                                             color: Theme.surfaceLight
                                             radius: Theme.cornerRadius
-                                            border.width: 1
+                                            border.width: 0
                                             border.color: Theme.primarySelected
 
                                             StyledText {
@@ -567,8 +622,8 @@ DankPopout {
                                         font.weight: Font.Medium
                                         elide: Text.ElideRight
                                         horizontalAlignment: Text.AlignHCenter
-                                        maximumLineCount: 2
-                                        wrapMode: Text.WordWrap
+                                        maximumLineCount: 1
+                                        wrapMode: Text.NoWrap
                                     }
                                 }
 
@@ -576,6 +631,9 @@ DankPopout {
                                     id: gridMouseArea
 
                                     anchors.fill: parent
+                            anchors.leftMargin: Theme.spacingS
+                            anchors.rightMargin: Theme.spacingS
+                            anchors.bottomMargin: Theme.spacingS
                                     hoverEnabled: true
                                     cursorShape: Qt.PointingHandCursor
                                     acceptedButtons: Qt.LeftButton | Qt.RightButton
@@ -591,7 +649,8 @@ DankPopout {
                                                    if (mouse.button === Qt.LeftButton) {
                                                        appGrid.itemClicked(index, model)
                                                    } else if (mouse.button === Qt.RightButton) {
-                                                       var panelPos = mapToItem(contextMenu.parent, mouse.x, mouse.y)
+                                                       var globalPos = mapToItem(null, mouse.x, mouse.y)
+                                                       var panelPos = contextMenu.parent.mapFromItem(null, globalPos.x, globalPos.y)
                                                        appGrid.itemRightClicked(index, model, panelPos.x, panelPos.y)
                                                    }
                                                }
@@ -604,68 +663,68 @@ DankPopout {
         }
     }
 
-    Rectangle {
+    Popup {
         id: contextMenu
 
         property var currentApp: null
-        property bool menuVisible: false
-
-        readonly property string appId: (currentApp && currentApp.desktopEntry) ? (currentApp.desktopEntry.id || currentApp.desktopEntry.execString || "") : ""
+        readonly property var desktopEntry: (currentApp && !currentApp.isPlugin && appLauncher && appLauncher._uniqueApps && currentApp.appIndex >= 0 && currentApp.appIndex < appLauncher._uniqueApps.length) ? appLauncher._uniqueApps[currentApp.appIndex] : null
+        readonly property string appId: desktopEntry ? (desktopEntry.id || desktopEntry.execString || "") : ""
         readonly property bool isPinned: appId && SessionData.isPinnedApp(appId)
 
         function show(x, y, app) {
             currentApp = app
-
-            const menuWidth = 180
-            const menuHeight = menuColumn.implicitHeight + Theme.spacingS * 2
-
-            let finalX = x + 8
-            let finalY = y + 8
-
-            if (finalX + menuWidth > appDrawerPopout.popupWidth) {
-                finalX = x - menuWidth - 8
-            }
-
-            if (finalY + menuHeight > appDrawerPopout.popupHeight) {
-                finalY = y - menuHeight - 8
-            }
-
-            finalX = Math.max(8, Math.min(finalX, appDrawerPopout.popupWidth - menuWidth - 8))
-            finalY = Math.max(8, Math.min(finalY, appDrawerPopout.popupHeight - menuHeight - 8))
-
-            contextMenu.x = finalX
-            contextMenu.y = finalY
-            contextMenu.visible = true
-            contextMenu.menuVisible = true
+            contextMenu.x = x + 4
+            contextMenu.y = y + 4
+            contextMenu.open()
         }
 
-        function close() {
-            contextMenu.menuVisible = false
-            Qt.callLater(() => {
-                             contextMenu.visible = false
-                         })
+        function hide() {
+            contextMenu.close()
         }
 
-        visible: false
-        width: 180
+        width: Math.max(180, menuColumn.implicitWidth + Theme.spacingS * 2)
         height: menuColumn.implicitHeight + Theme.spacingS * 2
-        radius: Theme.cornerRadius
-        color: Theme.popupBackground()
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-        border.width: 1
-        z: 1000
-        opacity: menuVisible ? 1 : 0
-        scale: menuVisible ? 1 : 0.85
+        padding: 0
+        closePolicy: Popup.CloseOnPressOutside
+        modal: false
+        dim: false
 
-        Rectangle {
-            anchors.fill: parent
-            anchors.topMargin: 4
-            anchors.leftMargin: 2
-            anchors.rightMargin: -2
-            anchors.bottomMargin: -4
-            radius: parent.radius
-            color: Qt.rgba(0, 0, 0, 0.15)
-            z: parent.z - 1
+        background: Rectangle {
+            radius: Theme.cornerRadius
+            color: Theme.popupBackground()
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+            border.width: 1
+
+            Rectangle {
+                anchors.fill: parent
+                anchors.topMargin: 4
+                anchors.leftMargin: 2
+                anchors.rightMargin: -2
+                anchors.bottomMargin: -4
+                radius: parent.radius
+                color: Qt.rgba(0, 0, 0, 0.15)
+                z: -1
+            }
+        }
+
+        enter: Transition {
+            NumberAnimation {
+                property: "opacity"
+                from: 0
+                to: 1
+                duration: Theme.shortDuration
+                easing.type: Theme.emphasizedEasing
+            }
+        }
+
+        exit: Transition {
+            NumberAnimation {
+                property: "opacity"
+                from: 1
+                to: 0
+                duration: Theme.shortDuration
+                easing.type: Theme.emphasizedEasing
+            }
         }
 
         Column {
@@ -696,7 +755,7 @@ DankPopout {
                     }
 
                     StyledText {
-                        text: contextMenu.isPinned ? "Unpin from Dock" : "Pin to Dock"
+                        text: contextMenu.isPinned ? I18n.tr("Unpin from Dock") : I18n.tr("Pin to Dock")
                         font.pixelSize: Theme.fontSizeSmall
                         color: Theme.surfaceText
                         font.weight: Font.Normal
@@ -711,7 +770,7 @@ DankPopout {
                     hoverEnabled: true
                     cursorShape: Qt.PointingHandCursor
                     onClicked: {
-                        if (!contextMenu.currentApp || !contextMenu.currentApp.desktopEntry) {
+                        if (!contextMenu.desktopEntry) {
                             return
                         }
 
@@ -720,7 +779,7 @@ DankPopout {
                         } else {
                             SessionData.addPinnedApp(contextMenu.appId)
                         }
-                        contextMenu.close()
+                        contextMenu.hide()
                     }
                 }
             }
@@ -739,6 +798,79 @@ DankPopout {
                 }
             }
 
+            Repeater {
+                model: contextMenu.desktopEntry && contextMenu.desktopEntry.actions ? contextMenu.desktopEntry.actions : []
+
+                Rectangle {
+                    width: Math.max(parent.width, actionRow.implicitWidth + Theme.spacingS * 2)
+                    height: 32
+                    radius: Theme.cornerRadius
+                    color: actionMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+                    Row {
+                        id: actionRow
+                        anchors.left: parent.left
+                        anchors.leftMargin: Theme.spacingS
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingS
+
+                        Item {
+                            anchors.verticalCenter: parent.verticalCenter
+                            width: Theme.iconSize - 2
+                            height: Theme.iconSize - 2
+                            visible: modelData.icon && modelData.icon !== ""
+
+                            IconImage {
+                                anchors.fill: parent
+                                source: modelData.icon ? Quickshell.iconPath(modelData.icon, true) : ""
+                                smooth: true
+                                asynchronous: true
+                                visible: status === Image.Ready
+                            }
+                        }
+
+                        StyledText {
+                            text: modelData.name || ""
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceText
+                            font.weight: Font.Normal
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+
+                    MouseArea {
+                        id: actionMouseArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            if (modelData && contextMenu.desktopEntry) {
+                                SessionService.launchDesktopAction(contextMenu.desktopEntry, modelData)
+                                if (contextMenu.currentApp) {
+                                    appLauncher.appLaunched(contextMenu.currentApp)
+                                }
+                            }
+                            contextMenu.hide()
+                        }
+                    }
+                }
+            }
+
+            Rectangle {
+                visible: contextMenu.desktopEntry && contextMenu.desktopEntry.actions && contextMenu.desktopEntry.actions.length > 0
+                width: parent.width - Theme.spacingS * 2
+                height: 5
+                anchors.horizontalCenter: parent.horizontalCenter
+                color: "transparent"
+
+                Rectangle {
+                    anchors.centerIn: parent
+                    width: parent.width
+                    height: 1
+                    color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                }
+            }
+
             Rectangle {
                 width: parent.width
                 height: 32
@@ -760,7 +892,7 @@ DankPopout {
                     }
 
                     StyledText {
-                        text: "Launch"
+                        text: I18n.tr("Launch")
                         font.pixelSize: Theme.fontSizeSmall
                         color: Theme.surfaceText
                         font.weight: Font.Normal
@@ -778,23 +910,72 @@ DankPopout {
                         if (contextMenu.currentApp)
                             appLauncher.launchApp(contextMenu.currentApp)
 
-                        contextMenu.close()
+                        contextMenu.hide()
                     }
                 }
             }
-        }
 
-        Behavior on opacity {
-            NumberAnimation {
-                duration: Theme.mediumDuration
-                easing.type: Theme.emphasizedEasing
+            Rectangle {
+                visible: SessionService.hasPrimeRun
+                width: parent.width - Theme.spacingS * 2
+                height: 5
+                anchors.horizontalCenter: parent.horizontalCenter
+                color: "transparent"
+
+                Rectangle {
+                    anchors.centerIn: parent
+                    width: parent.width
+                    height: 1
+                    color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                }
             }
-        }
 
-        Behavior on scale {
-            NumberAnimation {
-                duration: Theme.mediumDuration
-                easing.type: Theme.emphasizedEasing
+            Rectangle {
+                visible: SessionService.hasPrimeRun
+                width: parent.width
+                height: 32
+                radius: Theme.cornerRadius
+                color: primeRunMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+                Row {
+                    anchors.left: parent.left
+                    anchors.leftMargin: Theme.spacingS
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: Theme.spacingS
+
+                    DankIcon {
+                        name: "memory"
+                        size: Theme.iconSize - 2
+                        color: Theme.surfaceText
+                        opacity: 0.7
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    StyledText {
+                        text: I18n.tr("Launch on dGPU")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceText
+                        font.weight: Font.Normal
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+                }
+
+                MouseArea {
+                    id: primeRunMouseArea
+
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        if (contextMenu.desktopEntry) {
+                            SessionService.launchDesktopEntry(contextMenu.desktopEntry, true)
+                            if (contextMenu.currentApp) {
+                                appLauncher.appLaunched(contextMenu.currentApp)
+                            }
+                        }
+                        contextMenu.hide()
+                    }
+                }
             }
         }
     }
@@ -804,7 +985,7 @@ DankPopout {
         visible: contextMenu.visible
         z: 999
         onClicked: {
-            contextMenu.close()
+            contextMenu.hide()
         }
 
         MouseArea {

Modules/AppDrawer/AppLauncher.qml

@@ -9,7 +9,7 @@ Item {
     id: root
 
     property string searchQuery: ""
-    property string selectedCategory: "All"
+    property string selectedCategory: I18n.tr("All")
     property string viewMode: "list" // "list" or "grid"
     property int selectedIndex: 0
     property int maxResults: 50
@@ -17,68 +17,162 @@ Item {
     property bool debounceSearch: true
     property int debounceInterval: 50
     property bool keyboardNavigationActive: false
-    readonly property var categories: {
+    property bool suppressUpdatesWhileLaunching: false
+    property var categories: {
         const allCategories = AppSearchService.getAllCategories().filter(cat => cat !== "Education" && cat !== "Science")
-        const result = ["All"]
-        return result.concat(allCategories.filter(cat => cat !== "All"))
+        const result = [I18n.tr("All")]
+        return result.concat(allCategories.filter(cat => cat !== I18n.tr("All")))
     }
     readonly property var categoryIcons: categories.map(category => AppSearchService.getCategoryIcon(category))
     property var appUsageRanking: AppUsageHistoryData.appUsageRanking || {}
     property alias model: filteredModel
     property var _watchApplications: AppSearchService.applications
+    property var _uniqueApps: []
+    property bool _isTriggered: false
+    property string _triggeredCategory: ""
+    property bool _updatingFromTrigger: false
 
     signal appLaunched(var app)
     signal categorySelected(string category)
     signal viewModeSelected(string mode)
 
+    function updateCategories() {
+        const allCategories = AppSearchService.getAllCategories().filter(cat => cat !== "Education" && cat !== "Science")
+        const result = [I18n.tr("All")]
+        categories = result.concat(allCategories.filter(cat => cat !== I18n.tr("All")))
+    }
+
+    Connections {
+        target: PluginService
+        function onPluginLoaded() { updateCategories() }
+        function onPluginUnloaded() { updateCategories() }
+        function onPluginListUpdated() { updateCategories() }
+    }
+
+    Connections {
+        target: SettingsData
+        function onSortAppsAlphabeticallyChanged() {
+            updateFilteredModel()
+        }
+    }
+
+
+
     function updateFilteredModel() {
+        if (suppressUpdatesWhileLaunching) {
+            suppressUpdatesWhileLaunching = false
+            return
+        }
         filteredModel.clear()
         selectedIndex = 0
         keyboardNavigationActive = false
 
+        const triggerResult = checkPluginTriggers(searchQuery)
+        if (triggerResult.triggered) {
+            console.log("AppLauncher: Plugin trigger detected:", triggerResult.trigger, "for plugin:", triggerResult.pluginId)
+        }
+
         let apps = []
-        if (searchQuery.length === 0) {
-            apps = selectedCategory === "All" ? AppSearchService.getAppsInCategory("All") : AppSearchService.getAppsInCategory(selectedCategory).slice(0, maxResults)
+        const allCategory = I18n.tr("All")
+        const emptyTriggerPlugins = typeof PluginService !== "undefined" ? PluginService.getPluginsWithEmptyTrigger() : []
+
+        if (triggerResult.triggered) {
+            _isTriggered = true
+            _triggeredCategory = triggerResult.pluginCategory
+            _updatingFromTrigger = true
+            selectedCategory = triggerResult.pluginCategory
+            _updatingFromTrigger = false
+            apps = AppSearchService.getPluginItems(triggerResult.pluginCategory, triggerResult.query)
         } else {
-            if (selectedCategory === "All") {
-                apps = AppSearchService.searchApplications(searchQuery)
-            } else {
-                const categoryApps = AppSearchService.getAppsInCategory(selectedCategory)
-                if (categoryApps.length > 0) {
-                    const allSearchResults = AppSearchService.searchApplications(searchQuery)
-                    const categoryNames = new Set(categoryApps.map(app => app.name))
-                    apps = allSearchResults.filter(searchApp => categoryNames.has(searchApp.name)).slice(0, maxResults)
+            if (_isTriggered) {
+                _updatingFromTrigger = true
+                selectedCategory = allCategory
+                _updatingFromTrigger = false
+                _isTriggered = false
+                _triggeredCategory = ""
+            }
+            if (searchQuery.length === 0) {
+                if (selectedCategory === allCategory) {
+                    let emptyTriggerItems = []
+                    emptyTriggerPlugins.forEach(pluginId => {
+                        const plugin = PluginService.getLauncherPlugin(pluginId)
+                        const pluginCategory = plugin.name || pluginId
+                        const items = AppSearchService.getPluginItems(pluginCategory, "")
+                        emptyTriggerItems = emptyTriggerItems.concat(items)
+                    })
+                    apps = AppSearchService.applications.concat(emptyTriggerItems)
                 } else {
-                    apps = []
+                    apps = AppSearchService.getAppsInCategory(selectedCategory).slice(0, maxResults)
+                }
+            } else {
+                if (selectedCategory === allCategory) {
+                    apps = AppSearchService.searchApplications(searchQuery)
+
+                    let emptyTriggerItems = []
+                    emptyTriggerPlugins.forEach(pluginId => {
+                        const plugin = PluginService.getLauncherPlugin(pluginId)
+                        const pluginCategory = plugin.name || pluginId
+                        const items = AppSearchService.getPluginItems(pluginCategory, searchQuery)
+                        emptyTriggerItems = emptyTriggerItems.concat(items)
+                    })
+                    apps = apps.concat(emptyTriggerItems)
+                } else {
+                    const categoryApps = AppSearchService.getAppsInCategory(selectedCategory)
+                    if (categoryApps.length > 0) {
+                        const allSearchResults = AppSearchService.searchApplications(searchQuery)
+                        const categoryNames = new Set(categoryApps.map(app => app.name))
+                        apps = allSearchResults.filter(searchApp => categoryNames.has(searchApp.name)).slice(0, maxResults)
+                    } else {
+                        apps = []
+                    }
                 }
             }
         }
 
         if (searchQuery.length === 0) {
-            apps = apps.sort((a, b) => {
-                                 const aId = a.id || a.execString || a.exec || ""
-                                 const bId = b.id || b.execString || b.exec || ""
-                                 const aUsage = appUsageRanking[aId] ? appUsageRanking[aId].usageCount : 0
-                                 const bUsage = appUsageRanking[bId] ? appUsageRanking[bId].usageCount : 0
-                                 if (aUsage !== bUsage) {
-                                     return bUsage - aUsage
-                                 }
-                                 return (a.name || "").localeCompare(b.name || "")
-                             })
+            if (SettingsData.sortAppsAlphabetically) {
+                apps = apps.sort((a, b) => {
+                                     return (a.name || "").localeCompare(b.name || "")
+                                 })
+            } else {
+                apps = apps.sort((a, b) => {
+                                     const aId = a.id || a.execString || a.exec || ""
+                                     const bId = b.id || b.execString || b.exec || ""
+                                     const aUsage = appUsageRanking[aId] ? appUsageRanking[aId].usageCount : 0
+                                     const bUsage = appUsageRanking[bId] ? appUsageRanking[bId].usageCount : 0
+                                     if (aUsage !== bUsage) {
+                                         return bUsage - aUsage
+                                     }
+                                     return (a.name || "").localeCompare(b.name || "")
+                                 })
+            }
         }
 
+        const seenNames = new Set()
+        const uniqueApps = []
         apps.forEach(app => {
                          if (app) {
+                             const itemKey = app.name + "|" + (app.execString || app.exec || app.action || "")
+                             if (seenNames.has(itemKey)) {
+                                 return
+                             }
+                             seenNames.add(itemKey)
+                             uniqueApps.push(app)
+
+                             const isPluginItem = app.action !== undefined
                              filteredModel.append({
                                                       "name": app.name || "",
-                                                      "exec": app.execString || "",
+                                                      "exec": app.execString || app.exec || app.action || "",
                                                       "icon": app.icon || "application-x-executable",
                                                       "comment": app.comment || "",
                                                       "categories": app.categories || [],
-                                                      "desktopEntry": app
+                                                      "isPlugin": isPluginItem,
+                                                      "appIndex": uniqueApps.length - 1
                                                   })
                          }
                      })
+
+        root._uniqueApps = uniqueApps
     }
 
     function selectNext() {
@@ -122,12 +216,25 @@ Item {
     }
 
     function launchApp(appData) {
-        if (!appData) {
+        if (!appData || typeof appData.appIndex === "undefined" || appData.appIndex < 0 || appData.appIndex >= _uniqueApps.length) {
             return
         }
-        appData.desktopEntry.execute()
-        appLaunched(appData)
-        AppUsageHistoryData.addAppUsage(appData.desktopEntry)
+        suppressUpdatesWhileLaunching = true
+
+        const actualApp = _uniqueApps[appData.appIndex]
+
+        if (appData.isPlugin) {
+            const pluginId = getPluginIdForItem(actualApp)
+            if (pluginId) {
+                AppSearchService.executePluginItem(actualApp, pluginId)
+                appLaunched(appData)
+                return
+            }
+        } else {
+            SessionService.launchDesktopEntry(actualApp)
+            appLaunched(appData)
+            AppUsageHistoryData.addAppUsage(actualApp)
+        }
     }
 
     function setCategory(category) {
@@ -147,7 +254,12 @@ Item {
             updateFilteredModel()
         }
     }
-    onSelectedCategoryChanged: updateFilteredModel()
+    onSelectedCategoryChanged: {
+        if (_updatingFromTrigger) {
+            return
+        }
+        updateFilteredModel()
+    }
     onAppUsageRankingChanged: updateFilteredModel()
     on_WatchApplicationsChanged: updateFilteredModel()
     Component.onCompleted: {
@@ -165,4 +277,63 @@ Item {
         repeat: false
         onTriggered: updateFilteredModel()
     }
+
+    // Plugin trigger system functions
+    function checkPluginTriggers(query) {
+        if (!query || typeof PluginService === "undefined") {
+            return { triggered: false, pluginCategory: "", query: "" }
+        }
+
+        const triggers = PluginService.getAllPluginTriggers()
+        
+        for (const trigger in triggers) {
+            if (query.startsWith(trigger)) {
+                const pluginId = triggers[trigger]
+                const plugin = PluginService.getLauncherPlugin(pluginId)
+                
+                if (plugin) {
+                    const remainingQuery = query.substring(trigger.length).trim()
+                    const result = {
+                        triggered: true,
+                        pluginId: pluginId,
+                        pluginCategory: plugin.name || pluginId,
+                        query: remainingQuery,
+                        trigger: trigger
+                    }
+                    return result
+                }
+            }
+        }
+        
+        return { triggered: false, pluginCategory: "", query: "" }
+    }
+
+    function getPluginIdForItem(item) {
+        if (!item || !item.categories || typeof PluginService === "undefined") {
+            return null
+        }
+
+        const launchers = PluginService.getLauncherPlugins()
+        for (const pluginId in launchers) {
+            const plugin = launchers[pluginId]
+            const pluginCategory = plugin.name || pluginId
+
+            let hasCategory = false
+            if (Array.isArray(item.categories)) {
+                hasCategory = item.categories.includes(pluginCategory)
+            } else if (item.categories && typeof item.categories.count !== "undefined") {
+                for (let i = 0; i < item.categories.count; i++) {
+                    if (item.categories.get(i) === pluginCategory) {
+                        hasCategory = true
+                        break
+                    }
+                }
+            }
+
+            if (hasCategory) {
+                return pluginId
+            }
+        }
+        return null
+    }
 }

Modules/AppDrawer/CategorySelector.qml

@@ -1,13 +1,14 @@
 import QtQuick
 import QtQuick.Controls
 import qs.Common
+import qs.Services
 import qs.Widgets
 
 Item {
     id: root
 
     property var categories: []
-    property string selectedCategory: "All"
+    property string selectedCategory: I18n.tr("All")
     property bool compact: false
 
     signal categorySelected(string category)
@@ -15,10 +16,9 @@ Item {
     readonly property int maxCompactItems: 8
     readonly property int itemHeight: 36
     readonly property color selectedBorderColor: "transparent"
-    readonly property color unselectedBorderColor: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
+    readonly property color unselectedBorderColor: "transparent"
 
     function handleCategoryClick(category) {
-        selectedCategory = category
         categorySelected(category)
     }
 
@@ -42,8 +42,7 @@ Item {
                 height: root.itemHeight
                 width: root.getButtonWidth(itemCount, parent.width)
                 radius: Theme.cornerRadius
-                color: selectedCategory === modelData ? Theme.primary : "transparent"
-                border.color: selectedCategory === modelData ? selectedBorderColor : unselectedBorderColor
+                color: selectedCategory === modelData ? Theme.primary : Theme.surfaceContainerHigh
 
                 StyledText {
                     anchors.centerIn: parent
@@ -82,7 +81,7 @@ Item {
                     height: root.itemHeight
                     width: root.getButtonWidth(itemCount, parent.width)
                     radius: Theme.cornerRadius
-                    color: selectedCategory === modelData ? Theme.primary : "transparent"
+                    color: selectedCategory === modelData ? Theme.primary : Theme.surfaceContainerHigh
                     border.color: selectedCategory === modelData ? selectedBorderColor : unselectedBorderColor
 
                     StyledText {
@@ -118,7 +117,7 @@ Item {
                     height: root.itemHeight
                     width: root.getButtonWidth(itemCount, parent.width)
                     radius: Theme.cornerRadius
-                    color: selectedCategory === modelData ? Theme.primary : "transparent"
+                    color: selectedCategory === modelData ? Theme.primary : Theme.surfaceContainerHigh
                     border.color: selectedCategory === modelData ? selectedBorderColor : unselectedBorderColor
 
                     StyledText {

Modules/ControlCenter/BuiltinPlugins/VpnWidget.qml

@@ -0,0 +1,246 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Common
+import qs.Services
+import qs.Widgets
+import qs.Modules.Plugins
+
+PluginComponent {
+    id: root
+
+    Ref {
+        service: VpnService
+    }
+
+    ccWidgetIcon: VpnService.isBusy ? "sync" : (VpnService.connected ? "vpn_lock" : "vpn_key_off")
+    ccWidgetPrimaryText: "VPN"
+    ccWidgetSecondaryText: {
+        if (!VpnService.connected)
+            return "Disconnected"
+        const names = VpnService.activeNames || []
+        if (names.length <= 1)
+            return names[0] || "Connected"
+        return names[0] + " +" + (names.length - 1)
+    }
+    ccWidgetIsActive: VpnService.connected
+
+    onCcWidgetToggled: {
+        if (VpnService.connected) {
+            VpnService.disconnectAllActive()
+        } else if (VpnService.profiles.length > 0) {
+            VpnService.connect(VpnService.profiles[0].uuid)
+        }
+    }
+
+    ccDetailContent: Component {
+        Rectangle {
+            id: detailRoot
+            implicitHeight: detailColumn.implicitHeight + Theme.spacingM * 2
+            radius: Theme.cornerRadius
+            color: Theme.surfaceContainerHigh
+
+            Column {
+                id: detailColumn
+                anchors.fill: parent
+                anchors.margins: Theme.spacingM
+                spacing: Theme.spacingS
+
+                RowLayout {
+                    spacing: Theme.spacingS
+                    width: parent.width
+
+                    StyledText {
+                        text: {
+                            if (!VpnService.connected)
+                                return "Active: None"
+                            const names = VpnService.activeNames || []
+                            if (names.length <= 1)
+                                return "Active: " + (names[0] || "VPN")
+                            return "Active: " + names[0] + " +" + (names.length - 1)
+                        }
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                    }
+
+                    Item {
+                        Layout.fillWidth: true
+                    }
+
+                    Rectangle {
+                        height: 28
+                        radius: 14
+                        color: discAllArea.containsMouse ? Theme.errorHover : Theme.surfaceLight
+                        visible: VpnService.connected
+                        width: 110
+                        Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+
+                        Row {
+                            anchors.centerIn: parent
+                            spacing: Theme.spacingXS
+
+                            DankIcon {
+                                name: "link_off"
+                                size: Theme.fontSizeSmall
+                                color: Theme.surfaceText
+                            }
+
+                            StyledText {
+                                text: I18n.tr("Disconnect")
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.surfaceText
+                                font.weight: Font.Medium
+                            }
+                        }
+
+                        MouseArea {
+                            id: discAllArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: VpnService.disconnectAllActive()
+                        }
+                    }
+                }
+
+                Rectangle {
+                    height: 1
+                    width: parent.width
+                    color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                }
+
+                DankFlickable {
+                    width: parent.width
+                    height: 160
+                    contentHeight: listCol.height
+                    clip: true
+
+                    Column {
+                        id: listCol
+                        width: parent.width
+                        spacing: Theme.spacingXS
+
+                        Item {
+                            width: parent.width
+                            height: VpnService.profiles.length === 0 ? 120 : 0
+                            visible: height > 0
+
+                            Column {
+                                anchors.centerIn: parent
+                                spacing: Theme.spacingS
+
+                                DankIcon {
+                                    name: "playlist_remove"
+                                    size: 36
+                                    color: Theme.surfaceVariantText
+                                    anchors.horizontalCenter: parent.horizontalCenter
+                                }
+
+                                StyledText {
+                                    text: I18n.tr("No VPN profiles found")
+                                    font.pixelSize: Theme.fontSizeMedium
+                                    color: Theme.surfaceVariantText
+                                    anchors.horizontalCenter: parent.horizontalCenter
+                                }
+
+                                StyledText {
+                                    text: I18n.tr("Add a VPN in NetworkManager")
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: Theme.surfaceVariantText
+                                    anchors.horizontalCenter: parent.horizontalCenter
+                                }
+                            }
+                        }
+
+                        Repeater {
+                            model: VpnService.profiles
+
+                            delegate: Rectangle {
+                                required property var modelData
+
+                                width: parent ? parent.width : 300
+                                height: 50
+                                radius: Theme.cornerRadius
+                                color: rowArea.containsMouse ? Theme.primaryHoverLight : (VpnService.isActiveUuid(modelData.uuid) ? Theme.primaryPressed : Theme.surfaceLight)
+                                border.width: VpnService.isActiveUuid(modelData.uuid) ? 2 : 1
+                                border.color: VpnService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.outlineLight
+
+                                RowLayout {
+                                    anchors.left: parent.left
+                                    anchors.right: parent.right
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    anchors.margins: Theme.spacingM
+                                    spacing: Theme.spacingS
+
+                                    DankIcon {
+                                        name: VpnService.isActiveUuid(modelData.uuid) ? "vpn_lock" : "vpn_key_off"
+                                        size: Theme.iconSize - 4
+                                        color: VpnService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.surfaceText
+                                        Layout.alignment: Qt.AlignVCenter
+                                    }
+
+                                    Column {
+                                        spacing: 2
+                                        Layout.alignment: Qt.AlignVCenter
+
+                                        StyledText {
+                                            text: modelData.name
+                                            font.pixelSize: Theme.fontSizeMedium
+                                            color: VpnService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.surfaceText
+                                        }
+
+                                        StyledText {
+                                            text: {
+                                                if (modelData.type === "wireguard")
+                                                    return "WireGuard"
+                                                const svc = modelData.serviceType || ""
+                                                if (svc.indexOf("openvpn") !== -1)
+                                                    return "OpenVPN"
+                                                if (svc.indexOf("wireguard") !== -1)
+                                                    return "WireGuard (plugin)"
+                                                if (svc.indexOf("openconnect") !== -1)
+                                                    return "OpenConnect"
+                                                if (svc.indexOf("fortissl") !== -1 || svc.indexOf("forti") !== -1)
+                                                    return "Fortinet"
+                                                if (svc.indexOf("strongswan") !== -1)
+                                                    return "IPsec (strongSwan)"
+                                                if (svc.indexOf("libreswan") !== -1)
+                                                    return "IPsec (Libreswan)"
+                                                if (svc.indexOf("l2tp") !== -1)
+                                                    return "L2TP/IPsec"
+                                                if (svc.indexOf("pptp") !== -1)
+                                                    return "PPTP"
+                                                if (svc.indexOf("vpnc") !== -1)
+                                                    return "Cisco (vpnc)"
+                                                if (svc.indexOf("sstp") !== -1)
+                                                    return "SSTP"
+                                                if (svc)
+                                                    return svc.split('.').pop()
+                                                return "VPN"
+                                            }
+                                            font.pixelSize: Theme.fontSizeSmall
+                                            color: Theme.surfaceTextMedium
+                                        }
+                                    }
+
+                                    Item {
+                                        Layout.fillWidth: true
+                                    }
+                                }
+
+                                MouseArea {
+                                    id: rowArea
+                                    anchors.fill: parent
+                                    hoverEnabled: true
+                                    cursorShape: Qt.PointingHandCursor
+                                    onClicked: VpnService.toggle(modelData.uuid)
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

Modules/ControlCenter/Components/ActionTile.qml

@@ -0,0 +1,120 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property string iconName: ""
+    property string text: ""
+    property string secondaryText: ""
+    property bool isActive: false
+    property bool enabled: true
+    property int widgetIndex: 0
+    property var widgetData: null
+    property bool editMode: false
+
+    signal clicked()
+
+    width: parent ? parent.width : 200
+    height: 60
+    radius: {
+        if (Theme.cornerRadius === 0) return 0
+        return isActive ? Theme.cornerRadius : Theme.cornerRadius + 4
+    }
+
+    readonly property color _tileBgActive: Theme.primary
+    readonly property color _tileBgInactive:
+        Theme.surfaceContainerHigh
+    readonly property color _tileRingActive:
+        Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
+
+    color: isActive ? _tileBgActive : _tileBgInactive
+    border.color: isActive ? _tileRingActive : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.width: isActive ? 1 : 1
+    opacity: enabled ? 1.0 : 0.6
+
+    function hoverTint(base) {
+        const factor = 1.2
+        return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor)
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        radius: Theme.cornerRadius
+        color: mouseArea.containsMouse ? hoverTint(root.color) : "transparent"
+        opacity: mouseArea.containsMouse ? 0.08 : 0.0
+
+        Behavior on opacity {
+            NumberAnimation { duration: Theme.shortDuration }
+        }
+    }
+
+    Row {
+        anchors.fill: parent
+        anchors.leftMargin: Theme.spacingL + 2
+        anchors.rightMargin: Theme.spacingM
+        spacing: Theme.spacingM
+
+        DankIcon {
+            name: root.iconName
+            size: Theme.iconSize
+            color: isActive ? Theme.primaryText : Theme.primary
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Item {
+            width: parent.width - Theme.iconSize - parent.spacing
+            height: parent.height
+
+            Column {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: 2
+
+                Typography {
+                    width: parent.width
+                    text: root.text
+                    style: Typography.Style.Body
+                    color: isActive ? Theme.primaryText : Theme.surfaceText
+                    elide: Text.ElideRight
+                    wrapMode: Text.NoWrap
+                }
+
+                Typography {
+                    width: parent.width
+                    text: root.secondaryText
+                    style: Typography.Style.Caption
+                    color: isActive ? Theme.primaryText : Theme.surfaceVariantText
+                    visible: text.length > 0
+                    elide: Text.ElideRight
+                    wrapMode: Text.NoWrap
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        enabled: root.enabled
+        onClicked: root.clicked()
+    }
+
+    Behavior on color {
+        ColorAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+
+    Behavior on radius {
+        NumberAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+}

Modules/ControlCenter/Components/DetailHost.qml

@@ -0,0 +1,212 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Modules.ControlCenter.Details
+import qs.Modules.ControlCenter.Models
+
+Item {
+    id: root
+
+    property string expandedSection: ""
+    property var expandedWidgetData: null
+    property var bluetoothCodecSelector: null
+
+    property var pluginDetailInstance: null
+    property var widgetModel: null
+    property var collapseCallback: null
+
+    Loader {
+        id: pluginDetailLoader
+        width: parent.width
+        height: 250
+        y: Theme.spacingS
+        active: false
+        sourceComponent: null
+    }
+
+    Loader {
+        id: coreDetailLoader
+        width: parent.width
+        height: 250
+        y: Theme.spacingS
+        active: false
+        sourceComponent: null
+    }
+
+    Connections {
+        target: coreDetailLoader.item
+        enabled: root.expandedSection.startsWith("brightnessSlider_")
+        ignoreUnknownSignals: true
+
+        function onDeviceNameChanged(newDeviceName) {
+            if (root.expandedWidgetData && root.expandedWidgetData.id === "brightnessSlider") {
+                const widgets = SettingsData.controlCenterWidgets || []
+                const newWidgets = widgets.map(w => {
+                    if (w.id === "brightnessSlider" && w.instanceId === root.expandedWidgetData.instanceId) {
+                        const updatedWidget = Object.assign({}, w)
+                        updatedWidget.deviceName = newDeviceName
+                        return updatedWidget
+                    }
+                    return w
+                })
+                SettingsData.setControlCenterWidgets(newWidgets)
+                if (root.collapseCallback) {
+                    root.collapseCallback()
+                }
+            }
+        }
+    }
+
+    Connections {
+        target: coreDetailLoader.item
+        enabled: root.expandedSection.startsWith("diskUsage_")
+        ignoreUnknownSignals: true
+
+        function onMountPathChanged(newMountPath) {
+            if (root.expandedWidgetData && root.expandedWidgetData.id === "diskUsage") {
+                const widgets = SettingsData.controlCenterWidgets || []
+                const newWidgets = widgets.map(w => {
+                    if (w.id === "diskUsage" && w.instanceId === root.expandedWidgetData.instanceId) {
+                        const updatedWidget = Object.assign({}, w)
+                        updatedWidget.mountPath = newMountPath
+                        return updatedWidget
+                    }
+                    return w
+                })
+                SettingsData.setControlCenterWidgets(newWidgets)
+                if (root.collapseCallback) {
+                    root.collapseCallback()
+                }
+            }
+        }
+    }
+
+    onExpandedSectionChanged: {
+        if (pluginDetailInstance) {
+            pluginDetailInstance.destroy()
+            pluginDetailInstance = null
+        }
+        pluginDetailLoader.active = false
+        coreDetailLoader.active = false
+
+        if (!root.expandedSection) {
+            return
+        }
+
+        if (root.expandedSection.startsWith("builtin_")) {
+            const builtinId = root.expandedSection
+            let builtinInstance = null
+
+            if (builtinId === "builtin_vpn") {
+                if (widgetModel?.vpnLoader) {
+                    widgetModel.vpnLoader.active = true
+                }
+                builtinInstance = widgetModel.vpnBuiltinInstance
+            }
+
+            if (!builtinInstance || !builtinInstance.ccDetailContent) {
+                return
+            }
+
+            pluginDetailLoader.sourceComponent = builtinInstance.ccDetailContent
+            pluginDetailLoader.active = parent.height > 0
+            return
+        }
+
+        if (root.expandedSection.startsWith("plugin_")) {
+            const pluginId = root.expandedSection.replace("plugin_", "")
+            const pluginComponent = PluginService.pluginWidgetComponents[pluginId]
+            if (!pluginComponent) {
+                return
+            }
+
+            pluginDetailInstance = pluginComponent.createObject(null)
+            if (!pluginDetailInstance || !pluginDetailInstance.ccDetailContent) {
+                if (pluginDetailInstance) {
+                    pluginDetailInstance.destroy()
+                    pluginDetailInstance = null
+                }
+                return
+            }
+
+            pluginDetailLoader.sourceComponent = pluginDetailInstance.ccDetailContent
+            pluginDetailLoader.active = parent.height > 0
+            return
+        }
+
+        if (root.expandedSection.startsWith("diskUsage_")) {
+            coreDetailLoader.sourceComponent = diskUsageDetailComponent
+            coreDetailLoader.active = parent.height > 0
+            return
+        }
+
+        if (root.expandedSection.startsWith("brightnessSlider_")) {
+            coreDetailLoader.sourceComponent = brightnessDetailComponent
+            coreDetailLoader.active = parent.height > 0
+            return
+        }
+
+        switch (root.expandedSection) {
+        case "network":
+        case "wifi": coreDetailLoader.sourceComponent = networkDetailComponent; break
+        case "bluetooth": coreDetailLoader.sourceComponent = bluetoothDetailComponent; break
+        case "audioOutput": coreDetailLoader.sourceComponent = audioOutputDetailComponent; break
+        case "audioInput": coreDetailLoader.sourceComponent = audioInputDetailComponent; break
+        case "battery": coreDetailLoader.sourceComponent = batteryDetailComponent; break
+        default: return
+        }
+
+        coreDetailLoader.active = parent.height > 0
+    }
+
+    Component {
+        id: networkDetailComponent
+        NetworkDetail {}
+    }
+
+    Component {
+        id: bluetoothDetailComponent
+        BluetoothDetail {
+            id: bluetoothDetail
+            onShowCodecSelector: function(device) {
+                if (root.bluetoothCodecSelector) {
+                    root.bluetoothCodecSelector.show(device)
+                    root.bluetoothCodecSelector.codecSelected.connect(function(deviceAddress, codecName) {
+                        bluetoothDetail.updateDeviceCodecDisplay(deviceAddress, codecName)
+                    })
+                }
+            }
+        }
+    }
+
+    Component {
+        id: audioOutputDetailComponent
+        AudioOutputDetail {}
+    }
+
+    Component {
+        id: audioInputDetailComponent
+        AudioInputDetail {}
+    }
+
+    Component {
+        id: batteryDetailComponent
+        BatteryDetail {}
+    }
+
+    Component {
+        id: diskUsageDetailComponent
+        DiskUsageDetail {
+            currentMountPath: root.expandedWidgetData?.mountPath || "/"
+            instanceId: root.expandedWidgetData?.instanceId || ""
+        }
+    }
+
+    Component {
+        id: brightnessDetailComponent
+        BrightnessDetail {
+            currentDeviceName: root.expandedWidgetData?.deviceName || ""
+            instanceId: root.expandedWidgetData?.instanceId || ""
+        }
+    }
+}

Modules/ControlCenter/Components/DragDropDetailHost.qml

@@ -0,0 +1,91 @@
+import QtQuick
+import qs.Common
+import qs.Modules.ControlCenter.Details
+
+Item {
+    id: root
+
+    property string expandedSection: ""
+    property var expandedWidgetData: null
+
+    height: active ? 250 : 0
+    visible: active
+
+    readonly property bool active: expandedSection !== ""
+
+    Behavior on height {
+        NumberAnimation {
+            duration: Theme.mediumDuration
+            easing.type: Easing.OutCubic
+        }
+    }
+
+    Loader {
+        anchors.fill: parent
+        anchors.topMargin: Theme.spacingS
+        sourceComponent: {
+            if (!root.active) return null
+
+            if (expandedSection.startsWith("diskUsage_")) {
+                return diskUsageDetailComponent
+            }
+
+            switch (expandedSection) {
+                case "wifi": return networkDetailComponent
+                case "bluetooth": return bluetoothDetailComponent
+                case "audioOutput": return audioOutputDetailComponent
+                case "audioInput": return audioInputDetailComponent
+                case "battery": return batteryDetailComponent
+                default: return null
+            }
+        }
+    }
+
+    Component {
+        id: networkDetailComponent
+        NetworkDetail {}
+    }
+
+    Component {
+        id: bluetoothDetailComponent
+        BluetoothDetail {}
+    }
+
+    Component {
+        id: audioOutputDetailComponent
+        AudioOutputDetail {}
+    }
+
+    Component {
+        id: audioInputDetailComponent
+        AudioInputDetail {}
+    }
+
+    Component {
+        id: batteryDetailComponent
+        BatteryDetail {}
+    }
+
+    Component {
+        id: diskUsageDetailComponent
+        DiskUsageDetail {
+            currentMountPath: root.expandedWidgetData?.mountPath || "/"
+            instanceId: root.expandedWidgetData?.instanceId || ""
+
+            onMountPathChanged: (newMountPath) => {
+                if (root.expandedWidgetData && root.expandedWidgetData.id === "diskUsage") {
+                    const widgets = SettingsData.controlCenterWidgets || []
+                    const newWidgets = widgets.map(w => {
+                        if (w.id === "diskUsage" && w.instanceId === root.expandedWidgetData.instanceId) {
+                            const updatedWidget = Object.assign({}, w)
+                            updatedWidget.mountPath = newMountPath
+                            return updatedWidget
+                        }
+                        return w
+                    })
+                    SettingsData.setControlCenterWidgets(newWidgets)
+                }
+            }
+        }
+    }
+}

Modules/ControlCenter/Components/DragDropGrid.qml

@@ -0,0 +1,999 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Modules.ControlCenter.Widgets
+import qs.Modules.ControlCenter.Components
+import "../utils/layout.js" as LayoutUtils
+
+Column {
+    id: root
+
+    property bool editMode: false
+    property string expandedSection: ""
+    property int expandedWidgetIndex: -1
+    property var model: null
+    property var expandedWidgetData: null
+    property var bluetoothCodecSelector: null
+    property bool darkModeTransitionPending: false
+
+    signal expandClicked(var widgetData, int globalIndex)
+    signal removeWidget(int index)
+    signal moveWidget(int fromIndex, int toIndex)
+    signal toggleWidgetSize(int index)
+    signal collapseRequested()
+
+    function requestCollapse() {
+        collapseRequested()
+    }
+
+    spacing: editMode ? Theme.spacingL : Theme.spacingS
+
+    property var currentRowWidgets: []
+    property real currentRowWidth: 0
+    property int expandedRowIndex: -1
+    property var colorPickerModal: null
+
+    function calculateRowsAndWidgets() {
+        return LayoutUtils.calculateRowsAndWidgets(root, expandedSection, expandedWidgetIndex)
+    }
+
+    property var layoutResult: {
+        const dummy = [expandedSection, expandedWidgetIndex, model?.controlCenterWidgets]
+        return calculateRowsAndWidgets()
+    }
+
+    onLayoutResultChanged: {
+        expandedRowIndex = layoutResult.expandedRowIndex
+    }
+
+    function moveToTop(item) {
+        const children = root.children
+        for (var i = 0; i < children.length; i++) {
+            if (children[i] === item)
+                continue
+            if (children[i].z)
+                children[i].z = Math.min(children[i].z, 999)
+        }
+        item.z = 1000
+    }
+
+    Repeater {
+        model: root.layoutResult.rows
+
+        Column {
+            width: root.width
+            spacing: 0
+            property int rowIndex: index
+            property var rowWidgets: modelData
+            property bool isSliderOnlyRow: {
+                const widgets = rowWidgets || []
+                if (widgets.length === 0)
+                    return false
+                return widgets.every(w => w.id === "volumeSlider" || w.id === "brightnessSlider" || w.id === "inputVolumeSlider")
+            }
+            topPadding: isSliderOnlyRow ? (root.editMode ? 4 : -6) : 0
+            bottomPadding: isSliderOnlyRow ? (root.editMode ? 4 : -6) : 0
+
+            Flow {
+                width: parent.width
+                spacing: Theme.spacingS
+
+                Repeater {
+                    model: rowWidgets || []
+
+                    DragDropWidgetWrapper {
+                        widgetData: modelData
+                        property int globalWidgetIndex: {
+                            const widgets = SettingsData.controlCenterWidgets || []
+                            for (var i = 0; i < widgets.length; i++) {
+                                if (widgets[i].id === modelData.id) {
+                                    if (modelData.id === "diskUsage" || modelData.id === "brightnessSlider") {
+                                        if (widgets[i].instanceId === modelData.instanceId) {
+                                            return i
+                                        }
+                                    } else {
+                                        return i
+                                    }
+                                }
+                            }
+                            return -1
+                        }
+                        property int widgetWidth: modelData.width || 50
+                        width: {
+                            const baseWidth = root.width
+                            const spacing = Theme.spacingS
+                            if (widgetWidth <= 25) {
+                                return (baseWidth - spacing * 3) / 4
+                            } else if (widgetWidth <= 50) {
+                                return (baseWidth - spacing) / 2
+                            } else if (widgetWidth <= 75) {
+                                return (baseWidth - spacing * 2) * 0.75
+                            } else {
+                                return baseWidth
+                            }
+                        }
+                        height: isSliderOnlyRow ? 48 : 60
+
+                        editMode: root.editMode
+                        widgetIndex: globalWidgetIndex
+                        gridCellWidth: width
+                        gridCellHeight: height
+                        gridColumns: 4
+                        gridLayout: root
+                        isSlider: {
+                            const id = modelData.id || ""
+                            return id === "volumeSlider" || id === "brightnessSlider" || id === "inputVolumeSlider"
+                        }
+
+                        widgetComponent: {
+                            const id = modelData.id || ""
+                            if (id.startsWith("builtin_")) {
+                                return builtinPluginWidgetComponent
+                            } else if (id.startsWith("plugin_")) {
+                                return pluginWidgetComponent
+                            } else if (id === "wifi" || id === "bluetooth" || id === "audioOutput" || id === "audioInput") {
+                                return compoundPillComponent
+                            } else if (id === "volumeSlider") {
+                                return audioSliderComponent
+                            } else if (id === "brightnessSlider") {
+                                return brightnessSliderComponent
+                            } else if (id === "inputVolumeSlider") {
+                                return inputAudioSliderComponent
+                            } else if (id === "battery") {
+                                return widgetWidth <= 25 ? smallBatteryComponent : batteryPillComponent
+                            } else if (id === "diskUsage") {
+                                return diskUsagePillComponent
+                            } else if (id === "colorPicker") {
+                                return colorPickerPillComponent
+                            } else {
+                                return widgetWidth <= 25 ? smallToggleComponent : toggleButtonComponent
+                            }
+                        }
+
+                        onWidgetMoved: (fromIndex, toIndex) => root.moveWidget(fromIndex, toIndex)
+                        onRemoveWidget: index => root.removeWidget(index)
+                        onToggleWidgetSize: index => root.toggleWidgetSize(index)
+                    }
+                }
+            }
+
+            DetailHost {
+                width: parent.width
+                height: active ? (250 + Theme.spacingS) : 0
+                property bool active: {
+                    if (root.expandedSection === "")
+                        return false
+
+                    if (root.expandedSection.startsWith("diskUsage_") && root.expandedWidgetData) {
+                        const expandedInstanceId = root.expandedWidgetData.instanceId
+                        return rowWidgets.some(w => w.id === "diskUsage" && w.instanceId === expandedInstanceId)
+                    }
+
+                    if (root.expandedSection.startsWith("brightnessSlider_") && root.expandedWidgetData) {
+                        const expandedInstanceId = root.expandedWidgetData.instanceId
+                        return rowWidgets.some(w => w.id === "brightnessSlider" && w.instanceId === expandedInstanceId)
+                    }
+
+                    return rowIndex === root.expandedRowIndex
+                }
+                visible: active
+                expandedSection: root.expandedSection
+                expandedWidgetData: root.expandedWidgetData
+                bluetoothCodecSelector: root.bluetoothCodecSelector
+                widgetModel: root.model
+                collapseCallback: root.requestCollapse
+            }
+        }
+    }
+
+    Component {
+        id: errorPillComponent
+        ErrorPill {
+            property var widgetData: parent.widgetData || {}
+            width: parent.width
+            height: 60
+            primaryMessage: {
+                if (!DMSService.dmsAvailable) {
+                    return I18n.tr("DMS_SOCKET not available")
+                }
+                return I18n.tr("NM not supported")
+            }
+            secondaryMessage: I18n.tr("update dms for NM integration.")
+        }
+    }
+
+    Component {
+        id: compoundPillComponent
+        CompoundPill {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            property var widgetDef: root.model?.getWidgetForId(widgetData.id || "")
+            width: parent.width
+            height: 60
+            iconName: {
+                switch (widgetData.id || "") {
+                case "wifi":
+                {
+                    if (NetworkService.wifiToggling)
+                        return "sync"
+                    if (NetworkService.networkStatus === "ethernet")
+                        return "settings_ethernet"
+                    if (NetworkService.networkStatus === "wifi")
+                        return NetworkService.wifiSignalIcon
+                    if (NetworkService.wifiEnabled)
+                        return "wifi_off"
+                    return "wifi_off"
+                }
+                case "bluetooth":
+                {
+                    if (!BluetoothService.available)
+                        return "bluetooth_disabled"
+                    if (!BluetoothService.adapter || !BluetoothService.adapter.enabled)
+                        return "bluetooth_disabled"
+                    const primaryDevice = (() => {
+                                               if (!BluetoothService.adapter || !BluetoothService.adapter.devices)
+                                               return null
+                                               let devices = [...BluetoothService.adapter.devices.values.filter(dev => dev && (dev.paired || dev.trusted))]
+                                               for (let device of devices) {
+                                                   if (device && device.connected)
+                                                   return device
+                                               }
+                                               return null
+                                           })()
+                    if (primaryDevice)
+                        return BluetoothService.getDeviceIcon(primaryDevice)
+                    return "bluetooth"
+                }
+                case "audioOutput":
+                {
+                    if (!AudioService.sink)
+                        return "volume_off"
+                    let volume = AudioService.sink.audio.volume
+                    let muted = AudioService.sink.audio.muted
+                    if (muted || volume === 0.0)
+                        return "volume_off"
+                    if (volume <= 0.33)
+                        return "volume_down"
+                    if (volume <= 0.66)
+                        return "volume_up"
+                    return "volume_up"
+                }
+                case "audioInput":
+                {
+                    if (!AudioService.source)
+                        return "mic_off"
+                    let muted = AudioService.source.audio.muted
+                    return muted ? "mic_off" : "mic"
+                }
+                default:
+                    return widgetDef?.icon || "help"
+                }
+            }
+            primaryText: {
+                switch (widgetData.id || "") {
+                case "wifi":
+                {
+                    if (NetworkService.wifiToggling)
+                        return NetworkService.wifiEnabled ? "Disabling WiFi..." : "Enabling WiFi..."
+                    if (NetworkService.networkStatus === "ethernet")
+                        return "Ethernet"
+                    if (NetworkService.networkStatus === "wifi" && NetworkService.currentWifiSSID)
+                        return NetworkService.currentWifiSSID
+                    if (NetworkService.wifiEnabled)
+                        return "Not connected"
+                    return "WiFi off"
+                }
+                case "bluetooth":
+                {
+                    if (!BluetoothService.available)
+                        return "Bluetooth"
+                    if (!BluetoothService.adapter)
+                        return "No adapter"
+                    if (!BluetoothService.adapter.enabled)
+                        return "Disabled"
+                    return "Enabled"
+                }
+                case "audioOutput":
+                    return AudioService.sink?.description || "No output device"
+                case "audioInput":
+                    return AudioService.source?.description || "No input device"
+                default:
+                    return widgetDef?.text || "Unknown"
+                }
+            }
+            secondaryText: {
+                switch (widgetData.id || "") {
+                case "wifi":
+                {
+                    if (NetworkService.wifiToggling)
+                        return "Please wait..."
+                    if (NetworkService.networkStatus === "ethernet")
+                        return "Connected"
+                    if (NetworkService.networkStatus === "wifi")
+                        return NetworkService.wifiSignalStrength > 0 ? NetworkService.wifiSignalStrength + "%" : "Connected"
+                    if (NetworkService.wifiEnabled)
+                        return "Select network"
+                    return ""
+                }
+                case "bluetooth":
+                {
+                    if (!BluetoothService.available)
+                        return "No adapters"
+                    if (!BluetoothService.adapter || !BluetoothService.adapter.enabled)
+                        return "Off"
+                    const primaryDevice = (() => {
+                                               if (!BluetoothService.adapter || !BluetoothService.adapter.devices)
+                                               return null
+                                               let devices = [...BluetoothService.adapter.devices.values.filter(dev => dev && (dev.paired || dev.trusted))]
+                                               for (let device of devices) {
+                                                   if (device && device.connected)
+                                                   return device
+                                               }
+                                               return null
+                                           })()
+                    if (primaryDevice)
+                        return primaryDevice.name || primaryDevice.alias || primaryDevice.deviceName || "Connected Device"
+                    return "No devices"
+                }
+                case "audioOutput":
+                {
+                    if (!AudioService.sink)
+                        return "Select device"
+                    if (AudioService.sink.audio.muted)
+                        return "Muted"
+                    return Math.round(AudioService.sink.audio.volume * 100) + "%"
+                }
+                case "audioInput":
+                {
+                    if (!AudioService.source)
+                        return "Select device"
+                    if (AudioService.source.audio.muted)
+                        return "Muted"
+                    return Math.round(AudioService.source.audio.volume * 100) + "%"
+                }
+                default:
+                    return widgetDef?.description || ""
+                }
+            }
+            isActive: {
+                switch (widgetData.id || "") {
+                case "wifi":
+                {
+                    if (NetworkService.wifiToggling)
+                        return false
+                    if (NetworkService.networkStatus === "ethernet")
+                        return true
+                    if (NetworkService.networkStatus === "wifi")
+                        return true
+                    return NetworkService.wifiEnabled
+                }
+                case "bluetooth":
+                    return !!(BluetoothService.available && BluetoothService.adapter && BluetoothService.adapter.enabled)
+                case "audioOutput":
+                    return !!(AudioService.sink && !AudioService.sink.audio.muted)
+                case "audioInput":
+                    return !!(AudioService.source && !AudioService.source.audio.muted)
+                default:
+                    return false
+                }
+            }
+            enabled: widgetDef?.enabled ?? true
+            onToggled: {
+                if (root.editMode)
+                    return
+                switch (widgetData.id || "") {
+                case "wifi":
+                {
+                    if (NetworkService.networkStatus !== "ethernet" && !NetworkService.wifiToggling) {
+                        NetworkService.toggleWifiRadio()
+                    }
+                    break
+                }
+                case "bluetooth":
+                {
+                    if (BluetoothService.available && BluetoothService.adapter) {
+                        BluetoothService.adapter.enabled = !BluetoothService.adapter.enabled
+                    }
+                    break
+                }
+                case "audioOutput":
+                {
+                    if (AudioService.sink && AudioService.sink.audio) {
+                        AudioService.sink.audio.muted = !AudioService.sink.audio.muted
+                    }
+                    break
+                }
+                case "audioInput":
+                {
+                    if (AudioService.source && AudioService.source.audio) {
+                        AudioService.source.audio.muted = !AudioService.source.audio.muted
+                    }
+                    break
+                }
+                }
+            }
+            onExpandClicked: {
+                if (root.editMode)
+                    return
+                root.expandClicked(widgetData, widgetIndex)
+            }
+            onWheelEvent: function (wheelEvent) {
+                if (root.editMode)
+                    return
+                const id = widgetData.id || ""
+                if (id === "audioOutput") {
+                    if (!AudioService.sink || !AudioService.sink.audio)
+                        return
+                    let delta = wheelEvent.angleDelta.y
+                    let currentVolume = AudioService.sink.audio.volume * 100
+                    let newVolume
+                    if (delta > 0)
+                        newVolume = Math.min(100, currentVolume + 5)
+                    else
+                        newVolume = Math.max(0, currentVolume - 5)
+                    AudioService.sink.audio.muted = false
+                    AudioService.sink.audio.volume = newVolume / 100
+                    wheelEvent.accepted = true
+                } else if (id === "audioInput") {
+                    if (!AudioService.source || !AudioService.source.audio)
+                        return
+                    let delta = wheelEvent.angleDelta.y
+                    let currentVolume = AudioService.source.audio.volume * 100
+                    let newVolume
+                    if (delta > 0)
+                        newVolume = Math.min(100, currentVolume + 5)
+                    else
+                        newVolume = Math.max(0, currentVolume - 5)
+                    AudioService.source.audio.muted = false
+                    AudioService.source.audio.volume = newVolume / 100
+                    wheelEvent.accepted = true
+                }
+            }
+        }
+    }
+
+    Component {
+        id: audioSliderComponent
+        Item {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            width: parent.width
+            height: 16
+
+            AudioSliderRow {
+                anchors.centerIn: parent
+                width: parent.width
+                height: 14
+                property color sliderTrackColor: Theme.surfaceContainerHigh
+            }
+        }
+    }
+
+    Component {
+        id: brightnessSliderComponent
+        Item {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            width: parent.width
+            height: 16
+
+            BrightnessSliderRow {
+                id: brightnessSliderRow
+                anchors.centerIn: parent
+                width: parent.width
+                height: 14
+                deviceName: widgetData.deviceName || ""
+                instanceId: widgetData.instanceId || ""
+                property color sliderTrackColor: Theme.surfaceContainerHigh
+
+                onIconClicked: {
+                    if (!root.editMode && DisplayService.devices && DisplayService.devices.length > 1) {
+                        root.expandClicked(widgetData, widgetIndex)
+                    }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: inputAudioSliderComponent
+        Item {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            width: parent.width
+            height: 16
+
+            InputAudioSliderRow {
+                anchors.centerIn: parent
+                width: parent.width
+                height: 14
+                property color sliderTrackColor: Theme.surfaceContainerHigh
+            }
+        }
+    }
+
+    Component {
+        id: batteryPillComponent
+        BatteryPill {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            width: parent.width
+            height: 60
+
+            onExpandClicked: {
+                if (!root.editMode) {
+                    root.expandClicked(widgetData, widgetIndex)
+                }
+            }
+        }
+    }
+
+    Component {
+        id: smallBatteryComponent
+        SmallBatteryButton {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            width: parent.width
+            height: 48
+
+            onClicked: {
+                if (!root.editMode) {
+                    root.expandClicked(widgetData, widgetIndex)
+                }
+            }
+        }
+    }
+
+    Component {
+        id: toggleButtonComponent
+        ToggleButton {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            width: parent.width
+            height: 60
+
+            iconName: {
+                switch (widgetData.id || "") {
+                case "nightMode":
+                    return DisplayService.nightModeEnabled ? "nightlight" : "dark_mode"
+                case "darkMode":
+                    return "contrast"
+                case "doNotDisturb":
+                    return SessionData.doNotDisturb ? "do_not_disturb_on" : "do_not_disturb_off"
+                case "idleInhibitor":
+                    return SessionService.idleInhibited ? "motion_sensor_active" : "motion_sensor_idle"
+                default:
+                    return "help"
+                }
+            }
+
+            text: {
+                switch (widgetData.id || "") {
+                case "nightMode":
+                    return "Night Mode"
+                case "darkMode":
+                    return SessionData.isLightMode ? "Light Mode" : "Dark Mode"
+                case "doNotDisturb":
+                    return "Do Not Disturb"
+                case "idleInhibitor":
+                    return SessionService.idleInhibited ? "Keeping Awake" : "Keep Awake"
+                default:
+                    return "Unknown"
+                }
+            }
+
+            iconRotation: {
+                if (widgetData.id !== "darkMode")
+                    return 0
+                if (darkModeTransitionPending) {
+                    return SessionData.isLightMode ? 180 : 0
+                }
+                return SessionData.isLightMode ? 180 : 0
+            }
+
+            isActive: {
+                switch (widgetData.id || "") {
+                case "nightMode":
+                    return DisplayService.nightModeEnabled || false
+                case "darkMode":
+                    return SessionData.isLightMode
+                case "doNotDisturb":
+                    return SessionData.doNotDisturb || false
+                case "idleInhibitor":
+                    return SessionService.idleInhibited || false
+                default:
+                    return false
+                }
+            }
+
+            enabled: !root.editMode
+
+            onClicked: {
+                if (root.editMode)
+                    return
+                switch (widgetData.id || "") {
+                case "nightMode":
+                {
+                    if (DisplayService.automationAvailable)
+                        DisplayService.toggleNightMode()
+                    break
+                }
+                case "darkMode":
+                {
+                    Theme.screenTransition()
+                    Theme.setLightMode(!SessionData.isLightMode)
+                    break
+                }
+                case "doNotDisturb":
+                {
+                    SessionData.setDoNotDisturb(!SessionData.doNotDisturb)
+                    break
+                }
+                case "idleInhibitor":
+                {
+                    SessionService.toggleIdleInhibit()
+                    break
+                }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: smallToggleComponent
+        SmallToggleButton {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            width: parent.width
+            height: 48
+
+            iconName: {
+                switch (widgetData.id || "") {
+                case "nightMode":
+                    return DisplayService.nightModeEnabled ? "nightlight" : "dark_mode"
+                case "darkMode":
+                    return "contrast"
+                case "doNotDisturb":
+                    return SessionData.doNotDisturb ? "do_not_disturb_on" : "do_not_disturb_off"
+                case "idleInhibitor":
+                    return SessionService.idleInhibited ? "motion_sensor_active" : "motion_sensor_idle"
+                default:
+                    return "help"
+                }
+            }
+
+            iconRotation: {
+                if (widgetData.id !== "darkMode")
+                    return 0
+                if (darkModeTransitionPending) {
+                    return SessionData.isLightMode ? 180 : 0
+                }
+                return SessionData.isLightMode ? 180 : 0
+            }
+
+            isActive: {
+                switch (widgetData.id || "") {
+                case "nightMode":
+                    return DisplayService.nightModeEnabled || false
+                case "darkMode":
+                    return SessionData.isLightMode
+                case "doNotDisturb":
+                    return SessionData.doNotDisturb || false
+                case "idleInhibitor":
+                    return SessionService.idleInhibited || false
+                default:
+                    return false
+                }
+            }
+
+            enabled: !root.editMode
+
+            onClicked: {
+                if (root.editMode)
+                    return
+                switch (widgetData.id || "") {
+                case "nightMode":
+                {
+                    if (DisplayService.automationAvailable)
+                        DisplayService.toggleNightMode()
+                    break
+                }
+                case "darkMode":
+                {
+                    Theme.screenTransition()
+                    Theme.setLightMode(!SessionData.isLightMode)
+                    break
+                }
+                case "doNotDisturb":
+                {
+                    SessionData.setDoNotDisturb(!SessionData.doNotDisturb)
+                    break
+                }
+                case "idleInhibitor":
+                {
+                    SessionService.toggleIdleInhibit()
+                    break
+                }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: diskUsagePillComponent
+        DiskUsagePill {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            width: parent.width
+            height: 60
+
+            mountPath: widgetData.mountPath || "/"
+            instanceId: widgetData.instanceId || ""
+
+            onExpandClicked: {
+                if (!root.editMode) {
+                    root.expandClicked(widgetData, widgetIndex)
+                }
+            }
+        }
+    }
+
+    Component {
+        id: colorPickerPillComponent
+        ColorPickerPill {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            width: parent.width
+            height: 60
+
+            colorPickerModal: root.colorPickerModal
+        }
+    }
+
+    Component {
+        id: builtinPluginWidgetComponent
+        Loader {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            property int widgetWidth: widgetData.width || 50
+            width: parent.width
+            height: 60
+
+            property var builtinInstance: null
+
+            Component.onCompleted: {
+                const id = widgetData.id || ""
+                if (id === "builtin_vpn") {
+                    if (root.model?.vpnLoader) {
+                        root.model.vpnLoader.active = true
+                    }
+                    builtinInstance = Qt.binding(() => root.model?.vpnBuiltinInstance)
+                }
+            }
+
+            sourceComponent: {
+                if (!builtinInstance)
+                    return null
+
+                const hasDetail = builtinInstance.ccDetailContent !== null
+
+                if (widgetWidth <= 25) {
+                    return builtinSmallToggleComponent
+                } else if (hasDetail) {
+                    return builtinCompoundPillComponent
+                } else {
+                    return builtinToggleComponent
+                }
+            }
+        }
+    }
+
+    Component {
+        id: builtinCompoundPillComponent
+        CompoundPill {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            property var builtinInstance: parent.builtinInstance
+
+            iconName: builtinInstance?.ccWidgetIcon || "extension"
+            primaryText: builtinInstance?.ccWidgetPrimaryText || "Built-in"
+            secondaryText: builtinInstance?.ccWidgetSecondaryText || ""
+            isActive: builtinInstance?.ccWidgetIsActive || false
+
+            onToggled: {
+                if (root.editMode)
+                    return
+                if (builtinInstance) {
+                    builtinInstance.ccWidgetToggled()
+                }
+            }
+
+            onExpandClicked: {
+                if (root.editMode)
+                    return
+                root.expandClicked(widgetData, widgetIndex)
+            }
+        }
+    }
+
+    Component {
+        id: builtinToggleComponent
+        ToggleButton {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            property var builtinInstance: parent.builtinInstance
+
+            iconName: builtinInstance?.ccWidgetIcon || "extension"
+            text: builtinInstance?.ccWidgetPrimaryText || "Built-in"
+            isActive: builtinInstance?.ccWidgetIsActive || false
+            enabled: !root.editMode
+
+            onClicked: {
+                if (root.editMode)
+                    return
+                if (builtinInstance) {
+                    builtinInstance.ccWidgetToggled()
+                }
+            }
+        }
+    }
+
+    Component {
+        id: builtinSmallToggleComponent
+        SmallToggleButton {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            property var builtinInstance: parent.builtinInstance
+
+            iconName: builtinInstance?.ccWidgetIcon || "extension"
+            isActive: builtinInstance?.ccWidgetIsActive || false
+            enabled: !root.editMode
+
+            onClicked: {
+                if (root.editMode)
+                    return
+                if (builtinInstance) {
+                    builtinInstance.ccWidgetToggled()
+                }
+            }
+        }
+    }
+
+    Component {
+        id: pluginWidgetComponent
+        Loader {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            property int widgetWidth: widgetData.width || 50
+            width: parent.width
+            height: 60
+
+            property var pluginInstance: null
+            property string pluginId: widgetData.id?.replace("plugin_", "") || ""
+
+            sourceComponent: {
+                if (!pluginInstance)
+                    return null
+
+                const hasDetail = pluginInstance.ccDetailContent !== null
+
+                if (widgetWidth <= 25) {
+                    return pluginSmallToggleComponent
+                } else if (hasDetail) {
+                    return pluginCompoundPillComponent
+                } else {
+                    return pluginToggleComponent
+                }
+            }
+
+            Component.onCompleted: {
+                Qt.callLater(() => {
+                                 const pluginComponent = PluginService.pluginWidgetComponents[pluginId]
+                                 if (pluginComponent) {
+                                     const instance = pluginComponent.createObject(null, {
+                                                                                       "pluginId": pluginId,
+                                                                                       "pluginService": PluginService,
+                                                                                       "visible": false,
+                                                                                       "width": 0,
+                                                                                       "height": 0
+                                                                                   })
+                                     if (instance) {
+                                         pluginInstance = instance
+                                     }
+                                 }
+                             })
+            }
+
+            Connections {
+                target: PluginService
+                function onPluginDataChanged(changedPluginId) {
+                    if (changedPluginId === pluginId && pluginInstance) {
+                        pluginInstance.loadPluginData()
+                    }
+                }
+            }
+
+            Component.onDestruction: {
+                if (pluginInstance) {
+                    pluginInstance.destroy()
+                }
+            }
+        }
+    }
+
+    Component {
+        id: pluginCompoundPillComponent
+        CompoundPill {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            property var pluginInstance: parent.pluginInstance
+
+            iconName: pluginInstance?.ccWidgetIcon || "extension"
+            primaryText: pluginInstance?.ccWidgetPrimaryText || "Plugin"
+            secondaryText: pluginInstance?.ccWidgetSecondaryText || ""
+            isActive: pluginInstance?.ccWidgetIsActive || false
+
+            onToggled: {
+                if (root.editMode)
+                    return
+                if (pluginInstance) {
+                    pluginInstance.ccWidgetToggled()
+                }
+            }
+
+            onExpandClicked: {
+                if (root.editMode)
+                    return
+                root.expandClicked(widgetData, widgetIndex)
+            }
+        }
+    }
+
+    Component {
+        id: pluginToggleComponent
+        ToggleButton {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            property var pluginInstance: parent.pluginInstance
+            property var widgetDef: root.model?.getWidgetForId(widgetData.id || "")
+
+            iconName: pluginInstance?.ccWidgetIcon || widgetDef?.icon || "extension"
+            text: pluginInstance?.ccWidgetPrimaryText || widgetDef?.text || "Plugin"
+            secondaryText: pluginInstance?.ccWidgetSecondaryText || ""
+            isActive: pluginInstance?.ccWidgetIsActive || false
+            enabled: !root.editMode
+
+            onClicked: {
+                if (root.editMode)
+                    return
+                if (pluginInstance) {
+                    pluginInstance.ccWidgetToggled()
+                }
+            }
+        }
+    }
+
+    Component {
+        id: pluginSmallToggleComponent
+        SmallToggleButton {
+            property var widgetData: parent.widgetData || {}
+            property int widgetIndex: parent.widgetIndex || 0
+            property var pluginInstance: parent.pluginInstance
+            property var widgetDef: root.model?.getWidgetForId(widgetData.id || "")
+
+            iconName: pluginInstance?.ccWidgetIcon || widgetDef?.icon || "extension"
+            isActive: pluginInstance?.ccWidgetIsActive || false
+            enabled: !root.editMode
+
+            onClicked: {
+                if (root.editMode)
+                    return
+                if (pluginInstance && pluginInstance.ccDetailContent) {
+                    root.expandClicked(widgetData, widgetIndex)
+                } else if (pluginInstance) {
+                    pluginInstance.ccWidgetToggled()
+                }
+            }
+        }
+    }
+}

Modules/ControlCenter/Components/DragDropWidgetWrapper.qml

@@ -0,0 +1,289 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    property bool editMode: false
+    property var widgetData: null
+    property int widgetIndex: -1
+    property bool isSlider: false
+    property Component widgetComponent: null
+    property real gridCellWidth: 100
+    property real gridCellHeight: 60
+    property int gridColumns: 4
+    property var gridLayout: null
+
+    z: dragArea.drag.active ? 10000 : 1
+
+    signal widgetMoved(int fromIndex, int toIndex)
+    signal removeWidget(int index)
+    signal toggleWidgetSize(int index)
+
+    width: {
+        const widgetWidth = widgetData?.width || 50
+        if (widgetWidth <= 25) return gridCellWidth
+        else if (widgetWidth <= 50) return gridCellWidth * 2
+        else if (widgetWidth <= 75) return gridCellWidth * 3
+        else return gridCellWidth * 4
+    }
+    height: isSlider ? 16 : gridCellHeight
+
+    Rectangle {
+        id: dragIndicator
+        anchors.fill: parent
+        color: "transparent"
+        border.color: Theme.primary
+        border.width: dragArea.drag.active ? 2 : 0
+        radius: Theme.cornerRadius
+        opacity: dragArea.drag.active ? 0.8 : 1.0
+        z: dragArea.drag.active ? 10000 : 1
+
+        Behavior on border.width {
+            NumberAnimation { duration: 150 }
+        }
+        Behavior on opacity {
+            NumberAnimation { duration: 150 }
+        }
+    }
+
+    Loader {
+        id: widgetLoader
+        anchors.fill: parent
+        sourceComponent: widgetComponent
+        property var widgetData: root.widgetData
+        property int widgetIndex: root.widgetIndex
+        property int globalWidgetIndex: root.widgetIndex
+        property int widgetWidth: root.widgetData?.width || 50
+
+
+        MouseArea {
+            id: editModeBlocker
+            anchors.fill: parent
+            enabled: root.editMode
+            acceptedButtons: Qt.AllButtons
+            onPressed: function(mouse) { mouse.accepted = true }
+            onWheel: function(wheel) { wheel.accepted = true }
+            z: 100
+        }
+    }
+
+    MouseArea {
+        id: dragArea
+        anchors.fill: parent
+        enabled: editMode
+        cursorShape: editMode ? Qt.OpenHandCursor : Qt.PointingHandCursor
+        drag.target: editMode ? root : null
+        drag.axis: Drag.XAndYAxis
+        drag.smoothed: true
+
+        onPressed: function(mouse) {
+            if (editMode) {
+                cursorShape = Qt.ClosedHandCursor
+                if (root.gridLayout && root.gridLayout.moveToTop) {
+                    root.gridLayout.moveToTop(root)
+                }
+            }
+        }
+
+        onReleased: function(mouse) {
+            if (editMode) {
+                cursorShape = Qt.OpenHandCursor
+                root.snapToGrid()
+            }
+        }
+    }
+
+    Drag.active: dragArea.drag.active
+    Drag.hotSpot.x: width / 2
+    Drag.hotSpot.y: height / 2
+
+    function swapIndices(i, j) {
+        if (i === j) return;
+        const arr = SettingsData.controlCenterWidgets;
+        if (!arr || i < 0 || j < 0 || i >= arr.length || j >= arr.length) return;
+
+        const copy = arr.slice();
+        const tmp = copy[i];
+        copy[i] = copy[j];
+        copy[j] = tmp;
+
+        SettingsData.setControlCenterWidgets(copy);
+    }
+
+    function snapToGrid() {
+        if (!editMode || !gridLayout) return
+
+        const globalPos = root.mapToItem(gridLayout, 0, 0)
+        const cellWidth = gridLayout.width / gridColumns
+        const cellHeight = gridCellHeight + Theme.spacingS
+
+        const centerX = globalPos.x + (root.width / 2)
+        const centerY = globalPos.y + (root.height / 2)
+
+        let targetCol = Math.max(0, Math.floor(centerX / cellWidth))
+        let targetRow = Math.max(0, Math.floor(centerY / cellHeight))
+
+        targetCol = Math.min(targetCol, gridColumns - 1)
+
+        const newIndex = findBestInsertionIndex(targetRow, targetCol)
+
+        if (newIndex !== widgetIndex && newIndex >= 0 && newIndex < (SettingsData.controlCenterWidgets?.length || 0)) {
+            swapIndices(widgetIndex, newIndex)
+        }
+    }
+
+    function findBestInsertionIndex(targetRow, targetCol) {
+        const widgets = SettingsData.controlCenterWidgets || [];
+        const n = widgets.length;
+        if (!n || widgetIndex < 0 || widgetIndex >= n) return -1;
+
+        function spanFor(width) {
+            const w = width ?? 50;
+            if (w <= 25) return 1;
+            if (w <= 50) return 2;
+            if (w <= 75) return 3;
+            return 4;
+        }
+
+        const cols = gridColumns || 4;
+
+        let row = 0, col = 0;
+        let draggedOrigKey = null;
+
+        const pos = [];
+
+        for (let i = 0; i < n; i++) {
+            const span = Math.min(spanFor(widgets[i].width), cols);
+
+            if (col + span > cols) {
+                row++;
+                col = 0;
+            }
+
+            const startCol = col;
+            const centerKey = row * cols + (startCol + (span - 1) / 2);
+
+            if (i === widgetIndex) {
+                draggedOrigKey = centerKey;
+            } else {
+                pos.push({ index: i, row, startCol, span, centerKey });
+            }
+
+            col += span;
+            if (col >= cols) {
+                row++;
+                col = 0;
+            }
+        }
+
+        if (pos.length === 0) return -1;
+
+        const centerColCoord = targetCol + 0.5;
+        const targetKey = targetRow * cols + centerColCoord;
+
+        for (let k = 0; k < pos.length; k++) {
+            const p = pos[k];
+            if (p.row === targetRow && centerColCoord >= p.startCol && centerColCoord < (p.startCol + p.span)) {
+                return p.index;
+            }
+        }
+
+        let lo = 0, hi = pos.length - 1;
+        if (targetKey <= pos[0].centerKey) return pos[0].index;
+        if (targetKey >= pos[hi].centerKey) return pos[hi].index;
+
+        while (lo <= hi) {
+            const mid = (lo + hi) >> 1;
+            const mk = pos[mid].centerKey;
+            if (targetKey < mk) hi = mid - 1;
+            else if (targetKey > mk) lo = mid + 1;
+            else return pos[mid].index;
+        }
+        const movingUp = (draggedOrigKey != null) ? (targetKey < draggedOrigKey) : false;
+        return (movingUp ? pos[lo].index : pos[hi].index);
+    }
+
+    Rectangle {
+        width: 16
+        height: 16
+        radius: 8
+        color: Theme.error
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.margins: -4
+        visible: editMode
+        z: 10
+
+        DankIcon {
+            anchors.centerIn: parent
+            name: "close"
+            size: 12
+            color: Theme.primaryText
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: removeWidget(widgetIndex)
+        }
+    }
+
+    SizeControls {
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.margins: -6
+        visible: editMode
+        z: 10
+        currentSize: root.widgetData?.width || 50
+        isSlider: root.isSlider
+        widgetIndex: root.widgetIndex
+        onSizeChanged: (newSize) => {
+            var widgets = SettingsData.controlCenterWidgets.slice()
+            if (widgetIndex >= 0 && widgetIndex < widgets.length) {
+                widgets[widgetIndex].width = newSize
+                SettingsData.setControlCenterWidgets(widgets)
+            }
+        }
+    }
+
+    Rectangle {
+        id: dragHandle
+        width: 16
+        height: 12
+        radius: 2
+        color: Theme.primary
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.margins: 4
+        visible: editMode
+        z: 15
+        opacity: dragArea.drag.active ? 1.0 : 0.7
+
+        DankIcon {
+            anchors.centerIn: parent
+            name: "drag_indicator"
+            size: 10
+            color: Theme.primaryText
+        }
+
+        Behavior on opacity {
+            NumberAnimation { duration: 150 }
+        }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: editMode ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
+        radius: Theme.cornerRadius
+        border.color: "transparent"
+        border.width: 0
+        z: -1
+
+        Behavior on color {
+            ColorAnimation { duration: Theme.shortDuration }
+        }
+    }
+}

Modules/ControlCenter/Components/EditControls.qml

@@ -0,0 +1,240 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Widgets
+
+Row {
+    id: root
+
+    property var availableWidgets: []
+    property Item popoutContent: null
+
+    signal addWidget(string widgetId)
+    signal resetToDefault()
+    signal clearAll()
+
+    height: 48
+    spacing: Theme.spacingS
+
+    onAddWidget: addWidgetPopup.close()
+
+    Popup {
+        id: addWidgetPopup
+        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
+        focus: true
+        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+
+        background: Rectangle {
+            color: Theme.surfaceContainer
+            border.color: Theme.primarySelected
+            border.width: 0
+            radius: Theme.cornerRadius
+        }
+
+        contentItem: Item {
+            anchors.fill: parent
+            anchors.margins: Theme.spacingL
+
+            Row {
+                id: headerRow
+                anchors.top: parent.top
+                anchors.left: parent.left
+                anchors.right: parent.right
+                spacing: Theme.spacingM
+
+                DankIcon {
+                    name: "add_circle"
+                    size: Theme.iconSize
+                    color: Theme.primary
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                Typography {
+                    text: I18n.tr("Add Widget")
+                    style: Typography.Style.Subtitle
+                    color: Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
+
+            DankListView {
+                anchors.top: headerRow.bottom
+                anchors.topMargin: Theme.spacingM
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                spacing: Theme.spacingS
+                clip: true
+                model: root.availableWidgets
+
+                delegate: Rectangle {
+                    width: 400 - Theme.spacingL * 2
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: widgetMouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceContainerHigh
+                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                    border.width: 0
+
+                    Row {
+                        anchors.fill: parent
+                        anchors.margins: Theme.spacingM
+                        spacing: Theme.spacingM
+
+                        DankIcon {
+                            name: modelData.icon
+                            size: Theme.iconSize
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        Column {
+                            anchors.verticalCenter: parent.verticalCenter
+                            spacing: 2
+                            width: 400 - Theme.spacingL * 2 - Theme.iconSize - Theme.spacingM * 3 - Theme.iconSize
+
+                            Typography {
+                                text: modelData.text
+                                style: Typography.Style.Body
+                                color: Theme.surfaceText
+                                elide: Text.ElideRight
+                                width: parent.width
+                            }
+
+                            Typography {
+                                text: modelData.description
+                                style: Typography.Style.Caption
+                                color: Theme.outline
+                                elide: Text.ElideRight
+                                width: parent.width
+                            }
+                        }
+
+                        DankIcon {
+                            name: "add"
+                            size: Theme.iconSize - 4
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+
+                    MouseArea {
+                        id: widgetMouseArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            root.addWidget(modelData.id)
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        width: (parent.width - Theme.spacingS * 2) / 3
+        height: 48
+        radius: Theme.cornerRadius
+        color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
+        border.color: Theme.primary
+        border.width: 0
+
+        Row {
+            anchors.centerIn: parent
+            spacing: Theme.spacingS
+
+            DankIcon {
+                name: "add"
+                size: Theme.iconSize - 2
+                color: Theme.primary
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            Typography {
+                text: I18n.tr("Add Widget")
+                style: Typography.Style.Button
+                color: Theme.primary
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: addWidgetPopup.open()
+        }
+    }
+
+    Rectangle {
+        width: (parent.width - Theme.spacingS * 2) / 3
+        height: 48
+        radius: Theme.cornerRadius
+        color: Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.12)
+        border.color: Theme.warning
+        border.width: 0
+
+        Row {
+            anchors.centerIn: parent
+            spacing: Theme.spacingS
+
+            DankIcon {
+                name: "settings_backup_restore"
+                size: Theme.iconSize - 2
+                color: Theme.warning
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            Typography {
+                text: I18n.tr("Defaults")
+                style: Typography.Style.Button
+                color: Theme.warning
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: root.resetToDefault()
+        }
+    }
+
+    Rectangle {
+        width: (parent.width - Theme.spacingS * 2) / 3
+        height: 48
+        radius: Theme.cornerRadius
+        color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12)
+        border.color: Theme.error
+        border.width: 0
+
+        Row {
+            anchors.centerIn: parent
+            spacing: Theme.spacingS
+
+            DankIcon {
+                name: "clear_all"
+                size: Theme.iconSize - 2
+                color: Theme.error
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            Typography {
+                text: I18n.tr("Reset")
+                style: Typography.Style.Button
+                color: Theme.error
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: root.clearAll()
+        }
+    }
+}

Modules/ControlCenter/Components/HeaderPane.qml

@@ -0,0 +1,114 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool editMode: false
+
+    signal powerButtonClicked()
+    signal lockRequested()
+    signal editModeToggled()
+    signal settingsButtonClicked()
+
+    implicitHeight: 70
+    radius: Theme.cornerRadius
+    color: Theme.surfaceContainerHigh
+    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
+                          Theme.outline.b, 0.08)
+    border.width: 0
+
+    Row {
+        anchors.left: parent.left
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.leftMargin: Theme.spacingL
+        anchors.rightMargin: Theme.spacingL
+        spacing: Theme.spacingM
+
+        DankCircularImage {
+            id: avatarContainer
+
+            width: 60
+            height: 60
+            imageSource: {
+                if (PortalService.profileImage === "")
+                    return ""
+
+                if (PortalService.profileImage.startsWith("/"))
+                    return "file://" + PortalService.profileImage
+
+                return PortalService.profileImage
+            }
+            fallbackIcon: "person"
+        }
+
+        Column {
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: 2
+
+            Typography {
+                text: UserInfoService.fullName
+                      || UserInfoService.username || "User"
+                style: Typography.Style.Subtitle
+                color: Theme.surfaceText
+            }
+
+            Typography {
+                text: (UserInfoService.uptime || "Unknown")
+                style: Typography.Style.Caption
+                color: Theme.surfaceVariantText
+            }
+        }
+    }
+
+    Row {
+        id: actionButtonsRow
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.rightMargin: Theme.spacingXS
+        spacing: Theme.spacingXS
+
+        DankActionButton {
+            buttonSize: 36
+            iconName: "lock"
+            iconSize: Theme.iconSize - 4
+            iconColor: Theme.surfaceText
+            backgroundColor: "transparent"
+            onClicked: {
+                root.lockRequested()
+            }
+        }
+
+        DankActionButton {
+            buttonSize: 36
+            iconName: "power_settings_new"
+            iconSize: Theme.iconSize - 4
+            iconColor: Theme.surfaceText
+            backgroundColor: "transparent"
+            onClicked: root.powerButtonClicked()
+        }
+
+        DankActionButton {
+            buttonSize: 36
+            iconName: "settings"
+            iconSize: Theme.iconSize - 4
+            iconColor: Theme.surfaceText
+            backgroundColor: "transparent"
+            onClicked: {
+                root.settingsButtonClicked()
+                settingsModal.show()
+            }
+        }
+
+        DankActionButton {
+            buttonSize: 36
+            iconName: editMode ? "done" : "edit"
+            iconSize: Theme.iconSize - 4
+            iconColor: editMode ? Theme.primary : Theme.surfaceText
+            backgroundColor: "transparent"
+            onClicked: root.editModeToggled()
+        }
+    }
+}

Modules/ControlCenter/Components/PowerButton.qml

@@ -0,0 +1,52 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property string iconName: ""
+    property string text: ""
+
+    signal pressed()
+
+    height: 34
+    radius: Theme.cornerRadius
+    color: mouseArea.containsMouse ? Qt.rgba(
+                                        Theme.primary.r,
+                                        Theme.primary.g,
+                                        Theme.primary.b,
+                                        0.12) : Qt.rgba(
+                                        Theme.surfaceVariant.r,
+                                        Theme.surfaceVariant.g,
+                                        Theme.surfaceVariant.b,
+                                        0.5)
+
+    Row {
+        anchors.centerIn: parent
+        spacing: Theme.spacingXS
+
+        DankIcon {
+            name: root.iconName
+            size: Theme.fontSizeSmall
+            color: mouseArea.containsMouse ? Theme.primary : Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Typography {
+            text: root.text
+            style: Typography.Style.Button
+            color: mouseArea.containsMouse ? Theme.primary : Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: root.pressed()
+    }
+}

Modules/ControlCenter/Components/SizeControls.qml

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

Modules/ControlCenter/Components/Typography.qml

@@ -0,0 +1,46 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+StyledText {
+    id: root
+
+    enum Style {
+        Title,
+        Subtitle,
+        Body,
+        Caption,
+        Button
+    }
+
+    property int style: Typography.Style.Body
+
+    font.pixelSize: {
+        switch (style) {
+        case Typography.Style.Title: return Theme.fontSizeXLarge
+        case Typography.Style.Subtitle: return Theme.fontSizeLarge
+        case Typography.Style.Body: return Theme.fontSizeMedium
+        case Typography.Style.Caption: return Theme.fontSizeSmall
+        case Typography.Style.Button: return Theme.fontSizeSmall
+        default: return Theme.fontSizeMedium
+        }
+    }
+
+    font.weight: {
+        switch (style) {
+        case Typography.Style.Title: return Font.Bold
+        case Typography.Style.Subtitle: return Font.Medium
+        case Typography.Style.Body: return Font.Normal
+        case Typography.Style.Caption: return Font.Normal
+        case Typography.Style.Button: return Font.Medium
+        default: return Font.Normal
+        }
+    }
+
+    color: {
+        switch (style) {
+        case Typography.Style.Caption: return Theme.surfaceVariantText
+        default: return Theme.surfaceText
+        }
+    }
+}

Modules/ControlCenter/ControlCenterPopout.qml

@@ -10,52 +10,62 @@ import qs.Common
 import qs.Modules.ControlCenter
 import qs.Modules.ControlCenter.Widgets
 import qs.Modules.ControlCenter.Details
-import qs.Modules.ControlCenter.Details 1.0 as Details
+import qs.Modules.DankBar
 import qs.Services
 import qs.Widgets
+import qs.Modules.ControlCenter.Components
+import qs.Modules.ControlCenter.Models
+import "./utils/state.js" as StateUtils
 
 DankPopout {
     id: root
 
     property string expandedSection: ""
-    property bool powerOptionsExpanded: false
-    property string triggerSection: "right"
     property var triggerScreen: null
+    property bool editMode: false
+    property int expandedWidgetIndex: -1
+    property var expandedWidgetData: null
+
+    signal lockRequested
+
+    function collapseAll() {
+        expandedSection = ""
+        expandedWidgetIndex = -1
+        expandedWidgetData = null
+    }
+
+    onEditModeChanged: {
+        if (editMode) {
+            collapseAll()
+        }
+    }
+
+    onVisibleChanged: {
+        if (!visible) {
+            collapseAll()
+        }
+    }
+
+    readonly property color _containerBg: Theme.surfaceContainerHigh
 
     function setTriggerPosition(x, y, width, section, screen) {
-        triggerX = x
-        triggerY = y
-        triggerWidth = width
-        triggerSection = section
-        triggerScreen = screen
+        StateUtils.setTriggerPosition(root, x, y, width, section, screen)
     }
 
     function openWithSection(section) {
-        if (shouldBeVisible) {
-            close()
-        } else {
-            expandedSection = section
-            open()
-        }
+        StateUtils.openWithSection(root, section)
     }
 
     function toggleSection(section) {
-        if (expandedSection === section) {
-            expandedSection = ""
-        } else {
-            expandedSection = section
-        }
+        StateUtils.toggleSection(root, section)
     }
 
-    signal powerActionRequested(string action, string title, string message)
-    signal lockRequested
-
     popupWidth: 550
     popupHeight: Math.min((triggerScreen?.height ?? 1080) - 100, contentLoader.item && contentLoader.item.implicitHeight > 0 ? contentLoader.item.implicitHeight + 20 : 400)
     triggerX: (triggerScreen?.width ?? 1920) - 600 - Theme.spacingL
-    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.spacingXS
+    triggerY: Theme.barHeight - 4 + SettingsData.dankBarSpacing
     triggerWidth: 80
-    positioning: "center"
+    positioning: ""
     screen: triggerScreen
     shouldBeVisible: false
     visible: shouldBeVisible
@@ -63,36 +73,44 @@ DankPopout {
     onShouldBeVisibleChanged: {
         if (shouldBeVisible) {
             Qt.callLater(() => {
-                NetworkService.autoRefreshEnabled = NetworkService.wifiEnabled
+                if (NetworkService.activeService) {
+                    NetworkService.activeService.autoRefreshEnabled = NetworkService.wifiEnabled
+                }
                 if (UserInfoService)
                     UserInfoService.getUptime()
             })
         } else {
             Qt.callLater(() => {
-                NetworkService.autoRefreshEnabled = false
-                if (BluetoothService.adapter
-                        && BluetoothService.adapter.discovering)
+                if (NetworkService.activeService) {
+                    NetworkService.activeService.autoRefreshEnabled = false
+                }
+                if (BluetoothService.adapter && BluetoothService.adapter.discovering)
                     BluetoothService.adapter.discovering = false
+                editMode = false
             })
         }
     }
 
+    WidgetModel {
+        id: widgetModel
+    }
+
     content: Component {
         Rectangle {
             id: controlContent
-            
+
             implicitHeight: mainColumn.implicitHeight + Theme.spacingM
             property alias bluetoothCodecSelector: bluetoothCodecSelector
-            
+
             color: {
-                const transparency = Theme.popupTransparency || 0.92
+                const transparency = Theme.popupTransparency
                 const surface = Theme.surfaceContainer || Qt.rgba(0.1, 0.1, 0.1, 1)
                 return Qt.rgba(surface.r, surface.g, surface.b, transparency)
             }
             radius: Theme.cornerRadius
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                   Theme.outline.b, 0.08)
-            border.width: 1
+            border.width: 0
             antialiasing: true
             smooth: true
 
@@ -103,614 +121,74 @@ DankPopout {
                 y: Theme.spacingL
                 spacing: Theme.spacingS
 
-                Rectangle {
+                HeaderPane {
+                    id: headerPane
                     width: parent.width
-                    height: 90
-                    radius: Theme.cornerRadius
-                    color: Qt.rgba(Theme.surfaceVariant.r,
-                                   Theme.surfaceVariant.g,
-                                   Theme.surfaceVariant.b,
-                                   Theme.getContentBackgroundAlpha() * 0.4)
-                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                                          Theme.outline.b, 0.08)
-                    border.width: 1
-
-                    Row {
-                        anchors.left: parent.left
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.leftMargin: Theme.spacingL
-                        anchors.rightMargin: Theme.spacingL
-                        spacing: Theme.spacingL
-
-                        Item {
-                            id: avatarContainer
-
-                            property bool hasImage: profileImageLoader.status === Image.Ready
-
-                            width: 64
-                            height: 64
-
-                            Rectangle {
-                                anchors.fill: parent
-                                radius: width / 2
-                                color: "transparent"
-                                border.color: Theme.primary
-                                border.width: 1
-                                visible: parent.hasImage
-                            }
-
-                            Image {
-                                id: profileImageLoader
-
-                                source: {
-                                    if (PortalService.profileImage === "")
-                                        return ""
-
-                                    if (PortalService.profileImage.startsWith(
-                                                "/"))
-                                        return "file://" + PortalService.profileImage
-
-                                    return PortalService.profileImage
-                                }
-                                smooth: true
-                                asynchronous: true
-                                mipmap: true
-                                cache: true
-                                visible: false
-                            }
-
-                            MultiEffect {
-                                anchors.fill: parent
-                                anchors.margins: 5
-                                source: profileImageLoader
-                                maskEnabled: true
-                                maskSource: circularMask
-                                visible: avatarContainer.hasImage
-                                maskThresholdMin: 0.5
-                                maskSpreadAtMin: 1
-                            }
-
-                            Item {
-                                id: circularMask
-
-                                width: 64 - 10
-                                height: 64 - 10
-                                layer.enabled: true
-                                layer.smooth: true
-                                visible: false
-
-                                Rectangle {
-                                    anchors.fill: parent
-                                    radius: width / 2
-                                    color: "black"
-                                    antialiasing: true
-                                }
-                            }
-
-                            Rectangle {
-                                anchors.fill: parent
-                                radius: width / 2
-                                color: Theme.primary
-                                visible: !parent.hasImage
-
-                                DankIcon {
-                                    anchors.centerIn: parent
-                                    name: "person"
-                                    size: Theme.iconSize + 8
-                                    color: Theme.primaryText
-                                }
-                            }
-
-                            DankIcon {
-                                anchors.centerIn: parent
-                                name: "warning"
-                                size: Theme.iconSize + 8
-                                color: Theme.primaryText
-                                visible: PortalService.profileImage !== ""
-                                         && profileImageLoader.status === Image.Error
-                            }
-                        }
-
-                        Column {
-                            anchors.verticalCenter: parent.verticalCenter
-                            spacing: Theme.spacingXS
-
-                            StyledText {
-                                text: UserInfoService.fullName
-                                      || UserInfoService.username || "User"
-                                font.pixelSize: Theme.fontSizeLarge
-                                color: Theme.surfaceText
-                                font.weight: Font.Medium
-                            }
-
-                            StyledText {
-                                text: (UserInfoService.uptime
-                                                    || "Unknown")
-                                font.pixelSize: Theme.fontSizeSmall
-                                color: Theme.surfaceVariantText
-                                font.weight: Font.Normal
+                    editMode: root.editMode
+                    onEditModeToggled: root.editMode = !root.editMode
+                    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)
                             }
                         }
                     }
-
-                    Row {
-                        anchors.right: parent.right
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.rightMargin: Theme.spacingL
-                        spacing: Theme.spacingS
-
-                        DankActionButton {
-                            buttonSize: 40
-                            iconName: "lock"
-                            iconSize: Theme.iconSize - 2
-                            iconColor: Theme.surfaceText
-                            backgroundColor: Qt.rgba(
-                                                 Theme.surfaceVariant.r,
-                                                 Theme.surfaceVariant.g,
-                                                 Theme.surfaceVariant.b,
-                                                 0.5)
-                            onClicked: {
-                                root.close()
-                                root.lockRequested()
-                            }
-                        }
-
-                        DankActionButton {
-                            buttonSize: 40
-                            iconName: root.powerOptionsExpanded ? "expand_less" : "power_settings_new"
-                            iconSize: Theme.iconSize - 2
-                            iconColor: Theme.surfaceText
-                            backgroundColor: Qt.rgba(
-                                                 Theme.surfaceVariant.r,
-                                                 Theme.surfaceVariant.g,
-                                                 Theme.surfaceVariant.b,
-                                                 0.5)
-                            onClicked: {
-                                root.powerOptionsExpanded = !root.powerOptionsExpanded
-                            }
-
-                        }
-
-                        DankActionButton {
-                            buttonSize: 40
-                            iconName: "settings"
-                            iconSize: Theme.iconSize - 2
-                            iconColor: Theme.surfaceText
-                            backgroundColor: Qt.rgba(
-                                                 Theme.surfaceVariant.r,
-                                                 Theme.surfaceVariant.g,
-                                                 Theme.surfaceVariant.b,
-                                                 0.5)
-                            onClicked: {
-                                root.close()
-                                settingsModal.show()
-                            }
-                        }
+                    onLockRequested: {
+                        root.close()
+                        root.lockRequested()
+                    }
+                    onSettingsButtonClicked: {
+                        root.close()
                     }
                 }
 
-                Item {
+                DragDropGrid {
+                    id: widgetGrid
                     width: parent.width
-                    implicitHeight: root.powerOptionsExpanded ? 60 : 0
-                    height: implicitHeight
-                    clip: true
-
-                Rectangle {
-                    width: parent.width
-                    height: 60
-                    radius: Theme.cornerRadius
-                    color: Qt.rgba(Theme.surfaceVariant.r,
-                                   Theme.surfaceVariant.g,
-                                   Theme.surfaceVariant.b,
-                                   Theme.getContentBackgroundAlpha() * 0.4)
-                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                                          Theme.outline.b, 0.08)
-                    border.width: root.powerOptionsExpanded ? 1 : 0
-                    opacity: root.powerOptionsExpanded ? 1 : 0
-                    clip: true
-
-                    Row {
-                        anchors.centerIn: parent
-                        spacing: Theme.spacingL
-                        visible: root.powerOptionsExpanded
-
-                        Rectangle {
-                            width: 100
-                            height: 34
-                            radius: Theme.cornerRadius
-                            color: logoutButton.containsMouse ? Qt.rgba(
-                                                                    Theme.primary.r,
-                                                                    Theme.primary.g,
-                                                                    Theme.primary.b,
-                                                                    0.12) : Qt.rgba(
-                                                                    Theme.surfaceVariant.r,
-                                                                    Theme.surfaceVariant.g,
-                                                                    Theme.surfaceVariant.b,
-                                                                    0.5)
-
-                            Row {
-                                anchors.centerIn: parent
-                                spacing: Theme.spacingXS
-
-                                DankIcon {
-                                    name: "logout"
-                                    size: Theme.fontSizeSmall
-                                    color: logoutButton.containsMouse ? Theme.primary : Theme.surfaceText
-                                    anchors.verticalCenter: parent.verticalCenter
-                                }
-
-                                StyledText {
-                                    text: "Logout"
-                                    font.pixelSize: Theme.fontSizeSmall
-                                    color: logoutButton.containsMouse ? Theme.primary : Theme.surfaceText
-                                    font.weight: Font.Medium
-                                    anchors.verticalCenter: parent.verticalCenter
-                                }
-                            }
-
-                            MouseArea {
-                                id: logoutButton
-
-                                anchors.fill: parent
-                                hoverEnabled: true
-                                cursorShape: Qt.PointingHandCursor
-                                onPressed: {
-                                    root.powerOptionsExpanded = false
-                                    root.close()
-                                    root.powerActionRequested(
-                                                "logout", "Logout",
-                                                "Are you sure you want to logout?")
-                                }
-                            }
-                        }
-
-                        Rectangle {
-                            width: 100
-                            height: 34
-                            radius: Theme.cornerRadius
-                            color: rebootButton.containsMouse ? Qt.rgba(
-                                                                    Theme.primary.r,
-                                                                    Theme.primary.g,
-                                                                    Theme.primary.b,
-                                                                    0.12) : Qt.rgba(
-                                                                    Theme.surfaceVariant.r,
-                                                                    Theme.surfaceVariant.g,
-                                                                    Theme.surfaceVariant.b,
-                                                                    0.5)
-
-                            Row {
-                                anchors.centerIn: parent
-                                spacing: Theme.spacingXS
-
-                                DankIcon {
-                                    name: "restart_alt"
-                                    size: Theme.fontSizeSmall
-                                    color: rebootButton.containsMouse ? Theme.primary : Theme.surfaceText
-                                    anchors.verticalCenter: parent.verticalCenter
-                                }
-
-                                StyledText {
-                                    text: "Restart"
-                                    font.pixelSize: Theme.fontSizeSmall
-                                    color: rebootButton.containsMouse ? Theme.primary : Theme.surfaceText
-                                    font.weight: Font.Medium
-                                    anchors.verticalCenter: parent.verticalCenter
-                                }
-                            }
-
-                            MouseArea {
-                                id: rebootButton
-
-                                anchors.fill: parent
-                                hoverEnabled: true
-                                cursorShape: Qt.PointingHandCursor
-                                onPressed: {
-                                    root.powerOptionsExpanded = false
-                                    root.close()
-                                    root.powerActionRequested(
-                                                "reboot", "Restart",
-                                                "Are you sure you want to restart?")
-                                }
-                            }
-                        }
-
-                        Rectangle {
-                            width: 100
-                            height: 34
-                            radius: Theme.cornerRadius
-                            color: suspendButton.containsMouse ? Qt.rgba(
-                                                                     Theme.primary.r,
-                                                                     Theme.primary.g,
-                                                                     Theme.primary.b,
-                                                                     0.12) : Qt.rgba(
-                                                                     Theme.surfaceVariant.r,
-                                                                     Theme.surfaceVariant.g,
-                                                                     Theme.surfaceVariant.b,
-                                                                     0.5)
-
-                            Row {
-                                anchors.centerIn: parent
-                                spacing: Theme.spacingXS
-
-                                DankIcon {
-                                    name: "bedtime"
-                                    size: Theme.fontSizeSmall
-                                    color: suspendButton.containsMouse ? Theme.primary : Theme.surfaceText
-                                    anchors.verticalCenter: parent.verticalCenter
-                                }
-
-                                StyledText {
-                                    text: "Suspend"
-                                    font.pixelSize: Theme.fontSizeSmall
-                                    color: suspendButton.containsMouse ? Theme.primary : Theme.surfaceText
-                                    font.weight: Font.Medium
-                                    anchors.verticalCenter: parent.verticalCenter
-                                }
-                            }
-
-                            MouseArea {
-                                id: suspendButton
-
-                                anchors.fill: parent
-                                hoverEnabled: true
-                                cursorShape: Qt.PointingHandCursor
-                                onPressed: {
-                                    root.powerOptionsExpanded = false
-                                    root.close()
-                                    root.powerActionRequested(
-                                                "suspend", "Suspend",
-                                                "Are you sure you want to suspend?")
-                                }
-                            }
-                        }
-
-                        Rectangle {
-                            width: 100
-                            height: 34
-                            radius: Theme.cornerRadius
-                            color: shutdownButton.containsMouse ? Qt.rgba(
-                                                                      Theme.primary.r,
-                                                                      Theme.primary.g,
-                                                                      Theme.primary.b,
-                                                                      0.12) : Qt.rgba(
-                                                                      Theme.surfaceVariant.r,
-                                                                      Theme.surfaceVariant.g,
-                                                                      Theme.surfaceVariant.b,
-                                                                      0.5)
-
-                            Row {
-                                anchors.centerIn: parent
-                                spacing: Theme.spacingXS
-
-                                DankIcon {
-                                    name: "power_settings_new"
-                                    size: Theme.fontSizeSmall
-                                    color: shutdownButton.containsMouse ? Theme.primary : Theme.surfaceText
-                                    anchors.verticalCenter: parent.verticalCenter
-                                }
-
-                                StyledText {
-                                    text: "Shutdown"
-                                    font.pixelSize: Theme.fontSizeSmall
-                                    color: shutdownButton.containsMouse ? Theme.primary : Theme.surfaceText
-                                    font.weight: Font.Medium
-                                    anchors.verticalCenter: parent.verticalCenter
-                                }
-                            }
-
-                            MouseArea {
-                                id: shutdownButton
-
-                                anchors.fill: parent
-                                hoverEnabled: true
-                                cursorShape: Qt.PointingHandCursor
-                                onPressed: {
-                                    root.powerOptionsExpanded = false
-                                    root.close()
-                                    root.powerActionRequested(
-                                                "poweroff", "Shutdown",
-                                                "Are you sure you want to shutdown?")
-                                }
-                            }
+                    editMode: root.editMode
+                    expandedSection: root.expandedSection
+                    expandedWidgetIndex: root.expandedWidgetIndex
+                    expandedWidgetData: root.expandedWidgetData
+                    model: widgetModel
+                    bluetoothCodecSelector: bluetoothCodecSelector
+                    colorPickerModal: root.colorPickerModal
+                    onExpandClicked: (widgetData, globalIndex) => {
+                        root.expandedWidgetIndex = globalIndex
+                        root.expandedWidgetData = widgetData
+                        if (widgetData.id === "diskUsage") {
+                            root.toggleSection("diskUsage_" + (widgetData.instanceId || "default"))
+                        } else if (widgetData.id === "brightnessSlider") {
+                            root.toggleSection("brightnessSlider_" + (widgetData.instanceId || "default"))
+                        } else {
+                            root.toggleSection(widgetData.id)
                         }
                     }
+                    onRemoveWidget: (index) => widgetModel.removeWidget(index)
+                    onMoveWidget: (fromIndex, toIndex) => widgetModel.moveWidget(fromIndex, toIndex)
+                    onToggleWidgetSize: (index) => widgetModel.toggleWidgetSize(index)
+                    onCollapseRequested: root.collapseAll()
                 }
 
-                }
-
-                Item {
+                EditControls {
                     width: parent.width
-                    height: audioSliderRow.implicitHeight
-                    
-                    Row {
-                        id: audioSliderRow
-                        x: -Theme.spacingS
-                        width: parent.width + Theme.spacingS * 2
-                        spacing: Theme.spacingM
-
-                        AudioSliderRow {
-                            width: SettingsData.hideBrightnessSlider ? parent.width - Theme.spacingM : (parent.width - Theme.spacingM) / 2
-                        }
-
-                        Item {
-                            width: (parent.width - Theme.spacingM) / 2
-                            height: parent.height
-                            visible: !SettingsData.hideBrightnessSlider
-                            
-                            BrightnessSliderRow {
-                                width: parent.width
-                                height: parent.height
-                                x: -Theme.spacingS
-                            }
-                        }
-                    }
-                }
-
-                Row {
-                    width: parent.width
-                    spacing: Theme.spacingM
-
-                    NetworkPill {
-                        width: (parent.width - Theme.spacingM) / 2
-                        expanded: root.expandedSection === "network"
-                        onClicked: {
-                            if (NetworkService.wifiToggling) {
-                                return
-                            }
-                            if (NetworkService.networkStatus === "ethernet") {
-                                if (NetworkService.ethernetConnected && !NetworkService.wifiEnabled) {
-                                    NetworkService.toggleWifiRadio()
-                                    return
-                                }
-                                root.toggleSection("network")
-                                return
-                            }
-                            if (NetworkService.networkStatus === "wifi") {
-                                if (NetworkService.ethernetConnected) {
-                                    NetworkService.toggleWifiRadio()
-                                    return
-                                }
-                                NetworkService.disconnectWifi()
-                                return
-                            }
-                            if (!NetworkService.wifiEnabled) {
-                                NetworkService.toggleWifiRadio()
-                                return
-                            }
-                            if (NetworkService.wifiEnabled && NetworkService.networkStatus === "disconnected") {
-                                root.toggleSection("network")
-                            }
-                        }
-                        onExpandClicked: root.toggleSection("network")
-                    }
-
-                    BluetoothPill {
-                        width: (parent.width - Theme.spacingM) / 2
-                        expanded: root.expandedSection === "bluetooth"
-                        onClicked: {
-                            if (BluetoothService.adapter)
-                                BluetoothService.adapter.enabled = !BluetoothService.adapter.enabled
-                        }
-                        onExpandClicked: root.toggleSection("bluetooth")
-                        visible: BluetoothService.available
-                    }
-                }
-
-                Loader {
-                    width: parent.width
-                    active: root.expandedSection === "network" || root.expandedSection === "bluetooth"
-                    visible: active
-                    sourceComponent: DetailView {
-                        width: parent.width
-                        isVisible: true
-                        title: {
-                            switch (root.expandedSection) {
-                            case "network": return "Network Settings"
-                            case "bluetooth": return "Bluetooth Settings"
-                            default: return ""
-                            }
-                        }
-                        content: {
-                            switch (root.expandedSection) {
-                            case "network": return networkDetailComponent
-                            case "bluetooth": return bluetoothDetailComponent
-                            default: return null
-                            }
-                        }
-                        contentHeight: 250
-                    }
-                }
-
-                Row {
-                    width: parent.width
-                    spacing: Theme.spacingM
-
-                    AudioOutputPill {
-                        width: (parent.width - Theme.spacingM) / 2
-                        expanded: root.expandedSection === "audio_output"
-                        onClicked: {
-                            if (AudioService.sink) {
-                                AudioService.sink.audio.muted = !AudioService.sink.audio.muted
-                            }
-                        }
-                        onExpandClicked: root.toggleSection("audio_output")
-                    }
-
-                    AudioInputPill {
-                        width: (parent.width - Theme.spacingM) / 2
-                        expanded: root.expandedSection === "audio_input"
-                        onClicked: {
-                            if (AudioService.source) {
-                                AudioService.source.audio.muted = !AudioService.source.audio.muted
-                            }
-                        }
-                        onExpandClicked: root.toggleSection("audio_input")
-                    }
-                }
-
-                Loader {
-                    width: parent.width
-                    active: root.expandedSection === "audio_output" || root.expandedSection === "audio_input"
-                    visible: active
-                    sourceComponent: DetailView {
-                        width: parent.width
-                        isVisible: true
-                        title: {
-                            switch (root.expandedSection) {
-                            case "audio_output": return "Audio Output"
-                            case "audio_input": return "Audio Input"
-                            default: return ""
-                            }
-                        }
-                        content: {
-                            switch (root.expandedSection) {
-                            case "audio_output": return audioOutputDetailComponent
-                            case "audio_input": return audioInputDetailComponent
-                            default: return null
-                            }
-                        }
-                        contentHeight: 250
-                    }
-                }
-
-                Row {
-                    width: parent.width
-                    spacing: Theme.spacingM
-
-                    ToggleButton {
-                        width: (parent.width - Theme.spacingM) / 2
-                        iconName: DisplayService.nightModeEnabled ? "nightlight" : "dark_mode"
-                        text: "Night Mode"
-                        secondaryText: SessionData.nightModeAutoEnabled ? "Auto" : (DisplayService.nightModeEnabled ? "On" : "Off")
-                        isActive: DisplayService.nightModeEnabled
-                        enabled: DisplayService.automationAvailable
-                        onClicked: DisplayService.toggleNightMode()
-
-                        DankIcon {
-                            anchors.top: parent.top
-                            anchors.right: parent.right
-                            anchors.topMargin: Theme.spacingS
-                            anchors.rightMargin: Theme.spacingS
-                            name: "schedule"
-                            size: 12
-                            color: Theme.primary
-                            visible: SessionData.nightModeAutoEnabled
-                            opacity: 0.8
-                        }
-                    }
-
-                    ToggleButton {
-                        width: (parent.width - Theme.spacingM) / 2
-                        iconName: SessionData.isLightMode ? "light_mode" : "palette"
-                        text: "Theme"
-                        secondaryText: SessionData.isLightMode ? "Light" : "Dark"
-                        isActive: true
-                        onClicked: Theme.toggleLightMode()
+                    visible: editMode
+                    popoutContent: controlContent
+                    availableWidgets: {
+                        if (!editMode) return []
+                        const existingIds = (SettingsData.controlCenterWidgets || []).map(w => w.id)
+                        const allWidgets = widgetModel.baseWidgetDefinitions.concat(widgetModel.getPluginWidgets())
+                        return allWidgets.filter(w => w.allowMultiple || !existingIds.includes(w.id))
                     }
+                    onAddWidget: (widgetId) => widgetModel.addWidget(widgetId)
+                    onResetToDefault: () => widgetModel.resetToDefault()
+                    onClearAll: () => widgetModel.clearAll()
                 }
             }
-            
-            Details.BluetoothCodecSelector {
+
+            BluetoothCodecSelector {
                 id: bluetoothCodecSelector
                 anchors.fill: parent
                 z: 10000
@@ -747,4 +225,12 @@ DankPopout {
         id: audioInputDetailComponent
         AudioInputDetail {}
     }
-}
+
+    Component {
+        id: batteryDetailComponent
+        BatteryDetail {}
+    }
+
+    property var colorPickerModal: null
+    property var powerMenuModalLoader: null
+}

Modules/ControlCenter/Details/AudioInputDetail.qml

@@ -7,11 +7,16 @@ import qs.Services
 import qs.Widgets
 
 Rectangle {
-    implicitHeight: headerRow.height + volumeSlider.height + audioContent.height + Theme.spacingM
+    property bool hasInputVolumeSliderInCC: {
+        const widgets = SettingsData.controlCenterWidgets || []
+        return widgets.some(widget => widget.id === "inputVolumeSlider")
+    }
+
+    implicitHeight: headerRow.height + (hasInputVolumeSliderInCC ? 0 : volumeSlider.height) + audioContent.height + Theme.spacingM
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.6)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 1
+    border.width: 0
     
     Row {
         id: headerRow
@@ -25,7 +30,7 @@ Rectangle {
         
         StyledText {
             id: headerText
-            text: "Input Devices"
+            text: I18n.tr("Input Devices")
             font.pixelSize: Theme.fontSizeLarge
             color: Theme.surfaceText
             font.weight: Font.Medium
@@ -33,7 +38,7 @@ Rectangle {
         }
     }
     
-    DankSlider {
+    Row {
         id: volumeSlider
         anchors.left: parent.left
         anchors.right: parent.right
@@ -42,34 +47,60 @@ Rectangle {
         anchors.rightMargin: Theme.spacingM
         anchors.topMargin: Theme.spacingXS
         height: 35
-        value: AudioService.source && AudioService.source.audio ? Math.round(AudioService.source.audio.volume * 100) : 0
-        minimum: 0
-        maximum: 100
-        leftIcon: {
-            if (!AudioService.source || !AudioService.source.audio) return "mic_off"
-            let muted = AudioService.source.audio.muted
-            return muted ? "mic_off" : "mic"
-        }
-        rightIcon: "volume_up"
-        enabled: AudioService.source && AudioService.source.audio
-        unit: "%"
-        showValue: true
-        visible: AudioService.source && AudioService.source.audio
-        
-        onSliderValueChanged: function(newValue) {
-            if (AudioService.source && AudioService.source.audio) {
-                AudioService.source.audio.volume = newValue / 100
+        spacing: 0
+        visible: !hasInputVolumeSliderInCC
+
+        Rectangle {
+            width: Theme.iconSize + Theme.spacingS * 2
+            height: Theme.iconSize + Theme.spacingS * 2
+            anchors.verticalCenter: parent.verticalCenter
+            radius: (Theme.iconSize + Theme.spacingS * 2) / 2
+            color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+            MouseArea {
+                id: iconArea
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    if (AudioService.source && AudioService.source.audio) {
+                        AudioService.source.audio.muted = !AudioService.source.audio.muted
+                    }
+                }
+            }
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: {
+                    if (!AudioService.source || !AudioService.source.audio) return "mic_off"
+                    let muted = AudioService.source.audio.muted
+                    return muted ? "mic_off" : "mic"
+                }
+                size: Theme.iconSize
+                color: AudioService.source && AudioService.source.audio && !AudioService.source.audio.muted && AudioService.source.audio.volume > 0 ? Theme.primary : Theme.surfaceText
             }
         }
-        
-        MouseArea {
-            anchors.left: parent.left
+
+        DankSlider {
+            readonly property real actualVolumePercent: AudioService.source && AudioService.source.audio ? Math.round(AudioService.source.audio.volume * 100) : 0
+
             anchors.verticalCenter: parent.verticalCenter
-            width: Theme.iconSize + Theme.spacingS * 2
-            height: parent.height
-            onClicked: {
+            width: parent.width - (Theme.iconSize + Theme.spacingS * 2)
+            enabled: AudioService.source && AudioService.source.audio
+            minimum: 0
+            maximum: 100
+            value: AudioService.source && AudioService.source.audio ? Math.min(100, Math.round(AudioService.source.audio.volume * 100)) : 0
+            showValue: true
+            unit: "%"
+            valueOverride: actualVolumePercent
+            thumbOutlineColor: Theme.surfaceVariant
+
+            onSliderValueChanged: function(newValue) {
                 if (AudioService.source && AudioService.source.audio) {
-                    AudioService.source.audio.muted = !AudioService.source.audio.muted
+                    AudioService.source.audio.volume = newValue / 100
+                    if (newValue > 0 && AudioService.source.audio.muted) {
+                        AudioService.source.audio.muted = false
+                    }
                 }
             }
         }
@@ -77,12 +108,12 @@ Rectangle {
     
     DankFlickable {
         id: audioContent
-        anchors.top: volumeSlider.bottom
+        anchors.top: hasInputVolumeSliderInCC ? headerRow.bottom : volumeSlider.bottom
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         anchors.margins: Theme.spacingM
-        anchors.topMargin: Theme.spacingS
+        anchors.topMargin: hasInputVolumeSliderInCC ? Theme.spacingM : Theme.spacingS
         contentHeight: audioColumn.height
         clip: true
         
@@ -103,9 +134,9 @@ Rectangle {
                     width: parent.width
                     height: 50
                     radius: Theme.cornerRadius
-                    color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, index % 2 === 0 ? 0.3 : 0.2)
+                    color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.surfaceContainerHighest
                     border.color: modelData === AudioService.source ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: modelData === AudioService.source ? 2 : 1
+                    border.width: 0
                     
                     Row {
                         anchors.left: parent.left
@@ -163,14 +194,6 @@ Rectangle {
                             }
                         }
                     }
-                    
-                    Behavior on color {
-                        ColorAnimation { duration: Theme.shortDuration }
-                    }
-                    
-                    Behavior on border.color {
-                        ColorAnimation { duration: Theme.shortDuration }
-                    }
                 }
             }
         }

Modules/ControlCenter/Details/AudioOutputDetail.qml

@@ -7,11 +7,16 @@ import qs.Services
 import qs.Widgets
 
 Rectangle {
-    implicitHeight: headerRow.height + audioContent.height + Theme.spacingM
+    property bool hasVolumeSliderInCC: {
+        const widgets = SettingsData.controlCenterWidgets || []
+        return widgets.some(widget => widget.id === "volumeSlider")
+    }
+
+    implicitHeight: headerRow.height + (!hasVolumeSliderInCC ? volumeSlider.height : 0) + audioContent.height + Theme.spacingM
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.6)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 1
+    border.width: 0
     
     Row {
         id: headerRow
@@ -25,22 +30,95 @@ Rectangle {
         
         StyledText {
             id: headerText
-            text: "Audio Devices"
+            text: I18n.tr("Audio Devices")
             font.pixelSize: Theme.fontSizeLarge
             color: Theme.surfaceText
             font.weight: Font.Medium
             anchors.verticalCenter: parent.verticalCenter
         }
     }
-    
+
+    Row {
+        id: volumeSlider
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: headerRow.bottom
+        anchors.leftMargin: Theme.spacingM
+        anchors.rightMargin: Theme.spacingM
+        anchors.topMargin: Theme.spacingXS
+        height: 35
+        spacing: 0
+        visible: !hasVolumeSliderInCC
+
+        Rectangle {
+            width: Theme.iconSize + Theme.spacingS * 2
+            height: Theme.iconSize + Theme.spacingS * 2
+            anchors.verticalCenter: parent.verticalCenter
+            radius: (Theme.iconSize + Theme.spacingS * 2) / 2
+            color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+            MouseArea {
+                id: iconArea
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    if (AudioService.sink && AudioService.sink.audio) {
+                        AudioService.sink.audio.muted = !AudioService.sink.audio.muted
+                    }
+                }
+            }
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: {
+                    if (!AudioService.sink || !AudioService.sink.audio) return "volume_off"
+                    let muted = AudioService.sink.audio.muted
+                    let volume = AudioService.sink.audio.volume
+                    if (muted || volume === 0.0) return "volume_off"
+                    if (volume <= 0.33) return "volume_down"
+                    if (volume <= 0.66) return "volume_up"
+                    return "volume_up"
+                }
+                size: Theme.iconSize
+                color: AudioService.sink && AudioService.sink.audio && !AudioService.sink.audio.muted && AudioService.sink.audio.volume > 0 ? Theme.primary : Theme.surfaceText
+            }
+        }
+
+        DankSlider {
+            readonly property real actualVolumePercent: AudioService.sink && AudioService.sink.audio ? Math.round(AudioService.sink.audio.volume * 100) : 0
+
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width - (Theme.iconSize + Theme.spacingS * 2)
+            enabled: AudioService.sink && AudioService.sink.audio
+            minimum: 0
+            maximum: 100
+            value: AudioService.sink && AudioService.sink.audio ? Math.min(100, Math.round(AudioService.sink.audio.volume * 100)) : 0
+            showValue: true
+            unit: "%"
+            valueOverride: actualVolumePercent
+            thumbOutlineColor: Theme.surfaceVariant
+
+            onSliderValueChanged: function(newValue) {
+                if (AudioService.sink && AudioService.sink.audio) {
+                    AudioService.sink.audio.volume = newValue / 100
+                    if (newValue > 0 && AudioService.sink.audio.muted) {
+                        AudioService.sink.audio.muted = false
+                    }
+                    AudioService.volumeChanged()
+                }
+            }
+        }
+    }
+
     DankFlickable {
         id: audioContent
-        anchors.top: headerRow.bottom
+        anchors.top: volumeSlider.visible ? volumeSlider.bottom : headerRow.bottom
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         anchors.margins: Theme.spacingM
-        anchors.topMargin: Theme.spacingM
+        anchors.topMargin: volumeSlider.visible ? Theme.spacingS : Theme.spacingM
         contentHeight: audioColumn.height
         clip: true
         
@@ -61,9 +139,9 @@ Rectangle {
                     width: parent.width
                     height: 50
                     radius: Theme.cornerRadius
-                    color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, index % 2 === 0 ? 0.3 : 0.2)
+                    color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.surfaceContainerHighest
                     border.color: modelData === AudioService.sink ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: modelData === AudioService.sink ? 2 : 1
+                    border.width: 0
                     
                     Row {
                         anchors.left: parent.left
@@ -123,14 +201,6 @@ Rectangle {
                             }
                         }
                     }
-                    
-                    Behavior on color {
-                        ColorAnimation { duration: Theme.shortDuration }
-                    }
-                    
-                    Behavior on border.color {
-                        ColorAnimation { duration: Theme.shortDuration }
-                    }
                 }
             }
         }

Modules/ControlCenter/Details/BatteryDetail.qml

@@ -0,0 +1,258 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Services.UPower
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    implicitHeight: contentColumn.implicitHeight + Theme.spacingL * 2
+    radius: Theme.cornerRadius
+    color: Theme.surfaceContainerHigh
+    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.width: 0
+
+    function isActiveProfile(profile) {
+        if (typeof PowerProfiles === "undefined") {
+            return false
+        }
+        return PowerProfiles.profile === profile
+    }
+
+    function setProfile(profile) {
+        if (typeof PowerProfiles === "undefined") {
+            ToastService.showError("power-profiles-daemon not available")
+            return
+        }
+        PowerProfiles.profile = profile
+        if (PowerProfiles.profile !== profile) {
+            ToastService.showError("Failed to set power profile")
+        }
+    }
+
+    Column {
+        id: contentColumn
+        width: parent.width - Theme.spacingL * 2
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.margins: Theme.spacingL
+        spacing: Theme.spacingL
+
+        Row {
+            id: headerRow
+            width: parent.width
+            height: 48
+            spacing: Theme.spacingM
+
+            DankIcon {
+                name: BatteryService.getBatteryIcon()
+                size: Theme.iconSizeLarge
+                color: {
+                    if (BatteryService.isLowBattery && !BatteryService.isCharging)
+                        return Theme.error
+                    if (BatteryService.isCharging || BatteryService.isPluggedIn)
+                        return Theme.primary
+                    return Theme.surfaceText
+                }
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            Column {
+                spacing: Theme.spacingXS
+                anchors.verticalCenter: parent.verticalCenter
+                width: parent.width - Theme.iconSizeLarge - Theme.spacingM
+
+                Row {
+                    spacing: Theme.spacingS
+
+                    StyledText {
+                        text: BatteryService.batteryAvailable ? `${BatteryService.batteryLevel}%` : "Power"
+                        font.pixelSize: Theme.fontSizeXLarge
+                        color: {
+                            if (BatteryService.isLowBattery && !BatteryService.isCharging) {
+                                return Theme.error
+                            }
+                            if (BatteryService.isCharging) {
+                                return Theme.primary
+                            }
+                            return Theme.surfaceText
+                        }
+                        font.weight: Font.Bold
+                    }
+
+                    StyledText {
+                        text: BatteryService.batteryAvailable ? BatteryService.batteryStatus : "Management"
+                        font.pixelSize: Theme.fontSizeLarge
+                        color: {
+                            if (BatteryService.isLowBattery && !BatteryService.isCharging) {
+                                return Theme.error
+                            }
+                            if (BatteryService.isCharging) {
+                                return Theme.primary
+                            }
+                            return Theme.surfaceText
+                        }
+                        font.weight: Font.Medium
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+                }
+
+                StyledText {
+                    text: {
+                        if (!BatteryService.batteryAvailable) return "Power profile management available"
+                        const time = BatteryService.formatTimeRemaining()
+                        if (time !== "Unknown") {
+                            return BatteryService.isCharging ? `Time until full: ${time}` : `Time remaining: ${time}`
+                        }
+                        return ""
+                    }
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.surfaceTextMedium
+                    visible: text.length > 0
+                    elide: Text.ElideRight
+                    width: parent.width
+                }
+            }
+        }
+
+        Row {
+            width: parent.width
+            spacing: Theme.spacingM
+            visible: BatteryService.batteryAvailable
+
+            StyledRect {
+                width: (parent.width - Theme.spacingM) / 2
+                height: 64
+                radius: Theme.cornerRadius
+                color: Theme.surfaceContainerHighest
+                border.width: 0
+
+                Column {
+                    anchors.centerIn: parent
+                    spacing: Theme.spacingXS
+
+                    StyledText {
+                        text: I18n.tr("Health")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.primary
+                        font.weight: Font.Medium
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+
+                    StyledText {
+                        text: BatteryService.batteryHealth
+                        font.pixelSize: Theme.fontSizeLarge
+                        color: {
+                            if (BatteryService.batteryHealth === "N/A") {
+                                return Theme.surfaceText
+                            }
+                            const healthNum = parseInt(BatteryService.batteryHealth)
+                            return healthNum < 80 ? Theme.error : Theme.surfaceText
+                        }
+                        font.weight: Font.Bold
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+                }
+            }
+
+            StyledRect {
+                width: (parent.width - Theme.spacingM) / 2
+                height: 64
+                radius: Theme.cornerRadius
+                color: Theme.surfaceContainerHighest
+                border.width: 0
+
+                Column {
+                    anchors.centerIn: parent
+                    spacing: Theme.spacingXS
+
+                    StyledText {
+                        text: I18n.tr("Capacity")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.primary
+                        font.weight: Font.Medium
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+
+                    StyledText {
+                        text: BatteryService.batteryCapacity > 0 ? `${BatteryService.batteryCapacity.toFixed(1)} Wh` : "Unknown"
+                        font.pixelSize: Theme.fontSizeLarge
+                        color: Theme.surfaceText
+                        font.weight: Font.Bold
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+                }
+            }
+        }
+
+        DankButtonGroup {
+            property var profileModel: (typeof PowerProfiles !== "undefined") ? [PowerProfile.PowerSaver, PowerProfile.Balanced].concat(PowerProfiles.hasPerformanceProfile ? [PowerProfile.Performance] : []) : [PowerProfile.PowerSaver, PowerProfile.Balanced, PowerProfile.Performance]
+            property int currentProfileIndex: {
+                if (typeof PowerProfiles === "undefined") return 1
+                return profileModel.findIndex(profile => isActiveProfile(profile))
+            }
+
+            model: profileModel.map(profile => Theme.getPowerProfileLabel(profile))
+            currentIndex: currentProfileIndex
+            selectionMode: "single"
+            anchors.horizontalCenter: parent.horizontalCenter
+            onSelectionChanged: (index, selected) => {
+                if (!selected) return
+                setProfile(profileModel[index])
+            }
+        }
+
+        StyledRect {
+            width: parent.width
+            height: degradationContent.implicitHeight + Theme.spacingL * 2
+            radius: Theme.cornerRadius
+            color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12)
+            border.color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.3)
+            border.width: 0
+            visible: (typeof PowerProfiles !== "undefined") && PowerProfiles.degradationReason !== PerformanceDegradationReason.None
+
+            Column {
+                id: degradationContent
+                width: parent.width - Theme.spacingL * 2
+                anchors.left: parent.left
+                anchors.top: parent.top
+                anchors.margins: Theme.spacingL
+                spacing: Theme.spacingS
+
+                Row {
+                    width: parent.width
+                    spacing: Theme.spacingM
+
+                    DankIcon {
+                        name: "warning"
+                        size: Theme.iconSize
+                        color: Theme.error
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    Column {
+                        spacing: Theme.spacingXS
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: parent.width - Theme.iconSize - Theme.spacingM
+
+                        StyledText {
+                            text: I18n.tr("Power Profile Degradation")
+                            font.pixelSize: Theme.fontSizeLarge
+                            color: Theme.error
+                            font.weight: Font.Medium
+                        }
+
+                        StyledText {
+                            text: (typeof PowerProfiles !== "undefined") ? PerformanceDegradationReason.toString(PowerProfiles.degradationReason) : ""
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.8)
+                            wrapMode: Text.WordWrap
+                            width: parent.width
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

Modules/ControlCenter/Details/BluetoothCodecSelector.qml

@@ -124,7 +124,7 @@ Item {
         radius: Theme.cornerRadius
         color: Theme.surfaceContainer
         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-        border.width: 1
+        border.width: 0
         opacity: modalVisible ? 1 : 0
         scale: modalVisible ? 1 : 0.9
 
@@ -170,7 +170,7 @@ Item {
                     }
 
                     StyledText {
-                        text: "Audio Codec Selection"
+                        text: I18n.tr("Audio Codec Selection")
                         font.pixelSize: Theme.fontSizeSmall
                         color: Theme.surfaceTextMedium
                     }
@@ -206,14 +206,14 @@ Item {
                         radius: Theme.cornerRadius
                         color: {
                             if (modelData.name === currentCodec)
-                                return Theme.surfaceContainerHigh;
+                                return Theme.surfaceContainerHighest;
                             else if (codecMouseArea.containsMouse)
                                 return Theme.surfaceHover;
                             else
                                 return "transparent";
                         }
                         border.color: "transparent"
-                        border.width: 1
+                        border.width: 0
 
                         Row {
                             anchors.left: parent.left
@@ -272,12 +272,6 @@ Item {
                             }
                         }
 
-                        Behavior on color {
-                            ColorAnimation {
-                                duration: Theme.shortDuration
-                            }
-
-                        }
 
                     }
 

Modules/ControlCenter/Details/BluetoothDetail.qml

@@ -9,9 +9,9 @@ import qs.Widgets
 Rectangle {
     implicitHeight: BluetoothService.adapter && BluetoothService.adapter.enabled ? headerRow.height + bluetoothContent.height + Theme.spacingM : headerRow.height
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.6)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 1
+    border.width: 0
     
     property var bluetoothCodecModalRef: null
     
@@ -39,7 +39,7 @@ Rectangle {
         
         StyledText {
             id: headerText
-            text: "Bluetooth Settings"
+            text: I18n.tr("Bluetooth Settings")
             font.pixelSize: Theme.fontSizeLarge
             color: Theme.surfaceText
             font.weight: Font.Medium
@@ -58,11 +58,11 @@ Rectangle {
             radius: 18
             color: {
                 if (!BluetoothService.adapter || !BluetoothService.adapter.enabled)
-                    return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                    return Theme.surfaceContainerHigh
                 return scanMouseArea.containsMouse ? Theme.surfaceContainerHigh : "transparent"
             }
             border.color: BluetoothService.adapter && BluetoothService.adapter.enabled ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-            border.width: 1
+            border.width: 0
             visible: BluetoothService.adapter && BluetoothService.adapter.enabled
             
             Row {
@@ -96,13 +96,6 @@ Rectangle {
                         BluetoothService.adapter.discovering = !BluetoothService.adapter.discovering
                 }
             }
-            
-            Behavior on color {
-                ColorAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
-            }
         }
     }
     
@@ -159,7 +152,7 @@ Rectangle {
                             return Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.12)
                         if (deviceMouseArea.containsMouse)
                             return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
-                        return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, index % 2 === 0 ? 0.3 : 0.2)
+                        return Theme.surfaceContainerHighest
                     }
                     border.color: {
                         if (modelData.state === BluetoothDeviceState.Connecting)
@@ -168,7 +161,7 @@ Rectangle {
                             return Theme.primary
                         return Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
                     }
-                    border.width: (modelData.connected || modelData.state === BluetoothDeviceState.Connecting) ? 2 : 1
+                    border.width: 0
                     
                     Row {
                         anchors.left: parent.left
@@ -284,14 +277,6 @@ Rectangle {
                             }
                         }
                     }
-                    
-                    Behavior on color {
-                        ColorAnimation { duration: Theme.shortDuration }
-                    }
-                    
-                    Behavior on border.color {
-                        ColorAnimation { duration: Theme.shortDuration }
-                    }
                 }
             }
             
@@ -347,9 +332,9 @@ Rectangle {
                     width: parent.width
                     height: 50
                     radius: Theme.cornerRadius
-                    color: availableMouseArea.containsMouse && !isBusy ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.15)
+                    color: availableMouseArea.containsMouse && !isBusy ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.surfaceContainerHighest
                     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: 1
+                    border.width: 0
                     opacity: canConnect ? 1 : 0.6
                     
                     Row {
@@ -427,9 +412,6 @@ Rectangle {
                         }
                     }
                     
-                    Behavior on color {
-                        ColorAnimation { duration: Theme.shortDuration }
-                    }
                 }
             }
             
@@ -440,7 +422,7 @@ Rectangle {
                 
                 StyledText {
                     anchors.centerIn: parent
-                    text: "No Bluetooth adapter found"
+                    text: I18n.tr("No Bluetooth adapter found")
                     font.pixelSize: Theme.fontSizeMedium
                     color: Theme.surfaceVariantText
                 }
@@ -458,7 +440,7 @@ Rectangle {
         background: Rectangle {
             color: Theme.popupBackground()
             radius: Theme.cornerRadius
-            border.width: 1
+            border.width: 0
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
         }
         
@@ -491,7 +473,7 @@ Rectangle {
         }
         
         MenuItem {
-            text: "Audio Codec"
+            text: I18n.tr("Audio Codec")
             height: bluetoothContextMenu.currentDevice && BluetoothService.isAudioDevice(bluetoothContextMenu.currentDevice) && bluetoothContextMenu.currentDevice.connected ? 32 : 0
             visible: bluetoothContextMenu.currentDevice && BluetoothService.isAudioDevice(bluetoothContextMenu.currentDevice) && bluetoothContextMenu.currentDevice.connected
             
@@ -516,7 +498,7 @@ Rectangle {
         }
         
         MenuItem {
-            text: "Forget Device"
+            text: I18n.tr("Forget Device")
             height: 32
             
             contentItem: StyledText {

Modules/ControlCenter/Details/BrightnessDetail.qml

@@ -0,0 +1,174 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property string currentDeviceName: ""
+    property string instanceId: ""
+
+    signal deviceNameChanged(string newDeviceName)
+
+    implicitHeight: brightnessContent.height + Theme.spacingM
+    radius: Theme.cornerRadius
+    color: Theme.surfaceContainerHigh
+    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.width: 0
+
+    DankFlickable {
+        id: brightnessContent
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.margins: Theme.spacingM
+        anchors.topMargin: Theme.spacingM
+        contentHeight: brightnessColumn.height
+        clip: true
+
+        Column {
+            id: brightnessColumn
+            width: parent.width
+            spacing: Theme.spacingS
+
+            Item {
+                width: parent.width
+                height: 100
+                visible: !DisplayService.brightnessAvailable || !DisplayService.devices || DisplayService.devices.length === 0
+
+                Column {
+                    anchors.centerIn: parent
+                    spacing: Theme.spacingM
+
+                    DankIcon {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        name: DisplayService.brightnessAvailable ? "brightness_6" : "error"
+                        size: 32
+                        color: DisplayService.brightnessAvailable ? Theme.primary : Theme.error
+                    }
+
+                    StyledText {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        text: DisplayService.brightnessAvailable ? "No brightness devices available" : "Brightness control not available"
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: Theme.surfaceText
+                        horizontalAlignment: Text.AlignHCenter
+                    }
+                }
+            }
+
+            Repeater {
+                model: DisplayService.devices || []
+                delegate: Rectangle {
+                    required property var modelData
+                    required property int index
+
+                    width: parent.width
+                    height: 80
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceContainerHighest
+                    border.color: modelData.name === currentDeviceName ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                    border.width: modelData.name === currentDeviceName ? 2 : 0
+
+                    Row {
+                        anchors.left: parent.left
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.leftMargin: Theme.spacingM
+                        spacing: Theme.spacingM
+
+                        Column {
+                            anchors.verticalCenter: parent.verticalCenter
+                            spacing: 2
+
+                            DankIcon {
+                                name: {
+                                    const deviceClass = modelData.class || ""
+                                    const deviceName = modelData.name || ""
+
+                                    if (deviceClass === "backlight" || deviceClass === "ddc") {
+                                        const brightness = modelData.percentage || 50
+                                        if (brightness <= 33) return "brightness_low"
+                                        if (brightness <= 66) return "brightness_medium"
+                                        return "brightness_high"
+                                    } else if (deviceName.includes("kbd")) {
+                                        return "keyboard"
+                                    } else {
+                                        return "lightbulb"
+                                    }
+                                }
+                                size: Theme.iconSize
+                                color: modelData.name === currentDeviceName ? Theme.primary : Theme.surfaceText
+                                anchors.horizontalCenter: parent.horizontalCenter
+                            }
+
+                            StyledText {
+                                text: (modelData.percentage || 50) + "%"
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.surfaceText
+                                anchors.horizontalCenter: parent.horizontalCenter
+                            }
+                        }
+
+                        Column {
+                            anchors.verticalCenter: parent.verticalCenter
+                            width: parent.parent.width - parent.parent.anchors.leftMargin - parent.spacing - 50 - Theme.spacingM
+
+                            StyledText {
+                                text: {
+                                    const name = modelData.name || ""
+                                    const deviceClass = modelData.class || ""
+                                    if (deviceClass === "backlight") {
+                                        return name.replace("_", " ").replace(/\b\w/g, c => c.toUpperCase())
+                                    }
+                                    return name
+                                }
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceText
+                                font.weight: modelData.name === currentDeviceName ? Font.Medium : Font.Normal
+                                elide: Text.ElideRight
+                                width: parent.width
+                            }
+
+                            StyledText {
+                                text: modelData.name
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.surfaceVariantText
+                                elide: Text.ElideRight
+                                width: parent.width
+                            }
+
+                            StyledText {
+                                text: {
+                                    const deviceClass = modelData.class || ""
+                                    if (deviceClass === "backlight") return "Backlight device"
+                                    if (deviceClass === "ddc") return "DDC/CI monitor"
+                                    if (deviceClass === "leds") return "LED device"
+                                    return deviceClass
+                                }
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.surfaceVariantText
+                                elide: Text.ElideRight
+                                width: parent.width
+                            }
+                        }
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            currentDeviceName = modelData.name
+                            deviceNameChanged(modelData.name)
+                        }
+                    }
+
+                }
+            }
+        }
+    }
+}

Modules/ControlCenter/Details/DiskUsageDetail.qml

@@ -0,0 +1,166 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property string currentMountPath: "/"
+    property string instanceId: ""
+
+    signal mountPathChanged(string newMountPath)
+
+    implicitHeight: diskContent.height + Theme.spacingM
+    radius: Theme.cornerRadius
+    color: Theme.surfaceContainerHigh
+    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.width: 0
+
+    Component.onCompleted: {
+        DgopService.addRef(["diskmounts"])
+    }
+
+    Component.onDestruction: {
+        DgopService.removeRef(["diskmounts"])
+    }
+
+    DankFlickable {
+        id: diskContent
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.margins: Theme.spacingM
+        anchors.topMargin: Theme.spacingM
+        contentHeight: diskColumn.height
+        clip: true
+
+        Column {
+            id: diskColumn
+            width: parent.width
+            spacing: Theme.spacingS
+
+            Item {
+                width: parent.width
+                height: 100
+                visible: !DgopService.dgopAvailable || !DgopService.diskMounts || DgopService.diskMounts.length === 0
+
+                Column {
+                    anchors.centerIn: parent
+                    spacing: Theme.spacingM
+
+                    DankIcon {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        name: DgopService.dgopAvailable ? "storage" : "error"
+                        size: 32
+                        color: DgopService.dgopAvailable ? Theme.primary : Theme.error
+                    }
+
+                    StyledText {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        text: DgopService.dgopAvailable ? "No disk data available" : "dgop not available"
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: Theme.surfaceText
+                        horizontalAlignment: Text.AlignHCenter
+                    }
+                }
+            }
+
+            Repeater {
+                model: DgopService.diskMounts || []
+                delegate: Rectangle {
+                    required property var modelData
+                    required property int index
+
+                    width: parent.width
+                    height: 80
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceContainerHighest
+                    border.color: modelData.mount === currentMountPath ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                    border.width: modelData.mount === currentMountPath ? 2 : 0
+
+                    Row {
+                        anchors.left: parent.left
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.leftMargin: Theme.spacingM
+                        spacing: Theme.spacingM
+
+                        Column {
+                            anchors.verticalCenter: parent.verticalCenter
+                            spacing: 2
+
+                            DankIcon {
+                                name: "storage"
+                                size: Theme.iconSize
+                                color: {
+                                    const percentStr = modelData.percent?.replace("%", "") || "0"
+                                    const percent = parseFloat(percentStr) || 0
+                                    if (percent > 90) return Theme.error
+                                    if (percent > 75) return Theme.warning
+                                    return modelData.mount === currentMountPath ? Theme.primary : Theme.surfaceText
+                                }
+                                anchors.horizontalCenter: parent.horizontalCenter
+                            }
+
+                            StyledText {
+                                text: {
+                                    const percentStr = modelData.percent?.replace("%", "") || "0"
+                                    const percent = parseFloat(percentStr) || 0
+                                    return percent.toFixed(0) + "%"
+                                }
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.surfaceText
+                                anchors.horizontalCenter: parent.horizontalCenter
+                            }
+                        }
+
+                        Column {
+                            anchors.verticalCenter: parent.verticalCenter
+                            width: parent.parent.width - parent.parent.anchors.leftMargin - parent.spacing - 50 - Theme.spacingM
+
+                            StyledText {
+                                text: modelData.mount === "/" ? "Root Filesystem" : modelData.mount
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceText
+                                font.weight: modelData.mount === currentMountPath ? Font.Medium : Font.Normal
+                                elide: Text.ElideRight
+                                width: parent.width
+                            }
+
+                            StyledText {
+                                text: modelData.mount
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.surfaceVariantText
+                                elide: Text.ElideRight
+                                width: parent.width
+                                visible: modelData.mount !== "/"
+                            }
+
+                            StyledText {
+                                text: `${modelData.used || "?"} / ${modelData.size || "?"}`
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.surfaceVariantText
+                                elide: Text.ElideRight
+                                width: parent.width
+                            }
+                        }
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            currentMountPath = modelData.mount
+                            mountPathChanged(modelData.mount)
+                        }
+                    }
+
+                }
+            }
+        }
+    }
+}

Modules/ControlCenter/Details/NetworkDetail.qml

@@ -17,30 +17,18 @@ Rectangle {
         return headerRow.height + wifiOffContent.height + Theme.spacingM
     }
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.6)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 1
-    
+    border.width: 0
+
     Component.onCompleted: {
         NetworkService.addRef()
-        if (NetworkService.wifiEnabled) {
-            NetworkService.scanWifi()
-        }
     }
-    
+
     Component.onDestruction: {
         NetworkService.removeRef()
     }
     
-    property var wifiPasswordModalRef: {
-        wifiPasswordModalLoader.active = true
-        return wifiPasswordModalLoader.item
-    }
-    property var networkInfoModalRef: {
-        networkInfoModalLoader.active = true
-        return networkInfoModalLoader.item
-    }
-    
     Row {
         id: headerRow
         anchors.left: parent.left
@@ -53,7 +41,7 @@ Rectangle {
         
         StyledText {
             id: headerText
-            text: "Network Settings"
+            text: I18n.tr("Network Settings")
             font.pixelSize: Theme.fontSizeLarge
             color: Theme.surfaceText
             font.weight: Font.Medium
@@ -65,74 +53,34 @@ Rectangle {
             height: parent.height
         }
         
-        Row {
+        DankButtonGroup {
             id: preferenceControls
-            spacing: Theme.spacingS
             anchors.verticalCenter: parent.verticalCenter
-            visible: NetworkService.ethernetConnected && NetworkService.wifiConnected
-            
-            Rectangle {
-                property bool isActive: NetworkService.userPreference === "ethernet"
-                
-                width: 90
-                height: 36
-                radius: 18
-                color: isActive ? Theme.surfaceContainerHigh : ethernetMouseArea.containsMouse ? Theme.surfaceHover : "transparent"
-                
-                StyledText {
-                    anchors.centerIn: parent
-                    text: "Ethernet"
-                    color: parent.isActive ? Theme.primary : Theme.surfaceText
-                    font.pixelSize: Theme.fontSizeMedium
-                    font.weight: parent.isActive ? Font.Medium : Font.Normal
-                }
-                
-                MouseArea {
-                    id: ethernetMouseArea
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    onClicked: NetworkService.setNetworkPreference("ethernet")
-                    cursorShape: Qt.PointingHandCursor
-                }
-                
-                Behavior on color {
-                    ColorAnimation {
-                        duration: Theme.shortDuration
-                        easing.type: Theme.standardEasing
-                    }
+            visible: NetworkService.ethernetConnected
+
+            property int currentPreferenceIndex: {
+                const pref = NetworkService.userPreference
+                const status = NetworkService.networkStatus
+                let index = 1
+
+                if (pref === "ethernet") {
+                    index = 0
+                } else if (pref === "wifi") {
+                    index = 1
+                } else {
+                    index = status === "ethernet" ? 0 : 1
                 }
+
+                return index
             }
-            
-            Rectangle {
-                property bool isActive: NetworkService.userPreference === "wifi"
-                
-                width: 70
-                height: 36
-                radius: 18
-                color: isActive ? Theme.surfaceContainerHigh : wifiMouseArea.containsMouse ? Theme.surfaceHover : "transparent"
-                
-                StyledText {
-                    anchors.centerIn: parent
-                    text: "WiFi"
-                    color: parent.isActive ? Theme.primary : Theme.surfaceText
-                    font.pixelSize: Theme.fontSizeMedium
-                    font.weight: parent.isActive ? Font.Medium : Font.Normal
-                }
-                
-                MouseArea {
-                    id: wifiMouseArea
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    onClicked: NetworkService.setNetworkPreference("wifi")
-                    cursorShape: Qt.PointingHandCursor
-                }
-                
-                Behavior on color {
-                    ColorAnimation {
-                        duration: Theme.shortDuration
-                        easing.type: Theme.standardEasing
-                    }
-                }
+
+            model: ["Ethernet", "WiFi"]
+            currentIndex: currentPreferenceIndex
+            selectionMode: "single"
+            onSelectionChanged: (index, selected) => {
+                if (!selected) return
+                console.log("NetworkDetail: Setting preference to", index === 0 ? "ethernet" : "wifi")
+                NetworkService.setNetworkPreference(index === 0 ? "ethernet" : "wifi")
             }
         }
     }
@@ -146,17 +94,17 @@ Rectangle {
         anchors.topMargin: Theme.spacingM
         visible: NetworkService.wifiToggling
         height: visible ? 80 : 0
-        
+
         Column {
             anchors.centerIn: parent
             spacing: Theme.spacingM
-            
+
             DankIcon {
                 anchors.horizontalCenter: parent.horizontalCenter
                 name: "sync"
                 size: 32
                 color: Theme.primary
-                
+
                 RotationAnimation on rotation {
                     running: NetworkService.wifiToggling
                     loops: Animation.Infinite
@@ -165,7 +113,7 @@ Rectangle {
                     duration: 1000
                 }
             }
-            
+
             StyledText {
                 anchors.horizontalCenter: parent.horizontalCenter
                 text: NetworkService.wifiEnabled ? "Disabling WiFi..." : "Enabling WiFi..."
@@ -200,7 +148,7 @@ Rectangle {
             
             StyledText {
                 anchors.horizontalCenter: parent.horizontalCenter
-                text: "WiFi is off"
+                text: I18n.tr("WiFi is off")
                 font.pixelSize: Theme.fontSizeLarge
                 color: Theme.surfaceText
                 font.weight: Font.Medium
@@ -213,12 +161,12 @@ Rectangle {
                 height: 36
                 radius: 18
                 color: enableWifiButton.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
-                border.width: 1
+                border.width: 0
                 border.color: Theme.primary
                 
                 StyledText {
                     anchors.centerIn: parent
-                    text: "Enable WiFi"
+                    text: I18n.tr("Enable WiFi")
                     color: Theme.primary
                     font.pixelSize: Theme.fontSizeMedium
                     font.weight: Font.Medium
@@ -232,12 +180,6 @@ Rectangle {
                     onClicked: NetworkService.toggleWifiRadio()
                 }
                 
-                Behavior on color {
-                    ColorAnimation {
-                        duration: Theme.shortDuration
-                        easing.type: Theme.standardEasing
-                    }
-                }
             }
         }
     }
@@ -262,16 +204,16 @@ Rectangle {
             Item {
                 width: parent.width
                 height: 200
-                visible: NetworkService.wifiInterface && NetworkService.wifiNetworks?.length < 1 && !NetworkService.wifiToggling
-                
+                visible: NetworkService.wifiInterface && NetworkService.wifiNetworks?.length < 1 && !NetworkService.wifiToggling && NetworkService.isScanning
+
                 DankIcon {
                     anchors.centerIn: parent
                     name: "refresh"
                     size: 48
                     color: Qt.rgba(Theme.surfaceText.r || 0.8, Theme.surfaceText.g || 0.8, Theme.surfaceText.b || 0.8, 0.3)
-                    
+
                     RotationAnimation on rotation {
-                        running: true
+                        running: NetworkService.isScanning
                         loops: Animation.Infinite
                         from: 0
                         to: 360
@@ -281,14 +223,18 @@ Rectangle {
             }
             
             Repeater {
-                model: {
-                    let networks = [...NetworkService.wifiNetworks]
-                    networks.sort((a, b) => {
-                        if (a.ssid === NetworkService.currentWifiSSID) return -1
-                        if (b.ssid === NetworkService.currentWifiSSID) return 1
+                model: sortedNetworks
+
+                property var sortedNetworks: {
+                    const ssid = NetworkService.currentWifiSSID
+                    const networks = NetworkService.wifiNetworks
+                    let sorted = [...networks]
+                    sorted.sort((a, b) => {
+                        if (a.ssid === ssid) return -1
+                        if (b.ssid === ssid) return 1
                         return b.signal - a.signal
                     })
-                    return networks
+                    return sorted
                 }
                 delegate: Rectangle {
                     required property var modelData
@@ -297,9 +243,9 @@ Rectangle {
                     width: parent.width
                     height: 50
                     radius: Theme.cornerRadius
-                    color: networkMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, index % 2 === 0 ? 0.3 : 0.2)
+                    color: networkMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.surfaceContainerHighest
                     border.color: modelData.ssid === NetworkService.currentWifiSSID ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: modelData.ssid === NetworkService.currentWifiSSID ? 2 : 1
+                    border.width: 0
                     
                     Row {
                         anchors.left: parent.left
@@ -310,11 +256,9 @@ Rectangle {
                         DankIcon {
                             name: {
                                 let strength = modelData.signal || 0
-                                if (strength >= 70) return "signal_wifi_4_bar"
-                                if (strength >= 50) return "network_wifi_3_bar"
-                                if (strength >= 25) return "network_wifi_2_bar"
-                                if (strength >= 10) return "network_wifi_1_bar"
-                                return "signal_wifi_bad"
+                                if (strength >= 50) return "wifi"
+                                if (strength >= 25) return "wifi_2_bar"
+                                return "wifi_1_bar"
                             }
                             size: Theme.iconSize - 4
                             color: modelData.ssid === NetworkService.currentWifiSSID ? Theme.primary : Theme.surfaceText
@@ -333,10 +277,10 @@ Rectangle {
                                 elide: Text.ElideRight
                                 width: parent.width
                             }
-                            
+
                             Row {
                                 spacing: Theme.spacingXS
-                                
+
                                 StyledText {
                                     text: modelData.ssid === NetworkService.currentWifiSSID ? "Connected" : (modelData.secured ? "Secured" : "Open")
                                     font.pixelSize: Theme.fontSizeSmall
@@ -389,9 +333,7 @@ Rectangle {
                         onClicked: function(event) {
                             if (modelData.ssid !== NetworkService.currentWifiSSID) {
                                 if (modelData.secured && !modelData.saved) {
-                                    if (wifiPasswordModalRef) {
-                                        wifiPasswordModalRef.show(modelData.ssid)
-                                    }
+                                    wifiPasswordModal.show(modelData.ssid)
                                 } else {
                                     NetworkService.connectToWifi(modelData.ssid)
                                 }
@@ -400,13 +342,6 @@ Rectangle {
                         }
                     }
                     
-                    Behavior on color {
-                        ColorAnimation { duration: Theme.shortDuration }
-                    }
-                    
-                    Behavior on border.color {
-                        ColorAnimation { duration: Theme.shortDuration }
-                    }
                 }
             }
         }
@@ -426,7 +361,7 @@ Rectangle {
         background: Rectangle {
             color: Theme.popupBackground()
             radius: Theme.cornerRadius
-            border.width: 1
+            border.width: 0
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
         }
         
@@ -452,9 +387,7 @@ Rectangle {
                     NetworkService.disconnectWifi()
                 } else {
                     if (networkContextMenu.currentSecured && !networkContextMenu.currentSaved) {
-                        if (wifiPasswordModalRef) {
-                            wifiPasswordModalRef.show(networkContextMenu.currentSSID)
-                        }
+                        wifiPasswordModal.show(networkContextMenu.currentSSID)
                     } else {
                         NetworkService.connectToWifi(networkContextMenu.currentSSID)
                     }
@@ -463,7 +396,7 @@ Rectangle {
         }
         
         MenuItem {
-            text: "Network Info"
+            text: I18n.tr("Network Info")
             height: 32
             
             contentItem: StyledText {
@@ -480,15 +413,13 @@ Rectangle {
             }
             
             onTriggered: {
-                if (networkInfoModalRef) {
-                    let networkData = NetworkService.getNetworkInfo(networkContextMenu.currentSSID)
-                    networkInfoModalRef.showNetworkInfo(networkContextMenu.currentSSID, networkData)
-                }
+                let networkData = NetworkService.getNetworkInfo(networkContextMenu.currentSSID)
+                networkInfoModal.showNetworkInfo(networkContextMenu.currentSSID, networkData)
             }
         }
         
         MenuItem {
-            text: "Forget Network"
+            text: I18n.tr("Forget Network")
             height: networkContextMenu.currentSaved || networkContextMenu.currentConnected ? 32 : 0
             visible: networkContextMenu.currentSaved || networkContextMenu.currentConnected
             
@@ -511,22 +442,12 @@ Rectangle {
         }
     }
     
-    LazyLoader {
-        id: wifiPasswordModalLoader
-        active: false
-        
-        WifiPasswordModal {
-            id: wifiPasswordModal
-        }
+    WifiPasswordModal {
+        id: wifiPasswordModal
     }
-    
-    LazyLoader {
-        id: networkInfoModalLoader
-        active: false
-        
-        NetworkInfoModal {
-            id: networkInfoModal
-        }
+
+    NetworkInfoModal {
+        id: networkInfoModal
     }
 
 

Modules/ControlCenter/Models/WidgetModel.qml

@@ -0,0 +1,223 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Modules.ControlCenter.BuiltinPlugins
+import "../utils/widgets.js" as WidgetUtils
+
+QtObject {
+    id: root
+
+    property var vpnBuiltinInstance: null
+
+    property var vpnLoader: Loader {
+        active: false
+        sourceComponent: Component {
+            VpnWidget {}
+        }
+
+        onItemChanged: {
+            root.vpnBuiltinInstance = item
+        }
+
+        Connections {
+            target: SettingsData
+            function onControlCenterWidgetsChanged() {
+                const widgets = SettingsData.controlCenterWidgets || []
+                const hasVpnWidget = widgets.some(w => w.id === "builtin_vpn")
+                if (!hasVpnWidget && vpnLoader.active) {
+                    console.log("VpnWidget: No VPN widget in control center, deactivating loader")
+                    vpnLoader.active = false
+                }
+            }
+        }
+    }
+
+    readonly property var coreWidgetDefinitions: [{
+            "id": "nightMode",
+            "text": "Night Mode",
+            "description": "Blue light filter",
+            "icon": "nightlight",
+            "type": "toggle",
+            "enabled": DisplayService.automationAvailable,
+            "warning": !DisplayService.automationAvailable ? "Requires night mode support" : undefined
+        }, {
+            "id": "darkMode",
+            "text": "Dark Mode",
+            "description": "System theme toggle",
+            "icon": "contrast",
+            "type": "toggle",
+            "enabled": true
+        }, {
+            "id": "doNotDisturb",
+            "text": "Do Not Disturb",
+            "description": "Block notifications",
+            "icon": "do_not_disturb_on",
+            "type": "toggle",
+            "enabled": true
+        }, {
+            "id": "idleInhibitor",
+            "text": "Keep Awake",
+            "description": "Prevent screen timeout",
+            "icon": "motion_sensor_active",
+            "type": "toggle",
+            "enabled": true
+        }, {
+            "id": "wifi",
+            "text": "Network",
+            "description": "Wi-Fi and Ethernet connection",
+            "icon": "wifi",
+            "type": "connection",
+            "enabled": NetworkService.wifiAvailable,
+            "warning": !NetworkService.wifiAvailable ? "Wi-Fi not available" : undefined
+        }, {
+            "id": "bluetooth",
+            "text": "Bluetooth",
+            "description": "Device connections",
+            "icon": "bluetooth",
+            "type": "connection",
+            "enabled": BluetoothService.available,
+            "warning": !BluetoothService.available ? "Bluetooth not available" : undefined
+        }, {
+            "id": "audioOutput",
+            "text": "Audio Output",
+            "description": "Speaker settings",
+            "icon": "volume_up",
+            "type": "connection",
+            "enabled": true
+        }, {
+            "id": "audioInput",
+            "text": "Audio Input",
+            "description": "Microphone settings",
+            "icon": "mic",
+            "type": "connection",
+            "enabled": true
+        }, {
+            "id": "volumeSlider",
+            "text": "Volume Slider",
+            "description": "Audio volume control",
+            "icon": "volume_up",
+            "type": "slider",
+            "enabled": true
+        }, {
+            "id": "brightnessSlider",
+            "text": "Brightness Slider",
+            "description": "Display brightness control",
+            "icon": "brightness_6",
+            "type": "slider",
+            "enabled": DisplayService.brightnessAvailable,
+            "warning": !DisplayService.brightnessAvailable ? "Brightness control not available" : undefined,
+            "allowMultiple": true
+        }, {
+            "id": "inputVolumeSlider",
+            "text": "Input Volume Slider",
+            "description": "Microphone volume control",
+            "icon": "mic",
+            "type": "slider",
+            "enabled": true
+        }, {
+            "id": "battery",
+            "text": "Battery",
+            "description": "Battery and power management",
+            "icon": "battery_std",
+            "type": "action",
+            "enabled": true
+        }, {
+            "id": "diskUsage",
+            "text": "Disk Usage",
+            "description": "Filesystem usage monitoring",
+            "icon": "storage",
+            "type": "action",
+            "enabled": DgopService.dgopAvailable,
+            "warning": !DgopService.dgopAvailable ? "Requires 'dgop' tool" : undefined,
+            "allowMultiple": true
+        }, {
+            "id": "colorPicker",
+            "text": "Color Picker",
+            "description": "Choose colors from palette",
+            "icon": "palette",
+            "type": "action",
+            "enabled": true
+        }, {
+            "id": "builtin_vpn",
+            "text": "VPN",
+            "description": "VPN connections",
+            "icon": "vpn_key",
+            "type": "builtin_plugin",
+            "enabled": VpnService.available,
+            "warning": !VpnService.available ? "VPN not available" : undefined,
+            "isBuiltinPlugin": true
+        }]
+
+    function getPluginWidgets() {
+        const plugins = []
+        const loadedPlugins = PluginService.getLoadedPlugins()
+
+        for (var i = 0; i < loadedPlugins.length; i++) {
+            const plugin = loadedPlugins[i]
+
+            if (plugin.type === "daemon") {
+                continue
+            }
+
+            const pluginComponent = PluginService.pluginWidgetComponents[plugin.id]
+            if (!pluginComponent) {
+                continue
+            }
+
+            const tempInstance = pluginComponent.createObject(null)
+            if (!tempInstance) {
+                continue
+            }
+
+            const hasCCWidget = tempInstance.ccWidgetIcon && tempInstance.ccWidgetIcon.length > 0
+            tempInstance.destroy()
+
+            if (!hasCCWidget) {
+                continue
+            }
+
+            plugins.push({
+                             "id": "plugin_" + plugin.id,
+                             "pluginId": plugin.id,
+                             "text": plugin.name || "Plugin",
+                             "description": plugin.description || "",
+                             "icon": plugin.icon || "extension",
+                             "type": "plugin",
+                             "enabled": true,
+                             "isPlugin": true
+                         })
+        }
+
+        return plugins
+    }
+
+    readonly property var baseWidgetDefinitions: coreWidgetDefinitions
+
+    function getWidgetForId(widgetId) {
+        return WidgetUtils.getWidgetForId(baseWidgetDefinitions, widgetId)
+    }
+
+    function addWidget(widgetId) {
+        WidgetUtils.addWidget(widgetId)
+    }
+
+    function removeWidget(index) {
+        WidgetUtils.removeWidget(index)
+    }
+
+    function toggleWidgetSize(index) {
+        WidgetUtils.toggleWidgetSize(index)
+    }
+
+    function moveWidget(fromIndex, toIndex) {
+        WidgetUtils.moveWidget(fromIndex, toIndex)
+    }
+
+    function resetToDefault() {
+        WidgetUtils.resetToDefault()
+    }
+
+    function clearAll() {
+        WidgetUtils.clearAll()
+    }
+}

Modules/ControlCenter/PowerMenu.qml

@@ -10,6 +10,12 @@ import qs.Widgets
 PanelWindow {
     id: root
 
+    readonly property string powerOptionsText: I18n.tr("Power Options")
+    readonly property string logOutText: I18n.tr("Log Out")
+    readonly property string suspendText: I18n.tr("Suspend")
+    readonly property string rebootText: I18n.tr("Reboot")
+    readonly property string powerOffText: I18n.tr("Power Off")
+
     property bool powerMenuVisible: false
     signal powerActionRequested(string action, string title, string message)
 
@@ -44,7 +50,7 @@ PanelWindow {
         radius: Theme.cornerRadius
         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                               Theme.outline.b, 0.08)
-        border.width: 1
+        border.width: 0
         opacity: powerMenuVisible ? 1 : 0
         scale: powerMenuVisible ? 1 : 0.85
 
@@ -65,7 +71,7 @@ PanelWindow {
                 width: parent.width
 
                 StyledText {
-                    text: "Power Options"
+                    text: root.powerOptionsText
                     font.pixelSize: Theme.fontSizeLarge
                     color: Theme.surfaceText
                     font.weight: Font.Medium
@@ -118,7 +124,7 @@ PanelWindow {
                         }
 
                         StyledText {
-                            text: "Log Out"
+                            text: root.logOutText
                             font.pixelSize: Theme.fontSizeMedium
                             color: Theme.surfaceText
                             font.weight: Font.Medium
@@ -168,7 +174,7 @@ PanelWindow {
                         }
 
                         StyledText {
-                            text: "Suspend"
+                            text: root.suspendText
                             font.pixelSize: Theme.fontSizeMedium
                             color: Theme.surfaceText
                             font.weight: Font.Medium
@@ -218,7 +224,7 @@ PanelWindow {
                         }
 
                         StyledText {
-                            text: "Reboot"
+                            text: root.rebootText
                             font.pixelSize: Theme.fontSizeMedium
                             color: rebootArea.containsMouse ? Theme.warning : Theme.surfaceText
                             font.weight: Font.Medium
@@ -268,7 +274,7 @@ PanelWindow {
                         }
 
                         StyledText {
-                            text: "Power Off"
+                            text: root.powerOffText
                             font.pixelSize: Theme.fontSizeMedium
                             color: powerOffArea.containsMouse ? Theme.error : Theme.surfaceText
                             font.weight: Font.Medium

Modules/ControlCenter/Widgets/AudioInputPill.qml

@@ -7,17 +7,17 @@ import qs.Services
 import qs.Widgets
 import qs.Modules.ControlCenter.Widgets
 
-BasePill {
+CompoundPill {
     id: root
 
     property var defaultSource: AudioService.source
 
     iconName: {
         if (!defaultSource) return "mic_off"
-        
+
         let volume = defaultSource.audio.volume
         let muted = defaultSource.audio.muted
-        
+
         if (muted || volume === 0.0) return "mic_off"
         return "mic"
     }
@@ -41,6 +41,12 @@ BasePill {
         return Math.round(defaultSource.audio.volume * 100) + "%"
     }
 
+    onToggled: {
+        if (defaultSource && defaultSource.audio) {
+            defaultSource.audio.muted = !defaultSource.audio.muted
+        }
+    }
+
     onWheelEvent: function (wheelEvent) {
         if (!defaultSource || !defaultSource.audio) return
         let delta = wheelEvent.angleDelta.y

Modules/ControlCenter/Widgets/AudioOutputPill.qml

@@ -7,17 +7,17 @@ import qs.Services
 import qs.Widgets
 import qs.Modules.ControlCenter.Widgets
 
-BasePill {
+CompoundPill {
     id: root
 
     property var defaultSink: AudioService.sink
 
     iconName: {
         if (!defaultSink) return "volume_off"
-        
+
         let volume = defaultSink.audio.volume
         let muted = defaultSink.audio.muted
-        
+
         if (muted || volume === 0.0) return "volume_off"
         if (volume <= 0.33) return "volume_down"
         if (volume <= 0.66) return "volume_up"
@@ -43,6 +43,12 @@ BasePill {
         return Math.round(defaultSink.audio.volume * 100) + "%"
     }
 
+    onToggled: {
+        if (defaultSink && defaultSink.audio) {
+            defaultSink.audio.muted = !defaultSink.audio.muted
+        }
+    }
+
     onWheelEvent: function (wheelEvent) {
         if (!defaultSink || !defaultSink.audio) return
         let delta = wheelEvent.angleDelta.y

Modules/ControlCenter/Widgets/AudioSlider.qml

@@ -1,50 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import Quickshell
-import Quickshell.Services.Pipewire
-import qs.Common
-import qs.Services
-import qs.Widgets
-import qs.Modules.ControlCenter.Widgets
-
-SimpleSlider {
-    id: root
-
-    property var defaultSink: AudioService.sink
-
-    iconName: {
-        if (!defaultSink) return "volume_off"
-        
-        let volume = defaultSink.audio.volume
-        let muted = defaultSink.audio.muted
-        
-        if (muted || volume === 0.0) return "volume_off"
-        if (volume <= 0.33) return "volume_down"
-        if (volume <= 0.66) return "volume_up"
-        return "volume_up"
-    }
-
-    iconColor: defaultSink && !defaultSink.audio.muted && defaultSink.audio.volume > 0 ? Theme.primary : Theme.surfaceText
-
-    enabled: defaultSink !== null
-    allowIconClick: defaultSink !== null
-
-    value: defaultSink ? defaultSink.audio.volume : 0.0
-    maximumValue: 1.0
-    minimumValue: 0.0
-
-    onSliderValueChanged: function(newValue) {
-        if (defaultSink) {
-            defaultSink.audio.volume = newValue
-            if (newValue > 0 && defaultSink.audio.muted) {
-                defaultSink.audio.muted = false
-            }
-        }
-    }
-
-    onIconClicked: function() {
-        if (defaultSink) {
-            defaultSink.audio.muted = !defaultSink.audio.muted
-        }
-    }
-}

Modules/ControlCenter/Widgets/AudioSliderRow.qml

@@ -10,20 +10,17 @@ Row {
     id: root
 
     property var defaultSink: AudioService.sink
+    property color sliderTrackColor: "transparent"
 
     height: 40
-    spacing: Theme.spacingS
+    spacing: 0
 
     Rectangle {
         width: Theme.iconSize + Theme.spacingS * 2
         height: Theme.iconSize + Theme.spacingS * 2
         anchors.verticalCenter: parent.verticalCenter
-        radius: (Theme.iconSize + Theme.spacingS * 2) / 2  // Make it circular
-        color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
-        
-        Behavior on color {
-            ColorAnimation { duration: Theme.shortDuration }
-        }
+        radius: (Theme.iconSize + Theme.spacingS * 2) / 2
+        color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.primary, 0)
 
         MouseArea {
             id: iconArea
@@ -33,7 +30,9 @@ Row {
             cursorShape: Qt.PointingHandCursor
             onClicked: {
                 if (defaultSink) {
+                    AudioService.suppressOSD = true
                     defaultSink.audio.muted = !defaultSink.audio.muted
+                    AudioService.suppressOSD = false
                 }
             }
         }
@@ -42,10 +41,10 @@ Row {
             anchors.centerIn: parent
             name: {
                 if (!defaultSink) return "volume_off"
-                
+
                 let volume = defaultSink.audio.volume
                 let muted = defaultSink.audio.muted
-                
+
                 if (muted || volume === 0.0) return "volume_off"
                 if (volume <= 0.33) return "volume_down"
                 if (volume <= 0.66) return "volume_up"
@@ -57,12 +56,19 @@ Row {
     }
 
     DankSlider {
+        readonly property real actualVolumePercent: defaultSink ? Math.round(defaultSink.audio.volume * 100) : 0
+
         anchors.verticalCenter: parent.verticalCenter
-        width: parent.width - (Theme.iconSize + Theme.spacingS * 2) - Theme.spacingM
+        width: parent.width - (Theme.iconSize + Theme.spacingS * 2)
         enabled: defaultSink !== null
         minimum: 0
         maximum: 100
-        value: defaultSink ? Math.round(defaultSink.audio.volume * 100) : 0
+        value: defaultSink ? Math.min(100, Math.round(defaultSink.audio.volume * 100)) : 0
+        showValue: true
+        unit: "%"
+        valueOverride: actualVolumePercent
+        thumbOutlineColor: Theme.surfaceContainer
+        trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Theme.surfaceContainerHigh
         onSliderValueChanged: function(newValue) {
             if (defaultSink) {
                 defaultSink.audio.volume = newValue / 100.0

Modules/ControlCenter/Widgets/BasePill.qml

@@ -1,149 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import Quickshell
-import qs.Common
-import qs.Widgets
-
-Rectangle {
-    id: root
-
-    property string iconName: ""
-    property color iconColor: Theme.surfaceText
-    property string primaryText: ""
-    property string secondaryText: ""
-    property bool expanded: false
-    property bool isActive: false
-    
-    signal clicked()
-    signal expandClicked()
-    signal wheelEvent(var wheelEvent)
-
-    width: parent ? parent.width : 200
-    height: 60
-    radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.6)
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 1
-
-    Rectangle {
-        id: mainArea
-        anchors.left: parent.left
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
-        width: parent.width - expandArea.width
-        topLeftRadius: Theme.cornerRadius
-        bottomLeftRadius: Theme.cornerRadius
-        topRightRadius: 0
-        bottomRightRadius: 0
-        color: mainAreaMouse.containsMouse ? 
-               Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : 
-               "transparent"
-        
-        Behavior on color {
-            ColorAnimation { duration: Theme.shortDuration }
-        }
-        
-        Row {
-            anchors.left: parent.left
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.right: parent.right
-            anchors.leftMargin: Theme.spacingM
-            anchors.rightMargin: Theme.spacingS
-            spacing: Theme.spacingS
-
-            DankIcon {
-                name: root.iconName
-                size: Theme.iconSize
-                color: root.isActive ? Theme.primary : root.iconColor
-                anchors.verticalCenter: parent.verticalCenter
-            }
-
-            Column {
-                anchors.verticalCenter: parent.verticalCenter
-                width: parent.width - Theme.iconSize - Theme.spacingS
-                spacing: 2
-
-                StyledText {
-                    width: parent.width
-                    text: root.primaryText
-                    font.pixelSize: Theme.fontSizeMedium
-                    color: Theme.surfaceText
-                    font.weight: Font.Medium
-                    elide: Text.ElideRight
-                    wrapMode: Text.NoWrap
-                }
-
-                StyledText {
-                    width: parent.width
-                    text: root.secondaryText
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.surfaceVariantText
-                    visible: text.length > 0
-                    elide: Text.ElideRight
-                    wrapMode: Text.NoWrap
-                }
-            }
-        }
-        
-        MouseArea {
-            id: mainAreaMouse
-            anchors.fill: parent
-            hoverEnabled: true
-            cursorShape: Qt.PointingHandCursor
-            onClicked: root.clicked()
-            onWheel: function (wheelEvent) {
-                root.wheelEvent(wheelEvent)
-            }
-        }
-    }
-
-    Rectangle {
-        id: expandArea
-        anchors.right: parent.right
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
-        width: Theme.iconSize + Theme.spacingM * 2
-        topLeftRadius: 0
-        bottomLeftRadius: 0
-        topRightRadius: Theme.cornerRadius
-        bottomRightRadius: Theme.cornerRadius
-        color: expandAreaMouse.containsMouse ? 
-               Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : 
-               "transparent"
-        
-        Behavior on color {
-            ColorAnimation { duration: Theme.shortDuration }
-        }
-        
-        Rectangle {
-            anchors.left: parent.left
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            width: 1
-            color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-        }
-        
-        DankIcon {
-            id: expandIcon
-            anchors.centerIn: parent
-            name: expanded ? "expand_less" : "expand_more"
-            size: Theme.iconSize - 2
-            color: Theme.surfaceVariantText
-        }
-        
-        MouseArea {
-            id: expandAreaMouse
-            anchors.fill: parent
-            hoverEnabled: true
-            cursorShape: Qt.PointingHandCursor
-            onClicked: root.expandClicked()
-        }
-    }
-
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-    }
-}

Modules/ControlCenter/Widgets/BatteryPill.qml

@@ -0,0 +1,48 @@
+import QtQuick
+import Quickshell
+import qs.Common
+import qs.Services
+import qs.Widgets
+import qs.Modules.ControlCenter.Widgets
+
+CompoundPill {
+    id: root
+
+    iconName: BatteryService.getBatteryIcon()
+
+    isActive: BatteryService.batteryAvailable && (BatteryService.isCharging || BatteryService.isPluggedIn)
+
+    primaryText: {
+        if (!BatteryService.batteryAvailable) {
+            return "No battery"
+        }
+        return "Battery"
+    }
+
+    secondaryText: {
+        if (!BatteryService.batteryAvailable) {
+            return "Not available"
+        }
+        if (BatteryService.isCharging) {
+            return `${BatteryService.batteryLevel}% • Charging`
+        }
+        if (BatteryService.isPluggedIn) {
+            return `${BatteryService.batteryLevel}% • Plugged in`
+        }
+        return `${BatteryService.batteryLevel}%`
+    }
+
+    iconColor: {
+        if (BatteryService.isLowBattery && !BatteryService.isCharging) {
+            return Theme.error
+        }
+        if (BatteryService.isCharging || BatteryService.isPluggedIn) {
+            return Theme.primary
+        }
+        return Theme.surfaceText
+    }
+
+    onToggled: {
+        expandClicked()
+    }
+}

Modules/ControlCenter/Widgets/BluetoothPill.qml

@@ -6,14 +6,14 @@ import qs.Services
 import qs.Widgets
 import qs.Modules.ControlCenter.Widgets
 
-BasePill {
+CompoundPill {
     id: root
 
     property var primaryDevice: {
         if (!BluetoothService.adapter || !BluetoothService.adapter.devices) {
             return null
         }
-        
+
         let devices = [...BluetoothService.adapter.devices.values.filter(dev => dev && (dev.paired || dev.trusted))]
         for (let device of devices) {
             if (device && device.connected) {
@@ -30,17 +30,15 @@ BasePill {
         if (!BluetoothService.adapter || !BluetoothService.adapter.enabled) {
             return "bluetooth_disabled"
         }
-        if (primaryDevice) {
-            return BluetoothService.getDeviceIcon(primaryDevice)
-        }
         return "bluetooth"
     }
 
     isActive: !!(BluetoothService.available && BluetoothService.adapter && BluetoothService.adapter.enabled)
+    showExpandArea: BluetoothService.available
 
     primaryText: {
         if (!BluetoothService.available) {
-            return "Bluetooth unavailable"
+            return "Bluetooth"
         }
         if (!BluetoothService.adapter) {
             return "No adapter"
@@ -53,7 +51,7 @@ BasePill {
 
     secondaryText: {
         if (!BluetoothService.available) {
-            return "Hardware not found"
+            return "No adapters"
         }
         if (!BluetoothService.adapter || !BluetoothService.adapter.enabled) {
             return "Off"
@@ -63,4 +61,10 @@ BasePill {
         }
         return "No devices"
     }
+
+    onToggled: {
+        if (BluetoothService.available && BluetoothService.adapter) {
+            BluetoothService.adapter.enabled = !BluetoothService.adapter.enabled
+        }
+    }
 }

Modules/ControlCenter/Widgets/BrightnessSlider.qml

@@ -1,34 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import Quickshell
-import qs.Common
-import qs.Services
-import qs.Widgets
-import qs.Modules.ControlCenter.Widgets
-
-SimpleSlider {
-    id: root
-
-    iconName: {
-        if (!DisplayService.brightnessAvailable) return "brightness_low"
-        
-        let brightness = DisplayService.brightnessLevel
-        if (brightness <= 33) return "brightness_low"
-        if (brightness <= 66) return "brightness_medium"
-        return "brightness_high"
-    }
-
-    iconColor: DisplayService.brightnessAvailable && DisplayService.brightnessLevel > 0 ? Theme.primary : Theme.surfaceText
-
-    enabled: DisplayService.brightnessAvailable
-
-    value: DisplayService.brightnessLevel
-    maximumValue: 100.0
-    minimumValue: 0.0
-
-    onSliderValueChanged: function(newValue) {
-        if (DisplayService.brightnessAvailable) {
-            DisplayService.brightnessLevel = newValue
-        }
-    }
-}

Modules/ControlCenter/Widgets/BrightnessSliderRow.qml

@@ -8,8 +8,48 @@ import qs.Widgets
 Row {
     id: root
 
+    property string deviceName: ""
+    property string instanceId: ""
+
+    signal iconClicked()
+
     height: 40
-    spacing: Theme.spacingS
+    spacing: 0
+
+    property string targetDeviceName: {
+        if (!DisplayService.brightnessAvailable || !DisplayService.devices || DisplayService.devices.length === 0) {
+            return ""
+        }
+
+        if (deviceName && deviceName.length > 0) {
+            const found = DisplayService.devices.find(dev => dev.name === deviceName)
+            return found ? found.name : ""
+        }
+
+        const currentDeviceName = DisplayService.currentDevice
+        if (currentDeviceName) {
+            const found = DisplayService.devices.find(dev => dev.name === currentDeviceName)
+            return found ? found.name : ""
+        }
+
+        return DisplayService.devices.length > 0 ? DisplayService.devices[0].name : ""
+    }
+
+    property var targetDevice: {
+        if (!targetDeviceName || !DisplayService.devices) {
+            return null
+        }
+
+        return DisplayService.devices.find(dev => dev.name === targetDeviceName) || null
+    }
+
+    property real targetBrightness: {
+        if (!targetDeviceName) {
+            return 0
+        }
+
+        return DisplayService.getDeviceBrightness(targetDeviceName)
+    }
 
     Rectangle {
         width: Theme.iconSize + Theme.spacingS * 2
@@ -17,126 +57,80 @@ Row {
         anchors.verticalCenter: parent.verticalCenter
         radius: (Theme.iconSize + Theme.spacingS * 2) / 2
         color: iconArea.containsMouse
-               ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) 
-               : "transparent"
-        
-        Behavior on color {
-            ColorAnimation { duration: Theme.shortDuration }
-        }
+               ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
+               : Theme.withAlpha(Theme.primary, 0)
 
         MouseArea {
             id: iconArea
             anchors.fill: parent
             hoverEnabled: true
-            cursorShape: Qt.PointingHandCursor
-            
-            onClicked: function(event) {
-                if (DisplayService.devices.length > 1) {
-                    if (deviceMenu.visible) {
-                        deviceMenu.close()
-                    } else {
-                        deviceMenu.popup(iconArea, 0, iconArea.height + Theme.spacingXS)
-                    }
-                    event.accepted = true
+            cursorShape: DisplayService.devices && DisplayService.devices.length > 1 ? Qt.PointingHandCursor : Qt.ArrowCursor
+
+            onClicked: {
+                if (DisplayService.devices && DisplayService.devices.length > 1) {
+                    root.iconClicked()
                 }
             }
-        }
 
-        DankIcon {
-            anchors.centerIn: parent
-            name: {
-                if (!DisplayService.brightnessAvailable) return "brightness_low"
-                
-                let brightness = DisplayService.brightnessLevel
-                if (brightness <= 33) return "brightness_low"
-                if (brightness <= 66) return "brightness_medium"
-                return "brightness_high"
+            onEntered: {
+                tooltipLoader.active = true
+                if (tooltipLoader.item) {
+                    const tooltipText = targetDevice ? "bl device: " + targetDevice.name : "Backlight Control"
+                    const p = iconArea.mapToItem(null, iconArea.width / 2, 0)
+                    tooltipLoader.item.show(tooltipText, p.x, p.y - 40, null)
+                }
+            }
+
+            onExited: {
+                if (tooltipLoader.item) {
+                    tooltipLoader.item.hide()
+                }
+                tooltipLoader.active = false
+            }
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: {
+                    if (!DisplayService.brightnessAvailable || !targetDevice) {
+                        return "brightness_low"
+                    }
+
+                    if (targetDevice.class === "backlight" || targetDevice.class === "ddc") {
+                        const brightness = targetBrightness
+                        if (brightness <= 33) return "brightness_low"
+                        if (brightness <= 66) return "brightness_medium"
+                        return "brightness_high"
+                    } else if (targetDevice.name.includes("kbd")) {
+                        return "keyboard"
+                    } else {
+                        return "lightbulb"
+                    }
+                }
+                size: Theme.iconSize
+                color: DisplayService.brightnessAvailable && targetDevice && targetBrightness > 0 ? Theme.primary : Theme.surfaceText
             }
-            size: Theme.iconSize
-            color: DisplayService.brightnessAvailable && DisplayService.brightnessLevel > 0 ? Theme.primary : Theme.surfaceText
         }
     }
 
     DankSlider {
         anchors.verticalCenter: parent.verticalCenter
-        width: parent.width - (Theme.iconSize + Theme.spacingS * 2) - Theme.spacingM
-        enabled: DisplayService.brightnessAvailable
+        width: parent.width - (Theme.iconSize + Theme.spacingS * 2)
+        enabled: DisplayService.brightnessAvailable && targetDeviceName.length > 0
         minimum: 1
         maximum: 100
-        value: {
-            let level = DisplayService.brightnessLevel
-            if (level > 100) {
-                let deviceInfo = DisplayService.getCurrentDeviceInfo()
-                if (deviceInfo && deviceInfo.max > 0) {
-                    return Math.round((level / deviceInfo.max) * 100)
-                }
-                return 50
-            }
-            return level
-        }
+        value: targetBrightness
         onSliderValueChanged: function(newValue) {
-            if (DisplayService.brightnessAvailable) {
-                DisplayService.setBrightness(newValue)
+            if (DisplayService.brightnessAvailable && targetDeviceName) {
+                DisplayService.setBrightness(newValue, targetDeviceName)
             }
         }
+        thumbOutlineColor: Theme.surfaceContainer
+        trackColor: Theme.surfaceContainerHigh
     }
 
-    Menu {
-        id: deviceMenu
-        width: 200
-        closePolicy: Popup.CloseOnEscape
-        
-        background: Rectangle {
-            color: Theme.popupBackground()
-            radius: Theme.cornerRadius
-            border.width: 1
-            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-        }
-        
-        Instantiator {
-            model: DisplayService.devices
-            delegate: MenuItem {
-                required property var modelData
-                required property int index
-                
-                property string deviceName: modelData.name || ""
-                property string deviceClass: modelData.class || ""
-                
-                text: deviceName
-                font.pixelSize: Theme.fontSizeMedium
-                height: 40
-                
-                indicator: Rectangle {
-                    visible: DisplayService.currentDevice === parent.deviceName
-                    anchors.left: parent.left
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.leftMargin: Theme.spacingS
-                    width: 4
-                    height: parent.height - Theme.spacingS * 2
-                    radius: 2
-                    color: Theme.primary
-                }
-                
-                contentItem: StyledText {
-                    text: parent.text
-                    font: parent.font
-                    color: DisplayService.currentDevice === parent.deviceName ? Theme.primary : Theme.surfaceText
-                    leftPadding: Theme.spacingL
-                    verticalAlignment: Text.AlignVCenter
-                }
-                
-                background: Rectangle {
-                    color: parent.hovered ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
-                    radius: Theme.cornerRadius / 2
-                }
-                
-                onTriggered: {
-                    DisplayService.setCurrentDevice(deviceName, true)
-                    deviceMenu.close()
-                }
-            }
-            onObjectAdded: (index, object) => deviceMenu.insertItem(index, object)
-            onObjectRemoved: (index, object) => deviceMenu.removeItem(object)
-        }
+    Loader {
+        id: tooltipLoader
+        active: false
+        sourceComponent: DankTooltip {}
     }
 }

Modules/ControlCenter/Widgets/ColorPickerPill.qml

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

Modules/ControlCenter/Widgets/CompactSlider.qml

@@ -20,9 +20,9 @@ Rectangle {
     width: parent ? parent.width : 200
     height: 60
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.6)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 1
+    border.width: 0
     opacity: enabled ? 1.0 : 0.6
 
     Row {

Modules/ControlCenter/Widgets/CompoundPill.qml

@@ -0,0 +1,170 @@
+import QtQuick
+import Quickshell
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property string iconName: ""
+    property color iconColor: Theme.surfaceText
+    property string primaryText: ""
+    property string secondaryText: ""
+    property bool expanded: false
+    property bool isActive: false
+    property bool showExpandArea: true
+
+    signal toggled()
+    signal expandClicked()
+    signal wheelEvent(var wheelEvent)
+
+    width: parent ? parent.width : 220
+    height: 60
+    radius: Theme.cornerRadius
+
+    function hoverTint(base) {
+        const factor = 1.2
+        return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor)
+    }
+
+    readonly property color _containerBg: Theme.surfaceContainerHigh
+
+    color: {
+        const baseColor = bodyMouse.containsMouse ? Theme.widgetBaseHoverColor : _containerBg
+        return baseColor
+    }
+    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.10)
+    border.width: 0
+    antialiasing: true
+
+    readonly property color _labelPrimary: Theme.surfaceText
+    readonly property color _labelSecondary: Theme.surfaceVariantText
+    readonly property color _tileBgActive: Theme.primary
+    readonly property color _tileBgInactive: {
+        const transparency = Theme.popupTransparency
+        const surface = Theme.surfaceContainer || Qt.rgba(0.1, 0.1, 0.1, 1)
+        return Qt.rgba(surface.r, surface.g, surface.b, transparency)
+    }
+    readonly property color _tileRingActive:
+        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.primaryText
+    readonly property color _tileIconInactive: Theme.primary
+
+    property int _padH: Theme.spacingS
+    property int _tileSize: 48
+    property int _tileRadius: Theme.cornerRadius
+
+    Rectangle {
+        id: rightHoverOverlay
+        anchors.fill: parent
+        radius: root.radius
+        z: 0
+        visible: false
+        color: hoverTint(_containerBg)
+        opacity: 0.08
+        antialiasing: true
+        Behavior on opacity { NumberAnimation { duration: Theme.shortDuration } }
+    }
+
+    Row {
+        id: row
+        anchors.fill: parent
+        anchors.leftMargin: _padH
+        anchors.rightMargin: Theme.spacingM
+        spacing: Theme.spacingM
+
+        Rectangle {
+            id: iconTile
+            z: 1
+            width: _tileSize
+            height: _tileSize
+            anchors.verticalCenter: parent.verticalCenter
+            radius: _tileRadius
+            color: isActive ? _tileBgActive : _tileBgInactive
+            border.color: isActive ? _tileRingActive : "transparent"
+            border.width: isActive ? 1 : 0
+            antialiasing: true
+
+            Rectangle {
+                anchors.fill: parent
+                radius: _tileRadius
+                color: hoverTint(iconTile.color)
+                opacity: tileMouse.pressed ? 0.3 : (tileMouse.containsMouse ? 0.2 : 0.0)
+                visible: opacity > 0
+                antialiasing: true
+                Behavior on opacity { NumberAnimation { duration: Theme.shortDuration } }
+            }
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: iconName
+                size: Theme.iconSize
+                color: isActive ? _tileIconActive : _tileIconInactive
+            }
+
+            MouseArea {
+                id: tileMouse
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: root.toggled()
+            }
+        }
+
+        Item {
+            id: body
+            width: row.width - iconTile.width - row.spacing
+            height: row.height
+
+            Column {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: 2
+
+                StyledText {
+                    width: parent.width
+                    text: root.primaryText
+                    color: _labelPrimary
+                    font.pixelSize: Theme.fontSizeMedium
+                    font.weight: Font.Medium
+                    elide: Text.ElideRight
+                    wrapMode: Text.NoWrap
+                }
+                StyledText {
+                    width: parent.width
+                    text: root.secondaryText
+                    color: _labelSecondary
+                    font.pixelSize: Theme.fontSizeSmall
+                    visible: text.length > 0
+                    elide: Text.ElideRight
+                    wrapMode: Text.NoWrap
+                }
+            }
+
+            MouseArea {
+                id: bodyMouse
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onEntered: { rightHoverOverlay.visible = true; rightHoverOverlay.opacity = 0.08 }
+                onExited:  { rightHoverOverlay.opacity = 0.0; rightHoverOverlay.visible = false }
+                onPressed: rightHoverOverlay.opacity = 0.16
+                onReleased: rightHoverOverlay.opacity = containsMouse ? 0.08 : 0.0
+                onClicked: root.expandClicked()
+                onWheel: function (ev) {
+                    root.wheelEvent(ev)
+                }
+            }
+
+        }
+    }
+
+    focus: true
+    Keys.onPressed: function (ev) {
+        if (ev.key === Qt.Key_Space || ev.key === Qt.Key_Return) { root.toggled(); ev.accepted = true }
+        else if (ev.key === Qt.Key_Right) { root.expandClicked(); ev.accepted = true }
+    }
+}

Modules/ControlCenter/Widgets/DiskUsagePill.qml

@@ -0,0 +1,78 @@
+import QtQuick
+import Quickshell
+import qs.Common
+import qs.Services
+import qs.Widgets
+import qs.Modules.ControlCenter.Widgets
+
+CompoundPill {
+    id: root
+
+    property string mountPath: "/"
+    property string instanceId: ""
+
+    iconName: "storage"
+
+    property var selectedMount: {
+        if (!DgopService.diskMounts || DgopService.diskMounts.length === 0) {
+            return null
+        }
+
+        const targetMount = DgopService.diskMounts.find(mount => mount.mount === mountPath)
+        return targetMount || DgopService.diskMounts.find(mount => mount.mount === "/") || DgopService.diskMounts[0]
+    }
+
+    property real usagePercent: {
+        if (!selectedMount || !selectedMount.percent) {
+            return 0
+        }
+        const percentStr = selectedMount.percent.replace("%", "")
+        return parseFloat(percentStr) || 0
+    }
+
+    isActive: DgopService.dgopAvailable && selectedMount !== null
+
+    primaryText: {
+        if (!DgopService.dgopAvailable) {
+            return "Disk Usage"
+        }
+        if (!selectedMount) {
+            return "No disk data"
+        }
+        return selectedMount.mount
+    }
+
+    secondaryText: {
+        if (!DgopService.dgopAvailable) {
+            return "dgop not available"
+        }
+        if (!selectedMount) {
+            return "No disk data available"
+        }
+        return `${selectedMount.used} / ${selectedMount.size} (${usagePercent.toFixed(0)}%)`
+    }
+
+    iconColor: {
+        if (!DgopService.dgopAvailable || !selectedMount) {
+            return Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.5)
+        }
+        if (usagePercent > 90) {
+            return Theme.error
+        }
+        if (usagePercent > 75) {
+            return Theme.warning
+        }
+        return Theme.surfaceText
+    }
+
+    Component.onCompleted: {
+        DgopService.addRef(["diskmounts"])
+    }
+    Component.onDestruction: {
+        DgopService.removeRef(["diskmounts"])
+    }
+
+    onToggled: {
+        expandClicked()
+    }
+}

Modules/ControlCenter/Widgets/ErrorPill.qml

@@ -0,0 +1,51 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+StyledRect {
+    id: root
+
+    property string primaryMessage: ""
+    property string secondaryMessage: ""
+
+    radius: Theme.cornerRadius
+    color: Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.1)
+    border.color: Theme.warning
+    border.width: 1
+
+    Row {
+        anchors.fill: parent
+        anchors.margins: Theme.spacingM
+        spacing: Theme.spacingXS
+
+        DankIcon {
+            name: "warning"
+            size: 16
+            color: Theme.warning
+            anchors.top: parent.top
+            anchors.topMargin: 2
+        }
+
+        Column {
+            width: parent.width - 16 - parent.spacing
+            spacing: Theme.spacingXS
+
+            StyledText {
+                width: parent.width
+                text: root.primaryMessage
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.warning
+                font.weight: Font.Medium
+                wrapMode: Text.WordWrap
+            }
+
+            StyledText {
+                width: parent.width
+                text: root.secondaryMessage
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.warning
+                visible: text.length > 0
+            }
+        }
+    }
+}

Modules/ControlCenter/Widgets/InputAudioSliderRow.qml

@@ -0,0 +1,82 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Services.Pipewire
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Row {
+    id: root
+
+    property var defaultSource: AudioService.source
+    property color sliderTrackColor: "transparent"
+
+    height: 40
+    spacing: 0
+
+    Rectangle {
+        width: Theme.iconSize + Theme.spacingS * 2
+        height: Theme.iconSize + Theme.spacingS * 2
+        anchors.verticalCenter: parent.verticalCenter
+        radius: (Theme.iconSize + Theme.spacingS * 2) / 2
+        color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.primary, 0)
+
+        MouseArea {
+            id: iconArea
+            anchors.fill: parent
+            visible: defaultSource !== null
+            hoverEnabled: true
+            cursorShape: Qt.PointingHandCursor
+            onClicked: {
+                if (defaultSource) {
+                    AudioService.suppressOSD = true
+                    defaultSource.audio.muted = !defaultSource.audio.muted
+                    AudioService.suppressOSD = false
+                }
+            }
+        }
+
+        DankIcon {
+            anchors.centerIn: parent
+            name: {
+                if (!defaultSource) return "mic_off"
+
+                let volume = defaultSource.audio.volume
+                let muted = defaultSource.audio.muted
+
+                if (muted || volume === 0.0) return "mic_off"
+                return "mic"
+            }
+            size: Theme.iconSize
+            color: defaultSource && !defaultSource.audio.muted && defaultSource.audio.volume > 0 ? Theme.primary : Theme.surfaceText
+        }
+    }
+
+    DankSlider {
+        readonly property real actualVolumePercent: defaultSource ? Math.round(defaultSource.audio.volume * 100) : 0
+
+        anchors.verticalCenter: parent.verticalCenter
+        width: parent.width - (Theme.iconSize + Theme.spacingS * 2)
+        enabled: defaultSource !== null
+        minimum: 0
+        maximum: 100
+        value: defaultSource ? Math.min(100, Math.round(defaultSource.audio.volume * 100)) : 0
+        showValue: true
+        unit: "%"
+        valueOverride: actualVolumePercent
+        thumbOutlineColor: Theme.surfaceContainer
+        trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Theme.surfaceContainerHigh
+        onIsDraggingChanged: {
+            AudioService.suppressOSD = isDragging
+        }
+        onSliderValueChanged: function(newValue) {
+            if (defaultSource) {
+                defaultSource.audio.volume = newValue / 100.0
+                if (newValue > 0 && defaultSource.audio.muted) {
+                    defaultSource.audio.muted = false
+                }
+            }
+        }
+    }
+}

Modules/ControlCenter/Widgets/NetworkPill.qml

@@ -1,72 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import Quickshell
-import qs.Common
-import qs.Services
-import qs.Widgets
-import qs.Modules.ControlCenter.Widgets
-
-BasePill {
-    id: root
-
-    isActive: {
-        if (NetworkService.wifiToggling) {
-            return false
-        }
-        if (NetworkService.networkStatus === "ethernet") {
-            return true
-        }
-        if (NetworkService.networkStatus === "wifi") {
-            return true
-        }
-        return NetworkService.wifiEnabled
-    }
-    
-    iconName: {
-        if (NetworkService.wifiToggling) {
-            return "sync"
-        }
-        if (NetworkService.networkStatus === "ethernet") {
-            return "settings_ethernet"
-        }
-        if (NetworkService.networkStatus === "wifi") {
-            return NetworkService.wifiSignalIcon
-        }
-        if (NetworkService.wifiEnabled) {
-            return "signal_wifi_off"
-        }
-        return "wifi_off"
-    }
-
-    primaryText: {
-        if (NetworkService.wifiToggling) {
-            return NetworkService.wifiEnabled ? "Disabling WiFi..." : "Enabling WiFi..."
-        }
-        if (NetworkService.networkStatus === "ethernet") {
-            return "Ethernet"
-        }
-        if (NetworkService.networkStatus === "wifi" && NetworkService.currentWifiSSID) {
-            return NetworkService.currentWifiSSID
-        }
-        if (NetworkService.wifiEnabled) {
-            return "Not connected"
-        }
-        return "WiFi off"
-    }
-
-    secondaryText: {
-        if (NetworkService.wifiToggling) {
-            return "Please wait..."
-        }
-        if (NetworkService.networkStatus === "ethernet") {
-            return "Connected"
-        }
-        if (NetworkService.networkStatus === "wifi") {
-            return NetworkService.wifiSignalStrength > 0 ? NetworkService.wifiSignalStrength + "%" : "Connected"
-        }
-        if (NetworkService.wifiEnabled) {
-            return "Select network"
-        }
-        return "Tap to enable"
-    }
-}

Modules/ControlCenter/Widgets/SimpleSlider.qml

@@ -1,50 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import Quickshell
-import qs.Common
-import qs.Widgets
-
-Row {
-    id: root
-
-    property string iconName: ""
-    property color iconColor: Theme.surfaceText
-    property real value: 0.0
-    property real maximumValue: 1.0
-    property real minimumValue: 0.0
-    property bool enabled: true
-    property bool allowIconClick: false
-    
-    signal sliderValueChanged(real value)
-    signal iconClicked()
-
-    height: 60
-    spacing: Theme.spacingM
-
-    DankIcon {
-        name: root.iconName
-        size: Theme.iconSize
-        color: root.iconColor
-        anchors.verticalCenter: parent.verticalCenter
-
-        MouseArea {
-            anchors.fill: parent
-            visible: root.allowIconClick
-            cursorShape: Qt.PointingHandCursor
-            onClicked: root.iconClicked()
-        }
-    }
-
-    DankSlider {
-        anchors.verticalCenter: parent.verticalCenter
-        width: {
-            if (parent.width <= 0) return 80
-            return Math.max(80, Math.min(400, parent.width - Theme.iconSize - Theme.spacingM))
-        }
-        enabled: root.enabled
-        minimum: Math.round(root.minimumValue * 100)
-        maximum: Math.round(root.maximumValue * 100)
-        value: Math.round(root.value * 100)
-        onSliderValueChanged: function(newValue) { root.sliderValueChanged(newValue / 100.0) }
-    }
-}

Modules/ControlCenter/Widgets/SmallBatteryButton.qml

@@ -0,0 +1,100 @@
+import QtQuick
+import Quickshell
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool isActive: BatteryService.batteryAvailable && (BatteryService.isCharging || BatteryService.isPluggedIn)
+    property bool enabled: BatteryService.batteryAvailable
+
+    signal clicked()
+
+    width: parent ? ((parent.width - parent.spacing * 3) / 4) : 48
+    height: 48
+    radius: {
+        if (Theme.cornerRadius === 0) return 0
+        return isActive ? Theme.cornerRadius : Theme.cornerRadius + 4
+    }
+
+    function hoverTint(base) {
+        const factor = 1.2
+        return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor)
+    }
+
+    readonly property color _tileBgActive: Theme.primary
+    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.primaryText
+    readonly property color _tileIconInactive: Theme.primary
+
+    color: {
+        if (isActive) return _tileBgActive
+        const baseColor = mouseArea.containsMouse ? Theme.widgetBaseHoverColor : _tileBgInactive
+        return baseColor
+    }
+    border.color: isActive ? _tileRingActive : "transparent"
+    border.width: isActive ? 1 : 0
+    antialiasing: true
+    opacity: enabled ? 1.0 : 0.6
+
+    Rectangle {
+        anchors.fill: parent
+        radius: parent.radius
+        color: hoverTint(root.color)
+        opacity: mouseArea.pressed ? 0.3 : (mouseArea.containsMouse ? 0.2 : 0.0)
+        visible: opacity > 0
+        antialiasing: true
+        Behavior on opacity { NumberAnimation { duration: Theme.shortDuration } }
+    }
+
+    Row {
+        anchors.centerIn: parent
+        spacing: 4
+
+        DankIcon {
+            name: BatteryService.getBatteryIcon()
+            size: parent.parent.width * 0.25
+            color: {
+                if (BatteryService.isLowBattery && !BatteryService.isCharging) {
+                    return Theme.error
+                }
+                return isActive ? _tileIconActive : _tileIconInactive
+            }
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        StyledText {
+            text: BatteryService.batteryAvailable ? `${BatteryService.batteryLevel}%` : ""
+            font.pixelSize: parent.parent.width * 0.15
+            font.weight: Font.Medium
+            color: {
+                if (BatteryService.isLowBattery && !BatteryService.isCharging) {
+                    return Theme.error
+                }
+                return isActive ? _tileIconActive : _tileIconInactive
+            }
+            anchors.verticalCenter: parent.verticalCenter
+            visible: BatteryService.batteryAvailable
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        enabled: root.enabled
+        onClicked: root.clicked()
+    }
+
+    Behavior on radius {
+        NumberAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+}

Modules/ControlCenter/Widgets/SmallToggleButton.qml

@@ -0,0 +1,80 @@
+import QtQuick
+import Quickshell
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property string iconName: ""
+    property bool isActive: false
+    property bool enabled: true
+    property real iconRotation: 0
+
+    signal clicked()
+    signal iconRotationCompleted()
+
+    width: parent ? ((parent.width - parent.spacing * 3) / 4) : 48
+    height: 48
+    radius: {
+        if (Theme.cornerRadius === 0) return 0
+        return isActive ? Theme.cornerRadius : Theme.cornerRadius + 4
+    }
+
+    function hoverTint(base) {
+        const factor = 1.2
+        return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor)
+    }
+
+    readonly property color _tileBgActive: Theme.primary
+    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.primaryText
+    readonly property color _tileIconInactive: Theme.primary
+
+    color: {
+        if (isActive) return _tileBgActive
+        const baseColor = mouseArea.containsMouse ? Theme.widgetBaseHoverColor : _tileBgInactive
+        return baseColor
+    }
+    border.color: isActive ? _tileRingActive : "transparent"
+    border.width: isActive ? 1 : 0
+    antialiasing: true
+    opacity: enabled ? 1.0 : 0.6
+
+    Rectangle {
+        anchors.fill: parent
+        radius: parent.radius
+        color: hoverTint(root.color)
+        opacity: mouseArea.pressed ? 0.3 : (mouseArea.containsMouse ? 0.2 : 0.0)
+        visible: opacity > 0
+        antialiasing: true
+        Behavior on opacity { NumberAnimation { duration: Theme.shortDuration } }
+    }
+
+    DankIcon {
+        anchors.centerIn: parent
+        name: iconName
+        size: Theme.iconSize
+        color: isActive ? _tileIconActive : _tileIconInactive
+        rotation: iconRotation
+        onRotationCompleted: root.iconRotationCompleted()
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        enabled: root.enabled
+        onClicked: root.clicked()
+    }
+
+    Behavior on radius {
+        NumberAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+}

Modules/ControlCenter/Widgets/ToggleButton.qml

@@ -1,5 +1,4 @@
 import QtQuick
-import QtQuick.Controls
 import Quickshell
 import qs.Common
 import qs.Widgets
@@ -12,67 +11,94 @@ Rectangle {
     property bool isActive: false
     property bool enabled: true
     property string secondaryText: ""
-    
+    property real iconRotation: 0
+
     signal clicked()
+    signal iconRotationCompleted()
 
     width: parent ? parent.width : 200
     height: 60
-    radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.6)
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 1
+    radius: {
+        if (Theme.cornerRadius === 0) return 0
+        return isActive ? Theme.cornerRadius : Theme.cornerRadius + 4
+    }
+
+    readonly property color _tileBgActive: Theme.primary
+    readonly property color _tileBgInactive: Theme.surfaceContainerHigh
+    readonly property color _tileRingActive:
+        Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
+
+    color: {
+        if (isActive) return _tileBgActive
+        const baseColor = mouseArea.containsMouse ? Theme.widgetBaseHoverColor : _tileBgInactive
+        return baseColor
+    }
+    border.color: isActive ? _tileRingActive : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.width: 0
     opacity: enabled ? 1.0 : 0.6
 
+    function hoverTint(base) {
+        const factor = 1.2
+        return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor)
+    }
+
+    readonly property color _containerBg: Theme.surfaceContainerHigh
+
     Rectangle {
         anchors.fill: parent
         radius: Theme.cornerRadius
-        color: mouseArea.containsMouse ? 
-               Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : 
-               "transparent"
-        
-        Behavior on color {
-            ColorAnimation { duration: Theme.shortDuration }
+        color: mouseArea.containsMouse ? hoverTint(_containerBg) : Theme.withAlpha(_containerBg, 0)
+        opacity: mouseArea.containsMouse ? 0.08 : 0.0
+
+        Behavior on opacity {
+            NumberAnimation { duration: Theme.shortDuration }
         }
     }
 
     Row {
-        anchors.left: parent.left
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.right: parent.right
-        anchors.leftMargin: Theme.spacingM
+        anchors.fill: parent
+        anchors.leftMargin: Theme.spacingL + 2
         anchors.rightMargin: Theme.spacingM
-        spacing: Theme.spacingS
+        spacing: Theme.spacingM
 
         DankIcon {
             name: root.iconName
             size: Theme.iconSize
-            color: root.isActive ? Theme.primary : Theme.surfaceText
+            color: isActive ? Theme.primaryText : Theme.primary
             anchors.verticalCenter: parent.verticalCenter
+            rotation: root.iconRotation
+            onRotationCompleted: root.iconRotationCompleted()
         }
 
-        Column {
-            anchors.verticalCenter: parent.verticalCenter
-            width: parent.width - Theme.iconSize - Theme.spacingS
-            spacing: 2
+        Item {
+            width: parent.width - Theme.iconSize - parent.spacing
+            height: parent.height
 
-            StyledText {
-                width: parent.width
-                text: root.text
-                font.pixelSize: Theme.fontSizeMedium
-                color: Theme.surfaceText
-                font.weight: Font.Medium
-                elide: Text.ElideRight
-                wrapMode: Text.NoWrap
-            }
+            Column {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: 2
 
-            StyledText {
-                width: parent.width
-                text: root.secondaryText
-                font.pixelSize: Theme.fontSizeSmall
-                color: Theme.surfaceVariantText
-                visible: text.length > 0
-                elide: Text.ElideRight
-                wrapMode: Text.NoWrap
+                StyledText {
+                    width: parent.width
+                    text: root.text
+                    font.pixelSize: Theme.fontSizeMedium
+                    color: isActive ? Theme.primaryText : Theme.surfaceText
+                    font.weight: Font.Medium
+                    elide: Text.ElideRight
+                    wrapMode: Text.NoWrap
+                }
+
+                StyledText {
+                    width: parent.width
+                    text: root.secondaryText
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: isActive ? Theme.primaryText : Theme.surfaceVariantText
+                    visible: text.length > 0
+                    elide: Text.ElideRight
+                    wrapMode: Text.NoWrap
+                }
             }
         }
     }
@@ -86,8 +112,8 @@ Rectangle {
         onClicked: root.clicked()
     }
 
-    Behavior on color {
-        ColorAnimation {
+    Behavior on radius {
+        NumberAnimation {
             duration: Theme.shortDuration
             easing.type: Theme.standardEasing
         }

Modules/ControlCenter/utils/layout.js

@@ -0,0 +1,45 @@
+function calculateRowsAndWidgets(controlCenterColumn, expandedSection, expandedWidgetIndex) {
+    var rows = []
+    var currentRow = []
+    var currentWidth = 0
+    var expandedRow = -1
+
+    const widgets = SettingsData.controlCenterWidgets || []
+    const baseWidth = controlCenterColumn.width
+    const spacing = Theme.spacingS
+
+    for (var i = 0; i < widgets.length; i++) {
+        const widget = widgets[i]
+        const widgetWidth = widget.width || 50
+
+        var itemWidth
+        if (widgetWidth <= 25) {
+            itemWidth = (baseWidth - spacing * 3) / 4
+        } else if (widgetWidth <= 50) {
+            itemWidth = (baseWidth - spacing) / 2
+        } else if (widgetWidth <= 75) {
+            itemWidth = (baseWidth - spacing * 2) * 0.75
+        } else {
+            itemWidth = baseWidth
+        }
+
+        if (currentRow.length > 0 && (currentWidth + spacing + itemWidth > baseWidth)) {
+            rows.push([...currentRow])
+            currentRow = [widget]
+            currentWidth = itemWidth
+        } else {
+            currentRow.push(widget)
+            currentWidth += (currentRow.length > 1 ? spacing : 0) + itemWidth
+        }
+
+        if (expandedWidgetIndex === i) {
+            expandedRow = rows.length
+        }
+    }
+
+    if (currentRow.length > 0) {
+        rows.push(currentRow)
+    }
+
+    return { rows: rows, expandedRowIndex: expandedRow }
+}

Modules/ControlCenter/utils/state.js

@@ -0,0 +1,25 @@
+function setTriggerPosition(root, x, y, width, section, screen) {
+    root.triggerX = x
+    root.triggerY = y
+    root.triggerWidth = width
+    root.triggerSection = section
+    root.triggerScreen = screen
+}
+
+function openWithSection(root, section) {
+    if (root.shouldBeVisible) {
+        root.close()
+    } else {
+        root.expandedSection = section
+        root.open()
+    }
+}
+
+function toggleSection(root, section) {
+    if (root.expandedSection === section) {
+        root.expandedSection = ""
+        root.expandedWidgetIndex = -1
+    } else {
+        root.expandedSection = section
+    }
+}

Modules/ControlCenter/utils/widgets.js

@@ -0,0 +1,90 @@
+function getWidgetForId(baseWidgetDefinitions, widgetId) {
+    return baseWidgetDefinitions.find(w => w.id === widgetId)
+}
+
+function addWidget(widgetId) {
+    var widgets = SettingsData.controlCenterWidgets.slice()
+    var widget = {
+        "id": widgetId,
+        "enabled": true,
+        "width": 50
+    }
+
+    if (widgetId === "diskUsage") {
+        widget.instanceId = generateUniqueId()
+        widget.mountPath = "/"
+    }
+
+    if (widgetId === "brightnessSlider") {
+        widget.instanceId = generateUniqueId()
+        widget.deviceName = ""
+    }
+
+    widgets.push(widget)
+    SettingsData.setControlCenterWidgets(widgets)
+}
+
+function generateUniqueId() {
+    return Date.now().toString(36) + Math.random().toString(36).substr(2)
+}
+
+function removeWidget(index) {
+    var widgets = SettingsData.controlCenterWidgets.slice()
+    if (index >= 0 && index < widgets.length) {
+        widgets.splice(index, 1)
+        SettingsData.setControlCenterWidgets(widgets)
+    }
+}
+
+function toggleWidgetSize(index) {
+    var widgets = SettingsData.controlCenterWidgets.slice()
+    if (index >= 0 && index < widgets.length) {
+        const currentWidth = widgets[index].width || 50
+        const id = widgets[index].id || ""
+
+        if (id === "wifi" || id === "bluetooth" || id === "audioOutput" || id === "audioInput") {
+            widgets[index].width = currentWidth <= 50 ? 100 : 50
+        } else {
+            if (currentWidth <= 25) {
+                widgets[index].width = 50
+            } else if (currentWidth <= 50) {
+                widgets[index].width = 100
+            } else {
+                widgets[index].width = 25
+            }
+        }
+
+        SettingsData.setControlCenterWidgets(widgets)
+    }
+}
+
+function reorderWidgets(newOrder) {
+    SettingsData.setControlCenterWidgets(newOrder)
+}
+
+function moveWidget(fromIndex, toIndex) {
+    let widgets = [...(SettingsData.controlCenterWidgets || [])]
+    if (fromIndex >= 0 && fromIndex < widgets.length && toIndex >= 0 && toIndex < widgets.length) {
+        const movedWidget = widgets.splice(fromIndex, 1)[0]
+        widgets.splice(toIndex, 0, movedWidget)
+        SettingsData.setControlCenterWidgets(widgets)
+    }
+}
+
+function resetToDefault() {
+    const defaultWidgets = [
+        {"id": "volumeSlider", "enabled": true, "width": 50},
+        {"id": "brightnessSlider", "enabled": true, "width": 50},
+        {"id": "wifi", "enabled": true, "width": 50},
+        {"id": "bluetooth", "enabled": true, "width": 50},
+        {"id": "audioOutput", "enabled": true, "width": 50},
+        {"id": "audioInput", "enabled": true, "width": 50},
+        {"id": "nightMode", "enabled": true, "width": 50},
+        {"id": "darkMode", "enabled": true, "width": 50}
+    ]
+    SettingsData.setControlCenterWidgets(defaultWidgets)
+}
+
+function clearAll() {
+    SettingsData.setControlCenterWidgets([])
+}

Modules/DankBar/AutoHideManager.qml

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

Modules/DankBar/AxisContext.qml

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

Modules/DankBar/BarCanvas.qml

@@ -0,0 +1,343 @@
+import QtQuick
+import qs.Common
+
+Item {
+    id: root
+
+    required property var barWindow
+    required property var axis
+
+    anchors.fill: parent
+
+    anchors.left: parent.left
+    anchors.top: parent.top
+    anchors.leftMargin: -(SettingsData.dankBarGothCornersEnabled && axis.isVertical && axis.edge === "right" ? barWindow._wingR : 0)
+    anchors.rightMargin: -(SettingsData.dankBarGothCornersEnabled && axis.isVertical && axis.edge === "left" ? barWindow._wingR : 0)
+    anchors.topMargin: -(SettingsData.dankBarGothCornersEnabled && !axis.isVertical && axis.edge === "bottom" ? barWindow._wingR : 0)
+    anchors.bottomMargin: -(SettingsData.dankBarGothCornersEnabled && !axis.isVertical && axis.edge === "top" ? barWindow._wingR : 0)
+
+    function requestRepaint() {
+        debounceTimer.restart()
+    }
+
+    Timer {
+        id: debounceTimer
+        interval: 50
+        repeat: false
+        onTriggered: {
+            barShape.requestPaint()
+            barTint.requestPaint()
+            barBorder.requestPaint()
+        }
+    }
+
+    Canvas {
+        id: barShape
+        anchors.fill: parent
+        antialiasing: true
+        renderTarget: Canvas.FramebufferObject
+        renderStrategy: Canvas.Cooperative
+
+        readonly property real correctWidth: root.width
+        readonly property real correctHeight: root.height
+        canvasSize: Qt.size(Math.ceil(correctWidth), Math.ceil(correctHeight))
+
+        property real wing: SettingsData.dankBarGothCornersEnabled ? barWindow._wingR : 0
+        property real rt: SettingsData.dankBarSquareCorners ? 0 : Theme.cornerRadius
+
+        onWingChanged: root.requestRepaint()
+        onRtChanged: root.requestRepaint()
+        onCorrectWidthChanged: root.requestRepaint()
+        onCorrectHeightChanged: root.requestRepaint()
+        onVisibleChanged: if (visible) root.requestRepaint()
+        Component.onCompleted: root.requestRepaint()
+
+        Connections {
+            target: barWindow
+            function on_BgColorChanged() { root.requestRepaint() }
+        }
+
+        Connections {
+            target: Theme
+            function onIsLightModeChanged() { root.requestRepaint() }
+            function onSurfaceContainerChanged() { root.requestRepaint() }
+        }
+
+        onPaint: {
+            const ctx = getContext("2d")
+            const W = barWindow.isVertical ? correctHeight : correctWidth
+            const H_raw = barWindow.isVertical ? correctWidth : correctHeight
+            const R = wing
+            const RT = rt
+            const H = H_raw - (R > 0 ? R : 0)
+            const isTop = SettingsData.dankBarPosition === SettingsData.Position.Top
+            const isBottom = SettingsData.dankBarPosition === SettingsData.Position.Bottom
+            const isLeft = SettingsData.dankBarPosition === SettingsData.Position.Left
+            const isRight = SettingsData.dankBarPosition === SettingsData.Position.Right
+
+            function drawTopPath() {
+                ctx.beginPath()
+                ctx.moveTo(RT, 0)
+                ctx.lineTo(W - RT, 0)
+                ctx.arcTo(W, 0, W, RT, RT)
+                ctx.lineTo(W, H)
+
+                if (R > 0) {
+                    ctx.lineTo(W, H + R)
+                    ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true)
+                    ctx.lineTo(R, H)
+                    ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true)
+                    ctx.lineTo(0, H + R)
+                } else {
+                    ctx.lineTo(W, H - RT)
+                    ctx.arcTo(W, H, W - RT, H, RT)
+                    ctx.lineTo(RT, H)
+                    ctx.arcTo(0, H, 0, H - RT, RT)
+                }
+
+                ctx.lineTo(0, RT)
+                ctx.arcTo(0, 0, RT, 0, RT)
+                ctx.closePath()
+            }
+
+            ctx.reset()
+            ctx.clearRect(0, 0, Math.ceil(W), Math.ceil(H_raw))
+
+            ctx.save()
+            if (isBottom) {
+                ctx.translate(W, H_raw)
+                ctx.rotate(Math.PI)
+            } else if (isLeft) {
+                ctx.translate(0, W)
+                ctx.rotate(-Math.PI / 2)
+            } else if (isRight) {
+                ctx.translate(H_raw, 0)
+                ctx.rotate(Math.PI / 2)
+            }
+
+            drawTopPath()
+            ctx.restore()
+
+            ctx.fillStyle = barWindow._bgColor
+            ctx.fill()
+        }
+    }
+
+    Canvas {
+        id: barTint
+        anchors.fill: parent
+        antialiasing: true
+        renderTarget: Canvas.FramebufferObject
+        renderStrategy: Canvas.Cooperative
+
+        readonly property real correctWidth: root.width
+        readonly property real correctHeight: root.height
+        canvasSize: Qt.size(Math.ceil(correctWidth), Math.ceil(correctHeight))
+
+        property real wing: SettingsData.dankBarGothCornersEnabled ? barWindow._wingR : 0
+        property real rt: SettingsData.dankBarSquareCorners ? 0 : Theme.cornerRadius
+        property real alphaTint: (barWindow._bgColor?.a ?? 1) < 0.99 ? (Theme.stateLayerOpacity ?? 0) : 0
+
+        onWingChanged: root.requestRepaint()
+        onRtChanged: root.requestRepaint()
+        onAlphaTintChanged: root.requestRepaint()
+        onCorrectWidthChanged: root.requestRepaint()
+        onCorrectHeightChanged: root.requestRepaint()
+        onVisibleChanged: if (visible) root.requestRepaint()
+        Component.onCompleted: root.requestRepaint()
+
+        Connections {
+            target: barWindow
+            function on_BgColorChanged() { root.requestRepaint() }
+        }
+
+        Connections {
+            target: Theme
+            function onIsLightModeChanged() { root.requestRepaint() }
+            function onSurfaceChanged() { root.requestRepaint() }
+        }
+
+        onPaint: {
+            const ctx = getContext("2d")
+            const W = barWindow.isVertical ? correctHeight : correctWidth
+            const H_raw = barWindow.isVertical ? correctWidth : correctHeight
+            const R = wing
+            const RT = rt
+            const H = H_raw - (R > 0 ? R : 0)
+            const isTop = SettingsData.dankBarPosition === SettingsData.Position.Top
+            const isBottom = SettingsData.dankBarPosition === SettingsData.Position.Bottom
+            const isLeft = SettingsData.dankBarPosition === SettingsData.Position.Left
+            const isRight = SettingsData.dankBarPosition === SettingsData.Position.Right
+
+            function drawTopPath() {
+                ctx.beginPath()
+                ctx.moveTo(RT, 0)
+                ctx.lineTo(W - RT, 0)
+                ctx.arcTo(W, 0, W, RT, RT)
+                ctx.lineTo(W, H)
+
+                if (R > 0) {
+                    ctx.lineTo(W, H + R)
+                    ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true)
+                    ctx.lineTo(R, H)
+                    ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true)
+                    ctx.lineTo(0, H + R)
+                } else {
+                    ctx.lineTo(W, H - RT)
+                    ctx.arcTo(W, H, W - RT, H, RT)
+                    ctx.lineTo(RT, H)
+                    ctx.arcTo(0, H, 0, H - RT, RT)
+                }
+
+                ctx.lineTo(0, RT)
+                ctx.arcTo(0, 0, RT, 0, RT)
+                ctx.closePath()
+            }
+
+            ctx.reset()
+            ctx.clearRect(0, 0, Math.ceil(W), Math.ceil(H_raw))
+
+            ctx.save()
+            if (isBottom) {
+                ctx.translate(W, H_raw)
+                ctx.rotate(Math.PI)
+            } else if (isLeft) {
+                ctx.translate(0, W)
+                ctx.rotate(-Math.PI / 2)
+            } else if (isRight) {
+                ctx.translate(H_raw, 0)
+                ctx.rotate(Math.PI / 2)
+            }
+
+            drawTopPath()
+            ctx.restore()
+
+            ctx.fillStyle = Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, alphaTint)
+            ctx.fill()
+        }
+    }
+
+    Canvas {
+        id: barBorder
+        anchors.fill: parent
+        antialiasing: false
+        visible: SettingsData.dankBarBorderEnabled
+        renderTarget: Canvas.FramebufferObject
+        renderStrategy: Canvas.Cooperative
+
+        readonly property real correctWidth: root.width
+        readonly property real correctHeight: root.height
+        canvasSize: Qt.size(Math.ceil(correctWidth), Math.ceil(correctHeight))
+
+        property real wing: SettingsData.dankBarGothCornersEnabled ? barWindow._wingR : 0
+        property real rt: SettingsData.dankBarSquareCorners ? 0 : Theme.cornerRadius
+        property bool borderEnabled: SettingsData.dankBarBorderEnabled
+
+        onWingChanged: root.requestRepaint()
+        onRtChanged: root.requestRepaint()
+        onBorderEnabledChanged: root.requestRepaint()
+        onCorrectWidthChanged: root.requestRepaint()
+        onCorrectHeightChanged: root.requestRepaint()
+        onVisibleChanged: if (visible) root.requestRepaint()
+        Component.onCompleted: root.requestRepaint()
+
+        Connections {
+            target: Theme
+            function onIsLightModeChanged() { root.requestRepaint() }
+            function onSurfaceTextChanged() { root.requestRepaint() }
+            function onPrimaryChanged() { root.requestRepaint() }
+            function onSecondaryChanged() { root.requestRepaint() }
+            function onOutlineChanged() { root.requestRepaint() }
+        }
+
+        Connections {
+            target: SettingsData
+            function onDankBarBorderColorChanged() { root.requestRepaint() }
+            function onDankBarBorderOpacityChanged() { root.requestRepaint() }
+            function onDankBarBorderThicknessChanged() { root.requestRepaint() }
+            function onDankBarSpacingChanged() { root.requestRepaint() }
+            function onDankBarSquareCornersChanged() { root.requestRepaint() }
+            function onDankBarTransparencyChanged() { root.requestRepaint() }
+        }
+
+        onPaint: {
+            if (!borderEnabled) return
+
+            const ctx = getContext("2d")
+            const W = barWindow.isVertical ? correctHeight : correctWidth
+            const H_raw = barWindow.isVertical ? correctWidth : correctHeight
+            const R = wing
+            const RT = rt
+            const H = H_raw - (R > 0 ? R : 0)
+            const isTop = SettingsData.dankBarPosition === SettingsData.Position.Top
+            const isBottom = SettingsData.dankBarPosition === SettingsData.Position.Bottom
+            const isLeft = SettingsData.dankBarPosition === SettingsData.Position.Left
+            const isRight = SettingsData.dankBarPosition === SettingsData.Position.Right
+
+            const spacing = SettingsData.dankBarSpacing
+            const hasEdgeGap = spacing > 0 || RT > 0
+
+            function drawTopBorder() {
+                ctx.beginPath()
+
+                if (!hasEdgeGap) {
+                    ctx.moveTo(0, H)
+                    ctx.lineTo(W, H)
+                } else {
+                    ctx.moveTo(RT, 0)
+                    ctx.lineTo(W - RT, 0)
+                    ctx.arcTo(W, 0, W, RT, RT)
+                    ctx.lineTo(W, H)
+
+                    if (R > 0) {
+                        ctx.lineTo(W, H + R)
+                        ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true)
+                        ctx.lineTo(R, H)
+                        ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true)
+                        ctx.lineTo(0, H + R)
+                    } else {
+                        ctx.lineTo(W, H - RT)
+                        ctx.arcTo(W, H, W - RT, H, RT)
+                        ctx.lineTo(RT, H)
+                        ctx.arcTo(0, H, 0, H - RT, RT)
+                    }
+
+                    ctx.lineTo(0, RT)
+                    ctx.arcTo(0, 0, RT, 0, RT)
+                }
+
+                ctx.closePath()
+            }
+
+            ctx.reset()
+            ctx.clearRect(0, 0, Math.ceil(W), Math.ceil(H_raw))
+
+            ctx.save()
+            if (isBottom) {
+                ctx.translate(W, H_raw)
+                ctx.rotate(Math.PI)
+            } else if (isLeft) {
+                ctx.translate(0, W)
+                ctx.rotate(-Math.PI / 2)
+            } else if (isRight) {
+                ctx.translate(H_raw, 0)
+                ctx.rotate(Math.PI / 2)
+            }
+
+            drawTopBorder()
+            ctx.restore()
+
+            const key = SettingsData.dankBarBorderColor || "surfaceText"
+            const base = (key === "surfaceText") ? Theme.surfaceText
+                       : (key === "primary") ? Theme.primary
+                       : Theme.secondary
+            const color = Theme.withAlpha(base, SettingsData.dankBarBorderOpacity ?? 1.0)
+            const thickness = Math.max(1, SettingsData.dankBarBorderThickness ?? 1)
+
+            ctx.globalCompositeOperation = "source-over"
+            ctx.lineWidth = thickness
+            ctx.strokeStyle = color
+            ctx.stroke()
+        }
+    }
+}

Modules/DankBar/CenterSection.qml

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