Update VERSION to v0.5.0 (from DMS)

* Change license to MIT

* Add RELICENSE.md tracker

* update license and add change document

.githooks/pre-commit

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+set -euo pipefail
+
+HOOK_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+REPO_ROOT="$(cd "$HOOK_DIR/.." && pwd)"
+
+cd "$REPO_ROOT"
+
+if [[ -z "${POEDITOR_API_TOKEN:-}" ]] || [[ -z "${POEDITOR_PROJECT_ID:-}" ]]; then
+    exit 0
+fi
+
+if ! command -v python3 &>/dev/null; then
+    exit 0
+fi
+
+if ! python3 scripts/i18nsync.py check &>/dev/null; then
+    echo "Translations out of sync"
+    echo "run python3 scripts/i18nsync.py sync"
+    exit 1
+fi
+
+exit 0

.github/FUNDING.yml

@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: [avengemedia]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: danklinux
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/ISSUE_TEMPLATE/bug_report.md

@@ -24,6 +24,8 @@ assignees: ""
 
 - [ ] niri
 - [ ] Hyprland
+- [ ] dwl (MangoWC)
+- [ ] sway
 - [ ] Other (specify)
 
 ## Distribution

.github/ISSUE_TEMPLATE/feature_request.md

@@ -21,6 +21,8 @@ Is this feature specific to one compositor?
 - [ ] All compositors
 - [ ] niri
 - [ ] Hyprland
+- [ ] dwl (MangoWC)
+- [ ] sway
 
 ## Proposed Solution
 

.github/ISSUE_TEMPLATE/support_request.md

@@ -10,6 +10,8 @@ assignees: ""
 
 - [ ] niri
 - [ ] Hyprland
+- [ ] dwl (MangoWC)
+- [ ] sway
 - [ ] other
 
 ## Distribution

.github/workflows/copr-release.yml

@@ -1,11 +1,10 @@
 name: DMS Copr Stable Release
 
 on:
-  push:
-    tags:
-      - 'v*'
-  release:
-    types: [published]
+  workflow_run:
+    workflows: ["Create Release from DMS"]
+    types: [completed]
+    branches: [master]
   workflow_dispatch:
     inputs:
       version:
@@ -16,7 +15,8 @@ on:
 jobs:
   build-and-upload:
     runs-on: ubuntu-latest
-    
+    if: ${{ github.event.workflow_run.conclusion == 'success' || github.event_name == 'workflow_dispatch' }}
+
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -27,20 +27,14 @@ jobs:
           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"
-          elif [ "${{ github.event_name }}" = "push" ] && [[ "${{ github.ref }}" == refs/tags/* ]]; then
-            VERSION="${{ github.ref_name }}"
-            VERSION="${VERSION#v}"
-            echo "Using tag version: $VERSION"
+          elif [ "${{ github.event_name }}" = "workflow_run" ]; then
+            VERSION=$(curl -s https://api.github.com/repos/${{ github.repository }}/releases/latest | jq -r '.tag_name' | sed 's/^v//')
+            echo "Using latest release version from workflow_run: $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//')
+            VERSION=$(curl -s https://api.github.com/repos/${{ github.repository }}/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"
       
@@ -85,24 +79,23 @@ jobs:
           Release:        1%{?dist}
           Summary:        %{pkg_summary}
 
-          License:        GPL-3.0-only
+          License:        MIT
           URL:            https://github.com/AvengeMedia/DankMaterialShell
 
           Source0:        dms-qml.tar.gz
 
           BuildRequires:  gzip
           BuildRequires:  wget
+          BuildRequires:  systemd-rpm-macros
 
           Requires:       (quickshell or quickshell-git)
+          Requires:       accountsservice
           Requires:       dms-cli
           Requires:       dgop
-          Requires:       fira-code-fonts
-          Requires:       material-symbols-fonts
-          Requires:       rsms-inter-fonts
 
-          Recommends:     brightnessctl
           Recommends:     cava
           Recommends:     cliphist
+          Recommends:     danksearch
           Recommends:     hyprpicker
           Recommends:     matugen
           Recommends:     wl-clipboard
@@ -121,7 +114,7 @@ jobs:
 
           %package -n dms-cli
           Summary:        DankMaterialShell CLI tool
-          License:        GPL-3.0-only
+          License:        MIT
           URL:            https://github.com/AvengeMedia/danklinux
 
           %description -n dms-cli
@@ -179,21 +172,49 @@ jobs:
           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/
+          # Shell completions
+          install -d %{buildroot}%{_datadir}/bash-completion/completions
+          install -d %{buildroot}%{_datadir}/zsh/site-functions
+          install -d %{buildroot}%{_datadir}/fish/vendor_completions.d
+          %{_builddir}/dms-cli completion bash > %{buildroot}%{_datadir}/bash-completion/completions/dms || :
+          %{_builddir}/dms-cli completion zsh > %{buildroot}%{_datadir}/zsh/site-functions/_dms || :
+          %{_builddir}/dms-cli completion fish > %{buildroot}%{_datadir}/fish/vendor_completions.d/dms.fish || :
 
-          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
+          install -Dm644 %{_builddir}/dms-qml/assets/systemd/dms.service %{buildroot}%{_userunitdir}/dms.service
+
+          install -dm755 %{buildroot}%{_datadir}/quickshell/dms
+          cp -r %{_builddir}/dms-qml/* %{buildroot}%{_datadir}/quickshell/dms/
+
+          rm -rf %{buildroot}%{_datadir}/quickshell/dms/.git*
+          rm -f %{buildroot}%{_datadir}/quickshell/dms/.gitignore
+          rm -rf %{buildroot}%{_datadir}/quickshell/dms/.github
+          rm -f %{buildroot}%{_datadir}/quickshell/dms/*.spec
+
+          %posttrans
+          # Clean up old installation path from previous versions (only if empty)
+          if [ -d "%{_sysconfdir}/xdg/quickshell/dms" ]; then
+              # Remove directories only if empty (preserves any user-added files)
+              rmdir "%{_sysconfdir}/xdg/quickshell/dms" 2>/dev/null || true
+              rmdir "%{_sysconfdir}/xdg/quickshell" 2>/dev/null || true
+              rmdir "%{_sysconfdir}/xdg" 2>/dev/null || true
+          fi
+
+          # Restart DMS for active users after upgrade
+          if [ "$1" -ge 2 ]; then
+            pkill -USR1 -x dms >/dev/null 2>&1 || true
+          fi
 
           %files
           %license LICENSE
           %doc README.md CONTRIBUTING.md
-          %{_sysconfdir}/xdg/quickshell/dms/
+          %{_datadir}/quickshell/dms/
+          %{_userunitdir}/dms.service
 
           %files -n dms-cli
           %{_bindir}/dms
+          %{_datadir}/bash-completion/completions/dms
+          %{_datadir}/zsh/site-functions/_dms
+          %{_datadir}/fish/vendor_completions.d/dms.fish
 
           %files -n dgop
           %{_bindir}/dgop

.github/workflows/poeditor-export.yml

@@ -1,189 +0,0 @@
-name: POEditor Diff & Sync
-
-on:
-  push:
-    branches: [ master ]
-  workflow_dispatch: {}
-
-concurrency:
-  group: poeditor-sync
-  cancel-in-progress: false
-
-jobs:
-  sync-translations:
-    runs-on: ubuntu-latest
-    timeout-minutes: 20
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Setup Python
-        uses: actions/setup-python@v4
-        with:
-          python-version: '3.x'
-
-      - name: Install jq
-        run: sudo apt-get update && sudo apt-get install -y jq
-
-      - name: Extract source strings from codebase
-        env:
-          API_TOKEN: ${{ secrets.POEDITOR_API_TOKEN }}
-          PROJECT_ID: ${{ secrets.POEDITOR_PROJECT_ID }}
-        run: |
-          set -euo pipefail
-
-          echo "::group::Extracting strings from QML files"
-          python3 translations/extract_translations.py
-          echo "::endgroup::"
-
-          echo "::group::Checking for changes in en.json"
-          if [[ -f "translations/en.json" ]]; then
-            jq -S . "translations/en.json" > /tmp/en_new.json
-            if [[ -f "translations/en.json.orig" ]]; then
-              jq -S . "translations/en.json.orig" > /tmp/en_old.json
-            else
-              git show HEAD:translations/en.json > /tmp/en_old.json 2>/dev/null || echo "[]" > /tmp/en_old.json
-              jq -S . /tmp/en_old.json > /tmp/en_old.json.tmp && mv /tmp/en_old.json.tmp /tmp/en_old.json
-            fi
-
-            if diff -q /tmp/en_new.json /tmp/en_old.json >/dev/null 2>&1; then
-              echo "No changes in source strings"
-              echo "source_changed=false" >> "$GITHUB_OUTPUT"
-            else
-              echo "Detected changes in source strings"
-              echo "source_changed=true" >> "$GITHUB_OUTPUT"
-
-              echo "::group::Uploading source strings to POEditor"
-              RESP=$(curl -sS -X POST https://api.poeditor.com/v2/projects/upload \
-                -F api_token="$API_TOKEN" \
-                -F id="$PROJECT_ID" \
-                -F updating="terms" \
-                -F file=@"translations/en.json")
-
-              STATUS=$(echo "$RESP" | jq -r '.response.status')
-              if [[ "$STATUS" != "success" ]]; then
-                echo "::warning::POEditor upload failed: $RESP"
-              else
-                TERMS_ADDED=$(echo "$RESP" | jq -r '.result.terms.added // 0')
-                TERMS_UPDATED=$(echo "$RESP" | jq -r '.result.terms.updated // 0')
-                TERMS_DELETED=$(echo "$RESP" | jq -r '.result.terms.deleted // 0')
-                echo "Terms added: $TERMS_ADDED, updated: $TERMS_UPDATED, deleted: $TERMS_DELETED"
-              fi
-              echo "::endgroup::"
-            fi
-          else
-            echo "::warning::translations/en.json not found"
-            echo "source_changed=false" >> "$GITHUB_OUTPUT"
-          fi
-          echo "::endgroup::"
-        id: extract
-
-      - name: Commit and push source strings
-        if: steps.extract.outputs.source_changed == 'true'
-        run: |
-          set -euo pipefail
-
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-
-          git add translations/en.json translations/template.json
-          git commit -m "i18n: update source strings from codebase"
-
-          for attempt in 1 2 3; do
-            if git push; then
-              echo "Successfully pushed source string updates"
-              exit 0
-            fi
-            echo "Push attempt $attempt failed, pulling and retrying..."
-            git pull --rebase
-            sleep $((attempt*2))
-          done
-
-          echo "Failed to push after retries" >&2
-          exit 1
-
-      - name: Export and update translations from POEditor
-        env:
-          API_TOKEN: ${{ secrets.POEDITOR_API_TOKEN }}
-          PROJECT_ID: ${{ secrets.POEDITOR_PROJECT_ID }}
-        run: |
-          set -euo pipefail
-
-          LANGUAGES=(
-            "ja:translations/poexports/ja.json"
-            "zh-Hans:translations/poexports/zh_CN.json"
-            "pt-br:translations/poexports/pt.json"
-          )
-
-          ANY_CHANGED=false
-
-          for lang_pair in "${LANGUAGES[@]}"; do
-            IFS=':' read -r PO_LANG REPO_FILE <<< "$lang_pair"
-
-            echo "::group::Processing $PO_LANG"
-
-            RESP=$(curl -sS -X POST https://api.poeditor.com/v2/projects/export \
-              -d api_token="$API_TOKEN" \
-              -d id="$PROJECT_ID" \
-              -d language="$PO_LANG" \
-              -d type="key_value_json")
-
-            STATUS=$(echo "$RESP" | jq -r '.response.status')
-            if [[ "$STATUS" != "success" ]]; then
-              echo "POEditor export request failed for $PO_LANG: $RESP" >&2
-              continue
-            fi
-
-            URL=$(echo "$RESP" | jq -r '.result.url')
-            if [[ -z "$URL" || "$URL" == "null" ]]; then
-              echo "No export URL returned for $PO_LANG" >&2
-              continue
-            fi
-
-            curl -sS -L "$URL" -o "/tmp/po_export_${PO_LANG}.json"
-            jq -S . "/tmp/po_export_${PO_LANG}.json" > "/tmp/po_export_${PO_LANG}.norm.json"
-
-            if [[ -f "$REPO_FILE" ]]; then
-              jq -S . "$REPO_FILE" > "/tmp/repo_${PO_LANG}.norm.json" || echo "{}" > "/tmp/repo_${PO_LANG}.norm.json"
-            else
-              echo "{}" > "/tmp/repo_${PO_LANG}.norm.json"
-            fi
-
-            if diff -q "/tmp/po_export_${PO_LANG}.norm.json" "/tmp/repo_${PO_LANG}.norm.json" >/dev/null; then
-              echo "No changes for $PO_LANG"
-            else
-              echo "Detected changes for $PO_LANG"
-              mkdir -p "$(dirname "$REPO_FILE")"
-              cp "/tmp/po_export_${PO_LANG}.norm.json" "$REPO_FILE"
-              ANY_CHANGED=true
-            fi
-
-            echo "::endgroup::"
-          done
-
-          echo "any_changed=$ANY_CHANGED" >> "$GITHUB_OUTPUT"
-        id: export
-
-      - name: Commit and push translation updates
-        if: steps.export.outputs.any_changed == 'true'
-        run: |
-          set -euo pipefail
-
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-
-          git add translations/poexports/*.json
-          git commit -m "i18n: update translations"
-
-          for attempt in 1 2 3; do
-            if git push; then
-              echo "Successfully pushed translation updates"
-              exit 0
-            fi
-            echo "Push attempt $attempt failed, pulling and retrying..."
-            git pull --rebase
-            sleep $((attempt*2))
-          done
-
-          echo "Failed to push after retries" >&2
-          exit 1

.github/workflows/release.yml

@@ -49,17 +49,17 @@ jobs:
           set -e
           PREVIOUS_TAG=$(git describe --tags --abbrev=0 "${TAG}^" 2>/dev/null || echo "")
           if [ -z "$PREVIOUS_TAG" ]; then
-            CHANGELOG=$(git log --oneline --pretty=format:"- %s (%h)" | head -50)
+            CHANGELOG=$(git log --oneline --pretty=format:"%an|%s (%h)" | grep -v "^github-actions\[bot\]|" | sed 's/^[^|]*|/- /' | head -50)
           else
-            CHANGELOG=$(git log --oneline --pretty=format:"- %s (%h)" "${PREVIOUS_TAG}..${TAG}")
+            CHANGELOG=$(git log --oneline --pretty=format:"%an|%s (%h)" "${PREVIOUS_TAG}..${TAG}" | grep -v "^github-actions\[bot\]|" | sed 's/^[^|]*|/- /')
           fi
 
           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)
+          - **`dms-full-amd64.tar.gz`** - Complete package for x86_64 systems (CLI binaries + QML source + shell completions + installation guide)
+          - **`dms-full-arm64.tar.gz`** - Complete package for ARM64 systems (CLI binaries + QML source + shell completions + installation guide)
 
           ### Individual Components
           - **`dms-cli-amd64.gz`** - DMS CLI binary for x86_64 systems
@@ -135,27 +135,28 @@ jobs:
           # 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
+            mkdir -p _temp_full/completions
 
-            # 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
+            for completion in _dms_assets/completion.*; do
+              if [ -f "$completion" ]; then
+                cp "$completion" _temp_full/completions/
+              fi
+            done
             cat > _temp_full/INSTALL.md << 'EOF'
           # DankMaterialShell Installation
 
@@ -176,16 +177,23 @@ jobs:
           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:**
+          3. **Install shell completions (optional):**
+             ```bash
+             # Bash
+             sudo install -m 644 completions/completion.bash /usr/share/bash-completion/completions/dms
+
+             # Fish
+             sudo install -m 644 completions/completion.fish /usr/share/fish/vendor_completions.d/dms.fish
+
+             # Zsh
+             sudo install -m 644 completions/completion.zsh /usr/share/zsh/site-functions/_dms
+             ```
+
+          4. **Start the shell:**
              ```bash
              dms run
-             # or directly with quickshell (will lack some dbus integrations & plugin management):
-             quickshell -p ~/.config/quickshell/dms
              ```
 
           ## Configuration
@@ -219,25 +227,3 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Extract plain version
-        id: plain_version
-        run: |
-          set -e
-          if [[ "$TAG" == v* ]]; then
-            VERSION="${TAG#v}"
-          else
-            VERSION="$TAG"
-          fi
-          echo "plain=$VERSION" >> "$GITHUB_OUTPUT"
-
-      - name: Trigger Copr release workflow
-        run: |
-          set -euo pipefail
-          VERSION="${{ steps.plain_version.outputs.plain }}"
-          JSON_PAYLOAD=$(jq -n --arg version "$VERSION" '{inputs:{version:$version}}')
-          curl -X POST \
-               -H "Accept: application/vnd.github+json" \
-               -H "Authorization: Bearer ${{ secrets.GITHUB_TOKEN }}" \
-               -H "X-GitHub-Api-Version: 2022-11-28" \
-               https://api.github.com/repos/${{ github.repository }}/actions/workflows/copr-release.yml/dispatches \
-               -d "$JSON_PAYLOAD"

Common/CacheData.qml

@@ -22,6 +22,57 @@ Singleton {
     property string wallpaperLastPath: ""
     property string profileLastPath: ""
 
+    property var fileBrowserSettings: ({
+        "wallpaper": {
+            "lastPath": "",
+            "viewMode": "grid",
+            "sortBy": "name",
+            "sortAscending": true,
+            "iconSizeIndex": 1,
+            "showSidebar": true
+        },
+        "profile": {
+            "lastPath": "",
+            "viewMode": "grid",
+            "sortBy": "name",
+            "sortAscending": true,
+            "iconSizeIndex": 1,
+            "showSidebar": true
+        },
+        "notepad_save": {
+            "lastPath": "",
+            "viewMode": "list",
+            "sortBy": "name",
+            "sortAscending": true,
+            "iconSizeIndex": 1,
+            "showSidebar": true
+        },
+        "notepad_load": {
+            "lastPath": "",
+            "viewMode": "list",
+            "sortBy": "name",
+            "sortAscending": true,
+            "iconSizeIndex": 1,
+            "showSidebar": true
+        },
+        "generic": {
+            "lastPath": "",
+            "viewMode": "list",
+            "sortBy": "name",
+            "sortAscending": true,
+            "iconSizeIndex": 1,
+            "showSidebar": true
+        },
+        "default": {
+            "lastPath": "",
+            "viewMode": "list",
+            "sortBy": "name",
+            "sortAscending": true,
+            "iconSizeIndex": 1,
+            "showSidebar": true
+        }
+    })
+
     Component.onCompleted: {
         if (!isGreeterMode) {
             loadCache()
@@ -43,6 +94,37 @@ Singleton {
                 wallpaperLastPath = cache.wallpaperLastPath !== undefined ? cache.wallpaperLastPath : ""
                 profileLastPath = cache.profileLastPath !== undefined ? cache.profileLastPath : ""
 
+                if (cache.fileBrowserSettings !== undefined) {
+                    fileBrowserSettings = cache.fileBrowserSettings
+                } else if (cache.fileBrowserViewMode !== undefined) {
+                    fileBrowserSettings = {
+                        "wallpaper": {
+                            "lastPath": cache.wallpaperLastPath || "",
+                            "viewMode": cache.fileBrowserViewMode || "grid",
+                            "sortBy": cache.fileBrowserSortBy || "name",
+                            "sortAscending": cache.fileBrowserSortAscending !== undefined ? cache.fileBrowserSortAscending : true,
+                            "iconSizeIndex": cache.fileBrowserIconSizeIndex !== undefined ? cache.fileBrowserIconSizeIndex : 1,
+                            "showSidebar": cache.fileBrowserShowSidebar !== undefined ? cache.fileBrowserShowSidebar : true
+                        },
+                        "profile": {
+                            "lastPath": cache.profileLastPath || "",
+                            "viewMode": cache.fileBrowserViewMode || "grid",
+                            "sortBy": cache.fileBrowserSortBy || "name",
+                            "sortAscending": cache.fileBrowserSortAscending !== undefined ? cache.fileBrowserSortAscending : true,
+                            "iconSizeIndex": cache.fileBrowserIconSizeIndex !== undefined ? cache.fileBrowserIconSizeIndex : 1,
+                            "showSidebar": cache.fileBrowserShowSidebar !== undefined ? cache.fileBrowserShowSidebar : true
+                        },
+                        "file": {
+                            "lastPath": "",
+                            "viewMode": "list",
+                            "sortBy": "name",
+                            "sortAscending": true,
+                            "iconSizeIndex": 1,
+                            "showSidebar": true
+                        }
+                    }
+                }
+
                 if (cache.configVersion === undefined) {
                     migrateFromUndefinedToV1(cache)
                     cleanupUnusedKeys()
@@ -62,6 +144,7 @@ Singleton {
         cacheFile.setText(JSON.stringify({
                                              "wallpaperLastPath": wallpaperLastPath,
                                              "profileLastPath": profileLastPath,
+                                             "fileBrowserSettings": fileBrowserSettings,
                                              "configVersion": cacheConfigVersion
                                          }, null, 2))
     }
@@ -74,6 +157,7 @@ Singleton {
         const validKeys = [
             "wallpaperLastPath",
             "profileLastPath",
+            "fileBrowserSettings",
             "configVersion"
         ]
 

Common/Paths.qml

@@ -53,7 +53,7 @@ Singleton {
     // ! Spotify and maybe some other apps report the wrong app id in toplevels, hardcode special case
     function moddedAppId(appId: string): string {
         if (appId === "Spotify")
-            return "spotify-launcher"
+            return "spotify"
         if (appId === "beepertexts")
             return "beeper"
         if (appId === "home assistant desktop")

Common/Proc.qml

@@ -9,20 +9,24 @@ Singleton {
     id: root
 
     property int defaultDebounceMs: 50
-    property var _procDebouncers: ({}) // id -> { timer, command, callback, waitMs }
+    property int defaultTimeoutMs: 10000
+    property var _procDebouncers: ({})
 
-    function runCommand(id, command, callback, debounceMs) {
+    function runCommand(id, command, callback, debounceMs, timeoutMs) {
         const wait = (typeof debounceMs === "number" && debounceMs >= 0) ? debounceMs : defaultDebounceMs
-        let procId = id ? id : Math.random()        
+        const timeout = (typeof timeoutMs === "number" && timeoutMs > 0) ? timeoutMs : defaultTimeoutMs
+        let procId = id ? id : Math.random()
+        const isRandomId = !id
 
         if (!_procDebouncers[procId]) {
             const t = Qt.createQmlObject('import QtQuick; Timer { repeat: false }', root)
-            t.triggered.connect(function() { _launchProc(procId) })
-            _procDebouncers[procId] = { timer: t, command: command, callback: callback, waitMs: wait }
+            t.triggered.connect(function() { _launchProc(procId, isRandomId) })
+            _procDebouncers[procId] = { timer: t, command: command, callback: callback, waitMs: wait, timeoutMs: timeout, isRandomId: isRandomId }
         } else {
             _procDebouncers[procId].command = command
             _procDebouncers[procId].callback = callback
             _procDebouncers[procId].waitMs = wait
+            _procDebouncers[procId].timeoutMs = timeout
         }
 
         const entry = _procDebouncers[procId]
@@ -30,41 +34,77 @@ Singleton {
         entry.timer.restart()
     }
 
-    function _launchProc(id) {
+    function _launchProc(id, isRandomId) {
         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)
+        const timeoutTimer = Qt.createQmlObject('import QtQuick; Timer { repeat: false }', root)
 
         proc.stdout = out
         proc.stderr = err
         proc.command = entry.command
 
         let capturedOut = ""
+        let capturedErr = ""
         let exitSeen = false
         let exitCodeValue = -1
+        let outSeen = false
+        let errSeen = false
+        let timedOut = false
+
+        timeoutTimer.interval = entry.timeoutMs
+        timeoutTimer.triggered.connect(function() {
+            if (!exitSeen) {
+                timedOut = true
+                proc.running = false
+                exitSeen = true
+                exitCodeValue = 124
+                maybeComplete()
+            }
+        })
 
         out.streamFinished.connect(function() {
             capturedOut = out.text || ""
+            outSeen = true
+            maybeComplete()
+        })
+
+        err.streamFinished.connect(function() {
+            capturedErr = err.text || ""
+            errSeen = true
             maybeComplete()
         })
 
         proc.exited.connect(function(code) {
+            timeoutTimer.stop()
             exitSeen = true
             exitCodeValue = code
             maybeComplete()
         })
 
         function maybeComplete() {
-            if (!exitSeen) return
+            if (!exitSeen || !outSeen || !errSeen) return
+            timeoutTimer.stop()
             if (typeof entry.callback === "function") {
                 try { entry.callback(capturedOut, exitCodeValue) } catch (e) { console.warn("runCommand callback error:", e) }
             }
             try { proc.destroy() } catch (_) {}
+            try { timeoutTimer.destroy() } catch (_) {}
+
+            if (isRandomId || entry.isRandomId) {
+                Qt.callLater(function() {
+                    if (_procDebouncers[id]) {
+                        try { _procDebouncers[id].timer.destroy() } catch (_) {}
+                        delete _procDebouncers[id]
+                    }
+                })
+            }
         }
 
         proc.running = true
+        timeoutTimer.start()
     }
 }

Common/SessionData.qml

@@ -1,4 +1,5 @@
 pragma Singleton
+
 pragma ComponentBehavior: Bound
 
 import QtCore
@@ -20,6 +21,7 @@ Singleton {
 
     property bool isLightMode: false
     property bool doNotDisturb: false
+    property bool isSwitchingMode: false
 
     property string wallpaperPath: ""
     property bool perMonitorWallpaper: false
@@ -41,6 +43,7 @@ Singleton {
 
     property bool nightModeEnabled: false
     property int nightModeTemperature: 4500
+    property int nightModeHighTemperature: 6500
     property bool nightModeAutoEnabled: false
     property string nightModeAutoMode: "time"
     property int nightModeStartHour: 18
@@ -53,10 +56,14 @@ Singleton {
     property string nightModeLocationProvider: ""
 
     property var pinnedApps: []
+    property var hiddenTrayIds: []
     property var recentColors: []
     property bool showThirdPartyPlugins: false
     property string launchPrefix: ""
     property string lastBrightnessDevice: ""
+    property var brightnessExponentialDevices: ({})
+    property var brightnessUserSetValues: ({})
+    property var brightnessExponentValues: ({})
 
     property int selectedGpuIndex: 0
     property bool nvidiaGpuTempEnabled: false
@@ -82,7 +89,21 @@ Singleton {
             if (content && content.trim()) {
                 var settings = JSON.parse(content)
                 isLightMode = settings.isLightMode !== undefined ? settings.isLightMode : false
-                wallpaperPath = settings.wallpaperPath !== undefined ? settings.wallpaperPath : ""
+
+                if (settings.wallpaperPath && settings.wallpaperPath.startsWith("we:")) {
+                    console.warn("WallpaperEngine wallpaper detected, resetting wallpaper")
+                    wallpaperPath = ""
+                    Quickshell.execDetached([
+                        "notify-send",
+                        "-u", "critical",
+                        "-a", "DMS",
+                        "-i", "dialog-warning",
+                        "WallpaperEngine Support Moved",
+                        "WallpaperEngine support has been moved to a plugin. Please enable the Linux Wallpaper Engine plugin in Settings → Plugins to continue using WallpaperEngine."
+                    ])
+                } else {
+                    wallpaperPath = settings.wallpaperPath !== undefined ? settings.wallpaperPath : ""
+                }
                 perMonitorWallpaper = settings.perMonitorWallpaper !== undefined ? settings.perMonitorWallpaper : false
                 monitorWallpapers = settings.monitorWallpapers !== undefined ? settings.monitorWallpapers : {}
                 perModeWallpaper = settings.perModeWallpaper !== undefined ? settings.perModeWallpaper : false
@@ -90,9 +111,13 @@ Singleton {
                 wallpaperPathDark = settings.wallpaperPathDark !== undefined ? settings.wallpaperPathDark : ""
                 monitorWallpapersLight = settings.monitorWallpapersLight !== undefined ? settings.monitorWallpapersLight : {}
                 monitorWallpapersDark = settings.monitorWallpapersDark !== undefined ? settings.monitorWallpapersDark : {}
+                brightnessExponentialDevices = settings.brightnessExponentialDevices !== undefined ? settings.brightnessExponentialDevices : (settings.brightnessLogarithmicDevices || {})
+                brightnessUserSetValues = settings.brightnessUserSetValues !== undefined ? settings.brightnessUserSetValues : {}
+                brightnessExponentValues = settings.brightnessExponentValues !== undefined ? settings.brightnessExponentValues : {}
                 doNotDisturb = settings.doNotDisturb !== undefined ? settings.doNotDisturb : false
                 nightModeEnabled = settings.nightModeEnabled !== undefined ? settings.nightModeEnabled : false
                 nightModeTemperature = settings.nightModeTemperature !== undefined ? settings.nightModeTemperature : 4500
+                nightModeHighTemperature = settings.nightModeHighTemperature !== undefined ? settings.nightModeHighTemperature : 6500
                 nightModeAutoEnabled = settings.nightModeAutoEnabled !== undefined ? settings.nightModeAutoEnabled : false
                 nightModeAutoMode = settings.nightModeAutoMode !== undefined ? settings.nightModeAutoMode : "time"
                 if (settings.nightModeStartTime !== undefined) {
@@ -116,6 +141,7 @@ Singleton {
                 nightModeUseIPLocation = settings.nightModeUseIPLocation !== undefined ? settings.nightModeUseIPLocation : false
                 nightModeLocationProvider = settings.nightModeLocationProvider !== undefined ? settings.nightModeLocationProvider : ""
                 pinnedApps = settings.pinnedApps !== undefined ? settings.pinnedApps : []
+                hiddenTrayIds = settings.hiddenTrayIds !== undefined ? settings.hiddenTrayIds : []
                 selectedGpuIndex = settings.selectedGpuIndex !== undefined ? settings.selectedGpuIndex : 0
                 nvidiaGpuTempEnabled = settings.nvidiaGpuTempEnabled !== undefined ? settings.nvidiaGpuTempEnabled : false
                 nonNvidiaGpuTempEnabled = settings.nonNvidiaGpuTempEnabled !== undefined ? settings.nonNvidiaGpuTempEnabled : false
@@ -144,6 +170,10 @@ Singleton {
                         Theme.generateSystemThemesFromCurrentTheme()
                     }
                 }
+
+                if (typeof WallpaperCyclingService !== "undefined") {
+                    WallpaperCyclingService.updateCyclingState()
+                }
             }
         } catch (e) {
 
@@ -151,7 +181,8 @@ Singleton {
     }
 
     function saveSettings() {
-        if (isGreeterMode) return
+        if (isGreeterMode)
+            return
         settingsFile.setText(JSON.stringify({
                                                 "isLightMode": isLightMode,
                                                 "wallpaperPath": wallpaperPath,
@@ -162,9 +193,13 @@ Singleton {
                                                 "wallpaperPathDark": wallpaperPathDark,
                                                 "monitorWallpapersLight": monitorWallpapersLight,
                                                 "monitorWallpapersDark": monitorWallpapersDark,
+                                                "brightnessExponentialDevices": brightnessExponentialDevices,
+                                                "brightnessUserSetValues": brightnessUserSetValues,
+                                                "brightnessExponentValues": brightnessExponentValues,
                                                 "doNotDisturb": doNotDisturb,
                                                 "nightModeEnabled": nightModeEnabled,
                                                 "nightModeTemperature": nightModeTemperature,
+                                                "nightModeHighTemperature": nightModeHighTemperature,
                                                 "nightModeAutoEnabled": nightModeAutoEnabled,
                                                 "nightModeAutoMode": nightModeAutoMode,
                                                 "nightModeStartHour": nightModeStartHour,
@@ -176,6 +211,7 @@ Singleton {
                                                 "nightModeUseIPLocation": nightModeUseIPLocation,
                                                 "nightModeLocationProvider": nightModeLocationProvider,
                                                 "pinnedApps": pinnedApps,
+                                                "hiddenTrayIds": hiddenTrayIds,
                                                 "selectedGpuIndex": selectedGpuIndex,
                                                 "nvidiaGpuTempEnabled": nvidiaGpuTempEnabled,
                                                 "nonNvidiaGpuTempEnabled": nonNvidiaGpuTempEnabled,
@@ -199,37 +235,37 @@ Singleton {
         console.info("SessionData: Migrating configuration from undefined to version 1")
         if (typeof SettingsData !== "undefined") {
             if (settings.acMonitorTimeout !== undefined) {
-                SettingsData.setAcMonitorTimeout(settings.acMonitorTimeout)
+                SettingsData.set("acMonitorTimeout", settings.acMonitorTimeout)
             }
             if (settings.acLockTimeout !== undefined) {
-                SettingsData.setAcLockTimeout(settings.acLockTimeout)
+                SettingsData.set("acLockTimeout", settings.acLockTimeout)
             }
             if (settings.acSuspendTimeout !== undefined) {
-                SettingsData.setAcSuspendTimeout(settings.acSuspendTimeout)
+                SettingsData.set("acSuspendTimeout", settings.acSuspendTimeout)
             }
             if (settings.acHibernateTimeout !== undefined) {
-                SettingsData.setAcHibernateTimeout(settings.acHibernateTimeout)
+                SettingsData.set("acHibernateTimeout", settings.acHibernateTimeout)
             }
             if (settings.batteryMonitorTimeout !== undefined) {
-                SettingsData.setBatteryMonitorTimeout(settings.batteryMonitorTimeout)
+                SettingsData.set("batteryMonitorTimeout", settings.batteryMonitorTimeout)
             }
             if (settings.batteryLockTimeout !== undefined) {
-                SettingsData.setBatteryLockTimeout(settings.batteryLockTimeout)
+                SettingsData.set("batteryLockTimeout", settings.batteryLockTimeout)
             }
             if (settings.batterySuspendTimeout !== undefined) {
-                SettingsData.setBatterySuspendTimeout(settings.batterySuspendTimeout)
+                SettingsData.set("batterySuspendTimeout", settings.batterySuspendTimeout)
             }
             if (settings.batteryHibernateTimeout !== undefined) {
-                SettingsData.setBatteryHibernateTimeout(settings.batteryHibernateTimeout)
+                SettingsData.set("batteryHibernateTimeout", settings.batteryHibernateTimeout)
             }
             if (settings.lockBeforeSuspend !== undefined) {
-                SettingsData.setLockBeforeSuspend(settings.lockBeforeSuspend)
+                SettingsData.set("lockBeforeSuspend", settings.lockBeforeSuspend)
             }
             if (settings.loginctlLockIntegration !== undefined) {
-                SettingsData.setLoginctlLockIntegration(settings.loginctlLockIntegration)
+                SettingsData.set("loginctlLockIntegration", settings.loginctlLockIntegration)
             }
             if (settings.launchPrefix !== undefined) {
-                SettingsData.setLaunchPrefix(settings.launchPrefix)
+                SettingsData.set("launchPrefix", settings.launchPrefix)
             }
         }
         if (typeof CacheData !== "undefined") {
@@ -244,23 +280,12 @@ Singleton {
     }
 
     function cleanupUnusedKeys() {
-        const validKeys = [
-            "isLightMode", "wallpaperPath", "perMonitorWallpaper", "monitorWallpapers", "perModeWallpaper",
-            "wallpaperPathLight", "wallpaperPathDark", "monitorWallpapersLight",
-            "monitorWallpapersDark", "doNotDisturb", "nightModeEnabled",
-            "nightModeTemperature", "nightModeAutoEnabled", "nightModeAutoMode",
-            "nightModeStartHour", "nightModeStartMinute", "nightModeEndHour",
-            "nightModeEndMinute", "latitude", "longitude", "nightModeUseIPLocation", "nightModeLocationProvider",
-            "pinnedApps", "selectedGpuIndex", "nvidiaGpuTempEnabled",
-            "nonNvidiaGpuTempEnabled", "enabledGpuPciIds", "wallpaperCyclingEnabled",
-            "wallpaperCyclingMode", "wallpaperCyclingInterval", "wallpaperCyclingTime",
-            "monitorCyclingSettings", "lastBrightnessDevice", "launchPrefix", "wallpaperTransition",
-            "includedTransitions", "recentColors", "showThirdPartyPlugins", "configVersion"
-        ]
+        const validKeys = ["isLightMode", "wallpaperPath", "perMonitorWallpaper", "monitorWallpapers", "perModeWallpaper", "wallpaperPathLight", "wallpaperPathDark", "monitorWallpapersLight", "monitorWallpapersDark", "doNotDisturb", "nightModeEnabled", "nightModeTemperature", "nightModeHighTemperature", "nightModeAutoEnabled", "nightModeAutoMode", "nightModeStartHour", "nightModeStartMinute", "nightModeEndHour", "nightModeEndMinute", "latitude", "longitude", "nightModeUseIPLocation", "nightModeLocationProvider", "pinnedApps", "hiddenTrayIds", "selectedGpuIndex", "nvidiaGpuTempEnabled", "nonNvidiaGpuTempEnabled", "enabledGpuPciIds", "wallpaperCyclingEnabled", "wallpaperCyclingMode", "wallpaperCyclingInterval", "wallpaperCyclingTime", "monitorCyclingSettings", "lastBrightnessDevice", "brightnessExponentialDevices", "brightnessUserSetValues", "brightnessExponentValues", "launchPrefix", "wallpaperTransition", "includedTransitions", "recentColors", "showThirdPartyPlugins", "configVersion"]
 
         try {
             const content = settingsFile.text()
-            if (!content || !content.trim()) return
+            if (!content || !content.trim())
+                return
 
             const settings = JSON.parse(content)
             let needsSave = false
@@ -282,9 +307,11 @@ Singleton {
     }
 
     function setLightMode(lightMode) {
+        isSwitchingMode = true
         isLightMode = lightMode
         syncWallpaperForCurrentMode()
         saveSettings()
+        Qt.callLater(() => { isSwitchingMode = false })
     }
 
     function setDoNotDisturb(enabled) {
@@ -425,10 +452,13 @@ Singleton {
 
         saveSettings()
 
-        if (typeof Theme !== "undefined" && typeof Quickshell !== "undefined") {
+        if (typeof Theme !== "undefined" && typeof Quickshell !== "undefined" && typeof SettingsData !== "undefined") {
             var screens = Quickshell.screens
-            if (screens.length > 0 && screenName === screens[0].name) {
-                Theme.generateSystemThemesFromCurrentTheme()
+            if (screens.length > 0) {
+                var targetMonitor = (SettingsData.matugenTargetMonitor && SettingsData.matugenTargetMonitor !== "") ? SettingsData.matugenTargetMonitor : screens[0].name
+                if (screenName === targetMonitor) {
+                    Theme.generateSystemThemesFromCurrentTheme()
+                }
             }
         }
     }
@@ -461,7 +491,12 @@ Singleton {
     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": false,
+                "mode": "interval",
+                "interval": 300,
+                "time": "06:00"
+            }
         }
         newSettings[screenName].enabled = enabled
         monitorCyclingSettings = newSettings
@@ -471,7 +506,12 @@ Singleton {
     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] = {
+                "enabled": false,
+                "mode": "interval",
+                "interval": 300,
+                "time": "06:00"
+            }
         }
         newSettings[screenName].mode = mode
         monitorCyclingSettings = newSettings
@@ -481,7 +521,12 @@ Singleton {
     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] = {
+                "enabled": false,
+                "mode": "interval",
+                "interval": 300,
+                "time": "06:00"
+            }
         }
         newSettings[screenName].interval = interval
         monitorCyclingSettings = newSettings
@@ -491,7 +536,12 @@ Singleton {
     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] = {
+                "enabled": false,
+                "mode": "interval",
+                "interval": 300,
+                "time": "06:00"
+            }
         }
         newSettings[screenName].time = time
         monitorCyclingSettings = newSettings
@@ -508,6 +558,11 @@ Singleton {
         saveSettings()
     }
 
+    function setNightModeHighTemperature(temperature) {
+        nightModeHighTemperature = temperature
+        saveSettings()
+    }
+
     function setNightModeAutoEnabled(enabled) {
         console.log("SessionData: Setting nightModeAutoEnabled to", enabled)
         nightModeAutoEnabled = enabled
@@ -587,12 +642,33 @@ Singleton {
         return appId && pinnedApps.indexOf(appId) !== -1
     }
 
+    function hideTrayId(trayId) {
+        if (!trayId) return
+        const current = [...hiddenTrayIds]
+        if (current.indexOf(trayId) === -1) {
+            current.push(trayId)
+            hiddenTrayIds = current
+            saveSettings()
+        }
+    }
+
+    function showTrayId(trayId) {
+        if (!trayId) return
+        hiddenTrayIds = hiddenTrayIds.filter(id => id !== trayId)
+        saveSettings()
+    }
+
+    function isHiddenTrayId(trayId) {
+        return trayId && hiddenTrayIds.indexOf(trayId) !== -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)
+        if (recent.length > 5)
+            recent = recent.slice(0, 5)
         recentColors = recent
         saveSettings()
     }
@@ -612,6 +688,52 @@ Singleton {
         saveSettings()
     }
 
+    function setBrightnessExponential(deviceName, enabled) {
+        var newSettings = Object.assign({}, brightnessExponentialDevices)
+        if (enabled) {
+            newSettings[deviceName] = true
+        } else {
+            delete newSettings[deviceName]
+        }
+        brightnessExponentialDevices = newSettings
+        saveSettings()
+
+        if (typeof DisplayService !== "undefined") {
+            DisplayService.updateDeviceBrightnessDisplay(deviceName)
+        }
+    }
+
+    function getBrightnessExponential(deviceName) {
+        return brightnessExponentialDevices[deviceName] === true
+    }
+
+    function setBrightnessUserSetValue(deviceName, value) {
+        var newValues = Object.assign({}, brightnessUserSetValues)
+        newValues[deviceName] = value
+        brightnessUserSetValues = newValues
+        saveSettings()
+    }
+
+    function getBrightnessUserSetValue(deviceName) {
+        return brightnessUserSetValues[deviceName]
+    }
+
+    function setBrightnessExponent(deviceName, exponent) {
+        var newValues = Object.assign({}, brightnessExponentValues)
+        if (exponent !== undefined && exponent !== null) {
+            newValues[deviceName] = exponent
+        } else {
+            delete newValues[deviceName]
+        }
+        brightnessExponentValues = newValues
+        saveSettings()
+    }
+
+    function getBrightnessExponent(deviceName) {
+        const value = brightnessExponentValues[deviceName]
+        return value !== undefined ? value : 1.2
+    }
+
     function setSelectedGpuIndex(index) {
         selectedGpuIndex = index
         saveSettings()
@@ -633,7 +755,8 @@ Singleton {
     }
 
     function syncWallpaperForCurrentMode() {
-        if (!perModeWallpaper) return
+        if (!perModeWallpaper)
+            return
 
         if (perMonitorWallpaper) {
             monitorWallpapers = isLightMode ? Object.assign({}, monitorWallpapersLight) : Object.assign({}, monitorWallpapersDark)
@@ -652,10 +775,10 @@ Singleton {
 
     function getMonitorCyclingSettings(screenName) {
         return monitorCyclingSettings[screenName] || {
-            enabled: false,
-            mode: "interval",
-            interval: 300,
-            time: "06:00"
+            "enabled": false,
+            "mode": "interval",
+            "interval": 300,
+            "time": "06:00"
         }
     }
 

Common/Theme.qml

@@ -9,6 +9,7 @@ import Quickshell.Io
 import Quickshell.Services.UPower
 import qs.Common
 import qs.Services
+import qs.Modules.Greetd
 import "StockThemes.js" as StockThemes
 
 Singleton {
@@ -19,7 +20,8 @@ Singleton {
     readonly property bool envDisableMatugen: Quickshell.env("DMS_DISABLE_MATUGEN") === "1" || Quickshell.env("DMS_DISABLE_MATUGEN") === "true"
 
     readonly property real popupDistance: {
-        if (typeof SettingsData === "undefined") return 4
+        if (typeof SettingsData === "undefined")
+        return 4
         return SettingsData.popupGapsAuto ? Math.max(4, SettingsData.dankBarSpacing) : SettingsData.popupGapsManual
     }
 
@@ -29,41 +31,16 @@ Singleton {
     property bool colorsFileLoadFailed: false
 
     readonly property string dynamic: "dynamic"
-    readonly property string custom : "custom"
+    readonly property string custom: "custom"
 
     readonly property string homeDir: Paths.strip(StandardPaths.writableLocation(StandardPaths.HomeLocation))
     readonly property string configDir: Paths.strip(StandardPaths.writableLocation(StandardPaths.ConfigLocation))
     readonly property string shellDir: Paths.strip(Qt.resolvedUrl(".").toString()).replace("/Common/", "")
     readonly property string wallpaperPath: {
-        if (typeof SessionData === "undefined") return ""
+        if (typeof SessionData === "undefined")
+        return ""
 
         if (SessionData.perMonitorWallpaper) {
-            var screens = Quickshell.screens
-            if (screens.length > 0) {
-                var firstMonitorWallpaper = SessionData.getMonitorWallpaper(screens[0].name)
-                var wallpaperPath = firstMonitorWallpaper || SessionData.wallpaperPath
-
-                if (wallpaperPath && wallpaperPath.startsWith("we:")) {
-                    return stateDir + "/we_screenshots/" + wallpaperPath.substring(3) + ".jpg"
-                }
-
-                return wallpaperPath
-            }
-        }
-
-        var wallpaperPath = SessionData.wallpaperPath
-        var screens = Quickshell.screens
-        if (screens.length > 0 && wallpaperPath && wallpaperPath.startsWith("we:")) {
-            return stateDir + "/we_screenshots/" + wallpaperPath.substring(3) + ".jpg"
-        }
-
-        return wallpaperPath
-    }
-    readonly property string rawWallpaperPath: {
-        if (typeof SessionData === "undefined") return ""
-
-        if (SessionData.perMonitorWallpaper) {
-            // Use first monitor's wallpaper for dynamic theming
             var screens = Quickshell.screens
             if (screens.length > 0) {
                 var firstMonitorWallpaper = SessionData.getMonitorWallpaper(screens[0].name)
@@ -73,6 +50,34 @@ Singleton {
 
         return SessionData.wallpaperPath
     }
+    readonly property string rawWallpaperPath: {
+        if (typeof SessionData === "undefined")
+        return ""
+
+        if (SessionData.perMonitorWallpaper) {
+            var screens = Quickshell.screens
+            if (screens.length > 0) {
+                var targetMonitor = (typeof SettingsData !== "undefined" && SettingsData.matugenTargetMonitor && SettingsData.matugenTargetMonitor !== "") ? SettingsData.matugenTargetMonitor : screens[0].name
+
+                var targetMonitorExists = false
+                for (var i = 0; i < screens.length; i++) {
+                    if (screens[i].name === targetMonitor) {
+                        targetMonitorExists = true
+                        break
+                    }
+                }
+
+                if (!targetMonitorExists) {
+                    targetMonitor = screens[0].name
+                }
+
+                var targetMonitorWallpaper = SessionData.getMonitorWallpaper(targetMonitor)
+                return targetMonitorWallpaper || SessionData.wallpaperPath
+            }
+        }
+
+        return SessionData.wallpaperPath
+    }
 
     property bool matugenAvailable: false
     property bool gtkThemingEnabled: typeof SettingsData !== "undefined" ? SettingsData.gtkAvailable : false
@@ -84,59 +89,56 @@ Singleton {
     Component.onCompleted: {
         Quickshell.execDetached(["mkdir", "-p", stateDir])
         Proc.runCommand("matugenCheck", ["which", "matugen"], (output, code) => {
-            matugenAvailable = (code === 0) && !envDisableMatugen
-            const isGreeterMode = (typeof SessionData !== "undefined" && SessionData.isGreeterMode)
+                            matugenAvailable = (code === 0) && !envDisableMatugen
+                            const isGreeterMode = (typeof SessionData !== "undefined" && SessionData.isGreeterMode)
 
-            if (!matugenAvailable || isGreeterMode) {
-                return
-            }
+                            if (!matugenAvailable || isGreeterMode) {
+                                return
+                            }
 
-            if (colorsFileLoadFailed && currentTheme === dynamic && wallpaperPath) {
-                console.info("Theme: Matugen now available, regenerating colors for dynamic theme")
-                const isLight = (typeof SessionData !== "undefined" && SessionData.isLightMode)
-                const iconTheme = (typeof SettingsData !== "undefined" && SettingsData.iconTheme) ? SettingsData.iconTheme : "System Default"
-                Quickshell.execDetached(["rm", "-f", stateDir + "/matugen.key"])
-                const selectedMatugenType = (typeof SettingsData !== "undefined" && SettingsData.matugenScheme) ? SettingsData.matugenScheme : "scheme-tonal-spot"
-                if (wallpaperPath.startsWith("#")) {
-                    setDesiredTheme("hex", wallpaperPath, isLight, iconTheme, selectedMatugenType)
-                } else {
-                    setDesiredTheme("image", wallpaperPath, isLight, iconTheme, selectedMatugenType)
-                }
-                return
-            }
+                            if (colorsFileLoadFailed && currentTheme === dynamic && rawWallpaperPath) {
+                                console.info("Theme: Matugen now available, regenerating colors for dynamic theme")
+                                const isLight = (typeof SessionData !== "undefined" && SessionData.isLightMode)
+                                const iconTheme = (typeof SettingsData !== "undefined" && SettingsData.iconTheme) ? SettingsData.iconTheme : "System Default"
+                                const selectedMatugenType = (typeof SettingsData !== "undefined" && SettingsData.matugenScheme) ? SettingsData.matugenScheme : "scheme-tonal-spot"
+                                if (rawWallpaperPath.startsWith("#")) {
+                                    setDesiredTheme("hex", rawWallpaperPath, isLight, iconTheme, selectedMatugenType)
+                                } else {
+                                    setDesiredTheme("image", rawWallpaperPath, isLight, iconTheme, selectedMatugenType)
+                                }
+                                return
+                            }
 
-            const isLight = (typeof SessionData !== "undefined" && SessionData.isLightMode)
-            const iconTheme = (typeof SettingsData !== "undefined" && SettingsData.iconTheme) ? SettingsData.iconTheme : "System Default"
+                            const isLight = (typeof SessionData !== "undefined" && SessionData.isLightMode)
+                            const iconTheme = (typeof SettingsData !== "undefined" && SettingsData.iconTheme) ? SettingsData.iconTheme : "System Default"
 
-            if (currentTheme === dynamic) {
-                if (wallpaperPath) {
-                    Quickshell.execDetached(["rm", "-f", stateDir + "/matugen.key"])
-                    const selectedMatugenType = (typeof SettingsData !== "undefined" && SettingsData.matugenScheme) ? SettingsData.matugenScheme : "scheme-tonal-spot"
-                    if (wallpaperPath.startsWith("#")) {
-                        setDesiredTheme("hex", wallpaperPath, isLight, iconTheme, selectedMatugenType)
-                    } else {
-                        setDesiredTheme("image", wallpaperPath, isLight, iconTheme, selectedMatugenType)
-                    }
-                }
-            } else {
-                let primaryColor
-                let matugenType
-                if (currentTheme === "custom") {
-                    if (customThemeData && customThemeData.primary) {
-                        primaryColor = customThemeData.primary
-                        matugenType = customThemeData.matugen_type
-                    }
-                } else {
-                    primaryColor = currentThemeData.primary
-                    matugenType = currentThemeData.matugen_type
-                }
+                            if (currentTheme === dynamic) {
+                                if (rawWallpaperPath) {
+                                    const selectedMatugenType = (typeof SettingsData !== "undefined" && SettingsData.matugenScheme) ? SettingsData.matugenScheme : "scheme-tonal-spot"
+                                    if (rawWallpaperPath.startsWith("#")) {
+                                        setDesiredTheme("hex", rawWallpaperPath, isLight, iconTheme, selectedMatugenType)
+                                    } else {
+                                        setDesiredTheme("image", rawWallpaperPath, isLight, iconTheme, selectedMatugenType)
+                                    }
+                                }
+                            } else {
+                                let primaryColor
+                                let matugenType
+                                if (currentTheme === "custom") {
+                                    if (customThemeData && customThemeData.primary) {
+                                        primaryColor = customThemeData.primary
+                                        matugenType = customThemeData.matugen_type
+                                    }
+                                } else {
+                                    primaryColor = currentThemeData.primary
+                                    matugenType = currentThemeData.matugen_type
+                                }
 
-                if (primaryColor) {
-                    Quickshell.execDetached(["rm", "-f", stateDir + "/matugen.key"])
-                    setDesiredTheme("hex", primaryColor, isLight, iconTheme, matugenType)
-                }
-            }
-        }, 0)
+                                if (primaryColor) {
+                                    setDesiredTheme("hex", primaryColor, isLight, iconTheme, matugenType)
+                                }
+                            }
+                        }, 0)
         if (typeof SessionData !== "undefined") {
             SessionData.isLightModeChanged.connect(root.onLightModeChanged)
         }
@@ -194,22 +196,60 @@ Singleton {
         }
     }
 
-    readonly property var availableMatugenSchemes: [
-        ({ "value": "scheme-tonal-spot", "label": "Tonal Spot", "description": I18n.tr("Balanced palette with focused accents (default).") }),
-        ({ "value": "scheme-vibrant-spot", "label": "Vibrant Spot", "description": I18n.tr("Lively palette with saturated accents.") }),
-        ({ "value": "scheme-dynamic-contrast", "label": "Dynamic Contrast", "description": I18n.tr("High-contrast palette for strong visual distinction.") }),
-        ({ "value": "scheme-content", "label": "Content", "description": I18n.tr("Derives colors that closely match the underlying image.") }),
-        ({ "value": "scheme-expressive", "label": "Expressive", "description": I18n.tr("Vibrant palette with playful saturation.") }),
-        ({ "value": "scheme-fidelity", "label": "Fidelity", "description": I18n.tr("High-fidelity palette that preserves source hues.") }),
-        ({ "value": "scheme-fruit-salad", "label": "Fruit Salad", "description": I18n.tr("Colorful mix of bright contrasting accents.") }),
-        ({ "value": "scheme-monochrome", "label": "Monochrome", "description": I18n.tr("Minimal palette built around a single hue.") }),
-        ({ "value": "scheme-neutral", "label": "Neutral", "description": I18n.tr("Muted palette with subdued, calming tones.") }),
-        ({ "value": "scheme-rainbow", "label": "Rainbow", "description": I18n.tr("Diverse palette spanning the full spectrum.") })
-    ]
+    readonly property var availableMatugenSchemes: [({
+                                                         "value": "scheme-tonal-spot",
+                                                         "label": "Tonal Spot",
+                                                         "description": I18n.tr("Balanced palette with focused accents (default).")
+                                                     }), 
+                                                     ({
+                                                        "value": "scheme-vibrant",
+                                                        "label": "Vibrant",
+                                                        "description": I18n.tr("Lively palette with saturated accents.")
+                                                    }),
+                                                    ({
+                                                        "value": "scheme-dynamic-contrast",
+                                                        "label": "Dynamic Contrast",
+                                                        "description": I18n.tr("High-contrast palette for strong visual distinction.")
+                                                    }),
+                                                    ({
+                                                    "value": "scheme-content",
+                                                    "label": "Content",
+                                                    "description": I18n.tr("Derives colors that closely match the underlying image.")
+                                                    }),
+                                                    ({
+                                                        "value": "scheme-expressive",
+                                                        "label": "Expressive",
+                                                        "description": I18n.tr("Vibrant palette with playful saturation.")
+                                                    }),
+                                                    ({
+                                                        "value": "scheme-fidelity",
+                                                        "label": "Fidelity",
+                                                        "description": I18n.tr("High-fidelity palette that preserves source hues.")
+                                                    }),
+                                                    ({
+                                                        "value": "scheme-fruit-salad",
+                                                        "label": "Fruit Salad",
+                                                        "description": I18n.tr("Colorful mix of bright contrasting accents.")
+                                                    }),
+                                                    ({
+                                                        "value": "scheme-monochrome",
+                                                        "label": "Monochrome",
+                                                        "description": I18n.tr("Minimal palette built around a single hue.")
+                                                    }),
+                                                    ({
+                                                        "value": "scheme-neutral",
+                                                        "label": "Neutral",
+                                                        "description": I18n.tr("Muted palette with subdued, calming tones.")
+                                                    }),
+                                                    ({
+                                                        "value": "scheme-rainbow",
+                                                        "label": "Rainbow",
+                                                        "description": I18n.tr("Diverse palette spanning the full spectrum.")
+                                                    })]
 
     function getMatugenScheme(value) {
         const schemes = availableMatugenSchemes
-        for (let i = 0; i < schemes.length; i++) {
+        for (var i = 0; i < schemes.length; i++) {
             if (schemes[i].value === value)
                 return schemes[i]
         }
@@ -220,12 +260,7 @@ Singleton {
     property color primaryText: currentThemeData.primaryText
     property color primaryContainer: currentThemeData.primaryContainer
     property color secondary: currentThemeData.secondary
-    property color surface: {
-        if (typeof SettingsData !== "undefined" && SettingsData.surfaceBase === "s") {
-            return currentThemeData.background
-        }
-        return currentThemeData.surface
-    }
+    property color surface: currentThemeData.surface
     property color surfaceText: currentThemeData.surfaceText
     property color surfaceVariant: currentThemeData.surfaceVariant
     property color surfaceVariantText: currentThemeData.surfaceVariantText
@@ -234,24 +269,9 @@ Singleton {
     property color backgroundText: currentThemeData.backgroundText
     property color outline: currentThemeData.outline
     property color outlineVariant: currentThemeData.outlineVariant || Qt.rgba(outline.r, outline.g, outline.b, 0.6)
-    property color surfaceContainer: {
-        if (typeof SettingsData !== "undefined" && SettingsData.surfaceBase === "s") {
-            return currentThemeData.surface
-        }
-        return currentThemeData.surfaceContainer
-    }
-    property color surfaceContainerHigh: {
-        if (typeof SettingsData !== "undefined" && SettingsData.surfaceBase === "s") {
-            return currentThemeData.surfaceContainer
-        }
-        return currentThemeData.surfaceContainerHigh
-    }
-    property color surfaceContainerHighest: {
-        if (typeof SettingsData !== "undefined" && SettingsData.surfaceBase === "s") {
-            return currentThemeData.surfaceContainerHigh
-        }
-        return currentThemeData.surfaceContainerHighest
-    }
+    property color surfaceContainer: currentThemeData.surfaceContainer
+    property color surfaceContainerHigh: currentThemeData.surfaceContainerHigh
+    property color surfaceContainerHighest: currentThemeData.surfaceContainerHighest
 
     property color onSurface: surfaceText
     property color onSurfaceVariant: surfaceVariantText
@@ -296,13 +316,37 @@ Singleton {
     property color shadowMedium: Qt.rgba(0, 0, 0, 0.08)
     property color shadowStrong: Qt.rgba(0, 0, 0, 0.3)
 
-    readonly property var animationDurations: [
-        { shorter: 0, short: 0, medium: 0, long: 0, extraLong: 0 },
-        { shorter: 50, short: 75, medium: 150, long: 250, extraLong: 500 },
-        { shorter: 100, short: 150, medium: 300, long: 500, extraLong: 1000 },
-        { shorter: 150, short: 225, medium: 450, long: 750, extraLong: 1500 },
-        { shorter: 200, short: 300, medium: 600, long: 1000, extraLong: 2000 }
-    ]
+    readonly property var animationDurations: [{
+            "shorter": 0,
+            "short": 0,
+            "medium": 0,
+            "long": 0,
+            "extraLong": 0
+        }, {
+            "shorter": 50,
+            "short": 75,
+            "medium": 150,
+            "long": 250,
+            "extraLong": 500
+        }, {
+            "shorter": 100,
+            "short": 150,
+            "medium": 300,
+            "long": 500,
+            "extraLong": 1000
+        }, {
+            "shorter": 150,
+            "short": 225,
+            "medium": 450,
+            "long": 750,
+            "extraLong": 1500
+        }, {
+            "shorter": 200,
+            "short": 300,
+            "medium": 600,
+            "long": 1000,
+            "extraLong": 2000
+        }]
 
     readonly property int currentAnimationSpeed: typeof SettingsData !== "undefined" ? SettingsData.animationSpeed : SettingsData.AnimationSpeed.Short
     readonly property var currentDurations: animationDurations[currentAnimationSpeed] || animationDurations[SettingsData.AnimationSpeed.Short]
@@ -335,12 +379,13 @@ Singleton {
     }
 
     readonly property int currentAnimationBaseDuration: {
-        if (typeof SettingsData === "undefined") return 500
-        
+        if (typeof SettingsData === "undefined")
+        return 500
+
         if (SettingsData.animationSpeed === SettingsData.AnimationSpeed.Custom) {
             return SettingsData.customAnimationDuration
         }
-        
+
         const presetMap = [0, 250, 500, 750]
         return presetMap[SettingsData.animationSpeed] !== undefined ? presetMap[SettingsData.animationSpeed] : 500
     }
@@ -370,7 +415,12 @@ Singleton {
         }
     }
 
-    property real cornerRadius: typeof SettingsData !== "undefined" ? SettingsData.cornerRadius : 12
+    property real cornerRadius: {
+        if (typeof SessionData !== "undefined" && SessionData.isGreeterMode && typeof GreetdSettings !== "undefined") {
+            return GreetdSettings.cornerRadius
+        }
+        return typeof SettingsData !== "undefined" ? SettingsData.cornerRadius : 12
+    }
     property real spacingXS: 4
     property real spacingS: 8
     property real spacingM: 12
@@ -421,7 +471,7 @@ Singleton {
         }
         const isGreeterMode = (typeof SessionData !== "undefined" && SessionData.isGreeterMode)
         if (savePrefs && typeof SettingsData !== "undefined" && !isGreeterMode)
-            SettingsData.setTheme(currentTheme)
+            SettingsData.set("currentThemeName", currentTheme)
 
         if (!isGreeterMode) {
             generateSystemThemesFromCurrentTheme()
@@ -485,20 +535,40 @@ Singleton {
 
     function getCatppuccinColor(variantName) {
         const catColors = {
-            "cat-rosewater": "#f5e0dc", "cat-flamingo": "#f2cdcd", "cat-pink": "#f5c2e7", "cat-mauve": "#cba6f7",
-            "cat-red": "#f38ba8", "cat-maroon": "#eba0ac", "cat-peach": "#fab387", "cat-yellow": "#f9e2af",
-            "cat-green": "#a6e3a1", "cat-teal": "#94e2d5", "cat-sky": "#89dceb", "cat-sapphire": "#74c7ec",
-            "cat-blue": "#89b4fa", "cat-lavender": "#b4befe"
+            "cat-rosewater": "#f5e0dc",
+            "cat-flamingo": "#f2cdcd",
+            "cat-pink": "#f5c2e7",
+            "cat-mauve": "#cba6f7",
+            "cat-red": "#f38ba8",
+            "cat-maroon": "#eba0ac",
+            "cat-peach": "#fab387",
+            "cat-yellow": "#f9e2af",
+            "cat-green": "#a6e3a1",
+            "cat-teal": "#94e2d5",
+            "cat-sky": "#89dceb",
+            "cat-sapphire": "#74c7ec",
+            "cat-blue": "#89b4fa",
+            "cat-lavender": "#b4befe"
         }
         return catColors[variantName] || "#cba6f7"
     }
 
     function getCatppuccinVariantName(variantName) {
         const catNames = {
-            "cat-rosewater": "Rosewater", "cat-flamingo": "Flamingo", "cat-pink": "Pink", "cat-mauve": "Mauve",
-            "cat-red": "Red", "cat-maroon": "Maroon", "cat-peach": "Peach", "cat-yellow": "Yellow",
-            "cat-green": "Green", "cat-teal": "Teal", "cat-sky": "Sky", "cat-sapphire": "Sapphire",
-            "cat-blue": "Blue", "cat-lavender": "Lavender"
+            "cat-rosewater": "Rosewater",
+            "cat-flamingo": "Flamingo",
+            "cat-pink": "Pink",
+            "cat-mauve": "Mauve",
+            "cat-red": "Red",
+            "cat-maroon": "Maroon",
+            "cat-peach": "Peach",
+            "cat-yellow": "Yellow",
+            "cat-green": "Green",
+            "cat-teal": "Teal",
+            "cat-sky": "Sky",
+            "cat-sapphire": "Sapphire",
+            "cat-blue": "Blue",
+            "cat-lavender": "Lavender"
         }
         return catNames[variantName] || "Unknown"
     }
@@ -523,13 +593,6 @@ Singleton {
     readonly property var _availableThemeNames: StockThemes.getAllThemeNames()
     property string currentThemeName: currentTheme
 
-    function popupBackground() {
-        return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, popupTransparency)
-    }
-
-    function contentBackground() {
-        return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, popupTransparency)
-    }
 
     function panelBackground() {
         return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, panelTransparency)
@@ -541,14 +604,14 @@ Singleton {
         const colorMode = typeof SettingsData !== "undefined" ? SettingsData.widgetBackgroundColor : "sch"
         switch (colorMode) {
             case "s":
-                return surface
+            return surface
             case "sc":
-                return surfaceContainer
+            return surfaceContainer
             case "sch":
-                return surfaceContainerHigh
+            return surfaceContainerHigh
             case "sth":
             default:
-                return surfaceTextHover
+            return surfaceTextHover
         }
     }
 
@@ -562,24 +625,17 @@ Singleton {
         const colorMode = typeof SettingsData !== "undefined" ? SettingsData.widgetBackgroundColor : "sch"
         switch (colorMode) {
             case "s":
-                return Qt.rgba(surface.r, surface.g, surface.b, widgetTransparency)
+            return Qt.rgba(surface.r, surface.g, surface.b, widgetTransparency)
             case "sc":
-                return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, widgetTransparency)
+            return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, widgetTransparency)
             case "sch":
-                return Qt.rgba(surfaceContainerHigh.r, surfaceContainerHigh.g, surfaceContainerHigh.b, widgetTransparency)
+            return Qt.rgba(surfaceContainerHigh.r, surfaceContainerHigh.g, surfaceContainerHigh.b, widgetTransparency)
             case "sth":
             default:
-                return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, widgetTransparency)
+            return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, widgetTransparency)
         }
     }
 
-    function getPopupBackgroundAlpha() {
-        return popupTransparency
-    }
-
-    function getContentBackgroundAlpha() {
-        return popupTransparency
-    }
 
     function isColorDark(c) {
         return (0.299 * c.r + 0.587 * c.g + 0.114 * c.b) < 0.5
@@ -593,8 +649,10 @@ Singleton {
     function barTextSize(barThickness) {
         const scale = barThickness / 48
         const dankBarScale = (typeof SettingsData !== "undefined" ? SettingsData.dankBarFontScale : 1.0)
-        if (scale <= 0.75) return fontSizeSmall * 0.9 * dankBarScale
-        if (scale >= 1.25) return fontSizeMedium * dankBarScale
+        if (scale <= 0.75)
+            return fontSizeSmall * 0.9 * dankBarScale
+        if (scale >= 1.25)
+            return fontSizeMedium * dankBarScale
         return fontSizeSmall * dankBarScale
     }
 
@@ -688,7 +746,6 @@ Singleton {
         }
     }
 
-
     function onLightModeChanged() {
         if (currentTheme === "custom" && customThemeFileView.path) {
             customThemeFileView.reload()
@@ -713,7 +770,6 @@ Singleton {
             "mode": isLight ? "light" : "dark",
             "iconTheme": iconTheme || "System Default",
             "matugenType": matugenType || "scheme-tonal-spot",
-            "surfaceBase": (typeof SettingsData !== "undefined" && SettingsData.surfaceBase) ? SettingsData.surfaceBase : "sc",
             "runUserTemplates": (typeof SettingsData !== "undefined") ? SettingsData.runUserMatugenTemplates : true
         }
 
@@ -723,16 +779,8 @@ Singleton {
         Quickshell.execDetached(["sh", "-c", `mkdir -p '${stateDir}' && cat > '${desiredPath}' << 'EOF'\n${json}\nEOF`])
         workerRunning = true
         const syncModeWithPortal = (typeof SettingsData !== "undefined" && SettingsData.syncModeWithPortal) ? "true" : "false"
-        if (rawWallpaperPath.startsWith("we:")) {
-            console.log("Theme: Starting matugen worker (WE wallpaper)")
-            systemThemeGenerator.command = [
-                "sh", "-c",
-                `sleep 1 && ${shellDir}/scripts/matugen-worker.sh '${stateDir}' '${shellDir}' '${configDir}' '${syncModeWithPortal}' --run`
-            ]
-        } else {
-            console.log("Theme: Starting matugen worker")
-            systemThemeGenerator.command = [shellDir + "/scripts/matugen-worker.sh", stateDir, shellDir, configDir, syncModeWithPortal, "--run"]
-        }
+        console.log("Theme: Starting matugen worker")
+        systemThemeGenerator.command = [shellDir + "/scripts/matugen-worker.sh", stateDir, shellDir, configDir, syncModeWithPortal, "--run"]
         systemThemeGenerator.running = true
     }
 
@@ -745,14 +793,14 @@ Singleton {
         const iconTheme = (typeof SettingsData !== "undefined" && SettingsData.iconTheme) ? SettingsData.iconTheme : "System Default"
 
         if (currentTheme === dynamic) {
-            if (!wallpaperPath) {
+            if (!rawWallpaperPath) {
                 return
             }
             const selectedMatugenType = (typeof SettingsData !== "undefined" && SettingsData.matugenScheme) ? SettingsData.matugenScheme : "scheme-tonal-spot"
-            if (wallpaperPath.startsWith("#")) {
-                setDesiredTheme("hex", wallpaperPath, isLight, iconTheme, selectedMatugenType)
+            if (rawWallpaperPath.startsWith("#")) {
+                setDesiredTheme("hex", rawWallpaperPath, isLight, iconTheme, selectedMatugenType)
             } else {
-                setDesiredTheme("image", wallpaperPath, isLight, iconTheme, selectedMatugenType)
+                setDesiredTheme("image", rawWallpaperPath, isLight, iconTheme, selectedMatugenType)
             }
         } else {
             let primaryColor
@@ -787,16 +835,16 @@ Singleton {
 
         const isLight = (typeof SessionData !== "undefined" && SessionData.isLightMode) ? "true" : "false"
         Proc.runCommand("gtkApplier", [shellDir + "/scripts/gtk.sh", configDir, isLight, shellDir], (output, exitCode) => {
-            if (exitCode === 0) {
-                if (typeof ToastService !== "undefined" && typeof NiriService !== "undefined" && !NiriService.matugenSuppression) {
-                    ToastService.showInfo("GTK colors applied successfully")
-                }
-            } else {
-                if (typeof ToastService !== "undefined") {
-                    ToastService.showError("Failed to apply GTK colors")
-                }
-            }
-        })
+                            if (exitCode === 0) {
+                                if (typeof ToastService !== "undefined" && typeof NiriService !== "undefined" && !NiriService.matugenSuppression) {
+                                    ToastService.showInfo("GTK colors applied successfully")
+                                }
+                            } else {
+                                if (typeof ToastService !== "undefined") {
+                                    ToastService.showError("Failed to apply GTK colors")
+                                }
+                            }
+                        })
     }
 
     function applyQtColors() {
@@ -808,32 +856,42 @@ Singleton {
         }
 
         Proc.runCommand("qtApplier", [shellDir + "/scripts/qt.sh", configDir], (output, exitCode) => {
-            if (exitCode === 0) {
-                if (typeof ToastService !== "undefined") {
-                    ToastService.showInfo("Qt colors applied successfully")
-                }
-            } else {
-                if (typeof ToastService !== "undefined") {
-                    ToastService.showError("Failed to apply Qt colors")
-                }
-            }
-        })
+                            if (exitCode === 0) {
+                                if (typeof ToastService !== "undefined") {
+                                    ToastService.showInfo("Qt colors applied successfully")
+                                }
+                            } else {
+                                if (typeof ToastService !== "undefined") {
+                                    ToastService.showError("Failed to apply Qt colors")
+                                }
+                            }
+                        })
     }
 
-    function withAlpha(c, a) { return Qt.rgba(c.r, c.g, c.b, a); }
+    function withAlpha(c, a) {
+        return Qt.rgba(c.r, c.g, c.b, a)
+    }
 
     function getFillMode(modeName) {
-        switch(modeName) {
-            case "Stretch": return Image.Stretch
-            case "Fit":
-            case "PreserveAspectFit": return Image.PreserveAspectFit
-            case "Fill":
-            case "PreserveAspectCrop": return Image.PreserveAspectCrop
-            case "Tile": return Image.Tile
-            case "TileVertically": return Image.TileVertically
-            case "TileHorizontally": return Image.TileHorizontally
-            case "Pad": return Image.Pad
-            default: return Image.PreserveAspectCrop
+        switch (modeName) {
+        case "Stretch":
+            return Image.Stretch
+        case "Fit":
+        case "PreserveAspectFit":
+            return Image.PreserveAspectFit
+        case "Fill":
+        case "PreserveAspectCrop":
+            return Image.PreserveAspectCrop
+        case "Tile":
+            return Image.Tile
+        case "TileVertically":
+            return Image.TileVertically
+        case "TileHorizontally":
+            return Image.TileHorizontally
+        case "Pad":
+            return Image.Pad
+        default:
+            return Image.PreserveAspectCrop
         }
     }
 
@@ -852,40 +910,48 @@ Singleton {
     }
 
     function invertHex(hex) {
-        hex = hex.replace('#', '');
+        hex = hex.replace('#', '')
 
         if (!/^[0-9A-Fa-f]{6}$/.test(hex)) {
-            return hex;
+            return hex
         }
 
-        const r = parseInt(hex.substr(0, 2), 16);
-        const g = parseInt(hex.substr(2, 2), 16);
-        const b = parseInt(hex.substr(4, 2), 16);
+        const r = parseInt(hex.substr(0, 2), 16)
+        const g = parseInt(hex.substr(2, 2), 16)
+        const b = parseInt(hex.substr(4, 2), 16)
 
-        const invR = (255 - r).toString(16).padStart(2, '0');
-        const invG = (255 - g).toString(16).padStart(2, '0');
-        const invB = (255 - b).toString(16).padStart(2, '0');
+        const invR = (255 - r).toString(16).padStart(2, '0')
+        const invG = (255 - g).toString(16).padStart(2, '0')
+        const invB = (255 - b).toString(16).padStart(2, '0')
 
-        return `#${invR}${invG}${invB}`;
+        return `#${invR}${invG}${invB}`
     }
 
     property string baseLogoColor: {
-        if (typeof SettingsData === "undefined") return ""
+        if (typeof SettingsData === "undefined")
+        return ""
         const colorOverride = SettingsData.launcherLogoColorOverride
-        if (!colorOverride || colorOverride === "") return ""
-        if (colorOverride === "primary") return primary
-        if (colorOverride === "surface") return surfaceText
+        if (!colorOverride || colorOverride === "")
+        return ""
+        if (colorOverride === "primary")
+        return primary
+        if (colorOverride === "surface")
+        return surfaceText
         return colorOverride
     }
 
     property string effectiveLogoColor: {
-        if (typeof SettingsData === "undefined") return ""
+        if (typeof SettingsData === "undefined")
+        return ""
 
         const colorOverride = SettingsData.launcherLogoColorOverride
-        if (!colorOverride || colorOverride === "") return ""
+        if (!colorOverride || colorOverride === "")
+        return ""
 
-        if (colorOverride === "primary") return primary
-        if (colorOverride === "surface") return surfaceText
+        if (colorOverride === "primary")
+        return primary
+        if (colorOverride === "surface")
+        return surfaceText
 
         if (!SettingsData.launcherLogoColorInvertOnMode) {
             return colorOverride
@@ -898,8 +964,6 @@ Singleton {
         return colorOverride
     }
 
-
-
     Process {
         id: systemThemeGenerator
         running: false
@@ -956,9 +1020,7 @@ Singleton {
         id: dynamicColorsFileView
         path: {
             const greetCfgDir = Quickshell.env("DMS_GREET_CFG_DIR") || "/etc/greetd/.dms"
-            const colorsPath = SessionData.isGreeterMode
-                ? greetCfgDir + "/colors.json"
-                : stateDir + "/dms-colors.json"
+            const colorsPath = SessionData.isGreeterMode ? greetCfgDir + "/colors.json" : stateDir + "/dms-colors.json"
             return colorsPath
         }
         watchChanges: currentTheme === dynamic && !SessionData.isGreeterMode
@@ -1000,7 +1062,7 @@ Singleton {
                 console.warn("Theme: Dynamic colors file load failed, marking for regeneration")
                 colorsFileLoadFailed = true
                 const isGreeterMode = (typeof SessionData !== "undefined" && SessionData.isGreeterMode)
-                if (!isGreeterMode && matugenAvailable && wallpaperPath) {
+                if (!isGreeterMode && matugenAvailable && rawWallpaperPath) {
                     console.log("Theme: Matugen available, triggering immediate regeneration")
                     generateSystemThemesFromCurrentTheme()
                 }

Common/settings/Lists.qml

@@ -0,0 +1,56 @@
+pragma Singleton
+
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import QtQuick
+
+Singleton {
+    id: root
+
+    function init(leftModel, centerModel, rightModel, left, center, right) {
+        const dummy = {
+            widgetId: "dummy",
+            enabled: true,
+            size: 20,
+            selectedGpuIndex: 0,
+            pciId: "",
+            mountPath: "/",
+            minimumWidth: true,
+            showSwap: false
+        }
+        leftModel.append(dummy)
+        centerModel.append(dummy)
+        rightModel.append(dummy)
+
+        update(leftModel, left)
+        update(centerModel, center)
+        update(rightModel, right)
+    }
+
+    function update(model, order) {
+        model.clear()
+        for (var i = 0; i < order.length; i++) {
+            var widgetId = typeof order[i] === "string" ? order[i] : order[i].id
+            var enabled = typeof order[i] === "string" ? true : order[i].enabled
+            var size = typeof order[i] === "string" ? undefined : order[i].size
+            var selectedGpuIndex = typeof order[i] === "string" ? undefined : order[i].selectedGpuIndex
+            var pciId = typeof order[i] === "string" ? undefined : order[i].pciId
+            var mountPath = typeof order[i] === "string" ? undefined : order[i].mountPath
+            var minimumWidth = typeof order[i] === "string" ? undefined : order[i].minimumWidth
+            var showSwap = typeof order[i] === "string" ? undefined : order[i].showSwap
+            var item = {
+                widgetId: widgetId,
+                enabled: enabled
+            }
+            if (size !== undefined) item.size = size
+            if (selectedGpuIndex !== undefined) item.selectedGpuIndex = selectedGpuIndex
+            if (pciId !== undefined) item.pciId = pciId
+            if (mountPath !== undefined) item.mountPath = mountPath
+            if (minimumWidth !== undefined) item.minimumWidth = minimumWidth
+            if (showSwap !== undefined) item.showSwap = showSwap
+
+            model.append(item)
+        }
+    }
+}

Common/settings/Processes.qml

@@ -0,0 +1,131 @@
+pragma Singleton
+
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+Singleton {
+    id: root
+
+    property var settingsRoot: null
+
+    function detectIcons() {
+        systemDefaultDetectionProcess.running = true
+    }
+
+    function detectQtTools() {
+        qtToolsDetectionProcess.running = true
+    }
+
+    function detectFprintd() {
+        fprintdDetectionProcess.running = true
+    }
+
+    function checkPluginSettings() {
+        pluginSettingsCheckProcess.running = true
+    }
+
+    function checkDefaultSettings() {
+        defaultSettingsCheckProcess.running = true
+    }
+
+    property var systemDefaultDetectionProcess: Process {
+        command: ["sh", "-c", "gsettings get org.gnome.desktop.interface icon-theme 2>/dev/null | sed \"s/'//g\" || echo ''"]
+        running: false
+        onExited: function(exitCode) {
+            if (!settingsRoot) return;
+            if (exitCode === 0 && stdout && stdout.length > 0) {
+                settingsRoot.systemDefaultIconTheme = stdout.trim();
+            } else {
+                settingsRoot.systemDefaultIconTheme = "";
+            }
+            iconThemeDetectionProcess.running = true;
+        }
+    }
+
+    property var iconThemeDetectionProcess: Process {
+
+        command: ["sh", "-c", "find /usr/share/icons ~/.local/share/icons ~/.icons -maxdepth 1 -type d 2>/dev/null | sed 's|.*/||' | grep -v '^icons$' | sort -u"]
+        running: false
+
+        stdout: StdioCollector {
+            onStreamFinished: {
+                if (!settingsRoot) return
+                var detectedThemes = ["System Default"]
+                if (text && text.trim()) {
+                    var themes = text.trim().split('\n')
+                    for (var i = 0; i < themes.length; i++) {
+                        var theme = themes[i].trim()
+                        if (theme && theme !== "" && theme !== "default" && theme !== "hicolor" && theme !== "locolor") {
+                            detectedThemes.push(theme)
+                        }
+                    }
+                }
+                settingsRoot.availableIconThemes = detectedThemes
+            }
+        }
+    }
+
+    property var qtToolsDetectionProcess: Process {
+        command: ["sh", "-c", "echo -n 'qt5ct:'; command -v qt5ct >/dev/null && echo 'true' || echo 'false'; echo -n 'qt6ct:'; command -v qt6ct >/dev/null && echo 'true' || echo 'false'; echo -n 'gtk:'; (command -v gsettings >/dev/null || command -v dconf >/dev/null) && echo 'true' || echo 'false'"]
+        running: false
+
+        stdout: StdioCollector {
+            onStreamFinished: {
+                if (!settingsRoot) return;
+                if (text && text.trim()) {
+                    var lines = text.trim().split('\n');
+                    for (var i = 0; i < lines.length; i++) {
+                        var line = lines[i];
+                        if (line.startsWith('qt5ct:')) {
+                            settingsRoot.qt5ctAvailable = line.split(':')[1] === 'true';
+                        } else if (line.startsWith('qt6ct:')) {
+                            settingsRoot.qt6ctAvailable = line.split(':')[1] === 'true';
+                        } else if (line.startsWith('gtk:')) {
+                            settingsRoot.gtkAvailable = line.split(':')[1] === 'true';
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    property var defaultSettingsCheckProcess: Process {
+        command: ["sh", "-c", "CONFIG_DIR=\"" + (settingsRoot?._configDir || "") + "/DankMaterialShell\"; if [ -f \"$CONFIG_DIR/default-settings.json\" ] && [ ! -f \"$CONFIG_DIR/settings.json\" ]; then cp --no-preserve=mode \"$CONFIG_DIR/default-settings.json\" \"$CONFIG_DIR/settings.json\" && echo 'copied'; else echo 'not_found'; fi"]
+        running: false
+        onExited: function(exitCode) {
+            if (!settingsRoot) return;
+            if (exitCode === 0) {
+                console.info("Copied default-settings.json to settings.json");
+                if (settingsRoot.settingsFile) {
+                    settingsRoot.settingsFile.reload();
+                }
+            } else {
+                if (typeof ThemeApplier !== "undefined") {
+                    ThemeApplier.applyStoredTheme(settingsRoot);
+                }
+            }
+        }
+    }
+
+    property var fprintdDetectionProcess: Process {
+        command: ["sh", "-c", "command -v fprintd-list >/dev/null 2>&1"]
+        running: false
+        onExited: function(exitCode) {
+            if (!settingsRoot) return;
+            settingsRoot.fprintdAvailable = (exitCode === 0);
+        }
+    }
+
+    property var pluginSettingsCheckProcess: Process {
+        command: ["test", "-f", settingsRoot?.pluginSettingsPath || ""]
+        running: false
+
+        onExited: function(exitCode) {
+            if (!settingsRoot) return;
+            settingsRoot.pluginSettingsFileExists = (exitCode === 0);
+        }
+    }
+}

Common/settings/SettingsSpec.js

@@ -0,0 +1,235 @@
+.pragma library
+
+function percentToUnit(v) {
+    if (v === undefined || v === null) return undefined;
+    return v > 1 ? v / 100 : v;
+}
+
+var SPEC = {
+    currentThemeName: { def: "blue", onChange: "applyStoredTheme" },
+    customThemeFile: { def: "" },
+    matugenScheme: { def: "scheme-tonal-spot", onChange: "regenSystemThemes" },
+    runUserMatugenTemplates: { def: true, onChange: "regenSystemThemes" },
+    matugenTargetMonitor: { def: "", onChange: "regenSystemThemes" },
+
+    dankBarTransparency: { def: 1.0, coerce: percentToUnit, migrate: ["topBarTransparency"] },
+    dankBarWidgetTransparency: { def: 1.0, coerce: percentToUnit, migrate: ["topBarWidgetTransparency"] },
+    popupTransparency: { def: 1.0, coerce: percentToUnit },
+    dockTransparency: { def: 1.0, coerce: percentToUnit },
+
+    widgetBackgroundColor: { def: "sch" },
+    cornerRadius: { def: 12, onChange: "updateNiriLayout" },
+
+    use24HourClock: { def: true },
+    showSeconds: { def: false },
+    useFahrenheit: { def: false },
+    nightModeEnabled: { def: false },
+    animationSpeed: { def: 1 },
+    customAnimationDuration: { def: 500 },
+    wallpaperFillMode: { def: "Fill" },
+    blurredWallpaperLayer: { def: false },
+    blurWallpaperOnOverview: { def: false },
+
+    showLauncherButton: { def: true },
+    showWorkspaceSwitcher: { def: true },
+    showFocusedWindow: { def: true },
+    showWeather: { def: true },
+    showMusic: { def: true },
+    showClipboard: { def: true },
+    showCpuUsage: { def: true },
+    showMemUsage: { def: true },
+    showCpuTemp: { def: true },
+    showGpuTemp: { def: true },
+    selectedGpuIndex: { def: 0 },
+    enabledGpuPciIds: { def: [] },
+    showSystemTray: { def: true },
+    showClock: { def: true },
+    showNotificationButton: { def: true },
+    showBattery: { def: true },
+    showControlCenterButton: { def: true },
+
+    controlCenterShowNetworkIcon: { def: true },
+    controlCenterShowBluetoothIcon: { def: true },
+    controlCenterShowAudioIcon: { def: true },
+    controlCenterWidgets: { def: [
+        { 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 }
+    ]},
+
+    showWorkspaceIndex: { def: false },
+    showWorkspacePadding: { def: false },
+    workspaceScrolling: { def: false },
+    showWorkspaceApps: { def: false },
+    maxWorkspaceIcons: { def: 3 },
+    workspacesPerMonitor: { def: true },
+    dwlShowAllTags: { def: false },
+    workspaceNameIcons: { def: {} },
+    waveProgressEnabled: { def: true },
+    clockCompactMode: { def: false },
+    focusedWindowCompactMode: { def: false },
+    runningAppsCompactMode: { def: true },
+    keyboardLayoutNameCompactMode: { def: false },
+    runningAppsCurrentWorkspace: { def: false },
+    runningAppsGroupByApp: { def: false },
+    clockDateFormat: { def: "" },
+    lockDateFormat: { def: "" },
+    mediaSize: { def: 1 },
+
+    dankBarLeftWidgets: { def: ["launcherButton", "workspaceSwitcher", "focusedWindow"], migrate: ["topBarLeftWidgets"] },
+    dankBarCenterWidgets: { def: ["music", "clock", "weather"], migrate: ["topBarCenterWidgets"] },
+    dankBarRightWidgets: { def: ["systemTray", "clipboard", "cpuUsage", "memUsage", "notificationButton", "battery", "controlCenterButton"], migrate: ["topBarRightWidgets"] },
+    dankBarWidgetOrder: { def: [] },
+
+    appLauncherViewMode: { def: "list" },
+    spotlightModalViewMode: { def: "list" },
+    sortAppsAlphabetically: { def: false },
+
+    weatherLocation: { def: "New York, NY" },
+    weatherCoordinates: { def: "40.7128,-74.0060" },
+    useAutoLocation: { def: false },
+    weatherEnabled: { def: true },
+
+    networkPreference: { def: "auto" },
+    vpnLastConnected: { def: "" },
+
+    iconTheme: { def: "System Default", onChange: "applyStoredIconTheme" },
+    availableIconThemes: { def: ["System Default"], persist: false },
+    systemDefaultIconTheme: { def: "", persist: false },
+    qt5ctAvailable: { def: false, persist: false },
+    qt6ctAvailable: { def: false, persist: false },
+    gtkAvailable: { def: false, persist: false },
+
+    launcherLogoMode: { def: "apps" },
+    launcherLogoCustomPath: { def: "" },
+    launcherLogoColorOverride: { def: "" },
+    launcherLogoColorInvertOnMode: { def: false },
+    launcherLogoBrightness: { def: 0.5 },
+    launcherLogoContrast: { def: 1 },
+    launcherLogoSizeOffset: { def: 0 },
+
+    fontFamily: { def: "Inter Variable" },
+    monoFontFamily: { def: "Fira Code" },
+    fontWeight: { def: 400 },
+    fontScale: { def: 1.0 },
+    dankBarFontScale: { def: 1.0 },
+
+    notepadUseMonospace: { def: true },
+    notepadFontFamily: { def: "" },
+    notepadFontSize: { def: 14 },
+    notepadShowLineNumbers: { def: false },
+    notepadTransparencyOverride: { def: -1 },
+    notepadLastCustomTransparency: { def: 0.7 },
+
+    soundsEnabled: { def: true },
+    useSystemSoundTheme: { def: false },
+    soundNewNotification: { def: true },
+    soundVolumeChanged: { def: true },
+    soundPluggedIn: { def: true },
+
+    acMonitorTimeout: { def: 0 },
+    acLockTimeout: { def: 0 },
+    acSuspendTimeout: { def: 0 },
+    acSuspendBehavior: { def: 0 },
+    batteryMonitorTimeout: { def: 0 },
+    batteryLockTimeout: { def: 0 },
+    batterySuspendTimeout: { def: 0 },
+    batterySuspendBehavior: { def: 0 },
+    lockBeforeSuspend: { def: false },
+    preventIdleForMedia: { def: false },
+    loginctlLockIntegration: { def: true },
+    launchPrefix: { def: "" },
+    brightnessDevicePins: { def: {} },
+
+    gtkThemingEnabled: { def: false, onChange: "regenSystemThemes" },
+    qtThemingEnabled: { def: false, onChange: "regenSystemThemes" },
+    syncModeWithPortal: { def: true },
+
+    showDock: { def: false },
+    dockAutoHide: { def: false },
+    dockGroupByApp: { def: false },
+    dockOpenOnOverview: { def: false },
+    dockPosition: { def: 1 },
+    dockSpacing: { def: 4 },
+    dockBottomGap: { def: 0 },
+    dockMargin: { def: 0 },
+    dockIconSize: { def: 40 },
+    dockIndicatorStyle: { def: "circle" },
+
+    notificationOverlayEnabled: { def: false },
+    dankBarAutoHide: { def: false, migrate: ["topBarAutoHide"] },
+    dankBarOpenOnOverview: { def: false, migrate: ["topBarOpenOnOverview"] },
+    dankBarVisible: { def: true, migrate: ["topBarVisible"] },
+    overviewRows: { def: 2, persist: false },
+    overviewColumns: { def: 5, persist: false },
+    overviewScale: { def: 0.16, persist: false },
+    dankBarSpacing: { def: 4, migrate: ["topBarSpacing"], onChange: "updateNiriLayout" },
+    dankBarBottomGap: { def: 0, migrate: ["topBarBottomGap"] },
+    dankBarInnerPadding: { def: 4, migrate: ["topBarInnerPadding"] },
+    dankBarPosition: { def: 0, migrate: ["dankBarAtBottom", "topBarAtBottom"] },
+    dankBarIsVertical: { def: false, persist: false },
+
+    dankBarSquareCorners: { def: false, migrate: ["topBarSquareCorners"] },
+    dankBarNoBackground: { def: false, migrate: ["topBarNoBackground"] },
+    dankBarGothCornersEnabled: { def: false, migrate: ["topBarGothCornersEnabled"] },
+    dankBarGothCornerRadiusOverride: { def: false },
+    dankBarGothCornerRadiusValue: { def: 12 },
+    dankBarBorderEnabled: { def: false },
+    dankBarBorderColor: { def: "surfaceText" },
+    dankBarBorderOpacity: { def: 1.0 },
+    dankBarBorderThickness: { def: 1 },
+
+    popupGapsAuto: { def: true },
+    popupGapsManual: { def: 4 },
+
+    modalDarkenBackground: { def: true },
+
+    lockScreenShowPowerActions: { def: true },
+    enableFprint: { def: false },
+    maxFprintTries: { def: 3 },
+    fprintdAvailable: { def: false, persist: false },
+    hideBrightnessSlider: { def: false },
+
+    notificationTimeoutLow: { def: 5000 },
+    notificationTimeoutNormal: { def: 5000 },
+    notificationTimeoutCritical: { def: 0 },
+    notificationPopupPosition: { def: 0 },
+
+    osdAlwaysShowValue: { def: false },
+
+    powerActionConfirm: { def: true },
+    powerMenuActions: { def: ["reboot", "logout", "poweroff", "lock", "suspend", "restart"] },
+    powerMenuDefaultAction: { def: "logout" },
+    customPowerActionLock: { def: "" },
+    customPowerActionLogout: { def: "" },
+    customPowerActionSuspend: { def: "" },
+    customPowerActionHibernate: { def: "" },
+    customPowerActionReboot: { def: "" },
+    customPowerActionPowerOff: { def: "" },
+
+    updaterUseCustomCommand: { def: false },
+    updaterCustomCommand: { def: "" },
+    updaterTerminalAdditionalParams: { def: "" },
+
+    screenPreferences: { def: {} },
+    showOnLastDisplay: { def: {} }
+};
+
+function getValidKeys() {
+    return Object.keys(SPEC).filter(function(k) { return SPEC[k].persist !== false; }).concat(["configVersion"]);
+}
+
+function set(root, key, value, saveFn, hooks) {
+    if (!(key in SPEC)) return;
+    root[key] = value;
+    var hookName = SPEC[key].onChange;
+    if (hookName && hooks && hooks[hookName]) {
+        hooks[hookName](root);
+    }
+    saveFn();
+}

Common/settings/SettingsStore.js

@@ -0,0 +1,118 @@
+.pragma library
+
+.import "./SettingsSpec.js" as SpecModule
+
+function parse(root, jsonObj) {
+    var SPEC = SpecModule.SPEC;
+    for (var k in SPEC) {
+        var spec = SPEC[k];
+        root[k] = spec.def;
+    }
+
+    if (!jsonObj) return;
+
+    for (var k in jsonObj) {
+        if (!SPEC[k]) continue;
+        var raw = jsonObj[k];
+        var spec = SPEC[k];
+        var coerce = spec.coerce;
+        root[k] = coerce ? (coerce(raw) !== undefined ? coerce(raw) : root[k]) : raw;
+    }
+}
+
+function toJson(root) {
+    var SPEC = SpecModule.SPEC;
+    var out = {};
+    for (var k in SPEC) {
+        if (SPEC[k].persist === false) continue;
+        out[k] = root[k];
+    }
+    out.configVersion = root.settingsConfigVersion;
+    return out;
+}
+
+function migrate(root, jsonObj) {
+    var SPEC = SpecModule.SPEC;
+    if (!jsonObj) return;
+
+    if (jsonObj.themeIndex !== undefined || jsonObj.themeIsDynamic !== undefined) {
+        var themeNames = ["blue", "deepBlue", "purple", "green", "orange", "red", "cyan", "pink", "amber", "coral"];
+        if (jsonObj.themeIsDynamic) {
+            root.currentThemeName = "dynamic";
+        } else if (jsonObj.themeIndex >= 0 && jsonObj.themeIndex < themeNames.length) {
+            root.currentThemeName = themeNames[jsonObj.themeIndex];
+        }
+        console.info("Auto-migrated theme from index", jsonObj.themeIndex, "to", root.currentThemeName);
+    }
+
+    if ((jsonObj.dankBarWidgetOrder && jsonObj.dankBarWidgetOrder.length > 0) ||
+        (jsonObj.topBarWidgetOrder && jsonObj.topBarWidgetOrder.length > 0)) {
+        if (jsonObj.dankBarLeftWidgets === undefined && jsonObj.dankBarCenterWidgets === undefined && jsonObj.dankBarRightWidgets === undefined) {
+            var widgetOrder = jsonObj.dankBarWidgetOrder || jsonObj.topBarWidgetOrder;
+            root.dankBarLeftWidgets = widgetOrder.filter(function(w) { return ["launcherButton", "workspaceSwitcher", "focusedWindow"].indexOf(w) >= 0; });
+            root.dankBarCenterWidgets = widgetOrder.filter(function(w) { return ["clock", "music", "weather"].indexOf(w) >= 0; });
+            root.dankBarRightWidgets = widgetOrder.filter(function(w) { return ["systemTray", "clipboard", "systemResources", "notificationButton", "battery", "controlCenterButton"].indexOf(w) >= 0; });
+        }
+    }
+
+    if (jsonObj.useOSLogo !== undefined) {
+        root.launcherLogoMode = jsonObj.useOSLogo ? "os" : "apps";
+        root.launcherLogoColorOverride = jsonObj.osLogoColorOverride !== undefined ? jsonObj.osLogoColorOverride : "";
+        root.launcherLogoBrightness = jsonObj.osLogoBrightness !== undefined ? jsonObj.osLogoBrightness : 0.5;
+        root.launcherLogoContrast = jsonObj.osLogoContrast !== undefined ? jsonObj.osLogoContrast : 1;
+    }
+
+    if (jsonObj.mediaCompactMode !== undefined && jsonObj.mediaSize === undefined) {
+        root.mediaSize = jsonObj.mediaCompactMode ? 0 : 1;
+    }
+
+    for (var k in SPEC) {
+        var spec = SPEC[k];
+        if (!spec.migrate) continue;
+        for (var i = 0; i < spec.migrate.length; i++) {
+            var oldKey = spec.migrate[i];
+            if (jsonObj[oldKey] !== undefined && jsonObj[k] === undefined) {
+                var raw = jsonObj[oldKey];
+                var coerce = spec.coerce;
+                root[k] = coerce ? (coerce(raw) !== undefined ? coerce(raw) : root[k]) : raw;
+                break;
+            }
+        }
+    }
+
+    if (jsonObj.dankBarAtBottom !== undefined || jsonObj.topBarAtBottom !== undefined) {
+        var atBottom = jsonObj.dankBarAtBottom !== undefined ? jsonObj.dankBarAtBottom : jsonObj.topBarAtBottom;
+        root.dankBarPosition = atBottom ? 1 : 0;
+    }
+
+    if (jsonObj.pluginSettings !== undefined) {
+        root.pluginSettings = jsonObj.pluginSettings;
+        return true;
+    }
+
+    return false;
+}
+
+function cleanup(fileText) {
+    var getValidKeys = SpecModule.getValidKeys;
+    if (!fileText || !fileText.trim()) return;
+
+    try {
+        var settings = JSON.parse(fileText);
+        var validKeys = getValidKeys();
+        var needsSave = false;
+
+        for (var key in settings) {
+            if (validKeys.indexOf(key) < 0) {
+                console.log("SettingsData: Removing unused key:", key);
+                delete settings[key];
+                needsSave = true;
+            }
+        }
+
+        return needsSave ? JSON.stringify(settings, null, 2) : null;
+    } catch (e) {
+        console.warn("SettingsData: Failed to cleanup unused keys:", e.message);
+        return null;
+    }
+}

DMSShell.qml

@@ -52,6 +52,14 @@ Item {
         }
     }
 
+    Loader {
+        id: blurredWallpaperBackgroundLoader
+        active: SettingsData.blurredWallpaperLayer && CompositorService.isNiri
+        asynchronous: false
+
+        sourceComponent: BlurredWallpaperBackground {}
+    }
+
     WallpaperBackground {}
 
     Lock {
@@ -205,11 +213,31 @@ Item {
         }
     }
 
+    PolkitAuthModal {
+        id: polkitAuthModal
+    }
+
+    property string lastCredentialsToken: ""
+    property var lastCredentialsTime: 0
+
     Connections {
         target: NetworkService
 
-        function onCredentialsNeeded(token, ssid, setting, fields, hints, reason) {
-            wifiPasswordModal.showFromPrompt(token, ssid, setting, fields, hints, reason)
+        function onCredentialsNeeded(token, ssid, setting, fields, hints, reason, connType, connName, vpnService) {
+            const now = Date.now()
+            const timeSinceLastPrompt = now - lastCredentialsTime
+
+            if (wifiPasswordModal.shouldBeVisible && timeSinceLastPrompt < 1000) {
+                NetworkService.cancelCredentials(lastCredentialsToken)
+                lastCredentialsToken = token
+                lastCredentialsTime = now
+                wifiPasswordModal.showFromPrompt(token, ssid, setting, fields, hints, reason, connType, connName, vpnService)
+                return
+            }
+
+            lastCredentialsToken = token
+            lastCredentialsTime = now
+            wifiPasswordModal.showFromPrompt(token, ssid, setting, fields, hints, reason, connType, connName, vpnService)
         }
     }
 
@@ -454,6 +482,10 @@ Item {
                                         }
                                     }
 
+            onLockRequested: {
+                lock.activate()
+            }
+
             function actionApply(action) {
                 switch (action) {
                 case "logout":
@@ -485,11 +517,11 @@ Item {
 
         active: false
 
-        HyprKeybindsModal {
-            id: hyprKeybindsModal
+        KeybindsModal {
+            id: keybindsModal
 
             Component.onCompleted: {
-                PopoutService.hyprKeybindsModal = hyprKeybindsModal
+                PopoutService.hyprKeybindsModal = keybindsModal
             }
         }
     }

DMSShellIPC.qml

@@ -135,24 +135,22 @@ Item {
         }
 
         function toggle(tab: string): string {
-            root.dankDashPopoutLoader.active = true
-            if (root.dankDashPopoutLoader.item) {
-                if (root.dankDashPopoutLoader.item.dashVisible) {
-                    root.dankDashPopoutLoader.item.dashVisible = false
-                } else {
+            if (root.dankBarLoader.item && root.dankBarLoader.item.triggerWallpaperBrowserOnFocusedScreen()) {
+                if (root.dankDashPopoutLoader.item) {
                     switch (tab.toLowerCase()) {
                     case "media":
                         root.dankDashPopoutLoader.item.currentTabIndex = 1
                         break
+                    case "wallpaper":
+                        root.dankDashPopoutLoader.item.currentTabIndex = 2
+                        break
                     case "weather":
-                        root.dankDashPopoutLoader.item.currentTabIndex = SettingsData.weatherEnabled ? 2 : 0
+                        root.dankDashPopoutLoader.item.currentTabIndex = SettingsData.weatherEnabled ? 3 : 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"
             }
@@ -308,11 +306,58 @@ Item {
         target: "mpris"
     }
 
+    IpcHandler {
+        function toggle(provider: string): string {
+            if (!provider) {
+                return "ERROR: No provider specified"
+            }
+
+            KeybindsService.loadProvider(provider)
+            root.hyprKeybindsModalLoader.active = true
+
+            if (root.hyprKeybindsModalLoader.item) {
+                if (root.hyprKeybindsModalLoader.item.shouldBeVisible) {
+                    root.hyprKeybindsModalLoader.item.close()
+                } else {
+                    root.hyprKeybindsModalLoader.item.open()
+                }
+                return `KEYBINDS_TOGGLE_SUCCESS: ${provider}`
+            }
+            return `KEYBINDS_TOGGLE_FAILED: ${provider}`
+        }
+
+        function open(provider: string): string {
+            if (!provider) {
+                return "ERROR: No provider specified"
+            }
+
+            KeybindsService.loadProvider(provider)
+            root.hyprKeybindsModalLoader.active = true
+
+            if (root.hyprKeybindsModalLoader.item) {
+                root.hyprKeybindsModalLoader.item.open()
+                return `KEYBINDS_OPEN_SUCCESS: ${provider}`
+            }
+            return `KEYBINDS_OPEN_FAILED: ${provider}`
+        }
+
+        function close(): string {
+            if (root.hyprKeybindsModalLoader.item) {
+                root.hyprKeybindsModalLoader.item.close()
+                return "KEYBINDS_CLOSE_SUCCESS"
+            }
+            return "KEYBINDS_CLOSE_FAILED"
+        }
+
+        target: "keybinds"
+    }
+
     IpcHandler {
         function openBinds(): string {
             if (!CompositorService.isHyprland) {
                 return "HYPR_NOT_AVAILABLE"
             }
+            KeybindsService.loadProvider("hyprland")
             root.hyprKeybindsModalLoader.active = true
             if (root.hyprKeybindsModalLoader.item) {
                 root.hyprKeybindsModalLoader.item.open()
@@ -336,6 +381,7 @@ Item {
             if (!CompositorService.isHyprland) {
                 return "HYPR_NOT_AVAILABLE"
             }
+            KeybindsService.loadProvider("hyprland")
             root.hyprKeybindsModalLoader.active = true
             if (root.hyprKeybindsModalLoader.item) {
                 if (root.hyprKeybindsModalLoader.item.shouldBeVisible) {

LICENSE

@@ -1,674 +1,20 @@
-                    GNU GENERAL PUBLIC LICENSE
-                       Version 3, 29 June 2007
-
- Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
- Everyone is permitted to copy and distribute verbatim copies
- of this license document, but changing it is not allowed.
-
-                            Preamble
-
-  The GNU General Public License is a free, copyleft license for
-software and other kinds of works.
-
-  The licenses for most software and other practical works are designed
-to take away your freedom to share and change the works.  By contrast,
-the GNU General Public License is intended to guarantee your freedom to
-share and change all versions of a program--to make sure it remains free
-software for all its users.  We, the Free Software Foundation, use the
-GNU General Public License for most of our software; it applies also to
-any other work released this way by its authors.  You can apply it to
-your programs, too.
-
-  When we speak of free software, we are referring to freedom, not
-price.  Our General Public Licenses are designed to make sure that you
-have the freedom to distribute copies of free software (and charge for
-them if you wish), that you receive source code or can get it if you
-want it, that you can change the software or use pieces of it in new
-free programs, and that you know you can do these things.
-
-  To protect your rights, we need to prevent others from denying you
-these rights or asking you to surrender the rights.  Therefore, you have
-certain responsibilities if you distribute copies of the software, or if
-you modify it: responsibilities to respect the freedom of others.
-
-  For example, if you distribute copies of such a program, whether
-gratis or for a fee, you must pass on to the recipients the same
-freedoms that you received.  You must make sure that they, too, receive
-or can get the source code.  And you must show them these terms so they
-know their rights.
-
-  Developers that use the GNU GPL protect your rights with two steps:
-(1) assert copyright on the software, and (2) offer you this License
-giving you legal permission to copy, distribute and/or modify it.
-
-  For the developers' and authors' protection, the GPL clearly explains
-that there is no warranty for this free software.  For both users' and
-authors' sake, the GPL requires that modified versions be marked as
-changed, so that their problems will not be attributed erroneously to
-authors of previous versions.
-
-  Some devices are designed to deny users access to install or run
-modified versions of the software inside them, although the manufacturer
-can do so.  This is fundamentally incompatible with the aim of
-protecting users' freedom to change the software.  The systematic
-pattern of such abuse occurs in the area of products for individuals to
-use, which is precisely where it is most unacceptable.  Therefore, we
-have designed this version of the GPL to prohibit the practice for those
-products.  If such problems arise substantially in other domains, we
-stand ready to extend this provision to those domains in future versions
-of the GPL, as needed to protect the freedom of users.
-
-  Finally, every program is threatened constantly by software patents.
-States should not allow patents to restrict development and use of
-software on general-purpose computers, but in those that do, we wish to
-avoid the special danger that patents applied to a free program could
-make it effectively proprietary.  To prevent this, the GPL assures that
-patents cannot be used to render the program non-free.
-
-  The precise terms and conditions for copying, distribution and
-modification follow.
-
-                       TERMS AND CONDITIONS
-
-  0. Definitions.
-
-  "This License" refers to version 3 of the GNU General Public License.
-
-  "Copyright" also means copyright-like laws that apply to other kinds of
-works, such as semiconductor masks.
-
-  "The Program" refers to any copyrightable work licensed under this
-License.  Each licensee is addressed as "you".  "Licensees" and
-"recipients" may be individuals or organizations.
-
-  To "modify" a work means to copy from or adapt all or part of the work
-in a fashion requiring copyright permission, other than the making of an
-exact copy.  The resulting work is called a "modified version" of the
-earlier work or a work "based on" the earlier work.
-
-  A "covered work" means either the unmodified Program or a work based
-on the Program.
-
-  To "propagate" a work means to do anything with it that, without
-permission, would make you directly or secondarily liable for
-infringement under applicable copyright law, except executing it on a
-computer or modifying a private copy.  Propagation includes copying,
-distribution (with or without modification), making available to the
-public, and in some countries other activities as well.
-
-  To "convey" a work means any kind of propagation that enables other
-parties to make or receive copies.  Mere interaction with a user through
-a computer network, with no transfer of a copy, is not conveying.
-
-  An interactive user interface displays "Appropriate Legal Notices"
-to the extent that it includes a convenient and prominently visible
-feature that (1) displays an appropriate copyright notice, and (2)
-tells the user that there is no warranty for the work (except to the
-extent that warranties are provided), that licensees may convey the
-work under this License, and how to view a copy of this License.  If
-the interface presents a list of user commands or options, such as a
-menu, a prominent item in the list meets this criterion.
-
-  1. Source Code.
-
-  The "source code" for a work means the preferred form of the work
-for making modifications to it.  "Object code" means any non-source
-form of a work.
-
-  A "Standard Interface" means an interface that either is an official
-standard defined by a recognized standards body, or, in the case of
-interfaces specified for a particular programming language, one that
-is widely used among developers working in that language.
-
-  The "System Libraries" of an executable work include anything, other
-than the work as a whole, that (a) is included in the normal form of
-packaging a Major Component, but which is not part of that Major
-Component, and (b) serves only to enable use of the work with that
-Major Component, or to implement a Standard Interface for which an
-implementation is available to the public in source code form.  A
-"Major Component", in this context, means a major essential component
-(kernel, window system, and so on) of the specific operating system
-(if any) on which the executable work runs, or a compiler used to
-produce the work, or an object code interpreter used to run it.
-
-  The "Corresponding Source" for a work in object code form means all
-the source code needed to generate, install, and (for an executable
-work) run the object code and to modify the work, including scripts to
-control those activities.  However, it does not include the work's
-System Libraries, or general-purpose tools or generally available free
-programs which are used unmodified in performing those activities but
-which are not part of the work.  For example, Corresponding Source
-includes interface definition files associated with source files for
-the work, and the source code for shared libraries and dynamically
-linked subprograms that the work is specifically designed to require,
-such as by intimate data communication or control flow between those
-subprograms and other parts of the work.
-
-  The Corresponding Source need not include anything that users
-can regenerate automatically from other parts of the Corresponding
-Source.
-
-  The Corresponding Source for a work in source code form is that
-same work.
-
-  2. Basic Permissions.
-
-  All rights granted under this License are granted for the term of
-copyright on the Program, and are irrevocable provided the stated
-conditions are met.  This License explicitly affirms your unlimited
-permission to run the unmodified Program.  The output from running a
-covered work is covered by this License only if the output, given its
-content, constitutes a covered work.  This License acknowledges your
-rights of fair use or other equivalent, as provided by copyright law.
-
-  You may make, run and propagate covered works that you do not
-convey, without conditions so long as your license otherwise remains
-in force.  You may convey covered works to others for the sole purpose
-of having them make modifications exclusively for you, or provide you
-with facilities for running those works, provided that you comply with
-the terms of this License in conveying all material for which you do
-not control copyright.  Those thus making or running the covered works
-for you must do so exclusively on your behalf, under your direction
-and control, on terms that prohibit them from making any copies of
-your copyrighted material outside their relationship with you.
-
-  Conveying under any other circumstances is permitted solely under
-the conditions stated below.  Sublicensing is not allowed; section 10
-makes it unnecessary.
-
-  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
-
-  No covered work shall be deemed part of an effective technological
-measure under any applicable law fulfilling obligations under article
-11 of the WIPO copyright treaty adopted on 20 December 1996, or
-similar laws prohibiting or restricting circumvention of such
-measures.
-
-  When you convey a covered work, you waive any legal power to forbid
-circumvention of technological measures to the extent such circumvention
-is effected by exercising rights under this License with respect to
-the covered work, and you disclaim any intention to limit operation or
-modification of the work as a means of enforcing, against the work's
-users, your or third parties' legal rights to forbid circumvention of
-technological measures.
-
-  4. Conveying Verbatim Copies.
-
-  You may convey verbatim copies of the Program's source code as you
-receive it, in any medium, provided that you conspicuously and
-appropriately publish on each copy an appropriate copyright notice;
-keep intact all notices stating that this License and any
-non-permissive terms added in accord with section 7 apply to the code;
-keep intact all notices of the absence of any warranty; and give all
-recipients a copy of this License along with the Program.
-
-  You may charge any price or no price for each copy that you convey,
-and you may offer support or warranty protection for a fee.
-
-  5. Conveying Modified Source Versions.
-
-  You may convey a work based on the Program, or the modifications to
-produce it from the Program, in the form of source code under the
-terms of section 4, provided that you also meet all of these conditions:
-
-    a) The work must carry prominent notices stating that you modified
-    it, and giving a relevant date.
-
-    b) The work must carry prominent notices stating that it is
-    released under this License and any conditions added under section
-    7.  This requirement modifies the requirement in section 4 to
-    "keep intact all notices".
-
-    c) You must license the entire work, as a whole, under this
-    License to anyone who comes into possession of a copy.  This
-    License will therefore apply, along with any applicable section 7
-    additional terms, to the whole of the work, and all its parts,
-    regardless of how they are packaged.  This License gives no
-    permission to license the work in any other way, but it does not
-    invalidate such permission if you have separately received it.
-
-    d) If the work has interactive user interfaces, each must display
-    Appropriate Legal Notices; however, if the Program has interactive
-    interfaces that do not display Appropriate Legal Notices, your
-    work need not make them do so.
-
-  A compilation of a covered work with other separate and independent
-works, which are not by their nature extensions of the covered work,
-and which are not combined with it such as to form a larger program,
-in or on a volume of a storage or distribution medium, is called an
-"aggregate" if the compilation and its resulting copyright are not
-used to limit the access or legal rights of the compilation's users
-beyond what the individual works permit.  Inclusion of a covered work
-in an aggregate does not cause this License to apply to the other
-parts of the aggregate.
-
-  6. Conveying Non-Source Forms.
-
-  You may convey a covered work in object code form under the terms
-of sections 4 and 5, provided that you also convey the
-machine-readable Corresponding Source under the terms of this License,
-in one of these ways:
-
-    a) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by the
-    Corresponding Source fixed on a durable physical medium
-    customarily used for software interchange.
-
-    b) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by a
-    written offer, valid for at least three years and valid for as
-    long as you offer spare parts or customer support for that product
-    model, to give anyone who possesses the object code either (1) a
-    copy of the Corresponding Source for all the software in the
-    product that is covered by this License, on a durable physical
-    medium customarily used for software interchange, for a price no
-    more than your reasonable cost of physically performing this
-    conveying of source, or (2) access to copy the
-    Corresponding Source from a network server at no charge.
-
-    c) Convey individual copies of the object code with a copy of the
-    written offer to provide the Corresponding Source.  This
-    alternative is allowed only occasionally and noncommercially, and
-    only if you received the object code with such an offer, in accord
-    with subsection 6b.
-
-    d) Convey the object code by offering access from a designated
-    place (gratis or for a charge), and offer equivalent access to the
-    Corresponding Source in the same way through the same place at no
-    further charge.  You need not require recipients to copy the
-    Corresponding Source along with the object code.  If the place to
-    copy the object code is a network server, the Corresponding Source
-    may be on a different server (operated by you or a third party)
-    that supports equivalent copying facilities, provided you maintain
-    clear directions next to the object code saying where to find the
-    Corresponding Source.  Regardless of what server hosts the
-    Corresponding Source, you remain obligated to ensure that it is
-    available for as long as needed to satisfy these requirements.
-
-    e) Convey the object code using peer-to-peer transmission, provided
-    you inform other peers where the object code and Corresponding
-    Source of the work are being offered to the general public at no
-    charge under subsection 6d.
-
-  A separable portion of the object code, whose source code is excluded
-from the Corresponding Source as a System Library, need not be
-included in conveying the object code work.
-
-  A "User Product" is either (1) a "consumer product", which means any
-tangible personal property which is normally used for personal, family,
-or household purposes, or (2) anything designed or sold for incorporation
-into a dwelling.  In determining whether a product is a consumer product,
-doubtful cases shall be resolved in favor of coverage.  For a particular
-product received by a particular user, "normally used" refers to a
-typical or common use of that class of product, regardless of the status
-of the particular user or of the way in which the particular user
-actually uses, or expects or is expected to use, the product.  A product
-is a consumer product regardless of whether the product has substantial
-commercial, industrial or non-consumer uses, unless such uses represent
-the only significant mode of use of the product.
-
-  "Installation Information" for a User Product means any methods,
-procedures, authorization keys, or other information required to install
-and execute modified versions of a covered work in that User Product from
-a modified version of its Corresponding Source.  The information must
-suffice to ensure that the continued functioning of the modified object
-code is in no case prevented or interfered with solely because
-modification has been made.
-
-  If you convey an object code work under this section in, or with, or
-specifically for use in, a User Product, and the conveying occurs as
-part of a transaction in which the right of possession and use of the
-User Product is transferred to the recipient in perpetuity or for a
-fixed term (regardless of how the transaction is characterized), the
-Corresponding Source conveyed under this section must be accompanied
-by the Installation Information.  But this requirement does not apply
-if neither you nor any third party retains the ability to install
-modified object code on the User Product (for example, the work has
-been installed in ROM).
-
-  The requirement to provide Installation Information does not include a
-requirement to continue to provide support service, warranty, or updates
-for a work that has been modified or installed by the recipient, or for
-the User Product in which it has been modified or installed.  Access to a
-network may be denied when the modification itself materially and
-adversely affects the operation of the network or violates the rules and
-protocols for communication across the network.
-
-  Corresponding Source conveyed, and Installation Information provided,
-in accord with this section must be in a format that is publicly
-documented (and with an implementation available to the public in
-source code form), and must require no special password or key for
-unpacking, reading or copying.
-
-  7. Additional Terms.
-
-  "Additional permissions" are terms that supplement the terms of this
-License by making exceptions from one or more of its conditions.
-Additional permissions that are applicable to the entire Program shall
-be treated as though they were included in this License, to the extent
-that they are valid under applicable law.  If additional permissions
-apply only to part of the Program, that part may be used separately
-under those permissions, but the entire Program remains governed by
-this License without regard to the additional permissions.
-
-  When you convey a copy of a covered work, you may at your option
-remove any additional permissions from that copy, or from any part of
-it.  (Additional permissions may be written to require their own
-removal in certain cases when you modify the work.)  You may place
-additional permissions on material, added by you to a covered work,
-for which you have or can give appropriate copyright permission.
-
-  Notwithstanding any other provision of this License, for material you
-add to a covered work, you may (if authorized by the copyright holders of
-that material) supplement the terms of this License with terms:
-
-    a) Disclaiming warranty or limiting liability differently from the
-    terms of sections 15 and 16 of this License; or
-
-    b) Requiring preservation of specified reasonable legal notices or
-    author attributions in that material or in the Appropriate Legal
-    Notices displayed by works containing it; or
-
-    c) Prohibiting misrepresentation of the origin of that material, or
-    requiring that modified versions of such material be marked in
-    reasonable ways as different from the original version; or
-
-    d) Limiting the use for publicity purposes of names of licensors or
-    authors of the material; or
-
-    e) Declining to grant rights under trademark law for use of some
-    trade names, trademarks, or service marks; or
-
-    f) Requiring indemnification of licensors and authors of that
-    material by anyone who conveys the material (or modified versions of
-    it) with contractual assumptions of liability to the recipient, for
-    any liability that these contractual assumptions directly impose on
-    those licensors and authors.
-
-  All other non-permissive additional terms are considered "further
-restrictions" within the meaning of section 10.  If the Program as you
-received it, or any part of it, contains a notice stating that it is
-governed by this License along with a term that is a further
-restriction, you may remove that term.  If a license document contains
-a further restriction but permits relicensing or conveying under this
-License, you may add to a covered work material governed by the terms
-of that license document, provided that the further restriction does
-not survive such relicensing or conveying.
-
-  If you add terms to a covered work in accord with this section, you
-must place, in the relevant source files, a statement of the
-additional terms that apply to those files, or a notice indicating
-where to find the applicable terms.
-
-  Additional terms, permissive or non-permissive, may be stated in the
-form of a separately written license, or stated as exceptions;
-the above requirements apply either way.
-
-  8. Termination.
-
-  You may not propagate or modify a covered work except as expressly
-provided under this License.  Any attempt otherwise to propagate or
-modify it is void, and will automatically terminate your rights under
-this License (including any patent licenses granted under the third
-paragraph of section 11).
-
-  However, if you cease all violation of this License, then your
-license from a particular copyright holder is reinstated (a)
-provisionally, unless and until the copyright holder explicitly and
-finally terminates your license, and (b) permanently, if the copyright
-holder fails to notify you of the violation by some reasonable means
-prior to 60 days after the cessation.
-
-  Moreover, your license from a particular copyright holder is
-reinstated permanently if the copyright holder notifies you of the
-violation by some reasonable means, this is the first time you have
-received notice of violation of this License (for any work) from that
-copyright holder, and you cure the violation prior to 30 days after
-your receipt of the notice.
-
-  Termination of your rights under this section does not terminate the
-licenses of parties who have received copies or rights from you under
-this License.  If your rights have been terminated and not permanently
-reinstated, you do not qualify to receive new licenses for the same
-material under section 10.
-
-  9. Acceptance Not Required for Having Copies.
-
-  You are not required to accept this License in order to receive or
-run a copy of the Program.  Ancillary propagation of a covered work
-occurring solely as a consequence of using peer-to-peer transmission
-to receive a copy likewise does not require acceptance.  However,
-nothing other than this License grants you permission to propagate or
-modify any covered work.  These actions infringe copyright if you do
-not accept this License.  Therefore, by modifying or propagating a
-covered work, you indicate your acceptance of this License to do so.
-
-  10. Automatic Licensing of Downstream Recipients.
-
-  Each time you convey a covered work, the recipient automatically
-receives a license from the original licensors, to run, modify and
-propagate that work, subject to this License.  You are not responsible
-for enforcing compliance by third parties with this License.
-
-  An "entity transaction" is a transaction transferring control of an
-organization, or substantially all assets of one, or subdividing an
-organization, or merging organizations.  If propagation of a covered
-work results from an entity transaction, each party to that
-transaction who receives a copy of the work also receives whatever
-licenses to the work the party's predecessor in interest had or could
-give under the previous paragraph, plus a right to possession of the
-Corresponding Source of the work from the predecessor in interest, if
-the predecessor has it or can get it with reasonable efforts.
-
-  You may not impose any further restrictions on the exercise of the
-rights granted or affirmed under this License.  For example, you may
-not impose a license fee, royalty, or other charge for exercise of
-rights granted under this License, and you may not initiate litigation
-(including a cross-claim or counterclaim in a lawsuit) alleging that
-any patent claim is infringed by making, using, selling, offering for
-sale, or importing the Program or any portion of it.
-
-  11. Patents.
-
-  A "contributor" is a copyright holder who authorizes use under this
-License of the Program or a work on which the Program is based.  The
-work thus licensed is called the contributor's "contributor version".
-
-  A contributor's "essential patent claims" are all patent claims
-owned or controlled by the contributor, whether already acquired or
-hereafter acquired, that would be infringed by some manner, permitted
-by this License, of making, using, or selling its contributor version,
-but do not include claims that would be infringed only as a
-consequence of further modification of the contributor version.  For
-purposes of this definition, "control" includes the right to grant
-patent sublicenses in a manner consistent with the requirements of
-this License.
-
-  Each contributor grants you a non-exclusive, worldwide, royalty-free
-patent license under the contributor's essential patent claims, to
-make, use, sell, offer for sale, import and otherwise run, modify and
-propagate the contents of its contributor version.
-
-  In the following three paragraphs, a "patent license" is any express
-agreement or commitment, however denominated, not to enforce a patent
-(such as an express permission to practice a patent or covenant not to
-sue for patent infringement).  To "grant" such a patent license to a
-party means to make such an agreement or commitment not to enforce a
-patent against the party.
-
-  If you convey a covered work, knowingly relying on a patent license,
-and the Corresponding Source of the work is not available for anyone
-to copy, free of charge and under the terms of this License, through a
-publicly available network server or other readily accessible means,
-then you must either (1) cause the Corresponding Source to be so
-available, or (2) arrange to deprive yourself of the benefit of the
-patent license for this particular work, or (3) arrange, in a manner
-consistent with the requirements of this License, to extend the patent
-license to downstream recipients.  "Knowingly relying" means you have
-actual knowledge that, but for the patent license, your conveying the
-covered work in a country, or your recipient's use of the covered work
-in a country, would infringe one or more identifiable patents in that
-country that you have reason to believe are valid.
-
-  If, pursuant to or in connection with a single transaction or
-arrangement, you convey, or propagate by procuring conveyance of, a
-covered work, and grant a patent license to some of the parties
-receiving the covered work authorizing them to use, propagate, modify
-or convey a specific copy of the covered work, then the patent license
-you grant is automatically extended to all recipients of the covered
-work and works based on it.
-
-  A patent license is "discriminatory" if it does not include within
-the scope of its coverage, prohibits the exercise of, or is
-conditioned on the non-exercise of one or more of the rights that are
-specifically granted under this License.  You may not convey a covered
-work if you are a party to an arrangement with a third party that is
-in the business of distributing software, under which you make payment
-to the third party based on the extent of your activity of conveying
-the work, and under which the third party grants, to any of the
-parties who would receive the covered work from you, a discriminatory
-patent license (a) in connection with copies of the covered work
-conveyed by you (or copies made from those copies), or (b) primarily
-for and in connection with specific products or compilations that
-contain the covered work, unless you entered into that arrangement,
-or that patent license was granted, prior to 28 March 2007.
-
-  Nothing in this License shall be construed as excluding or limiting
-any implied license or other defenses to infringement that may
-otherwise be available to you under applicable patent law.
-
-  12. No Surrender of Others' Freedom.
-
-  If conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License.  If you cannot convey a
-covered work so as to satisfy simultaneously your obligations under this
-License and any other pertinent obligations, then as a consequence you may
-not convey it at all.  For example, if you agree to terms that obligate you
-to collect a royalty for further conveying from those to whom you convey
-the Program, the only way you could satisfy both those terms and this
-License would be to refrain entirely from conveying the Program.
-
-  13. Use with the GNU Affero General Public License.
-
-  Notwithstanding any other provision of this License, you have
-permission to link or combine any covered work with a work licensed
-under version 3 of the GNU Affero General Public License into a single
-combined work, and to convey the resulting work.  The terms of this
-License will continue to apply to the part which is the covered work,
-but the special requirements of the GNU Affero General Public License,
-section 13, concerning interaction through a network will apply to the
-combination as such.
-
-  14. Revised Versions of this License.
-
-  The Free Software Foundation may publish revised and/or new versions of
-the GNU General Public License from time to time.  Such new versions will
-be similar in spirit to the present version, but may differ in detail to
-address new problems or concerns.
-
-  Each version is given a distinguishing version number.  If the
-Program specifies that a certain numbered version of the GNU General
-Public License "or any later version" applies to it, you have the
-option of following the terms and conditions either of that numbered
-version or of any later version published by the Free Software
-Foundation.  If the Program does not specify a version number of the
-GNU General Public License, you may choose any version ever published
-by the Free Software Foundation.
-
-  If the Program specifies that a proxy can decide which future
-versions of the GNU General Public License can be used, that proxy's
-public statement of acceptance of a version permanently authorizes you
-to choose that version for the Program.
-
-  Later license versions may give you additional or different
-permissions.  However, no additional obligations are imposed on any
-author or copyright holder as a result of your choosing to follow a
-later version.
-
-  15. Disclaimer of Warranty.
-
-  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
-APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
-HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
-OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
-THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
-PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
-IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
-ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
-
-  16. Limitation of Liability.
-
-  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
-THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
-GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
-USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
-DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
-PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
-EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
-SUCH DAMAGES.
-
-  17. Interpretation of Sections 15 and 16.
-
-  If the disclaimer of warranty and limitation of liability provided
-above cannot be given local legal effect according to their terms,
-reviewing courts shall apply local law that most closely approximates
-an absolute waiver of all civil liability in connection with the
-Program, unless a warranty or assumption of liability accompanies a
-copy of the Program in return for a fee.
-
-                     END OF TERMS AND CONDITIONS
-
-            How to Apply These Terms to Your New Programs
-
-  If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
-
-  To do so, attach the following notices to the program.  It is safest
-to attach them to the start of each source file to most effectively
-state the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License
-    along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper mail.
-
-  If the program does terminal interaction, make it output a short
-notice like this when it starts in an interactive mode:
-
-    <program>  Copyright (C) <year>  <name of author>
-    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
-    This is free software, and you are welcome to redistribute it
-    under certain conditions; type `show c' for details.
-
-The hypothetical commands `show w' and `show c' should show the appropriate
-parts of the General Public License.  Of course, your program's commands
-might be different; for a GUI interface, you would use an "about box".
-
-  You should also get your employer (if you work as a programmer) or school,
-if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU GPL, see
-<https://www.gnu.org/licenses/>.
-
-  The GNU General Public License does not permit incorporating your program
-into proprietary programs.  If your program is a subroutine library, you
-may consider it more useful to permit linking proprietary applications with
-the library.  If this is what you want to do, use the GNU Lesser General
-Public License instead of this License.  But first, please read
-<https://www.gnu.org/licenses/why-not-lgpl.html>.
+MIT License
+
+Copyright (c) 2025 Avenge Media LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR 

LICENSE_CHANGE_12_11_2025.md

@@ -0,0 +1,23 @@
+# DankMaterialShell License Change
+
+Relicensing from GPL-3.0 to MIT.
+
+Consent and documentation is available in [pull request #686](https://github.com/AvengeMedia/DankMaterialShell/pull/686) and is summarized below.
+
+## Contributors
+
+The project has 21 contributors requiring consent:
+- 2 primary authors (10k+ lines each)
+- 7 major contributors (1k+ lines or 10+ commits)
+- 12 significant contributors (100+ lines)
+- 2 derivative works (code adapted from other projects)
+
+Contributors with <50 lines are excluded as they don't meet copyright thresholds. Automated bots don't hold copyright.
+
+## Consent Status
+
+All 21 contributors have provided consent. Three contributions were sufficiently reverted or rewritten by maintainers, making them eligible without original author consent.
+
+## Reasoning
+
+GPL-3.0 may require plugins to also be GPL-3.0 licensed. MIT allows plugin authors to choose their own licenses.

Modals/BluetoothPairingModal.qml

@@ -7,6 +7,8 @@ import qs.Widgets
 DankModal {
     id: root
 
+    layerNamespace: "dms:bluetooth-pairing"
+
     property string deviceName: ""
     property string deviceAddress: ""
     property string requestType: ""
@@ -201,7 +203,7 @@ DankModal {
                     width: parent.width
                     height: 56
                     radius: Theme.cornerRadius
-                    color: Theme.surfaceContainerHighest
+                    color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
                     visible: requestType === "confirm"
 
                     Column {

Modals/Clipboard/ClipboardEntry.qml

@@ -26,7 +26,7 @@ Rectangle {
         if (isSelected) {
             return Theme.primaryPressed
         }
-        return mouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceContainerHigh
+        return mouseArea.containsMouse ? Theme.primaryHoverLight : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
     }
 
     Row {

Modals/Clipboard/ClipboardHistoryModal.qml

@@ -12,6 +12,8 @@ import qs.Widgets
 DankModal {
     id: clipboardHistoryModal
 
+    layerNamespace: "dms:clipboard"
+
     property int totalCount: 0
     property var clipboardEntries: []
     property string searchText: ""
@@ -136,7 +138,7 @@ DankModal {
     visible: false
     width: ClipboardConstants.modalWidth
     height: ClipboardConstants.modalHeight
-    backgroundColor: Theme.popupBackground()
+    backgroundColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
     cornerRadius: Theme.cornerRadius
     borderColor: Theme.outlineMedium
     borderWidth: 1

Modals/Common/ConfirmModal.qml

@@ -58,7 +58,7 @@ DankModal {
     shouldBeVisible: false
     allowStacking: true
     width: 350
-    height: 160
+    height: contentLoader.item ? contentLoader.item.implicitHeight + Theme.spacingM * 2 : 160
     enableShadow: true
     shouldHaveFocus: true
     onBackgroundClicked: {
@@ -158,11 +158,17 @@ DankModal {
     content: Component {
         Item {
             anchors.fill: parent
+            implicitHeight: mainColumn.implicitHeight
 
             Column {
-                anchors.centerIn: parent
-                width: parent.width - Theme.spacingM * 2
-                spacing: Theme.spacingM
+                id: mainColumn
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
+                anchors.leftMargin: Theme.spacingL
+                anchors.rightMargin: Theme.spacingL
+                anchors.topMargin: Theme.spacingL
+                spacing: 0
 
                 StyledText {
                     text: confirmTitle
@@ -173,6 +179,11 @@ DankModal {
                     horizontalAlignment: Text.AlignHCenter
                 }
 
+                Item {
+                    width: 1
+                    height: Theme.spacingL
+                }
+
                 StyledText {
                     text: confirmMessage
                     font.pixelSize: Theme.fontSizeMedium
@@ -183,7 +194,8 @@ DankModal {
                 }
 
                 Item {
-                    height: Theme.spacingS
+                    width: 1
+                    height: Theme.spacingL * 1.5
                 }
 
                 Row {
@@ -265,6 +277,11 @@ DankModal {
                         }
                     }
                 }
+
+                Item {
+                    width: 1
+                    height: Theme.spacingL
+                }
             }
         }
     }

Modals/Common/DankModal.qml

@@ -4,11 +4,13 @@ import Quickshell.Hyprland
 import Quickshell.Wayland
 import qs.Common
 import qs.Services
+import qs.Widgets
 
 PanelWindow {
     id: root
 
-    WlrLayershell.namespace: "quickshell:modal"
+    property string layerNamespace: "dms:modal"
+    WlrLayershell.namespace: layerNamespace
 
     property alias content: contentLoader.sourceComponent
     property alias contentLoader: contentLoader
@@ -17,17 +19,7 @@ PanelWindow {
     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
-    }
+    readonly property real dpr: CompositorService.getScreenScale(screen)
     property bool showBackground: true
     property real backgroundOpacity: 0.5
     property string positioning: "center"
@@ -61,11 +53,15 @@ PanelWindow {
         closeTimer.stop()
         shouldBeVisible = true
         visible = true
-        focusScope.forceActiveFocus()
+        shouldHaveFocus = false
+        Qt.callLater(() => {
+            shouldHaveFocus = Qt.binding(() => shouldBeVisible)
+        })
     }
 
     function close() {
         shouldBeVisible = false
+        shouldHaveFocus = false
         closeTimer.restart()
     }
 
@@ -79,7 +75,18 @@ PanelWindow {
 
     visible: shouldBeVisible
     color: "transparent"
-    WlrLayershell.layer: WlrLayershell.Top // if set to overlay -> virtual keyboards can be stuck under modal
+    WlrLayershell.layer: {
+        switch (Quickshell.env("DMS_MODAL_LAYER")) {
+        case "bottom":
+            return WlrLayershell.Bottom
+        case "overlay":
+            return WlrLayershell.Overlay
+        case "background":
+            return WlrLayershell.Background
+        default:
+            return WlrLayershell.Top
+        }
+    }
     WlrLayershell.exclusiveZone: -1
     WlrLayershell.keyboardFocus: shouldHaveFocus ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
     onVisibleChanged: {
@@ -120,24 +127,24 @@ PanelWindow {
         bottom: true
     }
 
+    MouseArea {
+        anchors.fill: parent
+        enabled: root.closeOnBackgroundClick && root.shouldBeVisible
+        onClicked: mouse => {
+                       const localPos = mapToItem(contentContainer, mouse.x, mouse.y)
+                       if (localPos.x < 0 || localPos.x > contentContainer.width || localPos.y < 0 || localPos.y > contentContainer.height) {
+                           root.backgroundClicked()
+                       }
+                   }
+    }
+
     Rectangle {
         id: background
 
         anchors.fill: parent
         color: "black"
-        opacity: root.showBackground ? (root.shouldBeVisible ? root.backgroundOpacity : 0) : 0
-        visible: root.showBackground
-
-        MouseArea {
-            anchors.fill: parent
-            enabled: root.closeOnBackgroundClick
-            onClicked: mouse => {
-                           const localPos = mapToItem(contentContainer, mouse.x, mouse.y)
-                           if (localPos.x < 0 || localPos.x > contentContainer.width || localPos.y < 0 || localPos.y > contentContainer.height) {
-                               root.backgroundClicked()
-                           }
-                       }
-        }
+        opacity: root.showBackground && SettingsData.modalDarkenBackground ? (root.shouldBeVisible ? root.backgroundOpacity : 0) : 0
+        visible: root.showBackground && SettingsData.modalDarkenBackground
 
         Behavior on opacity {
             NumberAnimation {
@@ -148,12 +155,11 @@ PanelWindow {
         }
     }
 
-    Rectangle {
-        id: contentContainer
+    Item {
+        id: modalContainer
 
         width: Theme.px(root.width, dpr)
         height: Theme.px(root.height, dpr)
-        anchors.centerIn: undefined
         x: {
             if (positioning === "center") {
                 return Theme.snap((root.screenWidth - width) / 2, dpr)
@@ -174,99 +180,96 @@ PanelWindow {
             }
             return 0
         }
-        color: root.backgroundColor
-        radius: root.cornerRadius
-        border.color: root.borderColor
-        border.width: root.borderWidth
-        clip: false
-        layer.enabled: true
-        layer.smooth: true
-        opacity: root.shouldBeVisible ? 1 : 0
-        transform: [scaleTransform, motionTransform]
 
-        Scale {
-            id: scaleTransform
+        readonly property bool slide: root.animationType === "slide"
+        readonly property real offsetX: slide ? 15 : 0
+        readonly property real offsetY: slide ? -30 : root.animationOffset
 
-            origin.x: contentContainer.width / 2
-            origin.y: contentContainer.height / 2
-            xScale: root.shouldBeVisible ? 1 : root.animationScaleCollapsed
-            yScale: root.shouldBeVisible ? 1 : root.animationScaleCollapsed
+        property real animX: 0
+        property real animY: 0
+        property real scaleValue: root.animationScaleCollapsed
 
-            Behavior on xScale {
-                NumberAnimation {
-                    duration: root.animationDuration
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
-                }
-            }
+        onOffsetXChanged: animX = Theme.snap(root.shouldBeVisible ? 0 : offsetX, root.dpr)
+        onOffsetYChanged: animY = Theme.snap(root.shouldBeVisible ? 0 : offsetY, root.dpr)
 
-            Behavior on yScale {
-                NumberAnimation {
-                    duration: root.animationDuration
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
-                }
+        Connections {
+            target: root
+            function onShouldBeVisibleChanged() {
+                modalContainer.animX = Theme.snap(root.shouldBeVisible ? 0 : modalContainer.offsetX, root.dpr)
+                modalContainer.animY = Theme.snap(root.shouldBeVisible ? 0 : modalContainer.offsetY, root.dpr)
+                modalContainer.scaleValue = root.shouldBeVisible ? 1.0 : root.animationScaleCollapsed
             }
         }
 
-        Translate {
-            id: motionTransform
-
-            readonly property bool slide: root.animationType === "slide"
-            readonly property real hiddenX: slide ? 15 : 0
-            readonly property real hiddenY: slide ? -30 : root.animationOffset
-
-            x: Theme.snap(root.shouldBeVisible ? 0 : hiddenX, root.dpr)
-            y: Theme.snap(root.shouldBeVisible ? 0 : hiddenY, root.dpr)
-
-            Behavior on x {
-                NumberAnimation {
-                    duration: root.animationDuration
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
-                }
-            }
-
-            Behavior on y {
-                NumberAnimation {
-                    duration: root.animationDuration
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
-                }
-            }
-        }
-
-        Behavior on opacity {
+        Behavior on animX {
             NumberAnimation {
-                duration: animationDuration
+                duration: root.animationDuration
                 easing.type: Easing.BezierSpline
                 easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
             }
         }
 
-        FocusScope {
-            anchors.fill: parent
-            focus: root.shouldBeVisible
+        Behavior on animY {
+            NumberAnimation {
+                duration: root.animationDuration
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+            }
+        }
+
+        Behavior on scaleValue {
+            NumberAnimation {
+                duration: root.animationDuration
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+            }
+        }
+
+        Item {
+            id: contentContainer
+
+            anchors.centerIn: parent
+            width: parent.width
+            height: parent.height
             clip: false
+            layer.enabled: true
+            layer.smooth: false
+            layer.textureSize: Qt.size(width * root.dpr, height * root.dpr)
+            opacity: root.shouldBeVisible ? 1 : 0
+            scale: modalContainer.scaleValue
+            x: Theme.snap(modalContainer.animX + (parent.width - width) * (1 - modalContainer.scaleValue) * 0.5, root.dpr)
+            y: Theme.snap(modalContainer.animY + (parent.height - height) * (1 - modalContainer.scaleValue) * 0.5, root.dpr)
 
-            Item {
-                id: directContentWrapper
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: animationDuration
+                    easing.type: Easing.BezierSpline
+                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+                }
+            }
 
+            DankRectangle {
                 anchors.fill: parent
-                visible: root.directContent !== null
-                focus: true
+                color: root.backgroundColor
+                borderColor: root.borderColor
+                borderWidth: root.borderWidth
+                radius: root.cornerRadius
+            }
+
+            FocusScope {
+                anchors.fill: parent
+                focus: root.shouldBeVisible
                 clip: false
 
-                Component.onCompleted: {
-                    if (root.directContent) {
-                        root.directContent.parent = directContentWrapper
-                        root.directContent.anchors.fill = directContentWrapper
-                        Qt.callLater(() => root.directContent.forceActiveFocus())
-                    }
-                }
+                Item {
+                    id: directContentWrapper
 
-                Connections {
-                    function onDirectContentChanged() {
+                    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
@@ -274,23 +277,33 @@ PanelWindow {
                         }
                     }
 
-                    target: root
+                    Connections {
+                        function onDirectContentChanged() {
+                            if (root.directContent) {
+                                root.directContent.parent = directContentWrapper
+                                root.directContent.anchors.fill = directContentWrapper
+                                Qt.callLater(() => root.directContent.forceActiveFocus())
+                            }
+                        }
+
+                        target: root
+                    }
                 }
-            }
 
-            Loader {
-                id: contentLoader
+                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
+                    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())
+                    onLoaded: {
+                        if (item) {
+                            Qt.callLater(() => item.forceActiveFocus())
+                        }
                     }
                 }
             }
@@ -310,20 +323,5 @@ PanelWindow {
                                       event.accepted = true
                                   }
                               }
-        onVisibleChanged: {
-            if (visible && shouldHaveFocus) {
-                Qt.callLater(() => focusScope.forceActiveFocus())
-            }
-        }
-
-        Connections {
-            function onShouldHaveFocusChanged() {
-                if (shouldHaveFocus && shouldBeVisible) {
-                    Qt.callLater(() => focusScope.forceActiveFocus())
-                }
-            }
-
-            target: root
-        }
     }
 }

Modals/DankColorPickerModal.qml

@@ -10,6 +10,8 @@ import qs.Widgets
 DankModal {
     id: root
 
+    layerNamespace: "dms:color-picker"
+
     property string pickerTitle: "Choose Color"
     property color selectedColor: SessionData.recentColors.length > 0 ? SessionData.recentColors[0] : Theme.primary
     property var onColorSelectedCallback: null
@@ -45,6 +47,12 @@ DankModal {
         close()
     }
 
+    function hideInstant() {
+        onColorSelectedCallback = null
+        shouldBeVisible = false
+        visible = false
+    }
+
     onColorSelected: (color) => {
         if (onColorSelectedCallback) {
             onColorSelectedCallback(color)
@@ -78,7 +86,7 @@ DankModal {
     }
 
     function pickColorFromScreen() {
-        hide()
+        hideInstant()
         Proc.runCommand("hyprpicker", ["hyprpicker", "--format=hex"], (output, errorCode) => {
             if (errorCode !== 0) {
                 console.warn("hyprpicker exited with code:", errorCode)
@@ -98,12 +106,13 @@ DankModal {
     }
 
     width: 680
-    height: 680
+    height: contentLoader.item ? contentLoader.item.implicitHeight + Theme.spacingM * 2 : 680
     backgroundColor: Theme.surfaceContainer
     cornerRadius: Theme.cornerRadius
     borderColor: Theme.outlineMedium
     borderWidth: 1
     keepContentLoaded: true
+    allowStacking: true
 
     onBackgroundClicked: hide()
 
@@ -114,6 +123,7 @@ DankModal {
             property alias hexInput: hexInput
 
             anchors.fill: parent
+            implicitHeight: mainColumn.implicitHeight
             focus: true
 
             Keys.onEscapePressed: event => {
@@ -122,7 +132,10 @@ DankModal {
             }
 
             Column {
-                anchors.fill: parent
+                id: mainColumn
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
                 anchors.margins: Theme.spacingM
                 spacing: Theme.spacingM
 
@@ -376,7 +389,7 @@ DankModal {
                                             if (index < SessionData.recentColors.length) {
                                                 return SessionData.recentColors[index]
                                             }
-                                            return Theme.surfaceContainerHigh
+                                            return Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
                                         }
 
                                         opacity: index < SessionData.recentColors.length ? 1.0 : 0.3
@@ -436,103 +449,212 @@ DankModal {
                     }
                 }
 
-                Row {
+                Column {
                     width: parent.width
                     spacing: Theme.spacingS
 
-                    StyledText {
-                        text: I18n.tr("Hex:")
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: Theme.surfaceTextMedium
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
+                    Row {
+                        width: parent.width
+                        spacing: Theme.spacingM
 
-                    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
+                        Column {
+                            width: (parent.width - Theme.spacingM * 2) / 3
+                            spacing: Theme.spacingXS
+
+                            StyledText {
+                                text: I18n.tr("Hex")
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.surfaceTextMedium
+                                font.weight: Font.Medium
+                            }
+
+                            Row {
+                                width: parent.width
+                                spacing: Theme.spacingXS
+
+                                DankTextField {
+                                    id: hexInput
+                                    width: parent.width - 36
+                                    height: 36
+                                    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
+                                    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)
+                                        }
+                                    }
+                                }
+
+                                DankActionButton {
+                                    iconName: "content_copy"
+                                    iconSize: Theme.iconSize - 6
+                                    iconColor: Theme.surfaceText
+                                    buttonSize: 36
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    onClicked: () => {
+                                        root.copyColorToClipboard(hexInput.text)
+                                    }
+                                }
+                            }
                         }
-                        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)
+
+                        Column {
+                            width: (parent.width - Theme.spacingM * 2) / 3
+                            spacing: Theme.spacingXS
+
+                            StyledText {
+                                text: I18n.tr("RGB")
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.surfaceTextMedium
+                                font.weight: Font.Medium
+                            }
+
+                            Row {
+                                width: parent.width
+                                spacing: Theme.spacingXS
+
+                                Rectangle {
+                                    width: parent.width - 36
+                                    height: 36
+                                    radius: Theme.cornerRadius
+                                    color: Theme.surfaceHover
+                                    border.color: Theme.outline
+                                    border.width: 1
+
+                                    StyledText {
+                                        anchors.centerIn: parent
+                                        text: {
+                                            const r = Math.round(root.currentColor.r * 255)
+                                            const g = Math.round(root.currentColor.g * 255)
+                                            const b = Math.round(root.currentColor.b * 255)
+                                            if (root.alpha < 1) {
+                                                const a = Math.round(root.alpha * 255)
+                                                return `${r}, ${g}, ${b}, ${a}`
+                                            }
+                                            return `${r}, ${g}, ${b}`
+                                        }
+                                        font.pixelSize: Theme.fontSizeMedium
+                                        color: Theme.surfaceText
+                                    }
+                                }
+
+                                DankActionButton {
+                                    iconName: "content_copy"
+                                    iconSize: Theme.iconSize - 6
+                                    iconColor: Theme.surfaceText
+                                    buttonSize: 36
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    onClicked: () => {
+                                        const r = Math.round(root.currentColor.r * 255)
+                                        const g = Math.round(root.currentColor.g * 255)
+                                        const b = Math.round(root.currentColor.b * 255)
+                                        let rgbString
+                                        if (root.alpha < 1) {
+                                            const a = Math.round(root.alpha * 255)
+                                            rgbString = `rgba(${r}, ${g}, ${b}, ${a})`
+                                        } else {
+                                            rgbString = `rgb(${r}, ${g}, ${b})`
+                                        }
+                                        Quickshell.execDetached(["sh", "-c", `echo "${rgbString}" | wl-copy`])
+                                        ToastService.showInfo(`${rgbString} copied`)
+                                    }
+                                }
+                            }
+                        }
+
+                        Column {
+                            width: (parent.width - Theme.spacingM * 2) / 3
+                            spacing: Theme.spacingXS
+
+                            StyledText {
+                                text: I18n.tr("HSV")
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.surfaceTextMedium
+                                font.weight: Font.Medium
+                            }
+
+                            Row {
+                                width: parent.width
+                                spacing: Theme.spacingXS
+
+                                Rectangle {
+                                    width: parent.width - 36
+                                    height: 36
+                                    radius: Theme.cornerRadius
+                                    color: Theme.surfaceHover
+                                    border.color: Theme.outline
+                                    border.width: 1
+
+                                    StyledText {
+                                        anchors.centerIn: parent
+                                        text: {
+                                            const h = Math.round(root.hue * 360)
+                                            const s = Math.round(root.saturation * 100)
+                                            const v = Math.round(root.value * 100)
+                                            if (root.alpha < 1) {
+                                                const a = Math.round(root.alpha * 100)
+                                                return `${h}°, ${s}%, ${v}%, ${a}%`
+                                            }
+                                            return `${h}°, ${s}%, ${v}%`
+                                        }
+                                        font.pixelSize: Theme.fontSizeMedium
+                                        color: Theme.surfaceText
+                                    }
+                                }
+
+                                DankActionButton {
+                                    iconName: "content_copy"
+                                    iconSize: Theme.iconSize - 6
+                                    iconColor: Theme.surfaceText
+                                    buttonSize: 36
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    onClicked: () => {
+                                        const h = Math.round(root.hue * 360)
+                                        const s = Math.round(root.saturation * 100)
+                                        const v = Math.round(root.value * 100)
+                                        let hsvString
+                                        if (root.alpha < 1) {
+                                            const a = Math.round(root.alpha * 100)
+                                            hsvString = `${h}, ${s}, ${v}, ${a}`
+                                        } else {
+                                            hsvString = `${h}, ${s}, ${v}`
+                                        }
+                                        Quickshell.execDetached(["sh", "-c", `echo "${hsvString}" | wl-copy`])
+                                        ToastService.showInfo(`HSV ${hsvString} copied`)
+                                    }
+                                }
                             }
                         }
                     }
 
                     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 {
+                        visible: root.onColorSelectedCallback !== null && root.onColorSelectedCallback !== undefined
                         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")
+                        text: I18n.tr("Save")
                         backgroundColor: Theme.primary
                         textColor: Theme.background
-                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.right: parent.right
                         onClicked: {
-                            const colorString = root.currentColor.toString()
-                            root.copyColorToClipboard(colorString)
+                            SessionData.addRecentColor(root.currentColor)
+                            root.colorSelected(root.currentColor)
+                            root.hide()
                         }
                     }
                 }

Modals/DisplayConfirmationModal.qml

@@ -0,0 +1,246 @@
+import QtQuick
+import qs.Common
+import qs.Modals.Common
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: root
+
+    property string outputName: ""
+    property var position: undefined
+    property var mode: undefined
+    property var vrr: undefined
+    property int countdown: 15
+
+    shouldBeVisible: false
+    allowStacking: true
+    width: 420
+    height: contentLoader.item ? contentLoader.item.implicitHeight + Theme.spacingM * 2 : 200
+
+    Timer {
+        id: countdownTimer
+        interval: 1000
+        repeat: true
+        running: root.shouldBeVisible
+        onTriggered: {
+            countdown--
+            if (countdown <= 0) {
+                revert()
+            }
+        }
+    }
+
+    onOpened: {
+        countdown = 15
+        countdownTimer.start()
+    }
+
+    onClosed: {
+        countdownTimer.stop()
+    }
+
+    onBackgroundClicked: revert
+
+    content: Component {
+        FocusScope {
+            id: confirmContent
+
+            anchors.fill: parent
+            focus: true
+            implicitHeight: mainColumn.implicitHeight
+
+            Keys.onEscapePressed: event => {
+                revert()
+                event.accepted = true
+            }
+
+            Keys.onReturnPressed: event => {
+                confirm()
+                event.accepted = true
+            }
+
+            Column {
+                id: mainColumn
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
+                anchors.leftMargin: Theme.spacingM
+                anchors.rightMargin: Theme.spacingM
+                anchors.topMargin: Theme.spacingM
+                spacing: Theme.spacingM
+
+                Column {
+                    width: parent.width
+                    spacing: Theme.spacingXS
+
+                    StyledText {
+                        text: I18n.tr("Confirm Display Changes")
+                        font.pixelSize: Theme.fontSizeLarge
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                    }
+
+                    StyledText {
+                        text: I18n.tr("Display settings for ") + outputName
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: Theme.surfaceTextMedium
+                    }
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: 80
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceContainerHighest
+
+                    Column {
+                        anchors.centerIn: parent
+                        spacing: 4
+
+                        StyledText {
+                            text: I18n.tr("Reverting in:")
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceTextMedium
+                            anchors.horizontalCenter: parent.horizontalCenter
+                        }
+
+                        StyledText {
+                            text: countdown + "s"
+                            font.pixelSize: Theme.fontSizeXLarge * 1.5
+                            color: Theme.primary
+                            font.weight: Font.Bold
+                            anchors.horizontalCenter: parent.horizontalCenter
+                        }
+                    }
+                }
+
+                Column {
+                    width: parent.width
+                    spacing: Theme.spacingXS
+
+                    StyledText {
+                        text: I18n.tr("Changes:")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceTextMedium
+                        font.weight: Font.Medium
+                    }
+
+                    StyledText {
+                        visible: position !== undefined && position !== null
+                        text: I18n.tr("Position: ") + (position ? position.x + ", " + position.y : "")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceText
+                    }
+
+                    StyledText {
+                        visible: mode !== undefined && mode !== null && mode !== ""
+                        text: I18n.tr("Mode: ") + (mode || "")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceText
+                    }
+
+                    StyledText {
+                        visible: vrr !== undefined && vrr !== null
+                        text: I18n.tr("VRR: ") + (vrr ? I18n.tr("Enabled") : I18n.tr("Disabled"))
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceText
+                    }
+                }
+
+                Item {
+                    width: parent.width
+                    height: 36
+
+                    Row {
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingS
+
+                        Rectangle {
+                            width: Math.max(70, revertText.contentWidth + Theme.spacingM * 2)
+                            height: 36
+                            radius: Theme.cornerRadius
+                            color: revertArea.containsMouse ? Theme.surfaceTextHover : "transparent"
+                            border.color: Theme.surfaceVariantAlpha
+                            border.width: 1
+
+                            StyledText {
+                                id: revertText
+
+                                anchors.centerIn: parent
+                                text: I18n.tr("Revert")
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceText
+                                font.weight: Font.Medium
+                            }
+
+                            MouseArea {
+                                id: revertArea
+
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: revert
+                            }
+                        }
+
+                        Rectangle {
+                            width: Math.max(80, confirmText.contentWidth + Theme.spacingM * 2)
+                            height: 36
+                            radius: Theme.cornerRadius
+                            color: confirmArea.containsMouse ? Qt.darker(Theme.primary, 1.1) : Theme.primary
+
+                            StyledText {
+                                id: confirmText
+
+                                anchors.centerIn: parent
+                                text: I18n.tr("Keep Changes")
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.background
+                                font.weight: Font.Medium
+                            }
+
+                            MouseArea {
+                                id: confirmArea
+
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: confirm
+                            }
+
+                            Behavior on color {
+                                ColorAnimation {
+                                    duration: Theme.shortDuration
+                                    easing.type: Theme.standardEasing
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            DankActionButton {
+                anchors.top: parent.top
+                anchors.right: parent.right
+                anchors.topMargin: Theme.spacingM
+                anchors.rightMargin: Theme.spacingM
+                iconName: "close"
+                iconSize: Theme.iconSize - 4
+                iconColor: Theme.surfaceText
+                onClicked: revert
+            }
+        }
+    }
+
+    function confirm() {
+        displaysTab.confirmChanges()
+        close()
+    }
+
+    function revert() {
+        displaysTab.revertChanges()
+        close()
+    }
+}

Modals/FileBrowser/FileBrowserGridDelegate.qml

@@ -0,0 +1,204 @@
+import QtQuick
+import QtQuick.Effects
+import qs.Common
+import qs.Widgets
+
+StyledRect {
+    id: delegateRoot
+
+    required property bool fileIsDir
+    required property string filePath
+    required property string fileName
+    required property int index
+
+    property bool weMode: false
+    property var iconSizes: [80, 120, 160, 200]
+    property int iconSizeIndex: 1
+    property int selectedIndex: -1
+    property bool keyboardNavigationActive: false
+
+    signal itemClicked(int index, string path, string name, bool isDir)
+    signal itemSelected(int index, string path, string name, bool isDir)
+
+    function getFileExtension(fileName) {
+        const parts = fileName.split('.')
+        if (parts.length > 1) {
+            return parts[parts.length - 1].toLowerCase()
+        }
+        return ""
+    }
+
+    function determineFileType(fileName) {
+        const ext = getFileExtension(fileName)
+
+        const imageExts = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg", "ico"]
+        if (imageExts.includes(ext)) {
+            return "image"
+        }
+
+        const videoExts = ["mp4", "mkv", "avi", "mov", "webm", "flv", "wmv", "m4v"]
+        if (videoExts.includes(ext)) {
+            return "video"
+        }
+
+        const audioExts = ["mp3", "wav", "flac", "ogg", "m4a", "aac", "wma"]
+        if (audioExts.includes(ext)) {
+            return "audio"
+        }
+
+        const codeExts = ["js", "ts", "jsx", "tsx", "py", "go", "rs", "c", "cpp", "h", "java", "kt", "swift", "rb", "php", "html", "css", "scss", "json", "xml", "yaml", "yml", "toml", "sh", "bash", "zsh", "fish", "qml", "vue", "svelte"]
+        if (codeExts.includes(ext)) {
+            return "code"
+        }
+
+        const docExts = ["txt", "md", "pdf", "doc", "docx", "odt", "rtf"]
+        if (docExts.includes(ext)) {
+            return "document"
+        }
+
+        const archiveExts = ["zip", "tar", "gz", "bz2", "xz", "7z", "rar"]
+        if (archiveExts.includes(ext)) {
+            return "archive"
+        }
+
+        if (!ext || fileName.indexOf('.') === -1) {
+            return "binary"
+        }
+
+        return "file"
+    }
+
+    function isImageFile(fileName) {
+        if (!fileName) {
+            return false
+        }
+        return determineFileType(fileName) === "image"
+    }
+
+    function getIconForFile(fileName) {
+        const lowerName = fileName.toLowerCase()
+        if (lowerName.startsWith("dockerfile")) {
+            return "docker"
+        }
+        const ext = fileName.split('.').pop()
+        return ext || ""
+    }
+
+    width: weMode ? 245 : iconSizes[iconSizeIndex] + 16
+    height: weMode ? 205 : iconSizes[iconSizeIndex] + 48
+    radius: Theme.cornerRadius
+    color: {
+        if (keyboardNavigationActive && delegateRoot.index === selectedIndex)
+            return Theme.surfacePressed
+
+        return mouseArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : "transparent"
+    }
+    border.color: keyboardNavigationActive && delegateRoot.index === selectedIndex ? Theme.primary : "transparent"
+    border.width: (keyboardNavigationActive && delegateRoot.index === selectedIndex) ? 2 : 0
+
+    Component.onCompleted: {
+        if (keyboardNavigationActive && delegateRoot.index === selectedIndex)
+            itemSelected(delegateRoot.index, delegateRoot.filePath, delegateRoot.fileName, delegateRoot.fileIsDir)
+    }
+
+    onSelectedIndexChanged: {
+        if (keyboardNavigationActive && selectedIndex === delegateRoot.index)
+            itemSelected(delegateRoot.index, delegateRoot.filePath, delegateRoot.fileName, delegateRoot.fileIsDir)
+    }
+
+    Column {
+        anchors.centerIn: parent
+        spacing: Theme.spacingS
+
+        Item {
+            width: weMode ? 225 : (iconSizes[iconSizeIndex] - 8)
+            height: weMode ? 165 : (iconSizes[iconSizeIndex] - 8)
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            CachingImage {
+                id: gridPreviewImage
+                anchors.fill: parent
+                anchors.margins: 2
+                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
+                maxCacheSize: weMode ? 225 : iconSizes[iconSizeIndex]
+                visible: false
+            }
+
+            MultiEffect {
+                anchors.fill: parent
+                anchors.margins: 2
+                source: gridPreviewImage
+                maskEnabled: true
+                maskSource: gridImageMask
+                visible: gridPreviewImage.status === Image.Ready && ((!delegateRoot.fileIsDir && isImageFile(delegateRoot.fileName)) || (weMode && delegateRoot.fileIsDir))
+                maskThresholdMin: 0.5
+                maskSpreadAtMin: 1
+            }
+
+            Item {
+                id: gridImageMask
+                anchors.fill: parent
+                anchors.margins: 2
+                layer.enabled: true
+                layer.smooth: true
+                visible: false
+
+                Rectangle {
+                    anchors.fill: parent
+                    radius: Theme.cornerRadius
+                    color: "black"
+                    antialiasing: true
+                }
+            }
+
+            DankNFIcon {
+                anchors.centerIn: parent
+                name: delegateRoot.fileIsDir ? "folder" : getIconForFile(delegateRoot.fileName)
+                size: iconSizes[iconSizeIndex] * 0.45
+                color: delegateRoot.fileIsDir ? Theme.primary : Theme.surfaceText
+                visible: (!delegateRoot.fileIsDir && !isImageFile(delegateRoot.fileName)) || (delegateRoot.fileIsDir && !weMode)
+            }
+        }
+
+        StyledText {
+            text: delegateRoot.fileName || ""
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceText
+            width: delegateRoot.width - Theme.spacingM
+            elide: Text.ElideRight
+            horizontalAlignment: Text.AlignHCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+            maximumLineCount: 2
+            wrapMode: Text.Wrap
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+            itemClicked(delegateRoot.index, delegateRoot.filePath, delegateRoot.fileName, delegateRoot.fileIsDir)
+        }
+    }
+}

Modals/FileBrowser/FileBrowserListDelegate.qml

@@ -0,0 +1,209 @@
+import QtQuick
+import QtQuick.Effects
+import qs.Common
+import qs.Widgets
+
+StyledRect {
+    id: listDelegateRoot
+
+    required property bool fileIsDir
+    required property string filePath
+    required property string fileName
+    required property int index
+    required property var fileModified
+    required property int fileSize
+
+    property int selectedIndex: -1
+    property bool keyboardNavigationActive: false
+
+    signal itemClicked(int index, string path, string name, bool isDir)
+    signal itemSelected(int index, string path, string name, bool isDir)
+
+    function getFileExtension(fileName) {
+        const parts = fileName.split('.')
+        if (parts.length > 1) {
+            return parts[parts.length - 1].toLowerCase()
+        }
+        return ""
+    }
+
+    function determineFileType(fileName) {
+        const ext = getFileExtension(fileName)
+
+        const imageExts = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg", "ico"]
+        if (imageExts.includes(ext)) {
+            return "image"
+        }
+
+        const videoExts = ["mp4", "mkv", "avi", "mov", "webm", "flv", "wmv", "m4v"]
+        if (videoExts.includes(ext)) {
+            return "video"
+        }
+
+        const audioExts = ["mp3", "wav", "flac", "ogg", "m4a", "aac", "wma"]
+        if (audioExts.includes(ext)) {
+            return "audio"
+        }
+
+        const codeExts = ["js", "ts", "jsx", "tsx", "py", "go", "rs", "c", "cpp", "h", "java", "kt", "swift", "rb", "php", "html", "css", "scss", "json", "xml", "yaml", "yml", "toml", "sh", "bash", "zsh", "fish", "qml", "vue", "svelte"]
+        if (codeExts.includes(ext)) {
+            return "code"
+        }
+
+        const docExts = ["txt", "md", "pdf", "doc", "docx", "odt", "rtf"]
+        if (docExts.includes(ext)) {
+            return "document"
+        }
+
+        const archiveExts = ["zip", "tar", "gz", "bz2", "xz", "7z", "rar"]
+        if (archiveExts.includes(ext)) {
+            return "archive"
+        }
+
+        if (!ext || fileName.indexOf('.') === -1) {
+            return "binary"
+        }
+
+        return "file"
+    }
+
+    function isImageFile(fileName) {
+        if (!fileName) {
+            return false
+        }
+        return determineFileType(fileName) === "image"
+    }
+
+    function getIconForFile(fileName) {
+        const lowerName = fileName.toLowerCase()
+        if (lowerName.startsWith("dockerfile")) {
+            return "docker"
+        }
+        const ext = fileName.split('.').pop()
+        return ext || ""
+    }
+
+    function formatFileSize(size) {
+        if (size < 1024)
+            return size + " B"
+        if (size < 1024 * 1024)
+            return (size / 1024).toFixed(1) + " KB"
+        if (size < 1024 * 1024 * 1024)
+            return (size / (1024 * 1024)).toFixed(1) + " MB"
+        return (size / (1024 * 1024 * 1024)).toFixed(1) + " GB"
+    }
+
+    height: 44
+    radius: Theme.cornerRadius
+    color: {
+        if (keyboardNavigationActive && listDelegateRoot.index === selectedIndex)
+            return Theme.surfacePressed
+        return listMouseArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : "transparent"
+    }
+    border.color: keyboardNavigationActive && listDelegateRoot.index === selectedIndex ? Theme.primary : "transparent"
+    border.width: (keyboardNavigationActive && listDelegateRoot.index === selectedIndex) ? 2 : 0
+
+    Component.onCompleted: {
+        if (keyboardNavigationActive && listDelegateRoot.index === selectedIndex)
+            itemSelected(listDelegateRoot.index, listDelegateRoot.filePath, listDelegateRoot.fileName, listDelegateRoot.fileIsDir)
+    }
+
+    onSelectedIndexChanged: {
+        if (keyboardNavigationActive && selectedIndex === listDelegateRoot.index)
+            itemSelected(listDelegateRoot.index, listDelegateRoot.filePath, listDelegateRoot.fileName, listDelegateRoot.fileIsDir)
+    }
+
+    Row {
+        anchors.fill: parent
+        anchors.leftMargin: Theme.spacingS
+        anchors.rightMargin: Theme.spacingS
+        spacing: Theme.spacingS
+
+        Item {
+            width: 28
+            height: 28
+            anchors.verticalCenter: parent.verticalCenter
+
+            CachingImage {
+                id: listPreviewImage
+                anchors.fill: parent
+                source: (!listDelegateRoot.fileIsDir && isImageFile(listDelegateRoot.fileName)) ? ("file://" + listDelegateRoot.filePath) : ""
+                fillMode: Image.PreserveAspectCrop
+                maxCacheSize: 32
+                visible: false
+            }
+
+            MultiEffect {
+                anchors.fill: parent
+                source: listPreviewImage
+                maskEnabled: true
+                maskSource: listImageMask
+                visible: listPreviewImage.status === Image.Ready && !listDelegateRoot.fileIsDir && isImageFile(listDelegateRoot.fileName)
+                maskThresholdMin: 0.5
+                maskSpreadAtMin: 1
+            }
+
+            Item {
+                id: listImageMask
+                anchors.fill: parent
+                layer.enabled: true
+                layer.smooth: true
+                visible: false
+
+                Rectangle {
+                    anchors.fill: parent
+                    radius: Theme.cornerRadius
+                    color: "black"
+                    antialiasing: true
+                }
+            }
+
+            DankNFIcon {
+                anchors.centerIn: parent
+                name: listDelegateRoot.fileIsDir ? "folder" : getIconForFile(listDelegateRoot.fileName)
+                size: Theme.iconSize - 2
+                color: listDelegateRoot.fileIsDir ? Theme.primary : Theme.surfaceText
+                visible: listDelegateRoot.fileIsDir || !isImageFile(listDelegateRoot.fileName)
+            }
+        }
+
+        StyledText {
+            text: listDelegateRoot.fileName || ""
+            font.pixelSize: Theme.fontSizeMedium
+            color: Theme.surfaceText
+            width: parent.width - 280
+            elide: Text.ElideRight
+            anchors.verticalCenter: parent.verticalCenter
+            maximumLineCount: 1
+            clip: true
+        }
+
+        StyledText {
+            text: listDelegateRoot.fileIsDir ? "" : formatFileSize(listDelegateRoot.fileSize)
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceTextMedium
+            width: 70
+            horizontalAlignment: Text.AlignRight
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        StyledText {
+            text: Qt.formatDateTime(listDelegateRoot.fileModified, "MMM d, yyyy h:mm AP")
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceTextMedium
+            width: 140
+            horizontalAlignment: Text.AlignRight
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+
+    MouseArea {
+        id: listMouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+            itemClicked(listDelegateRoot.index, listDelegateRoot.filePath, listDelegateRoot.fileName, listDelegateRoot.fileIsDir)
+        }
+    }
+}

Modals/FileBrowser/FileBrowserNavigation.qml

@@ -0,0 +1,130 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Row {
+    id: navigation
+
+    property string currentPath: ""
+    property string homeDir: ""
+    property bool backButtonFocused: false
+    property bool keyboardNavigationActive: false
+    property bool showSidebar: true
+    property bool pathEditMode: false
+    property bool pathInputHasFocus: false
+
+    signal navigateUp()
+    signal navigateTo(string path)
+    signal pathInputFocusChanged(bool hasFocus)
+
+    height: 40
+    leftPadding: Theme.spacingM
+    rightPadding: Theme.spacingM
+    spacing: Theme.spacingS
+
+    StyledRect {
+        width: 32
+        height: 32
+        radius: Theme.cornerRadius
+        color: (backButtonMouseArea.containsMouse || (backButtonFocused && keyboardNavigationActive)) && currentPath !== homeDir ? Theme.surfaceVariant : "transparent"
+        opacity: currentPath !== homeDir ? 1 : 0
+        anchors.verticalCenter: parent.verticalCenter
+
+        DankIcon {
+            anchors.centerIn: parent
+            name: "arrow_back"
+            size: Theme.iconSizeSmall
+            color: Theme.surfaceText
+        }
+
+        MouseArea {
+            id: backButtonMouseArea
+
+            anchors.fill: parent
+            hoverEnabled: currentPath !== homeDir
+            cursorShape: currentPath !== homeDir ? Qt.PointingHandCursor : Qt.ArrowCursor
+            enabled: currentPath !== homeDir
+            onClicked: navigation.navigateUp()
+        }
+    }
+
+    Item {
+        width: Math.max(0, (parent?.width ?? 0) - 40 - Theme.spacingS - (showSidebar ? 0 : 80))
+        height: 32
+        anchors.verticalCenter: parent.verticalCenter
+
+        StyledRect {
+            anchors.fill: parent
+            radius: Theme.cornerRadius
+            color: pathEditMode ? Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency) : "transparent"
+            border.color: pathEditMode ? Theme.primary : "transparent"
+            border.width: pathEditMode ? 1 : 0
+            visible: !pathEditMode
+
+            StyledText {
+                id: pathDisplay
+                text: currentPath.replace("file://", "")
+                font.pixelSize: Theme.fontSizeMedium
+                color: Theme.surfaceText
+                font.weight: Font.Medium
+                anchors.fill: parent
+                anchors.leftMargin: Theme.spacingS
+                anchors.rightMargin: Theme.spacingS
+                elide: Text.ElideMiddle
+                verticalAlignment: Text.AlignVCenter
+                maximumLineCount: 1
+                wrapMode: Text.NoWrap
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                cursorShape: Qt.IBeamCursor
+                onClicked: {
+                    pathEditMode = true
+                    pathInput.text = currentPath.replace("file://", "")
+                    Qt.callLater(() => pathInput.forceActiveFocus())
+                }
+            }
+        }
+
+        DankTextField {
+            id: pathInput
+            anchors.fill: parent
+            visible: pathEditMode
+            topPadding: Theme.spacingXS
+            bottomPadding: Theme.spacingXS
+            onAccepted: {
+                const newPath = text.trim()
+                if (newPath !== "") {
+                    navigation.navigateTo(newPath)
+                }
+                pathEditMode = false
+            }
+            Keys.onEscapePressed: {
+                pathEditMode = false
+            }
+            Keys.onDownPressed: {
+                pathEditMode = false
+            }
+            onActiveFocusChanged: {
+                navigation.pathInputFocusChanged(activeFocus)
+                if (!activeFocus && pathEditMode) {
+                    pathEditMode = false
+                }
+            }
+        }
+    }
+
+    Row {
+        spacing: Theme.spacingXS
+        visible: !showSidebar
+        anchors.verticalCenter: parent.verticalCenter
+
+        DankActionButton {
+            circular: false
+            iconName: "sort"
+            iconSize: Theme.iconSize - 6
+            iconColor: Theme.surfaceText
+        }
+    }
+}

Modals/FileBrowser/FileBrowserOverwriteDialog.qml

@@ -0,0 +1,127 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Item {
+    id: overwriteDialog
+
+    property bool showDialog: false
+    property string pendingFilePath: ""
+
+    signal confirmed(string filePath)
+    signal cancelled()
+
+    visible: showDialog
+    focus: showDialog
+
+    Keys.onEscapePressed: {
+        cancelled()
+    }
+
+    Keys.onReturnPressed: {
+        confirmed(pendingFilePath)
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: Theme.shadowStrong
+        opacity: 0.8
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                cancelled()
+            }
+        }
+    }
+
+    StyledRect {
+        anchors.centerIn: parent
+        width: 400
+        height: 160
+        color: Theme.surfaceContainer
+        radius: Theme.cornerRadius
+        border.color: Theme.outlineMedium
+        border.width: 1
+
+        Column {
+            anchors.centerIn: parent
+            width: parent.width - Theme.spacingL * 2
+            spacing: Theme.spacingM
+
+            StyledText {
+                text: I18n.tr("File Already Exists")
+                font.pixelSize: Theme.fontSizeLarge
+                font.weight: Font.Medium
+                color: Theme.surfaceText
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            StyledText {
+                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
+                wrapMode: Text.WordWrap
+                horizontalAlignment: Text.AlignHCenter
+            }
+
+            Row {
+                anchors.horizontalCenter: parent.horizontalCenter
+                spacing: Theme.spacingM
+
+                StyledRect {
+                    width: 80
+                    height: 36
+                    radius: Theme.cornerRadius
+                    color: cancelArea.containsMouse ? Theme.surfaceVariantHover : Theme.surfaceVariant
+                    border.color: Theme.outline
+                    border.width: 1
+
+                    StyledText {
+                        anchors.centerIn: parent
+                        text: I18n.tr("Cancel")
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                    }
+
+                    MouseArea {
+                        id: cancelArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            cancelled()
+                        }
+                    }
+                }
+
+                StyledRect {
+                    width: 90
+                    height: 36
+                    radius: Theme.cornerRadius
+                    color: overwriteArea.containsMouse ? Qt.darker(Theme.primary, 1.1) : Theme.primary
+
+                    StyledText {
+                        anchors.centerIn: parent
+                        text: I18n.tr("Overwrite")
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: Theme.background
+                        font.weight: Font.Medium
+                    }
+
+                    MouseArea {
+                        id: overwriteArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            confirmed(pendingFilePath)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

Modals/FileBrowser/FileBrowserSaveRow.qml

@@ -0,0 +1,74 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Row {
+    id: saveRow
+
+    property bool saveMode: false
+    property string defaultFileName: ""
+    property string currentPath: ""
+
+    signal saveRequested(string filePath)
+
+    height: saveMode ? 40 : 0
+    visible: saveMode
+    spacing: Theme.spacingM
+
+    DankTextField {
+        id: fileNameInput
+
+        width: parent.width - saveButton.width - Theme.spacingM
+        height: 40
+        text: defaultFileName
+        placeholderText: I18n.tr("Enter filename...")
+        ignoreLeftRightKeys: false
+        focus: saveMode
+        topPadding: Theme.spacingS
+        bottomPadding: Theme.spacingS
+        Component.onCompleted: {
+            if (saveMode)
+                Qt.callLater(() => {
+                                 forceActiveFocus()
+                             })
+        }
+        onAccepted: {
+            if (text.trim() !== "") {
+                var basePath = currentPath.replace(/^file:\/\//, '')
+                var fullPath = basePath + "/" + text.trim()
+                fullPath = fullPath.replace(/\/+/g, '/')
+                saveRequested(fullPath)
+            }
+        }
+    }
+
+    StyledRect {
+        id: saveButton
+
+        width: 80
+        height: 40
+        color: fileNameInput.text.trim() !== "" ? Theme.primary : Theme.surfaceVariant
+        radius: Theme.cornerRadius
+
+        StyledText {
+            anchors.centerIn: parent
+            text: I18n.tr("Save")
+            color: fileNameInput.text.trim() !== "" ? Theme.primaryText : Theme.surfaceVariantText
+            font.pixelSize: Theme.fontSizeMedium
+        }
+
+        StateLayer {
+            stateColor: Theme.primary
+            cornerRadius: Theme.cornerRadius
+            enabled: fileNameInput.text.trim() !== ""
+            onClicked: {
+                if (fileNameInput.text.trim() !== "") {
+                    var basePath = currentPath.replace(/^file:\/\//, '')
+                    var fullPath = basePath + "/" + fileNameInput.text.trim()
+                    fullPath = fullPath.replace(/\/+/g, '/')
+                    saveRequested(fullPath)
+                }
+            }
+        }
+    }
+}

Modals/FileBrowser/FileBrowserSidebar.qml

@@ -0,0 +1,70 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+StyledRect {
+    id: sidebar
+
+    property var quickAccessLocations: []
+    property string currentPath: ""
+    signal locationSelected(string path)
+
+    width: 200
+    color: Theme.surface
+    clip: true
+
+    Column {
+        anchors.fill: parent
+        anchors.margins: Theme.spacingS
+        spacing: 4
+
+        StyledText {
+            text: "Quick Access"
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceTextMedium
+            font.weight: Font.Medium
+            leftPadding: Theme.spacingS
+            bottomPadding: Theme.spacingXS
+        }
+
+        Repeater {
+            model: quickAccessLocations
+
+            StyledRect {
+                width: parent?.width ?? 0
+                height: 38
+                radius: Theme.cornerRadius
+                color: quickAccessMouseArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : (currentPath === modelData?.path ? Theme.surfacePressed : "transparent")
+
+                Row {
+                    anchors.fill: parent
+                    anchors.leftMargin: Theme.spacingM
+                    spacing: Theme.spacingS
+
+                    DankIcon {
+                        name: modelData?.icon ?? ""
+                        size: Theme.iconSize - 2
+                        color: currentPath === modelData?.path ? Theme.primary : Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    StyledText {
+                        text: modelData?.name ?? ""
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: currentPath === modelData?.path ? Theme.primary : Theme.surfaceText
+                        font.weight: currentPath === modelData?.path ? Font.Medium : Font.Normal
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+                }
+
+                MouseArea {
+                    id: quickAccessMouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: locationSelected(modelData?.path ?? "")
+                }
+            }
+        }
+    }
+}

Modals/FileBrowser/FileBrowserSortMenu.qml

@@ -0,0 +1,183 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+StyledRect {
+    id: sortMenu
+
+    property string sortBy: "name"
+    property bool sortAscending: true
+
+    signal sortBySelected(string value)
+    signal sortOrderSelected(bool ascending)
+
+    width: 200
+    height: sortColumn.height + Theme.spacingM * 2
+    color: Theme.surfaceContainer
+    radius: Theme.cornerRadius
+    border.color: Theme.outlineMedium
+    border.width: 1
+    visible: false
+    z: 100
+
+    Column {
+        id: sortColumn
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.margins: Theme.spacingM
+        spacing: Theme.spacingXS
+
+        StyledText {
+            text: "Sort By"
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceTextMedium
+            font.weight: Font.Medium
+        }
+
+        Repeater {
+            model: [{
+                    "name": "Name",
+                    "value": "name"
+                }, {
+                    "name": "Size",
+                    "value": "size"
+                }, {
+                    "name": "Modified",
+                    "value": "modified"
+                }, {
+                    "name": "Type",
+                    "value": "type"
+                }]
+
+            StyledRect {
+                width: sortColumn?.width ?? 0
+                height: 32
+                radius: Theme.cornerRadius
+                color: sortMouseArea.containsMouse ? Theme.surfaceVariant : (sortBy === modelData?.value ? Theme.surfacePressed : "transparent")
+
+                Row {
+                    anchors.fill: parent
+                    anchors.leftMargin: Theme.spacingS
+                    spacing: Theme.spacingS
+
+                    DankIcon {
+                        name: sortBy === modelData?.value ? "check" : ""
+                        size: Theme.iconSizeSmall
+                        color: Theme.primary
+                        anchors.verticalCenter: parent.verticalCenter
+                        visible: sortBy === modelData?.value
+                    }
+
+                    StyledText {
+                        text: modelData?.name ?? ""
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: sortBy === modelData?.value ? Theme.primary : Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+                }
+
+                MouseArea {
+                    id: sortMouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        sortMenu.sortBySelected(modelData?.value ?? "name")
+                        sortMenu.visible = false
+                    }
+                }
+            }
+        }
+
+        StyledRect {
+            width: sortColumn.width
+            height: 1
+            color: Theme.outline
+        }
+
+        StyledText {
+            text: "Order"
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceTextMedium
+            font.weight: Font.Medium
+            topPadding: Theme.spacingXS
+        }
+
+        StyledRect {
+            width: sortColumn?.width ?? 0
+            height: 32
+            radius: Theme.cornerRadius
+            color: ascMouseArea.containsMouse ? Theme.surfaceVariant : (sortAscending ? Theme.surfacePressed : "transparent")
+
+            Row {
+                anchors.fill: parent
+                anchors.leftMargin: Theme.spacingS
+                spacing: Theme.spacingS
+
+                DankIcon {
+                    name: "arrow_upward"
+                    size: Theme.iconSizeSmall
+                    color: sortAscending ? Theme.primary : Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StyledText {
+                    text: "Ascending"
+                    font.pixelSize: Theme.fontSizeMedium
+                    color: sortAscending ? Theme.primary : Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
+
+            MouseArea {
+                id: ascMouseArea
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    sortMenu.sortOrderSelected(true)
+                    sortMenu.visible = false
+                }
+            }
+        }
+
+        StyledRect {
+            width: sortColumn?.width ?? 0
+            height: 32
+            radius: Theme.cornerRadius
+            color: descMouseArea.containsMouse ? Theme.surfaceVariant : (!sortAscending ? Theme.surfacePressed : "transparent")
+
+            Row {
+                anchors.fill: parent
+                anchors.leftMargin: Theme.spacingS
+                spacing: Theme.spacingS
+
+                DankIcon {
+                    name: "arrow_downward"
+                    size: Theme.iconSizeSmall
+                    color: !sortAscending ? Theme.primary : Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StyledText {
+                    text: "Descending"
+                    font.pixelSize: Theme.fontSizeMedium
+                    color: !sortAscending ? Theme.primary : Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
+
+            MouseArea {
+                id: descMouseArea
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    sortMenu.sortOrderSelected(false)
+                    sortMenu.visible = false
+                }
+            }
+        }
+    }
+}

Modals/HyprKeybindsModal.qml

@@ -1,266 +0,0 @@
-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/KeybindsModal.qml

@@ -0,0 +1,232 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import qs.Common
+import qs.Modals.Common
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: root
+
+    layerNamespace: "dms:keybinds"
+    property real scrollStep: 60
+    property var activeFlickable: null
+    property real _maxW: Math.min(Screen.width * 0.92, 1200)
+    property real _maxH: Math.min(Screen.height * 0.92, 900)
+    width: _maxW
+    height: _maxH
+    onBackgroundClicked: close()
+
+    function scrollDown() {
+        if (!root.activeFlickable) return
+        let newY = root.activeFlickable.contentY + scrollStep
+        newY = Math.min(newY, root.activeFlickable.contentHeight - root.activeFlickable.height)
+        root.activeFlickable.contentY = newY
+    }
+
+    function scrollUp() {
+        if (!root.activeFlickable) return
+        let newY = root.activeFlickable.contentY - root.scrollStep
+        newY = Math.max(0, newY)
+        root.activeFlickable.contentY = newY
+    }
+
+    Shortcut { sequence: "Ctrl+j"; onActivated: root.scrollDown() }
+    Shortcut { sequence: "Down";   onActivated: root.scrollDown() }
+    Shortcut { sequence: "Ctrl+k"; onActivated: root.scrollUp() }
+    Shortcut { sequence: "Up";     onActivated: root.scrollUp() }
+    Shortcut { sequence: "Esc"; onActivated: root.close() }
+
+    content: Component {
+        Item {
+            anchors.fill: parent
+
+            Column {
+                anchors.fill: parent
+                anchors.margins: Theme.spacingL
+                spacing: Theme.spacingL
+
+                StyledText {
+                    text: KeybindsService.keybinds.title || "Keybinds"
+                    font.pixelSize: Theme.fontSizeLarge
+                    font.weight: Font.Bold
+                    color: Theme.primary
+                }
+
+                DankFlickable {
+                    id: mainFlickable
+                    width: parent.width
+                    height: parent.height - parent.spacing - 40
+                    contentWidth: rowLayout.implicitWidth
+                    contentHeight: rowLayout.implicitHeight
+                    clip: true
+
+                    Component.onCompleted: root.activeFlickable = mainFlickable
+
+                    property var rawBinds: KeybindsService.keybinds.binds || {}
+                    property var categories: {
+                        const processed = {}
+                        for (const cat in rawBinds) {
+                            const binds = rawBinds[cat]
+                            const subcats = {}
+                            let hasSubcats = false
+
+                            for (let i = 0; i < binds.length; i++) {
+                                const bind = binds[i]
+                                if (bind.subcat) {
+                                    hasSubcats = true
+                                    if (!subcats[bind.subcat]) {
+                                        subcats[bind.subcat] = []
+                                    }
+                                    subcats[bind.subcat].push(bind)
+                                } else {
+                                    if (!subcats["_root"]) {
+                                        subcats["_root"] = []
+                                    }
+                                    subcats["_root"].push(bind)
+                                }
+                            }
+
+                            processed[cat] = {
+                                hasSubcats: hasSubcats,
+                                subcats: subcats,
+                                subcatKeys: Object.keys(subcats)
+                            }
+                        }
+                        return processed
+                    }
+                    property var categoryKeys: Object.keys(categories)
+
+                    function distributeCategories(cols) {
+                        const columns = []
+                        for (let i = 0; i < cols; i++) {
+                            columns.push([])
+                        }
+                        for (let i = 0; i < categoryKeys.length; i++) {
+                            columns[i % cols].push(categoryKeys[i])
+                        }
+                        return columns
+                    }
+
+                    Row {
+                        id: rowLayout
+                        width: mainFlickable.width
+                        spacing: Theme.spacingM
+
+                        property int numColumns: Math.max(1, Math.min(3, Math.floor(width / 350)))
+                        property var columnCategories: mainFlickable.distributeCategories(numColumns)
+
+                        Repeater {
+                            model: rowLayout.numColumns
+
+                            Column {
+                                id: masonryColumn
+                                width: (rowLayout.width - rowLayout.spacing * (rowLayout.numColumns - 1)) / rowLayout.numColumns
+                                spacing: Theme.spacingM
+
+                                Repeater {
+                                    model: rowLayout.columnCategories[index] || []
+
+                                    Column {
+                                        id: categoryColumn
+                                        width: parent.width
+                                        spacing: Theme.spacingXS
+
+                                        property string catName: modelData
+                                        property var catData: mainFlickable.categories[catName]
+
+                                StyledText {
+                                    text: categoryColumn.catName
+                                    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.spacingM
+
+                                    Repeater {
+                                        model: categoryColumn.catData?.subcatKeys || []
+
+                                        Column {
+                                            width: parent.width
+                                            spacing: Theme.spacingXS
+
+                                            property string subcatName: modelData
+                                            property var subcatBinds: categoryColumn.catData?.subcats?.[subcatName] || []
+
+                                            StyledText {
+                                                visible: parent.subcatName !== "_root"
+                                                text: parent.subcatName
+                                                font.pixelSize: Theme.fontSizeSmall
+                                                font.weight: Font.DemiBold
+                                                color: Theme.primary
+                                                opacity: 0.7
+                                            }
+
+                                            Column {
+                                                width: parent.width
+                                                spacing: Theme.spacingXS
+
+                                                Repeater {
+                                                    model: parent.parent.subcatBinds
+
+                                                    Row {
+                                                        width: parent.width
+                                                        spacing: Theme.spacingS
+
+                                                        StyledRect {
+                                                            width: Math.min(140, parent.width * 0.42)
+                                                            height: 22
+                                                            radius: 4
+                                                            opacity: 0.9
+
+                                                            StyledText {
+                                                                anchors.centerIn: parent
+                                                                anchors.margins: 2
+                                                                width: parent.width - 4
+                                                                color: Theme.secondary
+                                                                text: modelData.key || ""
+                                                                font.pixelSize: Theme.fontSizeSmall
+                                                                font.weight: Font.Medium
+                                                                isMonospace: true
+                                                                elide: Text.ElideRight
+                                                                horizontalAlignment: Text.AlignHCenter
+                                                            }
+                                                        }
+
+                                                        StyledText {
+                                                            width: parent.width - 150
+                                                            text: modelData.desc || ""
+                                                            font.pixelSize: Theme.fontSizeSmall
+                                                            opacity: 0.9
+                                                            elide: Text.ElideRight
+                                                            anchors.verticalCenter: parent.verticalCenter
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

Modals/NetworkInfoModal.qml

@@ -8,6 +8,8 @@ import qs.Widgets
 DankModal {
     id: root
 
+    layerNamespace: "dms:network-info"
+
     property bool networkInfoModalVisible: false
     property string networkSSID: ""
     property var networkData: null

Modals/NetworkWiredInfoModal.qml

@@ -8,6 +8,8 @@ import qs.Widgets
 DankModal {
     id: root
 
+    layerNamespace: "dms:network-info-wired"
+
     property bool networkWiredInfoModalVisible: false
     property string networkID: ""
     property var networkData: null

Modals/NotificationModal.qml

@@ -9,6 +9,8 @@ import qs.Widgets
 DankModal {
     id: notificationModal
 
+    layerNamespace: "dms:notification-center-modal"
+
     property bool notificationModalOpen: false
     property var notificationListRef: null
 

Modals/PolkitAuthModal.qml

@@ -0,0 +1,358 @@
+import QtQuick
+import qs.Common
+import qs.Modals.Common
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: root
+
+    layerNamespace: "dms:polkit"
+
+    property string passwordInput: ""
+    property var currentFlow: PolkitService.agent?.flow
+    property bool isLoading: false
+    property real minHeight: 240
+
+    function show() {
+        passwordInput = ""
+        isLoading = false
+        open()
+        Qt.callLater(() => {
+            if (contentLoader.item && contentLoader.item.passwordField) {
+                contentLoader.item.passwordField.forceActiveFocus()
+            }
+        })
+    }
+
+    shouldBeVisible: false
+    width: 420
+    height: Math.max(minHeight, contentLoader.item ? contentLoader.item.implicitHeight + Theme.spacingM * 2 : 240)
+
+    Connections {
+        target: contentLoader.item
+        function onImplicitHeightChanged() {
+            if (shouldBeVisible && contentLoader.item) {
+                const newHeight = contentLoader.item.implicitHeight + Theme.spacingM * 2
+                if (newHeight > minHeight) {
+                    minHeight = newHeight
+                }
+            }
+        }
+    }
+
+    onOpened: {
+        Qt.callLater(() => {
+            if (contentLoader.item && contentLoader.item.passwordField) {
+                contentLoader.item.passwordField.forceActiveFocus()
+            }
+        })
+    }
+
+    onClosed: {
+        passwordInput = ""
+        isLoading = false
+    }
+
+    onBackgroundClicked: () => {
+        if (currentFlow && !isLoading) {
+            currentFlow.cancelAuthenticationRequest()
+        }
+    }
+
+    Connections {
+        target: PolkitService.agent
+        enabled: PolkitService.polkitAvailable
+
+        function onAuthenticationRequestStarted() {
+            show()
+        }
+
+        function onIsActiveChanged() {
+            if (!(PolkitService.agent?.isActive ?? false)) {
+                close()
+            }
+        }
+    }
+
+    Connections {
+        target: currentFlow
+        enabled: currentFlow !== null
+
+        function onIsResponseRequiredChanged() {
+            if (currentFlow.isResponseRequired) {
+                isLoading = false
+                passwordInput = ""
+                if (contentLoader.item && contentLoader.item.passwordField) {
+                    contentLoader.item.passwordField.forceActiveFocus()
+                }
+            }
+        }
+
+        function onAuthenticationSucceeded() {
+            close()
+        }
+
+        function onAuthenticationFailed() {
+            isLoading = false
+        }
+
+        function onAuthenticationRequestCancelled() {
+            close()
+        }
+    }
+
+    content: Component {
+        FocusScope {
+            id: authContent
+
+            property alias passwordField: passwordField
+
+            anchors.fill: parent
+            focus: true
+            implicitHeight: headerRow.implicitHeight + mainColumn.implicitHeight + Theme.spacingM
+
+            Keys.onEscapePressed: event => {
+                if (currentFlow && !isLoading) {
+                    currentFlow.cancelAuthenticationRequest()
+                }
+                event.accepted = true
+            }
+
+            Row {
+                id: headerRow
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
+                anchors.leftMargin: Theme.spacingM
+                anchors.rightMargin: Theme.spacingM
+                anchors.topMargin: Theme.spacingM
+
+                Column {
+                    width: parent.width - 40
+                    spacing: Theme.spacingXS
+
+                    StyledText {
+                        text: I18n.tr("Authentication Required")
+                        font.pixelSize: Theme.fontSizeLarge
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                    }
+
+                    Column {
+                        width: parent.width
+                        spacing: Theme.spacingXS
+
+                        StyledText {
+                            text: currentFlow?.message ?? ""
+                            font.pixelSize: Theme.fontSizeMedium
+                            color: Theme.surfaceTextMedium
+                            width: parent.width
+                            wrapMode: Text.Wrap
+                        }
+
+                        StyledText {
+                            visible: (currentFlow?.supplementaryMessage ?? "") !== ""
+                            text: currentFlow?.supplementaryMessage ?? ""
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: (currentFlow?.supplementaryIsError ?? false) ? Theme.error : Theme.surfaceTextMedium
+                            width: parent.width
+                            wrapMode: Text.Wrap
+                            opacity: (currentFlow?.supplementaryIsError ?? false) ? 1 : 0.8
+                        }
+                    }
+                }
+
+                DankActionButton {
+                    iconName: "close"
+                    iconSize: Theme.iconSize - 4
+                    iconColor: Theme.surfaceText
+                    enabled: !isLoading
+                    opacity: enabled ? 1 : 0.5
+                    onClicked: () => {
+                        if (currentFlow) {
+                            currentFlow.cancelAuthenticationRequest()
+                        }
+                    }
+                }
+            }
+
+            Column {
+                id: mainColumn
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                anchors.leftMargin: Theme.spacingM
+                anchors.rightMargin: Theme.spacingM
+                anchors.bottomMargin: Theme.spacingM
+                spacing: Theme.spacingM
+
+                StyledText {
+                    text: currentFlow?.inputPrompt ?? ""
+                    font.pixelSize: Theme.fontSizeMedium
+                    color: Theme.surfaceText
+                    width: parent.width
+                    visible: (currentFlow?.inputPrompt ?? "") !== ""
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceHover
+                    border.color: passwordField.activeFocus ? Theme.primary : Theme.outlineStrong
+                    border.width: passwordField.activeFocus ? 2 : 1
+                    opacity: isLoading ? 0.5 : 1
+
+                    MouseArea {
+                        anchors.fill: parent
+                        enabled: !isLoading
+                        onClicked: () => {
+                            passwordField.forceActiveFocus()
+                        }
+                    }
+
+                    DankTextField {
+                        id: passwordField
+
+                        anchors.fill: parent
+                        font.pixelSize: Theme.fontSizeMedium
+                        textColor: Theme.surfaceText
+                        text: passwordInput
+                        echoMode: (currentFlow?.responseVisible ?? false) ? TextInput.Normal : TextInput.Password
+                        placeholderText: ""
+                        backgroundColor: "transparent"
+                        enabled: !isLoading
+                        onTextEdited: () => {
+                            passwordInput = text
+                        }
+                        onAccepted: () => {
+                            if (passwordInput.length > 0 && currentFlow && !isLoading) {
+                                isLoading = true
+                                currentFlow.submit(passwordInput)
+                                passwordInput = ""
+                            }
+                        }
+                    }
+                }
+
+                Item {
+                    width: parent.width
+                    height: (currentFlow?.failed ?? false) ? failedText.implicitHeight : 0
+                    visible: height > 0
+
+                    StyledText {
+                        id: failedText
+                        text: I18n.tr("Authentication failed, please try again")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.error
+                        width: parent.width
+                        opacity: (currentFlow?.failed ?? false) ? 1 : 0
+
+                        Behavior on opacity {
+                            NumberAnimation {
+                                duration: Theme.shortDuration
+                                easing.type: Theme.standardEasing
+                            }
+                        }
+                    }
+
+                    Behavior on height {
+                        NumberAnimation {
+                            duration: Theme.shortDuration
+                            easing.type: Theme.standardEasing
+                        }
+                    }
+                }
+
+                Item {
+                    width: parent.width
+                    height: 40
+
+                    Row {
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingM
+
+                        Rectangle {
+                            width: Math.max(70, cancelText.contentWidth + Theme.spacingM * 2)
+                            height: 36
+                            radius: Theme.cornerRadius
+                            color: cancelArea.containsMouse ? Theme.surfaceTextHover : "transparent"
+                            border.color: Theme.surfaceVariantAlpha
+                            border.width: 1
+                            enabled: !isLoading
+                            opacity: enabled ? 1 : 0.5
+
+                            StyledText {
+                                id: cancelText
+
+                                anchors.centerIn: parent
+                                text: I18n.tr("Cancel")
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceText
+                                font.weight: Font.Medium
+                            }
+
+                            MouseArea {
+                                id: cancelArea
+
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                enabled: parent.enabled
+                                onClicked: () => {
+                                    if (currentFlow) {
+                                        currentFlow.cancelAuthenticationRequest()
+                                    }
+                                }
+                            }
+                        }
+
+                        Rectangle {
+                            width: Math.max(80, authText.contentWidth + Theme.spacingM * 2)
+                            height: 36
+                            radius: Theme.cornerRadius
+                            color: authArea.containsMouse ? Qt.darker(Theme.primary, 1.1) : Theme.primary
+                            enabled: !isLoading && (passwordInput.length > 0 || !(currentFlow?.isResponseRequired ?? true))
+                            opacity: enabled ? 1 : 0.5
+
+                            StyledText {
+                                id: authText
+
+                                anchors.centerIn: parent
+                                text: I18n.tr("Authenticate")
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.background
+                                font.weight: Font.Medium
+                            }
+
+                            MouseArea {
+                                id: authArea
+
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                enabled: parent.enabled
+                                onClicked: () => {
+                                    if (currentFlow && !isLoading) {
+                                        isLoading = true
+                                        currentFlow.submit(passwordInput)
+                                        passwordInput = ""
+                                    }
+                                }
+                            }
+
+                            Behavior on color {
+                                ColorAnimation {
+                                    duration: Theme.shortDuration
+                                    easing.type: Theme.standardEasing
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

Modals/PowerMenuModal.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import Quickshell
 import qs.Common
 import qs.Modals.Common
 import qs.Services
@@ -7,12 +8,19 @@ import qs.Widgets
 DankModal {
     id: root
 
-    property int selectedIndex: 0
-    property int optionCount: SessionService.hibernateSupported ? 5 : 4
+    layerNamespace: "dms:power-menu"
+
+    property int selectedRow: 0
+    property int selectedCol: 0
+    property int selectedIndex: selectedRow * gridColumns + selectedCol
     property rect parentBounds: Qt.rect(0, 0, 0, 0)
     property var parentScreen: null
+    property var visibleActions: []
+    property int gridColumns: 3
+    property int gridRows: 2
 
     signal powerActionRequested(string action, string title, string message)
+    signal lockRequested
 
     function openCentered() {
         parentBounds = Qt.rect(0, 0, 0, 0)
@@ -28,8 +36,114 @@ DankModal {
         open()
     }
 
+    function updateVisibleActions() {
+        const allActions = SettingsData.powerMenuActions || ["reboot", "logout", "poweroff", "lock", "suspend", "restart"]
+        visibleActions = allActions.filter(action => {
+                                               if (action === "hibernate" && !SessionService.hibernateSupported)
+                                               return false
+                                               return true
+                                           })
+
+        const count = visibleActions.length
+        switch (count) {
+        case 0:
+            gridColumns = 1
+            gridRows = 1
+            break
+        case 1:
+        case 2:
+        case 3:
+            gridColumns = 1
+            gridRows = count
+            break
+        case 4:
+            gridColumns = 2
+            gridRows = 2
+            break
+        default:
+            gridColumns = 3
+            gridRows = Math.ceil(count / 3)
+            break
+        }
+    }
+
+    function getDefaultActionIndex() {
+        const defaultAction = SettingsData.powerMenuDefaultAction || "logout"
+        const index = visibleActions.indexOf(defaultAction)
+        return index >= 0 ? index : 0
+    }
+
+    function getActionAtIndex(index) {
+        if (index < 0 || index >= visibleActions.length)
+            return ""
+        return visibleActions[index]
+    }
+
+    function getActionData(action) {
+        switch (action) {
+        case "reboot":
+            return {
+                "icon": "restart_alt",
+                "label": I18n.tr("Reboot"),
+                "key": "R"
+            }
+        case "logout":
+            return {
+                "icon": "logout",
+                "label": I18n.tr("Log Out"),
+                "key": "X"
+            }
+        case "poweroff":
+            return {
+                "icon": "power_settings_new",
+                "label": I18n.tr("Power Off"),
+                "key": "P"
+            }
+        case "lock":
+            return {
+                "icon": "lock",
+                "label": I18n.tr("Lock"),
+                "key": "L"
+            }
+        case "suspend":
+            return {
+                "icon": "bedtime",
+                "label": I18n.tr("Suspend"),
+                "key": "S"
+            }
+        case "hibernate":
+            return {
+                "icon": "ac_unit",
+                "label": I18n.tr("Hibernate"),
+                "key": "H"
+            }
+        case "restart":
+            return {
+                "icon": "refresh",
+                "label": I18n.tr("Restart DMS"),
+                "key": "D"
+            }
+        default:
+            return {
+                "icon": "help",
+                "label": action,
+                "key": "?"
+            }
+        }
+    }
+
     function selectOption(action) {
-        close();
+        if (action === "lock") {
+            close()
+            lockRequested()
+            return
+        }
+        if (action === "restart") {
+            close()
+            Quickshell.execDetached(["dms", "restart"])
+            return
+        }
+        close()
         const actions = {
             "logout": {
                 "title": I18n.tr("Log Out"),
@@ -54,13 +168,12 @@ DankModal {
         }
         const selected = actions[action]
         if (selected) {
-            root.powerActionRequested(action, selected.title, selected.message);
+            root.powerActionRequested(action, selected.title, selected.message)
         }
-
     }
 
     shouldBeVisible: false
-    width: 320
+    width: Math.min(550, gridColumns * 180 + Theme.spacingS * (gridColumns - 1) + Theme.spacingL * 2)
     height: contentLoader.item ? contentLoader.item.implicitHeight : 300
     enableShadow: true
     screen: parentScreen
@@ -73,382 +186,190 @@ DankModal {
         }
         return Qt.point(0, 0)
     }
-    onBackgroundClicked: () => {
-        return close();
-    }
+    onBackgroundClicked: () => close()
     onOpened: () => {
-        selectedIndex = 0;
-        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:
-        case Qt.Key_Tab:
-            selectedIndex = (selectedIndex + 1) % optionCount;
-            event.accepted = true;
-            break;
-        case Qt.Key_Return:
-        case Qt.Key_Enter:
-            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;
-        }
-    }
+                  updateVisibleActions()
+                  const defaultIndex = getDefaultActionIndex()
+                  selectedRow = Math.floor(defaultIndex / gridColumns)
+                  selectedCol = defaultIndex % gridColumns
+                  Qt.callLater(() => modalFocusScope.forceActiveFocus())
+              }
+    Component.onCompleted: updateVisibleActions()
+    modalFocusScope.Keys.onPressed: event => {
+                                        switch (event.key) {
+                                            case Qt.Key_Left:
+                                            selectedCol = (selectedCol - 1 + gridColumns) % gridColumns
+                                            event.accepted = true
+                                            break
+                                            case Qt.Key_Right:
+                                            selectedCol = (selectedCol + 1) % gridColumns
+                                            event.accepted = true
+                                            break
+                                            case Qt.Key_Up:
+                                            case Qt.Key_Backtab:
+                                            selectedRow = (selectedRow - 1 + gridRows) % gridRows
+                                            event.accepted = true
+                                            break
+                                            case Qt.Key_Down:
+                                            case Qt.Key_Tab:
+                                            selectedRow = (selectedRow + 1) % gridRows
+                                            event.accepted = true
+                                            break
+                                            case Qt.Key_Return:
+                                            case Qt.Key_Enter:
+                                            selectOption(getActionAtIndex(selectedIndex))
+                                            event.accepted = true
+                                            break
+                                            case Qt.Key_N:
+                                            if (event.modifiers & Qt.ControlModifier) {
+                                                selectedCol = (selectedCol + 1) % gridColumns
+                                                event.accepted = true
+                                            }
+                                            break
+                                            case Qt.Key_P:
+                                            if (!(event.modifiers & Qt.ControlModifier)) {
+                                                selectOption("poweroff")
+                                                event.accepted = true
+                                            } else {
+                                                selectedCol = (selectedCol - 1 + gridColumns) % gridColumns
+                                                event.accepted = true
+                                            }
+                                            break
+                                            case Qt.Key_J:
+                                            if (event.modifiers & Qt.ControlModifier) {
+                                                selectedRow = (selectedRow + 1) % gridRows
+                                                event.accepted = true
+                                            }
+                                            break
+                                            case Qt.Key_K:
+                                            if (event.modifiers & Qt.ControlModifier) {
+                                                selectedRow = (selectedRow - 1 + gridRows) % gridRows
+                                                event.accepted = true
+                                            }
+                                            break
+                                            case Qt.Key_R:
+                                            selectOption("reboot")
+                                            event.accepted = true
+                                            break
+                                            case Qt.Key_X:
+                                            selectOption("logout")
+                                            event.accepted = true
+                                            break
+                                            case Qt.Key_L:
+                                            selectOption("lock")
+                                            event.accepted = true
+                                            break
+                                            case Qt.Key_S:
+                                            selectOption("suspend")
+                                            event.accepted = true
+                                            break
+                                            case Qt.Key_H:
+                                            selectOption("hibernate")
+                                            event.accepted = true
+                                            break
+                                            case Qt.Key_D:
+                                            selectOption("restart")
+                                            event.accepted = true
+                                            break
+                                        }
+                                    }
 
     content: Component {
         Item {
             anchors.fill: parent
-            implicitHeight: mainColumn.implicitHeight + Theme.spacingL * 2
+            implicitHeight: buttonGrid.implicitHeight + Theme.spacingL * 2
 
-            Column {
-                id: mainColumn
-                anchors.fill: parent
-                anchors.margins: Theme.spacingL
-                spacing: Theme.spacingM
+            Grid {
+                id: buttonGrid
+                anchors.centerIn: parent
+                columns: root.gridColumns
+                columnSpacing: Theme.spacingS
+                rowSpacing: Theme.spacingS
 
-                Row {
-                    width: parent.width
+                Repeater {
+                    model: root.visibleActions
 
-                    StyledText {
-                        text: I18n.tr("Power Options")
-                        font.pixelSize: Theme.fontSizeLarge
-                        color: Theme.surfaceText
-                        font.weight: Font.Medium
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
+                    Rectangle {
+                        required property int index
+                        required property string modelData
 
-                    Item {
-                        width: parent.width - 150
-                        height: 1
-                    }
+                        readonly property var actionData: root.getActionData(modelData)
+                        readonly property bool isSelected: root.selectedIndex === index
+                        readonly property bool showWarning: modelData === "reboot" || modelData === "poweroff"
 
-                    DankActionButton {
-                        iconName: "close"
-                        iconSize: Theme.iconSize - 4
-                        iconColor: Theme.surfaceText
-                        onClicked: () => {
-                            return close();
+                        width: (root.width - Theme.spacingL * 2 - Theme.spacingS * (root.gridColumns - 1)) / root.gridColumns
+                        height: 100
+                        radius: Theme.cornerRadius
+                        color: {
+                            if (isSelected)
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
+                            if (mouseArea.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, 0.08)
+                        }
+                        border.color: isSelected ? Theme.primary : "transparent"
+                        border.width: isSelected ? 2 : 0
+
+                        Column {
+                            anchors.centerIn: parent
+                            spacing: Theme.spacingS
+
+                            DankIcon {
+                                name: parent.parent.actionData.icon
+                                size: Theme.iconSize + 8
+                                color: {
+                                    if (parent.parent.showWarning && mouseArea.containsMouse) {
+                                        return parent.parent.modelData === "poweroff" ? Theme.error : Theme.warning
+                                    }
+                                    return Theme.surfaceText
+                                }
+                                anchors.horizontalCenter: parent.horizontalCenter
+                            }
+
+                            StyledText {
+                                text: parent.parent.actionData.label
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: {
+                                    if (parent.parent.showWarning && mouseArea.containsMouse) {
+                                        return parent.parent.modelData === "poweroff" ? Theme.error : Theme.warning
+                                    }
+                                    return Theme.surfaceText
+                                }
+                                font.weight: Font.Medium
+                                anchors.horizontalCenter: parent.horizontalCenter
+                            }
+
+                            Rectangle {
+                                width: 20
+                                height: 16
+                                radius: 4
+                                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.1)
+                                anchors.horizontalCenter: parent.horizontalCenter
+
+                                StyledText {
+                                    text: parent.parent.parent.actionData.key
+                                    font.pixelSize: Theme.fontSizeSmall - 1
+                                    color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                                    font.weight: Font.Medium
+                                    anchors.centerIn: parent
+                                }
+                            }
+                        }
+
+                        MouseArea {
+                            id: mouseArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                root.selectedRow = Math.floor(index / root.gridColumns)
+                                root.selectedCol = index % root.gridColumns
+                                root.selectOption(modelData)
+                            }
                         }
                     }
-
                 }
-
-                Column {
-                    width: parent.width
-                    spacing: Theme.spacingS
-
-                    Rectangle {
-                        width: parent.width
-                        height: 50
-                        radius: Theme.cornerRadius
-                        color: {
-                            if (selectedIndex === 0) {
-                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
-                            } else if (logoutArea.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 === 0 ? Theme.primary : "transparent"
-                        border.width: selectedIndex === 0 ? 1 : 0
-
-                        Row {
-                            anchors.left: parent.left
-                            anchors.leftMargin: Theme.spacingM
-                            anchors.verticalCenter: parent.verticalCenter
-                            spacing: Theme.spacingM
-
-                            DankIcon {
-                                name: "logout"
-                                size: Theme.iconSize
-                                color: Theme.surfaceText
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                            StyledText {
-                                text: I18n.tr("Log Out")
-                                font.pixelSize: Theme.fontSizeMedium
-                                color: Theme.surfaceText
-                                font.weight: Font.Medium
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                        }
-
-                        MouseArea {
-                            id: logoutArea
-
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: () => {
-                                selectedIndex = 0;
-                                selectOption("logout");
-                            }
-                        }
-
-                    }
-
-                    Rectangle {
-                        width: parent.width
-                        height: 50
-                        radius: Theme.cornerRadius
-                        color: {
-                            if (selectedIndex === 1) {
-                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
-                            } else if (suspendArea.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 === 1 ? Theme.primary : "transparent"
-                        border.width: selectedIndex === 1 ? 1 : 0
-
-                        Row {
-                            anchors.left: parent.left
-                            anchors.leftMargin: Theme.spacingM
-                            anchors.verticalCenter: parent.verticalCenter
-                            spacing: Theme.spacingM
-
-                            DankIcon {
-                                name: "bedtime"
-                                size: Theme.iconSize
-                                color: Theme.surfaceText
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                            StyledText {
-                                text: I18n.tr("Suspend")
-                                font.pixelSize: Theme.fontSizeMedium
-                                color: Theme.surfaceText
-                                font.weight: Font.Medium
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                        }
-
-                        MouseArea {
-                            id: suspendArea
-
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: () => {
-                                selectedIndex = 1;
-                                selectOption("suspend");
-                            }
-                        }
-
-                    }
-
-                    Rectangle {
-                        width: parent.width
-                        height: 50
-                        radius: Theme.cornerRadius
-                        color: {
-                            if (selectedIndex === 2) {
-                                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.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
-                            anchors.leftMargin: Theme.spacingM
-                            anchors.verticalCenter: parent.verticalCenter
-                            spacing: Theme.spacingM
-
-                            DankIcon {
-                                name: "restart_alt"
-                                size: Theme.iconSize
-                                color: rebootArea.containsMouse ? Theme.warning : Theme.surfaceText
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                            StyledText {
-                                text: I18n.tr("Reboot")
-                                font.pixelSize: Theme.fontSizeMedium
-                                color: rebootArea.containsMouse ? Theme.warning : Theme.surfaceText
-                                font.weight: Font.Medium
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                        }
-
-                        MouseArea {
-                            id: rebootArea
-
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: () => {
-                                selectedIndex = SessionService.hibernateSupported ? 3 : 2;
-                                selectOption("reboot");
-                            }
-                        }
-
-                    }
-
-                    Rectangle {
-                        width: parent.width
-                        height: 50
-                        radius: Theme.cornerRadius
-                        color: {
-                            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.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 ? 4 : 3) ? Theme.primary : "transparent"
-                        border.width: selectedIndex === (SessionService.hibernateSupported ? 4 : 3) ? 1 : 0
-
-                        Row {
-                            anchors.left: parent.left
-                            anchors.leftMargin: Theme.spacingM
-                            anchors.verticalCenter: parent.verticalCenter
-                            spacing: Theme.spacingM
-
-                            DankIcon {
-                                name: "power_settings_new"
-                                size: Theme.iconSize
-                                color: powerOffArea.containsMouse ? Theme.error : Theme.surfaceText
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                            StyledText {
-                                text: I18n.tr("Power Off")
-                                font.pixelSize: Theme.fontSizeMedium
-                                color: powerOffArea.containsMouse ? Theme.error : Theme.surfaceText
-                                font.weight: Font.Medium
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                        }
-
-                        MouseArea {
-                            id: powerOffArea
-
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: () => {
-                                selectedIndex = SessionService.hibernateSupported ? 4 : 3;
-                                selectOption("poweroff");
-                            }
-                        }
-
-                    }
-
-                }
-
-                Item {
-                    height: Theme.spacingS
-                }
-
             }
-
         }
-
     }
-
 }

Modals/ProcessListModal.qml

@@ -9,6 +9,8 @@ import qs.Widgets
 DankModal {
     id: processListModal
 
+    layerNamespace: "dms:process-list-modal"
+
     property int currentTab: 0
     property var tabNames: ["Processes", "Performance", "System"]
 
@@ -44,7 +46,7 @@ DankModal {
     width: 900
     height: 680
     visible: false
-    backgroundColor: Theme.popupBackground()
+    backgroundColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
     cornerRadius: Theme.cornerRadius
     enableShadow: true
     onBackgroundClicked: () => {
@@ -181,7 +183,7 @@ DankModal {
                 Rectangle {
                     Layout.fillWidth: true
                     height: 52
-                    color: Theme.surfaceContainerHigh
+                    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
                     radius: Theme.cornerRadius
                     border.color: Theme.outlineLight
                     border.width: 1
@@ -281,7 +283,7 @@ DankModal {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
                     radius: Theme.cornerRadius
-                    color: Theme.surfaceContainerHigh
+                    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
                     border.color: Theme.outlineLight
                     border.width: 1
 

Modals/Settings/PowerSettings.qml

@@ -18,13 +18,6 @@ Item {
             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
@@ -64,7 +57,7 @@ Item {
                         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)
+                        onToggled: checked => SettingsData.set("lockScreenShowPowerActions", checked)
                     }
 
                     StyledText {
@@ -83,10 +76,10 @@ Item {
                         checked: SessionService.loginctlAvailable && SettingsData.loginctlLockIntegration
                         enabled: SessionService.loginctlAvailable
                         onToggled: checked => {
-                            if (SessionService.loginctlAvailable) {
-                                SettingsData.setLoginctlLockIntegration(checked)
-                            }
-                        }
+                                       if (SessionService.loginctlAvailable) {
+                                           SettingsData.set("loginctlLockIntegration", checked)
+                                       }
+                                   }
                     }
 
                     DankToggle {
@@ -95,7 +88,7 @@ Item {
                         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)
+                        onToggled: checked => SettingsData.set("lockBeforeSuspend", checked)
                     }
 
                     DankToggle {
@@ -104,7 +97,7 @@ Item {
                         description: I18n.tr("Use fingerprint reader for lock screen authentication (requires enrolled fingerprints)")
                         checked: SettingsData.enableFprint
                         visible: SettingsData.fprintdAvailable
-                        onToggled: checked => SettingsData.setEnableFprint(checked)
+                        onToggled: checked => SettingsData.set("enableFprint", checked)
                     }
                 }
             }
@@ -158,11 +151,21 @@ Item {
                         }
                     }
 
+                    DankToggle {
+                        width: parent.width
+                        text: I18n.tr("Prevent idle for media")
+                        description: I18n.tr("Inhibit idle timeout when audio or video is playing")
+                        checked: SettingsData.preventIdleForMedia
+                        visible: IdleService.idleMonitorAvailable
+                        onToggled: checked => SettingsData.set("preventIdleForMedia", checked)
+                    }
+
                     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]
 
+                        addHorizontalPadding: true
                         text: I18n.tr("Automatically lock after")
                         options: timeoutOptions
 
@@ -182,16 +185,16 @@ Item {
                         }
 
                         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)
-                                }
-                            }
-                        }
+                                            const index = timeoutOptions.indexOf(value)
+                                            if (index >= 0) {
+                                                const timeout = timeoutValues[index]
+                                                if (powerCategory.currentIndex === 0) {
+                                                    SettingsData.set("acLockTimeout", timeout)
+                                                } else {
+                                                    SettingsData.set("batteryLockTimeout", timeout)
+                                                }
+                                            }
+                                        }
                     }
 
                     DankDropdown {
@@ -199,6 +202,7 @@ Item {
                         property var timeoutOptions: ["Never", "1 minute", "2 minutes", "3 minutes", "5 minutes", "10 minutes", "15 minutes", "20 minutes", "30 minutes", "1 hour", "1 hour 30 minutes", "2 hours", "3 hours"]
                         property var timeoutValues: [0, 60, 120, 180, 300, 600, 900, 1200, 1800, 3600, 5400, 7200, 10800]
 
+                        addHorizontalPadding: true
                         text: I18n.tr("Turn off monitors after")
                         options: timeoutOptions
 
@@ -218,16 +222,16 @@ Item {
                         }
 
                         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)
-                                }
-                            }
-                        }
+                                            const index = timeoutOptions.indexOf(value)
+                                            if (index >= 0) {
+                                                const timeout = timeoutValues[index]
+                                                if (powerCategory.currentIndex === 0) {
+                                                    SettingsData.set("acMonitorTimeout", timeout)
+                                                } else {
+                                                    SettingsData.set("batteryMonitorTimeout", timeout)
+                                                }
+                                            }
+                                        }
                     }
 
                     DankDropdown {
@@ -235,6 +239,7 @@ Item {
                         property var timeoutOptions: ["Never", "1 minute", "2 minutes", "3 minutes", "5 minutes", "10 minutes", "15 minutes", "20 minutes", "30 minutes", "1 hour", "1 hour 30 minutes", "2 hours", "3 hours"]
                         property var timeoutValues: [0, 60, 120, 180, 300, 600, 900, 1200, 1800, 3600, 5400, 7200, 10800]
 
+                        addHorizontalPadding: true
                         text: I18n.tr("Suspend system after")
                         options: timeoutOptions
 
@@ -254,52 +259,59 @@ Item {
                         }
 
                         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)
-                                }
-                            }
-                        }
+                                            const index = timeoutOptions.indexOf(value)
+                                            if (index >= 0) {
+                                                const timeout = timeoutValues[index]
+                                                if (powerCategory.currentIndex === 0) {
+                                                    SettingsData.set("acSuspendTimeout", timeout)
+                                                } else {
+                                                    SettingsData.set("batterySuspendTimeout", 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
+                    Column {
+                        width: parent.width
+                        spacing: Theme.spacingS
                         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"
-                            }
+                        StyledText {
+                            text: I18n.tr("Suspend behavior")
+                            font.pixelSize: Theme.fontSizeMedium
+                            color: Theme.surfaceText
+                            leftPadding: Theme.spacingM
                         }
 
-                        Component.onCompleted: {
-                            const currentTimeout = powerCategory.currentIndex === 0 ? SettingsData.acHibernateTimeout : SettingsData.batteryHibernateTimeout
-                            const index = timeoutValues.indexOf(currentTimeout)
-                            currentValue = index >= 0 ? timeoutOptions[index] : "Never"
-                        }
+                        DankButtonGroup {
+                            id: suspendBehaviorSelector
+                            anchors.horizontalCenter: parent.horizontalCenter
+                            model: ["Suspend", "Hibernate", "Suspend then Hibernate"]
+                            selectionMode: "single"
+                            checkEnabled: false
 
-                        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)
+                            Connections {
+                                target: powerCategory
+                                function onCurrentIndexChanged() {
+                                    const behavior = powerCategory.currentIndex === 0 ? SettingsData.acSuspendBehavior : SettingsData.batterySuspendBehavior
+                                    suspendBehaviorSelector.currentIndex = behavior
                                 }
                             }
+
+                            Component.onCompleted: {
+                                const behavior = powerCategory.currentIndex === 0 ? SettingsData.acSuspendBehavior : SettingsData.batterySuspendBehavior
+                                currentIndex = behavior
+                            }
+
+                            onSelectionChanged: (index, selected) => {
+                                                    if (selected) {
+                                                        if (powerCategory.currentIndex === 0) {
+                                                            SettingsData.set("acSuspendBehavior", index)
+                                                        } else {
+                                                            SettingsData.set("batterySuspendBehavior", index)
+                                                        }
+                                                    }
+                                                }
                         }
                     }
 
@@ -313,6 +325,185 @@ Item {
                 }
             }
 
+            StyledRect {
+                width: parent.width
+                height: powerMenuCustomSection.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: powerMenuCustomSection
+                    anchors.fill: parent
+                    anchors.margins: Theme.spacingL
+                    spacing: Theme.spacingM
+
+                    Row {
+                        width: parent.width
+                        spacing: Theme.spacingM
+
+                        DankIcon {
+                            name: "tune"
+                            size: Theme.iconSize
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: I18n.tr("Power Menu Customization")
+                            font.pixelSize: Theme.fontSizeLarge
+                            font.weight: Font.Medium
+                            color: Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+
+                    StyledText {
+                        text: I18n.tr("Customize which actions appear in the power menu")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceVariantText
+                        width: parent.width
+                        wrapMode: Text.Wrap
+                    }
+
+                    DankDropdown {
+                        id: defaultActionDropdown
+                        width: parent.width
+                        addHorizontalPadding: true
+                        text: I18n.tr("Default selected action")
+                        options: ["Reboot", "Log Out", "Power Off", "Lock", "Suspend", "Restart DMS", "Hibernate"]
+                        property var actionValues: ["reboot", "logout", "poweroff", "lock", "suspend", "restart", "hibernate"]
+
+                        Component.onCompleted: {
+                            const currentAction = SettingsData.powerMenuDefaultAction || "logout"
+                            const index = actionValues.indexOf(currentAction)
+                            currentValue = index >= 0 ? options[index] : "Log Out"
+                        }
+
+                        onValueChanged: value => {
+                                            const index = options.indexOf(value)
+                                            if (index >= 0) {
+                                                SettingsData.set("powerMenuDefaultAction", actionValues[index])
+                                            }
+                                        }
+                    }
+
+                    Column {
+                        width: parent.width
+                        spacing: Theme.spacingS
+
+                        DankToggle {
+                            width: parent.width
+                            text: I18n.tr("Show Reboot")
+                            checked: SettingsData.powerMenuActions.includes("reboot")
+                            onToggled: checked => {
+                                           let actions = [...SettingsData.powerMenuActions]
+                                           if (checked && !actions.includes("reboot")) {
+                                               actions.push("reboot")
+                                           } else if (!checked) {
+                                               actions = actions.filter(a => a !== "reboot")
+                                           }
+                                           SettingsData.set("powerMenuActions", actions)
+                                       }
+                        }
+
+                        DankToggle {
+                            width: parent.width
+                            text: I18n.tr("Show Log Out")
+                            checked: SettingsData.powerMenuActions.includes("logout")
+                            onToggled: checked => {
+                                           let actions = [...SettingsData.powerMenuActions]
+                                           if (checked && !actions.includes("logout")) {
+                                               actions.push("logout")
+                                           } else if (!checked) {
+                                               actions = actions.filter(a => a !== "logout")
+                                           }
+                                           SettingsData.set("powerMenuActions", actions)
+                                       }
+                        }
+
+                        DankToggle {
+                            width: parent.width
+                            text: I18n.tr("Show Power Off")
+                            checked: SettingsData.powerMenuActions.includes("poweroff")
+                            onToggled: checked => {
+                                           let actions = [...SettingsData.powerMenuActions]
+                                           if (checked && !actions.includes("poweroff")) {
+                                               actions.push("poweroff")
+                                           } else if (!checked) {
+                                               actions = actions.filter(a => a !== "poweroff")
+                                           }
+                                           SettingsData.set("powerMenuActions", actions)
+                                       }
+                        }
+
+                        DankToggle {
+                            width: parent.width
+                            text: I18n.tr("Show Lock")
+                            checked: SettingsData.powerMenuActions.includes("lock")
+                            onToggled: checked => {
+                                           let actions = [...SettingsData.powerMenuActions]
+                                           if (checked && !actions.includes("lock")) {
+                                               actions.push("lock")
+                                           } else if (!checked) {
+                                               actions = actions.filter(a => a !== "lock")
+                                           }
+                                           SettingsData.set("powerMenuActions", actions)
+                                       }
+                        }
+
+                        DankToggle {
+                            width: parent.width
+                            text: I18n.tr("Show Suspend")
+                            checked: SettingsData.powerMenuActions.includes("suspend")
+                            onToggled: checked => {
+                                           let actions = [...SettingsData.powerMenuActions]
+                                           if (checked && !actions.includes("suspend")) {
+                                               actions.push("suspend")
+                                           } else if (!checked) {
+                                               actions = actions.filter(a => a !== "suspend")
+                                           }
+                                           SettingsData.set("powerMenuActions", actions)
+                                       }
+                        }
+
+                        DankToggle {
+                            width: parent.width
+                            text: I18n.tr("Show Restart DMS")
+                            description: I18n.tr("Restart the DankMaterialShell")
+                            checked: SettingsData.powerMenuActions.includes("restart")
+                            onToggled: checked => {
+                                           let actions = [...SettingsData.powerMenuActions]
+                                           if (checked && !actions.includes("restart")) {
+                                               actions.push("restart")
+                                           } else if (!checked) {
+                                               actions = actions.filter(a => a !== "restart")
+                                           }
+                                           SettingsData.set("powerMenuActions", actions)
+                                       }
+                        }
+
+                        DankToggle {
+                            width: parent.width
+                            text: I18n.tr("Show Hibernate")
+                            description: I18n.tr("Only visible if hibernate is supported by your system")
+                            checked: SettingsData.powerMenuActions.includes("hibernate")
+                            visible: SessionService.hibernateSupported
+                            onToggled: checked => {
+                                           let actions = [...SettingsData.powerMenuActions]
+                                           if (checked && !actions.includes("hibernate")) {
+                                               actions.push("hibernate")
+                                           } else if (!checked) {
+                                               actions = actions.filter(a => a !== "hibernate")
+                                           }
+                                           SettingsData.set("powerMenuActions", actions)
+                                       }
+                        }
+                    }
+                }
+            }
+
             StyledRect {
                 width: parent.width
                 height: powerCommandConfirmSection.implicitHeight + Theme.spacingL * 2
@@ -352,7 +543,7 @@ Item {
                         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)
+                        onToggled: checked => SettingsData.set("powerActionConfirm", checked)
                     }
                 }
             }
@@ -407,18 +598,18 @@ Item {
                             width: parent.width
                             height: 48
                             placeholderText: "/usr/bin/myLock.sh"
-                            backgroundColor: Theme.surfaceVariant
-                            normalBorderColor: Theme.primarySelected
+                            backgroundColor: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                            normalBorderColor: Theme.outlineMedium
                             focusedBorderColor: Theme.primary
 
                             Component.onCompleted: {
                                 if (SettingsData.customPowerActionLock) {
-                                    text = SettingsData.customPowerActionLock;
+                                    text = SettingsData.customPowerActionLock
                                 }
                             }
 
                             onTextEdited: {
-                                SettingsData.setCustomPowerActionLock(text.trim());
+                                SettingsData.set("customPowerActionLock", text.trim())
                             }
                         }
                     }
@@ -439,18 +630,18 @@ Item {
                             width: parent.width
                             height: 48
                             placeholderText: "/usr/bin/myLogout.sh"
-                            backgroundColor: Theme.surfaceVariant
-                            normalBorderColor: Theme.primarySelected
+                            backgroundColor: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                            normalBorderColor: Theme.outlineMedium
                             focusedBorderColor: Theme.primary
 
                             Component.onCompleted: {
                                 if (SettingsData.customPowerActionLogout) {
-                                    text = SettingsData.customPowerActionLogout;
+                                    text = SettingsData.customPowerActionLogout
                                 }
                             }
 
                             onTextEdited: {
-                                SettingsData.setCustomPowerActionLogout(text.trim());
+                                SettingsData.set("customPowerActionLogout", text.trim())
                             }
                         }
                     }
@@ -471,18 +662,18 @@ Item {
                             width: parent.width
                             height: 48
                             placeholderText: "/usr/bin/mySuspend.sh"
-                            backgroundColor: Theme.surfaceVariant
-                            normalBorderColor: Theme.primarySelected
+                            backgroundColor: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                            normalBorderColor: Theme.outlineMedium
                             focusedBorderColor: Theme.primary
 
                             Component.onCompleted: {
                                 if (SettingsData.customPowerActionSuspend) {
-                                    text = SettingsData.customPowerActionSuspend;
+                                    text = SettingsData.customPowerActionSuspend
                                 }
                             }
 
                             onTextEdited: {
-                                SettingsData.setCustomPowerActionSuspend(text.trim());
+                                SettingsData.set("customPowerActionSuspend", text.trim())
                             }
                         }
                     }
@@ -503,18 +694,18 @@ Item {
                             width: parent.width
                             height: 48
                             placeholderText: "/usr/bin/myHibernate.sh"
-                            backgroundColor: Theme.surfaceVariant
-                            normalBorderColor: Theme.primarySelected
+                            backgroundColor: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                            normalBorderColor: Theme.outlineMedium
                             focusedBorderColor: Theme.primary
 
                             Component.onCompleted: {
                                 if (SettingsData.customPowerActionHibernate) {
-                                    text = SettingsData.customPowerActionHibernate;
+                                    text = SettingsData.customPowerActionHibernate
                                 }
                             }
 
                             onTextEdited: {
-                                SettingsData.setCustomPowerActionHibernate(text.trim());
+                                SettingsData.set("customPowerActionHibernate", text.trim())
                             }
                         }
                     }
@@ -535,18 +726,18 @@ Item {
                             width: parent.width
                             height: 48
                             placeholderText: "/usr/bin/myReboot.sh"
-                            backgroundColor: Theme.surfaceVariant
-                            normalBorderColor: Theme.primarySelected
+                            backgroundColor: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                            normalBorderColor: Theme.outlineMedium
                             focusedBorderColor: Theme.primary
 
                             Component.onCompleted: {
                                 if (SettingsData.customPowerActionReboot) {
-                                    text = SettingsData.customPowerActionReboot;
+                                    text = SettingsData.customPowerActionReboot
                                 }
                             }
 
                             onTextEdited: {
-                                SettingsData.setCustomPowerActionReboot(text.trim());
+                                SettingsData.set("customPowerActionReboot", text.trim())
                             }
                         }
                     }
@@ -567,18 +758,18 @@ Item {
                             width: parent.width
                             height: 48
                             placeholderText: "/usr/bin/myPowerOff.sh"
-                            backgroundColor: Theme.surfaceVariant
-                            normalBorderColor: Theme.primarySelected
+                            backgroundColor: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                            normalBorderColor: Theme.outlineMedium
                             focusedBorderColor: Theme.primary
 
                             Component.onCompleted: {
                                 if (SettingsData.customPowerActionPowerOff) {
-                                    text = SettingsData.customPowerActionPowerOff;
+                                    text = SettingsData.customPowerActionPowerOff
                                 }
                             }
 
                             onTextEdited: {
-                                SettingsData.setCustomPowerActionPowerOff(text.trim());
+                                SettingsData.set("customPowerActionPowerOff", text.trim())
                             }
                         }
                     }

Modals/Settings/SettingsContent.qml

@@ -2,12 +2,14 @@ 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
         anchors.leftMargin: 0
@@ -22,6 +24,7 @@ Item {
             anchors.fill: parent
             active: root.currentIndex === 0
             visible: active
+            focus: active
 
             sourceComponent: Component {
                 PersonalizationTab {
@@ -30,6 +33,12 @@ Item {
 
             }
 
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
         }
 
         Loader {
@@ -38,10 +47,17 @@ Item {
             anchors.fill: parent
             active: root.currentIndex === 1
             visible: active
+            focus: active
 
             sourceComponent: TimeWeatherTab {
             }
 
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
         }
 
         Loader {
@@ -50,11 +66,18 @@ Item {
             anchors.fill: parent
             active: root.currentIndex === 2
             visible: active
+            focus: active
 
             sourceComponent: DankBarTab {
                 parentModal: root.parentModal
             }
 
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
         }
 
         Loader {
@@ -63,10 +86,17 @@ Item {
             anchors.fill: parent
             active: root.currentIndex === 3
             visible: active
+            focus: active
 
             sourceComponent: WidgetTweaksTab {
             }
 
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
         }
 
         Loader {
@@ -75,6 +105,7 @@ Item {
             anchors.fill: parent
             active: root.currentIndex === 4
             visible: active
+            focus: active
 
             sourceComponent: Component {
                 DockTab {
@@ -82,6 +113,12 @@ Item {
 
             }
 
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
         }
 
         Loader {
@@ -90,10 +127,17 @@ Item {
             anchors.fill: parent
             active: root.currentIndex === 5
             visible: active
+            focus: active
 
             sourceComponent: DisplaysTab {
             }
 
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
         }
 
         Loader {
@@ -102,10 +146,17 @@ Item {
             anchors.fill: parent
             active: root.currentIndex === 6
             visible: active
+            focus: active
 
             sourceComponent: LauncherTab {
             }
 
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
         }
 
         Loader {
@@ -114,10 +165,17 @@ Item {
             anchors.fill: parent
             active: root.currentIndex === 7
             visible: active
+            focus: active
 
             sourceComponent: ThemeColorsTab {
             }
 
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
         }
 
         Loader {
@@ -126,10 +184,17 @@ Item {
             anchors.fill: parent
             active: root.currentIndex === 8
             visible: active
+            focus: active
 
             sourceComponent: PowerSettings {
             }
 
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
         }
 
         Loader {
@@ -138,11 +203,18 @@ Item {
             anchors.fill: parent
             active: root.currentIndex === 9
             visible: active
+            focus: active
 
             sourceComponent: PluginsTab {
                 parentModal: root.parentModal
             }
 
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
         }
 
         Loader {
@@ -151,10 +223,17 @@ Item {
             anchors.fill: parent
             active: root.currentIndex === 10
             visible: active
+            focus: active
 
             sourceComponent: AboutTab {
             }
 
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
         }
 
     }

Modals/Settings/SettingsModal.qml

@@ -11,6 +11,8 @@ import qs.Widgets
 DankModal {
     id: settingsModal
 
+    layerNamespace: "dms:settings"
+
     property Component settingsContent
     property alias profileBrowser: profileBrowser
     property int currentTabIndex: 0
@@ -34,15 +36,32 @@ DankModal {
     }
 
     objectName: "settingsModal"
-    width: 800
-    height: 800
+    width: Math.min(800, screenWidth * 0.9)
+    height: Math.min(800, screenHeight * 0.85)
+    backgroundColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
     visible: false
     onBackgroundClicked: () => {
         return hide();
     }
     content: settingsContent
     onOpened: () => {
-        Qt.callLater(() => modalFocusScope.forceActiveFocus())
+        Qt.callLater(() => {
+            modalFocusScope.forceActiveFocus()
+            if (contentLoader.item) {
+                contentLoader.item.forceActiveFocus()
+            }
+        })
+    }
+
+    onVisibleChanged: {
+        if (visible && shouldBeVisible) {
+            Qt.callLater(() => {
+                modalFocusScope.forceActiveFocus()
+                if (contentLoader.item) {
+                    contentLoader.item.forceActiveFocus()
+                }
+            })
+        }
     }
     modalFocusScope.Keys.onPressed: event => {
         const tabCount = 11
@@ -110,6 +129,14 @@ DankModal {
         }
         onDialogClosed: () => {
             allowStacking = true;
+            if (settingsModal.shouldBeVisible) {
+                Qt.callLater(() => {
+                    settingsModal.modalFocusScope.forceActiveFocus()
+                    if (settingsModal.contentLoader.item) {
+                        settingsModal.contentLoader.item.forceActiveFocus()
+                    }
+                })
+            }
         }
     }
 
@@ -129,6 +156,14 @@ DankModal {
         }
         onDialogClosed: () => {
             allowStacking = true;
+            if (settingsModal.shouldBeVisible) {
+                Qt.callLater(() => {
+                    settingsModal.modalFocusScope.forceActiveFocus()
+                    if (settingsModal.contentLoader.item) {
+                        settingsModal.contentLoader.item.forceActiveFocus()
+                    }
+                })
+            }
         }
     }
 
@@ -137,6 +172,11 @@ DankModal {
             id: rootScope
             anchors.fill: parent
 
+            Keys.onEscapePressed: event => {
+                settingsModal.hide()
+                event.accepted = true
+            }
+
             Column {
                 anchors.fill: parent
                 anchors.leftMargin: Theme.spacingL

Modals/Settings/SettingsSidebar.qml

@@ -55,87 +55,96 @@ Rectangle {
 
     width: 270
     height: parent.height
-    color: Theme.surfaceContainer
+    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
     radius: Theme.cornerRadius
 
-    Column {
+    DankFlickable {
         anchors.fill: parent
-        anchors.leftMargin: Theme.spacingS
-        anchors.rightMargin: Theme.spacingS
-        anchors.bottomMargin: Theme.spacingS
-        anchors.topMargin: Theme.spacingM + 2
-        spacing: Theme.spacingXS
+        clip: true
+        contentHeight: sidebarColumn.implicitHeight
 
-        ProfileSection {
-            parentModal: sidebarContainer.parentModal
-        }
+        Column {
+            id: sidebarColumn
 
-        Rectangle {
-            width: parent.width - Theme.spacingS * 2
-            height: 1
-            color: Theme.outline
-            opacity: 0.2
-        }
-
-        Item {
             width: parent.width
-            height: Theme.spacingL
-        }
+            anchors.leftMargin: Theme.spacingS
+            anchors.rightMargin: Theme.spacingS
+            anchors.bottomMargin: Theme.spacingS
+            anchors.topMargin: Theme.spacingM + 2
+            spacing: Theme.spacingXS
 
-        Repeater {
-            id: sidebarRepeater
-
-            model: sidebarContainer.sidebarItems
-
-            delegate: Rectangle {
-                required property int index
-                required property var modelData
-
-                property bool isActive: sidebarContainer.currentIndex === index
+            ProfileSection {
+                parentModal: sidebarContainer.parentModal
+            }
 
+            Rectangle {
                 width: parent.width - Theme.spacingS * 2
-                height: 44
-                radius: Theme.cornerRadius
-                color: isActive ? Theme.primary : tabMouseArea.containsMouse ? Theme.surfaceHover : "transparent"
+                height: 1
+                color: Theme.outline
+                opacity: 0.2
+            }
 
-                Row {
-                    anchors.left: parent.left
-                    anchors.leftMargin: Theme.spacingM
-                    anchors.verticalCenter: parent.verticalCenter
-                    spacing: Theme.spacingM
+            Item {
+                width: parent.width
+                height: Theme.spacingL
+            }
 
-                    DankIcon {
-                        name: modelData.icon || ""
-                        size: Theme.iconSize - 2
-                        color: parent.parent.isActive ? Theme.primaryText : Theme.surfaceText
+            Repeater {
+                id: sidebarRepeater
+
+                model: sidebarContainer.sidebarItems
+
+                delegate: Rectangle {
+                    required property int index
+                    required property var modelData
+
+                    property bool isActive: sidebarContainer.currentIndex === index
+
+                    width: sidebarColumn.width - Theme.spacingS * 2
+                    height: 44
+                    radius: Theme.cornerRadius
+                    color: isActive ? Theme.primary : tabMouseArea.containsMouse ? Theme.surfaceHover : "transparent"
+
+                    Row {
+                        anchors.left: parent.left
+                        anchors.leftMargin: Theme.spacingM
                         anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingM
+
+                        DankIcon {
+                            name: modelData.icon || ""
+                            size: Theme.iconSize - 2
+                            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.primaryText : Theme.surfaceText
+                            font.weight: parent.parent.isActive ? Font.Medium : Font.Normal
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
                     }
 
-                    StyledText {
-                        text: modelData.text || ""
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: parent.parent.isActive ? Theme.primaryText : Theme.surfaceText
-                        font.weight: parent.parent.isActive ? Font.Medium : Font.Normal
-                        anchors.verticalCenter: parent.verticalCenter
+                    MouseArea {
+                        id: tabMouseArea
+
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: () => {
+                            sidebarContainer.currentIndex = index;
+                        }
                     }
 
-                }
+                    Behavior on color {
+                        ColorAnimation {
+                            duration: Theme.shortDuration
+                            easing.type: Theme.standardEasing
+                        }
 
-                MouseArea {
-                    id: tabMouseArea
-
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
-                    onClicked: () => {
-                        sidebarContainer.currentIndex = index;
-                    }
-                }
-
-                Behavior on color {
-                    ColorAnimation {
-                        duration: Theme.shortDuration
-                        easing.type: Theme.standardEasing
                     }
 
                 }

Modals/Spotlight/FileSearchController.qml

@@ -0,0 +1,237 @@
+import QtQuick
+import Quickshell.Io
+import qs.Services
+
+Item {
+    id: controller
+
+    property string searchQuery: ""
+    property alias model: fileModel
+    property int selectedIndex: 0
+    property bool keyboardNavigationActive: false
+    property bool isSearching: false
+    property int totalResults: 0
+    property string searchField: "filename"
+
+    signal searchCompleted
+
+    ListModel {
+        id: fileModel
+    }
+
+    function performSearch() {
+        if (!DSearchService.dsearchAvailable) {
+            model.clear()
+            totalResults = 0
+            isSearching = false
+            return
+        }
+
+        if (searchQuery.length === 0) {
+            model.clear()
+            totalResults = 0
+            isSearching = false
+            return
+        }
+
+        isSearching = true
+        const params = {
+            "limit": 50,
+            "fuzzy": true,
+            "sort": "score",
+            "desc": true
+        }
+
+        if (searchField && searchField !== "all") {
+            params.field = searchField
+        }
+
+        DSearchService.search(searchQuery, params, response => {
+                                  if (response.error) {
+                                      model.clear()
+                                      totalResults = 0
+                                      isSearching = false
+                                      return
+                                  }
+
+                                  if (response.result) {
+                                      updateModel(response.result)
+                                  }
+
+                                  isSearching = false
+                                  searchCompleted()
+                              })
+    }
+
+    function updateModel(result) {
+        model.clear()
+        totalResults = result.total_hits || 0
+        selectedIndex = 0
+        keyboardNavigationActive = true
+
+        if (!result.hits || result.hits.length === 0) {
+            selectedIndex = -1
+            keyboardNavigationActive = false
+            return
+        }
+
+        for (var i = 0; i < result.hits.length; i++) {
+            const hit = result.hits[i]
+            const filePath = hit.id || ""
+            const fileName = getFileName(filePath)
+            const fileExt = getFileExtension(fileName)
+            const fileType = determineFileType(fileName, filePath)
+            const dirPath = getDirPath(filePath)
+
+            model.append({
+                             "filePath": filePath,
+                             "fileName": fileName,
+                             "fileExtension": fileExt,
+                             "fileType": fileType,
+                             "dirPath": dirPath,
+                             "score": hit.score || 0
+                         })
+        }
+    }
+
+    function getFileName(path) {
+        const parts = path.split('/')
+        return parts[parts.length - 1] || path
+    }
+
+    function getFileExtension(fileName) {
+        const parts = fileName.split('.')
+        if (parts.length > 1) {
+            return parts[parts.length - 1].toLowerCase()
+        }
+        return ""
+    }
+
+    function getDirPath(path) {
+        const lastSlash = path.lastIndexOf('/')
+        if (lastSlash > 0) {
+            return path.substring(0, lastSlash)
+        }
+        return ""
+    }
+
+    function determineFileType(fileName, filePath) {
+        const ext = getFileExtension(fileName)
+
+        const imageExts = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg", "ico"]
+        if (imageExts.includes(ext)) {
+            return "image"
+        }
+
+        const videoExts = ["mp4", "mkv", "avi", "mov", "webm", "flv", "wmv", "m4v"]
+        if (videoExts.includes(ext)) {
+            return "video"
+        }
+
+        const audioExts = ["mp3", "wav", "flac", "ogg", "m4a", "aac", "wma"]
+        if (audioExts.includes(ext)) {
+            return "audio"
+        }
+
+        const codeExts = ["js", "ts", "jsx", "tsx", "py", "go", "rs", "c", "cpp", "h", "java", "kt", "swift", "rb", "php", "html", "css", "scss", "json", "xml", "yaml", "yml", "toml", "sh", "bash", "zsh", "fish", "qml", "vue", "svelte"]
+        if (codeExts.includes(ext)) {
+            return "code"
+        }
+
+        const docExts = ["txt", "md", "pdf", "doc", "docx", "odt", "rtf"]
+        if (docExts.includes(ext)) {
+            return "document"
+        }
+
+        const archiveExts = ["zip", "tar", "gz", "bz2", "xz", "7z", "rar"]
+        if (archiveExts.includes(ext)) {
+            return "archive"
+        }
+
+        if (!ext || fileName.indexOf('.') === -1) {
+            return "binary"
+        }
+
+        return "file"
+    }
+
+    function selectNext() {
+        if (model.count === 0) {
+            return
+        }
+        keyboardNavigationActive = true
+        selectedIndex = Math.min(selectedIndex + 1, model.count - 1)
+    }
+
+    function selectPrevious() {
+        if (model.count === 0) {
+            return
+        }
+        keyboardNavigationActive = true
+        selectedIndex = Math.max(selectedIndex - 1, 0)
+    }
+
+    signal fileOpened
+
+    function openFile(filePath) {
+        if (!filePath || filePath.length === 0) {
+            return
+        }
+
+        let url = filePath
+        if (!url.startsWith("file://")) {
+            url = "file://" + filePath
+        }
+
+        Qt.openUrlExternally(url)
+        fileOpened()
+    }
+
+    function openFolder(filePath) {
+        if (!filePath || filePath.length === 0) {
+            return
+        }
+
+        const lastSlash = filePath.lastIndexOf('/')
+        if (lastSlash <= 0) {
+            return
+        }
+
+        const dirPath = filePath.substring(0, lastSlash)
+        let url = dirPath
+        if (!url.startsWith("file://")) {
+            url = "file://" + dirPath
+        }
+
+        Qt.openUrlExternally(url)
+        fileOpened()
+    }
+
+    function openSelected() {
+        if (model.count === 0 || selectedIndex < 0 || selectedIndex >= model.count) {
+            return
+        }
+
+        const item = model.get(selectedIndex)
+        if (item && item.filePath) {
+            openFile(item.filePath)
+        }
+    }
+
+    function reset() {
+        searchQuery = ""
+        model.clear()
+        selectedIndex = -1
+        keyboardNavigationActive = false
+        isSearching = false
+        totalResults = 0
+    }
+
+    onSearchQueryChanged: {
+        performSearch()
+    }
+
+    onSearchFieldChanged: {
+        performSearch()
+    }
+}

Modals/Spotlight/FileSearchEntry.qml

@@ -0,0 +1,155 @@
+import QtQuick
+import QtQuick.Effects
+import Quickshell
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: entry
+
+    required property string filePath
+    required property string fileName
+    required property string fileExtension
+    required property string fileType
+    required property string dirPath
+    required property bool isSelected
+    required property int itemIndex
+
+    signal clicked()
+
+    readonly property int iconSize: 40
+
+    radius: Theme.cornerRadius
+    color: isSelected ? Theme.primaryPressed : mouseArea.containsMouse ? Theme.primaryHoverLight : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+
+    Row {
+        anchors.fill: parent
+        anchors.margins: Theme.spacingM
+        spacing: Theme.spacingL
+
+        Item {
+            width: iconSize
+            height: iconSize
+            anchors.verticalCenter: parent.verticalCenter
+
+            Image {
+                id: imagePreview
+                anchors.fill: parent
+                source: fileType === "image" ? `file://${filePath}` : ""
+                fillMode: Image.PreserveAspectCrop
+                smooth: true
+                cache: true
+                asynchronous: true
+                visible: fileType === "image" && status === Image.Ready
+                sourceSize.width: 128
+                sourceSize.height: 128
+            }
+
+            MultiEffect {
+                anchors.fill: parent
+                source: imagePreview
+                maskEnabled: true
+                maskSource: imageMask
+                visible: fileType === "image" && imagePreview.status === Image.Ready
+                maskThresholdMin: 0.5
+                maskSpreadAtMin: 1
+            }
+
+            Item {
+                id: imageMask
+                width: iconSize
+                height: iconSize
+                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: getFileTypeColor()
+                visible: fileType !== "image" || imagePreview.status !== Image.Ready
+
+                StyledText {
+                    anchors.centerIn: parent
+                    text: getFileIconText()
+                    font.pixelSize: fileExtension.length > 0 ? (fileExtension.length > 3 ? Theme.fontSizeSmall - 2 : Theme.fontSizeSmall) : Theme.fontSizeMedium
+                    color: Theme.surfaceText
+                    font.weight: Font.Bold
+                }
+            }
+        }
+
+        Column {
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width - iconSize - Theme.spacingL
+            spacing: Theme.spacingXS
+
+            StyledText {
+                width: parent.width
+                text: fileName
+                font.pixelSize: Theme.fontSizeLarge
+                color: Theme.surfaceText
+                font.weight: Font.Medium
+                elide: Text.ElideMiddle
+                wrapMode: Text.NoWrap
+                maximumLineCount: 1
+            }
+
+            StyledText {
+                width: parent.width
+                text: dirPath
+                font.pixelSize: Theme.fontSizeMedium
+                color: Theme.surfaceVariantText
+                elide: Text.ElideMiddle
+                maximumLineCount: 1
+            }
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onClicked: entry.clicked()
+    }
+
+    function getFileTypeColor() {
+        switch (fileType) {
+        case "code":
+            return Theme.codeFileColor || Theme.primarySelected
+        case "document":
+            return Theme.docFileColor || Theme.secondarySelected
+        case "video":
+            return Theme.videoFileColor || Theme.tertiarySelected
+        case "audio":
+            return Theme.audioFileColor || Theme.errorSelected
+        case "archive":
+            return Theme.archiveFileColor || Theme.warningSelected
+        case "binary":
+            return Theme.binaryFileColor || Theme.surfaceDim
+        default:
+            return Theme.surfaceLight
+        }
+    }
+
+    function getFileIconText() {
+        if (fileType === "binary") {
+            return "bin"
+        }
+
+        if (fileExtension.length > 0) {
+            return fileExtension
+        }
+
+        return fileName.charAt(0).toUpperCase()
+    }
+}

Modals/Spotlight/FileSearchResults.qml

@@ -0,0 +1,246 @@
+import QtQuick
+import QtQuick.Effects
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: resultsContainer
+
+    property var fileSearchController: null
+
+    function resetScroll() {
+        filesList.contentY = 0
+    }
+
+    color: "transparent"
+    clip: true
+
+    DankListView {
+        id: filesList
+
+        property int itemHeight: 60
+        property int itemSpacing: Theme.spacingS
+        property bool hoverUpdatesSelection: false
+        property bool keyboardNavigationActive: fileSearchController ? fileSearchController.keyboardNavigationActive : false
+
+        signal keyboardNavigationReset
+        signal itemClicked(int index)
+        signal itemRightClicked(int index)
+
+        function ensureVisible(index) {
+            if (index < 0 || index >= count)
+                return
+
+            const itemY = index * (itemHeight + itemSpacing)
+            const itemBottom = itemY + itemHeight
+            if (itemY < contentY)
+                contentY = itemY
+            else if (itemBottom > contentY + height)
+                contentY = itemBottom - height
+        }
+
+        anchors.fill: parent
+        anchors.margins: Theme.spacingS
+        model: fileSearchController ? fileSearchController.model : null
+        currentIndex: fileSearchController ? fileSearchController.selectedIndex : -1
+        clip: true
+        spacing: itemSpacing
+        focus: true
+        interactive: true
+        cacheBuffer: Math.max(0, Math.min(height * 2, 1000))
+        reuseItems: true
+
+        onCurrentIndexChanged: {
+            if (keyboardNavigationActive)
+                ensureVisible(currentIndex)
+        }
+
+        onItemClicked: function (index) {
+            if (fileSearchController) {
+                const item = fileSearchController.model.get(index)
+                fileSearchController.openFile(item.filePath)
+            }
+        }
+
+        onItemRightClicked: function (index) {
+            if (fileSearchController) {
+                const item = fileSearchController.model.get(index)
+                fileSearchController.openFolder(item.filePath)
+            }
+        }
+
+        onKeyboardNavigationReset: {
+            if (fileSearchController)
+                fileSearchController.keyboardNavigationActive = false
+        }
+
+        delegate: Rectangle {
+            required property int index
+            required property string filePath
+            required property string fileName
+            required property string fileExtension
+            required property string fileType
+            required property string dirPath
+
+            width: ListView.view.width
+            height: filesList.itemHeight
+            radius: Theme.cornerRadius
+            color: ListView.isCurrentItem ? Theme.primaryPressed : fileMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+
+            Row {
+                anchors.fill: parent
+                anchors.margins: Theme.spacingM
+                spacing: Theme.spacingL
+
+                Item {
+                    width: 40
+                    height: 40
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    Rectangle {
+                        id: iconBackground
+                        anchors.fill: parent
+                        radius: width / 2
+                        color: Theme.surfaceLight
+                        visible: fileType !== "image"
+
+                        DankNFIcon {
+                            id: nerdIcon
+                            anchors.centerIn: parent
+                            name: {
+                                const lowerName = fileName.toLowerCase()
+                                if (lowerName.startsWith("dockerfile"))
+                                    return "docker"
+                                if (lowerName.startsWith("makefile"))
+                                    return "makefile"
+                                if (lowerName.startsWith("license"))
+                                    return "license"
+                                if (lowerName.startsWith("readme"))
+                                    return "readme"
+                                return fileExtension.toLowerCase()
+                            }
+                            size: Theme.fontSizeXLarge
+                            color: Theme.surfaceText
+                        }
+
+                        StyledText {
+                            anchors.centerIn: parent
+                            text: fileExtension ? (fileExtension.length > 4 ? fileExtension.substring(0, 4) : fileExtension) : "?"
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceText
+                            font.weight: Font.Bold
+                            visible: !nerdIcon.visible
+                        }
+                    }
+
+                    Loader {
+                        anchors.fill: parent
+                        active: fileType === "image"
+                        sourceComponent: Image {
+                            anchors.fill: parent
+                            source: "file://" + filePath
+                            fillMode: Image.PreserveAspectCrop
+                            asynchronous: true
+                            cache: false
+                            layer.enabled: true
+                            layer.effect: MultiEffect {
+                                maskEnabled: true
+                                maskThresholdMin: 0.5
+                                maskSpreadAtMin: 1.0
+                                maskSource: ShaderEffectSource {
+                                    sourceItem: Rectangle {
+                                        width: 40
+                                        height: 40
+                                        radius: 20
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                Column {
+                    anchors.verticalCenter: parent.verticalCenter
+                    width: parent.width - 40 - Theme.spacingL
+                    spacing: Theme.spacingXS
+
+                    StyledText {
+                        width: parent.width
+                        text: fileName || ""
+                        font.pixelSize: Theme.fontSizeLarge
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                        elide: Text.ElideMiddle
+                        maximumLineCount: 1
+                    }
+
+                    StyledText {
+                        width: parent.width
+                        text: dirPath || ""
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: Theme.surfaceVariantText
+                        elide: Text.ElideMiddle
+                        maximumLineCount: 1
+                    }
+                }
+            }
+
+            MouseArea {
+                id: fileMouseArea
+
+                anchors.fill: parent
+                acceptedButtons: Qt.LeftButton | Qt.RightButton
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                z: 10
+                onEntered: {
+                    if (filesList.hoverUpdatesSelection && !filesList.keyboardNavigationActive)
+                        filesList.currentIndex = index
+                }
+                onPositionChanged: {
+                    filesList.keyboardNavigationReset()
+                }
+                onClicked: mouse => {
+                               if (mouse.button === Qt.LeftButton) {
+                                   filesList.itemClicked(index)
+                               } else if (mouse.button === Qt.RightButton) {
+                                   filesList.itemRightClicked(index)
+                               }
+                           }
+            }
+        }
+    }
+
+    Item {
+        anchors.fill: parent
+        visible: !fileSearchController || !fileSearchController.model || fileSearchController.model.count === 0
+
+        StyledText {
+            property string displayText: {
+                if (!fileSearchController) {
+                    return ""
+                }
+                if (!DSearchService.dsearchAvailable) {
+                    return I18n.tr("DankSearch not available")
+                }
+                if (fileSearchController.isSearching) {
+                    return I18n.tr("Searching...")
+                }
+                if (fileSearchController.searchQuery.length === 0) {
+                    return I18n.tr("Enter a search query")
+                }
+                if (!fileSearchController.model || fileSearchController.model.count === 0) {
+                    return I18n.tr("No files found")
+                }
+                return ""
+            }
+
+            text: displayText
+            anchors.centerIn: parent
+            font.pixelSize: Theme.fontSizeMedium
+            color: Theme.surfaceVariantText
+            visible: displayText.length > 0
+        }
+    }
+}

Modals/Spotlight/SpotlightContent.qml

@@ -11,10 +11,40 @@ Item {
 
     property alias appLauncher: appLauncher
     property alias searchField: searchField
+    property alias fileSearchController: fileSearchController
     property var parentModal: null
+    property string searchMode: "apps"
 
     function resetScroll() {
-        resultsView.resetScroll()
+        if (searchMode === "apps") {
+            resultsView.resetScroll()
+        } else {
+            fileSearchResults.resetScroll()
+        }
+    }
+
+    function updateSearchMode() {
+        if (searchField.text.startsWith("/")) {
+            if (searchMode !== "files") {
+                searchMode = "files"
+            }
+            const query = searchField.text.substring(1)
+            fileSearchController.searchQuery = query
+        } else {
+            if (searchMode !== "apps") {
+                searchMode = "apps"
+                fileSearchController.reset()
+                appLauncher.searchQuery = searchField.text
+            }
+        }
+    }
+
+    onSearchModeChanged: {
+        if (searchMode === "files") {
+            appLauncher.keyboardNavigationActive = false
+        } else {
+            fileSearchController.keyboardNavigationActive = false
+        }
     }
 
     anchors.fill: parent
@@ -27,59 +57,95 @@ Item {
 
                             event.accepted = true
                         } else if (event.key === Qt.Key_Down) {
-                            appLauncher.selectNext()
+                            if (searchMode === "apps") {
+                                appLauncher.selectNext()
+                            } else {
+                                fileSearchController.selectNext()
+                            }
                             event.accepted = true
                         } else if (event.key === Qt.Key_Up) {
-                            appLauncher.selectPrevious()
+                            if (searchMode === "apps") {
+                                appLauncher.selectPrevious()
+                            } else {
+                                fileSearchController.selectPrevious()
+                            }
                             event.accepted = true
-                        } else if (event.key === Qt.Key_Right && appLauncher.viewMode === "grid") {
+                        } else if (event.key === Qt.Key_Right && searchMode === "apps" && appLauncher.viewMode === "grid") {
                             appLauncher.selectNextInRow()
                             event.accepted = true
-                        } else if (event.key === Qt.Key_Left && appLauncher.viewMode === "grid") {
+                        } else if (event.key === Qt.Key_Left && searchMode === "apps" && appLauncher.viewMode === "grid") {
                             appLauncher.selectPreviousInRow()
                             event.accepted = true
                         } else if (event.key == Qt.Key_J && event.modifiers & Qt.ControlModifier) {
-                            appLauncher.selectNext()
+                            if (searchMode === "apps") {
+                                appLauncher.selectNext()
+                            } else {
+                                fileSearchController.selectNext()
+                            }
                             event.accepted = true
                         } else if (event.key == Qt.Key_K && event.modifiers & Qt.ControlModifier) {
-                            appLauncher.selectPrevious()
+                            if (searchMode === "apps") {
+                                appLauncher.selectPrevious()
+                            } else {
+                                fileSearchController.selectPrevious()
+                            }
                             event.accepted = true
-                        } else if (event.key == Qt.Key_L && event.modifiers & Qt.ControlModifier && appLauncher.viewMode === "grid") {
+                        } else if (event.key == Qt.Key_L && event.modifiers & Qt.ControlModifier && searchMode === "apps" && appLauncher.viewMode === "grid") {
                             appLauncher.selectNextInRow()
                             event.accepted = true
-                        } else if (event.key == Qt.Key_H && event.modifiers & Qt.ControlModifier && appLauncher.viewMode === "grid") {
+                        } else if (event.key == Qt.Key_H && event.modifiers & Qt.ControlModifier && searchMode === "apps" && appLauncher.viewMode === "grid") {
                             appLauncher.selectPreviousInRow()
                             event.accepted = true
                         } else if (event.key === Qt.Key_Tab) {
-                            if (appLauncher.viewMode === "grid") {
-                                appLauncher.selectNextInRow()
+                            if (searchMode === "apps") {
+                                if (appLauncher.viewMode === "grid") {
+                                    appLauncher.selectNextInRow()
+                                } else {
+                                    appLauncher.selectNext()
+                                }
                             } else {
-                                appLauncher.selectNext()
+                                fileSearchController.selectNext()
                             }
                             event.accepted = true
                         } else if (event.key === Qt.Key_Backtab) {
-                            if (appLauncher.viewMode === "grid") {
-                                appLauncher.selectPreviousInRow()
+                            if (searchMode === "apps") {
+                                if (appLauncher.viewMode === "grid") {
+                                    appLauncher.selectPreviousInRow()
+                                } else {
+                                    appLauncher.selectPrevious()
+                                }
                             } else {
-                                appLauncher.selectPrevious()
+                                fileSearchController.selectPrevious()
                             }
                             event.accepted = true
                         } else if (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) {
-                            if (appLauncher.viewMode === "grid") {
-                                appLauncher.selectNextInRow()
+                            if (searchMode === "apps") {
+                                if (appLauncher.viewMode === "grid") {
+                                    appLauncher.selectNextInRow()
+                                } else {
+                                    appLauncher.selectNext()
+                                }
                             } else {
-                                appLauncher.selectNext()
+                                fileSearchController.selectNext()
                             }
                             event.accepted = true
                         } else if (event.key === Qt.Key_P && event.modifiers & Qt.ControlModifier) {
-                            if (appLauncher.viewMode === "grid") {
-                                appLauncher.selectPreviousInRow()
+                            if (searchMode === "apps") {
+                                if (appLauncher.viewMode === "grid") {
+                                    appLauncher.selectPreviousInRow()
+                                } else {
+                                    appLauncher.selectPrevious()
+                                }
                             } else {
-                                appLauncher.selectPrevious()
+                                fileSearchController.selectPrevious()
                             }
                             event.accepted = true
                         } else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
-                            appLauncher.launchSelected()
+                            if (searchMode === "apps") {
+                                appLauncher.launchSelected()
+                            } else if (searchMode === "files") {
+                                fileSearchController.openSelected()
+                            }
                             event.accepted = true
                         }
                     }
@@ -94,10 +160,19 @@ Item {
                            parentModal.hide()
                        }
         onViewModeSelected: mode => {
-                                SettingsData.setSpotlightModalViewMode(mode)
+                                SettingsData.set("spotlightModalViewMode", mode)
                             }
     }
 
+    FileSearchController {
+        id: fileSearchController
+
+        onFileOpened: () => {
+                          if (parentModal)
+                          parentModal.hide()
+                      }
+    }
+
     Column {
         anchors.fill: parent
         anchors.margins: Theme.spacingM
@@ -108,6 +183,7 @@ Item {
             width: parent.width
             spacing: Theme.spacingM
             leftPadding: Theme.spacingS
+            topPadding: Theme.spacingS
 
             DankTextField {
                 id: searchField
@@ -115,10 +191,10 @@ Item {
                 width: parent.width - 80 - Theme.spacingL
                 height: 56
                 cornerRadius: Theme.cornerRadius
-                backgroundColor: Theme.surfaceContainerHigh
+                backgroundColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
                 normalBorderColor: Theme.outlineMedium
                 focusedBorderColor: Theme.primary
-                leftIconName: "search"
+                leftIconName: searchMode === "files" ? "folder" : "search"
                 leftIconSize: Theme.iconSize
                 leftIconColor: Theme.surfaceVariantText
                 leftIconFocusedColor: Theme.primary
@@ -130,10 +206,14 @@ Item {
                 ignoreLeftRightKeys: appLauncher.viewMode !== "list"
                 ignoreTabKeys: true
                 keyForwardTargets: [spotlightKeyHandler]
-                text: appLauncher.searchQuery
-                onTextEdited: () => {
-                                  appLauncher.searchQuery = text
-                              }
+                onTextChanged: {
+                    if (searchMode === "apps") {
+                        appLauncher.searchQuery = text
+                    }
+                }
+                onTextEdited: {
+                    updateSearchMode()
+                }
                 Keys.onPressed: event => {
                                     if (event.key === Qt.Key_Escape) {
                                         if (parentModal)
@@ -141,12 +221,18 @@ Item {
 
                                         event.accepted = true
                                     } else if ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && text.length > 0) {
-                                        if (appLauncher.keyboardNavigationActive && appLauncher.model.count > 0)
-                                        appLauncher.launchSelected()
-                                        else if (appLauncher.model.count > 0)
-                                        appLauncher.launchApp(appLauncher.model.get(0))
+                                        if (searchMode === "apps") {
+                                            if (appLauncher.keyboardNavigationActive && appLauncher.model.count > 0)
+                                            appLauncher.launchSelected()
+                                            else if (appLauncher.model.count > 0)
+                                            appLauncher.launchApp(appLauncher.model.get(0))
+                                        } else if (searchMode === "files") {
+                                            if (fileSearchController.model.count > 0)
+                                            fileSearchController.openSelected()
+                                        }
                                         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_Tab || event.key === Qt.Key_Backtab || ((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
                                     }
                                 }
@@ -154,7 +240,7 @@ Item {
 
             Row {
                 spacing: Theme.spacingXS
-                visible: appLauncher.model.count > 0
+                visible: searchMode === "apps" && appLauncher.model.count > 0
                 anchors.verticalCenter: parent.verticalCenter
 
                 Rectangle {
@@ -207,12 +293,116 @@ Item {
                     }
                 }
             }
+
+            Row {
+                spacing: Theme.spacingXS
+                visible: searchMode === "files"
+                anchors.verticalCenter: parent.verticalCenter
+
+                Rectangle {
+                    id: filenameFilterButton
+
+                    width: 36
+                    height: 36
+                    radius: Theme.cornerRadius
+                    color: fileSearchController.searchField === "filename" ? Theme.primaryHover : filenameFilterArea.containsMouse ? Theme.surfaceHover : "transparent"
+
+                    DankIcon {
+                        anchors.centerIn: parent
+                        name: "title"
+                        size: 18
+                        color: fileSearchController.searchField === "filename" ? Theme.primary : Theme.surfaceText
+                    }
+
+                    MouseArea {
+                        id: filenameFilterArea
+
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: () => {
+                                       fileSearchController.searchField = "filename"
+                                   }
+                        onEntered: {
+                            filenameTooltipLoader.active = true
+                            Qt.callLater(() => {
+                                             if (filenameTooltipLoader.item) {
+                                                 const p = mapToItem(null, width / 2, height + Theme.spacingXS)
+                                                 filenameTooltipLoader.item.show(I18n.tr("Search filenames"), p.x, p.y, null)
+                                             }
+                                         })
+                        }
+                        onExited: {
+                            if (filenameTooltipLoader.item)
+                                filenameTooltipLoader.item.hide()
+
+                            filenameTooltipLoader.active = false
+                        }
+                    }
+                }
+
+                Rectangle {
+                    id: contentFilterButton
+
+                    width: 36
+                    height: 36
+                    radius: Theme.cornerRadius
+                    color: fileSearchController.searchField === "body" ? Theme.primaryHover : contentFilterArea.containsMouse ? Theme.surfaceHover : "transparent"
+
+                    DankIcon {
+                        anchors.centerIn: parent
+                        name: "description"
+                        size: 18
+                        color: fileSearchController.searchField === "body" ? Theme.primary : Theme.surfaceText
+                    }
+
+                    MouseArea {
+                        id: contentFilterArea
+
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: () => {
+                                       fileSearchController.searchField = "body"
+                                   }
+                        onEntered: {
+                            contentTooltipLoader.active = true
+                            Qt.callLater(() => {
+                                             if (contentTooltipLoader.item) {
+                                                 const p = mapToItem(null, width / 2, height + Theme.spacingXS)
+                                                 contentTooltipLoader.item.show(I18n.tr("Search file contents"), p.x, p.y, null)
+                                             }
+                                         })
+                        }
+                        onExited: {
+                            if (contentTooltipLoader.item)
+                                contentTooltipLoader.item.hide()
+
+                            contentTooltipLoader.active = false
+                        }
+                    }
+                }
+            }
         }
 
-        SpotlightResults {
-            id: resultsView
-            appLauncher: spotlightKeyHandler.appLauncher
-            contextMenu: contextMenu
+        Item {
+            width: parent.width
+            height: parent.height - y
+
+            SpotlightResults {
+                id: resultsView
+                anchors.fill: parent
+                appLauncher: spotlightKeyHandler.appLauncher
+                contextMenu: contextMenu
+                visible: searchMode === "apps"
+            }
+
+            FileSearchResults {
+                id: fileSearchResults
+                anchors.fill: parent
+                fileSearchController: spotlightKeyHandler.fileSearchController
+                visible: searchMode === "files"
+            }
         }
     }
 
@@ -233,7 +423,6 @@ Item {
 
         MouseArea {
 
-            // Prevent closing when clicking on the menu itself
             x: contextMenu.x
             y: contextMenu.y
             width: contextMenu.width
@@ -241,4 +430,18 @@ Item {
             onClicked: () => {}
         }
     }
+
+    Loader {
+        id: filenameTooltipLoader
+
+        active: false
+        sourceComponent: DankTooltip {}
+    }
+
+    Loader {
+        id: contentTooltipLoader
+
+        active: false
+        sourceComponent: DankTooltip {}
+    }
 }

Modals/Spotlight/SpotlightContextMenu.qml

@@ -34,7 +34,7 @@ Popup {
 
     background: Rectangle {
         radius: Theme.cornerRadius
-        color: Theme.popupBackground()
+        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
         border.width: 1
 

Modals/Spotlight/SpotlightModal.qml

@@ -12,6 +12,8 @@ import qs.Widgets
 DankModal {
     id: spotlightModal
 
+    layerNamespace: "dms:spotlight"
+
     property bool spotlightOpen: false
     property alias spotlightContent: spotlightContentInstance
 
@@ -20,10 +22,10 @@ DankModal {
         open()
 
         Qt.callLater(() => {
-            if (spotlightContent && spotlightContent.searchField) {
-                spotlightContent.searchField.forceActiveFocus()
-            }
-        })
+                         if (spotlightContent && spotlightContent.searchField) {
+                             spotlightContent.searchField.forceActiveFocus()
+                         }
+                     })
     }
 
     function showWithQuery(query) {
@@ -40,10 +42,10 @@ DankModal {
         open()
 
         Qt.callLater(() => {
-            if (spotlightContent && spotlightContent.searchField) {
-                spotlightContent.searchField.forceActiveFocus()
-            }
-        })
+                         if (spotlightContent && spotlightContent.searchField) {
+                             spotlightContent.searchField.forceActiveFocus()
+                         }
+                     })
     }
 
     function hide() {
@@ -58,6 +60,9 @@ DankModal {
                 spotlightContent.appLauncher.selectedIndex = 0
                 spotlightContent.appLauncher.setCategory(I18n.tr("All"))
             }
+            if (spotlightContent.fileSearchController) {
+                spotlightContent.fileSearchController.reset()
+            }
             if (spotlightContent.resetScroll) {
                 spotlightContent.resetScroll()
             }
@@ -76,9 +81,9 @@ DankModal {
     }
 
     shouldBeVisible: spotlightOpen
-    width: 550
-    height: 700
-    backgroundColor: Theme.popupBackground()
+    width: 500
+    height: 600
+    backgroundColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
     cornerRadius: Theme.cornerRadius
     borderColor: Theme.outlineMedium
     borderWidth: 1
@@ -111,17 +116,17 @@ DankModal {
     }
 
     IpcHandler {
-        function open(): string  {
+        function open(): string {
             spotlightModal.show()
             return "SPOTLIGHT_OPEN_SUCCESS"
         }
 
-        function close(): string  {
+        function close(): string {
             spotlightModal.hide()
             return "SPOTLIGHT_CLOSE_SUCCESS"
         }
 
-        function toggle(): string  {
+        function toggle(): string {
             spotlightModal.toggle()
             return "SPOTLIGHT_TOGGLE_SUCCESS"
         }

Modals/Spotlight/SpotlightResults.qml

@@ -7,10 +7,6 @@ import qs.Widgets
 Rectangle {
     id: resultsContainer
 
-    // DEVELOPER NOTE: This component renders the Spotlight launcher (accessed via Mod+Space).
-    // Changes to launcher behavior, especially item rendering, filtering, or model structure,
-    // likely require corresponding updates in Modules/AppDrawer/AppLauncher.qml and vice versa.
-
     property var appLauncher: null
     property var contextMenu: null
 
@@ -19,8 +15,6 @@ Rectangle {
         resultsGrid.contentY = 0
     }
 
-    width: parent.width
-    height: parent.height - y
     radius: Theme.cornerRadius
     color: "transparent"
     clip: true
@@ -79,115 +73,22 @@ Rectangle {
                                        appLauncher.keyboardNavigationActive = false
                                    }
 
-        delegate: Rectangle {
-            width: ListView.view.width
-            height: resultsList.itemHeight
-            radius: Theme.cornerRadius
-            color: ListView.isCurrentItem ? Theme.primaryPressed : listMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceContainerHigh
-
-            Row {
-                anchors.fill: parent
-                anchors.margins: Theme.spacingM
-                spacing: Theme.spacingL
-
-                Item {
-                    width: resultsList.iconSize
-                    height: resultsList.iconSize
-                    anchors.verticalCenter: parent.verticalCenter
-                    visible: model.icon !== undefined && model.icon !== ""
-
-                    property string iconValue: model.icon || ""
-                    property bool isMaterial: iconValue.indexOf("material:") === 0
-                    property string materialName: isMaterial ? iconValue.substring(9) : ""
-
-                    DankIcon {
-                        anchors.centerIn: parent
-                        name: parent.materialName
-                        size: resultsList.iconSize
-                        color: Theme.surfaceText
-                        visible: parent.isMaterial
-                    }
-
-                    IconImage {
-                        id: listIconImg
-
-                        anchors.fill: parent
-                        source: parent.isMaterial ? "" : Quickshell.iconPath(parent.iconValue, true)
-                        asynchronous: true
-                        visible: !parent.isMaterial && status === Image.Ready
-                    }
-
-                    Rectangle {
-                        anchors.fill: parent
-                        visible: !parent.isMaterial && !listIconImg.visible
-                        color: Theme.surfaceLight
-                        radius: Theme.cornerRadius
-                        border.width: 1
-                        border.color: Theme.primarySelected
-
-                        StyledText {
-                            anchors.centerIn: parent
-                            text: (model.name && model.name.length > 0) ? model.name.charAt(0).toUpperCase() : "A"
-                            font.pixelSize: resultsList.iconSize * 0.4
-                            color: Theme.primary
-                            font.weight: Font.Bold
-                        }
-                    }
-                }
-
-                Column {
-                    anchors.verticalCenter: parent.verticalCenter
-                    width: (model.icon !== undefined && model.icon !== "") ? (parent.width - resultsList.iconSize - Theme.spacingL) : parent.width
-                    spacing: Theme.spacingXS
-
-                    StyledText {
-                        width: parent.width
-                        text: model.name || ""
-                        font.pixelSize: Theme.fontSizeLarge
-                        color: Theme.surfaceText
-                        font.weight: Font.Medium
-                        elide: Text.ElideRight
-                        wrapMode: Text.NoWrap
-                        maximumLineCount: 1
-                    }
-
-                    StyledText {
-                        width: parent.width
-                        text: model.comment || "Application"
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: Theme.surfaceVariantText
-                        elide: Text.ElideRight
-                        maximumLineCount: 1
-                        visible: resultsList.showDescription && model.comment && model.comment.length > 0
-                    }
-                }
-            }
-
-            MouseArea {
-                id: listMouseArea
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                acceptedButtons: Qt.LeftButton | Qt.RightButton
-                z: 10
-                onEntered: () => {
-                               if (resultsList.hoverUpdatesSelection && !resultsList.keyboardNavigationActive)
-                               resultsList.currentIndex = index
-                           }
-                onPositionChanged: () => {
-                                       resultsList.keyboardNavigationReset()
-                                   }
-                onClicked: mouse => {
-                               if (mouse.button === Qt.LeftButton) {
-                                   resultsList.itemClicked(index, model)
-                               } 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)
-                               }
-                           }
+        delegate: AppLauncherListDelegate {
+            listView: resultsList
+            itemHeight: resultsList.itemHeight
+            iconSize: resultsList.iconSize
+            showDescription: resultsList.showDescription
+            hoverUpdatesSelection: resultsList.hoverUpdatesSelection
+            keyboardNavigationActive: resultsList.keyboardNavigationActive
+            isCurrentItem: ListView.isCurrentItem
+            iconMaterialSizeAdjustment: 0
+            iconUnicodeScale: 0.8
+            onItemClicked: (idx, modelData) => resultsList.itemClicked(idx, modelData)
+            onItemRightClicked: (idx, modelData, mouseX, mouseY) => {
+                const modalPos = resultsContainer.parent.mapFromItem(null, mouseX, mouseY)
+                resultsList.itemRightClicked(idx, modelData, modalPos.x, modalPos.y)
             }
+            onKeyboardNavigationReset: resultsList.keyboardNavigationReset
         }
     }
 
@@ -256,103 +157,23 @@ Rectangle {
                                        appLauncher.keyboardNavigationActive = false
                                    }
 
-        delegate: Rectangle {
-            width: resultsGrid.cellWidth - resultsGrid.cellPadding
-            height: resultsGrid.cellHeight - resultsGrid.cellPadding
-            radius: Theme.cornerRadius
-            color: resultsGrid.currentIndex === index ? Theme.primaryPressed : gridMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceContainerHigh
-
-            Column {
-                anchors.centerIn: parent
-                spacing: Theme.spacingS
-
-                Item {
-                    property int iconSize: Math.min(resultsGrid.maxIconSize, Math.max(resultsGrid.minIconSize, resultsGrid.cellWidth * resultsGrid.iconSizeRatio))
-
-                    width: iconSize
-                    height: iconSize
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    visible: model.icon !== undefined && model.icon !== ""
-
-                    property string iconValue: model.icon || ""
-                    property bool isMaterial: iconValue.indexOf("material:") === 0
-                    property string materialName: isMaterial ? iconValue.substring(9) : ""
-
-                    DankIcon {
-                        anchors.centerIn: parent
-                        name: parent.materialName
-                        size: parent.iconSize
-                        color: Theme.surfaceText
-                        visible: parent.isMaterial
-                    }
-
-                    IconImage {
-                        id: gridIconImg
-
-                        anchors.fill: parent
-                        source: parent.isMaterial ? "" : Quickshell.iconPath(parent.iconValue, true)
-                        smooth: true
-                        asynchronous: true
-                        visible: !parent.isMaterial && status === Image.Ready
-                    }
-
-                    Rectangle {
-                        anchors.fill: parent
-                        visible: !parent.isMaterial && !gridIconImg.visible
-                        color: Theme.surfaceLight
-                        radius: Theme.cornerRadius
-                        border.width: 1
-                        border.color: Theme.primarySelected
-
-                        StyledText {
-                            anchors.centerIn: parent
-                            text: (model.name && model.name.length > 0) ? model.name.charAt(0).toUpperCase() : "A"
-                            font.pixelSize: Math.min(28, parent.width * 0.5)
-                            color: Theme.primary
-                            font.weight: Font.Bold
-                        }
-                    }
-                }
-
-                StyledText {
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    width: resultsGrid.cellWidth - 12
-                    text: model.name || ""
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.surfaceText
-                    font.weight: Font.Medium
-                    elide: Text.ElideRight
-                    horizontalAlignment: Text.AlignHCenter
-                    maximumLineCount: 1
-                    wrapMode: Text.NoWrap
-                }
-            }
-
-            MouseArea {
-                id: gridMouseArea
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                acceptedButtons: Qt.LeftButton | Qt.RightButton
-                z: 10
-                onEntered: () => {
-                               if (resultsGrid.hoverUpdatesSelection && !resultsGrid.keyboardNavigationActive)
-                               resultsGrid.currentIndex = index
-                           }
-                onPositionChanged: () => {
-                                       resultsGrid.keyboardNavigationReset()
-                                   }
-                onClicked: mouse => {
-                               if (mouse.button === Qt.LeftButton) {
-                                   resultsGrid.itemClicked(index, model)
-                               } 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)
-                               }
-                           }
+        delegate: AppLauncherGridDelegate {
+            gridView: resultsGrid
+            cellWidth: resultsGrid.cellWidth
+            cellHeight: resultsGrid.cellHeight
+            cellPadding: resultsGrid.cellPadding
+            minIconSize: resultsGrid.minIconSize
+            maxIconSize: resultsGrid.maxIconSize
+            iconSizeRatio: resultsGrid.iconSizeRatio
+            hoverUpdatesSelection: resultsGrid.hoverUpdatesSelection
+            keyboardNavigationActive: resultsGrid.keyboardNavigationActive
+            currentIndex: resultsGrid.currentIndex
+            onItemClicked: (idx, modelData) => resultsGrid.itemClicked(idx, modelData)
+            onItemRightClicked: (idx, modelData, mouseX, mouseY) => {
+                const modalPos = resultsContainer.parent.mapFromItem(null, mouseX, mouseY)
+                resultsGrid.itemRightClicked(idx, modelData, modalPos.x, modalPos.y)
             }
+            onKeyboardNavigationReset: resultsGrid.keyboardNavigationReset
         }
     }
 }

Modals/WifiPasswordModal.qml

@@ -7,6 +7,8 @@ import qs.Widgets
 DankModal {
     id: root
 
+    layerNamespace: "dms:wifi-password"
+
     property string wifiPasswordSSID: ""
     property string wifiPasswordInput: ""
     property string wifiUsernameInput: ""
@@ -21,6 +23,11 @@ DankModal {
     property var promptFields: []
     property string promptSetting: ""
 
+    property bool isVpnPrompt: false
+    property string connectionName: ""
+    property string vpnServiceType: ""
+    property string connectionType: ""
+
     function show(ssid) {
         wifiPasswordSSID = ssid
         wifiPasswordInput = ""
@@ -32,6 +39,10 @@ DankModal {
         promptReason = ""
         promptFields = []
         promptSetting = ""
+        isVpnPrompt = false
+        connectionName = ""
+        vpnServiceType = ""
+        connectionType = ""
 
         const network = NetworkService.wifiNetworks.find(n => n.ssid === ssid)
         requiresEnterprise = network?.enterprise || false
@@ -48,13 +59,18 @@ DankModal {
                      })
     }
 
-    function showFromPrompt(token, ssid, setting, fields, hints, reason) {
-        wifiPasswordSSID = ssid
+    function showFromPrompt(token, ssid, setting, fields, hints, reason, connType, connName, vpnService) {
         isPromptMode = true
         promptToken = token
         promptReason = reason
         promptFields = fields || []
         promptSetting = setting || "802-11-wireless-security"
+        connectionType = connType || "802-11-wireless"
+        connectionName = connName || ssid || ""
+        vpnServiceType = vpnService || ""
+
+        isVpnPrompt = (connectionType === "vpn" || connectionType === "wireguard")
+        wifiPasswordSSID = isVpnPrompt ? connectionName : ssid
 
         requiresEnterprise = setting === "802-1x"
 
@@ -163,7 +179,12 @@ DankModal {
                         spacing: Theme.spacingXS
 
                         StyledText {
-                            text: I18n.tr("Connect to Wi-Fi")
+                            text: {
+                                if (isVpnPrompt) {
+                                    return I18n.tr("Connect to VPN")
+                                }
+                                return I18n.tr("Connect to Wi-Fi")
+                            }
                             font.pixelSize: Theme.fontSizeLarge
                             color: Theme.surfaceText
                             font.weight: Font.Medium
@@ -175,6 +196,9 @@ DankModal {
 
                             StyledText {
                                 text: {
+                                    if (isVpnPrompt) {
+                                        return I18n.tr("Enter password for ") + wifiPasswordSSID
+                                    }
                                     const prefix = requiresEnterprise ? I18n.tr("Enter credentials for ") : I18n.tr("Enter password for ")
                                     return prefix + wifiPasswordSSID
                                 }
@@ -218,7 +242,7 @@ DankModal {
                     color: Theme.surfaceHover
                     border.color: usernameInput.activeFocus ? Theme.primary : Theme.outlineStrong
                     border.width: usernameInput.activeFocus ? 2 : 1
-                    visible: requiresEnterprise
+                    visible: requiresEnterprise && !isVpnPrompt
 
                     MouseArea {
                         anchors.fill: parent
@@ -271,7 +295,7 @@ DankModal {
                         textColor: Theme.surfaceText
                         text: wifiPasswordInput
                         echoMode: showPasswordCheckbox.checked ? TextInput.Normal : TextInput.Password
-                        placeholderText: requiresEnterprise ? I18n.tr("Password") : ""
+                        placeholderText: (requiresEnterprise && !isVpnPrompt) ? I18n.tr("Password") : ""
                         backgroundColor: "transparent"
                         focus: !requiresEnterprise
                         enabled: root.shouldBeVisible
@@ -281,7 +305,9 @@ DankModal {
                         onAccepted: () => {
                                         if (isPromptMode) {
                                             const secrets = {}
-                                            if (promptSetting === "802-11-wireless-security") {
+                                            if (isVpnPrompt) {
+                                                if (passwordInput.text) secrets["password"] = passwordInput.text
+                                            } else if (promptSetting === "802-11-wireless-security") {
                                                 secrets["psk"] = passwordInput.text
                                             } else if (promptSetting === "802-1x") {
                                                 if (usernameInput.text) secrets["identity"] = usernameInput.text
@@ -340,7 +366,7 @@ DankModal {
                 }
 
                 Rectangle {
-                    visible: requiresEnterprise
+                    visible: requiresEnterprise && !isVpnPrompt
                     width: parent.width
                     height: 50
                     radius: Theme.cornerRadius
@@ -372,7 +398,7 @@ DankModal {
                 }
 
                 Rectangle {
-                    visible: requiresEnterprise
+                    visible: requiresEnterprise && !isVpnPrompt
                     width: parent.width
                     height: 50
                     radius: Theme.cornerRadius
@@ -495,7 +521,12 @@ DankModal {
                             height: 36
                             radius: Theme.cornerRadius
                             color: connectArea.containsMouse ? Qt.darker(Theme.primary, 1.1) : Theme.primary
-                            enabled: requiresEnterprise ? (usernameInput.text.length > 0 && passwordInput.text.length > 0) : passwordInput.text.length > 0
+                            enabled: {
+                                if (isVpnPrompt) {
+                                    return passwordInput.text.length > 0
+                                }
+                                return requiresEnterprise ? (usernameInput.text.length > 0 && passwordInput.text.length > 0) : passwordInput.text.length > 0
+                            }
                             opacity: enabled ? 1 : 0.5
 
                             StyledText {
@@ -518,7 +549,9 @@ DankModal {
                                 onClicked: () => {
                                                if (isPromptMode) {
                                                    const secrets = {}
-                                                   if (promptSetting === "802-11-wireless-security") {
+                                                   if (isVpnPrompt) {
+                                                       if (passwordInput.text) secrets["password"] = passwordInput.text
+                                                   } else if (promptSetting === "802-11-wireless-security") {
                                                        secrets["psk"] = passwordInput.text
                                                    } else if (promptSetting === "802-1x") {
                                                        if (usernameInput.text) secrets["identity"] = usernameInput.text

Modules/AppDrawer/AppDrawerPopout.qml

@@ -13,6 +13,8 @@ import qs.Widgets
 DankPopout {
     id: appDrawerPopout
 
+    layerNamespace: "dms:app-launcher"
+
     property var triggerScreen: null
 
     // Setting to Exclusive, so virtual keyboards can send input to app drawer
@@ -59,7 +61,7 @@ DankPopout {
         gridColumns: 4
         onAppLaunched: appDrawerPopout.close()
         onViewModeSelected: function (mode) {
-            SettingsData.setAppLauncherViewMode(mode)
+            SettingsData.set("appLauncherViewMode", mode)
         }
     }
 
@@ -69,7 +71,7 @@ DankPopout {
 
             property alias searchField: searchField
 
-            color: Theme.popupBackground()
+            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
             radius: Theme.cornerRadius
             antialiasing: true
             smooth: true
@@ -208,8 +210,8 @@ DankPopout {
                         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)
-                        normalBorderColor: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
+                        backgroundColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                        normalBorderColor: Theme.outlineMedium
                         focusedBorderColor: Theme.primary
                         leftIconName: "search"
                         leftIconSize: Theme.iconSize
@@ -389,124 +391,27 @@ DankPopout {
                                 appLauncher.keyboardNavigationActive = false
                             }
 
-                            delegate: Rectangle {
-                                width: ListView.view.width
-                                height: appList.itemHeight
-                                radius: Theme.cornerRadius
-                                color: ListView.isCurrentItem ? Theme.primaryPressed : listMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceContainerHigh
-
-                                Row {
-                                    anchors.fill: parent
-                                    anchors.margins: Theme.spacingM
-                                    spacing: Theme.spacingL
-
-                                    Item {
-                                        width: appList.iconSize
-                                        height: appList.iconSize
-                                        anchors.verticalCenter: parent.verticalCenter
-                                        visible: model.icon !== undefined && model.icon !== ""
-
-                                        property string iconValue: model.icon || ""
-                                        property bool isMaterial: iconValue.indexOf("material:") === 0
-                                        property string materialName: isMaterial ? iconValue.substring(9) : ""
-
-                                        DankIcon {
-                                            anchors.centerIn: parent
-                                            name: parent.materialName
-                                            size: appList.iconSize - Theme.spacingM
-                                            color: Theme.surfaceText
-                                            visible: parent.isMaterial
-                                        }
-
-                                        IconImage {
-                                            id: listIconImg
-
-                                            anchors.fill: parent
-                                            anchors.margins: Theme.spacingXS
-                                            source: parent.isMaterial ? "" : Quickshell.iconPath(parent.iconValue, true)
-                                            smooth: true
-                                            asynchronous: true
-                                            visible: !parent.isMaterial && status === Image.Ready
-                                        }
-
-                                        Rectangle {
-                                            anchors.fill: parent
-                                            anchors.leftMargin: Theme.spacingS
-                                            anchors.rightMargin: Theme.spacingS
-                                            anchors.bottomMargin: Theme.spacingM
-                                            visible: !parent.isMaterial && listIconImg.status !== Image.Ready
-                                            color: Theme.surfaceLight
-                                            radius: Theme.cornerRadius
-                                            border.width: 0
-                                            border.color: Theme.primarySelected
-
-                                            StyledText {
-                                                anchors.centerIn: parent
-                                                text: (model.name && model.name.length > 0) ? model.name.charAt(0).toUpperCase() : "A"
-                                                font.pixelSize: appList.iconSize * 0.4
-                                                color: Theme.primary
-                                                font.weight: Font.Bold
-                                            }
-                                        }
-
-                                    }
-
-                                    Column {
-                                        anchors.verticalCenter: parent.verticalCenter
-                                        width: (model.icon !== undefined && model.icon !== "") ? (parent.width - appList.iconSize - Theme.spacingL) : parent.width
-                                        spacing: Theme.spacingXS
-
-                                        StyledText {
-                                            width: parent.width
-                                            text: model.name || ""
-                                            font.pixelSize: Theme.fontSizeLarge
-                                            color: Theme.surfaceText
-                                            font.weight: Font.Medium
-                                            elide: Text.ElideRight
-                                            wrapMode: Text.NoWrap
-                                            maximumLineCount: 1
-                                        }
-
-                                        StyledText {
-                                            width: parent.width
-                                            text: model.comment || "Application"
-                                            font.pixelSize: Theme.fontSizeMedium
-                                            color: Theme.surfaceVariantText
-                                            elide: Text.ElideRight
-                                            maximumLineCount: 1
-                                            visible: appList.showDescription && model.comment && model.comment.length > 0
-                                        }
-                                    }
-                                }
-
-                                MouseArea {
-                                    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
-                                    z: 10
-                                    onEntered: {
-                                        if (appList.hoverUpdatesSelection && !appList.keyboardNavigationActive)
-                                            appList.currentIndex = index
-                                    }
-                                    onPositionChanged: {
-                                        appList.keyboardNavigationReset()
-                                    }
-                                    onClicked: mouse => {
-                                                   if (mouse.button === Qt.LeftButton) {
-                                                       appList.itemClicked(index, model)
-                                                   } else if (mouse.button === Qt.RightButton) {
-                                                       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)
-                                                   }
-                                               }
+                            delegate: AppLauncherListDelegate {
+                                listView: appList
+                                itemHeight: appList.itemHeight
+                                iconSize: appList.iconSize
+                                showDescription: appList.showDescription
+                                hoverUpdatesSelection: appList.hoverUpdatesSelection
+                                keyboardNavigationActive: appList.keyboardNavigationActive
+                                isCurrentItem: ListView.isCurrentItem
+                                mouseAreaLeftMargin: Theme.spacingS
+                                mouseAreaRightMargin: Theme.spacingS
+                                mouseAreaBottomMargin: Theme.spacingM
+                                iconMargins: Theme.spacingXS
+                                iconFallbackLeftMargin: Theme.spacingS
+                                iconFallbackRightMargin: Theme.spacingS
+                                iconFallbackBottomMargin: Theme.spacingM
+                                onItemClicked: (idx, modelData) => appList.itemClicked(idx, modelData)
+                                onItemRightClicked: (idx, modelData, mouseX, mouseY) => {
+                                    const panelPos = contextMenu.parent.mapFromItem(null, mouseX, mouseY)
+                                    appList.itemRightClicked(idx, modelData, panelPos.x, panelPos.y)
                                 }
+                                onKeyboardNavigationReset: appList.keyboardNavigationReset
                             }
                         }
 
@@ -577,112 +482,30 @@ DankPopout {
                                 appLauncher.keyboardNavigationActive = false
                             }
 
-                            delegate: Rectangle {
-                                width: appGrid.cellWidth - appGrid.cellPadding
-                                height: appGrid.cellHeight - appGrid.cellPadding
-                                radius: Theme.cornerRadius
-                                color: appGrid.currentIndex === index ? Theme.primaryPressed : gridMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceContainerHigh
-
-                                Column {
-                                    anchors.centerIn: parent
-                                    spacing: Theme.spacingS
-
-                                    Item {
-                                        property int iconSize: Math.min(appGrid.maxIconSize, Math.max(appGrid.minIconSize, appGrid.cellWidth * appGrid.iconSizeRatio))
-
-                                        width: iconSize
-                                        height: iconSize
-                                        anchors.horizontalCenter: parent.horizontalCenter
-                                        visible: model.icon !== undefined && model.icon !== ""
-
-                                        property string iconValue: model.icon || ""
-                                        property bool isMaterial: iconValue.indexOf("material:") === 0
-                                        property string materialName: isMaterial ? iconValue.substring(9) : ""
-
-                                        DankIcon {
-                                            anchors.centerIn: parent
-                                            name: parent.materialName
-                                            size: parent.iconSize - Theme.spacingL
-                                            color: Theme.surfaceText
-                                            visible: parent.isMaterial
-                                        }
-
-                                        IconImage {
-                                            id: gridIconImg
-
-                                            anchors.fill: parent
-                            anchors.leftMargin: Theme.spacingS
-                            anchors.rightMargin: Theme.spacingS
-                            anchors.bottomMargin: Theme.spacingS
-                                            source: parent.isMaterial ? "" : Quickshell.iconPath(parent.iconValue, true)
-                                            smooth: true
-                                            asynchronous: true
-                                            visible: !parent.isMaterial && status === Image.Ready
-                                        }
-
-                                        Rectangle {
-                                            anchors.fill: parent
-                            anchors.leftMargin: Theme.spacingS
-                            anchors.rightMargin: Theme.spacingS
-                            anchors.bottomMargin: Theme.spacingS
-                                            visible: !parent.isMaterial && gridIconImg.status !== Image.Ready
-                                            color: Theme.surfaceLight
-                                            radius: Theme.cornerRadius
-                                            border.width: 0
-                                            border.color: Theme.primarySelected
-
-                                            StyledText {
-                                                anchors.centerIn: parent
-                                                text: (model.name && model.name.length > 0) ? model.name.charAt(0).toUpperCase() : "A"
-                                                font.pixelSize: Math.min(28, parent.width * 0.5)
-                                                color: Theme.primary
-                                                font.weight: Font.Bold
-                                            }
-                                        }
-                                    }
-
-                                    StyledText {
-                                        anchors.horizontalCenter: parent.horizontalCenter
-                                        width: appGrid.cellWidth - 12
-                                        text: model.name || ""
-                                        font.pixelSize: Theme.fontSizeSmall
-                                        color: Theme.surfaceText
-                                        font.weight: Font.Medium
-                                        elide: Text.ElideRight
-                                        horizontalAlignment: Text.AlignHCenter
-                                        maximumLineCount: 1
-                                        wrapMode: Text.NoWrap
-                                    }
-                                }
-
-                                MouseArea {
-                                    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
-                                    z: 10
-                                    onEntered: {
-                                        if (appGrid.hoverUpdatesSelection && !appGrid.keyboardNavigationActive)
-                                            appGrid.currentIndex = index
-                                    }
-                                    onPositionChanged: {
-                                        appGrid.keyboardNavigationReset()
-                                    }
-                                    onClicked: mouse => {
-                                                   if (mouse.button === Qt.LeftButton) {
-                                                       appGrid.itemClicked(index, model)
-                                                   } else if (mouse.button === Qt.RightButton) {
-                                                       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)
-                                                   }
-                                               }
+                            delegate: AppLauncherGridDelegate {
+                                gridView: appGrid
+                                cellWidth: appGrid.cellWidth
+                                cellHeight: appGrid.cellHeight
+                                cellPadding: appGrid.cellPadding
+                                minIconSize: appGrid.minIconSize
+                                maxIconSize: appGrid.maxIconSize
+                                iconSizeRatio: appGrid.iconSizeRatio
+                                hoverUpdatesSelection: appGrid.hoverUpdatesSelection
+                                keyboardNavigationActive: appGrid.keyboardNavigationActive
+                                currentIndex: appGrid.currentIndex
+                                mouseAreaLeftMargin: Theme.spacingS
+                                mouseAreaRightMargin: Theme.spacingS
+                                mouseAreaBottomMargin: Theme.spacingS
+                                iconFallbackLeftMargin: Theme.spacingS
+                                iconFallbackRightMargin: Theme.spacingS
+                                iconFallbackBottomMargin: Theme.spacingS
+                                iconMaterialSizeAdjustment: Theme.spacingL
+                                onItemClicked: (idx, modelData) => appGrid.itemClicked(idx, modelData)
+                                onItemRightClicked: (idx, modelData, mouseX, mouseY) => {
+                                    const panelPos = contextMenu.parent.mapFromItem(null, mouseX, mouseY)
+                                    appGrid.itemRightClicked(idx, modelData, panelPos.x, panelPos.y)
                                 }
+                                onKeyboardNavigationReset: appGrid.keyboardNavigationReset
                             }
                         }
                     }
@@ -719,7 +542,7 @@ DankPopout {
 
         background: Rectangle {
             radius: Theme.cornerRadius
-            color: Theme.popupBackground()
+            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
             border.width: 1
 

Modules/AppDrawer/CategorySelector.qml

@@ -42,7 +42,7 @@ Item {
                 height: root.itemHeight
                 width: root.getButtonWidth(itemCount, parent.width)
                 radius: Theme.cornerRadius
-                color: selectedCategory === modelData ? Theme.primary : Theme.surfaceContainerHigh
+                color: selectedCategory === modelData ? Theme.primary : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
 
                 StyledText {
                     anchors.centerIn: parent
@@ -81,7 +81,7 @@ Item {
                     height: root.itemHeight
                     width: root.getButtonWidth(itemCount, parent.width)
                     radius: Theme.cornerRadius
-                    color: selectedCategory === modelData ? Theme.primary : Theme.surfaceContainerHigh
+                    color: selectedCategory === modelData ? Theme.primary : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
                     border.color: selectedCategory === modelData ? selectedBorderColor : unselectedBorderColor
 
                     StyledText {
@@ -117,7 +117,7 @@ Item {
                     height: root.itemHeight
                     width: root.getButtonWidth(itemCount, parent.width)
                     radius: Theme.cornerRadius
-                    color: selectedCategory === modelData ? Theme.primary : Theme.surfaceContainerHigh
+                    color: selectedCategory === modelData ? Theme.primary : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
                     border.color: selectedCategory === modelData ? selectedBorderColor : unselectedBorderColor
 
                     StyledText {

Modules/BlurredWallpaperBackground.qml

@@ -0,0 +1,233 @@
+import QtQuick
+import QtQuick.Effects
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Widgets
+import Quickshell.Io
+import qs.Common
+import qs.Widgets
+import qs.Modules
+import qs.Services
+
+Variants {
+    model: {
+        if (SessionData.isGreeterMode) {
+            return Quickshell.screens
+        }
+        return SettingsData.getFilteredScreens("wallpaper")
+    }
+
+    PanelWindow {
+        id: blurWallpaperWindow
+
+        required property var modelData
+
+        screen: modelData
+
+        WlrLayershell.layer: WlrLayer.Background
+        WlrLayershell.namespace: "dms:blurwallpaper"
+        WlrLayershell.exclusionMode: ExclusionMode.Ignore
+
+        anchors.top: true
+        anchors.bottom: true
+        anchors.left: true
+        anchors.right: true
+
+        color: "transparent"
+
+        Item {
+            id: root
+            anchors.fill: parent
+
+            property string source: SessionData.getMonitorWallpaper(modelData.name) || ""
+            property bool isColorSource: source.startsWith("#")
+
+            Connections {
+                target: SessionData
+                function onIsLightModeChanged() {
+                    if (SessionData.perModeWallpaper) {
+                        var newSource = SessionData.getMonitorWallpaper(modelData.name) || ""
+                        if (newSource !== root.source) {
+                            root.source = newSource
+                        }
+                    }
+                }
+            }
+
+            function getFillMode(modeName) {
+                switch (modeName) {
+                case "Stretch":
+                    return Image.Stretch
+                case "Fit":
+                case "PreserveAspectFit":
+                    return Image.PreserveAspectFit
+                case "Fill":
+                case "PreserveAspectCrop":
+                    return Image.PreserveAspectCrop
+                case "Tile":
+                    return Image.Tile
+                case "TileVertically":
+                    return Image.TileVertically
+                case "TileHorizontally":
+                    return Image.TileHorizontally
+                case "Pad":
+                    return Image.Pad
+                default:
+                    return Image.PreserveAspectCrop
+                }
+            }
+
+            Component.onCompleted: {
+                if (source) {
+                    const formattedSource = source.startsWith("file://") ? source : "file://" + source
+                    setWallpaperImmediate(formattedSource)
+                }
+                isInitialized = true
+            }
+
+            property bool isInitialized: false
+            property real transitionProgress: 0
+            readonly property bool transitioning: transitionAnimation.running
+
+            onSourceChanged: {
+                const isColor = source.startsWith("#")
+
+                if (!source) {
+                    setWallpaperImmediate("")
+                } else if (isColor) {
+                    setWallpaperImmediate("")
+                } else {
+                    if (!isInitialized || !currentWallpaper.source) {
+                        setWallpaperImmediate(source.startsWith("file://") ? source : "file://" + source)
+                        isInitialized = true
+                    } else if (CompositorService.isNiri && SessionData.isSwitchingMode) {
+                        setWallpaperImmediate(source.startsWith("file://") ? source : "file://" + source)
+                    } else {
+                        changeWallpaper(source.startsWith("file://") ? source : "file://" + source)
+                    }
+                }
+            }
+
+            function setWallpaperImmediate(newSource) {
+                transitionAnimation.stop()
+                root.transitionProgress = 0.0
+                currentWallpaper.source = newSource
+                nextWallpaper.source = ""
+                currentWallpaper.opacity = 1
+                nextWallpaper.opacity = 0
+            }
+
+            function changeWallpaper(newPath) {
+                if (newPath === currentWallpaper.source)
+                    return
+                if (!newPath || newPath.startsWith("#"))
+                    return
+
+                if (root.transitioning) {
+                    transitionAnimation.stop()
+                    root.transitionProgress = 0
+                    currentWallpaper.source = nextWallpaper.source
+                    nextWallpaper.source = ""
+                }
+
+                if (!currentWallpaper.source) {
+                    setWallpaperImmediate(newPath)
+                    return
+                }
+
+                nextWallpaper.source = newPath
+
+                if (nextWallpaper.status === Image.Ready) {
+                    transitionAnimation.start()
+                }
+            }
+
+            Loader {
+                anchors.fill: parent
+                active: !root.source || root.isColorSource
+                asynchronous: true
+
+                sourceComponent: DankBackdrop {
+                    screenName: modelData.name
+                }
+            }
+
+            Image {
+                id: currentWallpaper
+                anchors.fill: parent
+                visible: false
+                opacity: 1
+                asynchronous: true
+                smooth: true
+                cache: true
+                fillMode: root.getFillMode(SessionData.isGreeterMode ? GreetdSettings.wallpaperFillMode : SettingsData.wallpaperFillMode)
+            }
+
+            Image {
+                id: nextWallpaper
+                anchors.fill: parent
+                visible: false
+                opacity: 0
+                asynchronous: true
+                smooth: true
+                cache: true
+                fillMode: root.getFillMode(SessionData.isGreeterMode ? GreetdSettings.wallpaperFillMode : SettingsData.wallpaperFillMode)
+
+                onStatusChanged: {
+                    if (status !== Image.Ready)
+                        return
+
+                    if (!root.transitioning) {
+                        transitionAnimation.start()
+                    }
+                }
+            }
+
+            Item {
+                id: blurredLayer
+                anchors.fill: parent
+
+                MultiEffect {
+                    anchors.fill: parent
+                    source: currentWallpaper
+                    blurEnabled: true
+                    blur: 0.8
+                    blurMax: 75
+                    opacity: 1 - root.transitionProgress
+                    autoPaddingEnabled: false
+                }
+
+                MultiEffect {
+                    anchors.fill: parent
+                    source: nextWallpaper
+                    blurEnabled: true
+                    blur: 0.8
+                    blurMax: 75
+                    opacity: root.transitionProgress
+                    autoPaddingEnabled: false
+                }
+            }
+
+            NumberAnimation {
+                id: transitionAnimation
+                target: root
+                property: "transitionProgress"
+                from: 0.0
+                to: 1.0
+                duration: 1000
+                easing.type: Easing.InOutCubic
+                onFinished: {
+                    Qt.callLater(() => {
+                                     if (nextWallpaper.source && nextWallpaper.status === Image.Ready && !nextWallpaper.source.toString().startsWith("#")) {
+                                         currentWallpaper.source = nextWallpaper.source
+                                     }
+                                     nextWallpaper.source = ""
+                                     currentWallpaper.opacity = 1
+                                     nextWallpaper.opacity = 0
+                                     root.transitionProgress = 0.0
+                                 })
+                }
+            }
+        }
+    }
+}

Modules/ControlCenter/BuiltinPlugins/CupsWidget.qml

@@ -0,0 +1,309 @@
+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: CupsService
+    }
+
+    ccWidgetIcon: CupsService.cupsAvailable && CupsService.getPrintersNum() > 0 ? "print" : "print_disabled"
+    ccWidgetPrimaryText: I18n.tr("Printers")
+    ccWidgetSecondaryText: {
+        if (CupsService.cupsAvailable && CupsService.getPrintersNum() > 0) {
+            return I18n.tr("Printers: ") + CupsService.getPrintersNum() + " - " + I18n.tr("Jobs: ") + CupsService.getTotalJobsNum()
+        } else {
+            if (!CupsService.cupsAvailable) {
+                return I18n.tr("Print Server not available")
+            } else {
+                return I18n.tr("No printer found")
+            }
+        }
+    }
+    ccWidgetIsActive: CupsService.cupsAvailable && CupsService.getTotalJobsNum() > 0
+
+    onCcWidgetToggled: {
+
+    }
+
+    ccDetailContent: Component {
+        Rectangle {
+            id: detailRoot
+            implicitHeight: detailColumn.implicitHeight + Theme.spacingM * 2
+            radius: Theme.cornerRadius
+            color: Theme.surfaceContainerHigh
+
+            Column {
+                visible: !CupsService.cupsAvailable || CupsService.getPrintersNum() == 0
+                anchors.centerIn: parent
+                spacing: Theme.spacingS
+
+                DankIcon {
+                    name: "print_disabled"
+                    size: 36
+                    color: Theme.surfaceVariantText
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+
+                StyledText {
+                    text: !CupsService.cupsAvailable ? I18n.tr("Print Server not available") : I18n.tr("No printer found")
+                    font.pixelSize: Theme.fontSizeMedium
+                    color: Theme.surfaceVariantText
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
+            
+            Column {
+                id: detailColumn
+                anchors.fill: parent
+                anchors.margins: Theme.spacingM
+                spacing: Theme.spacingS
+                visible: CupsService.cupsAvailable && CupsService.getPrintersNum() > 0
+                height: visible ? 120 : 0
+
+                RowLayout {
+                    spacing: Theme.spacingS
+                    width: parent.width
+
+                    DankDropdown {
+                        id: printerDropdown
+                        text: ""
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: parent.width - 180
+                        description: ""
+                        currentValue: {
+                            CupsService.getSelectedPrinter()
+                        }
+                        options: CupsService.getPrintersNames()
+                        onValueChanged: value => {
+                                            CupsService.setSelectedPrinter(value)
+                                        }
+                    }
+
+                    Column {
+                        spacing: Theme.spacingS
+
+                        StyledText {
+                            text: CupsService.getCurrentPrinterStatePrettyShort()
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceText
+                            font.weight: Font.Medium
+                            anchors.horizontalCenter: parent.horizontalCenter
+                        }
+
+                        Row {
+                            spacing: Theme.spacingM
+
+                            Rectangle {
+                                height: 24
+                                width: 80
+                                radius: 14
+                                color: printerStatusToggle.containsMouse ? Theme.errorHover : Theme.surfaceLight
+                                visible: true
+                                opacity: 1.0
+
+                                Row {
+                                    anchors.centerIn: parent
+                                    spacing: Theme.spacingXS
+
+                                    DankIcon {
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        name: CupsService.getCurrentPrinterState() === "stopped" ? "play_arrow" : "pause"
+                                        size: Theme.fontSizeSmall + 4
+                                        color: Theme.surfaceText
+                                    }
+
+                                    StyledText {
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        text: CupsService.getCurrentPrinterState() === "stopped" ? I18n.tr("Resume") : I18n.tr("Pause")
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceText
+                                        font.weight: Font.Medium
+                                    }
+                                }
+
+                                MouseArea {
+                                    id: printerStatusToggle
+                                    anchors.fill: parent
+                                    hoverEnabled: true
+                                    cursorShape: Qt.PointingHandCursor
+                                    enabled: true
+                                    onClicked: {
+                                        const selected = CupsService.getSelectedPrinter()
+                                        if (CupsService.getCurrentPrinterState() === "stopped") {
+                                            CupsService.resumePrinter(selected)
+                                        } else {
+                                            CupsService.pausePrinter(selected)
+                                        }
+                                    }
+                                }
+                            }
+
+                            Rectangle {
+                                height: 24
+                                width: 80
+                                radius: 14
+                                color: clearJobsToggle.containsMouse ? Theme.errorHover : Theme.surfaceLight
+                                visible: true
+                                opacity: 1.0
+
+                                Row {
+                                    anchors.centerIn: parent
+                                    spacing: Theme.spacingXS
+
+                                    DankIcon {
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        name: "delete_forever"
+                                        size: Theme.fontSizeSmall + 4
+                                        color: Theme.surfaceText
+                                    }
+
+                                    StyledText {
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        text: I18n.tr("Jobs")
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceText
+                                        font.weight: Font.Medium
+                                    }
+                                }
+
+                                MouseArea {
+                                    id: clearJobsToggle
+                                    anchors.fill: parent
+                                    hoverEnabled: true
+                                    cursorShape: Qt.PointingHandCursor
+                                    enabled: true
+                                    onClicked: {
+                                        const selected = CupsService.getSelectedPrinter()
+                                        CupsService.purgeJobs(selected)
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                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: 120
+                            visible: CupsService.getCurrentPrinterJobs().length === 0
+
+                            Column {
+                                anchors.centerIn: parent
+                                spacing: Theme.spacingS
+
+                                DankIcon {
+                                    name: "work"
+                                    size: 36
+                                    color: Theme.surfaceVariantText
+                                    anchors.horizontalCenter: parent.horizontalCenter
+                                }
+
+                                StyledText {
+                                    text: I18n.tr("The job queue of this printer is empty")
+                                    font.pixelSize: Theme.fontSizeMedium
+                                    color: Theme.surfaceVariantText
+                                    anchors.horizontalCenter: parent.horizontalCenter
+                                }
+                            }
+                        }
+
+                        Repeater {
+                            model: CupsService.getCurrentPrinterJobs()
+
+                            delegate: Rectangle {
+                                required property var modelData
+
+                                width: parent ? parent.width : 300
+                                height: 50
+                                radius: Theme.cornerRadius
+                                color: Theme.surfaceContainerHighest
+                                border.width: 1
+                                border.color: Theme.outlineLight
+                                opacity: 1.0
+
+                                RowLayout {
+                                    anchors.left: parent.left
+                                    anchors.right: parent.right
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    anchors.margins: Theme.spacingM
+                                    spacing: Theme.spacingM
+
+                                    DankIcon {
+                                        name: "docs"
+                                        size: Theme.iconSize + 2
+                                        color: Theme.surfaceText
+                                        Layout.alignment: Qt.AlignVCenter
+                                    }
+
+                                    Column {
+                                        spacing: 2
+                                        Layout.alignment: Qt.AlignVCenter
+                                        Layout.fillWidth: true
+
+                                        StyledText {
+                                            text: "[" + modelData.id + "] " + modelData.state + " (" + (modelData.size / 1024) + "kb)"
+                                            font.pixelSize: Theme.fontSizeMedium
+                                            color: Theme.surfaceText
+                                            elide: Text.ElideRight
+                                            wrapMode: Text.NoWrap
+                                            width: parent.width
+                                        }
+
+                                        StyledText {
+                                            text: {
+                                                var date = new Date(modelData.timeCreated)
+                                                return date.toLocaleString(Qt.locale(), Locale.ShortFormat)
+                                            }
+                                            font.pixelSize: Theme.fontSizeSmall
+                                            color: Theme.surfaceTextMedium
+                                        }
+                                    }
+
+                                    Item {
+                                        Layout.fillWidth: true
+                                    }
+                                }
+
+                                DankActionButton {
+                                    id: cancelJobButton
+                                    anchors.right: parent.right
+                                    anchors.rightMargin: Theme.spacingM
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    iconName: "delete"
+                                    buttonSize: 36
+                                    onClicked: {
+                                        CupsService.cancelJob(CupsService.getSelectedPrinter(), modelData.id)
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

Modules/ControlCenter/BuiltinPlugins/VpnWidget.qml

@@ -10,27 +10,24 @@ PluginComponent {
     id: root
 
     Ref {
-        service: VpnService
+        service: DMSNetworkService
     }
 
-    ccWidgetIcon: VpnService.isBusy ? "sync" : (VpnService.connected ? "vpn_lock" : "vpn_key_off")
+
+    ccWidgetIcon: DMSNetworkService.isBusy ? "sync" : (DMSNetworkService.connected ? "vpn_lock" : "vpn_key_off")
     ccWidgetPrimaryText: "VPN"
     ccWidgetSecondaryText: {
-        if (!VpnService.connected)
+        if (!DMSNetworkService.connected)
             return "Disconnected"
-        const names = VpnService.activeNames || []
+        const names = DMSNetworkService.activeNames || []
         if (names.length <= 1)
             return names[0] || "Connected"
         return names[0] + " +" + (names.length - 1)
     }
-    ccWidgetIsActive: VpnService.connected
+    ccWidgetIsActive: DMSNetworkService.connected
 
     onCcWidgetToggled: {
-        if (VpnService.connected) {
-            VpnService.disconnectAllActive()
-        } else if (VpnService.profiles.length > 0) {
-            VpnService.connect(VpnService.profiles[0].uuid)
-        }
+        DMSNetworkService.toggleVpn()
     }
 
     ccDetailContent: Component {
@@ -38,7 +35,7 @@ PluginComponent {
             id: detailRoot
             implicitHeight: detailColumn.implicitHeight + Theme.spacingM * 2
             radius: Theme.cornerRadius
-            color: Theme.surfaceContainerHigh
+            color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
 
             Column {
                 id: detailColumn
@@ -52,9 +49,9 @@ PluginComponent {
 
                     StyledText {
                         text: {
-                            if (!VpnService.connected)
+                            if (!DMSNetworkService.connected)
                                 return "Active: None"
-                            const names = VpnService.activeNames || []
+                            const names = DMSNetworkService.activeNames || []
                             if (names.length <= 1)
                                 return "Active: " + (names[0] || "VPN")
                             return "Active: " + names[0] + " +" + (names.length - 1)
@@ -62,19 +59,20 @@ PluginComponent {
                         font.pixelSize: Theme.fontSizeMedium
                         color: Theme.surfaceText
                         font.weight: Font.Medium
-                    }
-
-                    Item {
+                        elide: Text.ElideRight
+                        wrapMode: Text.NoWrap
                         Layout.fillWidth: true
+                        Layout.maximumWidth: parent.width - 120
                     }
 
                     Rectangle {
                         height: 28
                         radius: 14
                         color: discAllArea.containsMouse ? Theme.errorHover : Theme.surfaceLight
-                        visible: VpnService.connected
+                        visible: DMSNetworkService.connected
                         width: 110
                         Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+                        opacity: DMSNetworkService.isBusy ? 0.5 : 1.0
 
                         Row {
                             anchors.centerIn: parent
@@ -98,8 +96,9 @@ PluginComponent {
                             id: discAllArea
                             anchors.fill: parent
                             hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: VpnService.disconnectAllActive()
+                            cursorShape: DMSNetworkService.isBusy ? Qt.BusyCursor : Qt.PointingHandCursor
+                            enabled: !DMSNetworkService.isBusy
+                            onClicked: DMSNetworkService.disconnectAllActive()
                         }
                     }
                 }
@@ -123,7 +122,7 @@ PluginComponent {
 
                         Item {
                             width: parent.width
-                            height: VpnService.profiles.length === 0 ? 120 : 0
+                            height: DMSNetworkService.profiles.length === 0 ? 120 : 0
                             visible: height > 0
 
                             Column {
@@ -154,7 +153,7 @@ PluginComponent {
                         }
 
                         Repeater {
-                            model: VpnService.profiles
+                            model: DMSNetworkService.profiles
 
                             delegate: Rectangle {
                                 required property var modelData
@@ -162,9 +161,10 @@ PluginComponent {
                                 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
+                                color: rowArea.containsMouse ? Theme.primaryHoverLight : (DMSNetworkService.isActiveUuid(modelData.uuid) ? Theme.primaryPressed : Theme.surfaceLight)
+                                border.width: DMSNetworkService.isActiveUuid(modelData.uuid) ? 2 : 1
+                                border.color: DMSNetworkService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.outlineLight
+                                opacity: DMSNetworkService.isBusy ? 0.5 : 1.0
 
                                 RowLayout {
                                     anchors.left: parent.left
@@ -174,20 +174,24 @@ PluginComponent {
                                     spacing: Theme.spacingS
 
                                     DankIcon {
-                                        name: VpnService.isActiveUuid(modelData.uuid) ? "vpn_lock" : "vpn_key_off"
+                                        name: DMSNetworkService.isActiveUuid(modelData.uuid) ? "vpn_lock" : "vpn_key_off"
                                         size: Theme.iconSize - 4
-                                        color: VpnService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.surfaceText
+                                        color: DMSNetworkService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.surfaceText
                                         Layout.alignment: Qt.AlignVCenter
                                     }
 
                                     Column {
                                         spacing: 2
                                         Layout.alignment: Qt.AlignVCenter
+                                        Layout.fillWidth: true
 
                                         StyledText {
                                             text: modelData.name
                                             font.pixelSize: Theme.fontSizeMedium
-                                            color: VpnService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.surfaceText
+                                            color: DMSNetworkService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.surfaceText
+                                            elide: Text.ElideRight
+                                            wrapMode: Text.NoWrap
+                                            width: parent.width
                                         }
 
                                         StyledText {
@@ -233,8 +237,9 @@ PluginComponent {
                                     id: rowArea
                                     anchors.fill: parent
                                     hoverEnabled: true
-                                    cursorShape: Qt.PointingHandCursor
-                                    onClicked: VpnService.toggle(modelData.uuid)
+                                    cursorShape: DMSNetworkService.isBusy ? Qt.BusyCursor : Qt.PointingHandCursor
+                                    enabled: !DMSNetworkService.isBusy
+                                    onClicked: DMSNetworkService.toggle(modelData.uuid)
                                 }
                             }
                         }

Modules/ControlCenter/Components/ActionTile.qml

@@ -25,7 +25,7 @@ Rectangle {
 
     readonly property color _tileBgActive: Theme.primary
     readonly property color _tileBgInactive:
-        Theme.surfaceContainerHigh
+        Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
     readonly property color _tileRingActive:
         Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
 

Modules/ControlCenter/Components/DetailHost.qml

@@ -50,7 +50,7 @@ Item {
                     }
                     return w
                 })
-                SettingsData.setControlCenterWidgets(newWidgets)
+                SettingsData.set("controlCenterWidgets", newWidgets)
                 if (root.collapseCallback) {
                     root.collapseCallback()
                 }
@@ -74,7 +74,7 @@ Item {
                     }
                     return w
                 })
-                SettingsData.setControlCenterWidgets(newWidgets)
+                SettingsData.set("controlCenterWidgets", newWidgets)
                 if (root.collapseCallback) {
                     root.collapseCallback()
                 }
@@ -104,6 +104,12 @@ Item {
                 }
                 builtinInstance = widgetModel.vpnBuiltinInstance
             }
+            if (builtinId === "builtin_cups") {
+                if (widgetModel?.cupsLoader) {
+                    widgetModel.cupsLoader.active = true
+                }
+                builtinInstance = widgetModel.cupsBuiltinInstance
+            }
 
             if (!builtinInstance || !builtinInstance.ccDetailContent) {
                 return

Modules/ControlCenter/Components/DragDropDetailHost.qml

@@ -83,7 +83,7 @@ Item {
                         }
                         return w
                     })
-                    SettingsData.setControlCenterWidgets(newWidgets)
+                    SettingsData.set("controlCenterWidgets", newWidgets)
                 }
             }
         }

Modules/ControlCenter/Components/DragDropGrid.qml

@@ -219,9 +219,13 @@ Column {
                 {
                     if (NetworkService.wifiToggling)
                         return "sync"
-                    if (NetworkService.networkStatus === "ethernet")
+
+                    const status = NetworkService.networkStatus
+                    if (status === "ethernet")
                         return "settings_ethernet"
-                    if (NetworkService.networkStatus === "wifi")
+                    if (status === "vpn")
+                        return NetworkService.ethernetConnected ? "settings_ethernet" : NetworkService.wifiSignalIcon
+                    if (status === "wifi")
                         return NetworkService.wifiSignalIcon
                     if (NetworkService.wifiEnabled)
                         return "wifi_off"
@@ -266,9 +270,17 @@ Column {
                 {
                     if (NetworkService.wifiToggling)
                         return NetworkService.wifiEnabled ? "Disabling WiFi..." : "Enabling WiFi..."
-                    if (NetworkService.networkStatus === "ethernet")
+
+                    const status = NetworkService.networkStatus
+                    if (status === "ethernet")
                         return "Ethernet"
-                    if (NetworkService.networkStatus === "wifi" && NetworkService.currentWifiSSID)
+                    if (status === "vpn") {
+                        if (NetworkService.ethernetConnected)
+                            return "Ethernet"
+                        if (NetworkService.wifiConnected && NetworkService.currentWifiSSID)
+                            return NetworkService.currentWifiSSID
+                    }
+                    if (status === "wifi" && NetworkService.currentWifiSSID)
                         return NetworkService.currentWifiSSID
                     if (NetworkService.wifiEnabled)
                         return "Not connected"
@@ -298,9 +310,17 @@ Column {
                 {
                     if (NetworkService.wifiToggling)
                         return "Please wait..."
-                    if (NetworkService.networkStatus === "ethernet")
+
+                    const status = NetworkService.networkStatus
+                    if (status === "ethernet")
                         return "Connected"
-                    if (NetworkService.networkStatus === "wifi")
+                    if (status === "vpn") {
+                        if (NetworkService.ethernetConnected)
+                            return "Connected"
+                        if (NetworkService.wifiConnected)
+                            return NetworkService.wifiSignalStrength > 0 ? NetworkService.wifiSignalStrength + "%" : "Connected"
+                    }
+                    if (status === "wifi")
                         return NetworkService.wifiSignalStrength > 0 ? NetworkService.wifiSignalStrength + "%" : "Connected"
                     if (NetworkService.wifiEnabled)
                         return "Select network"
@@ -332,7 +352,10 @@ Column {
                         return "Select device"
                     if (AudioService.sink.audio.muted)
                         return "Muted"
-                    return Math.round(AudioService.sink.audio.volume * 100) + "%"
+                    const volume = AudioService.sink.audio.volume
+                    if (typeof volume !== "number" || isNaN(volume))
+                        return "0%"
+                    return Math.round(volume * 100) + "%"
                 }
                 case "audioInput":
                 {
@@ -340,7 +363,10 @@ Column {
                         return "Select device"
                     if (AudioService.source.audio.muted)
                         return "Muted"
-                    return Math.round(AudioService.source.audio.volume * 100) + "%"
+                    const volume = AudioService.source.audio.volume
+                    if (typeof volume !== "number" || isNaN(volume))
+                        return "0%"
+                    return Math.round(volume * 100) + "%"
                 }
                 default:
                     return widgetDef?.description || ""
@@ -352,9 +378,13 @@ Column {
                 {
                     if (NetworkService.wifiToggling)
                         return false
-                    if (NetworkService.networkStatus === "ethernet")
+
+                    const status = NetworkService.networkStatus
+                    if (status === "ethernet")
                         return true
-                    if (NetworkService.networkStatus === "wifi")
+                    if (status === "vpn")
+                        return NetworkService.ethernetConnected || NetworkService.wifiConnected
+                    if (status === "wifi")
                         return true
                     return NetworkService.wifiEnabled
                 }
@@ -455,7 +485,7 @@ Column {
                 anchors.centerIn: parent
                 width: parent.width
                 height: 14
-                property color sliderTrackColor: Theme.surfaceContainerHigh
+                property color sliderTrackColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
             }
         }
     }
@@ -477,7 +507,7 @@ Column {
                 instanceId: widgetData.instanceId || ""
                 screenName: root.screenName
                 parentScreen: root.parentScreen
-                property color sliderTrackColor: Theme.surfaceContainerHigh
+                property color sliderTrackColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
 
                 onIconClicked: {
                     if (!root.editMode && DisplayService.devices && DisplayService.devices.length > 1) {
@@ -500,7 +530,7 @@ Column {
                 anchors.centerIn: parent
                 width: parent.width
                 height: 14
-                property color sliderTrackColor: Theme.surfaceContainerHigh
+                property color sliderTrackColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
             }
         }
     }
@@ -764,6 +794,12 @@ Column {
                     }
                     builtinInstance = Qt.binding(() => root.model?.vpnBuiltinInstance)
                 }
+                if (id === "builtin_cups") {
+                    if (root.model?.cupsLoader) {
+                        root.model.cupsLoader.active = true
+                    }
+                    builtinInstance = Qt.binding(() => root.model?.cupsBuiltinInstance)
+                }
             }
 
             sourceComponent: {
@@ -806,6 +842,9 @@ Column {
             onExpandClicked: {
                 if (root.editMode)
                     return
+                if (builtinInstance) {
+                    builtinInstance.ccWidgetExpanded()
+                }
                 root.expandClicked(widgetData, widgetIndex)
             }
         }
@@ -939,6 +978,9 @@ Column {
             onExpandClicked: {
                 if (root.editMode)
                     return
+                if (pluginInstance) {
+                    pluginInstance.ccWidgetExpanded()
+                }
                 root.expandClicked(widgetData, widgetIndex)
             }
         }

Modules/ControlCenter/Components/DragDropWidgetWrapper.qml

@@ -110,7 +110,7 @@ Item {
         copy[i] = copy[j];
         copy[j] = tmp;
 
-        SettingsData.setControlCenterWidgets(copy);
+        SettingsData.set("controlCenterWidgets", copy);
     }
 
     function snapToGrid() {
@@ -244,7 +244,7 @@ Item {
             var widgets = SettingsData.controlCenterWidgets.slice()
             if (widgetIndex >= 0 && widgetIndex < widgets.length) {
                 widgets[widgetIndex].width = newSize
-                SettingsData.setControlCenterWidgets(widgets)
+                SettingsData.set("controlCenterWidgets", widgets)
             }
         }
     }

Modules/ControlCenter/Components/EditControls.qml

@@ -76,7 +76,7 @@ Row {
                     width: 400 - Theme.spacingL * 2
                     height: 50
                     radius: Theme.cornerRadius
-                    color: widgetMouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceContainerHigh
+                    color: widgetMouseArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
                     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
                     border.width: 0
 

Modules/ControlCenter/Components/HeaderPane.qml

@@ -15,7 +15,7 @@ Rectangle {
 
     implicitHeight: 70
     radius: Theme.cornerRadius
-    color: Theme.surfaceContainerHigh
+    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                           Theme.outline.b, 0.08)
     border.width: 0

Modules/ControlCenter/ControlCenterPopout.qml

@@ -20,11 +20,14 @@ import "./utils/state.js" as StateUtils
 DankPopout {
     id: root
 
+    layerNamespace: "dms:control-center"
+
     property string expandedSection: ""
     property var triggerScreen: null
     property bool editMode: false
     property int expandedWidgetIndex: -1
     property var expandedWidgetData: null
+    property bool powerMenuOpen: powerMenuModalLoader?.item?.shouldBeVisible ?? false
 
     signal lockRequested
 
@@ -46,7 +49,7 @@ DankPopout {
         }
     }
 
-    readonly property color _containerBg: Theme.surfaceContainerHigh
+    readonly property color _containerBg: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
 
     function setTriggerPosition(x, y, width, section, screen) {
         StateUtils.setTriggerPosition(root, x, y, width, section, screen)
@@ -113,6 +116,21 @@ DankPopout {
             antialiasing: true
             smooth: true
 
+            Rectangle {
+                anchors.fill: parent
+                color: Qt.rgba(0, 0, 0, 0.6)
+                radius: parent.radius
+                visible: root.powerMenuOpen
+                z: 5000
+
+                Behavior on opacity {
+                    NumberAnimation {
+                        duration: 200
+                        easing.type: Easing.OutCubic
+                    }
+                }
+            }
+
             Column {
                 id: mainColumn
                 width: parent.width - Theme.spacingL * 2

Modules/ControlCenter/Details/AudioInputDetail.qml

@@ -14,7 +14,7 @@ Rectangle {
 
     implicitHeight: headerRow.height + (hasInputVolumeSliderInCC ? 0 : volumeSlider.height) + audioContent.height + Theme.spacingM
     radius: Theme.cornerRadius
-    color: Theme.surfaceContainerHigh
+    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
     border.width: 0
 
@@ -123,9 +123,11 @@ Rectangle {
             spacing: Theme.spacingS
 
             Repeater {
-                model: Pipewire.nodes.values.filter(node => {
-                    return node.audio && !node.isSink && !node.isStream
-                })
+                model: ScriptModel {
+                    values: Pipewire.nodes.values.filter(node => {
+                        return node.audio && !node.isSink && !node.isStream
+                    })
+                }
 
                 delegate: Rectangle {
                     required property var modelData
@@ -134,7 +136,7 @@ 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) : Theme.surfaceContainerHighest
+                    color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
                     border.color: modelData === AudioService.source ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
                     border.width: 0
 

Modules/ControlCenter/Details/AudioOutputDetail.qml

@@ -14,7 +14,7 @@ Rectangle {
 
     implicitHeight: headerRow.height + (!hasVolumeSliderInCC ? volumeSlider.height : 0) + audioContent.height + Theme.spacingM
     radius: Theme.cornerRadius
-    color: Theme.surfaceContainerHigh
+    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
     border.width: 0
 
@@ -128,9 +128,11 @@ Rectangle {
             spacing: Theme.spacingS
 
             Repeater {
-                model: Pipewire.nodes.values.filter(node => {
-                    return node.audio && node.isSink && !node.isStream
-                })
+                model: ScriptModel {
+                    values: Pipewire.nodes.values.filter(node => {
+                        return node.audio && node.isSink && !node.isStream
+                    })
+                }
 
                 delegate: Rectangle {
                     required property var modelData
@@ -139,7 +141,7 @@ 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) : Theme.surfaceContainerHighest
+                    color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
                     border.color: modelData === AudioService.sink ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
                     border.width: 0
 

Modules/ControlCenter/Details/BatteryDetail.qml

@@ -9,7 +9,7 @@ import qs.Widgets
 Rectangle {
     implicitHeight: contentColumn.implicitHeight + Theme.spacingL * 2
     radius: Theme.cornerRadius
-    color: Theme.surfaceContainerHigh
+    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
     border.width: 0
 
@@ -125,7 +125,7 @@ Rectangle {
                 width: (parent.width - Theme.spacingM) / 2
                 height: 64
                 radius: Theme.cornerRadius
-                color: Theme.surfaceContainerHighest
+                color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
                 border.width: 0
 
                 Column {
@@ -160,7 +160,7 @@ Rectangle {
                 width: (parent.width - Theme.spacingM) / 2
                 height: 64
                 radius: Theme.cornerRadius
-                color: Theme.surfaceContainerHighest
+                color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
                 border.width: 0
 
                 Column {

Modules/ControlCenter/Details/BluetoothCodecSelector.qml

@@ -206,7 +206,7 @@ Item {
                         radius: Theme.cornerRadius
                         color: {
                             if (modelData.name === currentCodec)
-                                return Theme.surfaceContainerHighest;
+                                return Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency);
                             else if (codecMouseArea.containsMouse)
                                 return Theme.surfaceHover;
                             else

Modules/ControlCenter/Details/BluetoothDetail.qml

@@ -12,7 +12,7 @@ Rectangle {
 
     implicitHeight: BluetoothService.adapter && BluetoothService.adapter.enabled ? headerRow.height + bluetoothContent.height + Theme.spacingM : headerRow.height
     radius: Theme.cornerRadius
-    color: Theme.surfaceContainerHigh
+    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
     border.width: 0
 
@@ -85,8 +85,8 @@ Rectangle {
             radius: 18
             color: {
                 if (!BluetoothService.adapter || !BluetoothService.adapter.enabled)
-                    return Theme.surfaceContainerHigh
-                return scanMouseArea.containsMouse ? Theme.surfaceContainerHigh : "transparent"
+                    return Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                return scanMouseArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : "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: 0
@@ -179,7 +179,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 Theme.surfaceContainerHighest
+                        return Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
                     }
                     border.color: {
                         if (modelData.state === BluetoothDeviceState.Connecting)
@@ -359,7 +359,7 @@ 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) : Theme.surfaceContainerHighest
+                    color: availableMouseArea.containsMouse && !isBusy ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
                     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
                     border.width: 0
                     opacity: (canConnect && !isBusy) ? 1 : 0.6
@@ -463,7 +463,7 @@ Rectangle {
         property var currentDevice: null
 
         background: Rectangle {
-            color: Theme.popupBackground()
+            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
             radius: Theme.cornerRadius
             border.width: 0
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)

Modules/ControlCenter/Details/BrightnessDetail.qml

@@ -47,6 +47,16 @@ Rectangle {
             }
         }
 
+        const backlight = DisplayService.devices.find(d => d.class === "backlight")
+        if (backlight) {
+            return backlight.name
+        }
+
+        const ddc = DisplayService.devices.find(d => d.class === "ddc")
+        if (ddc) {
+            return ddc.name
+        }
+
         return DisplayService.devices.length > 0 ? DisplayService.devices[0].name : ""
     }
 
@@ -75,12 +85,12 @@ Rectangle {
             pins[screenName] = currentDeviceName
         }
 
-        SettingsData.setBrightnessDevicePins(pins)
+        SettingsData.set("brightnessDevicePins", pins)
     }
 
     implicitHeight: brightnessContent.height + Theme.spacingM
     radius: Theme.cornerRadius
-    color: Theme.surfaceContainerHigh
+    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
     border.width: 0
 
@@ -131,7 +141,7 @@ Rectangle {
                 height: 40
                 visible: screenName && screenName.length > 0 && DisplayService.devices && DisplayService.devices.length > 1
                 radius: Theme.cornerRadius
-                color: Theme.surfaceContainerHighest
+                color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
 
                 Item {
                     anchors.fill: parent
@@ -200,106 +210,249 @@ Rectangle {
                     required property var modelData
                     required property int index
 
+                    property real deviceBrightness: {
+                        DisplayService.brightnessVersion
+                        return DisplayService.getDeviceBrightness(modelData.name)
+                    }
+
                     width: parent.width
-                    height: 80
+                    height: 100
                     radius: Theme.cornerRadius
-                    color: Theme.surfaceContainerHighest
+                    color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
                     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.fill: parent
+                        anchors.margins: Theme.spacingM
+                        spacing: Theme.spacingS
 
-                        Column {
-                            anchors.verticalCenter: parent.verticalCenter
-                            spacing: 2
+                        Item {
+                            width: parent.width
+                            height: Math.max(deviceIconColumn.height, deviceInfoColumn.height, exponentControls.height)
 
-                            DankIcon {
-                                name: {
-                                    const deviceClass = modelData.class || ""
-                                    const deviceName = modelData.name || ""
+                            Row {
+                                anchors.left: parent.left
+                                anchors.verticalCenter: parent.verticalCenter
+                                spacing: Theme.spacingM
 
-                                    if (deviceClass === "backlight" || deviceClass === "ddc") {
-                                        const brightness = DisplayService.getDeviceBrightness(modelData.name)
-                                        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"
+                                Column {
+                                    id: deviceIconColumn
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    spacing: 2
+
+                                    DankIcon {
+                                        name: {
+                                            const deviceClass = modelData.class || ""
+                                            const deviceName = modelData.name || ""
+
+                                            if (deviceClass === "backlight" || deviceClass === "ddc") {
+                                                if (deviceBrightness <= 33)
+                                                    return "brightness_low"
+                                                if (deviceBrightness <= 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: Math.round(deviceBrightness) + "%"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceText
+                                        anchors.horizontalCenter: parent.horizontalCenter
+                                    }
+                                }
+
+                                Column {
+                                    id: deviceInfoColumn
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    width: parent.parent.width - deviceIconColumn.width - exponentControls.width - Theme.spacingM * 3
+
+                                    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
                                     }
                                 }
-                                size: Theme.iconSize
-                                color: modelData.name === currentDeviceName ? Theme.primary : Theme.surfaceText
-                                anchors.horizontalCenter: parent.horizontalCenter
                             }
 
-                            StyledText {
-                                text: Math.round(DisplayService.getDeviceBrightness(modelData.name)) + "%"
-                                font.pixelSize: Theme.fontSizeSmall
-                                color: Theme.surfaceText
-                                anchors.horizontalCenter: parent.horizontalCenter
+                            Row {
+                                id: exponentControls
+                                width: 140
+                                height: 28
+                                anchors.right: parent.right
+                                anchors.verticalCenter: parent.verticalCenter
+                                spacing: Theme.spacingXS
+                                visible: SessionData.getBrightnessExponential(modelData.name)
+                                z: 1
+
+                                StyledRect {
+                                    width: 28
+                                    height: 28
+                                    radius: Theme.cornerRadius
+                                    color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                                    opacity: SessionData.getBrightnessExponent(modelData.name) > 1.0 ? 1.0 : 0.4
+
+                                    DankIcon {
+                                        anchors.centerIn: parent
+                                        name: "remove"
+                                        size: 14
+                                        color: Theme.surfaceText
+                                    }
+
+                                    StateLayer {
+                                        stateColor: Theme.primary
+                                        cornerRadius: parent.radius
+                                        enabled: SessionData.getBrightnessExponent(modelData.name) > 1.0
+                                        onClicked: {
+                                            const current = SessionData.getBrightnessExponent(modelData.name)
+                                            const newValue = Math.max(1.0, Math.round((current - 0.1) * 10) / 10)
+                                            SessionData.setBrightnessExponent(modelData.name, newValue)
+                                        }
+                                    }
+                                }
+
+                                StyledRect {
+                                    width: 50
+                                    height: 28
+                                    radius: Theme.cornerRadius
+                                    color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                                    border.width: 0
+
+                                    StyledText {
+                                        anchors.centerIn: parent
+                                        text: SessionData.getBrightnessExponent(modelData.name).toFixed(1)
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        font.weight: Font.Medium
+                                        color: Theme.primary
+                                    }
+                                }
+
+                                StyledRect {
+                                    width: 28
+                                    height: 28
+                                    radius: Theme.cornerRadius
+                                    color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                                    opacity: SessionData.getBrightnessExponent(modelData.name) < 2.5 ? 1.0 : 0.4
+
+                                    DankIcon {
+                                        anchors.centerIn: parent
+                                        name: "add"
+                                        size: 14
+                                        color: Theme.surfaceText
+                                    }
+
+                                    StateLayer {
+                                        stateColor: Theme.primary
+                                        cornerRadius: parent.radius
+                                        enabled: SessionData.getBrightnessExponent(modelData.name) < 2.5
+                                        onClicked: {
+                                            const current = SessionData.getBrightnessExponent(modelData.name)
+                                            const newValue = Math.min(2.5, Math.round((current + 0.1) * 10) / 10)
+                                            SessionData.setBrightnessExponent(modelData.name, newValue)
+                                        }
+                                    }
+                                }
                             }
                         }
 
-                        Column {
-                            anchors.verticalCenter: parent.verticalCenter
-                            width: parent.parent.width - parent.parent.anchors.leftMargin - parent.spacing - 50 - Theme.spacingM
+                        Rectangle {
+                            width: parent.width
+                            height: 24
+                            radius: height / 2
+                            color: SessionData.getBrightnessExponential(modelData.name) ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.surfaceText, 0.05)
 
-                            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
+                            Row {
+                                anchors.centerIn: parent
+                                spacing: 4
+
+                                DankIcon {
+                                    name: "show_chart"
+                                    size: 14
+                                    color: SessionData.getBrightnessExponential(modelData.name) ? Theme.primary : Theme.surfaceText
+                                    anchors.verticalCenter: parent.verticalCenter
+                                }
+
+                                StyledText {
+                                    text: SessionData.getBrightnessExponential(modelData.name) ? "Exponential" : "Linear"
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: SessionData.getBrightnessExponential(modelData.name) ? Theme.primary : Theme.surfaceText
+                                    anchors.verticalCenter: parent.verticalCenter
                                 }
-                                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
+                            MouseArea {
+                                anchors.fill: parent
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: {
+                                    const currentState = SessionData.getBrightnessExponential(modelData.name)
+                                    SessionData.setBrightnessExponential(modelData.name, !currentState)
                                 }
-                                font.pixelSize: Theme.fontSizeSmall
-                                color: Theme.surfaceVariantText
-                                elide: Text.ElideRight
-                                width: parent.width
                             }
                         }
                     }
 
                     MouseArea {
                         anchors.fill: parent
+                        anchors.bottomMargin: 28
+                        anchors.rightMargin: SessionData.getBrightnessExponential(modelData.name) ? 145 : 0
                         hoverEnabled: true
                         cursorShape: Qt.PointingHandCursor
                         onClicked: {
+                            if (screenName && screenName.length > 0 && modelData.name !== currentDeviceName) {
+                                const pins = JSON.parse(JSON.stringify(SettingsData.brightnessDevicePins || {}))
+                                if (pins[screenName]) {
+                                    delete pins[screenName]
+                                    SettingsData.set("brightnessDevicePins", pins)
+                                }
+                            }
                             currentDeviceName = modelData.name
                             deviceNameChanged(modelData.name)
                         }
                     }
-
                 }
             }
         }

Modules/ControlCenter/Details/DiskUsageDetail.qml

@@ -15,7 +15,7 @@ Rectangle {
 
     implicitHeight: diskContent.height + Theme.spacingM
     radius: Theme.cornerRadius
-    color: Theme.surfaceContainerHigh
+    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
     border.width: 0
 
@@ -78,7 +78,7 @@ Rectangle {
                     width: parent.width
                     height: 80
                     radius: Theme.cornerRadius
-                    color: Theme.surfaceContainerHighest
+                    color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
                     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
 

Modules/ControlCenter/Details/NetworkDetail.qml

@@ -17,7 +17,7 @@ Rectangle {
         return headerRow.height + wifiOffContent.height + Theme.spacingM
     }
     radius: Theme.cornerRadius
-    color: Theme.surfaceContainerHigh
+    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
     border.width: 0
 
@@ -34,6 +34,10 @@ Rectangle {
             return 1
         }
 
+        if (NetworkService.backend !== "networkmanager" || DMSService.apiVersion <= 10) {
+            return 1
+        }
+
         const pref = NetworkService.userPreference
         const status = NetworkService.networkStatus
         let index = 1
@@ -76,7 +80,7 @@ Rectangle {
         DankButtonGroup {
             id: preferenceControls
             anchors.verticalCenter: parent.verticalCenter
-            visible: DMSService.apiVersion >= 5
+            visible: NetworkService.backend === "networkmanager" && DMSService.apiVersion > 10
 
             model: ["Ethernet", "WiFi"]
             currentIndex: currentPreferenceIndex
@@ -196,7 +200,7 @@ Rectangle {
         anchors.bottom: parent.bottom
         anchors.margins: Theme.spacingM
         anchors.topMargin: Theme.spacingM
-        visible: currentPreferenceIndex === 0 && DMSService.apiVersion >= 5
+        visible: currentPreferenceIndex === 0 && NetworkService.backend === "networkmanager" && DMSService.apiVersion > 10
         contentHeight: wiredColumn.height
         clip: true
 
@@ -206,19 +210,20 @@ Rectangle {
             spacing: Theme.spacingS
 
             Repeater {
-                model: sortedNetworks
-
-                property var sortedNetworks: {
-                    const currentUuid = NetworkService.ethernetConnectionUuid
-                    const networks = NetworkService.wiredConnections
-                    let sorted = [...networks]
-                    sorted.sort((a, b) => {
-                        if (a.isActive && !b.isActive) return -1
-                        if (!a.isActive && b.isActive) return 1
-                        return a.id.localeCompare(b.id)
-                    })
-                    return sorted
+                model: ScriptModel {
+                    values: {
+                        const currentUuid = NetworkService.ethernetConnectionUuid
+                        const networks = NetworkService.wiredConnections
+                        let sorted = [...networks]
+                        sorted.sort((a, b) => {
+                            if (a.isActive && !b.isActive) return -1
+                            if (!a.isActive && b.isActive) return 1
+                            return a.id.localeCompare(b.id)
+                        })
+                        return sorted
+                    }
                 }
+
                 delegate: Rectangle {
                     required property var modelData
                     required property int index
@@ -226,7 +231,7 @@ Rectangle {
                     width: parent.width
                     height: 50
                     radius: Theme.cornerRadius
-                    color: wiredNetworkMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.surfaceContainerHighest
+                    color: wiredNetworkMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
                     border.color: Theme.primary
                     border.width: 0
 
@@ -306,7 +311,7 @@ Rectangle {
         property bool currentConnected: false
 
         background: Rectangle {
-            color: Theme.popupBackground()
+            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
             radius: Theme.cornerRadius
             border.width: 0
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
@@ -372,6 +377,9 @@ Rectangle {
         contentHeight: wifiColumn.height
         clip: true
 
+        property var frozenNetworks: []
+        property bool menuOpen: false
+
         Column {
             id: wifiColumn
             width: parent.width
@@ -399,19 +407,23 @@ Rectangle {
             }
 
             Repeater {
-                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 sorted
+                model: ScriptModel {
+                    values: {
+                        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
+                        })
+                        if (!wifiContent.menuOpen) {
+                            wifiContent.frozenNetworks = sorted
+                        }
+                        return wifiContent.menuOpen ? wifiContent.frozenNetworks : sorted
+                    }
                 }
+
                 delegate: Rectangle {
                     required property var modelData
                     required property int index
@@ -419,7 +431,7 @@ 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) : Theme.surfaceContainerHighest
+                    color: networkMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
                     border.color: modelData.ssid === NetworkService.currentWifiSSID ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
                     border.width: 0
 
@@ -490,11 +502,13 @@ Rectangle {
                             if (networkContextMenu.visible) {
                                 networkContextMenu.close()
                             } else {
+                                wifiContent.menuOpen = true
                                 networkContextMenu.currentSSID = modelData.ssid
                                 networkContextMenu.currentSecured = modelData.secured
                                 networkContextMenu.currentConnected = modelData.ssid === NetworkService.currentWifiSSID
                                 networkContextMenu.currentSaved = modelData.saved
                                 networkContextMenu.currentSignal = modelData.signal
+                                networkContextMenu.currentAutoconnect = modelData.autoconnect || false
                                 networkContextMenu.popup(optionsButton, -networkContextMenu.width + optionsButton.width, optionsButton.height + Theme.spacingXS)
                             }
                         }
@@ -537,9 +551,14 @@ Rectangle {
         property bool currentConnected: false
         property bool currentSaved: false
         property int currentSignal: 0
+        property bool currentAutoconnect: false
+
+        onClosed: {
+            wifiContent.menuOpen = false
+        }
 
         background: Rectangle {
-            color: Theme.popupBackground()
+            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
             radius: Theme.cornerRadius
             border.width: 0
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
@@ -602,6 +621,29 @@ Rectangle {
             }
         }
 
+        MenuItem {
+            text: networkContextMenu.currentAutoconnect ? I18n.tr("Disable Autoconnect") : I18n.tr("Enable Autoconnect")
+            height: (networkContextMenu.currentSaved || networkContextMenu.currentConnected) && DMSService.apiVersion > 13 ? 32 : 0
+            visible: (networkContextMenu.currentSaved || networkContextMenu.currentConnected) && DMSService.apiVersion > 13
+
+            contentItem: StyledText {
+                text: parent.text
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceText
+                leftPadding: Theme.spacingS
+                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: {
+                NetworkService.setWifiAutoconnect(networkContextMenu.currentSSID, !networkContextMenu.currentAutoconnect)
+            }
+        }
+
         MenuItem {
             text: I18n.tr("Forget Network")
             height: networkContextMenu.currentSaved || networkContextMenu.currentConnected ? 32 : 0

Modules/ControlCenter/Models/WidgetModel.qml

@@ -8,6 +8,7 @@ QtObject {
     id: root
 
     property var vpnBuiltinInstance: null
+    property var cupsBuiltinInstance: null
 
     property var vpnLoader: Loader {
         active: false
@@ -32,6 +33,41 @@ QtObject {
         }
     }
 
+    property var cupsLoader: Loader {
+        active: false
+        sourceComponent: Component {
+            CupsWidget {}
+        }
+
+        onItemChanged: {
+            root.cupsBuiltinInstance = item
+            if (item && !DMSService.activeSubscriptions.includes("cups") && !DMSService.activeSubscriptions.includes("all")) {
+                DMSService.addSubscription("cups")
+            }
+        }
+
+        onActiveChanged: {
+            if (!active) {
+                if (DMSService.activeSubscriptions.includes("cups")) {
+                    DMSService.removeSubscription("cups")
+                }
+                root.cupsBuiltinInstance = null
+            }
+        }
+
+        Connections {
+            target: SettingsData
+            function onControlCenterWidgetsChanged() {
+                const widgets = SettingsData.controlCenterWidgets || []
+                const hasCupsWidget = widgets.some(w => w.id === "builtin_cups")
+                if (!hasCupsWidget && cupsLoader.active) {
+                    console.log("CupsWidget: No CUPS widget in control center, deactivating loader")
+                    cupsLoader.active = false
+                }
+            }
+        }
+    }
+
     readonly property var coreWidgetDefinitions: [{
             "id": "nightMode",
             "text": "Night Mode",
@@ -143,8 +179,17 @@ QtObject {
             "description": "VPN connections",
             "icon": "vpn_key",
             "type": "builtin_plugin",
-            "enabled": VpnService.available,
-            "warning": !VpnService.available ? "VPN not available" : undefined,
+            "enabled": DMSNetworkService.available,
+            "warning": !DMSNetworkService.available ? "VPN not available" : undefined,
+            "isBuiltinPlugin": true
+        }, {
+            "id": "builtin_cups",
+            "text": "Printers",
+            "description": "Print Server Management",
+            "icon": "Print",
+            "type": "builtin_plugin",
+            "enabled": CupsService.available,
+            "warning": !CupsService.available ? "CUPS not available" : undefined,
             "isBuiltinPlugin": true
         }]
 

Modules/ControlCenter/PowerMenu.qml

@@ -46,7 +46,7 @@ PanelWindow {
         height: 320 // Fixed height to prevent cropping
         x: Math.max(Theme.spacingL, parent.width - width - Theme.spacingL)
         y: Theme.barHeight + Theme.spacingXS
-        color: Theme.popupBackground()
+        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
         radius: Theme.cornerRadius
         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                               Theme.outline.b, 0.08)

Modules/ControlCenter/Widgets/AudioInputPill.qml

@@ -1,63 +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
-
-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"
-    }
-
-    isActive: defaultSource && !defaultSource.audio.muted
-
-    primaryText: {
-        if (!defaultSource) {
-            return "No input device"
-        }
-        return defaultSource.description || "Audio Input"
-    }
-
-    secondaryText: {
-        if (!defaultSource) {
-            return "Select device"
-        }
-        if (defaultSource.audio.muted) {
-            return "Muted"
-        }
-        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
-        let currentVolume = defaultSource.audio.volume * 100
-        let newVolume
-        if (delta > 0)
-            newVolume = Math.min(100, currentVolume + 5)
-        else
-            newVolume = Math.max(0, currentVolume - 5)
-        defaultSource.audio.muted = false
-        defaultSource.audio.volume = newVolume / 100
-        wheelEvent.accepted = true
-    }
-}

Modules/ControlCenter/Widgets/AudioOutputPill.qml

@@ -1,66 +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
-
-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"
-        return "volume_up"
-    }
-
-    isActive: defaultSink && !defaultSink.audio.muted
-
-    primaryText: {
-        if (!defaultSink) {
-            return "No output device"
-        }
-        return defaultSink.description || "Audio Output"
-    }
-
-    secondaryText: {
-        if (!defaultSink) {
-            return "Select device"
-        }
-        if (defaultSink.audio.muted) {
-            return "Muted"
-        }
-        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
-        let currentVolume = defaultSink.audio.volume * 100
-        let newVolume
-        if (delta > 0)
-            newVolume = Math.min(100, currentVolume + 5)
-        else
-            newVolume = Math.max(0, currentVolume - 5)
-        defaultSink.audio.muted = false
-        defaultSink.audio.volume = newVolume / 100
-        AudioService.volumeChanged()
-        wheelEvent.accepted = true
-    }
-}

Modules/ControlCenter/Widgets/AudioSliderRow.qml

@@ -68,7 +68,7 @@ Row {
         unit: "%"
         valueOverride: actualVolumePercent
         thumbOutlineColor: Theme.surfaceContainer
-        trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Theme.surfaceContainerHigh
+        trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
         onSliderValueChanged: function(newValue) {
             if (defaultSink) {
                 defaultSink.audio.volume = newValue / 100.0

Modules/ControlCenter/Widgets/BrightnessSliderRow.qml

@@ -13,7 +13,7 @@ Row {
     property string screenName: ""
     property var parentScreen: null
 
-    signal iconClicked()
+    signal iconClicked
 
     height: 40
     spacing: 0
@@ -36,13 +36,27 @@ Row {
 
         if (deviceName && deviceName.length > 0) {
             const found = DisplayService.devices.find(dev => dev.name === deviceName)
-            return found ? found.name : ""
+            if (found) {
+                return found.name
+            }
         }
 
         const currentDeviceName = DisplayService.currentDevice
         if (currentDeviceName) {
             const found = DisplayService.devices.find(dev => dev.name === currentDeviceName)
-            return found ? found.name : ""
+            if (found) {
+                return found.name
+            }
+        }
+
+        const backlight = DisplayService.devices.find(d => d.class === "backlight")
+        if (backlight) {
+            return backlight.name
+        }
+
+        const ddc = DisplayService.devices.find(d => d.class === "ddc")
+        if (ddc) {
+            return ddc.name
         }
 
         return DisplayService.devices.length > 0 ? DisplayService.devices[0].name : ""
@@ -57,6 +71,7 @@ Row {
     }
 
     property real targetBrightness: {
+        DisplayService.brightnessVersion
         if (!targetDeviceName) {
             return 0
         }
@@ -69,9 +84,7 @@ Row {
         height: Theme.iconSize + Theme.spacingS * 2
         anchors.verticalCenter: parent.verticalCenter
         radius: (Theme.iconSize + Theme.spacingS * 2) / 2
-        color: iconArea.containsMouse
-               ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
-               : Theme.withAlpha(Theme.primary, 0)
+        color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.primary, 0)
 
         MouseArea {
             id: iconArea
@@ -112,8 +125,10 @@ Row {
 
                     if (targetDevice.class === "backlight" || targetDevice.class === "ddc") {
                         const brightness = targetBrightness
-                        if (brightness <= 33) return "brightness_low"
-                        if (brightness <= 66) return "brightness_medium"
+                        if (brightness <= 33)
+                            return "brightness_low"
+                        if (brightness <= 66)
+                            return "brightness_medium"
                         return "brightness_high"
                     } else if (targetDevice.name.includes("kbd")) {
                         return "keyboard"
@@ -131,16 +146,39 @@ Row {
         anchors.verticalCenter: parent.verticalCenter
         width: parent.width - (Theme.iconSize + Theme.spacingS * 2)
         enabled: DisplayService.brightnessAvailable && targetDeviceName.length > 0
-        minimum: 1
-        maximum: 100
+        minimum: {
+            if (!targetDevice) return 1
+            const isExponential = SessionData.getBrightnessExponential(targetDevice.id)
+            if (isExponential) {
+                return 1
+            }
+            return (targetDevice.class === "backlight" || targetDevice.class === "ddc") ? 1 : 0
+        }
+        maximum: {
+            if (!targetDevice) return 100
+            const isExponential = SessionData.getBrightnessExponential(targetDevice.id)
+            if (isExponential) {
+                return 100
+            }
+            return targetDevice.displayMax || 100
+        }
         value: targetBrightness
-        onSliderValueChanged: function(newValue) {
+        showValue: true
+        unit: {
+            if (!targetDevice) return "%"
+            const isExponential = SessionData.getBrightnessExponential(targetDevice.id)
+            if (isExponential) {
+                return "%"
+            }
+            return targetDevice.class === "ddc" ? "" : "%"
+        }
+        onSliderValueChanged: function (newValue) {
             if (DisplayService.brightnessAvailable && targetDeviceName) {
                 DisplayService.setBrightness(newValue, targetDeviceName, true)
             }
         }
         thumbOutlineColor: Theme.surfaceContainer
-        trackColor: Theme.surfaceContainerHigh
+        trackColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
     }
 
     Loader {
@@ -148,4 +186,4 @@ Row {
         active: false
         sourceComponent: DankTooltip {}
     }
-}
+}

Modules/ControlCenter/Widgets/CompactSlider.qml

@@ -20,7 +20,7 @@ Rectangle {
     width: parent ? parent.width : 200
     height: 60
     radius: Theme.cornerRadius
-    color: Theme.surfaceContainerHigh
+    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
     border.width: 0
     opacity: enabled ? 1.0 : 0.6

Modules/ControlCenter/Widgets/CompoundPill.qml

@@ -27,7 +27,7 @@ Rectangle {
         return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor)
     }
 
-    readonly property color _containerBg: Theme.surfaceContainerHigh
+    readonly property color _containerBg: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
 
     color: {
         const baseColor = bodyMouse.containsMouse ? Theme.widgetBaseHoverColor : _containerBg

Modules/ControlCenter/Widgets/InputAudioSliderRow.qml

@@ -66,7 +66,7 @@ Row {
         unit: "%"
         valueOverride: actualVolumePercent
         thumbOutlineColor: Theme.surfaceContainer
-        trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Theme.surfaceContainerHigh
+        trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
         onIsDraggingChanged: {
             AudioService.suppressOSD = isDragging
         }

Modules/ControlCenter/Widgets/SmallBatteryButton.qml

@@ -25,7 +25,7 @@ Rectangle {
     }
 
     readonly property color _tileBgActive: Theme.primary
-    readonly property color _tileBgInactive: Theme.surfaceContainerHigh
+    readonly property color _tileBgInactive: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
     readonly property color _tileRingActive:
         Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
     readonly property color _tileIconActive: Theme.primaryText

Modules/ControlCenter/Widgets/SmallToggleButton.qml

@@ -27,7 +27,7 @@ Rectangle {
     }
 
     readonly property color _tileBgActive: Theme.primary
-    readonly property color _tileBgInactive: Theme.surfaceContainerHigh
+    readonly property color _tileBgInactive: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
     readonly property color _tileRingActive:
         Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
     readonly property color _tileIconActive: Theme.primaryText

Modules/ControlCenter/Widgets/ToggleButton.qml

@@ -24,7 +24,7 @@ Rectangle {
     }
 
     readonly property color _tileBgActive: Theme.primary
-    readonly property color _tileBgInactive: Theme.surfaceContainerHigh
+    readonly property color _tileBgInactive: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
     readonly property color _tileRingActive:
         Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
 
@@ -42,7 +42,7 @@ Rectangle {
         return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor)
     }
 
-    readonly property color _containerBg: Theme.surfaceContainerHigh
+    readonly property color _containerBg: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
 
     Rectangle {
         anchors.fill: parent

Modules/ControlCenter/utils/widgets.js

@@ -21,7 +21,7 @@ function addWidget(widgetId) {
     }
 
     widgets.push(widget)
-    SettingsData.setControlCenterWidgets(widgets)
+    SettingsData.set("controlCenterWidgets", widgets)
 }
 
 function generateUniqueId() {
@@ -32,7 +32,7 @@ function removeWidget(index) {
     var widgets = SettingsData.controlCenterWidgets.slice()
     if (index >= 0 && index < widgets.length) {
         widgets.splice(index, 1)
-        SettingsData.setControlCenterWidgets(widgets)
+        SettingsData.set("controlCenterWidgets", widgets)
     }
 }
 
@@ -54,12 +54,12 @@ function toggleWidgetSize(index) {
             }
         }
 
-        SettingsData.setControlCenterWidgets(widgets)
+        SettingsData.set("controlCenterWidgets", widgets)
     }
 }
 
 function reorderWidgets(newOrder) {
-    SettingsData.setControlCenterWidgets(newOrder)
+    SettingsData.set("controlCenterWidgets", newOrder)
 }
 
 function moveWidget(fromIndex, toIndex) {
@@ -67,7 +67,7 @@ function moveWidget(fromIndex, toIndex) {
     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)
+        SettingsData.set("controlCenterWidgets", widgets)
     }
 }
 
@@ -82,9 +82,9 @@ function resetToDefault() {
         {"id": "nightMode", "enabled": true, "width": 50},
         {"id": "darkMode", "enabled": true, "width": 50}
     ]
-    SettingsData.setControlCenterWidgets(defaultWidgets)
+    SettingsData.set("controlCenterWidgets", defaultWidgets)
 }
 
 function clearAll() {
-    SettingsData.setControlCenterWidgets([])
+    SettingsData.set("controlCenterWidgets", [])
 }

Modules/DankBar/BarCanvas.qml

@@ -18,17 +18,7 @@ Item {
     anchors.topMargin: -(SettingsData.dankBarGothCornersEnabled && !axis.isVertical && axis.edge === "bottom" ? barWindow._wingR : 0)
     anchors.bottomMargin: -(SettingsData.dankBarGothCornersEnabled && !axis.isVertical && axis.edge === "top" ? barWindow._wingR : 0)
 
-    readonly property real dpr: {
-        if (CompositorService.isNiri && barWindow.screen) {
-            const niriScale = NiriService.displayScales[barWindow.screen.name]
-            if (niriScale !== undefined) return niriScale
-        }
-        if (CompositorService.isHyprland && barWindow.screen) {
-            const hyprlandMonitor = Hyprland.monitors.values.find(m => m.name === barWindow.screen.name)
-            if (hyprlandMonitor?.scale !== undefined) return hyprlandMonitor.scale
-        }
-        return barWindow.screen?.devicePixelRatio || 1
-    }
+    readonly property real dpr: CompositorService.getScreenScale(barWindow.screen)
 
     function requestRepaint() {
         debounceTimer.restart()
@@ -82,6 +72,12 @@ Item {
             function onSurfaceContainerChanged() { root.requestRepaint() }
         }
 
+        Connections {
+            target: SettingsData
+            function onDankBarGothCornerRadiusOverrideChanged() { root.requestRepaint() }
+            function onDankBarGothCornerRadiusValueChanged() { root.requestRepaint() }
+        }
+
         onPaint: {
             const ctx = getContext("2d")
             const W = barWindow.isVertical ? correctHeight : correctWidth
@@ -181,6 +177,12 @@ Item {
             function onSurfaceChanged() { root.requestRepaint() }
         }
 
+        Connections {
+            target: SettingsData
+            function onDankBarGothCornerRadiusOverrideChanged() { root.requestRepaint() }
+            function onDankBarGothCornerRadiusValueChanged() { root.requestRepaint() }
+        }
+
         onPaint: {
             const ctx = getContext("2d")
             const W = barWindow.isVertical ? correctHeight : correctWidth
@@ -288,6 +290,8 @@ Item {
             function onDankBarSpacingChanged() { root.requestRepaint() }
             function onDankBarSquareCornersChanged() { root.requestRepaint() }
             function onDankBarTransparencyChanged() { root.requestRepaint() }
+            function onDankBarGothCornerRadiusOverrideChanged() { root.requestRepaint() }
+            function onDankBarGothCornerRadiusValueChanged() { root.requestRepaint() }
         }
 
         onPaint: {

Modules/DankBar/CenterSection.qml

@@ -24,8 +24,7 @@ Item {
     property real totalSize: 0
 
     function updateLayout() {
-        const containerSize = isVertical ? height : width
-        if (containerSize <= 0 || !visible) {
+        if ((isVertical ? height : width) <= 0 || !visible) {
             return
         }
 
@@ -34,32 +33,58 @@ Item {
         totalSize = 0
 
         let configuredWidgets = 0
+        let configuredMiddleWidget = null
+        let configuredLeftWidget = null
+        let configuredRightWidget = null
+
         for (var i = 0; i < centerRepeater.count; i++) {
             const item = centerRepeater.itemAt(i)
             if (item && getWidgetVisible(item.widgetId)) {
                 configuredWidgets++
+            }
+        }
+
+        const isOddConfigured = configuredWidgets % 2 === 1
+        const configuredMiddlePos = Math.floor(configuredWidgets / 2)
+        const configuredLeftPos = isOddConfigured ? -1 : ((configuredWidgets / 2) - 1)
+        const configuredRightPos = isOddConfigured ? -1 : (configuredWidgets / 2)
+        let currentConfigIndex = 0
+
+        for (var i = 0; i < centerRepeater.count; i++) {
+            const item = centerRepeater.itemAt(i)
+            if (item && getWidgetVisible(item.widgetId)) {
+                if (isOddConfigured && currentConfigIndex === configuredMiddlePos && item.active && item.item) {
+                    configuredMiddleWidget = item.item
+                }
+                if (!isOddConfigured && currentConfigIndex === configuredLeftPos && item.active && item.item) {
+                    configuredLeftWidget = item.item
+                }
+                if (!isOddConfigured && currentConfigIndex === configuredRightPos && item.active && item.item) {
+                    configuredRightWidget = item.item
+                }
                 if (item.active && item.item) {
                     centerWidgets.push(item.item)
                     totalWidgets++
                     totalSize += isVertical ? item.item.height : item.item.width
                 }
+                currentConfigIndex++
             }
         }
 
+        if (totalWidgets === 0) {
+            return
+        }
+
         if (totalWidgets > 1) {
             totalSize += spacing * (totalWidgets - 1)
         }
 
-        positionWidgets(configuredWidgets)
+        positionWidgets(configuredWidgets, configuredMiddleWidget, configuredLeftWidget, configuredRightWidget)
     }
 
-    function positionWidgets(configuredWidgets) {
-        if (totalWidgets === 0 || (isVertical ? height : width) <= 0) {
-            return
-        }
-
+    function positionWidgets(configuredWidgets, configuredMiddleWidget, configuredLeftWidget, configuredRightWidget) {
         const parentCenter = (isVertical ? height : width) / 2
-        const isOdd = configuredWidgets % 2 === 1
+        const isOddConfigured = configuredWidgets % 2 === 1
 
         centerWidgets.forEach(widget => {
             if (isVertical) {
@@ -69,193 +94,169 @@ Item {
             }
         })
 
-        if (isOdd) {
-            const middleIndex = Math.floor(configuredWidgets / 2)
-            let currentActiveIndex = 0
-            let middleWidget = null
+        if (isOddConfigured && configuredMiddleWidget) {
+            const middleWidget = configuredMiddleWidget
+            const middleIndex = centerWidgets.indexOf(middleWidget)
+            const middleSize = isVertical ? middleWidget.height : middleWidget.width
 
-            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 (isVertical) {
+                middleWidget.y = parentCenter - (middleSize / 2)
+            } else {
+                middleWidget.x = parentCenter - (middleSize / 2)
+            }
+
+            let currentPos = isVertical ? middleWidget.y : middleWidget.x
+            for (var i = middleIndex - 1; i >= 0; i--) {
+                const size = isVertical ? centerWidgets[i].height : centerWidgets[i].width
+                currentPos -= (spacing + size)
+                if (isVertical) {
+                    centerWidgets[i].y = currentPos
+                } else {
+                    centerWidgets[i].x = currentPos
                 }
             }
 
-            if (middleWidget) {
-                const middleSize = isVertical ? middleWidget.height : middleWidget.width
+            currentPos = (isVertical ? middleWidget.y : middleWidget.x) + middleSize
+            for (var i = middleIndex + 1; i < totalWidgets; i++) {
+                currentPos += spacing
                 if (isVertical) {
-                    middleWidget.y = parentCenter - (middleSize / 2)
+                    centerWidgets[i].y = currentPos
                 } 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
+                    centerWidgets[i].x = currentPos
                 }
+                currentPos += isVertical ? centerWidgets[i].height : centerWidgets[i].width
             }
         } else {
-            let configuredLeftIndex = (configuredWidgets / 2) - 1
-            let configuredRightIndex = configuredWidgets / 2
-            const halfSpacing = spacing / 2
+            if (totalWidgets === 1) {
+                const widget = centerWidgets[0]
+                const size = isVertical ? widget.height : widget.width
+                if (isVertical) {
+                    widget.y = parentCenter - (size / 2)
+                } else {
+                    widget.x = parentCenter - (size / 2)
+                }
+                return
+            }
 
-            let leftWidget = null
-            let rightWidget = null
-            let leftWidgets = []
-            let rightWidgets = []
+            if (!configuredLeftWidget || !configuredRightWidget) {
+                if (totalWidgets % 2 === 1) {
+                    const middleIndex = Math.floor(totalWidgets / 2)
+                    const middleWidget = centerWidgets[middleIndex]
 
-            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
+                    if (!middleWidget) {
+                        return
+                    }
+
+                    const middleSize = isVertical ? middleWidget.height : middleWidget.width
+
+                    if (isVertical) {
+                        middleWidget.y = parentCenter - (middleSize / 2)
+                    } else {
+                        middleWidget.x = parentCenter - (middleSize / 2)
+                    }
+
+                    let currentPos = isVertical ? middleWidget.y : middleWidget.x
+                    for (var i = middleIndex - 1; i >= 0; i--) {
+                        const size = isVertical ? centerWidgets[i].height : centerWidgets[i].width
+                        currentPos -= (spacing + size)
+                        if (isVertical) {
+                            centerWidgets[i].y = currentPos
                         } else {
-                            rightWidgets.push(item.item)
+                            centerWidgets[i].x = currentPos
                         }
                     }
-                    currentConfigIndex++
+
+                    currentPos = (isVertical ? middleWidget.y : middleWidget.x) + middleSize
+                    for (var i = middleIndex + 1; i < totalWidgets; i++) {
+                        currentPos += spacing
+                        if (isVertical) {
+                            centerWidgets[i].y = currentPos
+                        } else {
+                            centerWidgets[i].x = currentPos
+                        }
+                        currentPos += isVertical ? centerWidgets[i].height : centerWidgets[i].width
+                    }
+                } else {
+                    const leftIndex = (totalWidgets / 2) - 1
+                    const rightIndex = totalWidgets / 2
+                    const fallbackLeft = centerWidgets[leftIndex]
+                    const fallbackRight = centerWidgets[rightIndex]
+
+                    if (!fallbackLeft || !fallbackRight) {
+                        return
+                    }
+
+                    const halfSpacing = spacing / 2
+                    const leftSize = isVertical ? fallbackLeft.height : fallbackLeft.width
+
+                    if (isVertical) {
+                        fallbackLeft.y = parentCenter - halfSpacing - leftSize
+                        fallbackRight.y = parentCenter + halfSpacing
+                    } else {
+                        fallbackLeft.x = parentCenter - halfSpacing - leftSize
+                        fallbackRight.x = parentCenter + halfSpacing
+                    }
+
+                    let currentPos = isVertical ? fallbackLeft.y : fallbackLeft.x
+                    for (var i = leftIndex - 1; i >= 0; i--) {
+                        const size = isVertical ? centerWidgets[i].height : centerWidgets[i].width
+                        currentPos -= (spacing + size)
+                        if (isVertical) {
+                            centerWidgets[i].y = currentPos
+                        } else {
+                            centerWidgets[i].x = currentPos
+                        }
+                    }
+
+                    currentPos = (isVertical ? fallbackRight.y + fallbackRight.height : fallbackRight.x + fallbackRight.width)
+                    for (var i = rightIndex + 1; i < totalWidgets; i++) {
+                        currentPos += spacing
+                        if (isVertical) {
+                            centerWidgets[i].y = currentPos
+                        } else {
+                            centerWidgets[i].x = currentPos
+                        }
+                        currentPos += isVertical ? centerWidgets[i].height : centerWidgets[i].width
+                    }
+                }
+                return
+            }
+
+            const leftWidget = configuredLeftWidget
+            const rightWidget = configuredRightWidget
+            const leftIndex = centerWidgets.indexOf(leftWidget)
+            const rightIndex = centerWidgets.indexOf(rightWidget)
+            const halfSpacing = spacing / 2
+            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 = leftIndex - 1; i >= 0; i--) {
+                const size = isVertical ? centerWidgets[i].height : centerWidgets[i].width
+                currentPos -= (spacing + size)
+                if (isVertical) {
+                    centerWidgets[i].y = currentPos
+                } else {
+                    centerWidgets[i].x = currentPos
                 }
             }
 
-            if (leftWidget && rightWidget) {
-                const leftSize = isVertical ? leftWidget.height : leftWidget.width
+            currentPos = (isVertical ? rightWidget.y + rightWidget.height : rightWidget.x + rightWidget.width)
+            for (var i = rightIndex + 1; i < totalWidgets; i++) {
+                currentPos += spacing
                 if (isVertical) {
-                    leftWidget.y = parentCenter - halfSpacing - leftSize
-                    rightWidget.y = parentCenter + halfSpacing
+                    centerWidgets[i].y = currentPos
                 } 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)
+                    centerWidgets[i].x = currentPos
                 }
+                currentPos += isVertical ? centerWidgets[i].height : centerWidgets[i].width
             }
         }
     }
@@ -372,9 +373,6 @@ Item {
                 }
                 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)
                 }

Modules/DankBar/DankBar.qml

@@ -4,6 +4,7 @@ import QtQuick.Effects
 import QtQuick.Shapes
 import Quickshell
 import Quickshell.Hyprland
+import Quickshell.I3
 import Quickshell.Io
 import Quickshell.Services.Mpris
 import Quickshell.Services.Notifications
@@ -24,6 +25,7 @@ Item {
 
     property alias barVariants: barVariants
     property var hyprlandOverviewLoader: null
+    property bool systemTrayMenuOpen: false
 
     function triggerControlCenterOnFocusedScreen() {
         let focusedScreenName = ""
@@ -31,6 +33,9 @@ Item {
             focusedScreenName = Hyprland.focusedWorkspace.monitor.name
         } else if (CompositorService.isNiri && NiriService.currentOutput) {
             focusedScreenName = NiriService.currentOutput
+        } else if (CompositorService.isSway) {
+            const focusedWs = I3.workspaces?.values?.find(ws => ws.focused === true)
+            focusedScreenName = focusedWs?.monitor?.name || ""
         }
 
         if (!focusedScreenName && barVariants.instances.length > 0) {
@@ -55,6 +60,9 @@ Item {
             focusedScreenName = Hyprland.focusedWorkspace.monitor.name
         } else if (CompositorService.isNiri && NiriService.currentOutput) {
             focusedScreenName = NiriService.currentOutput
+        } else if (CompositorService.isSway) {
+            const focusedWs = I3.workspaces?.values?.find(ws => ws.focused === true)
+            focusedScreenName = focusedWs?.monitor?.name || ""
         }
 
         if (!focusedScreenName && barVariants.instances.length > 0) {
@@ -110,9 +118,9 @@ Item {
                     return
                 }
 
-                if (clockButtonRef && dankDashPopoutLoader.item.setTriggerPosition) {
-                    const globalPos = clockButtonRef.mapToGlobal(0, 0)
-                    const pos = SettingsData.getPopupTriggerPosition(globalPos, barWindow.screen, barWindow.effectiveBarThickness, clockButtonRef.width)
+                if (clockButtonRef && clockButtonRef.visualContent && dankDashPopoutLoader.item.setTriggerPosition) {
+                    const globalPos = clockButtonRef.visualContent.mapToGlobal(0, 0)
+                    const pos = SettingsData.getPopupTriggerPosition(globalPos, barWindow.screen, barWindow.effectiveBarThickness, clockButtonRef.visualWidth)
                     const section = clockButtonRef.section || "center"
                     dankDashPopoutLoader.item.setTriggerPosition(pos.x, pos.y, pos.width, section, barWindow.screen)
                 } else {
@@ -139,7 +147,7 @@ Item {
             }
 
             WlrLayershell.layer: dBarLayer
-            WlrLayershell.namespace: "quickshell:bar"
+            WlrLayershell.namespace: "dms:bar"
 
             property var modelData: item
 
@@ -168,24 +176,12 @@ Item {
             readonly property bool isVertical: axis.isVertical
 
             property bool gothCornersEnabled: SettingsData.dankBarGothCornersEnabled
-            property real wingtipsRadius: Theme.cornerRadius
+            property real wingtipsRadius: SettingsData.dankBarGothCornerRadiusOverride ? SettingsData.dankBarGothCornerRadiusValue : Theme.cornerRadius
             readonly property real _wingR: Math.max(0, wingtipsRadius)
             readonly property color _surfaceContainer: Theme.surfaceContainer
             readonly property real _backgroundAlpha: topBarCore?.backgroundTransparency ?? SettingsData.dankBarTransparency
             readonly property color _bgColor: Theme.withAlpha(_surfaceContainer, _backgroundAlpha)
-            readonly property real _dpr: {
-                if (CompositorService.isNiri && barWindow.screen) {
-                    const niriScale = NiriService.displayScales[barWindow.screen.name]
-                    if (niriScale !== undefined)
-                        return niriScale
-                }
-                if (CompositorService.isHyprland && barWindow.screen) {
-                    const hyprlandMonitor = Hyprland.monitors.values.find(m => m.name === barWindow.screen.name)
-                    if (hyprlandMonitor?.scale !== undefined)
-                        return hyprlandMonitor.scale
-                }
-                return (barWindow.screen?.devicePixelRatio) || 1
-            }
+            readonly property real _dpr: CompositorService.getScreenScale(barWindow.screen)
 
             property string screenName: modelData.name
             readonly property int notificationCount: NotificationService.notifications.length
@@ -200,11 +196,6 @@ Item {
             property var nativeInhibitor: null
 
             Component.onCompleted: {
-                const fonts = Qt.fontFamilies()
-                if (fonts.indexOf("Material Symbols Rounded") === -1) {
-                    ToastService.showError("Please install Material Symbols Rounded and Restart your Shell. See README.md for instructions")
-                }
-
                 if (SettingsData.forceStatusBarLayoutRefresh) {
                     SettingsData.forceStatusBarLayoutRefresh.connect(() => {
                                                                          Qt.callLater(() => {
@@ -454,7 +445,7 @@ Item {
                                                 return item.loader.item[item.prop]
                                             }
                                             return false
-                                        })
+                                        }) || root.systemTrayMenuOpen
                 }
 
                 Connections {
@@ -480,7 +471,10 @@ Item {
                 }
 
                 onHasActivePopoutChanged: {
-                    if (!hasActivePopout && autoHide && !topBarMouseArea.containsMouse) {
+                    if (hasActivePopout) {
+                        revealSticky = true
+                        revealHold.stop()
+                    } else if (autoHide && !topBarMouseArea.containsMouse) {
                         revealSticky = true
                         revealHold.restart()
                     }
@@ -541,6 +535,61 @@ Item {
                                 axis: axis
                             }
 
+                            MouseArea {
+                                id: scrollArea
+                                anchors.fill: parent
+                                acceptedButtons: Qt.NoButton
+                                propagateComposedEvents: true
+                                z: -1
+
+                                property real scrollAccumulator: 0
+                                property real touchpadThreshold: 500
+                                property bool actionInProgress: false
+
+                                Timer {
+                                    id: cooldownTimer
+                                    interval: 100
+                                    onTriggered: parent.actionInProgress = false
+                                }
+
+                                onWheel: wheel => {
+                                    if (actionInProgress) {
+                                        wheel.accepted = false
+                                        return
+                                    }
+
+                                    const deltaY = wheel.angleDelta.y
+                                    const deltaX = wheel.angleDelta.x
+
+                                    if (CompositorService.isNiri && Math.abs(deltaX) > Math.abs(deltaY)) {
+                                        topBarContent.switchApp(deltaX)
+                                        wheel.accepted = false
+                                        return
+                                    }
+
+                                    const isMouseWheel = Math.abs(deltaY) >= 120 && (Math.abs(deltaY) % 120) === 0
+                                    const direction = deltaY < 0 ? 1 : -1
+
+                                    if (isMouseWheel) {
+                                        topBarContent.switchWorkspace(direction)
+                                        actionInProgress = true
+                                        cooldownTimer.restart()
+                                    } else {
+                                        scrollAccumulator += deltaY
+
+                                        if (Math.abs(scrollAccumulator) >= touchpadThreshold) {
+                                            const touchDirection = scrollAccumulator < 0 ? 1 : -1
+                                            topBarContent.switchWorkspace(touchDirection)
+                                            scrollAccumulator = 0
+                                            actionInProgress = true
+                                            cooldownTimer.restart()
+                                        }
+                                    }
+
+                                    wheel.accepted = false
+                                }
+                            }
+
                             Item {
                                 id: topBarContent
                                 anchors.fill: parent
@@ -556,6 +605,163 @@ Item {
                                     componentMapRevision++
                                 }
 
+                                readonly property var sortedToplevels: {
+                                    return CompositorService.filterCurrentWorkspace(CompositorService.sortedToplevels, barWindow.screenName);
+                                }
+
+                                function getRealWorkspaces() {
+                                    if (CompositorService.isNiri) {
+                                        if (!barWindow.screenName || !SettingsData.workspacesPerMonitor) {
+                                            return NiriService.getCurrentOutputWorkspaceNumbers()
+                                        }
+                                        const workspaces = NiriService.allWorkspaces.filter(ws => ws.output === barWindow.screenName).map(ws => ws.idx + 1)
+                                        return workspaces.length > 0 ? workspaces : [1, 2]
+                                    } else if (CompositorService.isHyprland) {
+                                        const workspaces = Hyprland.workspaces?.values || []
+
+                                        if (!barWindow.screenName || !SettingsData.workspacesPerMonitor) {
+                                            const sorted = workspaces.slice().sort((a, b) => a.id - b.id)
+                                            const filtered = sorted.filter(ws => ws.id > -1)
+                                            return filtered.length > 0 ? filtered : [{"id": 1, "name": "1"}]
+                                        }
+
+                                        const monitorWorkspaces = workspaces.filter(ws => {
+                                            return ws.lastIpcObject && ws.lastIpcObject.monitor === barWindow.screenName && ws.id > -1
+                                        })
+
+                                        if (monitorWorkspaces.length === 0) {
+                                            return [{"id": 1, "name": "1"}]
+                                        }
+
+                                        return monitorWorkspaces.sort((a, b) => a.id - b.id)
+                                    } else if (CompositorService.isDwl) {
+                                        if (!DwlService.dwlAvailable) {
+                                            return [0]
+                                        }
+                                        if (SettingsData.dwlShowAllTags) {
+                                            return Array.from({length: DwlService.tagCount}, (_, i) => i)
+                                        }
+                                        return DwlService.getVisibleTags(barWindow.screenName)
+                                    } else if (CompositorService.isSway) {
+                                        const workspaces = I3.workspaces?.values || []
+                                        if (workspaces.length === 0) return [{"num": 1}]
+
+                                        if (!barWindow.screenName || !SettingsData.workspacesPerMonitor) {
+                                            return workspaces.slice().sort((a, b) => a.num - b.num)
+                                        }
+
+                                        const monitorWorkspaces = workspaces.filter(ws => ws.monitor?.name === barWindow.screenName)
+                                        return monitorWorkspaces.length > 0 ? monitorWorkspaces.sort((a, b) => a.num - b.num) : [{"num": 1}]
+                                    }
+                                    return [1]
+                                }
+
+                                function getCurrentWorkspace() {
+                                    if (CompositorService.isNiri) {
+                                        if (!barWindow.screenName || !SettingsData.workspacesPerMonitor) {
+                                            return NiriService.getCurrentWorkspaceNumber()
+                                        }
+                                        const activeWs = NiriService.allWorkspaces.find(ws => ws.output === barWindow.screenName && ws.is_active)
+                                        return activeWs ? activeWs.idx + 1 : 1
+                                    } else if (CompositorService.isHyprland) {
+                                        const monitors = Hyprland.monitors?.values || []
+                                        const currentMonitor = monitors.find(monitor => monitor.name === barWindow.screenName)
+                                        return currentMonitor?.activeWorkspace?.id ?? 1
+                                    } else if (CompositorService.isDwl) {
+                                        if (!DwlService.dwlAvailable) return 0
+                                        const outputState = DwlService.getOutputState(barWindow.screenName)
+                                        if (!outputState || !outputState.tags) return 0
+                                        const activeTags = DwlService.getActiveTags(barWindow.screenName)
+                                        return activeTags.length > 0 ? activeTags[0] : 0
+                                    } else if (CompositorService.isSway) {
+                                        if (!barWindow.screenName || !SettingsData.workspacesPerMonitor) {
+                                            const focusedWs = I3.workspaces?.values?.find(ws => ws.focused === true)
+                                            return focusedWs ? focusedWs.num : 1
+                                        }
+
+                                        const focusedWs = I3.workspaces?.values?.find(ws => ws.monitor?.name === barWindow.screenName && ws.focused === true)
+                                        return focusedWs ? focusedWs.num : 1
+                                    }
+                                    return 1
+                                }
+
+                                function switchWorkspace(direction) {
+                                    const realWorkspaces = getRealWorkspaces()
+                                    if (realWorkspaces.length < 2) {
+                                        return
+                                    }
+
+                                    if (CompositorService.isNiri) {
+                                        const currentWs = getCurrentWorkspace()
+                                        const currentIndex = realWorkspaces.findIndex(ws => ws === currentWs)
+                                        const validIndex = currentIndex === -1 ? 0 : currentIndex
+                                        const nextIndex = direction > 0 ? Math.min(validIndex + 1, realWorkspaces.length - 1) : Math.max(validIndex - 1, 0)
+
+                                        if (nextIndex !== validIndex) {
+                                            NiriService.switchToWorkspace(realWorkspaces[nextIndex] - 1)
+                                        }
+                                    } else if (CompositorService.isHyprland) {
+                                        const currentWs = getCurrentWorkspace()
+                                        const currentIndex = realWorkspaces.findIndex(ws => ws.id === currentWs)
+                                        const validIndex = currentIndex === -1 ? 0 : currentIndex
+                                        const nextIndex = direction > 0 ? Math.min(validIndex + 1, realWorkspaces.length - 1) : Math.max(validIndex - 1, 0)
+
+                                        if (nextIndex !== validIndex) {
+                                            Hyprland.dispatch(`workspace ${realWorkspaces[nextIndex].id}`)
+                                        }
+                                    } else if (CompositorService.isDwl) {
+                                        const currentTag = getCurrentWorkspace()
+                                        const currentIndex = realWorkspaces.findIndex(tag => tag === currentTag)
+                                        const validIndex = currentIndex === -1 ? 0 : currentIndex
+                                        const nextIndex = direction > 0 ? Math.min(validIndex + 1, realWorkspaces.length - 1) : Math.max(validIndex - 1, 0)
+
+                                        if (nextIndex !== validIndex) {
+                                            DwlService.switchToTag(barWindow.screenName, realWorkspaces[nextIndex])
+                                        }
+                                    } else if (CompositorService.isSway) {
+                                        const currentWs = getCurrentWorkspace()
+                                        const currentIndex = realWorkspaces.findIndex(ws => ws.num === currentWs)
+                                        const validIndex = currentIndex === -1 ? 0 : currentIndex
+                                        const nextIndex = direction > 0 ? Math.min(validIndex + 1, realWorkspaces.length - 1) : Math.max(validIndex - 1, 0)
+
+                                        if (nextIndex !== validIndex) {
+                                            try { I3.dispatch(`workspace number ${realWorkspaces[nextIndex].num}`) } catch(_){}
+                                        }
+                                    }
+                                }
+
+                                function switchApp(deltaY) {
+                                    const windows = sortedToplevels;
+                                    if (windows.length < 2) {
+                                        return;
+                                    }
+                                    let currentIndex = -1;
+                                    for (let i = 0; i < windows.length; i++) {
+                                        if (windows[i].activated) {
+                                            currentIndex = i;
+                                            break;
+                                        }
+                                    }
+                                    let nextIndex;
+                                    if (deltaY < 0) {
+                                        if (currentIndex === -1) {
+                                            nextIndex = 0;
+                                        } else {
+                                            nextIndex = currentIndex + 1;
+                                        }
+                                    } else {
+                                        if (currentIndex === -1) {
+                                            nextIndex = windows.length - 1;
+                                        } else {
+                                            nextIndex = currentIndex - 1;
+                                        }
+                                    }
+                                    const nextWindow = windows[nextIndex];
+                                    if (nextWindow) {
+                                        nextWindow.activate();
+                                    }
+                                }
+
                                 readonly property int availableWidth: width
                                 readonly property int launcherButtonWidth: 40
                                 readonly property int workspaceSwitcherWidth: 120
@@ -1239,13 +1445,19 @@ Item {
                                 Component {
                                     id: separatorComponent
 
-                                    Rectangle {
-                                        width: barWindow.isVertical ? barWindow.widgetThickness * 0.67 : 1
-                                        height: barWindow.isVertical ? 1 : barWindow.widgetThickness * 0.67
+                                    Item {
+                                        width: barWindow.isVertical ? parent.barThickness : 1
+                                        height: barWindow.isVertical ? 1 : parent.barThickness
                                         implicitWidth: width
                                         implicitHeight: height
-                                        color: Theme.outline
-                                        opacity: 0.3
+
+                                        Rectangle {
+                                            width: barWindow.isVertical ? parent.width * 0.6 : 1
+                                            height: barWindow.isVertical ? 1 : parent.height * 0.6
+                                            anchors.centerIn: parent
+                                            color: Theme.outline
+                                            opacity: 0.3
+                                        }
                                     }
                                 }
 

Modules/DankBar/Popouts/BatteryPopout.qml

@@ -11,6 +11,8 @@ import qs.Widgets
 DankPopout {
     id: root
 
+    layerNamespace: "dms:battery"
+
     property var triggerScreen: null
 
     function setTriggerPosition(x, y, width, section, screen) {
@@ -56,7 +58,7 @@ DankPopout {
             id: batteryContent
 
             implicitHeight: contentColumn.implicitHeight + Theme.spacingL * 2
-            color: Theme.popupBackground()
+            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
             radius: Theme.cornerRadius
             border.color: Theme.outlineMedium
             border.width: 0
@@ -304,7 +306,7 @@ DankPopout {
                         width: (parent.width - Theme.spacingM) / 2
                         height: 64
                         radius: Theme.cornerRadius
-                        color: Theme.surfaceContainerHigh
+                        color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
                         border.width: 0
 
                         Column {
@@ -339,7 +341,7 @@ DankPopout {
                         width: (parent.width - Theme.spacingM) / 2
                         height: 64
                         radius: Theme.cornerRadius
-                        color: Theme.surfaceContainerHigh
+                        color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
                         border.width: 0
 
                         Column {
@@ -379,7 +381,9 @@ DankPopout {
                     }
 
                     Repeater {
-                        model: BatteryService.batteries
+                        model: ScriptModel {
+                            values: BatteryService.batteries
+                        }
 
                         delegate: StyledRect {
                             required property var modelData
@@ -388,7 +392,7 @@ DankPopout {
                             width: parent.width
                             height: batteryColumn.implicitHeight + Theme.spacingM * 2
                             radius: Theme.cornerRadius
-                            color: Theme.surfaceContainer
+                            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
                             border.width: 0
 
                             Column {
@@ -458,7 +462,7 @@ DankPopout {
                                         width: (parent.width - Theme.spacingS * 2) / 3
                                         height: 48
                                         radius: Theme.cornerRadius
-                                        color: Theme.surfaceContainerHigh
+                                        color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
                                         border.width: 0
 
                                         Column {
@@ -495,7 +499,7 @@ DankPopout {
                                         width: (parent.width - Theme.spacingS * 2) / 3
                                         height: 48
                                         radius: Theme.cornerRadius
-                                        color: Theme.surfaceContainerHigh
+                                        color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
                                         border.width: 0
 
                                         Column {
@@ -524,7 +528,7 @@ DankPopout {
                                         width: (parent.width - Theme.spacingS * 2) / 3
                                         height: 48
                                         radius: Theme.cornerRadius
-                                        color: Theme.surfaceContainerHigh
+                                        color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
                                         border.width: 0
 
                                         Column {

Modules/DankBar/Popouts/VpnPopout.qml

@@ -13,8 +13,19 @@ import qs.Widgets
 DankPopout {
     id: root
 
+    layerNamespace: "dms:vpn"
+
     Ref {
-        service: VpnService
+        service: DMSNetworkService
+    }
+
+    property bool wasVisible: false
+
+    onShouldBeVisibleChanged: {
+        if (shouldBeVisible && !wasVisible) {
+            DMSNetworkService.getState()
+        }
+        wasVisible = shouldBeVisible
     }
 
     property var triggerScreen: null
@@ -42,7 +53,7 @@ DankPopout {
             id: content
 
             implicitHeight: contentColumn.height + Theme.spacingL * 2
-            color: Theme.popupBackground()
+            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
             radius: Theme.cornerRadius
             border.color: Theme.outlineMedium
             border.width: 0
@@ -143,7 +154,7 @@ DankPopout {
                     width: parent.width
                     implicitHeight: detailsColumn.implicitHeight + Theme.spacingM * 2
                     radius: Theme.cornerRadius
-                    color: Qt.rgba(Theme.surfaceContainerHigh.r, Theme.surfaceContainerHigh.g, Theme.surfaceContainerHigh.b, Theme.getContentBackgroundAlpha() * 0.6)
+                    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
                     border.color: Theme.outlineStrong
                     border.width: 0
                     clip: true
@@ -161,11 +172,11 @@ DankPopout {
 
                             StyledText {
                                 text: {
-                                    if (!VpnService.connected) {
+                                    if (!DMSNetworkService.connected) {
                                         return "Active: None";
                                     }
 
-                                    const names = VpnService.activeNames || [];
+                                    const names = DMSNetworkService.activeNames || [];
                                     if (names.length <= 1) {
                                         return "Active: " + (names[0] || "VPN");
                                     }
@@ -175,11 +186,10 @@ DankPopout {
                                 font.pixelSize: Theme.fontSizeMedium
                                 color: Theme.surfaceText
                                 font.weight: Font.Medium
-                            }
-
-                            Item {
+                                elide: Text.ElideRight
+                                wrapMode: Text.NoWrap
                                 Layout.fillWidth: true
-                                height: 1
+                                Layout.maximumWidth: parent.width - 140
                             }
 
                             // Removed Quick Connect for clarity
@@ -193,11 +203,12 @@ DankPopout {
                                 height: 28
                                 radius: 14
                                 color: discAllArea.containsMouse ? Theme.errorHover : Theme.surfaceLight
-                                visible: VpnService.connected
+                                visible: DMSNetworkService.connected
                                 width: 130
                                 Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
                                 border.width: 0
                                 border.color: Theme.outlineLight
+                                opacity: DMSNetworkService.isBusy ? 0.5 : 1.0
 
                                 Row {
                                     anchors.centerIn: parent
@@ -223,8 +234,9 @@ DankPopout {
 
                                     anchors.fill: parent
                                     hoverEnabled: true
-                                    cursorShape: Qt.PointingHandCursor
-                                    onClicked: VpnService.disconnectAllActive()
+                                    cursorShape: DMSNetworkService.isBusy ? Qt.BusyCursor : Qt.PointingHandCursor
+                                    enabled: !DMSNetworkService.isBusy
+                                    onClicked: DMSNetworkService.disconnectAllActive()
                                 }
 
                             }
@@ -251,7 +263,7 @@ DankPopout {
 
                                 Item {
                                     width: parent.width
-                                    height: VpnService.profiles.length === 0 ? 120 : 0
+                                    height: DMSNetworkService.profiles.length === 0 ? 120 : 0
                                     visible: height > 0
 
                                     Column {
@@ -284,7 +296,7 @@ DankPopout {
                                 }
 
                                 Repeater {
-                                    model: VpnService.profiles
+                                    model: DMSNetworkService.profiles
 
                                     delegate: Rectangle {
                                         required property var modelData
@@ -292,9 +304,10 @@ DankPopout {
                                         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
+                                        color: rowArea.containsMouse ? Theme.primaryHoverLight : (DMSNetworkService.isActiveUuid(modelData.uuid) ? Theme.primaryPressed : Theme.surfaceLight)
+                                        border.width: DMSNetworkService.isActiveUuid(modelData.uuid) ? 2 : 1
+                                        border.color: DMSNetworkService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.outlineLight
+                                        opacity: DMSNetworkService.isBusy ? 0.5 : 1.0
 
                                         RowLayout {
                                             anchors.left: parent.left
@@ -304,20 +317,24 @@ DankPopout {
                                             spacing: Theme.spacingS
 
                                             DankIcon {
-                                                name: VpnService.isActiveUuid(modelData.uuid) ? "vpn_lock" : "vpn_key_off"
+                                                name: DMSNetworkService.isActiveUuid(modelData.uuid) ? "vpn_lock" : "vpn_key_off"
                                                 size: Theme.iconSize - 4
-                                                color: VpnService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.surfaceText
+                                                color: DMSNetworkService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.surfaceText
                                                 Layout.alignment: Qt.AlignVCenter
                                             }
 
                                             Column {
                                                 spacing: 2
                                                 Layout.alignment: Qt.AlignVCenter
+                                                Layout.fillWidth: true
 
                                                 StyledText {
                                                     text: modelData.name
                                                     font.pixelSize: Theme.fontSizeMedium
-                                                    color: VpnService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.surfaceText
+                                                    color: DMSNetworkService.isActiveUuid(modelData.uuid) ? Theme.primary : Theme.surfaceText
+                                                    elide: Text.ElideRight
+                                                    wrapMode: Text.NoWrap
+                                                    width: parent.width
                                                 }
 
                                                 StyledText {
@@ -391,8 +408,9 @@ DankPopout {
 
                                             anchors.fill: parent
                                             hoverEnabled: true
-                                            cursorShape: Qt.PointingHandCursor
-                                            onClicked: VpnService.toggle(modelData.uuid)
+                                            cursorShape: DMSNetworkService.isBusy ? Qt.BusyCursor : Qt.PointingHandCursor
+                                            enabled: !DMSNetworkService.isBusy
+                                            onClicked: DMSNetworkService.toggle(modelData.uuid)
                                         }
 
                                     }

Modules/DankBar/Widgets/Battery.qml

@@ -50,7 +50,6 @@ BasePill {
                 StyledText {
                     text: BatteryService.batteryLevel.toString()
                     font.pixelSize: Theme.barTextSize(battery.barThickness)
-                    font.weight: Font.Medium
                     color: Theme.surfaceText
                     anchors.horizontalCenter: parent.horizontalCenter
                     visible: BatteryService.batteryAvailable
@@ -87,7 +86,6 @@ BasePill {
                 StyledText {
                     text: `${BatteryService.batteryLevel}%`
                     font.pixelSize: Theme.barTextSize(battery.barThickness)
-                    font.weight: Font.Medium
                     color: Theme.surfaceText
                     anchors.verticalCenter: parent.verticalCenter
                     visible: BatteryService.batteryAvailable
@@ -101,7 +99,6 @@ BasePill {
         y: -battery.topMargin
         width: battery.width + battery.leftMargin + battery.rightMargin
         height: battery.height + battery.topMargin + battery.bottomMargin
-        hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
         acceptedButtons: Qt.LeftButton
         onPressed: {

Modules/DankBar/Widgets/Clock.qml

@@ -37,9 +37,9 @@ BasePill {
                         }
                         font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.surfaceText
-                        font.weight: Font.Normal
                         width: 9
                         horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
                     }
 
                     StyledText {
@@ -54,9 +54,9 @@ BasePill {
                         }
                         font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.surfaceText
-                        font.weight: Font.Normal
                         width: 9
                         horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
                     }
                 }
 
@@ -68,18 +68,18 @@ BasePill {
                         text: String(systemClock?.date?.getMinutes()).padStart(2, '0').charAt(0)
                         font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.surfaceText
-                        font.weight: Font.Normal
                         width: 9
                         horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
                     }
 
                     StyledText {
                         text: String(systemClock?.date?.getMinutes()).padStart(2, '0').charAt(1)
                         font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.surfaceText
-                        font.weight: Font.Normal
                         width: 9
                         horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
                     }
                 }
 
@@ -92,18 +92,18 @@ BasePill {
                         text: String(systemClock?.date?.getSeconds()).padStart(2, '0').charAt(0)
                         font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.surfaceText
-                        font.weight: Font.Normal
                         width: 9
                         horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
                     }
 
                     StyledText {
                         text: String(systemClock?.date?.getSeconds()).padStart(2, '0').charAt(1)
                         font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.surfaceText
-                        font.weight: Font.Normal
                         width: 9
                         horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
                     }
                 }
 
@@ -134,9 +134,9 @@ BasePill {
                         }
                         font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.primary
-                        font.weight: Font.Light
                         width: 9
                         horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
                     }
 
                     StyledText {
@@ -149,9 +149,9 @@ BasePill {
                         }
                         font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.primary
-                        font.weight: Font.Light
                         width: 9
                         horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
                     }
                 }
 
@@ -169,9 +169,9 @@ BasePill {
                         }
                         font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.primary
-                        font.weight: Font.Light
                         width: 9
                         horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
                     }
 
                     StyledText {
@@ -184,9 +184,9 @@ BasePill {
                         }
                         font.pixelSize: Theme.barTextSize(root.barThickness)
                         color: Theme.primary
-                        font.weight: Font.Light
                         width: 9
                         horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignBottom
                     }
                 }
             }
@@ -198,28 +198,30 @@ BasePill {
                 spacing: Theme.spacingS
 
                 StyledText {
+                    id: timeText
                     text: {
                         return systemClock?.date?.toLocaleTimeString(Qt.locale(), SettingsData.getEffectiveTimeFormat())
                     }
                     font.pixelSize: Theme.barTextSize(root.barThickness)
                     color: Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.baseline: dateText.baseline
                 }
 
                 StyledText {
+                    id: middleDot
                     text: "•"
                     font.pixelSize: Theme.fontSizeSmall
                     color: Theme.outlineButton
-                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.baseline: dateText.baseline
                     visible: !SettingsData.clockCompactMode
                 }
 
                 StyledText {
+                    id: dateText
                     text: {
                         if (SettingsData.clockDateFormat && SettingsData.clockDateFormat.length > 0) {
                             return systemClock?.date?.toLocaleDateString(Qt.locale(), SettingsData.clockDateFormat)
                         }
-
                         return systemClock?.date?.toLocaleDateString(Qt.locale(), "ddd d")
                     }
                     font.pixelSize: Theme.barTextSize(root.barThickness)
@@ -241,7 +243,6 @@ BasePill {
         y: -root.topMargin
         width: root.width + root.leftMargin + root.rightMargin
         height: root.height + root.topMargin + root.bottomMargin
-        hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
         onPressed: {
             if (root.popoutTarget && root.popoutTarget.setTriggerPosition) {

Modules/DankBar/Widgets/ColorPicker.qml

@@ -27,7 +27,6 @@ BasePill {
     MouseArea {
         z: 1
         anchors.fill: parent
-        hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
         onPressed: {
             root.colorPickerRequested()

Modules/DankBar/Widgets/ControlCenterButton.qml

@@ -31,10 +31,15 @@ BasePill {
                             return "sync"
                         }
 
-                        if (NetworkService.networkStatus === "ethernet") {
+                        const status = NetworkService.networkStatus
+                        if (status === "ethernet") {
                             return "lan"
                         }
 
+                        if (status === "vpn") {
+                            return NetworkService.ethernetConnected ? "lan" : NetworkService.wifiSignalIcon
+                        }
+
                         return NetworkService.wifiSignalIcon
                     }
                     size: Theme.barIconSize(root.barThickness)
@@ -86,7 +91,6 @@ BasePill {
 
                     MouseArea {
                         anchors.fill: parent
-                        hoverEnabled: true
                         acceptedButtons: Qt.NoButton
                         onWheel: function(wheelEvent) {
                             let delta = wheelEvent.angleDelta.y
@@ -126,22 +130,27 @@ BasePill {
 
                     name: {
                         if (NetworkService.wifiToggling) {
-                            return "sync";
+                            return "sync"
                         }
 
-                        if (NetworkService.networkStatus === "ethernet") {
-                            return "lan";
+                        const status = NetworkService.networkStatus
+                        if (status === "ethernet") {
+                            return "lan"
                         }
 
-                        return NetworkService.wifiSignalIcon;
+                        if (status === "vpn") {
+                            return NetworkService.ethernetConnected ? "lan" : NetworkService.wifiSignalIcon
+                        }
+
+                        return NetworkService.wifiSignalIcon
                     }
                     size: Theme.barIconSize(root.barThickness)
                     color: {
                         if (NetworkService.wifiToggling) {
-                            return Theme.primary;
+                            return Theme.primary
                         }
 
-                        return NetworkService.networkStatus !== "disconnected" ? Theme.primary : Theme.outlineButton;
+                        return NetworkService.networkStatus !== "disconnected" ? Theme.primary : Theme.outlineButton
                     }
                     anchors.verticalCenter: parent.verticalCenter
                     visible: root.showNetworkIcon && NetworkService.networkAvailable
@@ -188,7 +197,6 @@ BasePill {
                         id: audioWheelArea
 
                         anchors.fill: parent
-                        hoverEnabled: true
                         acceptedButtons: Qt.NoButton
                         onWheel: function(wheelEvent) {
                             let delta = wheelEvent.angleDelta.y;
@@ -232,7 +240,6 @@ BasePill {
         y: -root.topMargin
         width: root.width + root.leftMargin + root.rightMargin
         height: root.height + root.topMargin + root.bottomMargin
-        hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
         acceptedButtons: Qt.LeftButton
         onPressed: {