Update VERSION to v0.4.2 (from DMS)

* HyperKeybindsModal: size to screen

* HyperKeybindsModal: close on Esc

.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

@@ -6,6 +6,36 @@ labels: "bug"
 assignees: ""
 ---
 
+<!-- If your issue is related to ICONS 
+- Purple and black checkerboards are QT's way of signalling an icon doesn't exist
+  - FIX: Configure a QT6 or Icon Pack in DMS Settings that has the icon you want
+  - Follow the [THEMING](https://github.com/AvengeMedia/DankMaterialShell/tree/master?tab=readme-ov-file#theming) section to ensure your QT environment variable is configured correctl for themes.
+  - Once done, configure an icon theme - either however you normally do with gtk3 or qt6ct, or through the built-in settings modal. -->
+
+<!-- If your issue is related to APP LAUNCHER/DOCK/Running Apps being stale
+ Quickshell does not ever update its DesktopEntires.
+ There is an open PR for it, that has been stuck unmerged over there to fix it.
+ We unfortunately are at the mercy of quickshell to merge it.
+ Until then, newly installed and removed apps will not react until the
+ shell is restarted.
+  -->
+
+## Compositor
+
+- [ ] niri
+- [ ] Hyprland
+- [ ] dwl (MangoWC)
+- [ ] sway
+- [ ] Other (specify)
+
+## Distribution
+
+<!-- Arch, Fedora, Debian, etc. -->
+
+## dms version
+
+<!-- Output of dms version command -->
+
 ## Description
 
 <!-- Brief description of the issue -->
@@ -25,6 +55,14 @@ assignees: ""
 ## Error Messages/Logs
 
 <!-- Please include any error messages, stack traces, or relevant logs -->
+<!-- you can get a log file with the following steps:
+dms kill
+mkdir ~/dms_logs
+nohup dms run > ~/dms_logs/dms-$(date +%s).txt 2>&1 &
+
+Then trigger your issue, and share the contents of ~/dms_logs/dms-<timestamp>.txt
+
+-->
 
 ```
 Paste error messages or logs here

.github/ISSUE_TEMPLATE/feature_request.md

@@ -14,6 +14,16 @@ assignees: ""
 
 <!-- Explain the purpose of this feature/why it'd be useful to you -->
 
+## Compositor
+
+Is this feature specific to one compositor?
+
+- [ ] All compositors
+- [ ] niri
+- [ ] Hyprland
+- [ ] dwl (MangoWC)
+- [ ] sway
+
 ## Proposed Solution
 
 <!-- If you have any ideas for how to implement this, please share! -->

.github/ISSUE_TEMPLATE/support_request.md

@@ -6,6 +6,22 @@ labels: "support"
 assignees: ""
 ---
 
+## Compositor
+
+- [ ] niri
+- [ ] Hyprland
+- [ ] dwl (MangoWC)
+- [ ] sway
+- [ ] other
+
+## Distribution
+
+<!-- Arch, Fedora, Debian, etc. -->
+
+## dms version
+
+<!-- Output of dms version command -->
+
 ## Description
 
 <!-- Brief description of the support needed -->

.github/workflows/copr-release.yml

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

.github/workflows/release.yml

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

.gitignore

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

CLAUDE.md

@@ -63,9 +63,11 @@ quickshell -p shell.qml
 # Or use the shorthand
 qs -p .
 
+# Run with verbose output for debugging
+qs -v -p shell.qml
+
 # Code formatting and linting
-./qmlformat-all.sh       # Format all QML files using project script
-qmlformat -i **/*.qml    # Format all QML files in place
+qmlfmt -t 4 -i 4 -b 250 -w /path/to/file.qml    # Format a QML file (requires qmlfmt, do not use qmlformat)
 qmllint **/*.qml         # Lint all QML files for syntax errors
 ```
 
@@ -87,9 +89,10 @@ shell.qml           # Main entry point (minimal orchestration)
 │   ├── AudioService.qml
 │   ├── NetworkService.qml
 │   ├── BluetoothService.qml
-│   ├── BrightnessService.qml
+│   ├── DisplayService.qml
 │   ├── NotificationService.qml
 │   ├── WeatherService.qml
+│   ├── PluginService.qml
 │   └── [14 more services]
 ├── Modules/        # UI components (93 files)
 │   ├── TopBar/     # Panel components (13 files)
@@ -105,15 +108,21 @@ shell.qml           # Main entry point (minimal orchestration)
 │   ├── SettingsModal.qml
 │   ├── ClipboardHistoryModal.qml
 │   ├── ProcessListModal.qml
+│   ├── PluginSettingsModal.qml
 │   └── [7 more modals]
-└── Widgets/        # Reusable UI controls (19 files)
-    ├── DankIcon.qml
-    ├── DankSlider.qml
-    ├── DankToggle.qml
-    ├── DankTabBar.qml
-    ├── DankGridView.qml
-    ├── DankListView.qml
-    └── [13 more widgets]
+├── Widgets/        # Reusable UI controls (19 files)
+│   ├── DankIcon.qml
+│   ├── DankSlider.qml
+│   ├── DankToggle.qml
+│   ├── DankTabBar.qml
+│   ├── DankGridView.qml
+│   ├── DankListView.qml
+│   └── [13 more widgets]
+└── plugins/        # External plugins directory ($CONFIGPATH/DankMaterialShell/plugins/)
+    └── PluginName/ # Example Plugin structure
+        ├── plugin.json            # Plugin manifest
+        ├── PluginNameWidget.qml   # Widget component
+        └── PluginNameSettings.qml # Settings UI
 ```
 
 ### Component Organization
@@ -131,7 +140,7 @@ shell.qml           # Main entry point (minimal orchestration)
 3. **Services/** - System integration singletons
    - **Pattern**: All services use `Singleton` type with `id: root`
    - **Independence**: No cross-service dependencies
-   - **Examples**: AudioService, NetworkService, BluetoothService, BrightnessService, WeatherService, NotificationService, CalendarService, BatteryService, NiriService, MprisController
+   - **Examples**: AudioService, NetworkService, BluetoothService, DisplayService, WeatherService, NotificationService, CalendarService, BatteryService, NiriService, MprisController
    - Services handle system commands, state management, and hardware integration
 
 4. **Modules/** - UI components (93 files)
@@ -143,7 +152,6 @@ shell.qml           # Main entry point (minimal orchestration)
    - **ProcessList/**: System monitoring with process management and performance metrics
    - **Dock/**: Application dock with running apps and window management
    - **Lock/**: Screen lock system with authentication
-   - **CentcomCenter/**: Calendar, weather, and media widgets
 
 5. **Modals/** - Full-screen overlays (10 files)
    - Modal system for settings, clipboard history, file browser, network info, power menu
@@ -165,6 +173,12 @@ shell.qml           # Main entry point (minimal orchestration)
    - **DankLocationSearch**: Location picker with search
    - **SystemLogo**: Animated system branding component
 
+7. **Plugins/** - External plugin system (`$CONFIGPATH/DankMaterialShell/plugins/`)
+   - **PluginService**: Discovers, loads, and manages plugin lifecycle
+   - **Dynamic Loading**: Plugins loaded at runtime from external directory
+   - **DankBar Integration**: Plugin widgets rendered alongside built-in widgets
+   - **Settings System**: Per-plugin settings with persistence
+
 ### Key Architectural Patterns
 
 1. **Singleton Services Pattern**:
@@ -177,9 +191,9 @@ shell.qml           # Main entry point (minimal orchestration)
 
    Singleton {
        id: root
-       
+
        property type value: defaultValue
-       
+
        function performAction() { /* implementation */ }
    }
    ```
@@ -221,6 +235,8 @@ shell.qml           # Main entry point (minimal orchestration)
    - Properties before signal handlers before child components
    - Prefer property bindings over imperative code
    - **CRITICAL**: NEVER add comments unless absolutely essential for complex logic understanding. Code should be self-documenting through clear naming and structure. Comments are a code smell indicating unclear implementation.
+   - Use guard statements, example `if (abc) { something() return;} somethingElse();`
+   - Don't use crazy ternary stuff, but use it for simple if else only. `propertyVal: a ? b : c`
 
 2. **Naming Conventions**:
    - **Services**: Use `Singleton` type with `id: root`
@@ -228,32 +244,30 @@ shell.qml           # Main entry point (minimal orchestration)
    - **Properties**: camelCase for properties, PascalCase for types
 
 3. **Null-Safe Operations**:
-   - **Do NOT use** `?.` operator (not supported by qmlformat)
-   - **Use** `object && object.property` instead of `object?.property`
-   - **Example**: `activePlayer && activePlayer.trackTitle` instead of `activePlayer?.trackTitle`
+   - **Use** `object?.property`
 
 4. **Component Structure**:
    ```qml
    // For regular components
    Item {
        id: root
-       
+
        property type name: value
-       
+
        signal customSignal(type param)
-       
+
        onSignal: { /* handler */ }
-       
+
        Component { /* children */ }
    }
-   
+
    // For services (singletons)
    Singleton {
        id: root
-       
+
        property bool featureAvailable: false
        property type currentValue: defaultValue
-       
+
        function performAction(param) { /* implementation */ }
    }
    ```
@@ -291,12 +305,12 @@ shell.qml           # Main entry point (minimal orchestration)
    ```qml
    // In services - detect capabilities
    property bool brightnessAvailable: false
-   
+
    // In modules - adapt UI accordingly
    DankSlider {
-       visible: BrightnessService.brightnessAvailable
-       enabled: BrightnessService.brightnessAvailable
-       value: BrightnessService.brightnessLevel
+       visible: DisplayService.brightnessAvailable
+       enabled: DisplayService.brightnessAvailable
+       value: DisplayService.brightnessLevel
    }
    ```
 
@@ -321,7 +335,7 @@ shell.qml           # Main entry point (minimal orchestration)
    console.log("Info message")           // General info
    console.warn("Warning message")       // Warnings
    console.error("Error message")        // Errors
-   
+
    // Include context in service operations
    onExited: (exitCode) => {
        if (exitCode !== 0) {
@@ -410,10 +424,10 @@ When modifying the shell:
 
    Singleton {
        id: root
-       
+
        property bool featureAvailable: false
        property type currentValue: defaultValue
-       
+
        function performAction(param) {
            // Implementation
        }
@@ -424,7 +438,7 @@ When modifying the shell:
    ```qml
    // In module files
    property alias serviceValue: NewService.currentValue
-   
+
    SomeControl {
        visible: NewService.featureAvailable
        enabled: NewService.featureAvailable
@@ -432,6 +446,200 @@ When modifying the shell:
    }
    ```
 
+### Creating Plugins
+
+Plugins are external, dynamically-loaded components that extend DankMaterialShell functionality. Plugins are stored in `~/.config/DankMaterialShell/plugins/` and have their settings isolated from core DMS settings.
+
+**Plugin Types:**
+- **Widget plugins** (`"type": "widget"` or omit type field): Display UI components in DankBar
+- **Daemon plugins** (`"type": "daemon"`): Run invisibly in the background without UI
+
+#### Widget Plugins
+
+1. **Create plugin directory**:
+   ```bash
+   mkdir -p ~/.config/DankMaterialShell/plugins/YourPlugin
+   ```
+
+2. **Create manifest** (`plugin.json`):
+   ```json
+   {
+       "id": "yourPlugin",
+       "name": "Your Plugin",
+       "description": "Widget description",
+       "version": "1.0.0",
+       "author": "Your Name",
+       "icon": "extension",
+       "type": "widget",
+       "component": "./YourWidget.qml",
+       "settings": "./YourSettings.qml",
+       "permissions": ["settings_read", "settings_write"]
+   }
+   ```
+
+3. **Create widget component** (`YourWidget.qml`):
+   ```qml
+   import QtQuick
+   import qs.Services
+
+   Rectangle {
+       id: root
+
+       property bool compactMode: false
+       property string section: "center"
+       property real widgetHeight: 30
+       property var pluginService: null
+
+       width: content.implicitWidth + 16
+       height: widgetHeight
+       radius: 8
+       color: "#20FFFFFF"
+
+       Component.onCompleted: {
+           if (pluginService) {
+               var data = pluginService.loadPluginData("yourPlugin", "key", defaultValue)
+           }
+       }
+   }
+   ```
+
+4. **Create settings component** (`YourSettings.qml`):
+   ```qml
+   import QtQuick
+   import QtQuick.Controls
+
+   FocusScope {
+       id: root
+
+       property var pluginService: null
+
+       implicitHeight: settingsColumn.implicitHeight
+       height: implicitHeight
+
+       Column {
+           id: settingsColumn
+           anchors.fill: parent
+           anchors.margins: 16
+           spacing: 12
+
+           Text {
+               text: "Your Plugin Settings"
+               font.pixelSize: 18
+               font.weight: Font.Bold
+           }
+
+           // Your settings UI here
+       }
+
+       function saveSettings(key, value) {
+           if (pluginService) {
+               pluginService.savePluginData("yourPlugin", key, value)
+           }
+       }
+
+       function loadSettings(key, defaultValue) {
+           if (pluginService) {
+               return pluginService.loadPluginData("yourPlugin", key, defaultValue)
+           }
+           return defaultValue
+       }
+   }
+   ```
+
+5. **Enable plugin**:
+   - Open Settings → Plugins
+   - Click "Scan for Plugins"
+   - Toggle plugin to enable
+   - Add plugin ID to DankBar widget list
+
+#### Daemon Plugins
+
+Daemon plugins run invisibly in the background without any UI components. They're useful for monitoring system events, background tasks, or data synchronization.
+
+1. **Create plugin directory**:
+   ```bash
+   mkdir -p ~/.config/DankMaterialShell/plugins/YourDaemon
+   ```
+
+2. **Create manifest** (`plugin.json`):
+   ```json
+   {
+       "id": "yourDaemon",
+       "name": "Your Daemon",
+       "description": "Background daemon description",
+       "version": "1.0.0",
+       "author": "Your Name",
+       "icon": "settings_applications",
+       "type": "daemon",
+       "component": "./YourDaemon.qml",
+       "permissions": ["settings_read", "settings_write"]
+   }
+   ```
+
+3. **Create daemon component** (`YourDaemon.qml`):
+   ```qml
+   import QtQuick
+   import qs.Common
+   import qs.Services
+
+   Item {
+       id: root
+
+       property var pluginService: null
+
+       Connections {
+           target: SessionData
+           function onWallpaperPathChanged() {
+               console.log("Wallpaper changed:", SessionData.wallpaperPath)
+               if (pluginService) {
+                   pluginService.savePluginData("yourDaemon", "lastEvent", Date.now())
+               }
+           }
+       }
+
+       Component.onCompleted: {
+           console.log("Daemon started")
+       }
+   }
+   ```
+
+4. **Enable daemon**:
+   - Open Settings → Plugins
+   - Click "Scan for Plugins"
+   - Toggle daemon to enable
+   - Daemon runs automatically in background
+
+**Example**: See `PLUGINS/WallpaperWatcherDaemon/` for a complete daemon plugin that monitors wallpaper changes
+
+**Plugin Directory Structure:**
+```
+~/.config/DankMaterialShell/
+├── settings.json                    # Core DMS settings + plugin settings
+│   └── pluginSettings: {
+│       └── yourPlugin: {
+│           ├── enabled: true,
+│           └── customData: {...}
+│       }
+│   }
+└── plugins/                         # Plugin files directory
+    └── YourPlugin/                  # Plugin directory (matches manifest ID)
+        ├── plugin.json              # Plugin manifest
+        ├── YourWidget.qml           # Widget component
+        └── YourSettings.qml         # Settings UI (optional)
+```
+
+**Key Plugin APIs:**
+- `pluginService.loadPluginData(pluginId, key, default)` - Load persistent data
+- `pluginService.savePluginData(pluginId, key, value)` - Save persistent data
+- `PluginService.enablePlugin(pluginId)` - Load plugin
+- `PluginService.disablePlugin(pluginId)` - Unload plugin
+
+**Important Notes:**
+- Plugin settings are automatically injected by the PluginService via `item.pluginService = PluginService`
+- Settings are stored in the main settings.json but namespaced under `pluginSettings.{pluginId}`
+- Plugin directories must match the plugin ID in the manifest
+- Use the injected `pluginService` property in both widget and settings components
+
 ### Debugging Common Issues
 
 1. **Import errors**: Check import paths
@@ -456,6 +664,7 @@ When modifying the shell:
 - **Function Discovery**: Use grep/search tools to find existing utility functions before implementing new ones
 - **Modern QML Patterns**: Leverage new widgets like DankTextField, DankDropdown, CachingImage
 - **Structured Organization**: Follow the established Services/Modules/Widgets/Modals separation
+- **Plugin System**: For user extensions, create plugins instead of modifying core modules - see docs/PLUGINS.md
 
 ### Common Widget Patterns
 

CONTRIBUTING.md

@@ -0,0 +1,30 @@
+# Contributing
+
+Contributions are welcome and encouraged.
+
+## Formatting
+
+The preferred tool for formatting files is [qmlfmt](https://github.com/jesperhh/qmlfmt) (also available on aur as qmlfmt-git). It actually kinda sucks, but `qmlformat` doesn't work with null safe operators and ternarys and pragma statements and a bunch of other things that are supported.
+
+We need some consistent style, so this at least gives the same formatter that Qt Creator uses.
+
+You can configure it to format on save in vscode by configuring the "custom local formatters" extension then adding this to settings json.
+
+```json
+  "customLocalFormatters.formatters": [
+    {
+      "command": "sh -c \"qmlfmt -t 4 -i 4 -b 250 | sed 's/pragma ComponentBehavior$/pragma ComponentBehavior: Bound/g'\"",
+      "languages": ["qml"]
+    }
+  ],
+  "[qml]": {
+    "editor.defaultFormatter": "jkillian.custom-local-formatters",
+    "editor.formatOnSave": true
+  },
+```
+
+Sometimes it just breaks code though. Like turning `"_\""` into `"_""`, so you may not want to do formatOnSave.
+
+## Pull request
+
+Include screenshots/video if applicable in your pull request if applicable, to visualize what your change is affecting.

Common/AppUsageHistoryData.qml

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

Common/CacheData.qml

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

Common/DankSocket.qml

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

Common/Facts.qml

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

Common/I18n.qml

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

Common/ModalManager.qml

@@ -1,7 +1,9 @@
-import QtQuick
 pragma Singleton
 
-QtObject {
+import Quickshell
+import QtQuick
+
+Singleton {
     id: modalManager
 
     signal closeAllModalsExcept(var excludedModal)

Common/Paths.qml

@@ -38,6 +38,10 @@ Singleton {
         return stringify(path).replace("file://", "")
     }
 
+    function toFileUrl(path: string): string {
+        return path.startsWith("file://") ? path : "file://" + path
+    }
+
     function mkdir(path: url): void {
         Quickshell.execDetached(["mkdir", "-p", strip(path)])
     }
@@ -45,4 +49,17 @@ Singleton {
     function copy(from: url, to: url): void {
         Quickshell.execDetached(["cp", strip(from), strip(to)])
     }
+
+    // ! 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"
+        if (appId === "beepertexts")
+            return "beeper"
+        if (appId === "home assistant desktop")
+            return "homeassistant-desktop"
+        if (appId.includes("com.transmissionbt.transmission"))
+            return "transmission-gtk"
+        return appId
+    }
 }

Common/Proc.qml

@@ -0,0 +1,110 @@
+pragma Singleton
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+Singleton {
+    id: root
+
+    property int defaultDebounceMs: 50
+    property int defaultTimeoutMs: 10000
+    property var _procDebouncers: ({})
+
+    function runCommand(id, command, callback, debounceMs, timeoutMs) {
+        const wait = (typeof debounceMs === "number" && debounceMs >= 0) ? debounceMs : defaultDebounceMs
+        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, 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]
+        entry.timer.interval = entry.waitMs
+        entry.timer.restart()
+    }
+
+    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 || !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,40 +1,86 @@
 pragma Singleton
+
 pragma ComponentBehavior: Bound
 
 import QtCore
 import QtQuick
 import Quickshell
 import Quickshell.Io
+import qs.Common
 import qs.Services
 
 Singleton {
-
     id: root
 
+    readonly property int sessionConfigVersion: 1
+
+    readonly property bool isGreeterMode: Quickshell.env("DMS_RUN_GREETER") === "1" || Quickshell.env("DMS_RUN_GREETER") === "true"
+    property bool hasTriedDefaultSession: false
+    readonly property string _stateUrl: StandardPaths.writableLocation(StandardPaths.GenericStateLocation)
+    readonly property string _stateDir: Paths.strip(_stateUrl)
+
     property bool isLightMode: false
-    property string wallpaperPath: ""
-    property string wallpaperLastPath: ""
-    property string profileLastPath: ""
     property bool doNotDisturb: false
+    property bool isSwitchingMode: false
+
+    property string wallpaperPath: ""
+    property bool perMonitorWallpaper: false
+    property var monitorWallpapers: ({})
+    property bool perModeWallpaper: false
+    property string wallpaperPathLight: ""
+    property string wallpaperPathDark: ""
+    property var monitorWallpapersLight: ({})
+    property var monitorWallpapersDark: ({})
+    property string wallpaperTransition: "fade"
+    readonly property var availableWallpaperTransitions: ["none", "fade", "wipe", "disc", "stripes", "iris bloom", "pixelate", "portal"]
+    property var includedTransitions: availableWallpaperTransitions.filter(t => t !== "none")
+
+    property bool wallpaperCyclingEnabled: false
+    property string wallpaperCyclingMode: "interval"
+    property int wallpaperCyclingInterval: 300
+    property string wallpaperCyclingTime: "06:00"
+    property var monitorCyclingSettings: ({})
+
     property bool nightModeEnabled: false
     property int nightModeTemperature: 4500
+    property int nightModeHighTemperature: 6500
+    property bool nightModeAutoEnabled: false
+    property string nightModeAutoMode: "time"
+    property int nightModeStartHour: 18
+    property int nightModeStartMinute: 0
+    property int nightModeEndHour: 6
+    property int nightModeEndMinute: 0
+    property real latitude: 0.0
+    property real longitude: 0.0
+    property bool nightModeUseIPLocation: false
+    property string nightModeLocationProvider: ""
+
     property var pinnedApps: []
+    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
     property bool nonNvidiaGpuTempEnabled: false
     property var enabledGpuPciIds: []
-    property bool wallpaperCyclingEnabled: false
-    property string wallpaperCyclingMode: "interval" // "interval" or "time"
-    property int wallpaperCyclingInterval: 300 // seconds (5 minutes)
-    property string wallpaperCyclingTime: "06:00" // HH:mm format
-    property string lastBrightnessDevice: ""
 
     Component.onCompleted: {
-        loadSettings()
+        if (!isGreeterMode) {
+            loadSettings()
+        }
     }
 
     function loadSettings() {
-        parseSettings(settingsFile.text())
+        if (isGreeterMode) {
+            parseSettings(greeterSessionFile.text())
+        } else {
+            parseSettings(settingsFile.text())
+        }
     }
 
     function parseSettings(content) {
@@ -42,35 +88,90 @@ Singleton {
             if (content && content.trim()) {
                 var settings = JSON.parse(content)
                 isLightMode = settings.isLightMode !== undefined ? settings.isLightMode : false
-                wallpaperPath = settings.wallpaperPath !== undefined ? settings.wallpaperPath : ""
-                wallpaperLastPath = settings.wallpaperLastPath
-                        !== undefined ? settings.wallpaperLastPath : ""
-                profileLastPath = settings.profileLastPath
-                        !== undefined ? settings.profileLastPath : ""
+
+                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
+                wallpaperPathLight = settings.wallpaperPathLight !== undefined ? settings.wallpaperPathLight : ""
+                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
+                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) {
+                    const parts = settings.nightModeStartTime.split(":")
+                    nightModeStartHour = parseInt(parts[0]) || 18
+                    nightModeStartMinute = parseInt(parts[1]) || 0
+                } else {
+                    nightModeStartHour = settings.nightModeStartHour !== undefined ? settings.nightModeStartHour : 18
+                    nightModeStartMinute = settings.nightModeStartMinute !== undefined ? settings.nightModeStartMinute : 0
+                }
+                if (settings.nightModeEndTime !== undefined) {
+                    const parts = settings.nightModeEndTime.split(":")
+                    nightModeEndHour = parseInt(parts[0]) || 6
+                    nightModeEndMinute = parseInt(parts[1]) || 0
+                } else {
+                    nightModeEndHour = settings.nightModeEndHour !== undefined ? settings.nightModeEndHour : 6
+                    nightModeEndMinute = settings.nightModeEndMinute !== undefined ? settings.nightModeEndMinute : 0
+                }
+                latitude = settings.latitude !== undefined ? settings.latitude : 0.0
+                longitude = settings.longitude !== undefined ? settings.longitude : 0.0
+                nightModeUseIPLocation = settings.nightModeUseIPLocation !== undefined ? settings.nightModeUseIPLocation : false
+                nightModeLocationProvider = settings.nightModeLocationProvider !== undefined ? settings.nightModeLocationProvider : ""
                 pinnedApps = settings.pinnedApps !== undefined ? settings.pinnedApps : []
-                selectedGpuIndex = settings.selectedGpuIndex
-                        !== undefined ? settings.selectedGpuIndex : 0
-                nvidiaGpuTempEnabled = settings.nvidiaGpuTempEnabled
-                        !== undefined ? settings.nvidiaGpuTempEnabled : false
-                nonNvidiaGpuTempEnabled = settings.nonNvidiaGpuTempEnabled
-                        !== undefined ? settings.nonNvidiaGpuTempEnabled : false
-                enabledGpuPciIds = settings.enabledGpuPciIds
-                        !== undefined ? settings.enabledGpuPciIds : []
-                wallpaperCyclingEnabled = settings.wallpaperCyclingEnabled
-                        !== undefined ? settings.wallpaperCyclingEnabled : false
-                wallpaperCyclingMode = settings.wallpaperCyclingMode
-                        !== undefined ? settings.wallpaperCyclingMode : "interval"
-                wallpaperCyclingInterval = settings.wallpaperCyclingInterval
-                        !== undefined ? settings.wallpaperCyclingInterval : 300
-                wallpaperCyclingTime = settings.wallpaperCyclingTime
-                        !== undefined ? settings.wallpaperCyclingTime : "06:00"
-                lastBrightnessDevice = settings.lastBrightnessDevice
-                        !== undefined ? settings.lastBrightnessDevice : ""
+                selectedGpuIndex = settings.selectedGpuIndex !== undefined ? settings.selectedGpuIndex : 0
+                nvidiaGpuTempEnabled = settings.nvidiaGpuTempEnabled !== undefined ? settings.nvidiaGpuTempEnabled : false
+                nonNvidiaGpuTempEnabled = settings.nonNvidiaGpuTempEnabled !== undefined ? settings.nonNvidiaGpuTempEnabled : false
+                enabledGpuPciIds = settings.enabledGpuPciIds !== undefined ? settings.enabledGpuPciIds : []
+                wallpaperCyclingEnabled = settings.wallpaperCyclingEnabled !== undefined ? settings.wallpaperCyclingEnabled : false
+                wallpaperCyclingMode = settings.wallpaperCyclingMode !== undefined ? settings.wallpaperCyclingMode : "interval"
+                wallpaperCyclingInterval = settings.wallpaperCyclingInterval !== undefined ? settings.wallpaperCyclingInterval : 300
+                wallpaperCyclingTime = settings.wallpaperCyclingTime !== undefined ? settings.wallpaperCyclingTime : "06:00"
+                monitorCyclingSettings = settings.monitorCyclingSettings !== undefined ? settings.monitorCyclingSettings : {}
+                lastBrightnessDevice = settings.lastBrightnessDevice !== undefined ? settings.lastBrightnessDevice : ""
+                launchPrefix = settings.launchPrefix !== undefined ? settings.launchPrefix : ""
+                wallpaperTransition = settings.wallpaperTransition !== undefined ? settings.wallpaperTransition : "fade"
+                includedTransitions = settings.includedTransitions !== undefined ? settings.includedTransitions : availableWallpaperTransitions.filter(t => t !== "none")
+                recentColors = settings.recentColors !== undefined ? settings.recentColors : []
+                showThirdPartyPlugins = settings.showThirdPartyPlugins !== undefined ? settings.showThirdPartyPlugins : false
+
+                if (settings.configVersion === undefined) {
+                    migrateFromUndefinedToV1(settings)
+                    saveSettings()
+                } else if (settings.configVersion === sessionConfigVersion) {
+                    cleanupUnusedKeys()
+                }
+
+                if (!isGreeterMode) {
+                    if (typeof Theme !== "undefined") {
+                        Theme.generateSystemThemesFromCurrentTheme()
+                    }
+                }
+
+                if (typeof WallpaperCyclingService !== "undefined") {
+                    WallpaperCyclingService.updateCyclingState()
+                }
             }
         } catch (e) {
 
@@ -78,14 +179,35 @@ Singleton {
     }
 
     function saveSettings() {
+        if (isGreeterMode)
+            return
         settingsFile.setText(JSON.stringify({
                                                 "isLightMode": isLightMode,
                                                 "wallpaperPath": wallpaperPath,
-                                                "wallpaperLastPath": wallpaperLastPath,
-                                                "profileLastPath": profileLastPath,
+                                                "perMonitorWallpaper": perMonitorWallpaper,
+                                                "monitorWallpapers": monitorWallpapers,
+                                                "perModeWallpaper": perModeWallpaper,
+                                                "wallpaperPathLight": wallpaperPathLight,
+                                                "wallpaperPathDark": wallpaperPathDark,
+                                                "monitorWallpapersLight": monitorWallpapersLight,
+                                                "monitorWallpapersDark": monitorWallpapersDark,
+                                                "brightnessExponentialDevices": brightnessExponentialDevices,
+                                                "brightnessUserSetValues": brightnessUserSetValues,
+                                                "brightnessExponentValues": brightnessExponentValues,
                                                 "doNotDisturb": doNotDisturb,
                                                 "nightModeEnabled": nightModeEnabled,
                                                 "nightModeTemperature": nightModeTemperature,
+                                                "nightModeHighTemperature": nightModeHighTemperature,
+                                                "nightModeAutoEnabled": nightModeAutoEnabled,
+                                                "nightModeAutoMode": nightModeAutoMode,
+                                                "nightModeStartHour": nightModeStartHour,
+                                                "nightModeStartMinute": nightModeStartMinute,
+                                                "nightModeEndHour": nightModeEndHour,
+                                                "nightModeEndMinute": nightModeEndMinute,
+                                                "latitude": latitude,
+                                                "longitude": longitude,
+                                                "nightModeUseIPLocation": nightModeUseIPLocation,
+                                                "nightModeLocationProvider": nightModeLocationProvider,
                                                 "pinnedApps": pinnedApps,
                                                 "selectedGpuIndex": selectedGpuIndex,
                                                 "nvidiaGpuTempEnabled": nvidiaGpuTempEnabled,
@@ -95,13 +217,98 @@ Singleton {
                                                 "wallpaperCyclingMode": wallpaperCyclingMode,
                                                 "wallpaperCyclingInterval": wallpaperCyclingInterval,
                                                 "wallpaperCyclingTime": wallpaperCyclingTime,
-                                                "lastBrightnessDevice": lastBrightnessDevice
+                                                "monitorCyclingSettings": monitorCyclingSettings,
+                                                "lastBrightnessDevice": lastBrightnessDevice,
+                                                "launchPrefix": launchPrefix,
+                                                "wallpaperTransition": wallpaperTransition,
+                                                "includedTransitions": includedTransitions,
+                                                "recentColors": recentColors,
+                                                "showThirdPartyPlugins": showThirdPartyPlugins,
+                                                "configVersion": sessionConfigVersion
                                             }, null, 2))
     }
 
+    function migrateFromUndefinedToV1(settings) {
+        console.info("SessionData: Migrating configuration from undefined to version 1")
+        if (typeof SettingsData !== "undefined") {
+            if (settings.acMonitorTimeout !== undefined) {
+                SettingsData.set("acMonitorTimeout", settings.acMonitorTimeout)
+            }
+            if (settings.acLockTimeout !== undefined) {
+                SettingsData.set("acLockTimeout", settings.acLockTimeout)
+            }
+            if (settings.acSuspendTimeout !== undefined) {
+                SettingsData.set("acSuspendTimeout", settings.acSuspendTimeout)
+            }
+            if (settings.acHibernateTimeout !== undefined) {
+                SettingsData.set("acHibernateTimeout", settings.acHibernateTimeout)
+            }
+            if (settings.batteryMonitorTimeout !== undefined) {
+                SettingsData.set("batteryMonitorTimeout", settings.batteryMonitorTimeout)
+            }
+            if (settings.batteryLockTimeout !== undefined) {
+                SettingsData.set("batteryLockTimeout", settings.batteryLockTimeout)
+            }
+            if (settings.batterySuspendTimeout !== undefined) {
+                SettingsData.set("batterySuspendTimeout", settings.batterySuspendTimeout)
+            }
+            if (settings.batteryHibernateTimeout !== undefined) {
+                SettingsData.set("batteryHibernateTimeout", settings.batteryHibernateTimeout)
+            }
+            if (settings.lockBeforeSuspend !== undefined) {
+                SettingsData.set("lockBeforeSuspend", settings.lockBeforeSuspend)
+            }
+            if (settings.loginctlLockIntegration !== undefined) {
+                SettingsData.set("loginctlLockIntegration", settings.loginctlLockIntegration)
+            }
+            if (settings.launchPrefix !== undefined) {
+                SettingsData.set("launchPrefix", settings.launchPrefix)
+            }
+        }
+        if (typeof CacheData !== "undefined") {
+            if (settings.wallpaperLastPath !== undefined) {
+                CacheData.wallpaperLastPath = settings.wallpaperLastPath
+            }
+            if (settings.profileLastPath !== undefined) {
+                CacheData.profileLastPath = settings.profileLastPath
+            }
+            CacheData.saveCache()
+        }
+    }
+
+    function cleanupUnusedKeys() {
+        const validKeys = ["isLightMode", "wallpaperPath", "perMonitorWallpaper", "monitorWallpapers", "perModeWallpaper", "wallpaperPathLight", "wallpaperPathDark", "monitorWallpapersLight", "monitorWallpapersDark", "doNotDisturb", "nightModeEnabled", "nightModeTemperature", "nightModeHighTemperature", "nightModeAutoEnabled", "nightModeAutoMode", "nightModeStartHour", "nightModeStartMinute", "nightModeEndHour", "nightModeEndMinute", "latitude", "longitude", "nightModeUseIPLocation", "nightModeLocationProvider", "pinnedApps", "selectedGpuIndex", "nvidiaGpuTempEnabled", "nonNvidiaGpuTempEnabled", "enabledGpuPciIds", "wallpaperCyclingEnabled", "wallpaperCyclingMode", "wallpaperCyclingInterval", "wallpaperCyclingTime", "monitorCyclingSettings", "lastBrightnessDevice", "brightnessExponentialDevices", "brightnessUserSetValues", "launchPrefix", "wallpaperTransition", "includedTransitions", "recentColors", "showThirdPartyPlugins", "configVersion"]
+
+        try {
+            const content = settingsFile.text()
+            if (!content || !content.trim())
+                return
+
+            const settings = JSON.parse(content)
+            let needsSave = false
+
+            for (const key in settings) {
+                if (!validKeys.includes(key)) {
+                    console.log("SessionData: Removing unused key:", key)
+                    delete settings[key]
+                    needsSave = true
+                }
+            }
+
+            if (needsSave) {
+                settingsFile.setText(JSON.stringify(settings, null, 2))
+            }
+        } catch (e) {
+            console.warn("SessionData: Failed to cleanup unused keys:", e.message)
+        }
+    }
+
     function setLightMode(lightMode) {
+        isSwitchingMode = true
         isLightMode = lightMode
+        syncWallpaperForCurrentMode()
         saveSettings()
+        Qt.callLater(() => { isSwitchingMode = false })
     }
 
     function setDoNotDisturb(enabled) {
@@ -109,6 +316,235 @@ Singleton {
         saveSettings()
     }
 
+    function setWallpaperPath(path) {
+        wallpaperPath = path
+        saveSettings()
+    }
+
+    function setWallpaper(imagePath) {
+        wallpaperPath = imagePath
+        if (perModeWallpaper) {
+            if (isLightMode) {
+                wallpaperPathLight = imagePath
+            } else {
+                wallpaperPathDark = imagePath
+            }
+        }
+        saveSettings()
+
+        if (typeof Theme !== "undefined") {
+            Theme.generateSystemThemesFromCurrentTheme()
+        }
+    }
+
+    function setWallpaperColor(color) {
+        wallpaperPath = color
+        if (perModeWallpaper) {
+            if (isLightMode) {
+                wallpaperPathLight = color
+            } else {
+                wallpaperPathDark = color
+            }
+        }
+        saveSettings()
+
+        if (typeof Theme !== "undefined") {
+            Theme.generateSystemThemesFromCurrentTheme()
+        }
+    }
+
+    function clearWallpaper() {
+        wallpaperPath = ""
+        saveSettings()
+
+        if (typeof Theme !== "undefined") {
+            if (typeof SettingsData !== "undefined" && SettingsData.theme) {
+                Theme.switchTheme(SettingsData.theme)
+            } else {
+                Theme.switchTheme("blue")
+            }
+        }
+    }
+
+    function setPerMonitorWallpaper(enabled) {
+        perMonitorWallpaper = enabled
+        if (enabled && perModeWallpaper) {
+            syncWallpaperForCurrentMode()
+        }
+        saveSettings()
+
+        if (typeof Theme !== "undefined") {
+            Theme.generateSystemThemesFromCurrentTheme()
+        }
+    }
+
+    function setPerModeWallpaper(enabled) {
+        if (enabled && wallpaperCyclingEnabled) {
+            setWallpaperCyclingEnabled(false)
+        }
+        if (enabled && perMonitorWallpaper) {
+            var monitorCyclingAny = false
+            for (var key in monitorCyclingSettings) {
+                if (monitorCyclingSettings[key].enabled) {
+                    monitorCyclingAny = true
+                    break
+                }
+            }
+            if (monitorCyclingAny) {
+                var newSettings = Object.assign({}, monitorCyclingSettings)
+                for (var screenName in newSettings) {
+                    newSettings[screenName].enabled = false
+                }
+                monitorCyclingSettings = newSettings
+            }
+        }
+
+        perModeWallpaper = enabled
+        if (enabled) {
+            if (perMonitorWallpaper) {
+                monitorWallpapersLight = Object.assign({}, monitorWallpapers)
+                monitorWallpapersDark = Object.assign({}, monitorWallpapers)
+            } else {
+                wallpaperPathLight = wallpaperPath
+                wallpaperPathDark = wallpaperPath
+            }
+        } else {
+            syncWallpaperForCurrentMode()
+        }
+        saveSettings()
+
+        if (typeof Theme !== "undefined") {
+            Theme.generateSystemThemesFromCurrentTheme()
+        }
+    }
+
+    function setMonitorWallpaper(screenName, path) {
+        var newMonitorWallpapers = Object.assign({}, monitorWallpapers)
+        if (path && path !== "") {
+            newMonitorWallpapers[screenName] = path
+        } else {
+            delete newMonitorWallpapers[screenName]
+        }
+        monitorWallpapers = newMonitorWallpapers
+
+        if (perModeWallpaper) {
+            if (isLightMode) {
+                var newLight = Object.assign({}, monitorWallpapersLight)
+                if (path && path !== "") {
+                    newLight[screenName] = path
+                } else {
+                    delete newLight[screenName]
+                }
+                monitorWallpapersLight = newLight
+            } else {
+                var newDark = Object.assign({}, monitorWallpapersDark)
+                if (path && path !== "") {
+                    newDark[screenName] = path
+                } else {
+                    delete newDark[screenName]
+                }
+                monitorWallpapersDark = newDark
+            }
+        }
+
+        saveSettings()
+
+        if (typeof Theme !== "undefined" && typeof Quickshell !== "undefined" && typeof SettingsData !== "undefined") {
+            var screens = Quickshell.screens
+            if (screens.length > 0) {
+                var targetMonitor = (SettingsData.matugenTargetMonitor && SettingsData.matugenTargetMonitor !== "") ? SettingsData.matugenTargetMonitor : screens[0].name
+                if (screenName === targetMonitor) {
+                    Theme.generateSystemThemesFromCurrentTheme()
+                }
+            }
+        }
+    }
+
+    function setWallpaperTransition(transition) {
+        wallpaperTransition = transition
+        saveSettings()
+    }
+
+    function setWallpaperCyclingEnabled(enabled) {
+        wallpaperCyclingEnabled = enabled
+        saveSettings()
+    }
+
+    function setWallpaperCyclingMode(mode) {
+        wallpaperCyclingMode = mode
+        saveSettings()
+    }
+
+    function setWallpaperCyclingInterval(interval) {
+        wallpaperCyclingInterval = interval
+        saveSettings()
+    }
+
+    function setWallpaperCyclingTime(time) {
+        wallpaperCyclingTime = time
+        saveSettings()
+    }
+
+    function setMonitorCyclingEnabled(screenName, enabled) {
+        var newSettings = Object.assign({}, monitorCyclingSettings)
+        if (!newSettings[screenName]) {
+            newSettings[screenName] = {
+                "enabled": false,
+                "mode": "interval",
+                "interval": 300,
+                "time": "06:00"
+            }
+        }
+        newSettings[screenName].enabled = enabled
+        monitorCyclingSettings = newSettings
+        saveSettings()
+    }
+
+    function setMonitorCyclingMode(screenName, mode) {
+        var newSettings = Object.assign({}, monitorCyclingSettings)
+        if (!newSettings[screenName]) {
+            newSettings[screenName] = {
+                "enabled": false,
+                "mode": "interval",
+                "interval": 300,
+                "time": "06:00"
+            }
+        }
+        newSettings[screenName].mode = mode
+        monitorCyclingSettings = newSettings
+        saveSettings()
+    }
+
+    function setMonitorCyclingInterval(screenName, interval) {
+        var newSettings = Object.assign({}, monitorCyclingSettings)
+        if (!newSettings[screenName]) {
+            newSettings[screenName] = {
+                "enabled": false,
+                "mode": "interval",
+                "interval": 300,
+                "time": "06:00"
+            }
+        }
+        newSettings[screenName].interval = interval
+        monitorCyclingSettings = newSettings
+        saveSettings()
+    }
+
+    function setMonitorCyclingTime(screenName, time) {
+        var newSettings = Object.assign({}, monitorCyclingSettings)
+        if (!newSettings[screenName]) {
+            newSettings[screenName] = {
+                "enabled": false,
+                "mode": "interval",
+                "interval": 300,
+                "time": "06:00"
+            }
+        }
+        newSettings[screenName].time = time
+        monitorCyclingSettings = newSettings
+        saveSettings()
+    }
+
     function setNightModeEnabled(enabled) {
         nightModeEnabled = enabled
         saveSettings()
@@ -119,28 +555,61 @@ Singleton {
         saveSettings()
     }
 
-    function setWallpaperPath(path) {
-        wallpaperPath = path
+    function setNightModeHighTemperature(temperature) {
+        nightModeHighTemperature = temperature
         saveSettings()
     }
 
-    function setWallpaper(imagePath) {
-        wallpaperPath = imagePath
-        saveSettings()
-
-        if (typeof Theme !== "undefined" && typeof SettingsData !== "undefined"
-                && SettingsData.wallpaperDynamicTheming) {
-            Theme.extractColors()
-        }
-    }
-
-    function setWallpaperLastPath(path) {
-        wallpaperLastPath = path
+    function setNightModeAutoEnabled(enabled) {
+        console.log("SessionData: Setting nightModeAutoEnabled to", enabled)
+        nightModeAutoEnabled = enabled
         saveSettings()
     }
 
-    function setProfileLastPath(path) {
-        profileLastPath = path
+    function setNightModeAutoMode(mode) {
+        nightModeAutoMode = mode
+        saveSettings()
+    }
+
+    function setNightModeStartHour(hour) {
+        nightModeStartHour = hour
+        saveSettings()
+    }
+
+    function setNightModeStartMinute(minute) {
+        nightModeStartMinute = minute
+        saveSettings()
+    }
+
+    function setNightModeEndHour(hour) {
+        nightModeEndHour = hour
+        saveSettings()
+    }
+
+    function setNightModeEndMinute(minute) {
+        nightModeEndMinute = minute
+        saveSettings()
+    }
+
+    function setNightModeUseIPLocation(use) {
+        nightModeUseIPLocation = use
+        saveSettings()
+    }
+
+    function setLatitude(lat) {
+        console.log("SessionData: Setting latitude to", lat)
+        latitude = lat
+        saveSettings()
+    }
+
+    function setLongitude(lng) {
+        console.log("SessionData: Setting longitude to", lng)
+        longitude = lng
+        saveSettings()
+    }
+
+    function setNightModeLocationProvider(provider) {
+        nightModeLocationProvider = provider
         saveSettings()
     }
 
@@ -170,6 +639,78 @@ Singleton {
         return appId && pinnedApps.indexOf(appId) !== -1
     }
 
+    function addRecentColor(color) {
+        const colorStr = color.toString()
+        let recent = recentColors.slice()
+        recent = recent.filter(c => c !== colorStr)
+        recent.unshift(colorStr)
+        if (recent.length > 5)
+            recent = recent.slice(0, 5)
+        recentColors = recent
+        saveSettings()
+    }
+
+    function setShowThirdPartyPlugins(enabled) {
+        showThirdPartyPlugins = enabled
+        saveSettings()
+    }
+
+    function setLaunchPrefix(prefix) {
+        launchPrefix = prefix
+        saveSettings()
+    }
+
+    function setLastBrightnessDevice(device) {
+        lastBrightnessDevice = device
+        saveSettings()
+    }
+
+    function 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()
@@ -190,60 +731,108 @@ Singleton {
         saveSettings()
     }
 
-    function setWallpaperCyclingEnabled(enabled) {
-        wallpaperCyclingEnabled = enabled
-        saveSettings()
+    function syncWallpaperForCurrentMode() {
+        if (!perModeWallpaper)
+            return
+
+        if (perMonitorWallpaper) {
+            monitorWallpapers = isLightMode ? Object.assign({}, monitorWallpapersLight) : Object.assign({}, monitorWallpapersDark)
+            return
+        }
+
+        wallpaperPath = isLightMode ? wallpaperPathLight : wallpaperPathDark
     }
 
-    function setWallpaperCyclingMode(mode) {
-        wallpaperCyclingMode = mode
-        saveSettings()
+    function getMonitorWallpaper(screenName) {
+        if (!perMonitorWallpaper) {
+            return wallpaperPath
+        }
+        return monitorWallpapers[screenName] || wallpaperPath
     }
 
-    function setWallpaperCyclingInterval(interval) {
-        wallpaperCyclingInterval = interval
-        saveSettings()
-    }
-
-    function setWallpaperCyclingTime(time) {
-        wallpaperCyclingTime = time
-        saveSettings()
-    }
-
-    function setLastBrightnessDevice(device) {
-        lastBrightnessDevice = device
-        saveSettings()
+    function getMonitorCyclingSettings(screenName) {
+        return monitorCyclingSettings[screenName] || {
+            "enabled": false,
+            "mode": "interval",
+            "interval": 300,
+            "time": "06:00"
+        }
     }
 
     FileView {
         id: settingsFile
 
-        path: StandardPaths.writableLocation(
-                  StandardPaths.GenericStateLocation) + "/DankMaterialShell/session.json"
-        blockLoading: true
+        path: isGreeterMode ? "" : StandardPaths.writableLocation(StandardPaths.GenericStateLocation) + "/DankMaterialShell/session.json"
+        blockLoading: isGreeterMode
         blockWrites: true
-        watchChanges: true
+        watchChanges: !isGreeterMode
         onLoaded: {
-            parseSettings(settingsFile.text())
+            if (!isGreeterMode) {
+                parseSettings(settingsFile.text())
+                hasTriedDefaultSession = false
+            }
+        }
+        onLoadFailed: error => {
+            if (!isGreeterMode && !hasTriedDefaultSession) {
+                hasTriedDefaultSession = true
+                defaultSessionCheckProcess.running = true
+            }
+        }
+    }
+
+    FileView {
+        id: greeterSessionFile
+
+        path: {
+            const greetCfgDir = Quickshell.env("DMS_GREET_CFG_DIR") || "/etc/greetd/.dms"
+            return greetCfgDir + "/session.json"
+        }
+        preload: isGreeterMode
+        blockLoading: false
+        blockWrites: true
+        watchChanges: false
+        printErrors: true
+        onLoaded: {
+            if (isGreeterMode) {
+                parseSettings(greeterSessionFile.text())
+            }
+        }
+    }
+
+    Process {
+        id: defaultSessionCheckProcess
+
+        command: ["sh", "-c", "CONFIG_DIR=\"" + _stateDir
+            + "/DankMaterialShell\"; if [ -f \"$CONFIG_DIR/default-session.json\" ] && [ ! -f \"$CONFIG_DIR/session.json\" ]; then cp --no-preserve=mode \"$CONFIG_DIR/default-session.json\" \"$CONFIG_DIR/session.json\" && echo 'copied'; else echo 'not_found'; fi"]
+        running: false
+        onExited: exitCode => {
+            if (exitCode === 0) {
+                console.info("Copied default-session.json to session.json")
+                settingsFile.reload()
+            }
         }
-        onLoadFailed: error => {}
     }
 
     IpcHandler {
         target: "wallpaper"
 
         function get(): string {
+            if (root.perMonitorWallpaper) {
+                return "ERROR: Per-monitor mode enabled. Use getFor(screenName) instead."
+            }
             return root.wallpaperPath || ""
         }
 
         function set(path: string): string {
+            if (root.perMonitorWallpaper) {
+                return "ERROR: Per-monitor mode enabled. Use setFor(screenName, path) instead."
+            }
+
             if (!path) {
                 return "ERROR: No path provided"
             }
 
-            var absolutePath = path.startsWith(
-                        "/") ? path : StandardPaths.writableLocation(
-                                   StandardPaths.HomeLocation) + "/" + path
+            var absolutePath = path.startsWith("/") ? path : StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/" + path
 
             try {
                 root.setWallpaper(absolutePath)
@@ -255,10 +844,17 @@ Singleton {
 
         function clear(): string {
             root.setWallpaper("")
-            return "SUCCESS: Wallpaper cleared"
+            root.setPerMonitorWallpaper(false)
+            root.monitorWallpapers = {}
+            root.saveSettings()
+            return "SUCCESS: All wallpapers cleared"
         }
 
         function next(): string {
+            if (root.perMonitorWallpaper) {
+                return "ERROR: Per-monitor mode enabled. Use nextFor(screenName) instead."
+            }
+
             if (!root.wallpaperPath) {
                 return "ERROR: No wallpaper set"
             }
@@ -272,6 +868,10 @@ Singleton {
         }
 
         function prev(): string {
+            if (root.perMonitorWallpaper) {
+                return "ERROR: Per-monitor mode enabled. Use prevFor(screenName) instead."
+            }
+
             if (!root.wallpaperPath) {
                 return "ERROR: No wallpaper set"
             }
@@ -283,28 +883,70 @@ Singleton {
                 return "ERROR: Failed to cycle wallpaper: " + e.toString()
             }
         }
-    }
 
-    IpcHandler {
-        target: "theme"
-
-        function toggle(): string {
-            root.setLightMode(!root.isLightMode)
-            return root.isLightMode ? "light" : "dark"
+        function getFor(screenName: string): string {
+            if (!screenName) {
+                return "ERROR: No screen name provided"
+            }
+            return root.getMonitorWallpaper(screenName) || ""
         }
 
-        function light(): string {
-            root.setLightMode(true)
-            return "light"
+        function setFor(screenName: string, path: string): string {
+            if (!screenName) {
+                return "ERROR: No screen name provided"
+            }
+
+            if (!path) {
+                return "ERROR: No path provided"
+            }
+
+            var absolutePath = path.startsWith("/") ? path : StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/" + path
+
+            try {
+                if (!root.perMonitorWallpaper) {
+                    root.setPerMonitorWallpaper(true)
+                }
+                root.setMonitorWallpaper(screenName, absolutePath)
+                return "SUCCESS: Wallpaper set for " + screenName + " to " + absolutePath
+            } catch (e) {
+                return "ERROR: Failed to set wallpaper for " + screenName + ": " + e.toString()
+            }
         }
 
-        function dark(): string {
-            root.setLightMode(false)
-            return "dark"
+        function nextFor(screenName: string): string {
+            if (!screenName) {
+                return "ERROR: No screen name provided"
+            }
+
+            var currentWallpaper = root.getMonitorWallpaper(screenName)
+            if (!currentWallpaper) {
+                return "ERROR: No wallpaper set for " + screenName
+            }
+
+            try {
+                WallpaperCyclingService.cycleNextForMonitor(screenName)
+                return "SUCCESS: Cycling to next wallpaper for " + screenName
+            } catch (e) {
+                return "ERROR: Failed to cycle wallpaper for " + screenName + ": " + e.toString()
+            }
         }
 
-        function getMode(): string {
-            return root.isLightMode ? "light" : "dark"
+        function prevFor(screenName: string): string {
+            if (!screenName) {
+                return "ERROR: No screen name provided"
+            }
+
+            var currentWallpaper = root.getMonitorWallpaper(screenName)
+            if (!currentWallpaper) {
+                return "ERROR: No wallpaper set for " + screenName
+            }
+
+            try {
+                WallpaperCyclingService.cyclePrevForMonitor(screenName)
+                return "SUCCESS: Cycling to previous wallpaper for " + screenName
+            } catch (e) {
+                return "ERROR: Failed to cycle wallpaper for " + screenName + ": " + e.toString()
+            }
         }
     }
 }

Common/StockThemes.js

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

Common/fuzzysort.js

@@ -1,678 +0,0 @@
-.pragma library
-
-var single =  (search, target) => {
-    if(!search || !target) return NULL
-
-    var preparedSearch = getPreparedSearch(search)
-    if(!isPrepared(target)) target = getPrepared(target)
-
-    var searchBitflags = preparedSearch.bitflags
-    if((searchBitflags & target._bitflags) !== searchBitflags) return NULL
-
-    return algorithm(preparedSearch, target)
-}
-
-var go = (search, targets, options) => {
-    if(!search) return options?.all ? all(targets, options) : noResults
-
-    var preparedSearch = getPreparedSearch(search)
-    var searchBitflags = preparedSearch.bitflags
-    var containsSpace  = preparedSearch.containsSpace
-
-    var threshold = denormalizeScore( options?.threshold || 0 )
-    var limit     = options?.limit || INFINITY
-
-    var resultsLen = 0; var limitedCount = 0
-    var targetsLen = targets.length
-
-    function push_result(result) {
-    if(resultsLen < limit) { q.add(result); ++resultsLen }
-    else {
-        ++limitedCount
-        if(result._score > q.peek()._score) q.replaceTop(result)
-    }
-    }
-
-    // This code is copy/pasted 3 times for performance reasons [options.key, options.keys, no keys]
-
-    // options.key
-    if(options?.key) {
-    var key = options.key
-    for(var i = 0; i < targetsLen; ++i) { var obj = targets[i]
-        var target = getValue(obj, key)
-        if(!target) continue
-        if(!isPrepared(target)) target = getPrepared(target)
-
-        if((searchBitflags & target._bitflags) !== searchBitflags) continue
-        var result = algorithm(preparedSearch, target)
-        if(result === NULL) continue
-        if(result._score < threshold) continue
-
-        result.obj = obj
-        push_result(result)
-    }
-
-    // options.keys
-    } else if(options?.keys) {
-    var keys = options.keys
-    var keysLen = keys.length
-
-    outer: for(var i = 0; i < targetsLen; ++i) { var obj = targets[i]
-
-        { // early out based on bitflags
-        var keysBitflags = 0
-        for (var keyI = 0; keyI < keysLen; ++keyI) {
-            var key = keys[keyI]
-            var target = getValue(obj, key)
-            if(!target) { tmpTargets[keyI] = noTarget; continue }
-            if(!isPrepared(target)) target = getPrepared(target)
-            tmpTargets[keyI] = target
-
-            keysBitflags |= target._bitflags
-        }
-
-        if((searchBitflags & keysBitflags) !== searchBitflags) continue
-        }
-
-        if(containsSpace) for(let i=0; i<preparedSearch.spaceSearches.length; i++) keysSpacesBestScores[i] = NEGATIVE_INFINITY
-
-        for (var keyI = 0; keyI < keysLen; ++keyI) {
-        target = tmpTargets[keyI]
-        if(target === noTarget) { tmpResults[keyI] = noTarget; continue }
-
-        tmpResults[keyI] = algorithm(preparedSearch, target, /*allowSpaces=*/false, /*allowPartialMatch=*/containsSpace)
-        if(tmpResults[keyI] === NULL) { tmpResults[keyI] = noTarget; continue }
-
-        // todo: this seems weird and wrong. like what if our first match wasn't good. this should just replace it instead of averaging with it
-        // if our second match isn't good we ignore it instead of averaging with it
-        if(containsSpace) for(let i=0; i<preparedSearch.spaceSearches.length; i++) {
-            if(allowPartialMatchScores[i] > -1000) {
-            if(keysSpacesBestScores[i] > NEGATIVE_INFINITY) {
-                var tmp = (keysSpacesBestScores[i] + allowPartialMatchScores[i]) / 4/*bonus score for having multiple matches*/
-                if(tmp > keysSpacesBestScores[i]) keysSpacesBestScores[i] = tmp
-            }
-            }
-            if(allowPartialMatchScores[i] > keysSpacesBestScores[i]) keysSpacesBestScores[i] = allowPartialMatchScores[i]
-        }
-        }
-
-        if(containsSpace) {
-        for(let i=0; i<preparedSearch.spaceSearches.length; i++) { if(keysSpacesBestScores[i] === NEGATIVE_INFINITY) continue outer }
-        } else {
-        var hasAtLeast1Match = false
-        for(let i=0; i < keysLen; i++) { if(tmpResults[i]._score !== NEGATIVE_INFINITY) { hasAtLeast1Match = true; break } }
-        if(!hasAtLeast1Match) continue
-        }
-
-        var objResults = new KeysResult(keysLen)
-        for(let i=0; i < keysLen; i++) { objResults[i] = tmpResults[i] }
-
-        if(containsSpace) {
-        var score = 0
-        for(let i=0; i<preparedSearch.spaceSearches.length; i++) score += keysSpacesBestScores[i]
-        } else {
-        // todo could rewrite this scoring to be more similar to when there's spaces
-        // if we match multiple keys give us bonus points
-        var score = NEGATIVE_INFINITY
-        for(let i=0; i<keysLen; i++) {
-            var result = objResults[i]
-            if(result._score > -1000) {
-            if(score > NEGATIVE_INFINITY) {
-                var tmp = (score + result._score) / 4/*bonus score for having multiple matches*/
-                if(tmp > score) score = tmp
-            }
-            }
-            if(result._score > score) score = result._score
-        }
-        }
-
-        objResults.obj = obj
-        objResults._score = score
-        if(options?.scoreFn) {
-        score = options.scoreFn(objResults)
-        if(!score) continue
-        score = denormalizeScore(score)
-        objResults._score = score
-        }
-
-        if(score < threshold) continue
-        push_result(objResults)
-    }
-
-    // no keys
-    } else {
-    for(var i = 0; i < targetsLen; ++i) { var target = targets[i]
-        if(!target) continue
-        if(!isPrepared(target)) target = getPrepared(target)
-
-        if((searchBitflags & target._bitflags) !== searchBitflags) continue
-        var result = algorithm(preparedSearch, target)
-        if(result === NULL) continue
-        if(result._score < threshold) continue
-
-        push_result(result)
-    }
-    }
-
-    if(resultsLen === 0) return noResults
-    var results = new Array(resultsLen)
-    for(var i = resultsLen - 1; i >= 0; --i) results[i] = q.poll()
-    results.total = resultsLen + limitedCount
-    return results
-}
-
-
-// this is written as 1 function instead of 2 for minification. perf seems fine ...
-// except when minified. the perf is very slow
-var highlight = (result, open='<b>', close='</b>') => {
-    var callback = typeof open === 'function' ? open : undefined
-
-    var target      = result.target
-    var targetLen   = target.length
-    var indexes     = result.indexes
-    var highlighted = ''
-    var matchI      = 0
-    var indexesI    = 0
-    var opened      = false
-    var parts       = []
-
-    for(var i = 0; i < targetLen; ++i) { var char = target[i]
-    if(indexes[indexesI] === i) {
-        ++indexesI
-        if(!opened) { opened = true
-        if(callback) {
-            parts.push(highlighted); highlighted = ''
-        } else {
-            highlighted += open
-        }
-        }
-
-        if(indexesI === indexes.length) {
-        if(callback) {
-            highlighted += char
-            parts.push(callback(highlighted, matchI++)); highlighted = ''
-            parts.push(target.substr(i+1))
-        } else {
-            highlighted += char + close + target.substr(i+1)
-        }
-        break
-        }
-    } else {
-        if(opened) { opened = false
-        if(callback) {
-            parts.push(callback(highlighted, matchI++)); highlighted = ''
-        } else {
-            highlighted += close
-        }
-        }
-    }
-    highlighted += char
-    }
-
-    return callback ? parts : highlighted
-}
-
-
-var prepare = (target) => {
-    if(typeof target === 'number') target = ''+target
-    else if(typeof target !== 'string') target = ''
-    var info = prepareLowerInfo(target)
-    return new_result(target, {_targetLower:info._lower, _targetLowerCodes:info.lowerCodes, _bitflags:info.bitflags})
-}
-
-var cleanup = () => { preparedCache.clear(); preparedSearchCache.clear() }
-
-
-// Below this point is only internal code
-// Below this point is only internal code
-// Below this point is only internal code
-// Below this point is only internal code
-
-
-class Result {
-    get ['indexes']() { return this._indexes.slice(0, this._indexes.len).sort((a,b)=>a-b) }
-    set ['indexes'](indexes) { return this._indexes = indexes }
-    ['highlight'](open, close) { return highlight(this, open, close) }
-    get ['score']() { return normalizeScore(this._score) }
-    set ['score'](score) { this._score = denormalizeScore(score) }
-}
-
-class KeysResult extends Array {
-    get ['score']() { return normalizeScore(this._score) }
-    set ['score'](score) { this._score = denormalizeScore(score) }
-}
-
-var new_result = (target, options) => {
-    const result = new Result()
-    result['target']             = target
-    result['obj']                = options.obj                   ?? NULL
-    result._score                = options._score                ?? NEGATIVE_INFINITY
-    result._indexes              = options._indexes              ?? []
-    result._targetLower          = options._targetLower          ?? ''
-    result._targetLowerCodes     = options._targetLowerCodes     ?? NULL
-    result._nextBeginningIndexes = options._nextBeginningIndexes ?? NULL
-    result._bitflags             = options._bitflags             ?? 0
-    return result
-}
-
-
-var normalizeScore = score => {
-    if(score === NEGATIVE_INFINITY) return 0
-    if(score > 1) return score
-    return Math.E ** ( ((-score + 1)**.04307 - 1) * -2)
-}
-var denormalizeScore = normalizedScore => {
-    if(normalizedScore === 0) return NEGATIVE_INFINITY
-    if(normalizedScore > 1) return normalizedScore
-    return 1 - Math.pow((Math.log(normalizedScore) / -2 + 1), 1 / 0.04307)
-}
-
-
-var prepareSearch = (search) => {
-    if(typeof search === 'number') search = ''+search
-    else if(typeof search !== 'string') search = ''
-    search = search.trim()
-    var info = prepareLowerInfo(search)
-
-    var spaceSearches = []
-    if(info.containsSpace) {
-    var searches = search.split(/\s+/)
-    searches = [...new Set(searches)] // distinct
-    for(var i=0; i<searches.length; i++) {
-        if(searches[i] === '') continue
-        var _info = prepareLowerInfo(searches[i])
-        spaceSearches.push({lowerCodes:_info.lowerCodes, _lower:searches[i].toLowerCase(), containsSpace:false})
-    }
-    }
-
-    return {lowerCodes: info.lowerCodes, _lower: info._lower, containsSpace: info.containsSpace, bitflags: info.bitflags, spaceSearches: spaceSearches}
-}
-
-
-
-var getPrepared = (target) => {
-    if(target.length > 999) return prepare(target) // don't cache huge targets
-    var targetPrepared = preparedCache.get(target)
-    if(targetPrepared !== undefined) return targetPrepared
-    targetPrepared = prepare(target)
-    preparedCache.set(target, targetPrepared)
-    return targetPrepared
-}
-var getPreparedSearch = (search) => {
-    if(search.length > 999) return prepareSearch(search) // don't cache huge searches
-    var searchPrepared = preparedSearchCache.get(search)
-    if(searchPrepared !== undefined) return searchPrepared
-    searchPrepared = prepareSearch(search)
-    preparedSearchCache.set(search, searchPrepared)
-    return searchPrepared
-}
-
-
-var all = (targets, options) => {
-    var results = []; results.total = targets.length // this total can be wrong if some targets are skipped
-
-    var limit = options?.limit || INFINITY
-
-    if(options?.key) {
-    for(var i=0;i<targets.length;i++) { var obj = targets[i]
-        var target = getValue(obj, options.key)
-        if(target == NULL) continue
-        if(!isPrepared(target)) target = getPrepared(target)
-        var result = new_result(target.target, {_score: target._score, obj: obj})
-        results.push(result); if(results.length >= limit) return results
-    }
-    } else if(options?.keys) {
-    for(var i=0;i<targets.length;i++) { var obj = targets[i]
-        var objResults = new KeysResult(options.keys.length)
-        for (var keyI = options.keys.length - 1; keyI >= 0; --keyI) {
-        var target = getValue(obj, options.keys[keyI])
-        if(!target) { objResults[keyI] = noTarget; continue }
-        if(!isPrepared(target)) target = getPrepared(target)
-        target._score = NEGATIVE_INFINITY
-        target._indexes.len = 0
-        objResults[keyI] = target
-        }
-        objResults.obj = obj
-        objResults._score = NEGATIVE_INFINITY
-        results.push(objResults); if(results.length >= limit) return results
-    }
-    } else {
-    for(var i=0;i<targets.length;i++) { var target = targets[i]
-        if(target == NULL) continue
-        if(!isPrepared(target)) target = getPrepared(target)
-        target._score = NEGATIVE_INFINITY
-        target._indexes.len = 0
-        results.push(target); if(results.length >= limit) return results
-    }
-    }
-
-    return results
-}
-
-
-var algorithm = (preparedSearch, prepared, allowSpaces=false, allowPartialMatch=false) => {
-    if(allowSpaces===false && preparedSearch.containsSpace) return algorithmSpaces(preparedSearch, prepared, allowPartialMatch)
-
-    var searchLower      = preparedSearch._lower
-    var searchLowerCodes = preparedSearch.lowerCodes
-    var searchLowerCode  = searchLowerCodes[0]
-    var targetLowerCodes = prepared._targetLowerCodes
-    var searchLen        = searchLowerCodes.length
-    var targetLen        = targetLowerCodes.length
-    var searchI          = 0 // where we at
-    var targetI          = 0 // where you at
-    var matchesSimpleLen = 0
-
-    // very basic fuzzy match; to remove non-matching targets ASAP!
-    // walk through target. find sequential matches.
-    // if all chars aren't found then exit
-    for(;;) {
-    var isMatch = searchLowerCode === targetLowerCodes[targetI]
-    if(isMatch) {
-        matchesSimple[matchesSimpleLen++] = targetI
-        ++searchI; if(searchI === searchLen) break
-        searchLowerCode = searchLowerCodes[searchI]
-    }
-    ++targetI; if(targetI >= targetLen) return NULL // Failed to find searchI
-    }
-
-    var searchI = 0
-    var successStrict = false
-    var matchesStrictLen = 0
-
-    var nextBeginningIndexes = prepared._nextBeginningIndexes
-    if(nextBeginningIndexes === NULL) nextBeginningIndexes = prepared._nextBeginningIndexes = prepareNextBeginningIndexes(prepared.target)
-    targetI = matchesSimple[0]===0 ? 0 : nextBeginningIndexes[matchesSimple[0]-1]
-
-    // Our target string successfully matched all characters in sequence!
-    // Let's try a more advanced and strict test to improve the score
-    // only count it as a match if it's consecutive or a beginning character!
-    var backtrackCount = 0
-    if(targetI !== targetLen) for(;;) {
-    if(targetI >= targetLen) {
-        // We failed to find a good spot for this search char, go back to the previous search char and force it forward
-        if(searchI <= 0) break // We failed to push chars forward for a better match
-
-        ++backtrackCount; if(backtrackCount > 200) break // exponential backtracking is taking too long, just give up and return a bad match
-
-        --searchI
-        var lastMatch = matchesStrict[--matchesStrictLen]
-        targetI = nextBeginningIndexes[lastMatch]
-
-    } else {
-        var isMatch = searchLowerCodes[searchI] === targetLowerCodes[targetI]
-        if(isMatch) {
-        matchesStrict[matchesStrictLen++] = targetI
-        ++searchI; if(searchI === searchLen) { successStrict = true; break }
-        ++targetI
-        } else {
-        targetI = nextBeginningIndexes[targetI]
-        }
-    }
-    }
-
-    // check if it's a substring match
-    var substringIndex = searchLen <= 1 ? -1 : prepared._targetLower.indexOf(searchLower, matchesSimple[0]) // perf: this is slow
-    var isSubstring = !!~substringIndex
-    var isSubstringBeginning = !isSubstring ? false : substringIndex===0 || prepared._nextBeginningIndexes[substringIndex-1] === substringIndex
-
-    // if it's a substring match but not at a beginning index, let's try to find a substring starting at a beginning index for a better score
-    if(isSubstring && !isSubstringBeginning) {
-    for(var i=0; i<nextBeginningIndexes.length; i=nextBeginningIndexes[i]) {
-        if(i <= substringIndex) continue
-
-        for(var s=0; s<searchLen; s++) if(searchLowerCodes[s] !== prepared._targetLowerCodes[i+s]) break
-        if(s === searchLen) { substringIndex = i; isSubstringBeginning = true; break }
-    }
-    }
-
-    // tally up the score & keep track of matches for highlighting later
-    // if it's a simple match, we'll switch to a substring match if a substring exists
-    // if it's a strict match, we'll switch to a substring match only if that's a better score
-
-    var calculateScore = matches => {
-    var score = 0
-
-    var extraMatchGroupCount = 0
-    for(var i = 1; i < searchLen; ++i) {
-        if(matches[i] - matches[i-1] !== 1) {score -= matches[i]; ++extraMatchGroupCount}
-    }
-    var unmatchedDistance = matches[searchLen-1] - matches[0] - (searchLen-1)
-
-    score -= (12+unmatchedDistance) * extraMatchGroupCount // penality for more groups
-
-    if(matches[0] !== 0) score -= matches[0]*matches[0]*.2 // penality for not starting near the beginning
-
-    if(!successStrict) {
-        score *= 1000
-    } else {
-        // successStrict on a target with too many beginning indexes loses points for being a bad target
-        var uniqueBeginningIndexes = 1
-        for(var i = nextBeginningIndexes[0]; i < targetLen; i=nextBeginningIndexes[i]) ++uniqueBeginningIndexes
-
-        if(uniqueBeginningIndexes > 24) score *= (uniqueBeginningIndexes-24)*10 // quite arbitrary numbers here ...
-    }
-
-    score -= (targetLen - searchLen)/2 // penality for longer targets
-
-    if(isSubstring)          score /= 1+searchLen*searchLen*1 // bonus for being a full substring
-    if(isSubstringBeginning) score /= 1+searchLen*searchLen*1 // bonus for substring starting on a beginningIndex
-
-    score -= (targetLen - searchLen)/2 // penality for longer targets
-
-    return score
-    }
-
-    if(!successStrict) {
-    if(isSubstring) for(var i=0; i<searchLen; ++i) matchesSimple[i] = substringIndex+i // at this point it's safe to overwrite matchehsSimple with substr matches
-    var matchesBest = matchesSimple
-    var score = calculateScore(matchesBest)
-    } else {
-    if(isSubstringBeginning) {
-        for(var i=0; i<searchLen; ++i) matchesSimple[i] = substringIndex+i // at this point it's safe to overwrite matchehsSimple with substr matches
-        var matchesBest = matchesSimple
-        var score = calculateScore(matchesSimple)
-    } else {
-        var matchesBest = matchesStrict
-        var score = calculateScore(matchesStrict)
-    }
-    }
-
-    prepared._score = score
-
-    for(var i = 0; i < searchLen; ++i) prepared._indexes[i] = matchesBest[i]
-    prepared._indexes.len = searchLen
-
-    const result    = new Result()
-    result.target   = prepared.target
-    result._score   = prepared._score
-    result._indexes = prepared._indexes
-    return result
-}
-var algorithmSpaces = (preparedSearch, target, allowPartialMatch) => {
-    var seen_indexes = new Set()
-    var score = 0
-    var result = NULL
-
-    var first_seen_index_last_search = 0
-    var searches = preparedSearch.spaceSearches
-    var searchesLen = searches.length
-    var changeslen = 0
-
-    // Return _nextBeginningIndexes back to its normal state
-    var resetNextBeginningIndexes = () => {
-    for(let i=changeslen-1; i>=0; i--) target._nextBeginningIndexes[nextBeginningIndexesChanges[i*2 + 0]] = nextBeginningIndexesChanges[i*2 + 1]
-    }
-
-    var hasAtLeast1Match = false
-    for(var i=0; i<searchesLen; ++i) {
-    allowPartialMatchScores[i] = NEGATIVE_INFINITY
-    var search = searches[i]
-
-    result = algorithm(search, target)
-    if(allowPartialMatch) {
-        if(result === NULL) continue
-        hasAtLeast1Match = true
-    } else {
-        if(result === NULL) {resetNextBeginningIndexes(); return NULL}
-    }
-
-    // if not the last search, we need to mutate _nextBeginningIndexes for the next search
-    var isTheLastSearch = i === searchesLen - 1
-    if(!isTheLastSearch) {
-        var indexes = result._indexes
-
-        var indexesIsConsecutiveSubstring = true
-        for(let i=0; i<indexes.len-1; i++) {
-        if(indexes[i+1] - indexes[i] !== 1) {
-            indexesIsConsecutiveSubstring = false; break;
-        }
-        }
-
-        if(indexesIsConsecutiveSubstring) {
-        var newBeginningIndex = indexes[indexes.len-1] + 1
-        var toReplace = target._nextBeginningIndexes[newBeginningIndex-1]
-        for(let i=newBeginningIndex-1; i>=0; i--) {
-            if(toReplace !== target._nextBeginningIndexes[i]) break
-            target._nextBeginningIndexes[i] = newBeginningIndex
-            nextBeginningIndexesChanges[changeslen*2 + 0] = i
-            nextBeginningIndexesChanges[changeslen*2 + 1] = toReplace
-            changeslen++
-        }
-        }
-    }
-
-    score += result._score / searchesLen
-    allowPartialMatchScores[i] = result._score / searchesLen
-
-    // dock points based on order otherwise "c man" returns Manifest.cpp instead of CheatManager.h
-    if(result._indexes[0] < first_seen_index_last_search) {
-        score -= (first_seen_index_last_search - result._indexes[0]) * 2
-    }
-    first_seen_index_last_search = result._indexes[0]
-
-    for(var j=0; j<result._indexes.len; ++j) seen_indexes.add(result._indexes[j])
-    }
-
-    if(allowPartialMatch && !hasAtLeast1Match) return NULL
-
-    resetNextBeginningIndexes()
-
-    // allows a search with spaces that's an exact substring to score well
-    var allowSpacesResult = algorithm(preparedSearch, target, /*allowSpaces=*/true)
-    if(allowSpacesResult !== NULL && allowSpacesResult._score > score) {
-    if(allowPartialMatch) {
-        for(var i=0; i<searchesLen; ++i) {
-        allowPartialMatchScores[i] = allowSpacesResult._score / searchesLen
-        }
-    }
-    return allowSpacesResult
-    }
-
-    if(allowPartialMatch) result = target
-    result._score = score
-
-    var i = 0
-    for (let index of seen_indexes) result._indexes[i++] = index
-    result._indexes.len = i
-
-    return result
-}
-
-// we use this instead of just .normalize('NFD').replace(/[\u0300-\u036f]/g, '') because that screws with japanese characters
-var remove_accents = (str) => str.replace(/\p{Script=Latin}+/gu, match => match.normalize('NFD')).replace(/[\u0300-\u036f]/g, '')
-
-var prepareLowerInfo = (str) => {
-    str = remove_accents(str)
-    var strLen = str.length
-    var lower = str.toLowerCase()
-    var lowerCodes = [] // new Array(strLen)    sparse array is too slow
-    var bitflags = 0
-    var containsSpace = false // space isn't stored in bitflags because of how searching with a space works
-
-    for(var i = 0; i < strLen; ++i) {
-    var lowerCode = lowerCodes[i] = lower.charCodeAt(i)
-
-    if(lowerCode === 32) {
-        containsSpace = true
-        continue // it's important that we don't set any bitflags for space
-    }
-
-    var bit = lowerCode>=97&&lowerCode<=122 ? lowerCode-97 // alphabet
-            : lowerCode>=48&&lowerCode<=57  ? 26           // numbers
-                                                            // 3 bits available
-            : lowerCode<=127                ? 30           // other ascii
-            :                                 31           // other utf8
-    bitflags |= 1<<bit
-    }
-
-    return {lowerCodes:lowerCodes, bitflags:bitflags, containsSpace:containsSpace, _lower:lower}
-}
-var prepareBeginningIndexes = (target) => {
-    var targetLen = target.length
-    var beginningIndexes = []; var beginningIndexesLen = 0
-    var wasUpper = false
-    var wasAlphanum = false
-    for(var i = 0; i < targetLen; ++i) {
-    var targetCode = target.charCodeAt(i)
-    var isUpper = targetCode>=65&&targetCode<=90
-    var isAlphanum = isUpper || targetCode>=97&&targetCode<=122 || targetCode>=48&&targetCode<=57
-    var isBeginning = isUpper && !wasUpper || !wasAlphanum || !isAlphanum
-    wasUpper = isUpper
-    wasAlphanum = isAlphanum
-    if(isBeginning) beginningIndexes[beginningIndexesLen++] = i
-    }
-    return beginningIndexes
-}
-var prepareNextBeginningIndexes = (target) => {
-    target = remove_accents(target)
-    var targetLen = target.length
-    var beginningIndexes = prepareBeginningIndexes(target)
-    var nextBeginningIndexes = [] // new Array(targetLen)     sparse array is too slow
-    var lastIsBeginning = beginningIndexes[0]
-    var lastIsBeginningI = 0
-    for(var i = 0; i < targetLen; ++i) {
-    if(lastIsBeginning > i) {
-        nextBeginningIndexes[i] = lastIsBeginning
-    } else {
-        lastIsBeginning = beginningIndexes[++lastIsBeginningI]
-        nextBeginningIndexes[i] = lastIsBeginning===undefined ? targetLen : lastIsBeginning
-    }
-    }
-    return nextBeginningIndexes
-}
-
-var preparedCache       = new Map()
-var preparedSearchCache = new Map()
-
-// the theory behind these being globals is to reduce garbage collection by not making new arrays
-var matchesSimple = []; var matchesStrict = []
-var nextBeginningIndexesChanges = [] // allows straw berry to match strawberry well, by modifying the end of a substring to be considered a beginning index for the rest of the search
-var keysSpacesBestScores = []; var allowPartialMatchScores = []
-var tmpTargets = []; var tmpResults = []
-
-// prop = 'key'                  2.5ms optimized for this case, seems to be about as fast as direct obj[prop]
-// prop = 'key1.key2'            10ms
-// prop = ['key1', 'key2']       27ms
-// prop = obj => obj.tags.join() ??ms
-var getValue = (obj, prop) => {
-    var tmp = obj[prop]; if(tmp !== undefined) return tmp
-    if(typeof prop === 'function') return prop(obj) // this should run first. but that makes string props slower
-    var segs = prop
-    if(!Array.isArray(prop)) segs = prop.split('.')
-    var len = segs.length
-    var i = -1
-    while (obj && (++i < len)) obj = obj[segs[i]]
-    return obj
-}
-
-var isPrepared = (x) => { return typeof x === 'object' && typeof x._bitflags === 'number' }
-var INFINITY = Infinity; var NEGATIVE_INFINITY = -INFINITY
-var noResults = []; noResults.total = 0
-var NULL = null
-
-var noTarget = prepare('')
-
-// Hacked version of https://github.com/lemire/FastPriorityQueue.js
-var fastpriorityqueue=r=>{var e=[],o=0,a={},v=r=>{for(var a=0,v=e[a],c=1;c<o;){var s=c+1;a=c,s<o&&e[s]._score<e[c]._score&&(a=s),e[a-1>>1]=e[a],c=1+(a<<1)}for(var f=a-1>>1;a>0&&v._score<e[f]._score;f=(a=f)-1>>1)e[a]=e[f];e[a]=v};return a.add=(r=>{var a=o;e[o++]=r;for(var v=a-1>>1;a>0&&r._score<e[v]._score;v=(a=v)-1>>1)e[a]=e[v];e[a]=r}),a.poll=(r=>{if(0!==o){var a=e[0];return e[0]=e[--o],v(),a}}),a.peek=(r=>{if(0!==o)return e[0]}),a.replaceTop=(r=>{e[0]=r,v()}),a}
-var q = fastpriorityqueue() // reuse this

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,232 @@
+.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 },
+    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 },
+    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;
+    }
+}

DMSGreeter.qml

@@ -0,0 +1,11 @@
+import QtQuick
+import Quickshell
+import Quickshell.Services.Greetd
+import qs.Common
+import qs.Modules.Greetd
+
+Scope {
+    id: root
+
+    GreeterSurface {}
+}

DMSShell.qml

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

DMSShellIPC.qml

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

Modals/BluetoothPairingModal.qml

@@ -0,0 +1,364 @@
+import QtQuick
+import qs.Common
+import qs.Modals.Common
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: root
+
+    layerNamespace: "dms:bluetooth-pairing"
+
+    property string deviceName: ""
+    property string deviceAddress: ""
+    property string requestType: ""
+    property string token: ""
+    property int passkey: 0
+    property string pinInput: ""
+    property string passkeyInput: ""
+
+    function show(pairingData) {
+        token = pairingData.token || ""
+        deviceName = pairingData.deviceName || ""
+        deviceAddress = pairingData.deviceAddr || ""
+        requestType = pairingData.requestType || ""
+        passkey = pairingData.passkey || 0
+        pinInput = ""
+        passkeyInput = ""
+
+        open()
+        Qt.callLater(() => {
+            if (contentLoader.item) {
+                if (requestType === "pin" && contentLoader.item.pinInputField) {
+                    contentLoader.item.pinInputField.forceActiveFocus()
+                } else if (requestType === "passkey" && contentLoader.item.passkeyInputField) {
+                    contentLoader.item.passkeyInputField.forceActiveFocus()
+                }
+            }
+        })
+    }
+
+    shouldBeVisible: false
+    width: 420
+    height: contentLoader.item ? contentLoader.item.implicitHeight + Theme.spacingM * 2 : 240
+
+    onShouldBeVisibleChanged: () => {
+        if (!shouldBeVisible) {
+            pinInput = ""
+            passkeyInput = ""
+        }
+    }
+
+    onOpened: {
+        Qt.callLater(() => {
+            if (contentLoader.item) {
+                if (requestType === "pin" && contentLoader.item.pinInputField) {
+                    contentLoader.item.pinInputField.forceActiveFocus()
+                } else if (requestType === "passkey" && contentLoader.item.passkeyInputField) {
+                    contentLoader.item.passkeyInputField.forceActiveFocus()
+                }
+            }
+        })
+    }
+
+    onBackgroundClicked: () => {
+        DMSService.bluetoothCancelPairing(token)
+        close()
+        pinInput = ""
+        passkeyInput = ""
+    }
+
+    content: Component {
+        FocusScope {
+            id: pairingContent
+
+            property alias pinInputField: pinInputField
+            property alias passkeyInputField: passkeyInputField
+
+            anchors.fill: parent
+            focus: true
+            implicitHeight: mainColumn.implicitHeight
+
+            Keys.onEscapePressed: event => {
+                DMSService.bluetoothCancelPairing(token)
+                close()
+                pinInput = ""
+                passkeyInput = ""
+                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: requestType === "pin" || requestType === "passkey" ? Theme.spacingM : Theme.spacingS
+
+                Column {
+                    width: parent.width
+                    spacing: Theme.spacingXS
+
+                    StyledText {
+                        text: I18n.tr("Pair Bluetooth Device")
+                        font.pixelSize: Theme.fontSizeLarge
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                    }
+
+                    StyledText {
+                        text: {
+                            if (requestType === "confirm")
+                                return I18n.tr("Confirm passkey for ") + deviceName
+                            if (requestType === "authorize")
+                                return I18n.tr("Authorize pairing with ") + deviceName
+                            if (requestType.startsWith("authorize-service"))
+                                return I18n.tr("Authorize service for ") + deviceName
+                            if (requestType === "pin")
+                                return I18n.tr("Enter PIN for ") + deviceName
+                            if (requestType === "passkey")
+                                return I18n.tr("Enter passkey for ") + deviceName
+                            return deviceName
+                        }
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: Theme.surfaceTextMedium
+                        width: parent.width - 40
+                        elide: Text.ElideRight
+                    }
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceHover
+                    border.color: pinInputField.activeFocus ? Theme.primary : Theme.outlineStrong
+                    border.width: pinInputField.activeFocus ? 2 : 1
+                    visible: requestType === "pin"
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: () => {
+                            pinInputField.forceActiveFocus()
+                        }
+                    }
+
+                    DankTextField {
+                        id: pinInputField
+
+                        anchors.fill: parent
+                        font.pixelSize: Theme.fontSizeMedium
+                        textColor: Theme.surfaceText
+                        text: pinInput
+                        placeholderText: I18n.tr("Enter PIN")
+                        backgroundColor: "transparent"
+                        enabled: root.shouldBeVisible
+                        onTextEdited: () => {
+                            pinInput = text
+                        }
+                        onAccepted: () => {
+                            submitPairing()
+                        }
+                    }
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceHover
+                    border.color: passkeyInputField.activeFocus ? Theme.primary : Theme.outlineStrong
+                    border.width: passkeyInputField.activeFocus ? 2 : 1
+                    visible: requestType === "passkey"
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: () => {
+                            passkeyInputField.forceActiveFocus()
+                        }
+                    }
+
+                    DankTextField {
+                        id: passkeyInputField
+
+                        anchors.fill: parent
+                        font.pixelSize: Theme.fontSizeMedium
+                        textColor: Theme.surfaceText
+                        text: passkeyInput
+                        placeholderText: I18n.tr("Enter 6-digit passkey")
+                        backgroundColor: "transparent"
+                        enabled: root.shouldBeVisible
+                        onTextEdited: () => {
+                            passkeyInput = text
+                        }
+                        onAccepted: () => {
+                            submitPairing()
+                        }
+                    }
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: 56
+                    radius: Theme.cornerRadius
+                    color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                    visible: requestType === "confirm"
+
+                    Column {
+                        anchors.centerIn: parent
+                        spacing: 2
+
+                        StyledText {
+                            text: I18n.tr("Passkey:")
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceTextMedium
+                            anchors.horizontalCenter: parent.horizontalCenter
+                        }
+
+                        StyledText {
+                            text: String(passkey).padStart(6, "0")
+                            font.pixelSize: Theme.fontSizeXLarge
+                            color: Theme.surfaceText
+                            font.weight: Font.Bold
+                            anchors.horizontalCenter: parent.horizontalCenter
+                        }
+                    }
+                }
+
+                Item {
+                    width: parent.width
+                    height: 36
+
+                    Row {
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingS
+
+                        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
+
+                            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
+                                onClicked: () => {
+                                    DMSService.bluetoothCancelPairing(token)
+                                    close()
+                                    pinInput = ""
+                                    passkeyInput = ""
+                                }
+                            }
+                        }
+
+                        Rectangle {
+                            width: Math.max(80, pairText.contentWidth + Theme.spacingM * 2)
+                            height: 36
+                            radius: Theme.cornerRadius
+                            color: pairArea.containsMouse ? Qt.darker(Theme.primary, 1.1) : Theme.primary
+                            enabled: {
+                                if (requestType === "pin")
+                                    return pinInput.length > 0
+                                if (requestType === "passkey")
+                                    return passkeyInput.length === 6
+                                return true
+                            }
+                            opacity: enabled ? 1 : 0.5
+
+                            StyledText {
+                                id: pairText
+
+                                anchors.centerIn: parent
+                                text: {
+                                    if (requestType === "confirm")
+                                        return I18n.tr("Confirm")
+                                    if (requestType === "authorize" || requestType.startsWith("authorize-service"))
+                                        return I18n.tr("Authorize")
+                                    return I18n.tr("Pair")
+                                }
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.background
+                                font.weight: Font.Medium
+                            }
+
+                            MouseArea {
+                                id: pairArea
+
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                enabled: parent.enabled
+                                onClicked: () => {
+                                    submitPairing()
+                                }
+                            }
+
+                            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: () => {
+                    DMSService.bluetoothCancelPairing(token)
+                    close()
+                    pinInput = ""
+                    passkeyInput = ""
+                }
+            }
+        }
+    }
+
+    function submitPairing() {
+        const secrets = {}
+
+        if (requestType === "pin") {
+            secrets["pin"] = pinInput
+        } else if (requestType === "passkey") {
+            secrets["passkey"] = passkeyInput
+        } else if (requestType === "confirm" || requestType === "authorize" || requestType.startsWith("authorize-service")) {
+            secrets["decision"] = "yes"
+        }
+
+        DMSService.bluetoothSubmitPairing(token, secrets, true, response => {
+            if (response.error) {
+                ToastService.showError(I18n.tr("Pairing failed"), response.error)
+            }
+        })
+
+        close()
+        pinInput = ""
+        passkeyInput = ""
+    }
+}

Modals/Clipboard/ClipboardConstants.qml

@@ -0,0 +1,19 @@
+pragma Singleton
+
+import QtQuick
+import Quickshell
+
+Singleton {
+    id: root
+    readonly property int previewLength: 100
+    readonly property int longTextThreshold: 200
+    readonly property int modalWidth: 650
+    readonly property int modalHeight: 550
+    readonly property int itemHeight: 72
+    readonly property int thumbnailSize: 48
+    readonly property int retryInterval: 50
+    readonly property int viewportBuffer: 100
+    readonly property int extendedBuffer: 200
+    readonly property int keyboardHintsHeight: 80
+    readonly property int headerHeight: 40
+}

Modals/Clipboard/ClipboardContent.qml

@@ -0,0 +1,166 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+import qs.Modals.Clipboard
+
+Item {
+    id: clipboardContent
+
+    required property var modal
+    required property var filteredModel
+    required property var clearConfirmDialog
+
+    property alias searchField: searchField
+    property alias clipboardListView: clipboardListView
+
+    anchors.fill: parent
+
+    Column {
+        anchors.fill: parent
+        anchors.margins: Theme.spacingL
+        spacing: Theme.spacingL
+        focus: false
+
+        // Header
+        ClipboardHeader {
+            id: header
+            width: parent.width
+            totalCount: modal.totalCount
+            showKeyboardHints: modal.showKeyboardHints
+            onKeyboardHintsToggled: modal.showKeyboardHints = !modal.showKeyboardHints
+            onClearAllClicked: {
+                clearConfirmDialog.show(I18n.tr("Clear All History?"), I18n.tr("This will permanently delete all clipboard history."), function () {
+                    modal.clearAll()
+                    modal.hide()
+                }, function () {})
+            }
+            onCloseClicked: modal.hide()
+        }
+
+        // Search Field
+        DankTextField {
+            id: searchField
+            width: parent.width
+            placeholderText: ""
+            leftIconName: "search"
+            showClearButton: true
+            focus: true
+            ignoreTabKeys: true
+            keyForwardTargets: [modal.modalFocusScope]
+            onTextChanged: {
+                modal.searchText = text
+                modal.updateFilteredModel()
+            }
+            Keys.onEscapePressed: function (event) {
+                modal.hide()
+                event.accepted = true
+            }
+            Component.onCompleted: {
+                Qt.callLater(function () {
+                    forceActiveFocus()
+                })
+            }
+
+            Connections {
+                target: modal
+                function onOpened() {
+                    Qt.callLater(function () {
+                        searchField.forceActiveFocus()
+                    })
+                }
+            }
+        }
+
+        // List Container
+        Rectangle {
+            width: parent.width
+            height: parent.height - ClipboardConstants.headerHeight - 70
+            radius: Theme.cornerRadius
+            color: "transparent"
+            clip: true
+
+            DankListView {
+                id: clipboardListView
+                anchors.fill: parent
+                model: filteredModel
+
+                currentIndex: clipboardContent.modal ? clipboardContent.modal.selectedIndex : 0
+                spacing: Theme.spacingXS
+                interactive: true
+                flickDeceleration: 1500
+                maximumFlickVelocity: 2000
+                boundsBehavior: Flickable.DragAndOvershootBounds
+                boundsMovement: Flickable.FollowBoundsBehavior
+                pressDelay: 0
+                flickableDirection: Flickable.VerticalFlick
+
+                function ensureVisible(index) {
+                    if (index < 0 || index >= count) {
+                        return
+                    }
+                    const itemHeight = ClipboardConstants.itemHeight + spacing
+                    const itemY = index * itemHeight
+                    const itemBottom = itemY + itemHeight
+                    if (itemY < contentY) {
+                        contentY = itemY
+                    } else if (itemBottom > contentY + height) {
+                        contentY = itemBottom - height
+                    }
+                }
+
+                onCurrentIndexChanged: {
+                    if (clipboardContent.modal && clipboardContent.modal.keyboardNavigationActive && currentIndex >= 0) {
+                        ensureVisible(currentIndex)
+                    }
+                }
+
+                StyledText {
+                    text: I18n.tr("No clipboard entries found")
+                    anchors.centerIn: parent
+                    font.pixelSize: Theme.fontSizeMedium
+                    color: Theme.surfaceVariantText
+                    visible: filteredModel.count === 0
+                }
+
+                delegate: ClipboardEntry {
+                    required property int index
+                    required property var model
+
+                    width: clipboardListView.width
+                    height: ClipboardConstants.itemHeight
+                    entryData: model.entry
+                    entryIndex: index + 1
+                    itemIndex: index
+                    isSelected: clipboardContent.modal && clipboardContent.modal.keyboardNavigationActive && index === clipboardContent.modal.selectedIndex
+                    modal: clipboardContent.modal
+                    listView: clipboardListView
+                    onCopyRequested: clipboardContent.modal.copyEntry(model.entry)
+                    onDeleteRequested: clipboardContent.modal.deleteEntry(model.entry)
+                }
+            }
+        }
+
+        // Spacer for keyboard hints
+        Item {
+            width: parent.width
+            height: modal.showKeyboardHints ? ClipboardConstants.keyboardHintsHeight + Theme.spacingL : 0
+
+            Behavior on height {
+                NumberAnimation {
+                    duration: Theme.shortDuration
+                    easing.type: Theme.standardEasing
+                }
+            }
+        }
+    }
+
+    // Keyboard Hints Overlay
+    ClipboardKeyboardHints {
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: Theme.spacingL
+        visible: modal.showKeyboardHints
+    }
+}

Modals/Clipboard/ClipboardEntry.qml

@@ -0,0 +1,130 @@
+import QtQuick
+import QtQuick.Effects
+import Quickshell.Io
+import qs.Common
+import qs.Widgets
+import qs.Modals.Clipboard
+
+Rectangle {
+    id: entry
+
+    required property string entryData
+    required property int entryIndex
+    required property int itemIndex
+    required property bool isSelected
+    required property var modal
+    required property var listView
+
+    signal copyRequested
+    signal deleteRequested
+
+    readonly property string entryType: modal ? modal.getEntryType(entryData) : "text"
+    readonly property string entryPreview: modal ? modal.getEntryPreview(entryData) : entryData
+
+    radius: Theme.cornerRadius
+    color: {
+        if (isSelected) {
+            return Theme.primaryPressed
+        }
+        return mouseArea.containsMouse ? Theme.primaryHoverLight : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    }
+
+    Row {
+        anchors.fill: parent
+        anchors.margins: Theme.spacingM
+        anchors.rightMargin: Theme.spacingS
+        spacing: Theme.spacingL
+
+        // Index indicator
+        Rectangle {
+            width: 24
+            height: 24
+            radius: 12
+            color: Theme.primarySelected
+            anchors.verticalCenter: parent.verticalCenter
+
+            StyledText {
+                anchors.centerIn: parent
+                text: entryIndex.toString()
+                font.pixelSize: Theme.fontSizeSmall
+                font.weight: Font.Bold
+                color: Theme.primary
+            }
+        }
+
+        // Content area
+        Row {
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width - 68
+            spacing: Theme.spacingM
+
+            // Thumbnail/Icon
+            ClipboardThumbnail {
+                width: entryType === "image" ? ClipboardConstants.thumbnailSize : Theme.iconSize
+                height: entryType === "image" ? ClipboardConstants.thumbnailSize : Theme.iconSize
+                anchors.verticalCenter: parent.verticalCenter
+                entryData: entry.entryData
+                entryType: entry.entryType
+                modal: entry.modal
+                listView: entry.listView
+                itemIndex: entry.itemIndex
+            }
+
+            // Text content
+            Column {
+                anchors.verticalCenter: parent.verticalCenter
+                width: parent.width - (entryType === "image" ? ClipboardConstants.thumbnailSize : Theme.iconSize) - Theme.spacingM
+                spacing: Theme.spacingXS
+
+                StyledText {
+                    text: {
+                        switch (entryType) {
+                        case "image":
+                            return I18n.tr("Image") + " • " + entryPreview
+                        case "long_text":
+                            return I18n.tr("Long Text")
+                        default:
+                            return I18n.tr("Text")
+                        }
+                    }
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.primary
+                    font.weight: Font.Medium
+                    width: parent.width
+                    elide: Text.ElideRight
+                }
+
+                StyledText {
+                    text: entryPreview
+                    font.pixelSize: Theme.fontSizeMedium
+                    color: Theme.surfaceText
+                    width: parent.width
+                    wrapMode: Text.WordWrap
+                    maximumLineCount: entryType === "long_text" ? 3 : 1
+                    elide: Text.ElideRight
+                }
+            }
+        }
+    }
+
+    // Delete button
+    DankActionButton {
+        anchors.right: parent.right
+        anchors.rightMargin: Theme.spacingM
+        anchors.verticalCenter: parent.verticalCenter
+        iconName: "close"
+        iconSize: Theme.iconSize - 6
+        iconColor: Theme.surfaceText
+        onClicked: deleteRequested()
+    }
+
+    // Click area
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        anchors.rightMargin: 40
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onClicked: copyRequested()
+    }
+}

Modals/Clipboard/ClipboardHeader.qml

@@ -0,0 +1,65 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+import qs.Modals.Clipboard
+
+Item {
+    id: header
+
+    property int totalCount: 0
+    property bool showKeyboardHints: false
+
+    signal keyboardHintsToggled
+    signal clearAllClicked
+    signal closeClicked
+
+    height: ClipboardConstants.headerHeight
+
+    Row {
+        anchors.left: parent.left
+        anchors.verticalCenter: parent.verticalCenter
+        spacing: Theme.spacingM
+
+        DankIcon {
+            name: "content_paste"
+            size: Theme.iconSize
+            color: Theme.primary
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        StyledText {
+            text: I18n.tr("Clipboard History") + ` (${totalCount})`
+            font.pixelSize: Theme.fontSizeLarge
+            color: Theme.surfaceText
+            font.weight: Font.Medium
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+
+    Row {
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        spacing: Theme.spacingS
+
+        DankActionButton {
+            iconName: "info"
+            iconSize: Theme.iconSize - 4
+            iconColor: showKeyboardHints ? Theme.primary : Theme.surfaceText
+            onClicked: keyboardHintsToggled()
+        }
+
+        DankActionButton {
+            iconName: "delete_sweep"
+            iconSize: Theme.iconSize
+            iconColor: Theme.surfaceText
+            onClicked: clearAllClicked()
+        }
+
+        DankActionButton {
+            iconName: "close"
+            iconSize: Theme.iconSize - 4
+            iconColor: Theme.surfaceText
+            onClicked: closeClicked()
+        }
+    }
+}

Modals/Clipboard/ClipboardHistoryModal.qml

@@ -0,0 +1,219 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Io
+import qs.Common
+import qs.Modals.Common
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: clipboardHistoryModal
+
+    layerNamespace: "dms:clipboard"
+
+    property int totalCount: 0
+    property var clipboardEntries: []
+    property string searchText: ""
+    property int selectedIndex: 0
+    property bool keyboardNavigationActive: false
+    property bool showKeyboardHints: false
+    property Component clipboardContent
+    property int activeImageLoads: 0
+    readonly property int maxConcurrentLoads: 3
+
+    function updateFilteredModel() {
+        filteredClipboardModel.clear()
+        for (var i = 0; i < clipboardModel.count; i++) {
+            const entry = clipboardModel.get(i).entry
+            if (searchText.trim().length === 0) {
+                filteredClipboardModel.append({
+                                                  "entry": entry
+                                              })
+            } else {
+                const content = getEntryPreview(entry).toLowerCase()
+                if (content.includes(searchText.toLowerCase())) {
+                    filteredClipboardModel.append({
+                                                      "entry": entry
+                                                  })
+                }
+            }
+        }
+        clipboardHistoryModal.totalCount = filteredClipboardModel.count
+        if (filteredClipboardModel.count === 0) {
+            keyboardNavigationActive = false
+            selectedIndex = 0
+        } else if (selectedIndex >= filteredClipboardModel.count) {
+            selectedIndex = filteredClipboardModel.count - 1
+        }
+    }
+
+    function toggle() {
+        if (shouldBeVisible) {
+            hide()
+        } else {
+            show()
+        }
+    }
+
+    function show() {
+        open()
+        clipboardHistoryModal.searchText = ""
+        clipboardHistoryModal.activeImageLoads = 0
+        clipboardHistoryModal.shouldHaveFocus = true
+        refreshClipboard()
+        keyboardController.reset()
+
+        Qt.callLater(function () {
+            if (contentLoader.item && contentLoader.item.searchField) {
+                contentLoader.item.searchField.text = ""
+                contentLoader.item.searchField.forceActiveFocus()
+            }
+        })
+    }
+
+    function hide() {
+        close()
+        clipboardHistoryModal.searchText = ""
+        clipboardHistoryModal.activeImageLoads = 0
+        updateFilteredModel()
+        keyboardController.reset()
+        cleanupTempFiles()
+    }
+
+    function cleanupTempFiles() {
+        Quickshell.execDetached(["sh", "-c", "rm -f /tmp/clipboard_*.png"])
+    }
+
+    function refreshClipboard() {
+        clipboardProcesses.refresh()
+    }
+
+    function copyEntry(entry) {
+        const entryId = entry.split('\t')[0]
+        Quickshell.execDetached(["sh", "-c", `cliphist decode ${entryId} | wl-copy`])
+        ToastService.showInfo(I18n.tr("Copied to clipboard"))
+        hide()
+    }
+
+    function deleteEntry(entry) {
+        clipboardProcesses.deleteEntry(entry)
+    }
+
+    function clearAll() {
+        clipboardProcesses.clearAll()
+    }
+
+    function getEntryPreview(entry) {
+        let content = entry.replace(/^\s*\d+\s+/, "")
+        if (content.includes("image/") || content.includes("binary data") || /\.(png|jpg|jpeg|gif|bmp|webp)/i.test(content)) {
+            const dimensionMatch = content.match(/(\d+)x(\d+)/)
+            if (dimensionMatch) {
+                return `Image ${dimensionMatch[1]}×${dimensionMatch[2]}`
+            }
+            const typeMatch = content.match(/\b(png|jpg|jpeg|gif|bmp|webp)\b/i)
+            if (typeMatch) {
+                return `Image (${typeMatch[1].toUpperCase()})`
+            }
+            return "Image"
+        }
+        if (content.length > ClipboardConstants.previewLength) {
+            return content.substring(0, ClipboardConstants.previewLength) + "..."
+        }
+        return content
+    }
+
+    function getEntryType(entry) {
+        if (entry.includes("image/") || entry.includes("binary data") || /\.(png|jpg|jpeg|gif|bmp|webp)/i.test(entry) || /\b(png|jpg|jpeg|gif|bmp|webp)\b/i.test(entry)) {
+            return "image"
+        }
+        if (entry.length > ClipboardConstants.longTextThreshold) {
+            return "long_text"
+        }
+        return "text"
+    }
+
+    visible: false
+    width: ClipboardConstants.modalWidth
+    height: ClipboardConstants.modalHeight
+    backgroundColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    cornerRadius: Theme.cornerRadius
+    borderColor: Theme.outlineMedium
+    borderWidth: 1
+    enableShadow: true
+    onBackgroundClicked: hide()
+    modalFocusScope.Keys.onPressed: function (event) {
+        keyboardController.handleKey(event)
+    }
+    content: clipboardContent
+
+    ClipboardKeyboardController {
+        id: keyboardController
+        modal: clipboardHistoryModal
+    }
+
+    ConfirmModal {
+        id: clearConfirmDialog
+        confirmButtonText: I18n.tr("Clear All")
+        confirmButtonColor: Theme.primary
+        onVisibleChanged: {
+            if (visible) {
+                clipboardHistoryModal.shouldHaveFocus = false
+            } else if (clipboardHistoryModal.shouldBeVisible) {
+                clipboardHistoryModal.shouldHaveFocus = true
+                clipboardHistoryModal.modalFocusScope.forceActiveFocus()
+                if (clipboardHistoryModal.contentLoader.item && clipboardHistoryModal.contentLoader.item.searchField) {
+                    clipboardHistoryModal.contentLoader.item.searchField.forceActiveFocus()
+                }
+            }
+        }
+    }
+
+    property alias filteredClipboardModel: filteredClipboardModel
+    property alias clipboardModel: clipboardModel
+    property var confirmDialog: clearConfirmDialog
+
+    ListModel {
+        id: clipboardModel
+    }
+
+    ListModel {
+        id: filteredClipboardModel
+    }
+
+    ClipboardProcesses {
+        id: clipboardProcesses
+        modal: clipboardHistoryModal
+        clipboardModel: clipboardModel
+        filteredClipboardModel: filteredClipboardModel
+    }
+
+    IpcHandler {
+        function open(): string {
+            clipboardHistoryModal.show()
+            return "CLIPBOARD_OPEN_SUCCESS"
+        }
+
+        function close(): string {
+            clipboardHistoryModal.hide()
+            return "CLIPBOARD_CLOSE_SUCCESS"
+        }
+
+        function toggle(): string {
+            clipboardHistoryModal.toggle()
+            return "CLIPBOARD_TOGGLE_SUCCESS"
+        }
+
+        target: "clipboard"
+    }
+
+    clipboardContent: Component {
+        ClipboardContent {
+            modal: clipboardHistoryModal
+            filteredModel: filteredClipboardModel
+            clearConfirmDialog: clipboardHistoryModal.confirmDialog
+        }
+    }
+}

Modals/Clipboard/ClipboardKeyboardController.qml

@@ -0,0 +1,131 @@
+import QtQuick
+import qs.Common
+
+QtObject {
+    id: keyboardController
+
+    required property var modal
+
+    function reset() {
+        modal.selectedIndex = 0
+        modal.keyboardNavigationActive = false
+        modal.showKeyboardHints = false
+    }
+
+    function selectNext() {
+        if (!modal.filteredClipboardModel || modal.filteredClipboardModel.count === 0) {
+            return
+        }
+        modal.keyboardNavigationActive = true
+        modal.selectedIndex = Math.min(modal.selectedIndex + 1, modal.filteredClipboardModel.count - 1)
+    }
+
+    function selectPrevious() {
+        if (!modal.filteredClipboardModel || modal.filteredClipboardModel.count === 0) {
+            return
+        }
+        modal.keyboardNavigationActive = true
+        modal.selectedIndex = Math.max(modal.selectedIndex - 1, 0)
+    }
+
+    function copySelected() {
+        if (!modal.filteredClipboardModel || modal.filteredClipboardModel.count === 0 || modal.selectedIndex < 0 || modal.selectedIndex >= modal.filteredClipboardModel.count) {
+            return
+        }
+        const selectedEntry = modal.filteredClipboardModel.get(modal.selectedIndex).entry
+        modal.copyEntry(selectedEntry)
+    }
+
+    function deleteSelected() {
+        if (!modal.filteredClipboardModel || modal.filteredClipboardModel.count === 0 || modal.selectedIndex < 0 || modal.selectedIndex >= modal.filteredClipboardModel.count) {
+            return
+        }
+        const selectedEntry = modal.filteredClipboardModel.get(modal.selectedIndex).entry
+        modal.deleteEntry(selectedEntry)
+    }
+
+    function handleKey(event) {
+        if (event.key === Qt.Key_Escape) {
+            if (modal.keyboardNavigationActive) {
+                modal.keyboardNavigationActive = false
+                event.accepted = true
+            } else {
+                modal.hide()
+                event.accepted = true
+            }
+        } else if (event.key === Qt.Key_Down || event.key === Qt.Key_Tab) {
+            if (!modal.keyboardNavigationActive) {
+                modal.keyboardNavigationActive = true
+                modal.selectedIndex = 0
+                event.accepted = true
+            } else {
+                selectNext()
+                event.accepted = true
+            }
+        } else if (event.key === Qt.Key_Up || event.key === Qt.Key_Backtab) {
+            if (!modal.keyboardNavigationActive) {
+                modal.keyboardNavigationActive = true
+                modal.selectedIndex = 0
+                event.accepted = true
+            } else if (modal.selectedIndex === 0) {
+                modal.keyboardNavigationActive = false
+                event.accepted = true
+            } else {
+                selectPrevious()
+                event.accepted = true
+            }
+        } else if (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) {
+            if (!modal.keyboardNavigationActive) {
+                modal.keyboardNavigationActive = true
+                modal.selectedIndex = 0
+            } else {
+                selectNext()
+            }
+            event.accepted = true
+        } else if (event.key === Qt.Key_P && event.modifiers & Qt.ControlModifier) {
+            if (!modal.keyboardNavigationActive) {
+                modal.keyboardNavigationActive = true
+                modal.selectedIndex = 0
+            } else if (modal.selectedIndex === 0) {
+                modal.keyboardNavigationActive = false
+            } else {
+                selectPrevious()
+            }
+            event.accepted = true
+        } else if (event.key === Qt.Key_J && event.modifiers & Qt.ControlModifier) {
+            if (!modal.keyboardNavigationActive) {
+                modal.keyboardNavigationActive = true
+                modal.selectedIndex = 0
+            } else {
+                selectNext()
+            }
+            event.accepted = true
+        } else if (event.key === Qt.Key_K && event.modifiers & Qt.ControlModifier) {
+            if (!modal.keyboardNavigationActive) {
+                modal.keyboardNavigationActive = true
+                modal.selectedIndex = 0
+            } else if (modal.selectedIndex === 0) {
+                modal.keyboardNavigationActive = false
+            } else {
+                selectPrevious()
+            }
+            event.accepted = true
+        } else if (event.key === Qt.Key_Delete && (event.modifiers & Qt.ShiftModifier)) {
+            modal.clearAll()
+            modal.hide()
+            event.accepted = true
+        } else if (modal.keyboardNavigationActive) {
+            if ((event.key === Qt.Key_C && (event.modifiers & Qt.ControlModifier)) || event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
+                copySelected()
+                event.accepted = true
+            } else if (event.key === Qt.Key_Delete) {
+                deleteSelected()
+                event.accepted = true
+            }
+        }
+        if (event.key === Qt.Key_F10) {
+            modal.showKeyboardHints = !modal.showKeyboardHints
+            event.accepted = true
+        }
+    }
+}

Modals/Clipboard/ClipboardKeyboardHints.qml

@@ -0,0 +1,44 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+import qs.Modals.Clipboard
+
+Rectangle {
+    id: keyboardHints
+
+    readonly property string hintsText: I18n.tr("Shift+Del: Clear All • Esc: Close")
+
+    height: ClipboardConstants.keyboardHintsHeight
+    radius: Theme.cornerRadius
+    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95)
+    border.color: Theme.primary
+    border.width: 2
+    opacity: visible ? 1 : 0
+    z: 100
+
+    Column {
+        anchors.centerIn: parent
+        spacing: 2
+
+        StyledText {
+            text: "↑/↓: Navigate • Enter/Ctrl+C: Copy • Del: Delete • F10: Help"
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceText
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        StyledText {
+            text: keyboardHints.hintsText
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceText
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+
+    Behavior on opacity {
+        NumberAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+}

Modals/Clipboard/ClipboardProcesses.qml

@@ -0,0 +1,94 @@
+import QtQuick
+import Quickshell.Io
+
+QtObject {
+    id: clipboardProcesses
+
+    required property var modal
+    required property var clipboardModel
+    required property var filteredClipboardModel
+
+    // Load clipboard entries
+    property var loadProcess: Process {
+        id: loadProcess
+        command: ["cliphist", "list"]
+        running: false
+
+        stdout: StdioCollector {
+            onStreamFinished: {
+                clipboardModel.clear()
+                const lines = text.trim().split('\n')
+                for (const line of lines) {
+                    if (line.trim().length > 0) {
+                        clipboardModel.append({
+                                                  "entry": line
+                                              })
+                    }
+                }
+                modal.updateFilteredModel()
+            }
+        }
+    }
+
+    // Delete single entry
+    property var deleteProcess: Process {
+        id: deleteProcess
+        property string deletedEntry: ""
+        running: false
+
+        onExited: exitCode => {
+                      if (exitCode === 0) {
+                          for (var i = 0; i < clipboardModel.count; i++) {
+                              if (clipboardModel.get(i).entry === deleteProcess.deletedEntry) {
+                                  clipboardModel.remove(i)
+                                  break
+                              }
+                          }
+                          for (var j = 0; j < filteredClipboardModel.count; j++) {
+                              if (filteredClipboardModel.get(j).entry === deleteProcess.deletedEntry) {
+                                  filteredClipboardModel.remove(j)
+                                  break
+                              }
+                          }
+                          modal.totalCount = filteredClipboardModel.count
+                          if (filteredClipboardModel.count === 0) {
+                              modal.keyboardNavigationActive = false
+                              modal.selectedIndex = 0
+                          } else if (modal.selectedIndex >= filteredClipboardModel.count) {
+                              modal.selectedIndex = filteredClipboardModel.count - 1
+                          }
+                      } else {
+                          console.warn("Failed to delete clipboard entry")
+                      }
+                  }
+    }
+
+    // Clear all entries
+    property var clearProcess: Process {
+        id: clearProcess
+        command: ["cliphist", "wipe"]
+        running: false
+
+        onExited: exitCode => {
+                      if (exitCode === 0) {
+                          clipboardModel.clear()
+                          filteredClipboardModel.clear()
+                          modal.totalCount = 0
+                      }
+                  }
+    }
+
+    function refresh() {
+        loadProcess.running = true
+    }
+
+    function deleteEntry(entry) {
+        deleteProcess.deletedEntry = entry
+        deleteProcess.command = ["sh", "-c", `echo '${entry.replace(/'/g, "'\\''")}' | cliphist delete`]
+        deleteProcess.running = true
+    }
+
+    function clearAll() {
+        clearProcess.running = true
+    }
+}

Modals/Clipboard/ClipboardThumbnail.qml

@@ -0,0 +1,174 @@
+import QtQuick
+import QtQuick.Effects
+import Quickshell.Io
+import qs.Common
+import qs.Widgets
+import qs.Modals.Clipboard
+
+Item {
+    id: thumbnail
+
+    required property string entryData
+    required property string entryType
+    required property var modal
+    required property var listView
+    required property int itemIndex
+
+    Image {
+        id: thumbnailImage
+
+        property string entryId: entryData.split('\t')[0]
+        property bool isVisible: false
+        property string cachedImageData: ""
+        property bool loadQueued: false
+
+        anchors.fill: parent
+        source: ""
+        fillMode: Image.PreserveAspectCrop
+        smooth: true
+        cache: false
+        visible: false
+        asynchronous: true
+        sourceSize.width: 128
+        sourceSize.height: 128
+
+        onCachedImageDataChanged: {
+            if (cachedImageData) {
+                source = ""
+                source = `data:image/png;base64,${cachedImageData}`
+            }
+        }
+
+        function tryLoadImage() {
+            if (!loadQueued && entryType === "image" && !cachedImageData) {
+                loadQueued = true
+                if (modal.activeImageLoads < modal.maxConcurrentLoads) {
+                    modal.activeImageLoads++
+                    imageLoader.running = true
+                } else {
+                    retryTimer.restart()
+                }
+            }
+        }
+
+        Timer {
+            id: retryTimer
+            interval: ClipboardConstants.retryInterval
+            onTriggered: {
+                if (thumbnailImage.loadQueued && !imageLoader.running) {
+                    if (modal.activeImageLoads < modal.maxConcurrentLoads) {
+                        modal.activeImageLoads++
+                        imageLoader.running = true
+                    } else {
+                        retryTimer.restart()
+                    }
+                }
+            }
+        }
+
+        Component.onCompleted: {
+            if (entryType !== "image") {
+                return
+            }
+
+            // Check if item is visible on screen initially
+            const itemY = itemIndex * (ClipboardConstants.itemHeight + listView.spacing)
+            const viewTop = listView.contentY
+            const viewBottom = viewTop + listView.height
+            isVisible = (itemY + ClipboardConstants.itemHeight >= viewTop && itemY <= viewBottom)
+
+            if (isVisible) {
+                tryLoadImage()
+            }
+        }
+
+        Connections {
+            target: listView
+            function onContentYChanged() {
+                if (entryType !== "image") {
+                    return
+                }
+
+                const itemY = itemIndex * (ClipboardConstants.itemHeight + listView.spacing)
+                const viewTop = listView.contentY - ClipboardConstants.viewportBuffer
+                const viewBottom = viewTop + listView.height + ClipboardConstants.extendedBuffer
+                const nowVisible = (itemY + ClipboardConstants.itemHeight >= viewTop && itemY <= viewBottom)
+
+                if (nowVisible && !thumbnailImage.isVisible) {
+                    thumbnailImage.isVisible = true
+                    thumbnailImage.tryLoadImage()
+                }
+            }
+        }
+
+        Process {
+            id: imageLoader
+            running: false
+            command: ["sh", "-c", `cliphist decode ${thumbnailImage.entryId} | base64 -w 0`]
+
+            stdout: StdioCollector {
+                onStreamFinished: {
+                    const imageData = text.trim()
+                    if (imageData && imageData.length > 0) {
+                        thumbnailImage.cachedImageData = imageData
+                    }
+                }
+            }
+
+            onExited: exitCode => {
+                          thumbnailImage.loadQueued = false
+                          if (modal.activeImageLoads > 0) {
+                              modal.activeImageLoads--
+                          }
+                          if (exitCode !== 0) {
+                              console.warn("Failed to load clipboard image:", thumbnailImage.entryId)
+                          }
+                      }
+        }
+    }
+
+    // Rounded mask effect for images
+    MultiEffect {
+        anchors.fill: parent
+        anchors.margins: 2
+        source: thumbnailImage
+        maskEnabled: true
+        maskSource: clipboardCircularMask
+        visible: entryType === "image" && thumbnailImage.status === Image.Ready && thumbnailImage.source != ""
+        maskThresholdMin: 0.5
+        maskSpreadAtMin: 1
+    }
+
+    Item {
+        id: clipboardCircularMask
+        width: ClipboardConstants.thumbnailSize - 4
+        height: ClipboardConstants.thumbnailSize - 4
+        layer.enabled: true
+        layer.smooth: true
+        visible: false
+
+        Rectangle {
+            anchors.fill: parent
+            radius: width / 2
+            color: "black"
+            antialiasing: true
+        }
+    }
+
+    // Fallback icon
+    DankIcon {
+        visible: !(entryType === "image" && thumbnailImage.status === Image.Ready && thumbnailImage.source != "")
+        name: {
+            if (entryType === "image") {
+                return "image"
+            }
+            if (entryType === "long_text") {
+                return "subject"
+            }
+            return "content_copy"
+        }
+        size: Theme.iconSize
+        color: Theme.primary
+        anchors.centerIn: parent
+    }
+}

Modals/ClipboardHistoryModal.qml

@@ -1,904 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
-import Quickshell
-import Quickshell.Io
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-DankModal {
-    id: clipboardHistoryModal
-
-    property int totalCount: 0
-    property var activeTheme: Theme
-    property bool showClearConfirmation: false
-    property var clipboardEntries: []
-    property string searchText: ""
-    property int selectedIndex: 0
-    property bool keyboardNavigationActive: false
-    property bool showKeyboardHints: false
-    property Component clipboardContent
-
-    function updateFilteredModel() {
-        filteredClipboardModel.clear()
-        for (var i = 0; i < clipboardModel.count; i++) {
-            const entry = clipboardModel.get(i).entry
-            if (searchText.trim().length === 0) {
-                filteredClipboardModel.append({
-                                                  "entry": entry
-                                              })
-            } else {
-                const content = getEntryPreview(entry).toLowerCase()
-                if (content.includes(searchText.toLowerCase()))
-                    filteredClipboardModel.append({
-                                                      "entry": entry
-                                                  })
-            }
-        }
-        clipboardHistoryModal.totalCount = filteredClipboardModel.count
-        // Clamp selectedIndex to valid range
-        if (filteredClipboardModel.count === 0) {
-            keyboardNavigationActive = false
-            selectedIndex = 0
-        } else if (selectedIndex >= filteredClipboardModel.count) {
-            selectedIndex = filteredClipboardModel.count - 1
-        }
-    }
-
-    function toggle() {
-        if (shouldBeVisible)
-            hide()
-        else
-            show()
-    }
-
-    function show() {
-        open()
-        clipboardHistoryModal.searchText = ""
-
-        initializeThumbnailSystem()
-        refreshClipboard()
-        keyboardController.reset()
-
-        Qt.callLater(function () {
-            if (contentLoader.item && contentLoader.item.searchField) {
-                contentLoader.item.searchField.text = ""
-                contentLoader.item.searchField.forceActiveFocus()
-            }
-        })
-    }
-
-    function hide() {
-        close()
-        clipboardHistoryModal.searchText = ""
-
-        updateFilteredModel()
-        keyboardController.reset()
-        cleanupTempFiles()
-    }
-
-    function initializeThumbnailSystem() {}
-
-    function cleanupTempFiles() {
-        Quickshell.execDetached(["sh", "-c", "rm -f /tmp/clipboard_*.png"])
-    }
-
-    function generateThumbnails() {}
-
-    function refreshClipboard() {
-        clipboardProcess.running = true
-    }
-
-    function copyEntry(entry) {
-        const entryId = entry.split('\t')[0]
-        Quickshell.execDetached(
-                    ["sh", "-c", `cliphist decode ${entryId} | wl-copy`])
-        ToastService.showInfo("Copied to clipboard")
-        hide()
-    }
-
-    function deleteEntry(entry) {
-        deleteProcess.deletedEntry = entry
-        deleteProcess.command = ["sh", "-c", `echo '${entry.replace(
-                                     /'/g, "'\\''")}' | cliphist delete`]
-        deleteProcess.running = true
-    }
-
-    function clearAll() {
-        clearProcess.running = true
-    }
-
-    function getEntryPreview(entry) {
-        let content = entry.replace(/^\s*\d+\s+/, "")
-        if (content.includes("image/") || content.includes("binary data")
-                || /\.(png|jpg|jpeg|gif|bmp|webp)/i.test(content)) {
-            const dimensionMatch = content.match(/(\d+)x(\d+)/)
-            if (dimensionMatch)
-                return `Image ${dimensionMatch[1]}×${dimensionMatch[2]}`
-
-            const typeMatch = content.match(/\b(png|jpg|jpeg|gif|bmp|webp)\b/i)
-            if (typeMatch)
-                return `Image (${typeMatch[1].toUpperCase()})`
-
-            return "Image"
-        }
-        if (content.length > 100)
-            return content.substring(0, 100) + "..."
-
-        return content
-    }
-
-    function getEntryType(entry) {
-        if (entry.includes("image/") || entry.includes("binary data")
-                || /\.(png|jpg|jpeg|gif|bmp|webp)/i.test(entry)
-                || /\b(png|jpg|jpeg|gif|bmp|webp)\b/i.test(entry))
-            return "image"
-
-        if (entry.length > 200)
-            return "long_text"
-
-        return "text"
-    }
-
-    visible: false
-    width: 650
-    height: 550
-    backgroundColor: Theme.popupBackground()
-    cornerRadius: Theme.cornerRadius
-    borderColor: Theme.outlineMedium
-    borderWidth: 1
-    enableShadow: true
-    onBackgroundClicked: {
-        hide()
-    }
-    modalFocusScope.Keys.onPressed: function (event) {
-        keyboardController.handleKey(event)
-    }
-    content: clipboardContent
-
-    QtObject {
-        id: keyboardController
-
-        function reset() {
-            selectedIndex = 0
-            keyboardNavigationActive = false
-            showKeyboardHints = false
-            if (typeof clipboardListView !== 'undefined' && clipboardListView)
-                clipboardListView.keyboardActive = false
-        }
-
-        function selectNext() {
-            if (filteredClipboardModel.count === 0)
-                return
-
-            keyboardNavigationActive = true
-            selectedIndex = Math.min(selectedIndex + 1,
-                                     filteredClipboardModel.count - 1)
-        }
-
-        function selectPrevious() {
-            if (filteredClipboardModel.count === 0)
-                return
-
-            keyboardNavigationActive = true
-            selectedIndex = Math.max(selectedIndex - 1, 0)
-        }
-
-        function copySelected() {
-            if (filteredClipboardModel.count === 0 || selectedIndex < 0
-                    || selectedIndex >= filteredClipboardModel.count)
-                return
-
-            var selectedEntry = filteredClipboardModel.get(selectedIndex).entry
-            copyEntry(selectedEntry)
-        }
-
-        function deleteSelected() {
-            if (filteredClipboardModel.count === 0 || selectedIndex < 0
-                    || selectedIndex >= filteredClipboardModel.count)
-                return
-
-            var selectedEntry = filteredClipboardModel.get(selectedIndex).entry
-            deleteEntry(selectedEntry)
-        }
-
-        function handleKey(event) {
-            if (event.key === Qt.Key_Escape) {
-                if (keyboardNavigationActive) {
-                    keyboardNavigationActive = false
-                    if (typeof clipboardListView !== 'undefined'
-                            && clipboardListView)
-                        clipboardListView.keyboardActive = false
-
-                    event.accepted = true
-                } else {
-                    hide()
-                    event.accepted = true
-                }
-            } else if (event.key === Qt.Key_Down) {
-                if (!keyboardNavigationActive) {
-                    keyboardNavigationActive = true
-                    selectedIndex = 0
-                    if (typeof clipboardListView !== 'undefined'
-                            && clipboardListView)
-                        clipboardListView.keyboardActive = true
-
-                    event.accepted = true
-                } else {
-                    selectNext()
-                    event.accepted = true
-                }
-            } else if (event.key === Qt.Key_Up) {
-                if (!keyboardNavigationActive) {
-                    keyboardNavigationActive = true
-                    selectedIndex = 0
-                    if (typeof clipboardListView !== 'undefined'
-                            && clipboardListView)
-                        clipboardListView.keyboardActive = true
-
-                    event.accepted = true
-                } else if (selectedIndex === 0) {
-                    keyboardNavigationActive = false
-                    if (typeof clipboardListView !== 'undefined'
-                            && clipboardListView)
-                        clipboardListView.keyboardActive = false
-
-                    event.accepted = true
-                } else {
-                    selectPrevious()
-                    event.accepted = true
-                }
-            } else if (event.key === Qt.Key_Delete
-                       && (event.modifiers & Qt.ShiftModifier)) {
-                clearAll()
-                hide()
-                event.accepted = true
-            } else if (keyboardNavigationActive) {
-                if ((event.key === Qt.Key_C
-                     && (event.modifiers & Qt.ControlModifier))
-                        || event.key === Qt.Key_Return
-                        || event.key === Qt.Key_Enter) {
-                    copySelected()
-                    event.accepted = true
-                } else if (event.key === Qt.Key_Delete) {
-                    deleteSelected()
-                    event.accepted = true
-                }
-            }
-            if (event.key === Qt.Key_F10) {
-                showKeyboardHints = !showKeyboardHints
-                event.accepted = true
-            }
-        }
-    }
-
-    DankModal {
-        id: clearConfirmDialog
-
-        visible: showClearConfirmation
-        width: 350
-        height: 150
-        onBackgroundClicked: {
-            showClearConfirmation = false
-        }
-
-        content: Component {
-            Item {
-                anchors.fill: parent
-
-                Column {
-                    anchors.centerIn: parent
-                    width: parent.width - Theme.spacingM * 2
-                    spacing: Theme.spacingM
-
-                    StyledText {
-                        text: "Clear All History?"
-                        font.pixelSize: Theme.fontSizeLarge
-                        color: Theme.surfaceText
-                        font.weight: Font.Medium
-                        anchors.horizontalCenter: parent.horizontalCenter
-                    }
-
-                    StyledText {
-                        text: "This will permanently delete all clipboard history."
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: Theme.surfaceVariantText
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        wrapMode: Text.WordWrap
-                        width: parent.width
-                        horizontalAlignment: Text.AlignHCenter
-                    }
-
-                    Row {
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        spacing: Theme.spacingM
-
-                        Rectangle {
-                            width: 100
-                            height: 40
-                            radius: Theme.cornerRadius
-                            color: cancelClearButton.containsMouse ? Theme.surfaceTextPressed : Theme.surfaceVariantAlpha
-
-                            StyledText {
-                                text: "Cancel"
-                                font.pixelSize: Theme.fontSizeMedium
-                                color: Theme.surfaceText
-                                font.weight: Font.Medium
-                                anchors.centerIn: parent
-                            }
-
-                            MouseArea {
-                                id: cancelClearButton
-
-                                anchors.fill: parent
-                                hoverEnabled: true
-                                cursorShape: Qt.PointingHandCursor
-                                onClicked: showClearConfirmation = false
-                            }
-                        }
-
-                        Rectangle {
-                            width: 100
-                            height: 40
-                            radius: Theme.cornerRadius
-                            color: confirmClearButton.containsMouse ? Theme.errorPressed : Theme.error
-
-                            StyledText {
-                                text: "Clear All"
-                                font.pixelSize: Theme.fontSizeMedium
-                                color: Theme.primaryText
-                                font.weight: Font.Medium
-                                anchors.centerIn: parent
-                            }
-
-                            MouseArea {
-                                id: confirmClearButton
-
-                                anchors.fill: parent
-                                hoverEnabled: true
-                                cursorShape: Qt.PointingHandCursor
-                                onClicked: {
-                                    clearAll()
-                                    showClearConfirmation = false
-                                    hide()
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    ListModel {
-        id: clipboardModel
-    }
-
-    ListModel {
-        id: filteredClipboardModel
-    }
-
-    Process {
-        id: clipboardProcess
-
-        command: ["cliphist", "list"]
-        running: false
-
-        stdout: StdioCollector {
-            onStreamFinished: {
-                clipboardModel.clear()
-                const lines = text.trim().split('\n')
-                for (const line of lines) {
-                    if (line.trim().length > 0)
-                        clipboardModel.append({
-                                                  "entry": line
-                                              })
-                }
-                updateFilteredModel()
-            }
-        }
-    }
-
-    Process {
-        id: deleteProcess
-
-        property string deletedEntry: ""
-
-        running: false
-        onExited: exitCode => {
-                      if (exitCode === 0) {
-                          // Just remove the item from models instead of re-fetching everything
-                          for (var i = 0; i < clipboardModel.count; i++) {
-                              if (clipboardModel.get(
-                                      i).entry === deleteProcess.deletedEntry) {
-                                  clipboardModel.remove(i)
-                                  break
-                              }
-                          }
-                          for (var j = 0; j < filteredClipboardModel.count; j++) {
-                              if (filteredClipboardModel.get(
-                                      j).entry === deleteProcess.deletedEntry) {
-                                  filteredClipboardModel.remove(j)
-                                  break
-                              }
-                          }
-                          clipboardHistoryModal.totalCount = filteredClipboardModel.count
-                          // Clamp selectedIndex to valid range
-                          if (filteredClipboardModel.count === 0) {
-                              keyboardNavigationActive = false
-                              selectedIndex = 0
-                          } else if (selectedIndex >= filteredClipboardModel.count) {
-                              selectedIndex = filteredClipboardModel.count - 1
-                          }
-                      } else {
-                          console.warn("Failed to delete clipboard entry")
-                      }
-                  }
-    }
-
-    Process {
-        id: clearProcess
-
-        command: ["cliphist", "wipe"]
-        running: false
-        onExited: exitCode => {
-                      if (exitCode === 0) {
-                          clipboardModel.clear()
-                          filteredClipboardModel.clear()
-                          totalCount = 0
-                      } else {
-
-                      }
-                  }
-    }
-
-    IpcHandler {
-        function open() {
-            clipboardHistoryModal.show()
-            return "CLIPBOARD_OPEN_SUCCESS"
-        }
-
-        function close() {
-            hide()
-            return "CLIPBOARD_CLOSE_SUCCESS"
-        }
-
-        function toggle() {
-            clipboardHistoryModal.toggle()
-            return "CLIPBOARD_TOGGLE_SUCCESS"
-        }
-
-        target: "clipboard"
-    }
-
-    clipboardContent: Component {
-        Item {
-            id: clipboardContent
-            property alias searchField: searchField
-
-            anchors.fill: parent
-
-            Column {
-                anchors.fill: parent
-                anchors.margins: Theme.spacingL
-                spacing: Theme.spacingL
-                focus: false
-
-                Item {
-                    width: parent.width
-                    height: 40
-
-                    Row {
-                        anchors.left: parent.left
-                        anchors.verticalCenter: parent.verticalCenter
-                        spacing: Theme.spacingM
-
-                        DankIcon {
-                            name: "content_paste"
-                            size: Theme.iconSize
-                            color: Theme.primary
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-
-                        StyledText {
-                            text: `Clipboard History (${totalCount})`
-                            font.pixelSize: Theme.fontSizeLarge
-                            color: Theme.surfaceText
-                            font.weight: Font.Medium
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-                    }
-
-                    Row {
-                        anchors.right: parent.right
-                        anchors.verticalCenter: parent.verticalCenter
-                        spacing: Theme.spacingS
-
-                        DankActionButton {
-                            iconName: "info"
-                            iconSize: Theme.iconSize - 4
-                            iconColor: showKeyboardHints ? Theme.primary : Theme.surfaceText
-                            hoverColor: Theme.primaryHover
-                            onClicked: {
-                                showKeyboardHints = !showKeyboardHints
-                            }
-                        }
-
-                        DankActionButton {
-                            iconName: "delete_sweep"
-                            iconSize: Theme.iconSize
-                            iconColor: Theme.error
-                            hoverColor: Theme.errorHover
-                            onClicked: {
-                                showClearConfirmation = true
-                            }
-                        }
-
-                        DankActionButton {
-                            iconName: "close"
-                            iconSize: Theme.iconSize - 4
-                            iconColor: Theme.surfaceText
-                            hoverColor: Theme.errorHover
-                            onClicked: hide()
-                        }
-                    }
-                }
-
-                DankTextField {
-                    id: searchField
-
-                    width: parent.width
-                    placeholderText: ""
-                    leftIconName: "search"
-                    showClearButton: true
-                    focus: true
-                    ignoreLeftRightKeys: true
-                    keyForwardTargets: [modalFocusScope]
-                    onTextChanged: {
-                        clipboardHistoryModal.searchText = text
-                        updateFilteredModel()
-                    }
-                    Keys.onEscapePressed: function (event) {
-                        hide()
-                        event.accepted = true
-                    }
-                    Component.onCompleted: {
-                        Qt.callLater(function () {
-                            forceActiveFocus()
-                        })
-                    }
-
-                    Connections {
-                        target: clipboardHistoryModal
-                        function onOpened() {
-                            Qt.callLater(function () {
-                                searchField.forceActiveFocus()
-                            })
-                        }
-                    }
-                }
-
-                Rectangle {
-                    width: parent.width
-                    height: parent.height - 110
-                    radius: Theme.cornerRadius
-                    color: Theme.surfaceLight
-                    border.color: Theme.outlineLight
-                    border.width: 1
-                    clip: true
-
-                    DankListView {
-                        id: clipboardListView
-
-                        function ensureVisible(index) {
-                            if (index < 0 || index >= count)
-                                return
-
-                            var itemHeight = 72 + spacing
-                            var itemY = index * itemHeight
-                            var itemBottom = itemY + itemHeight
-                            if (itemY < contentY)
-                                contentY = itemY
-                            else if (itemBottom > contentY + height)
-                                contentY = itemBottom - height
-                        }
-
-                        anchors.fill: parent
-                        anchors.margins: Theme.spacingS
-                        clip: true
-                        model: filteredClipboardModel
-                        currentIndex: selectedIndex
-                        spacing: Theme.spacingXS
-                        interactive: true
-                        flickDeceleration: 1500
-                        maximumFlickVelocity: 2000
-                        boundsBehavior: Flickable.DragAndOvershootBounds
-                        boundsMovement: Flickable.FollowBoundsBehavior
-                        pressDelay: 0
-                        flickableDirection: Flickable.VerticalFlick
-                        onCurrentIndexChanged: {
-                            if (keyboardNavigationActive && currentIndex >= 0)
-                                ensureVisible(currentIndex)
-                        }
-
-                        StyledText {
-                            text: "No clipboard entries found"
-                            anchors.centerIn: parent
-                            font.pixelSize: Theme.fontSizeMedium
-                            color: Theme.surfaceVariantText
-                            visible: filteredClipboardModel.count === 0
-                        }
-
-                        ScrollBar.vertical: ScrollBar {
-                            policy: ScrollBar.AsNeeded
-                        }
-
-                        ScrollBar.horizontal: ScrollBar {
-                            policy: ScrollBar.AlwaysOff
-                        }
-
-                        delegate: Rectangle {
-                            property string entryType: getEntryType(model.entry)
-                            property string entryPreview: getEntryPreview(
-                                                              model.entry)
-                            property int entryIndex: index + 1
-                            property string entryData: model.entry
-                            property alias thumbnailImageSource: thumbnailImageSource
-
-                            width: clipboardListView.width
-                            height: 72
-                            radius: Theme.cornerRadius
-                            color: {
-                                if (keyboardNavigationActive
-                                        && index === selectedIndex)
-                                    return Qt.rgba(Theme.surfaceVariant.r,
-                                                   Theme.surfaceVariant.g,
-                                                   Theme.surfaceVariant.b, 0.2)
-
-                                return mouseArea.containsMouse ? Theme.primaryHover : Theme.primaryBackground
-                            }
-                            border.color: {
-                                if (keyboardNavigationActive
-                                        && index === selectedIndex)
-                                    return Qt.rgba(Theme.primary.r,
-                                                   Theme.primary.g,
-                                                   Theme.primary.b, 0.5)
-
-                                return Theme.outlineStrong
-                            }
-                            border.width: keyboardNavigationActive
-                                          && index === selectedIndex ? 1.5 : 1
-
-                            Row {
-                                anchors.fill: parent
-                                anchors.margins: Theme.spacingM
-                                anchors.rightMargin: Theme.spacingS
-                                spacing: Theme.spacingL
-
-                                Rectangle {
-                                    width: 24
-                                    height: 24
-                                    radius: 12
-                                    color: Theme.primarySelected
-                                    anchors.verticalCenter: parent.verticalCenter
-
-                                    StyledText {
-                                        anchors.centerIn: parent
-                                        text: entryIndex.toString()
-                                        font.pixelSize: Theme.fontSizeSmall
-                                        font.weight: Font.Bold
-                                        color: Theme.primary
-                                    }
-                                }
-
-                                Row {
-                                    anchors.verticalCenter: parent.verticalCenter
-                                    width: parent.width - 68
-                                    spacing: Theme.spacingM
-
-                                    Item {
-                                        width: entryType === "image" ? 48 : Theme.iconSize
-                                        height: entryType === "image" ? 48 : Theme.iconSize
-                                        anchors.verticalCenter: parent.verticalCenter
-
-                                        CachingImage {
-                                            id: thumbnailImageSource
-
-                                            property string entryId: model.entry.split(
-                                                                         '\t')[0]
-
-                                            anchors.fill: parent
-                                            source: entryType === "image"
-                                                    && imageLoader.imageData ? `data:image/png;base64,${imageLoader.imageData}` : ""
-                                            fillMode: Image.PreserveAspectCrop
-                                            smooth: true
-                                            cache: true
-                                            visible: false
-                                            asynchronous: true
-
-                                            Process {
-                                                id: imageLoader
-
-                                                property string imageData: ""
-
-                                                command: ["sh", "-c", `cliphist decode ${thumbnailImageSource.entryId} | base64 -w 0`]
-                                                running: entryType === "image"
-
-                                                stdout: StdioCollector {
-                                                    onStreamFinished: {
-                                                        imageLoader.imageData = text.trim()
-                                                    }
-                                                }
-                                            }
-                                        }
-
-                                        MultiEffect {
-                                            anchors.fill: parent
-                                            anchors.margins: 2
-                                            source: thumbnailImageSource
-                                            maskEnabled: true
-                                            maskSource: clipboardCircularMask
-                                            visible: entryType === "image"
-                                                     && thumbnailImageSource.status === Image.Ready
-                                            maskThresholdMin: 0.5
-                                            maskSpreadAtMin: 1
-                                        }
-
-                                        Item {
-                                            id: clipboardCircularMask
-
-                                            width: 48 - 4
-                                            height: 48 - 4
-                                            layer.enabled: true
-                                            layer.smooth: true
-                                            visible: false
-
-                                            Rectangle {
-                                                anchors.fill: parent
-                                                radius: width / 2
-                                                color: "black"
-                                                antialiasing: true
-                                            }
-                                        }
-
-                                        DankIcon {
-                                            visible: !(entryType === "image"
-                                                       && thumbnailImageSource.status
-                                                       === Image.Ready)
-                                            name: {
-                                                if (entryType === "image")
-                                                    return "image"
-
-                                                if (entryType === "long_text")
-                                                    return "subject"
-
-                                                return "content_copy"
-                                            }
-                                            size: Theme.iconSize
-                                            color: Theme.primary
-                                            anchors.centerIn: parent
-                                        }
-                                    }
-
-                                    Column {
-                                        anchors.verticalCenter: parent.verticalCenter
-                                        width: parent.width - (entryType === "image" ? 48 : Theme.iconSize) - Theme.spacingM
-                                        spacing: Theme.spacingXS
-
-                                        StyledText {
-                                            text: {
-                                                switch (entryType) {
-                                                case "image":
-                                                    return "Image • " + entryPreview
-                                                case "long_text":
-                                                    return "Long Text"
-                                                default:
-                                                    return "Text"
-                                                }
-                                            }
-                                            font.pixelSize: Theme.fontSizeSmall
-                                            color: Theme.primary
-                                            font.weight: Font.Medium
-                                            width: parent.width
-                                            elide: Text.ElideRight
-                                        }
-
-                                        StyledText {
-                                            id: contentText
-
-                                            text: entryPreview
-                                            font.pixelSize: Theme.fontSizeMedium
-                                            color: Theme.surfaceText
-                                            width: parent.width
-                                            wrapMode: Text.WordWrap
-                                            maximumLineCount: entryType === "long_text" ? 3 : 1
-                                            elide: Text.ElideRight
-                                        }
-                                    }
-                                }
-                            }
-
-                            DankActionButton {
-                                anchors.right: parent.right
-                                anchors.rightMargin: Theme.spacingM
-                                anchors.verticalCenter: parent.verticalCenter
-                                iconName: "close"
-                                iconSize: Theme.iconSize - 6
-                                iconColor: Theme.error
-                                hoverColor: Theme.errorHover
-                                onClicked: {
-                                    deleteEntry(model.entry)
-                                }
-                            }
-
-                            MouseArea {
-                                id: mouseArea
-
-                                anchors.fill: parent
-                                anchors.rightMargin: 40
-                                hoverEnabled: true
-                                cursorShape: Qt.PointingHandCursor
-                                onClicked: copyEntry(model.entry)
-                            }
-                        }
-                    }
-                }
-
-                Item {
-                    width: parent.width
-                    height: showKeyboardHints ? 80 + Theme.spacingL : 0
-
-                    Behavior on height {
-                        NumberAnimation {
-                            duration: Theme.shortDuration
-                            easing.type: Theme.standardEasing
-                        }
-                    }
-                }
-            }
-
-            Rectangle {
-                anchors.bottom: parent.bottom
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.margins: Theme.spacingL
-                height: 80
-                radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceContainer.r,
-                               Theme.surfaceContainer.g,
-                               Theme.surfaceContainer.b, 0.95)
-                border.color: Theme.primary
-                border.width: 2
-                opacity: showKeyboardHints ? 1 : 0
-                z: 100
-
-                Column {
-                    anchors.centerIn: parent
-                    spacing: 2
-
-                    StyledText {
-                        text: "↑/↓: Navigate • Enter/Ctrl+C: Copy • Del: Delete • F10: Help"
-                        font.pixelSize: Theme.fontSizeSmall
-                        color: Theme.surfaceText
-                        anchors.horizontalCenter: parent.horizontalCenter
-                    }
-
-                    StyledText {
-                        text: "Shift+Del: Clear All • Esc: Close"
-                        font.pixelSize: Theme.fontSizeSmall
-                        color: Theme.surfaceText
-                        anchors.horizontalCenter: parent.horizontalCenter
-                    }
-                }
-
-                Behavior on opacity {
-                    NumberAnimation {
-                        duration: Theme.shortDuration
-                        easing.type: Theme.standardEasing
-                    }
-                }
-            }
-        }
-    }
-}

Modals/Common/ConfirmModal.qml

@@ -0,0 +1,288 @@
+import QtQuick
+import qs.Common
+import qs.Modals.Common
+import qs.Widgets
+
+DankModal {
+    id: root
+
+    property string confirmTitle: ""
+    property string confirmMessage: ""
+    property string confirmButtonText: "Confirm"
+    property string cancelButtonText: "Cancel"
+    property color confirmButtonColor: Theme.primary
+    property var onConfirm: function () {}
+    property var onCancel: function () {}
+    property int selectedButton: -1
+    property bool keyboardNavigation: false
+
+    function show(title, message, onConfirmCallback, onCancelCallback) {
+        confirmTitle = title || ""
+        confirmMessage = message || ""
+        confirmButtonText = "Confirm"
+        cancelButtonText = "Cancel"
+        confirmButtonColor = Theme.primary
+        onConfirm = onConfirmCallback || (() => {})
+        onCancel = onCancelCallback || (() => {})
+        selectedButton = -1
+        keyboardNavigation = false
+        open()
+    }
+
+    function showWithOptions(options) {
+        confirmTitle = options.title || ""
+        confirmMessage = options.message || ""
+        confirmButtonText = options.confirmText || "Confirm"
+        cancelButtonText = options.cancelText || "Cancel"
+        confirmButtonColor = options.confirmColor || Theme.primary
+        onConfirm = options.onConfirm || (() => {})
+        onCancel = options.onCancel || (() => {})
+        selectedButton = -1
+        keyboardNavigation = false
+        open()
+    }
+
+    function selectButton() {
+        close()
+        if (selectedButton === 0) {
+            if (onCancel) {
+                onCancel()
+            }
+        } else {
+            if (onConfirm) {
+                onConfirm()
+            }
+        }
+    }
+
+    shouldBeVisible: false
+    allowStacking: true
+    width: 350
+    height: contentLoader.item ? contentLoader.item.implicitHeight + Theme.spacingM * 2 : 160
+    enableShadow: true
+    shouldHaveFocus: true
+    onBackgroundClicked: {
+        close()
+        if (onCancel) {
+            onCancel()
+        }
+    }
+    onOpened: {
+        Qt.callLater(function () {
+            modalFocusScope.forceActiveFocus()
+            modalFocusScope.focus = true
+            shouldHaveFocus = true
+        })
+    }
+    modalFocusScope.Keys.onPressed: function (event) {
+        switch (event.key) {
+        case Qt.Key_Escape:
+            close()
+            if (onCancel) {
+                onCancel()
+            }
+            event.accepted = true
+            break
+        case Qt.Key_Left:
+        case Qt.Key_Up:
+            keyboardNavigation = true
+            selectedButton = 0
+            event.accepted = true
+            break
+        case Qt.Key_Right:
+        case Qt.Key_Down:
+            keyboardNavigation = true
+            selectedButton = 1
+            event.accepted = true
+            break
+        case Qt.Key_N:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = (selectedButton + 1) % 2
+                event.accepted = true
+            }
+            break
+        case Qt.Key_P:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = selectedButton === -1 ? 1 : (selectedButton - 1 + 2) % 2
+                event.accepted = true
+            }
+            break
+        case Qt.Key_J:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = 1
+                event.accepted = true
+            }
+            break
+        case Qt.Key_K:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = 0
+                event.accepted = true
+            }
+            break
+        case Qt.Key_H:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = 0
+                event.accepted = true
+            }
+            break
+        case Qt.Key_L:
+            if (event.modifiers & Qt.ControlModifier) {
+                keyboardNavigation = true
+                selectedButton = 1
+                event.accepted = true
+            }
+            break
+        case Qt.Key_Tab:
+            keyboardNavigation = true
+            selectedButton = selectedButton === -1 ? 0 : (selectedButton + 1) % 2
+            event.accepted = true
+            break
+        case Qt.Key_Return:
+        case Qt.Key_Enter:
+            if (selectedButton !== -1) {
+                selectButton()
+            } else {
+                selectedButton = 1
+                selectButton()
+            }
+            event.accepted = true
+            break
+        }
+    }
+
+    content: Component {
+        Item {
+            anchors.fill: parent
+            implicitHeight: mainColumn.implicitHeight
+
+            Column {
+                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
+                    font.pixelSize: Theme.fontSizeLarge
+                    color: Theme.surfaceText
+                    font.weight: Font.Medium
+                    width: parent.width
+                    horizontalAlignment: Text.AlignHCenter
+                }
+
+                Item {
+                    width: 1
+                    height: Theme.spacingL
+                }
+
+                StyledText {
+                    text: confirmMessage
+                    font.pixelSize: Theme.fontSizeMedium
+                    color: Theme.surfaceText
+                    width: parent.width
+                    horizontalAlignment: Text.AlignHCenter
+                    wrapMode: Text.WordWrap
+                }
+
+                Item {
+                    width: 1
+                    height: Theme.spacingL * 1.5
+                }
+
+                Row {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    spacing: Theme.spacingM
+
+                    Rectangle {
+                        width: 120
+                        height: 40
+                        radius: Theme.cornerRadius
+                        color: {
+                            if (keyboardNavigation && selectedButton === 0) {
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
+                            } else if (cancelButton.containsMouse) {
+                                return Theme.surfacePressed
+                            } else {
+                                return Theme.surfaceVariantAlpha
+                            }
+                        }
+                        border.color: (keyboardNavigation && selectedButton === 0) ? Theme.primary : "transparent"
+                        border.width: (keyboardNavigation && selectedButton === 0) ? 1 : 0
+
+                        StyledText {
+                            text: cancelButtonText
+                            font.pixelSize: Theme.fontSizeMedium
+                            color: Theme.surfaceText
+                            font.weight: Font.Medium
+                            anchors.centerIn: parent
+                        }
+
+                        MouseArea {
+                            id: cancelButton
+
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                selectedButton = 0
+                                selectButton()
+                            }
+                        }
+                    }
+
+                    Rectangle {
+                        width: 120
+                        height: 40
+                        radius: Theme.cornerRadius
+                        color: {
+                            const baseColor = confirmButtonColor
+                            if (keyboardNavigation && selectedButton === 1) {
+                                return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, 1)
+                            } else if (confirmButton.containsMouse) {
+                                return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, 0.9)
+                            } else {
+                                return baseColor
+                            }
+                        }
+                        border.color: (keyboardNavigation && selectedButton === 1) ? "white" : "transparent"
+                        border.width: (keyboardNavigation && selectedButton === 1) ? 1 : 0
+
+                        StyledText {
+                            text: confirmButtonText
+                            font.pixelSize: Theme.fontSizeMedium
+                            color: Theme.primaryText
+                            font.weight: Font.Medium
+                            anchors.centerIn: parent
+                        }
+
+                        MouseArea {
+                            id: confirmButton
+
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                selectedButton = 1
+                                selectButton()
+                            }
+                        }
+                    }
+                }
+
+                Item {
+                    width: 1
+                    height: Theme.spacingL
+                }
+            }
+        }
+    }
+}

Modals/Common/DankModal.qml

@@ -0,0 +1,323 @@
+import QtQuick
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Wayland
+import qs.Common
+import qs.Services
+
+PanelWindow {
+    id: root
+
+    property string layerNamespace: "dms:modal"
+    WlrLayershell.namespace: layerNamespace
+
+    property alias content: contentLoader.sourceComponent
+    property alias contentLoader: contentLoader
+    property Item directContent: null
+    property real width: 400
+    property real height: 300
+    readonly property real screenWidth: screen ? screen.width : 1920
+    readonly property real screenHeight: screen ? screen.height : 1080
+    readonly property real dpr: CompositorService.getScreenScale(screen)
+    property bool showBackground: true
+    property real backgroundOpacity: 0.5
+    property string positioning: "center"
+    property point customPosition: Qt.point(0, 0)
+    property bool closeOnEscapeKey: true
+    property bool closeOnBackgroundClick: true
+    property string animationType: "scale"
+    property int animationDuration: Theme.expressiveDurations.expressiveDefaultSpatial
+    property real animationScaleCollapsed: 0.96
+    property real animationOffset: Theme.spacingL
+    property list<real> animationEnterCurve: Theme.expressiveCurves.expressiveDefaultSpatial
+    property list<real> animationExitCurve: Theme.expressiveCurves.emphasized
+    property color backgroundColor: Theme.surfaceContainer
+    property color borderColor: Theme.outlineMedium
+    property real borderWidth: 1
+    property real cornerRadius: Theme.cornerRadius
+    property bool enableShadow: false
+    property alias modalFocusScope: focusScope
+    property bool shouldBeVisible: false
+    property bool shouldHaveFocus: shouldBeVisible
+    property bool allowFocusOverride: false
+    property bool allowStacking: false
+    property bool keepContentLoaded: false
+
+    signal opened
+    signal dialogClosed
+    signal backgroundClicked
+
+    function open() {
+        ModalManager.openModal(root)
+        closeTimer.stop()
+        shouldBeVisible = true
+        visible = true
+        focusScope.forceActiveFocus()
+    }
+
+    function close() {
+        shouldBeVisible = false
+        closeTimer.restart()
+    }
+
+    function toggle() {
+        if (shouldBeVisible) {
+            close()
+        } else {
+            open()
+        }
+    }
+
+    visible: shouldBeVisible
+    color: "transparent"
+    WlrLayershell.layer: WlrLayershell.Top // if set to overlay -> virtual keyboards can be stuck under modal
+    WlrLayershell.exclusiveZone: -1
+    WlrLayershell.keyboardFocus: shouldHaveFocus ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
+    onVisibleChanged: {
+        if (root.visible) {
+            opened()
+        } else {
+            if (Qt.inputMethod) {
+                Qt.inputMethod.hide()
+                Qt.inputMethod.reset()
+            }
+            dialogClosed()
+        }
+    }
+
+    Connections {
+        function onCloseAllModalsExcept(excludedModal) {
+            if (excludedModal !== root && !allowStacking && shouldBeVisible) {
+                close()
+            }
+        }
+
+        target: ModalManager
+    }
+
+    Timer {
+        id: closeTimer
+
+        interval: animationDuration + 120
+        onTriggered: {
+            visible = false
+        }
+    }
+
+    anchors {
+        top: true
+        left: true
+        right: true
+        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 && SettingsData.modalDarkenBackground ? (root.shouldBeVisible ? root.backgroundOpacity : 0) : 0
+        visible: root.showBackground && SettingsData.modalDarkenBackground
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: root.animationDuration
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+            }
+        }
+    }
+
+    Item {
+        id: modalContainer
+
+        width: Theme.px(root.width, dpr)
+        height: Theme.px(root.height, dpr)
+        x: {
+            if (positioning === "center") {
+                return Theme.snap((root.screenWidth - width) / 2, dpr)
+            } else if (positioning === "top-right") {
+                return Theme.px(Math.max(Theme.spacingL, root.screenWidth - width - Theme.spacingL), dpr)
+            } else if (positioning === "custom") {
+                return Theme.snap(root.customPosition.x, dpr)
+            }
+            return 0
+        }
+        y: {
+            if (positioning === "center") {
+                return Theme.snap((root.screenHeight - height) / 2, dpr)
+            } else if (positioning === "top-right") {
+                return Theme.px(Theme.barHeight + Theme.spacingXS, dpr)
+            } else if (positioning === "custom") {
+                return Theme.snap(root.customPosition.y, dpr)
+            }
+            return 0
+        }
+
+        readonly property bool slide: root.animationType === "slide"
+        readonly property real offsetX: slide ? 15 : 0
+        readonly property real offsetY: slide ? -30 : root.animationOffset
+
+        property real animX: 0
+        property real animY: 0
+        property real scaleValue: root.animationScaleCollapsed
+
+        onOffsetXChanged: animX = Theme.snap(root.shouldBeVisible ? 0 : offsetX, root.dpr)
+        onOffsetYChanged: animY = Theme.snap(root.shouldBeVisible ? 0 : offsetY, root.dpr)
+
+        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
+            }
+        }
+
+        Behavior on animX {
+            NumberAnimation {
+                duration: root.animationDuration
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+            }
+        }
+
+        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
+            }
+        }
+
+        Rectangle {
+            id: contentContainer
+
+            anchors.centerIn: parent
+            width: parent.width
+            height: parent.height
+            color: root.backgroundColor
+            radius: root.cornerRadius
+            border.color: root.borderColor
+            border.width: root.borderWidth
+            clip: false
+            layer.enabled: true
+            layer.smooth: false
+            layer.textureSize: Qt.size(width * root.dpr, height * root.dpr)
+            layer.textureMirroring: ShaderEffectSource.NoMirroring
+            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)
+
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: animationDuration
+                    easing.type: Easing.BezierSpline
+                    easing.bezierCurve: root.shouldBeVisible ? root.animationEnterCurve : root.animationExitCurve
+                }
+            }
+
+            FocusScope {
+                anchors.fill: parent
+                focus: root.shouldBeVisible
+                clip: false
+
+                Item {
+                    id: directContentWrapper
+
+                    anchors.fill: parent
+                    visible: root.directContent !== null
+                    focus: true
+                    clip: false
+
+                    Component.onCompleted: {
+                        if (root.directContent) {
+                            root.directContent.parent = directContentWrapper
+                            root.directContent.anchors.fill = directContentWrapper
+                            Qt.callLater(() => root.directContent.forceActiveFocus())
+                        }
+                    }
+
+                    Connections {
+                        function onDirectContentChanged() {
+                            if (root.directContent) {
+                                root.directContent.parent = directContentWrapper
+                                root.directContent.anchors.fill = directContentWrapper
+                                Qt.callLater(() => root.directContent.forceActiveFocus())
+                            }
+                        }
+
+                        target: root
+                    }
+                }
+
+                Loader {
+                    id: contentLoader
+
+                    anchors.fill: parent
+                    active: root.directContent === null && (root.keepContentLoaded || root.shouldBeVisible || root.visible)
+                    asynchronous: false
+                    focus: true
+                    clip: false
+                    visible: root.directContent === null
+
+                    onLoaded: {
+                        if (item) {
+                            Qt.callLater(() => item.forceActiveFocus())
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    FocusScope {
+        id: focusScope
+
+        objectName: "modalFocusScope"
+        anchors.fill: parent
+        visible: root.shouldBeVisible || root.visible
+        focus: root.shouldBeVisible
+        Keys.onEscapePressed: event => {
+                                  if (root.closeOnEscapeKey && shouldHaveFocus) {
+                                      root.close()
+                                      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

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

Modals/DankModal.qml

@@ -1,247 +0,0 @@
-import QtQuick
-import QtQuick.Effects
-import Quickshell
-import Quickshell.Wayland
-import qs.Common
-
-PanelWindow {
-    id: root
-
-    property alias content: contentLoader.sourceComponent
-    property alias contentLoader: contentLoader
-    property real width: 400
-    property real height: 300
-    readonly property real screenWidth: screen ? screen.width : 1920
-    readonly property real screenHeight: screen ? screen.height : 1080
-    property bool showBackground: true
-    property real backgroundOpacity: 0.5
-    property string positioning: "center"
-    property point customPosition: Qt.point(0, 0)
-    property bool closeOnEscapeKey: true
-    property bool closeOnBackgroundClick: true
-    property string animationType: "scale"
-    property int animationDuration: Theme.mediumDuration
-    property var animationEasing: Theme.emphasizedEasing
-    property color backgroundColor: Theme.surfaceContainer
-    property color borderColor: Theme.outlineMedium
-    property real borderWidth: 1
-    property real cornerRadius: Theme.cornerRadius
-    property bool enableShadow: false
-    // Expose the focusScope for external access
-    property alias modalFocusScope: focusScope
-    property bool shouldBeVisible: false
-    property bool shouldHaveFocus: shouldBeVisible
-    property bool allowFocusOverride: false
-    property bool allowStacking: false
-
-    signal opened
-    signal dialogClosed
-    signal backgroundClicked
-
-    Connections {
-        target: ModalManager
-        function onCloseAllModalsExcept(excludedModal) {
-            if (excludedModal !== root && !allowStacking && shouldBeVisible) {
-                close()
-            }
-        }
-    }
-
-    function open() {
-        ModalManager.openModal(root)
-        closeTimer.stop()
-        shouldBeVisible = true
-        visible = true
-        focusScope.forceActiveFocus()
-    }
-
-    function close() {
-        shouldBeVisible = false
-        closeTimer.restart()
-    }
-
-    function toggle() {
-        if (shouldBeVisible)
-            close()
-        else
-            open()
-    }
-
-    visible: shouldBeVisible
-    color: "transparent"
-    WlrLayershell.layer: WlrLayershell.Overlay
-    WlrLayershell.exclusiveZone: -1
-    WlrLayershell.keyboardFocus: shouldHaveFocus ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
-    onVisibleChanged: {
-        if (root.visible) {
-            opened()
-        } else {
-            if (Qt.inputMethod) {
-                Qt.inputMethod.hide()
-                Qt.inputMethod.reset()
-            }
-            dialogClosed()
-        }
-    }
-
-    Timer {
-        id: closeTimer
-
-        interval: animationDuration + 50
-        onTriggered: {
-            visible = false
-        }
-    }
-
-    anchors {
-        top: true
-        left: true
-        right: true
-        bottom: true
-    }
-
-    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 => {
-                           var localPos = mapToItem(contentContainer,
-                                                    mouse.x, mouse.y)
-                           if (localPos.x < 0
-                               || localPos.x > contentContainer.width
-                               || localPos.y < 0
-                               || localPos.y > contentContainer.height)
-                           root.backgroundClicked()
-                       }
-        }
-
-        Behavior on opacity {
-            NumberAnimation {
-                duration: root.animationDuration
-                easing.type: root.animationEasing
-            }
-        }
-    }
-
-    Rectangle {
-        id: contentContainer
-
-        width: root.width
-        height: root.height
-        anchors.centerIn: positioning === "center" ? parent : undefined
-        x: {
-            if (positioning === "top-right")
-                return Math.max(Theme.spacingL,
-                                root.screenWidth - width - Theme.spacingL)
-            else if (positioning === "custom")
-                return root.customPosition.x
-            return 0 // Will be overridden by anchors.centerIn when positioning === "center"
-        }
-        y: {
-            if (positioning === "top-right")
-                return Theme.barHeight + Theme.spacingXS
-            else if (positioning === "custom")
-                return root.customPosition.y
-            return 0 // Will be overridden by anchors.centerIn when positioning === "center"
-        }
-        color: root.backgroundColor
-        radius: root.cornerRadius
-        border.color: root.borderColor
-        border.width: root.borderWidth
-        layer.enabled: root.enableShadow
-        opacity: root.shouldBeVisible ? 1 : 0
-        scale: {
-            if (root.animationType === "scale")
-                return root.shouldBeVisible ? 1 : 0.9
-
-            return 1
-        }
-        transform: root.animationType === "slide" ? slideTransform : null
-
-        Translate {
-            id: slideTransform
-
-            x: root.shouldBeVisible ? 0 : 15
-            y: root.shouldBeVisible ? 0 : -30
-        }
-
-        Loader {
-            id: contentLoader
-
-            anchors.fill: parent
-            active: root.visible
-            asynchronous: false
-        }
-
-        Behavior on opacity {
-            NumberAnimation {
-                duration: root.animationDuration
-                easing.type: root.animationEasing
-            }
-        }
-
-        Behavior on scale {
-            enabled: root.animationType === "scale"
-
-            NumberAnimation {
-                duration: root.animationDuration
-                easing.type: root.animationEasing
-            }
-        }
-
-        layer.effect: MultiEffect {
-            shadowEnabled: true
-            shadowHorizontalOffset: 0
-            shadowVerticalOffset: 8
-            shadowBlur: 1
-            shadowColor: Theme.shadowStrong
-            shadowOpacity: 0.3
-        }
-    }
-
-    FocusScope {
-        id: focusScope
-
-        objectName: "modalFocusScope"
-        anchors.fill: parent
-        visible: root.visible // Only active when the modal is visible
-        focus: root.visible
-        Keys.onEscapePressed: event => {
-                                  console.log(
-                                      "DankModal escape pressed - shouldHaveFocus:",
-                                      shouldHaveFocus, "closeOnEscapeKey:",
-                                      root.closeOnEscapeKey, "objectName:",
-                                      root.objectName || "unnamed")
-                                  if (root.closeOnEscapeKey
-                                      && shouldHaveFocus) {
-                                      console.log("DankModal handling escape")
-                                      root.close()
-                                      event.accepted = true
-                                  }
-                              }
-        onVisibleChanged: {
-            if (visible && shouldHaveFocus)
-                Qt.callLater(function () {
-                    focusScope.forceActiveFocus()
-                })
-        }
-
-        Connections {
-            target: root
-            function onShouldHaveFocusChanged() {
-                if (shouldHaveFocus && visible) {
-                    Qt.callLater(function () {
-                        focusScope.forceActiveFocus()
-                    })
-                }
-            }
-        }
-    }
-}

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/FileBrowserModal.qml

@@ -0,0 +1,934 @@
+import Qt.labs.folderlistmodel
+import QtCore
+import QtQuick
+import QtQuick.Controls
+import Quickshell.Io
+import qs.Common
+import qs.Modals.Common
+import qs.Modals.FileBrowser
+import qs.Widgets
+
+DankModal {
+    id: fileBrowserModal
+
+    layerNamespace: "dms:file-browser"
+
+    property string homeDir: StandardPaths.writableLocation(StandardPaths.HomeLocation)
+    property string docsDir: StandardPaths.writableLocation(StandardPaths.DocumentsLocation)
+    property string musicDir: StandardPaths.writableLocation(StandardPaths.MusicLocation)
+    property string videosDir: StandardPaths.writableLocation(StandardPaths.MoviesLocation)
+    property string picsDir: StandardPaths.writableLocation(StandardPaths.PicturesLocation)
+    property string downloadDir: StandardPaths.writableLocation(StandardPaths.DownloadLocation)
+    property string desktopDir: StandardPaths.writableLocation(StandardPaths.DesktopLocation)
+    property string currentPath: ""
+    property var fileExtensions: ["*.*"]
+    property alias filterExtensions: fileBrowserModal.fileExtensions
+    property string browserTitle: "Select File"
+    property string browserIcon: "folder_open"
+    property string browserType: "generic"
+    property bool showHiddenFiles: false
+    property int selectedIndex: -1
+    property bool keyboardNavigationActive: false
+    property bool backButtonFocused: false
+    property bool saveMode: false
+    property string defaultFileName: ""
+    property int keyboardSelectionIndex: -1
+    property bool keyboardSelectionRequested: false
+    property bool showKeyboardHints: false
+    property bool showFileInfo: false
+    property string selectedFilePath: ""
+    property string selectedFileName: ""
+    property bool selectedFileIsDir: false
+    property bool showOverwriteConfirmation: false
+    property string pendingFilePath: ""
+    property var parentModal: null
+    property bool showSidebar: true
+    property string viewMode: "grid"
+    property string sortBy: "name"
+    property bool sortAscending: true
+    property int iconSizeIndex: 1
+    property var iconSizes: [80, 120, 160, 200]
+    property bool pathEditMode: false
+    property bool pathInputHasFocus: false
+    property int actualGridColumns: 5
+    property bool _initialized: false
+
+    signal fileSelected(string path)
+
+    function loadSettings() {
+        const type = browserType || "default"
+        const settings = CacheData.fileBrowserSettings[type]
+        const isImageBrowser = ["wallpaper", "profile"].includes(browserType)
+
+        if (settings) {
+            viewMode = settings.viewMode || (isImageBrowser ? "grid" : "list")
+            sortBy = settings.sortBy || "name"
+            sortAscending = settings.sortAscending !== undefined ? settings.sortAscending : true
+            iconSizeIndex = settings.iconSizeIndex !== undefined ? settings.iconSizeIndex : 1
+            showSidebar = settings.showSidebar !== undefined ? settings.showSidebar : true
+        } else {
+            viewMode = isImageBrowser ? "grid" : "list"
+        }
+    }
+
+    function saveSettings() {
+        if (!_initialized)
+            return
+
+        const type = browserType || "default"
+        let settings = CacheData.fileBrowserSettings
+        if (!settings[type]) {
+            settings[type] = {}
+        }
+        settings[type].viewMode = viewMode
+        settings[type].sortBy = sortBy
+        settings[type].sortAscending = sortAscending
+        settings[type].iconSizeIndex = iconSizeIndex
+        settings[type].showSidebar = showSidebar
+        settings[type].lastPath = currentPath
+        CacheData.fileBrowserSettings = settings
+
+        if (browserType === "wallpaper") {
+            CacheData.wallpaperLastPath = currentPath
+        } else if (browserType === "profile") {
+            CacheData.profileLastPath = currentPath
+        }
+
+        CacheData.saveCache()
+    }
+
+    onViewModeChanged: saveSettings()
+    onSortByChanged: saveSettings()
+    onSortAscendingChanged: saveSettings()
+    onIconSizeIndexChanged: saveSettings()
+    onShowSidebarChanged: saveSettings()
+
+    function isImageFile(fileName) {
+        if (!fileName) {
+            return false
+        }
+        const ext = fileName.toLowerCase().split('.').pop()
+        return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(ext)
+    }
+
+    function getLastPath() {
+        const type = browserType || "default"
+        const settings = CacheData.fileBrowserSettings[type]
+        const lastPath = settings?.lastPath || ""
+        return (lastPath && lastPath !== "") ? lastPath : homeDir
+    }
+
+    function saveLastPath(path) {
+        const type = browserType || "default"
+        let settings = CacheData.fileBrowserSettings
+        if (!settings[type]) {
+            settings[type] = {}
+        }
+        settings[type].lastPath = path
+        CacheData.fileBrowserSettings = settings
+        CacheData.saveCache()
+
+        if (browserType === "wallpaper") {
+            CacheData.wallpaperLastPath = path
+        } else if (browserType === "profile") {
+            CacheData.profileLastPath = path
+        }
+    }
+
+    function setSelectedFileData(path, name, isDir) {
+        selectedFilePath = path
+        selectedFileName = name
+        selectedFileIsDir = isDir
+    }
+
+    function navigateUp() {
+        const path = currentPath
+        if (path === homeDir)
+            return
+
+        const lastSlash = path.lastIndexOf('/')
+        if (lastSlash > 0) {
+            const newPath = path.substring(0, lastSlash)
+            if (newPath.length < homeDir.length) {
+                currentPath = homeDir
+                saveLastPath(homeDir)
+            } else {
+                currentPath = newPath
+                saveLastPath(newPath)
+            }
+        }
+    }
+
+    function navigateTo(path) {
+        currentPath = path
+        saveLastPath(path)
+        selectedIndex = -1
+        backButtonFocused = false
+    }
+
+    function keyboardFileSelection(index) {
+        if (index >= 0) {
+            keyboardSelectionTimer.targetIndex = index
+            keyboardSelectionTimer.start()
+        }
+    }
+
+    function executeKeyboardSelection(index) {
+        keyboardSelectionIndex = index
+        keyboardSelectionRequested = true
+    }
+
+    function handleSaveFile(filePath) {
+        var normalizedPath = filePath
+        if (!normalizedPath.startsWith("file://")) {
+            normalizedPath = "file://" + filePath
+        }
+
+        var exists = false
+        var fileName = filePath.split('/').pop()
+
+        for (var i = 0; i < folderModel.count; i++) {
+            if (folderModel.get(i, "fileName") === fileName && !folderModel.get(i, "fileIsDir")) {
+                exists = true
+                break
+            }
+        }
+
+        if (exists) {
+            pendingFilePath = normalizedPath
+            showOverwriteConfirmation = true
+        } else {
+            fileSelected(normalizedPath)
+            fileBrowserModal.close()
+        }
+    }
+
+    objectName: "fileBrowserModal"
+    allowStacking: true
+    closeOnEscapeKey: false
+    shouldHaveFocus: shouldBeVisible
+    Component.onCompleted: {
+        loadSettings()
+        currentPath = getLastPath()
+        _initialized = true
+    }
+
+    property var steamPaths: [StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/.steam/steam/steamapps/workshop/content/431960", StandardPaths.writableLocation(
+            StandardPaths.HomeLocation) + "/.local/share/Steam/steamapps/workshop/content/431960", StandardPaths.writableLocation(
+            StandardPaths.HomeLocation) + "/.var/app/com.valvesoftware.Steam/.local/share/Steam/steamapps/workshop/content/431960", StandardPaths.writableLocation(
+            StandardPaths.HomeLocation) + "/snap/steam/common/.local/share/Steam/steamapps/workshop/content/431960"]
+    property int currentPathIndex: 0
+
+    width: 800
+    height: 600
+    enableShadow: true
+    visible: false
+    onBackgroundClicked: close()
+    onOpened: {
+        if (parentModal) {
+            parentModal.shouldHaveFocus = false
+            parentModal.allowFocusOverride = true
+        }
+        Qt.callLater(() => {
+                         if (contentLoader && contentLoader.item) {
+                             contentLoader.item.forceActiveFocus()
+                         }
+                     })
+    }
+    onDialogClosed: {
+        if (parentModal) {
+            parentModal.allowFocusOverride = false
+            parentModal.shouldHaveFocus = Qt.binding(() => {
+                                                         return parentModal.shouldBeVisible
+                                                     })
+        }
+    }
+    onVisibleChanged: {
+        if (visible) {
+            currentPath = getLastPath()
+            selectedIndex = -1
+            keyboardNavigationActive = false
+            backButtonFocused = false
+        }
+    }
+    onCurrentPathChanged: {
+        selectedFilePath = ""
+        selectedFileName = ""
+        selectedFileIsDir = false
+        saveSettings()
+    }
+    onSelectedIndexChanged: {
+        if (selectedIndex >= 0 && folderModel && selectedIndex < folderModel.count) {
+            selectedFilePath = ""
+            selectedFileName = ""
+            selectedFileIsDir = false
+        }
+    }
+
+    FolderListModel {
+        id: folderModel
+
+        showDirsFirst: true
+        showDotAndDotDot: false
+        showHidden: fileBrowserModal.showHiddenFiles
+        nameFilters: fileExtensions
+        showFiles: true
+        showDirs: true
+        folder: currentPath ? "file://" + currentPath : "file://" + homeDir
+        sortField: {
+            switch (sortBy) {
+            case "name":
+                return FolderListModel.Name
+            case "size":
+                return FolderListModel.Size
+            case "modified":
+                return FolderListModel.Time
+            case "type":
+                return FolderListModel.Type
+            default:
+                return FolderListModel.Name
+            }
+        }
+        sortReversed: !sortAscending
+    }
+
+    property var quickAccessLocations: [{
+            "name": "Home",
+            "path": homeDir,
+            "icon": "home"
+        }, {
+            "name": "Documents",
+            "path": docsDir,
+            "icon": "description"
+        }, {
+            "name": "Downloads",
+            "path": downloadDir,
+            "icon": "download"
+        }, {
+            "name": "Pictures",
+            "path": picsDir,
+            "icon": "image"
+        }, {
+            "name": "Music",
+            "path": musicDir,
+            "icon": "music_note"
+        }, {
+            "name": "Videos",
+            "path": videosDir,
+            "icon": "movie"
+        }, {
+            "name": "Desktop",
+            "path": desktopDir,
+            "icon": "computer"
+        }]
+
+    QtObject {
+        id: keyboardController
+
+        property int totalItems: folderModel.count
+        property int gridColumns: viewMode === "list" ? 1 : Math.max(1, actualGridColumns)
+
+        function handleKey(event) {
+            if (event.key === Qt.Key_Escape) {
+                close()
+                event.accepted = true
+                return
+            }
+            if (event.key === Qt.Key_F10) {
+                showKeyboardHints = !showKeyboardHints
+                event.accepted = true
+                return
+            }
+            if (event.key === Qt.Key_F1 || event.key === Qt.Key_I) {
+                showFileInfo = !showFileInfo
+                event.accepted = true
+                return
+            }
+            if ((event.modifiers & Qt.AltModifier && event.key === Qt.Key_Left) || event.key === Qt.Key_Backspace) {
+                if (currentPath !== homeDir) {
+                    navigateUp()
+                    event.accepted = true
+                }
+                return
+            }
+            if (!keyboardNavigationActive) {
+                const isInitKey = event.key === Qt.Key_Tab || event.key === Qt.Key_Down || event.key
+                                === Qt.Key_Right || (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) || (event.key === Qt.Key_J && event.modifiers & Qt.ControlModifier) || (event.key === Qt.Key_L && event.modifiers & Qt.ControlModifier)
+
+                if (isInitKey) {
+                    keyboardNavigationActive = true
+                    if (currentPath !== homeDir) {
+                        backButtonFocused = true
+                        selectedIndex = -1
+                    } else {
+                        backButtonFocused = false
+                        selectedIndex = 0
+                    }
+                    event.accepted = true
+                }
+                return
+            }
+            switch (event.key) {
+            case Qt.Key_Tab:
+                if (backButtonFocused) {
+                    backButtonFocused = false
+                    selectedIndex = 0
+                } else if (selectedIndex < totalItems - 1) {
+                    selectedIndex++
+                } else if (currentPath !== homeDir) {
+                    backButtonFocused = true
+                    selectedIndex = -1
+                } else {
+                    selectedIndex = 0
+                }
+                event.accepted = true
+                break
+            case Qt.Key_Backtab:
+                if (backButtonFocused) {
+                    backButtonFocused = false
+                    selectedIndex = totalItems - 1
+                } else if (selectedIndex > 0) {
+                    selectedIndex--
+                } else if (currentPath !== homeDir) {
+                    backButtonFocused = true
+                    selectedIndex = -1
+                } else {
+                    selectedIndex = totalItems - 1
+                }
+                event.accepted = true
+                break
+            case Qt.Key_N:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (backButtonFocused) {
+                        backButtonFocused = false
+                        selectedIndex = 0
+                    } else if (selectedIndex < totalItems - 1) {
+                        selectedIndex++
+                    }
+                    event.accepted = true
+                }
+                break
+            case Qt.Key_P:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (selectedIndex > 0) {
+                        selectedIndex--
+                    } else if (currentPath !== homeDir) {
+                        backButtonFocused = true
+                        selectedIndex = -1
+                    }
+                    event.accepted = true
+                }
+                break
+            case Qt.Key_J:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (selectedIndex < totalItems - 1) {
+                        selectedIndex++
+                    }
+                    event.accepted = true
+                }
+                break
+            case Qt.Key_K:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (selectedIndex > 0) {
+                        selectedIndex--
+                    } else if (currentPath !== homeDir) {
+                        backButtonFocused = true
+                        selectedIndex = -1
+                    }
+                    event.accepted = true
+                }
+                break
+            case Qt.Key_H:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (!backButtonFocused && selectedIndex > 0) {
+                        selectedIndex--
+                    } else if (currentPath !== homeDir) {
+                        backButtonFocused = true
+                        selectedIndex = -1
+                    }
+                    event.accepted = true
+                }
+                break
+            case Qt.Key_L:
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (backButtonFocused) {
+                        backButtonFocused = false
+                        selectedIndex = 0
+                    } else if (selectedIndex < totalItems - 1) {
+                        selectedIndex++
+                    }
+                    event.accepted = true
+                }
+                break
+            case Qt.Key_Left:
+                if (pathInputHasFocus)
+                    return
+                if (backButtonFocused)
+                    return
+
+                if (selectedIndex > 0) {
+                    selectedIndex--
+                } else if (currentPath !== homeDir) {
+                    backButtonFocused = true
+                    selectedIndex = -1
+                }
+                event.accepted = true
+                break
+            case Qt.Key_Right:
+                if (pathInputHasFocus)
+                    return
+
+                if (backButtonFocused) {
+                    backButtonFocused = false
+                    selectedIndex = 0
+                } else if (selectedIndex < totalItems - 1) {
+                    selectedIndex++
+                }
+                event.accepted = true
+                break
+            case Qt.Key_Up:
+                if (backButtonFocused) {
+                    backButtonFocused = false
+                    if (gridColumns === 1) {
+                        selectedIndex = 0
+                    } else {
+                        var col = selectedIndex % gridColumns
+                        selectedIndex = Math.min(col, totalItems - 1)
+                    }
+                } else if (selectedIndex >= gridColumns) {
+                    selectedIndex -= gridColumns
+                } else if (selectedIndex > 0 && gridColumns === 1) {
+                    selectedIndex--
+                } else if (currentPath !== homeDir) {
+                    backButtonFocused = true
+                    selectedIndex = -1
+                }
+                event.accepted = true
+                break
+            case Qt.Key_Down:
+                if (backButtonFocused) {
+                    backButtonFocused = false
+                    selectedIndex = 0
+                } else if (gridColumns === 1) {
+                    if (selectedIndex < totalItems - 1) {
+                        selectedIndex++
+                    }
+                } else {
+                    var newIndex = selectedIndex + gridColumns
+                    if (newIndex < totalItems) {
+                        selectedIndex = newIndex
+                    } else {
+                        var lastRowStart = Math.floor((totalItems - 1) / gridColumns) * gridColumns
+                        var col = selectedIndex % gridColumns
+                        var targetIndex = lastRowStart + col
+                        if (targetIndex < totalItems && targetIndex > selectedIndex) {
+                            selectedIndex = targetIndex
+                        }
+                    }
+                }
+                event.accepted = true
+                break
+            case Qt.Key_Return:
+            case Qt.Key_Enter:
+            case Qt.Key_Space:
+                if (backButtonFocused)
+                    navigateUp()
+                else if (selectedIndex >= 0 && selectedIndex < totalItems)
+                    fileBrowserModal.keyboardFileSelection(selectedIndex)
+                event.accepted = true
+                break
+            }
+        }
+    }
+
+    Timer {
+        id: keyboardSelectionTimer
+
+        property int targetIndex: -1
+
+        interval: 1
+        onTriggered: {
+            executeKeyboardSelection(targetIndex)
+        }
+    }
+
+    content: Component {
+        Item {
+            anchors.fill: parent
+
+            Keys.onPressed: event => {
+                                keyboardController.handleKey(event)
+                            }
+
+            onVisibleChanged: {
+                if (visible) {
+                    forceActiveFocus()
+                }
+            }
+
+            Column {
+                anchors.fill: parent
+                spacing: 0
+
+                Item {
+                    width: parent.width
+                    height: 48
+
+                    Row {
+                        spacing: Theme.spacingM
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.left: parent.left
+                        anchors.leftMargin: Theme.spacingL
+
+                        DankIcon {
+                            name: browserIcon
+                            size: Theme.iconSizeLarge
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: browserTitle
+                            font.pixelSize: Theme.fontSizeXLarge
+                            color: Theme.surfaceText
+                            font.weight: Font.Medium
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+
+                    Row {
+                        anchors.right: parent.right
+                        anchors.rightMargin: Theme.spacingM
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingS
+
+                        DankActionButton {
+                            circular: false
+                            iconName: showHiddenFiles ? "visibility_off" : "visibility"
+                            iconSize: Theme.iconSize - 4
+                            iconColor: showHiddenFiles ? Theme.primary : Theme.surfaceText
+                            onClicked: showHiddenFiles = !showHiddenFiles
+                        }
+
+                        DankActionButton {
+                            circular: false
+                            iconName: viewMode === "grid" ? "view_list" : "grid_view"
+                            iconSize: Theme.iconSize - 4
+                            iconColor: Theme.surfaceText
+                            onClicked: viewMode = viewMode === "grid" ? "list" : "grid"
+                        }
+
+                        DankActionButton {
+                            circular: false
+                            iconName: iconSizeIndex === 0 ? "photo_size_select_small" : iconSizeIndex === 1 ? "photo_size_select_large" : iconSizeIndex === 2 ? "photo_size_select_actual" : "zoom_in"
+                            iconSize: Theme.iconSize - 4
+                            iconColor: Theme.surfaceText
+                            visible: viewMode === "grid"
+                            onClicked: iconSizeIndex = (iconSizeIndex + 1) % iconSizes.length
+                        }
+
+                        DankActionButton {
+                            circular: false
+                            iconName: "info"
+                            iconSize: Theme.iconSize - 4
+                            iconColor: Theme.surfaceText
+                            onClicked: fileBrowserModal.showKeyboardHints = !fileBrowserModal.showKeyboardHints
+                        }
+
+                        DankActionButton {
+                            circular: false
+                            iconName: "close"
+                            iconSize: Theme.iconSize - 4
+                            iconColor: Theme.surfaceText
+                            onClicked: fileBrowserModal.close()
+                        }
+                    }
+                }
+
+                StyledRect {
+                    width: parent.width
+                    height: 1
+                    color: Theme.outline
+                }
+
+                Item {
+                    width: parent.width
+                    height: parent.height - 49
+
+                    Row {
+                        anchors.fill: parent
+                        spacing: 0
+
+                        Row {
+                            width: showSidebar ? 201 : 0
+                            height: parent.height
+                            spacing: 0
+                            visible: showSidebar
+
+                            FileBrowserSidebar {
+                                height: parent.height
+                                quickAccessLocations: fileBrowserModal.quickAccessLocations
+                                currentPath: fileBrowserModal.currentPath
+                                onLocationSelected: path => navigateTo(path)
+                            }
+
+                            StyledRect {
+                                width: 1
+                                height: parent.height
+                                color: Theme.outline
+                            }
+                        }
+
+                        Column {
+                            width: parent.width - (showSidebar ? 201 : 0)
+                            height: parent.height
+                            spacing: 0
+
+                            FileBrowserNavigation {
+                                width: parent.width
+                                currentPath: fileBrowserModal.currentPath
+                                homeDir: fileBrowserModal.homeDir
+                                backButtonFocused: fileBrowserModal.backButtonFocused
+                                keyboardNavigationActive: fileBrowserModal.keyboardNavigationActive
+                                showSidebar: fileBrowserModal.showSidebar
+                                pathEditMode: fileBrowserModal.pathEditMode
+                                onNavigateUp: fileBrowserModal.navigateUp()
+                                onNavigateTo: path => fileBrowserModal.navigateTo(path)
+                                onPathInputFocusChanged: hasFocus => {
+                                                             fileBrowserModal.pathInputHasFocus = hasFocus
+                                                             if (hasFocus) {
+                                                                 fileBrowserModal.pathEditMode = true
+                                                             }
+                                                         }
+                            }
+
+                            StyledRect {
+                                width: parent.width
+                                height: 1
+                                color: Theme.outline
+                            }
+
+                            Item {
+                                id: gridContainer
+                                width: parent.width
+                                height: parent.height - 41
+                                clip: true
+
+                                property real gridCellWidth: iconSizes[iconSizeIndex] + 24
+                                property real gridCellHeight: iconSizes[iconSizeIndex] + 56
+                                property real availableGridWidth: width - Theme.spacingM * 2
+                                property int gridColumns: Math.max(1, Math.floor(availableGridWidth / gridCellWidth))
+                                property real gridLeftMargin: Theme.spacingM + Math.max(0, (availableGridWidth - (gridColumns * gridCellWidth)) / 2)
+
+                                onGridColumnsChanged: {
+                                    fileBrowserModal.actualGridColumns = gridColumns
+                                }
+                                Component.onCompleted: {
+                                    fileBrowserModal.actualGridColumns = gridColumns
+                                }
+
+                                DankGridView {
+                                    id: fileGrid
+                                    anchors.fill: parent
+                                    anchors.leftMargin: gridContainer.gridLeftMargin
+                                    anchors.rightMargin: Theme.spacingM
+                                    anchors.topMargin: Theme.spacingS
+                                    anchors.bottomMargin: Theme.spacingS
+                                    visible: viewMode === "grid"
+                                    cellWidth: gridContainer.gridCellWidth
+                                    cellHeight: gridContainer.gridCellHeight
+                                    cacheBuffer: 260
+                                    model: folderModel
+                                    currentIndex: selectedIndex
+                                    onCurrentIndexChanged: {
+                                        if (keyboardNavigationActive && currentIndex >= 0)
+                                            positionViewAtIndex(currentIndex, GridView.Contain)
+                                    }
+
+                                    ScrollBar.vertical: DankScrollbar {
+                                        id: gridScrollbar
+                                    }
+
+                                    ScrollBar.horizontal: ScrollBar {
+                                        policy: ScrollBar.AlwaysOff
+                                    }
+
+                                    delegate: FileBrowserGridDelegate {
+                                        iconSizes: fileBrowserModal.iconSizes
+                                        iconSizeIndex: fileBrowserModal.iconSizeIndex
+                                        selectedIndex: fileBrowserModal.selectedIndex
+                                        keyboardNavigationActive: fileBrowserModal.keyboardNavigationActive
+                                        onItemClicked: (index, path, name, isDir) => {
+                                                           selectedIndex = index
+                                                           setSelectedFileData(path, name, isDir)
+                                                           if (isDir) {
+                                                               navigateTo(path)
+                                                           } else {
+                                                               fileSelected(path)
+                                                               fileBrowserModal.close()
+                                                           }
+                                                       }
+                                        onItemSelected: (index, path, name, isDir) => {
+                                                            setSelectedFileData(path, name, isDir)
+                                                        }
+
+                                        Connections {
+                                            function onKeyboardSelectionRequestedChanged() {
+                                                if (fileBrowserModal.keyboardSelectionRequested && fileBrowserModal.keyboardSelectionIndex === index) {
+                                                    fileBrowserModal.keyboardSelectionRequested = false
+                                                    selectedIndex = index
+                                                    setSelectedFileData(filePath, fileName, fileIsDir)
+                                                    if (fileIsDir) {
+                                                        navigateTo(filePath)
+                                                    } else {
+                                                        fileSelected(filePath)
+                                                        fileBrowserModal.close()
+                                                    }
+                                                }
+                                            }
+
+                                            target: fileBrowserModal
+                                        }
+                                    }
+                                }
+
+                                DankListView {
+                                    id: fileList
+                                    anchors.fill: parent
+                                    anchors.leftMargin: Theme.spacingM
+                                    anchors.rightMargin: Theme.spacingM
+                                    anchors.topMargin: Theme.spacingS
+                                    anchors.bottomMargin: Theme.spacingS
+                                    visible: viewMode === "list"
+                                    spacing: 2
+                                    model: folderModel
+                                    currentIndex: selectedIndex
+                                    onCurrentIndexChanged: {
+                                        if (keyboardNavigationActive && currentIndex >= 0)
+                                            positionViewAtIndex(currentIndex, ListView.Contain)
+                                    }
+
+                                    ScrollBar.vertical: DankScrollbar {
+                                        id: listScrollbar
+                                    }
+
+                                    delegate: FileBrowserListDelegate {
+                                        width: fileList.width
+                                        selectedIndex: fileBrowserModal.selectedIndex
+                                        keyboardNavigationActive: fileBrowserModal.keyboardNavigationActive
+                                        onItemClicked: (index, path, name, isDir) => {
+                                                           selectedIndex = index
+                                                           setSelectedFileData(path, name, isDir)
+                                                           if (isDir) {
+                                                               navigateTo(path)
+                                                           } else {
+                                                               fileSelected(path)
+                                                               fileBrowserModal.close()
+                                                           }
+                                                       }
+                                        onItemSelected: (index, path, name, isDir) => {
+                                                            setSelectedFileData(path, name, isDir)
+                                                        }
+
+                                        Connections {
+                                            function onKeyboardSelectionRequestedChanged() {
+                                                if (fileBrowserModal.keyboardSelectionRequested && fileBrowserModal.keyboardSelectionIndex === index) {
+                                                    fileBrowserModal.keyboardSelectionRequested = false
+                                                    selectedIndex = index
+                                                    setSelectedFileData(filePath, fileName, fileIsDir)
+                                                    if (fileIsDir) {
+                                                        navigateTo(filePath)
+                                                    } else {
+                                                        fileSelected(filePath)
+                                                        fileBrowserModal.close()
+                                                    }
+                                                }
+                                            }
+
+                                            target: fileBrowserModal
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    FileBrowserSaveRow {
+                        anchors.bottom: parent.bottom
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.margins: Theme.spacingL
+                        saveMode: fileBrowserModal.saveMode
+                        defaultFileName: fileBrowserModal.defaultFileName
+                        currentPath: fileBrowserModal.currentPath
+                        onSaveRequested: filePath => handleSaveFile(filePath)
+                    }
+
+                    KeyboardHints {
+                        id: keyboardHints
+
+                        anchors.bottom: parent.bottom
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.margins: Theme.spacingL
+                        showHints: fileBrowserModal.showKeyboardHints
+                    }
+
+                    FileInfo {
+                        id: fileInfo
+
+                        anchors.top: parent.top
+                        anchors.right: parent.right
+                        anchors.margins: Theme.spacingL
+                        width: 300
+                        showFileInfo: fileBrowserModal.showFileInfo
+                        selectedIndex: fileBrowserModal.selectedIndex
+                        sourceFolderModel: folderModel
+                        currentPath: fileBrowserModal.currentPath
+                        currentFileName: fileBrowserModal.selectedFileName
+                        currentFileIsDir: fileBrowserModal.selectedFileIsDir
+                        currentFileExtension: {
+                            if (fileBrowserModal.selectedFileIsDir || !fileBrowserModal.selectedFileName)
+                                return ""
+
+                            var lastDot = fileBrowserModal.selectedFileName.lastIndexOf('.')
+                            return lastDot > 0 ? fileBrowserModal.selectedFileName.substring(lastDot + 1).toLowerCase() : ""
+                        }
+                    }
+
+                    FileBrowserSortMenu {
+                        id: sortMenu
+                        anchors.top: parent.top
+                        anchors.right: parent.right
+                        anchors.topMargin: 120
+                        anchors.rightMargin: Theme.spacingL
+                        sortBy: fileBrowserModal.sortBy
+                        sortAscending: fileBrowserModal.sortAscending
+                        onSortBySelected: value => {
+                                              fileBrowserModal.sortBy = value
+                                          }
+                        onSortOrderSelected: ascending => {
+                                                 fileBrowserModal.sortAscending = ascending
+                                             }
+                    }
+                }
+            }
+
+            FileBrowserOverwriteDialog {
+                anchors.fill: parent
+                showDialog: showOverwriteConfirmation
+                pendingFilePath: fileBrowserModal.pendingFilePath
+                onConfirmed: filePath => {
+                                 showOverwriteConfirmation = false
+                                 fileSelected(filePath)
+                                 pendingFilePath = ""
+                                 Qt.callLater(() => fileBrowserModal.close())
+                             }
+                onCancelled: {
+                    showOverwriteConfirmation = false
+                    pendingFilePath = ""
+                }
+            }
+        }
+    }
+}

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/FileBrowser/FileInfo.qml

@@ -0,0 +1,237 @@
+import QtQuick
+import QtCore
+import Quickshell.Io
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool showFileInfo: false
+    property int selectedIndex: -1
+    property var sourceFolderModel: null
+    property string currentPath: ""
+
+    height: 200
+    radius: Theme.cornerRadius
+    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95)
+    border.color: Theme.secondary
+    border.width: 2
+    opacity: showFileInfo ? 1 : 0
+    z: 100
+
+    onShowFileInfoChanged: {
+        if (showFileInfo && currentFileName && currentPath) {
+            const fullPath = currentPath + "/" + currentFileName
+            fileStatProcess.selectedFilePath = fullPath
+            fileStatProcess.running = true
+        }
+    }
+
+    Process {
+        id: fileStatProcess
+        command: ["stat", "-c", "%y|%A|%s|%n", selectedFilePath]
+        property string selectedFilePath: ""
+        property var fileStats: null
+        running: false
+
+        stdout: StdioCollector {
+            onStreamFinished: {
+                if (text && text.trim()) {
+                    const parts = text.trim().split('|')
+                    if (parts.length >= 4) {
+                        fileStatProcess.fileStats = {
+                            "modifiedTime": parts[0],
+                            "permissions": parts[1],
+                            "size": parseInt(parts[2]) || 0,
+                            "fullPath": parts[3]
+                        }
+                    }
+                }
+            }
+        }
+
+        onExited: function (exitCode) {}
+    }
+
+    property string currentFileName: ""
+    property bool currentFileIsDir: false
+    property string currentFileExtension: ""
+
+    onCurrentFileNameChanged: {
+        if (showFileInfo && currentFileName && currentPath) {
+            const fullPath = currentPath + "/" + currentFileName
+            if (fullPath !== fileStatProcess.selectedFilePath) {
+                fileStatProcess.selectedFilePath = fullPath
+                fileStatProcess.running = true
+            }
+        }
+    }
+
+    function updateFileInfo(filePath, fileName, isDirectory) {
+        if (filePath && filePath !== fileStatProcess.selectedFilePath) {
+            fileStatProcess.selectedFilePath = filePath
+            currentFileName = fileName || ""
+            currentFileIsDir = isDirectory || false
+
+            let ext = ""
+            if (!isDirectory && fileName) {
+                const lastDot = fileName.lastIndexOf('.')
+                if (lastDot > 0) {
+                    ext = fileName.substring(lastDot + 1).toLowerCase()
+                }
+            }
+            currentFileExtension = ext
+
+            if (showFileInfo) {
+                fileStatProcess.running = true
+            }
+        }
+    }
+
+    readonly property var currentFileDisplayData: {
+        if (selectedIndex < 0 || !sourceFolderModel) {
+            return {
+                "exists": false,
+                "name": "No selection",
+                "type": "",
+                "size": "",
+                "modified": "",
+                "permissions": "",
+                "extension": "",
+                "position": "N/A"
+            }
+        }
+
+        const hasValidFile = currentFileName !== ""
+        return {
+            "exists": hasValidFile,
+            "name": hasValidFile ? currentFileName : "Loading...",
+            "type": currentFileIsDir ? "Directory" : "File",
+            "size": fileStatProcess.fileStats ? formatFileSize(fileStatProcess.fileStats.size) : "Calculating...",
+            "modified": fileStatProcess.fileStats ? formatDateTime(fileStatProcess.fileStats.modifiedTime) : "Loading...",
+            "permissions": fileStatProcess.fileStats ? fileStatProcess.fileStats.permissions : "Loading...",
+            "extension": currentFileExtension,
+            "position": sourceFolderModel ? ((selectedIndex + 1) + " of " + sourceFolderModel.count) : "N/A"
+        }
+    }
+
+    Column {
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: Theme.spacingM
+        spacing: Theme.spacingXS
+
+        Row {
+            width: parent.width
+            spacing: Theme.spacingS
+
+            DankIcon {
+                name: "info"
+                size: Theme.iconSize
+                color: Theme.secondary
+            }
+
+            StyledText {
+                text: I18n.tr("File Information")
+                font.pixelSize: Theme.fontSizeMedium
+                color: Theme.surfaceText
+                font.weight: Font.Medium
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+
+        Column {
+            width: parent.width
+            spacing: Theme.spacingXS
+
+            StyledText {
+                text: currentFileDisplayData.name
+                font.pixelSize: Theme.fontSizeMedium
+                color: Theme.surfaceText
+                width: parent.width
+                elide: Text.ElideMiddle
+                wrapMode: Text.NoWrap
+                font.weight: Font.Medium
+            }
+
+            StyledText {
+                text: currentFileDisplayData.type + (currentFileDisplayData.extension ? " (." + currentFileDisplayData.extension + ")" : "")
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceTextMedium
+                width: parent.width
+            }
+
+            StyledText {
+                text: currentFileDisplayData.size
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceTextMedium
+                width: parent.width
+                visible: currentFileDisplayData.exists && !currentFileIsDir
+            }
+
+            StyledText {
+                text: currentFileDisplayData.modified
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceTextMedium
+                width: parent.width
+                elide: Text.ElideRight
+                visible: currentFileDisplayData.exists
+            }
+
+            StyledText {
+                text: currentFileDisplayData.permissions
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceTextMedium
+                visible: currentFileDisplayData.exists
+            }
+
+            StyledText {
+                text: currentFileDisplayData.position
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceTextMedium
+                width: parent.width
+            }
+        }
+    }
+
+    StyledText {
+        text: I18n.tr("F1/I: Toggle • F10: Help")
+        font.pixelSize: Theme.fontSizeSmall
+        color: Theme.surfaceTextMedium
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: Theme.spacingM
+        horizontalAlignment: Text.AlignHCenter
+    }
+
+    function formatFileSize(bytes) {
+        if (bytes === 0 || !bytes) {
+            return "0 B"
+        }
+        const k = 1024
+        const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+        const i = Math.floor(Math.log(bytes) / Math.log(k))
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+    }
+
+    function formatDateTime(dateTimeString) {
+        if (!dateTimeString) {
+            return "Unknown"
+        }
+        const parts = dateTimeString.split(' ')
+        if (parts.length >= 2) {
+            return parts[0] + " " + parts[1].split('.')[0]
+        }
+        return dateTimeString
+    }
+
+    Behavior on opacity {
+        NumberAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+}

Modals/FileBrowser/KeyboardHints.qml

@@ -0,0 +1,50 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool showHints: false
+
+    height: 80
+    radius: Theme.cornerRadius
+    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95)
+    border.color: Theme.primary
+    border.width: 2
+    opacity: showHints ? 1 : 0
+    z: 100
+
+    Column {
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: Theme.spacingS
+        spacing: 2
+
+        StyledText {
+            text: I18n.tr("Tab/Shift+Tab: Nav • ←→↑↓: Grid Nav • Enter/Space: Select")
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceText
+            width: parent.width
+            wrapMode: Text.WordWrap
+            horizontalAlignment: Text.AlignHCenter
+        }
+
+        StyledText {
+            text: I18n.tr("Alt+←/Backspace: Back • F1/I: File Info • F10: Help • Esc: Close")
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceText
+            width: parent.width
+            wrapMode: Text.WordWrap
+            horizontalAlignment: Text.AlignHCenter
+        }
+    }
+
+    Behavior on opacity {
+        NumberAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+}

Modals/FileBrowserModal.qml

@@ -1,298 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtCore
-import Qt.labs.folderlistmodel
-import Quickshell.Io
-import qs.Common
-import qs.Widgets
-
-DankModal {
-    id: fileBrowserModal
-    objectName: "fileBrowserModal"
-    allowStacking: true
-
-    signal fileSelected(string path)
-
-    property string homeDir: StandardPaths.writableLocation(
-                                 StandardPaths.HomeLocation)
-    property string currentPath: ""
-    property var fileExtensions: ["*.*"]
-    property alias filterExtensions: fileBrowserModal.fileExtensions
-    property string browserTitle: "Select File"
-    property string browserIcon: "folder_open"
-    property string browserType: "generic" // "wallpaper" or "profile" for last path memory
-    property bool showHiddenFiles: false
-
-    FolderListModel {
-        id: folderModel
-        showDirsFirst: true
-        showDotAndDotDot: false
-        showHidden: fileBrowserModal.showHiddenFiles
-        nameFilters: fileExtensions
-        showFiles: true
-        showDirs: true
-        folder: currentPath ? "file://" + currentPath : "file://" + homeDir
-    }
-
-    function isImageFile(fileName) {
-        if (!fileName)
-            return false
-        var ext = fileName.toLowerCase().split('.').pop()
-        return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(ext)
-    }
-
-    function getLastPath() {
-        var lastPath = ""
-        if (browserType === "wallpaper") {
-            lastPath = SessionData.wallpaperLastPath
-        } else if (browserType === "profile") {
-            lastPath = SessionData.profileLastPath
-        }
-
-        if (lastPath && lastPath !== "") {
-            return lastPath
-        }
-        return homeDir
-    }
-
-    function saveLastPath(path) {
-        if (browserType === "wallpaper") {
-            SessionData.setWallpaperLastPath(path)
-        } else if (browserType === "profile") {
-            SessionData.setProfileLastPath(path)
-        }
-    }
-
-    Component.onCompleted: {
-        currentPath = getLastPath()
-    }
-
-    width: 800
-    height: 600
-    enableShadow: true
-    visible: false
-
-    onBackgroundClicked: close()
-
-    onVisibleChanged: {
-        if (visible) {
-            var startPath = getLastPath()
-            currentPath = startPath
-        }
-    }
-
-    onCurrentPathChanged: {
-
-    }
-
-    function navigateUp() {
-        var path = currentPath
-
-        if (path === homeDir) {
-            return
-        }
-
-        var lastSlash = path.lastIndexOf('/')
-        if (lastSlash > 0) {
-            var newPath = path.substring(0, lastSlash)
-            if (newPath.length < homeDir.length) {
-                currentPath = homeDir
-                saveLastPath(homeDir)
-            } else {
-                currentPath = newPath
-                saveLastPath(newPath)
-            }
-        }
-    }
-
-    function navigateTo(path) {
-        currentPath = path
-        saveLastPath(path) // Save the path when navigating
-    }
-
-    content: Component {
-        Column {
-            anchors.fill: parent
-            anchors.margins: Theme.spacingM
-            spacing: Theme.spacingS
-
-            Item {
-                width: parent.width
-                height: 40
-
-                Row {
-                    spacing: Theme.spacingM
-                    anchors.verticalCenter: parent.verticalCenter
-
-                    DankIcon {
-                        name: browserIcon
-                        size: Theme.iconSizeLarge
-                        color: Theme.primary
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-
-                    StyledText {
-                        text: browserTitle
-                        font.pixelSize: Theme.fontSizeXLarge
-                        color: Theme.surfaceText
-                        font.weight: Font.Medium
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-                }
-
-                DankActionButton {
-                    circular: false
-                    iconName: "close"
-                    iconSize: Theme.iconSize - 4
-                    iconColor: Theme.surfaceText
-                    hoverColor: Theme.errorHover
-                    onClicked: fileBrowserModal.close()
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
-
-            Row {
-                width: parent.width
-                spacing: Theme.spacingS
-
-                StyledRect {
-                    width: 32
-                    height: 32
-                    radius: Theme.cornerRadius
-                    color: mouseArea.containsMouse
-                           && currentPath !== homeDir ? Theme.surfaceVariant : "transparent"
-                    opacity: currentPath !== homeDir ? 1.0 : 0.0
-
-                    DankIcon {
-                        anchors.centerIn: parent
-                        name: "arrow_back"
-                        size: Theme.iconSizeSmall
-                        color: Theme.surfaceText
-                    }
-
-                    MouseArea {
-                        id: mouseArea
-                        anchors.fill: parent
-                        hoverEnabled: currentPath !== homeDir
-                        cursorShape: currentPath
-                                     !== homeDir ? Qt.PointingHandCursor : Qt.ArrowCursor
-                        enabled: currentPath !== homeDir
-                        onClicked: navigateUp()
-                    }
-                }
-
-                StyledText {
-                    text: fileBrowserModal.currentPath.replace("file://", "")
-                    font.pixelSize: Theme.fontSizeMedium
-                    color: Theme.surfaceText
-                    font.weight: Font.Medium
-                    width: parent.width - 40 - Theme.spacingS
-                    elide: Text.ElideMiddle
-                    anchors.verticalCenter: parent.verticalCenter
-                    maximumLineCount: 1
-                    wrapMode: Text.NoWrap
-                }
-            }
-
-            DankGridView {
-                id: fileGrid
-
-                width: parent.width
-                height: parent.height - 80
-                clip: true
-                cellWidth: 150
-                cellHeight: 130
-                cacheBuffer: 260
-
-                model: folderModel
-
-                ScrollBar.vertical: ScrollBar {
-                    policy: ScrollBar.AsNeeded
-                }
-                ScrollBar.horizontal: ScrollBar {
-                    policy: ScrollBar.AlwaysOff
-                }
-
-                delegate: StyledRect {
-                    id: delegateRoot
-
-                    required property bool fileIsDir
-                    required property string filePath
-                    required property string fileName
-                    required property url fileURL
-
-                    width: 140
-                    height: 120
-                    radius: Theme.cornerRadius
-                    color: mouseArea.containsMouse ? Theme.surfaceVariant : "transparent"
-                    border.color: Theme.outline
-                    border.width: mouseArea.containsMouse ? 1 : 0
-
-                    Column {
-                        anchors.centerIn: parent
-                        spacing: Theme.spacingXS
-
-                        Item {
-                            width: 80
-                            height: 60
-                            anchors.horizontalCenter: parent.horizontalCenter
-
-                            CachingImage {
-                                anchors.fill: parent
-                                source: (!delegateRoot.fileIsDir && isImageFile(delegateRoot.fileName)) ? ("file://" + delegateRoot.filePath) : ""
-                                fillMode: Image.PreserveAspectCrop
-                                visible: !delegateRoot.fileIsDir && isImageFile(delegateRoot.fileName)
-                                maxCacheSize: 80
-                            }
-
-                            DankIcon {
-                                anchors.centerIn: parent
-                                name: "description"
-                                size: Theme.iconSizeLarge
-                                color: Theme.primary
-                                visible: !delegateRoot.fileIsDir
-                                         && !isImageFile(delegateRoot.fileName)
-                            }
-
-                            DankIcon {
-                                anchors.centerIn: parent
-                                name: "folder"
-                                size: Theme.iconSizeLarge
-                                color: Theme.primary
-                                visible: delegateRoot.fileIsDir
-                            }
-                        }
-
-                        StyledText {
-                            text: delegateRoot.fileName || ""
-                            font.pixelSize: Theme.fontSizeSmall
-                            color: Theme.surfaceText
-                            width: 120
-                            elide: Text.ElideMiddle
-                            horizontalAlignment: Text.AlignHCenter
-                            anchors.horizontalCenter: parent.horizontalCenter
-                            maximumLineCount: 2
-                            wrapMode: Text.WordWrap
-                        }
-                    }
-
-                    MouseArea {
-                        id: mouseArea
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        cursorShape: Qt.PointingHandCursor
-
-                        onClicked: {
-                            if (delegateRoot.fileIsDir) {
-                                navigateTo(delegateRoot.filePath)
-                            } else {
-                                fileSelected(delegateRoot.filePath)
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

Modals/HyprKeybindsModal.qml

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

Modals/NetworkInfoModal.qml

@@ -1,19 +1,18 @@
 import QtQuick
 import QtQuick.Controls
-import Quickshell
-import Quickshell.Io
-import Quickshell.Widgets
 import qs.Common
+import qs.Modals.Common
 import qs.Services
 import qs.Widgets
 
 DankModal {
     id: root
 
+    layerNamespace: "dms:network-info"
+
     property bool networkInfoModalVisible: false
     property string networkSSID: ""
     property var networkData: null
-    property string networkDetails: ""
 
     function showNetworkInfo(ssid, data) {
         networkSSID = ssid
@@ -28,21 +27,17 @@ DankModal {
         close()
         networkSSID = ""
         networkData = null
-        networkDetails = ""
     }
 
     visible: networkInfoModalVisible
     width: 600
     height: 500
     enableShadow: true
-    onBackgroundClicked: {
-        hideDialog()
-    }
+    onBackgroundClicked: hideDialog()
     onVisibleChanged: {
         if (!visible) {
             networkSSID = ""
             networkData = null
-            networkDetails = ""
         }
     }
 
@@ -63,99 +58,58 @@ DankModal {
                         spacing: Theme.spacingXS
 
                         StyledText {
-                            text: "Network Information"
+                            text: I18n.tr("Network Information")
                             font.pixelSize: Theme.fontSizeLarge
                             color: Theme.surfaceText
                             font.weight: Font.Medium
                         }
 
                         StyledText {
-                            text: "Details for \"" + networkSSID + "\""
+                            text: `Details for "${networkSSID}"`
                             font.pixelSize: Theme.fontSizeMedium
                             color: Theme.surfaceTextMedium
                             width: parent.width
                             elide: Text.ElideRight
                         }
+
                     }
 
                     DankActionButton {
                         iconName: "close"
                         iconSize: Theme.iconSize - 4
                         iconColor: Theme.surfaceText
-                        hoverColor: Theme.errorHover
-                        onClicked: {
-                            root.hideDialog()
-                        }
+                        onClicked: root.hideDialog()
                     }
+
                 }
 
-                Flickable {
+                Rectangle {
+                    id: detailsRect
+
                     width: parent.width
                     height: parent.height - 140
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceHover
+                    border.color: Theme.outlineStrong
+                    border.width: 1
                     clip: true
-                    contentWidth: width
-                    contentHeight: detailsRect.height
 
-                    // Qt 6.9+ scrolling: flickDeceleration/maximumFlickVelocity only affect touch now
-                    interactive: true
-                    flickDeceleration: 1500
-                    maximumFlickVelocity: 2000
-                    boundsBehavior: Flickable.DragAndOvershootBounds
-                    boundsMovement: Flickable.FollowBoundsBehavior
-                    pressDelay: 0
-                    flickableDirection: Flickable.VerticalFlick
-
-                    // Custom wheel handler for Qt 6.9+ responsive mouse wheel scrolling
-                    WheelHandler {
-                        acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
-                        onWheel: event => {
-                                     let delta = event.pixelDelta.y
-                                     !== 0 ? event.pixelDelta.y
-                                             * 1.8 : event.angleDelta.y / 120 * 60
-                                     let newY = parent.contentY - delta
-                                     newY = Math.max(
-                                         0, Math.min(
-                                             parent.contentHeight - parent.height,
-                                             newY))
-                                     parent.contentY = newY
-                                     event.accepted = true
-                                 }
-                    }
-
-                    Rectangle {
-                        id: detailsRect
-
-                        width: parent.width
-                        height: Math.max(
-                                    parent.parent.height,
-                                    detailsText.contentHeight + Theme.spacingM * 2)
-                        radius: Theme.cornerRadius
-                        color: Theme.surfaceHover
-                        border.color: Theme.outlineStrong
-                        border.width: 1
+                    DankFlickable {
+                        anchors.fill: parent
+                        anchors.margins: Theme.spacingM
+                        contentHeight: detailsText.contentHeight
 
                         StyledText {
                             id: detailsText
 
-                            anchors.fill: parent
-                            anchors.margins: Theme.spacingM
-                            text: NetworkService.networkInfoDetails.replace(
-                                      /\\n/g,
-                                      '\n') || "No information available"
+                            width: parent.width
+                            text: NetworkService.networkInfoDetails && NetworkService.networkInfoDetails.replace(/\\n/g, '\n') || "No information available"
                             font.pixelSize: Theme.fontSizeMedium
                             color: Theme.surfaceText
                             wrapMode: Text.WordWrap
-                            lineHeight: 1.5
                         }
                     }
 
-                    ScrollBar.vertical: ScrollBar {
-                        policy: ScrollBar.AsNeeded
-                    }
-
-                    ScrollBar.horizontal: ScrollBar {
-                        policy: ScrollBar.AlwaysOff
-                    }
                 }
 
                 Item {
@@ -165,20 +119,16 @@ DankModal {
                     Rectangle {
                         anchors.right: parent.right
                         anchors.verticalCenter: parent.verticalCenter
-                        width: Math.max(
-                                   70,
-                                   closeText.contentWidth + Theme.spacingM * 2)
+                        width: Math.max(70, closeText.contentWidth + Theme.spacingM * 2)
                         height: 36
                         radius: Theme.cornerRadius
-                        color: closeArea.containsMouse ? Qt.darker(
-                                                             Theme.primary,
-                                                             1.1) : Theme.primary
+                        color: closeArea.containsMouse ? Qt.darker(Theme.primary, 1.1) : Theme.primary
 
                         StyledText {
                             id: closeText
 
                             anchors.centerIn: parent
-                            text: "Close"
+                            text: I18n.tr("Close")
                             font.pixelSize: Theme.fontSizeMedium
                             color: Theme.background
                             font.weight: Font.Medium
@@ -190,9 +140,7 @@ DankModal {
                             anchors.fill: parent
                             hoverEnabled: true
                             cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                root.hideDialog()
-                            }
+                            onClicked: root.hideDialog()
                         }
 
                         Behavior on color {
@@ -200,10 +148,17 @@ DankModal {
                                 duration: Theme.shortDuration
                                 easing.type: Theme.standardEasing
                             }
+
                         }
+
                     }
+
                 }
+
             }
+
         }
+
     }
+
 }

Modals/NetworkWiredInfoModal.qml

@@ -0,0 +1,164 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Modals.Common
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: root
+
+    layerNamespace: "dms:network-info-wired"
+
+    property bool networkWiredInfoModalVisible: false
+    property string networkID: ""
+    property var networkData: null
+
+    function showNetworkInfo(id, data) {
+        networkID = id
+        networkData = data
+        networkWiredInfoModalVisible = true
+        open()
+        NetworkService.fetchWiredNetworkInfo(data.uuid)
+    }
+
+    function hideDialog() {
+        networkWiredInfoModalVisible = false
+        close()
+        networkID = ""
+        networkData = null
+    }
+
+    visible: networkWiredInfoModalVisible
+    width: 600
+    height: 500
+    enableShadow: true
+    onBackgroundClicked: hideDialog()
+    onVisibleChanged: {
+        if (!visible) {
+            networkID = ""
+            networkData = null
+        }
+    }
+
+    content: Component {
+        Item {
+            anchors.fill: parent
+
+            Column {
+                anchors.fill: parent
+                anchors.margins: Theme.spacingL
+                spacing: Theme.spacingL
+
+                Row {
+                    width: parent.width
+
+                    Column {
+                        width: parent.width - 40
+                        spacing: Theme.spacingXS
+
+                        StyledText {
+                            text: I18n.tr("Network Information")
+                            font.pixelSize: Theme.fontSizeLarge
+                            color: Theme.surfaceText
+                            font.weight: Font.Medium
+                        }
+
+                        StyledText {
+                            text: `Details for "${networkID}"`
+                            font.pixelSize: Theme.fontSizeMedium
+                            color: Theme.surfaceTextMedium
+                            width: parent.width
+                            elide: Text.ElideRight
+                        }
+
+                    }
+
+                    DankActionButton {
+                        iconName: "close"
+                        iconSize: Theme.iconSize - 4
+                        iconColor: Theme.surfaceText
+                        onClicked: root.hideDialog()
+                    }
+
+                }
+
+                Rectangle {
+                    id: detailsRect
+
+                    width: parent.width
+                    height: parent.height - 140
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceHover
+                    border.color: Theme.outlineStrong
+                    border.width: 1
+                    clip: true
+
+                    DankFlickable {
+                        anchors.fill: parent
+                        anchors.margins: Theme.spacingM
+                        contentHeight: detailsText.contentHeight
+
+                        StyledText {
+                            id: detailsText
+
+                            width: parent.width
+                            text: NetworkService.networkWiredInfoDetails && NetworkService.networkWiredInfoDetails.replace(/\\n/g, '\n') || "No information available"
+                            font.pixelSize: Theme.fontSizeMedium
+                            color: Theme.surfaceText
+                            wrapMode: Text.WordWrap
+                        }
+                    }
+
+                }
+
+                Item {
+                    width: parent.width
+                    height: 40
+
+                    Rectangle {
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: Math.max(70, closeText.contentWidth + Theme.spacingM * 2)
+                        height: 36
+                        radius: Theme.cornerRadius
+                        color: closeArea.containsMouse ? Qt.darker(Theme.primary, 1.1) : Theme.primary
+
+                        StyledText {
+                            id: closeText
+
+                            anchors.centerIn: parent
+                            text: I18n.tr("Close")
+                            font.pixelSize: Theme.fontSizeMedium
+                            color: Theme.background
+                            font.weight: Font.Medium
+                        }
+
+                        MouseArea {
+                            id: closeArea
+
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: root.hideDialog()
+                        }
+
+                        Behavior on color {
+                            ColorAnimation {
+                                duration: Theme.shortDuration
+                                easing.type: Theme.standardEasing
+                            }
+
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}

Modals/NotificationModal.qml

@@ -1,10 +1,7 @@
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
-import Quickshell
 import Quickshell.Io
-import Quickshell.Widgets
 import qs.Common
+import qs.Modals.Common
 import qs.Modules.Notifications.Center
 import qs.Services
 import qs.Widgets
@@ -12,27 +9,7 @@ import qs.Widgets
 DankModal {
     id: notificationModal
 
-    width: 500
-    height: 700
-    visible: false
-    onBackgroundClicked: hide()
-    onDialogClosed: {
-        notificationModalOpen = false
-        modalKeyboardController.reset()
-    }
-
-    modalFocusScope.Keys.onPressed: function (event) {
-        modalKeyboardController.handleKey(event)
-    }
-
-    NotificationKeyboardController {
-        id: modalKeyboardController
-        listView: null
-        isOpen: notificationModal.notificationModalOpen
-        onClose: function () {
-            notificationModal.hide()
-        }
-    }
+    layerNamespace: "dms:notification-modal"
 
     property bool notificationModalOpen: false
     property var notificationListRef: null
@@ -42,10 +19,21 @@ DankModal {
         NotificationService.onOverlayOpen()
         open()
         modalKeyboardController.reset()
-
         if (modalKeyboardController && notificationListRef) {
             modalKeyboardController.listView = notificationListRef
             modalKeyboardController.rebuildFlatNavigation()
+
+            Qt.callLater(() => {
+                modalKeyboardController.keyboardNavigationActive = true
+                modalKeyboardController.selectedFlatIndex = 0
+                modalKeyboardController.updateSelectedIdFromIndex()
+                if (notificationListRef) {
+                    notificationListRef.keyboardActive = true
+                    notificationListRef.currentIndex = 0
+                }
+                modalKeyboardController.selectionVersion++
+                modalKeyboardController.ensureVisible()
+            })
         }
     }
 
@@ -57,32 +45,57 @@ DankModal {
     }
 
     function toggle() {
-        if (shouldBeVisible)
+        if (shouldBeVisible) {
             hide()
-        else
+        } else {
             show()
+        }
+    }
+
+    width: 500
+    height: 700
+    visible: false
+    onBackgroundClicked: hide()
+    onOpened: () => {
+        Qt.callLater(() => modalFocusScope.forceActiveFocus());
+    }
+    onShouldBeVisibleChanged: (shouldBeVisible) => {
+        if (!shouldBeVisible) {
+            notificationModalOpen = false
+            modalKeyboardController.reset()
+            NotificationService.onOverlayClose()
+        }
+    }
+    modalFocusScope.Keys.onPressed: (event) => modalKeyboardController.handleKey(event)
+
+    NotificationKeyboardController {
+        id: modalKeyboardController
+
+        listView: null
+        isOpen: notificationModal.notificationModalOpen
+        onClose: () => notificationModal.hide()
     }
 
     IpcHandler {
-        function open() {
-            notificationModal.show()
-            return "NOTIFICATION_MODAL_OPEN_SUCCESS"
+        function open(): string {
+            notificationModal.show();
+            return "NOTIFICATION_MODAL_OPEN_SUCCESS";
         }
 
-        function close() {
-            notificationModal.hide()
-            return "NOTIFICATION_MODAL_CLOSE_SUCCESS"
+        function close(): string {
+            notificationModal.hide();
+            return "NOTIFICATION_MODAL_CLOSE_SUCCESS";
         }
 
-        function toggle() {
-            notificationModal.toggle()
-            return "NOTIFICATION_MODAL_TOGGLE_SUCCESS"
+        function toggle(): string {
+            notificationModal.toggle();
+            return "NOTIFICATION_MODAL_TOGGLE_SUCCESS";
         }
 
         target: "notifications"
     }
 
-    property Component notificationContent: Component {
+    content: Component {
         Item {
             id: notificationKeyHandler
 
@@ -95,11 +108,13 @@ DankModal {
 
                 NotificationHeader {
                     id: notificationHeader
+
                     keyboardController: modalKeyboardController
                 }
 
                 NotificationSettings {
                     id: notificationSettings
+
                     expanded: notificationHeader.showSettings
                 }
 
@@ -109,7 +124,6 @@ DankModal {
                     width: parent.width
                     height: parent.height - y
                     keyboardController: modalKeyboardController
-
                     Component.onCompleted: {
                         notificationModal.notificationListRef = notificationList
                         if (modalKeyboardController) {
@@ -118,18 +132,21 @@ DankModal {
                         }
                     }
                 }
+
             }
 
             NotificationKeyboardHints {
                 id: keyboardHints
+
                 anchors.bottom: parent.bottom
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.margins: Theme.spacingL
                 showHints: modalKeyboardController.showKeyboardHints
             }
+
         }
+
     }
 
-    content: notificationContent
 }

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/PowerConfirmModal.qml

@@ -1,166 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import Quickshell
-import Quickshell.Io
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-DankModal {
-    id: root
-
-    property string powerConfirmAction: ""
-    property string powerConfirmTitle: ""
-    property string powerConfirmMessage: ""
-
-    function show(action, title, message) {
-        powerConfirmAction = action
-        powerConfirmTitle = title
-        powerConfirmMessage = message
-        open()
-    }
-
-    function executePowerAction(action) {
-        switch (action) {
-        case "logout":
-            CompositorService.logout()
-            break
-        case "suspend":
-            SessionService.suspend()
-            break
-        case "reboot":
-            SessionService.reboot()
-            break
-        case "poweroff":
-            SessionService.poweroff()
-            break
-        }
-    }
-
-    shouldBeVisible: false
-    width: 350
-    height: 160
-    enableShadow: false
-    onBackgroundClicked: {
-        close()
-    }
-
-    content: Component {
-        Item {
-            anchors.fill: parent
-
-            Column {
-                anchors.centerIn: parent
-                width: parent.width - Theme.spacingM * 2
-                spacing: Theme.spacingM
-
-                StyledText {
-                    text: powerConfirmTitle
-                    font.pixelSize: Theme.fontSizeLarge
-                    color: {
-                        switch (powerConfirmAction) {
-                        case "poweroff":
-                            return Theme.error
-                        case "reboot":
-                            return Theme.warning
-                        default:
-                            return Theme.surfaceText
-                        }
-                    }
-                    font.weight: Font.Medium
-                    width: parent.width
-                    horizontalAlignment: Text.AlignHCenter
-                }
-
-                StyledText {
-                    text: powerConfirmMessage
-                    font.pixelSize: Theme.fontSizeMedium
-                    color: Theme.surfaceText
-                    width: parent.width
-                    horizontalAlignment: Text.AlignHCenter
-                    wrapMode: Text.WordWrap
-                }
-
-                Item {
-                    height: Theme.spacingS
-                }
-
-                Row {
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    spacing: Theme.spacingM
-
-                    Rectangle {
-                        width: 120
-                        height: 40
-                        radius: Theme.cornerRadius
-                        color: cancelButton.containsMouse ? Theme.surfaceTextPressed : Theme.surfaceVariantAlpha
-
-                        StyledText {
-                            text: "Cancel"
-                            font.pixelSize: Theme.fontSizeMedium
-                            color: Theme.surfaceText
-                            font.weight: Font.Medium
-                            anchors.centerIn: parent
-                        }
-
-                        MouseArea {
-                            id: cancelButton
-
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                close()
-                            }
-                        }
-                    }
-
-                    Rectangle {
-                        width: 120
-                        height: 40
-                        radius: Theme.cornerRadius
-                        color: {
-                            let baseColor
-                            switch (powerConfirmAction) {
-                            case "poweroff":
-                                baseColor = Theme.error
-                                break
-                            case "reboot":
-                                baseColor = Theme.warning
-                                break
-                            default:
-                                baseColor = Theme.primary
-                                break
-                            }
-                            return confirmButton.containsMouse ? Qt.rgba(
-                                                                     baseColor.r,
-                                                                     baseColor.g,
-                                                                     baseColor.b,
-                                                                     0.9) : baseColor
-                        }
-
-                        StyledText {
-                            text: "Confirm"
-                            font.pixelSize: Theme.fontSizeMedium
-                            color: Theme.primaryText
-                            font.weight: Font.Medium
-                            anchors.centerIn: parent
-                        }
-
-                        MouseArea {
-                            id: confirmButton
-
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                close()
-                                executePowerAction(powerConfirmAction)
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

Modals/PowerMenuModal.qml

@@ -0,0 +1,456 @@
+import QtQuick
+import qs.Common
+import qs.Modals.Common
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: root
+
+    layerNamespace: "dms:power-menu"
+
+    property int selectedIndex: 0
+    property int optionCount: SessionService.hibernateSupported ? 5 : 4
+    property rect parentBounds: Qt.rect(0, 0, 0, 0)
+    property var parentScreen: null
+
+    signal powerActionRequested(string action, string title, string message)
+
+    function openCentered() {
+        parentBounds = Qt.rect(0, 0, 0, 0)
+        parentScreen = null
+        backgroundOpacity = 0.5
+        open()
+    }
+
+    function openFromControlCenter(bounds, targetScreen) {
+        parentBounds = bounds
+        parentScreen = targetScreen
+        backgroundOpacity = 0
+        open()
+    }
+
+    function selectOption(action) {
+        close();
+        const actions = {
+            "logout": {
+                "title": I18n.tr("Log Out"),
+                "message": I18n.tr("Are you sure you want to log out?")
+            },
+            "suspend": {
+                "title": I18n.tr("Suspend"),
+                "message": I18n.tr("Are you sure you want to suspend the system?")
+            },
+            "hibernate": {
+                "title": I18n.tr("Hibernate"),
+                "message": I18n.tr("Are you sure you want to hibernate the system?")
+            },
+            "reboot": {
+                "title": I18n.tr("Reboot"),
+                "message": I18n.tr("Are you sure you want to reboot the system?")
+            },
+            "poweroff": {
+                "title": I18n.tr("Power Off"),
+                "message": I18n.tr("Are you sure you want to power off the system?")
+            }
+        }
+        const selected = actions[action]
+        if (selected) {
+            root.powerActionRequested(action, selected.title, selected.message);
+        }
+
+    }
+
+    shouldBeVisible: false
+    width: 320
+    height: contentLoader.item ? contentLoader.item.implicitHeight : 300
+    enableShadow: true
+    screen: parentScreen
+    positioning: parentBounds.width > 0 ? "custom" : "center"
+    customPosition: {
+        if (parentBounds.width > 0) {
+            const centerX = parentBounds.x + (parentBounds.width - width) / 2
+            const centerY = parentBounds.y + (parentBounds.height - height) / 2
+            return Qt.point(centerX, centerY)
+        }
+        return Qt.point(0, 0)
+    }
+    onBackgroundClicked: () => {
+        return close();
+    }
+    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;
+        }
+    }
+
+    content: Component {
+        Item {
+            anchors.fill: parent
+            implicitHeight: mainColumn.implicitHeight + Theme.spacingL * 2
+
+            Column {
+                id: mainColumn
+                anchors.fill: parent
+                anchors.margins: Theme.spacingL
+                spacing: Theme.spacingM
+
+                Row {
+                    width: parent.width
+
+                    StyledText {
+                        text: I18n.tr("Power Options")
+                        font.pixelSize: Theme.fontSizeLarge
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    Item {
+                        width: parent.width - 150
+                        height: 1
+                    }
+
+                    DankActionButton {
+                        iconName: "close"
+                        iconSize: Theme.iconSize - 4
+                        iconColor: Theme.surfaceText
+                        onClicked: () => {
+                            return close();
+                        }
+                    }
+
+                }
+
+                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

@@ -1,12 +1,7 @@
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
 import QtQuick.Layouts
-import Quickshell
-import Quickshell.Io
-import Quickshell.Wayland
-import Quickshell.Widgets
 import qs.Common
+import qs.Modals.Common
 import qs.Modules.ProcessList
 import qs.Services
 import qs.Widgets
@@ -14,42 +9,49 @@ import qs.Widgets
 DankModal {
     id: processListModal
 
+    layerNamespace: "dms:process-list-modal"
+
     property int currentTab: 0
     property var tabNames: ["Processes", "Performance", "System"]
 
     function show() {
         if (!DgopService.dgopAvailable) {
-            console.warn("ProcessListModal: dgop is not available")
-            return
+            console.warn("ProcessListModal: dgop is not available");
+            return ;
         }
-        open()
-        UserInfoService.getUptime()
+        open();
+        UserInfoService.getUptime();
     }
 
     function hide() {
-        close()
-        if (processContextMenu.visible)
-            processContextMenu.close()
+        close();
+        if (processContextMenu.visible) {
+            processContextMenu.close();
+        }
+
     }
 
     function toggle() {
         if (!DgopService.dgopAvailable) {
-            console.warn("ProcessListModal: dgop is not available")
-            return
+            console.warn("ProcessListModal: dgop is not available");
+            return ;
+        }
+        if (shouldBeVisible) {
+            hide();
+        } else {
+            show();
         }
-        if (shouldBeVisible)
-            hide()
-        else
-            show()
     }
 
     width: 900
     height: 680
     visible: false
-    backgroundColor: Theme.popupBackground()
+    backgroundColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
     cornerRadius: Theme.cornerRadius
     enableShadow: true
-    onBackgroundClicked: hide()
+    onBackgroundClicked: () => {
+        return hide();
+    }
 
     Component {
         id: processesTabComponent
@@ -57,18 +59,23 @@ DankModal {
         ProcessesTab {
             contextMenu: processContextMenu
         }
+
     }
 
     Component {
         id: performanceTabComponent
 
-        PerformanceTab {}
+        PerformanceTab {
+        }
+
     }
 
     Component {
         id: systemTabComponent
 
-        SystemTab {}
+        SystemTab {
+        }
+
     }
 
     ProcessContextMenu {
@@ -79,19 +86,19 @@ DankModal {
         Item {
             anchors.fill: parent
             focus: true
-            Keys.onPressed: function (event) {
+            Keys.onPressed: (event) => {
                 if (event.key === Qt.Key_Escape) {
-                    processListModal.hide()
-                    event.accepted = true
+                    processListModal.hide();
+                    event.accepted = true;
                 } else if (event.key === Qt.Key_1) {
-                    currentTab = 0
-                    event.accepted = true
+                    currentTab = 0;
+                    event.accepted = true;
                 } else if (event.key === Qt.Key_2) {
-                    currentTab = 1
-                    event.accepted = true
+                    currentTab = 1;
+                    event.accepted = true;
                 } else if (event.key === Qt.Key_3) {
-                    currentTab = 2
-                    event.accepted = true
+                    currentTab = 2;
+                    event.accepted = true;
                 }
             }
 
@@ -118,7 +125,7 @@ DankModal {
                     }
 
                     StyledText {
-                        text: "System Monitor Unavailable"
+                        text: I18n.tr("System Monitor Unavailable")
                         font.pixelSize: Theme.fontSizeLarge
                         font.weight: Font.Bold
                         color: Theme.error
@@ -126,14 +133,16 @@ DankModal {
                     }
 
                     StyledText {
-                        text: "The 'dgop' tool is required for system monitoring.\nPlease install dgop to use this feature."
+                        text: I18n.tr("The 'dgop' tool is required for system monitoring.\nPlease install dgop to use this feature.")
                         font.pixelSize: Theme.fontSizeMedium
                         color: Theme.surfaceText
                         anchors.horizontalCenter: parent.horizontalCenter
                         horizontalAlignment: Text.AlignHCenter
                         wrapMode: Text.WordWrap
                     }
+
                 }
+
             }
 
             ColumnLayout {
@@ -147,7 +156,7 @@ DankModal {
                     height: 40
 
                     StyledText {
-                        text: "System Monitor"
+                        text: I18n.tr("System Monitor")
                         font.pixelSize: Theme.fontSizeLarge + 4
                         font.weight: Font.Bold
                         color: Theme.surfaceText
@@ -163,16 +172,18 @@ DankModal {
                         iconName: "close"
                         iconSize: Theme.iconSize - 4
                         iconColor: Theme.surfaceText
-                        hoverColor: Theme.errorHover
-                        onClicked: processListModal.hide()
+                        onClicked: () => {
+                            return processListModal.hide();
+                        }
                         Layout.alignment: Qt.AlignVCenter
                     }
+
                 }
 
                 Rectangle {
                     Layout.fillWidth: true
                     height: 52
-                    color: Theme.surfaceSelected
+                    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
                     radius: Theme.cornerRadius
                     border.color: Theme.outlineLight
                     border.width: 1
@@ -199,20 +210,11 @@ DankModal {
 
                                     DankIcon {
                                         name: {
-                                            switch (index) {
-                                            case 0:
-                                                return "list_alt"
-                                            case 1:
-                                                return "analytics"
-                                            case 2:
-                                                return "settings"
-                                            default:
-                                                return "tab"
-                                            }
+                                            const tabIcons = ["list_alt", "analytics", "settings"];
+                                            return tabIcons[index] || "tab";
                                         }
                                         size: Theme.iconSize - 2
-                                        color: currentTab
-                                               === index ? Theme.primary : Theme.surfaceText
+                                        color: currentTab === index ? Theme.primary : Theme.surfaceText
                                         opacity: currentTab === index ? 1 : 0.7
                                         anchors.verticalCenter: parent.verticalCenter
 
@@ -220,15 +222,16 @@ DankModal {
                                             ColorAnimation {
                                                 duration: Theme.shortDuration
                                             }
+
                                         }
+
                                     }
 
                                     StyledText {
                                         text: modelData
                                         font.pixelSize: Theme.fontSizeLarge
                                         font.weight: Font.Medium
-                                        color: currentTab
-                                               === index ? Theme.primary : Theme.surfaceText
+                                        color: currentTab === index ? Theme.primary : Theme.surfaceText
                                         anchors.verticalCenter: parent.verticalCenter
                                         anchors.verticalCenterOffset: -1
 
@@ -236,8 +239,11 @@ DankModal {
                                             ColorAnimation {
                                                 duration: Theme.shortDuration
                                             }
+
                                         }
+
                                     }
+
                                 }
 
                                 MouseArea {
@@ -246,8 +252,8 @@ DankModal {
                                     anchors.fill: parent
                                     hoverEnabled: true
                                     cursorShape: Qt.PointingHandCursor
-                                    onClicked: {
-                                        currentTab = index
+                                    onClicked: () => {
+                                        currentTab = index;
                                     }
                                 }
 
@@ -255,23 +261,29 @@ DankModal {
                                     ColorAnimation {
                                         duration: Theme.shortDuration
                                     }
+
                                 }
 
                                 Behavior on border.color {
                                     ColorAnimation {
                                         duration: Theme.shortDuration
                                     }
+
                                 }
+
                             }
+
                         }
+
                     }
+
                 }
 
                 Rectangle {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
                     radius: Theme.cornerRadius
-                    color: Theme.surfaceLight
+                    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
                     border.color: Theme.outlineLight
                     border.width: 1
 
@@ -290,7 +302,9 @@ DankModal {
                                 duration: Theme.mediumDuration
                                 easing.type: Theme.emphasizedEasing
                             }
+
                         }
+
                     }
 
                     Loader {
@@ -308,7 +322,9 @@ DankModal {
                                 duration: Theme.mediumDuration
                                 easing.type: Theme.emphasizedEasing
                             }
+
                         }
+
                     }
 
                     Loader {
@@ -326,10 +342,17 @@ DankModal {
                                 duration: Theme.mediumDuration
                                 easing.type: Theme.emphasizedEasing
                             }
+
                         }
+
                     }
+
                 }
+
             }
+
         }
+
     }
+
 }

Modals/Settings/PowerSettings.qml

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

Modals/Settings/ProfileSection.qml

@@ -0,0 +1,153 @@
+import QtQuick
+import QtQuick.Effects
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property var parentModal: null
+
+    width: parent.width - Theme.spacingS * 2
+    height: 110
+    radius: Theme.cornerRadius
+    color: "transparent"
+    border.width: 0
+
+    Row {
+        anchors.left: parent.left
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.leftMargin: Theme.spacingM
+        anchors.rightMargin: Theme.spacingM
+        spacing: Theme.spacingM
+
+        Item {
+            id: profileImageContainer
+
+            width: 80
+            height: 80
+            anchors.verticalCenter: parent.verticalCenter
+
+            DankCircularImage {
+                id: profileImage
+
+                anchors.fill: parent
+                imageSource: {
+                    if (PortalService.profileImage === "") {
+                        return "";
+                    }
+                    if (PortalService.profileImage.startsWith("/")) {
+                        return "file://" + PortalService.profileImage;
+                    }
+                    return PortalService.profileImage;
+                }
+                fallbackIcon: "person"
+            }
+
+            Rectangle {
+                anchors.fill: parent
+                radius: width / 2
+                color: Qt.rgba(0, 0, 0, 0.7)
+                visible: profileMouseArea.containsMouse
+
+                Row {
+                    anchors.centerIn: parent
+                    spacing: 4
+
+                    Rectangle {
+                        width: 28
+                        height: 28
+                        radius: 14
+                        color: Qt.rgba(255, 255, 255, 0.9)
+
+                        DankIcon {
+                            anchors.centerIn: parent
+                            name: "edit"
+                            size: 16
+                            color: "black"
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: () => {
+                                if (root.parentModal) {
+                                    root.parentModal.allowFocusOverride = true;
+                                    root.parentModal.shouldHaveFocus = false;
+                                    if (root.parentModal.profileBrowser) {
+                                        root.parentModal.profileBrowser.open();
+                                    }
+                                }
+                            }
+                        }
+
+                    }
+
+                    Rectangle {
+                        width: 28
+                        height: 28
+                        radius: 14
+                        color: Qt.rgba(255, 255, 255, 0.9)
+                        visible: profileImage.hasImage
+
+                        DankIcon {
+                            anchors.centerIn: parent
+                            name: "close"
+                            size: 16
+                            color: "black"
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: () => {
+                                return PortalService.setProfileImage("");
+                            }
+                        }
+
+                    }
+
+                }
+
+            }
+
+            MouseArea {
+                id: profileMouseArea
+
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                propagateComposedEvents: true
+                acceptedButtons: Qt.NoButton
+            }
+
+        }
+
+        Column {
+            width: 120
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: Theme.spacingXS
+
+            StyledText {
+                text: UserInfoService.fullName || "User"
+                font.pixelSize: Theme.fontSizeLarge
+                font.weight: Font.Medium
+                color: Theme.surfaceText
+                elide: Text.ElideRight
+                width: parent.width
+            }
+
+            StyledText {
+                text: DgopService.distribution || "Linux"
+                font.pixelSize: Theme.fontSizeMedium
+                color: Theme.surfaceVariantText
+                elide: Text.ElideRight
+                width: parent.width
+            }
+
+        }
+
+    }
+
+}

Modals/Settings/SettingsContent.qml

@@ -0,0 +1,162 @@
+import QtQuick
+import qs.Common
+import qs.Modules.Settings
+
+Item {
+    id: root
+
+    property int currentIndex: 0
+    property var parentModal: null
+
+    Rectangle {
+        anchors.fill: parent
+        anchors.leftMargin: 0
+        anchors.rightMargin: Theme.spacingS
+        anchors.bottomMargin: Theme.spacingM
+        anchors.topMargin: 0
+        color: "transparent"
+
+        Loader {
+            id: personalizationLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 0
+            visible: active
+
+            sourceComponent: Component {
+                PersonalizationTab {
+                    parentModal: root.parentModal
+                }
+
+            }
+
+        }
+
+        Loader {
+            id: timeWeatherLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 1
+            visible: active
+
+            sourceComponent: TimeWeatherTab {
+            }
+
+        }
+
+        Loader {
+            id: topBarLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 2
+            visible: active
+
+            sourceComponent: DankBarTab {
+                parentModal: root.parentModal
+            }
+
+        }
+
+        Loader {
+            id: widgetsLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 3
+            visible: active
+
+            sourceComponent: WidgetTweaksTab {
+            }
+
+        }
+
+        Loader {
+            id: dockLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 4
+            visible: active
+
+            sourceComponent: Component {
+                DockTab {
+                }
+
+            }
+
+        }
+
+        Loader {
+            id: displaysLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 5
+            visible: active
+
+            sourceComponent: DisplaysTab {
+            }
+
+        }
+
+        Loader {
+            id: launcherLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 6
+            visible: active
+
+            sourceComponent: LauncherTab {
+            }
+
+        }
+
+        Loader {
+            id: themeColorsLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 7
+            visible: active
+
+            sourceComponent: ThemeColorsTab {
+            }
+
+        }
+
+        Loader {
+            id: powerLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 8
+            visible: active
+
+            sourceComponent: PowerSettings {
+            }
+
+        }
+
+        Loader {
+            id: pluginsLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 9
+            visible: active
+
+            sourceComponent: PluginsTab {
+                parentModal: root.parentModal
+            }
+
+        }
+
+        Loader {
+            id: aboutLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 10
+            visible: active
+
+            sourceComponent: AboutTab {
+            }
+
+        }
+
+    }
+
+}

Modals/Settings/SettingsModal.qml

@@ -0,0 +1,223 @@
+import QtQuick
+import QtQuick.Effects
+import Quickshell.Io
+import qs.Common
+import qs.Modals.Common
+import qs.Modals.FileBrowser
+import qs.Modules.Settings
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: settingsModal
+
+    layerNamespace: "dms:settings"
+
+    property Component settingsContent
+    property alias profileBrowser: profileBrowser
+    property int currentTabIndex: 0
+
+    signal closingModal()
+
+    function show() {
+        open();
+    }
+
+    function hide() {
+        close();
+    }
+
+    function toggle() {
+        if (shouldBeVisible) {
+            hide();
+        } else {
+            show();
+        }
+    }
+
+    objectName: "settingsModal"
+    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())
+    }
+    modalFocusScope.Keys.onPressed: event => {
+        const tabCount = 11
+        if (event.key === Qt.Key_Down) {
+            currentTabIndex = (currentTabIndex + 1) % tabCount
+            event.accepted = true
+        } else if (event.key === Qt.Key_Up) {
+            currentTabIndex = (currentTabIndex - 1 + tabCount) % tabCount
+            event.accepted = true
+        } else if (event.key === Qt.Key_Tab && !event.modifiers) {
+            currentTabIndex = (currentTabIndex + 1) % tabCount
+            event.accepted = true
+        } else if (event.key === Qt.Key_Backtab || (event.key === Qt.Key_Tab && event.modifiers & Qt.ShiftModifier)) {
+            currentTabIndex = (currentTabIndex - 1 + tabCount) % tabCount
+            event.accepted = true
+        }
+    }
+
+    IpcHandler {
+        function open(): string {
+            settingsModal.show();
+            return "SETTINGS_OPEN_SUCCESS";
+        }
+
+        function close(): string {
+            settingsModal.hide();
+            return "SETTINGS_CLOSE_SUCCESS";
+        }
+
+        function toggle(): string {
+            settingsModal.toggle();
+            return "SETTINGS_TOGGLE_SUCCESS";
+        }
+
+        target: "settings"
+    }
+
+    IpcHandler {
+        function browse(type: string) {
+            if (type === "wallpaper") {
+                wallpaperBrowser.allowStacking = false;
+                wallpaperBrowser.open();
+            } else if (type === "profile") {
+                profileBrowser.allowStacking = false;
+                profileBrowser.open();
+            }
+        }
+
+        target: "file"
+    }
+
+    FileBrowserModal {
+        id: profileBrowser
+
+        allowStacking: true
+        parentModal: settingsModal
+        browserTitle: "Select Profile Image"
+        browserIcon: "person"
+        browserType: "profile"
+        showHiddenFiles: true
+        fileExtensions: ["*.jpg", "*.jpeg", "*.png", "*.bmp", "*.gif", "*.webp"]
+        onFileSelected: (path) => {
+            PortalService.setProfileImage(path);
+            close();
+        }
+        onDialogClosed: () => {
+            allowStacking = true;
+        }
+    }
+
+    FileBrowserModal {
+        id: wallpaperBrowser
+
+        allowStacking: true
+        parentModal: settingsModal
+        browserTitle: "Select Wallpaper"
+        browserIcon: "wallpaper"
+        browserType: "wallpaper"
+        showHiddenFiles: true
+        fileExtensions: ["*.jpg", "*.jpeg", "*.png", "*.bmp", "*.gif", "*.webp"]
+        onFileSelected: (path) => {
+            SessionData.setWallpaper(path);
+            close();
+        }
+        onDialogClosed: () => {
+            allowStacking = true;
+        }
+    }
+
+    settingsContent: Component {
+        Item {
+            id: rootScope
+            anchors.fill: parent
+
+            Column {
+                anchors.fill: parent
+                anchors.leftMargin: Theme.spacingL
+                anchors.rightMargin: Theme.spacingL
+                anchors.topMargin: Theme.spacingM
+                anchors.bottomMargin: Theme.spacingL
+                spacing: 0
+
+                Item {
+                    width: parent.width
+                    height: 35
+
+                    Row {
+                        anchors.left: parent.left
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingM
+
+                        DankIcon {
+                            name: "settings"
+                            size: Theme.iconSize
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: I18n.tr("Settings")
+                            font.pixelSize: Theme.fontSizeXLarge
+                            color: Theme.surfaceText
+                            font.weight: Font.Medium
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                    }
+
+                    DankActionButton {
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        circular: false
+                        iconName: "close"
+                        iconSize: Theme.iconSize - 4
+                        iconColor: Theme.surfaceText
+                        onClicked: () => {
+                            return settingsModal.hide();
+                        }
+                    }
+
+                }
+
+                Row {
+                    width: parent.width
+                    height: parent.height - 35
+                    spacing: 0
+
+                    SettingsSidebar {
+                        id: sidebar
+
+                        parentModal: settingsModal
+                        currentIndex: settingsModal.currentTabIndex
+                        onCurrentIndexChanged: {
+                            settingsModal.currentTabIndex = currentIndex
+                        }
+                    }
+
+                    SettingsContent {
+                        id: content
+
+                        width: parent.width - sidebar.width
+                        height: parent.height
+                        parentModal: settingsModal
+                        currentIndex: settingsModal.currentTabIndex
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}

Modals/Settings/SettingsSidebar.qml

@@ -0,0 +1,158 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import qs.Common
+import qs.Modals.Settings
+import qs.Widgets
+
+Rectangle {
+    id: sidebarContainer
+
+    property int currentIndex: 0
+    property var parentModal: null
+    readonly property var sidebarItems: [{
+        "text": I18n.tr("Personalization"),
+        "icon": "person"
+    }, {
+        "text": I18n.tr("Time & Weather"),
+        "icon": "schedule"
+    }, {
+        "text": I18n.tr("Dank Bar"),
+        "icon": "toolbar"
+    }, {
+        "text": I18n.tr("Widgets"),
+        "icon": "widgets"
+    }, {
+        "text": I18n.tr("Dock"),
+        "icon": "dock_to_bottom"
+    }, {
+        "text": I18n.tr("Displays"),
+        "icon": "monitor"
+    }, {
+        "text": I18n.tr("Launcher"),
+        "icon": "apps"
+    }, {
+        "text": I18n.tr("Theme & Colors"),
+        "icon": "palette"
+    }, {
+        "text": I18n.tr("Power & Security"),
+        "icon": "power"
+    }, {
+        "text": I18n.tr("Plugins"),
+        "icon": "extension"
+    }, {
+        "text": I18n.tr("About"),
+        "icon": "info"
+    }]
+
+    function navigateNext() {
+        currentIndex = (currentIndex + 1) % sidebarItems.length
+    }
+
+    function navigatePrevious() {
+        currentIndex = (currentIndex - 1 + sidebarItems.length) % sidebarItems.length
+    }
+
+    width: 270
+    height: parent.height
+    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    radius: Theme.cornerRadius
+
+    DankFlickable {
+        anchors.fill: parent
+        clip: true
+        contentHeight: sidebarColumn.implicitHeight
+
+        Column {
+            id: sidebarColumn
+
+            width: parent.width
+            anchors.leftMargin: Theme.spacingS
+            anchors.rightMargin: Theme.spacingS
+            anchors.bottomMargin: Theme.spacingS
+            anchors.topMargin: Theme.spacingM + 2
+            spacing: Theme.spacingXS
+
+            ProfileSection {
+                parentModal: sidebarContainer.parentModal
+            }
+
+            Rectangle {
+                width: parent.width - Theme.spacingS * 2
+                height: 1
+                color: Theme.outline
+                opacity: 0.2
+            }
+
+            Item {
+                width: parent.width
+                height: Theme.spacingL
+            }
+
+            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
+                        }
+
+                    }
+
+                    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/SettingsModal.qml

@@ -1,568 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
-import Quickshell
-import Quickshell.Io
-import qs.Common
-import qs.Modules.Settings
-import qs.Services
-import qs.Widgets
-
-DankModal {
-    id: settingsModal
-
-    property Component settingsContent
-
-    signal closingModal
-
-    function show() {
-        open()
-    }
-
-    function hide() {
-        close()
-    }
-
-    function toggle() {
-        if (shouldBeVisible)
-            hide()
-        else
-            show()
-    }
-
-    objectName: "settingsModal"
-    width: 800
-    height: 750
-    visible: false
-    onBackgroundClicked: hide()
-    content: settingsContent
-
-    IpcHandler {
-        function open() {
-            settingsModal.show()
-            return "SETTINGS_OPEN_SUCCESS"
-        }
-
-        function close() {
-            settingsModal.hide()
-            return "SETTINGS_CLOSE_SUCCESS"
-        }
-
-        function toggle() {
-            settingsModal.toggle()
-            return "SETTINGS_TOGGLE_SUCCESS"
-        }
-
-        target: "settings"
-    }
-
-    settingsContent: Component {
-        Item {
-            anchors.fill: parent
-            focus: true
-
-            Column {
-                anchors.fill: parent
-                anchors.leftMargin: Theme.spacingL
-                anchors.rightMargin: Theme.spacingL
-                anchors.topMargin: Theme.spacingM
-                anchors.bottomMargin: Theme.spacingL
-                spacing: 0
-
-                Item {
-                    width: parent.width
-                    height: 35
-
-                    Row {
-                        anchors.left: parent.left
-                        anchors.verticalCenter: parent.verticalCenter
-                        spacing: Theme.spacingM
-
-                        DankIcon {
-                            name: "settings"
-                            size: Theme.iconSize
-                            color: Theme.primary
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-
-                        StyledText {
-                            text: "Settings"
-                            font.pixelSize: Theme.fontSizeXLarge
-                            color: Theme.surfaceText
-                            font.weight: Font.Medium
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-                    }
-
-                    DankActionButton {
-                        anchors.right: parent.right
-                        anchors.verticalCenter: parent.verticalCenter
-                        circular: false
-                        iconName: "close"
-                        iconSize: Theme.iconSize - 4
-                        iconColor: Theme.surfaceText
-                        hoverColor: Theme.errorHover
-                        onClicked: settingsModal.hide()
-                    }
-                }
-
-                Row {
-                    width: parent.width
-                    height: parent.height - 35
-                    spacing: 0
-
-                    Rectangle {
-                        id: sidebarContainer
-
-                        property int currentIndex: 0
-
-                        width: 270
-                        height: parent.height
-                        color: Theme.surfaceContainer
-                        radius: Theme.cornerRadius
-
-                        Column {
-                            anchors.fill: parent
-                            anchors.leftMargin: Theme.spacingS
-                            anchors.rightMargin: Theme.spacingS
-                            anchors.bottomMargin: Theme.spacingS
-                            anchors.topMargin: Theme.spacingM + 2
-                            spacing: Theme.spacingXS
-
-                            Rectangle {
-                                width: parent.width - Theme.spacingS * 2
-                                height: 110
-                                radius: Theme.cornerRadius
-                                color: "transparent"
-                                border.width: 0
-
-                                Row {
-                                    anchors.left: parent.left
-                                    anchors.verticalCenter: parent.verticalCenter
-                                    anchors.leftMargin: Theme.spacingM
-                                    anchors.rightMargin: Theme.spacingM
-                                    spacing: Theme.spacingM
-
-                                    Item {
-                                        id: profileImageContainer
-                                        width: 80
-                                        height: 80
-                                        anchors.verticalCenter: parent.verticalCenter
-
-                                        property bool hasImage: profileImageSource.status
-                                                                === Image.Ready
-
-                                        Rectangle {
-                                            anchors.fill: parent
-                                            radius: width / 2
-                                            color: "transparent"
-                                            border.color: Theme.primary
-                                            border.width: 1
-                                            visible: parent.hasImage
-                                        }
-
-                                        Image {
-                                            id: profileImageSource
-                                            source: {
-                                                if (PortalService.profileImage === "")
-                                                    return ""
-                                                if (PortalService.profileImage.startsWith(
-                                                            "/"))
-                                                    return "file://" + PortalService.profileImage
-                                                return PortalService.profileImage
-                                            }
-                                            smooth: true
-                                            asynchronous: true
-                                            mipmap: true
-                                            cache: true
-                                            visible: false
-                                        }
-
-                                        MultiEffect {
-                                            anchors.fill: parent
-                                            anchors.margins: 5
-                                            source: profileImageSource
-                                            maskEnabled: true
-                                            maskSource: profileCircularMask
-                                            visible: profileImageContainer.hasImage
-                                            maskThresholdMin: 0.5
-                                            maskSpreadAtMin: 1
-                                        }
-
-                                        Item {
-                                            id: profileCircularMask
-                                            width: 70
-                                            height: 70
-                                            layer.enabled: true
-                                            layer.smooth: true
-                                            visible: false
-
-                                            Rectangle {
-                                                anchors.fill: parent
-                                                radius: width / 2
-                                                color: "black"
-                                                antialiasing: true
-                                            }
-                                        }
-
-                                        Rectangle {
-                                            anchors.fill: parent
-                                            radius: width / 2
-                                            color: Theme.primary
-                                            visible: !parent.hasImage
-
-                                            DankIcon {
-                                                anchors.centerIn: parent
-                                                name: "person"
-                                                size: Theme.iconSizeLarge
-                                                color: Theme.primaryText
-                                            }
-                                        }
-
-                                        DankIcon {
-                                            anchors.centerIn: parent
-                                            name: "warning"
-                                            size: Theme.iconSizeLarge
-                                            color: Theme.error
-                                            visible: PortalService.profileImage !== ""
-                                                     && profileImageSource.status === Image.Error
-                                        }
-
-                                        Rectangle {
-                                            anchors.fill: parent
-                                            radius: width / 2
-                                            color: Qt.rgba(0, 0, 0, 0.7)
-                                            visible: profileMouseArea.containsMouse
-
-                                            Row {
-                                                anchors.centerIn: parent
-                                                spacing: 4
-
-                                                Rectangle {
-                                                    width: 28
-                                                    height: 28
-                                                    radius: 14
-                                                    color: Qt.rgba(255, 255,
-                                                                   255, 0.9)
-
-                                                    DankIcon {
-                                                        anchors.centerIn: parent
-                                                        name: "edit"
-                                                        size: 16
-                                                        color: "black"
-                                                    }
-
-                                                    MouseArea {
-                                                        anchors.fill: parent
-                                                        cursorShape: Qt.PointingHandCursor
-                                                        onClicked: {
-                                                            settingsModal.allowFocusOverride = true
-                                                            settingsModal.shouldHaveFocus = false
-                                                            profileBrowser.open(
-                                                                        )
-                                                        }
-                                                    }
-                                                }
-
-                                                Rectangle {
-                                                    width: 28
-                                                    height: 28
-                                                    radius: 14
-                                                    color: Qt.rgba(255, 255,
-                                                                   255, 0.9)
-                                                    visible: profileImageContainer.hasImage
-
-                                                    DankIcon {
-                                                        anchors.centerIn: parent
-                                                        name: "close"
-                                                        size: 16
-                                                        color: "black"
-                                                    }
-
-                                                    MouseArea {
-                                                        anchors.fill: parent
-                                                        cursorShape: Qt.PointingHandCursor
-                                                        onClicked: {
-                                                            PortalService.setProfileImage(
-                                                                        "")
-                                                        }
-                                                    }
-                                                }
-                                            }
-                                        }
-
-                                        MouseArea {
-                                            id: profileMouseArea
-                                            anchors.fill: parent
-                                            hoverEnabled: true
-                                            cursorShape: Qt.PointingHandCursor
-                                            propagateComposedEvents: true
-                                            acceptedButtons: Qt.NoButton
-                                        }
-                                    }
-
-                                    Column {
-                                        width: 120
-                                        anchors.verticalCenter: parent.verticalCenter
-                                        spacing: Theme.spacingXS
-
-                                        StyledText {
-                                            text: UserInfoService.fullName
-                                                  || "User"
-                                            font.pixelSize: Theme.fontSizeLarge
-                                            font.weight: Font.Medium
-                                            color: Theme.surfaceText
-                                            elide: Text.ElideRight
-                                            width: parent.width
-                                        }
-
-                                        StyledText {
-                                            text: DgopService.distribution
-                                                  || "Linux"
-                                            font.pixelSize: Theme.fontSizeMedium
-                                            color: Theme.surfaceVariantText
-                                            elide: Text.ElideRight
-                                            width: parent.width
-                                        }
-                                    }
-                                }
-                            }
-
-                            Rectangle {
-                                width: parent.width - Theme.spacingS * 2
-                                height: 1
-                                color: Theme.outline
-                                opacity: 0.2
-                            }
-
-                            Item {
-                                width: parent.width
-                                height: Theme.spacingL
-                            }
-
-                            Repeater {
-                                id: sidebarRepeater
-
-                                model: [{
-                                        "text": "Personalization",
-                                        "icon": "person"
-                                    }, {
-                                        "text": "Time & Date",
-                                        "icon": "schedule"
-                                    }, {
-                                        "text": "Weather",
-                                        "icon": "cloud"
-                                    }, {
-                                        "text": "Top Bar",
-                                        "icon": "toolbar"
-                                    }, {
-                                        "text": "Widgets",
-                                        "icon": "widgets"
-                                    }, {
-                                        "text": "Dock",
-                                        "icon": "dock_to_bottom"
-                                    }, {
-                                        "text": "Recent Apps",
-                                        "icon": "history"
-                                    }, {
-                                        "text": "Theme & Colors",
-                                        "icon": "palette"
-                                    }, {
-                                        "text": "About",
-                                        "icon": "info"
-                                    }]
-
-                                Rectangle {
-                                    property bool isActive: sidebarContainer.currentIndex === index
-
-                                    width: parent.width - Theme.spacingS * 2
-                                    height: 44
-                                    radius: Theme.cornerRadius
-                                    color: isActive ? Theme.surfaceContainerHigh : 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.primary : Theme.surfaceText
-                                            anchors.verticalCenter: parent.verticalCenter
-                                        }
-
-                                        StyledText {
-                                            text: modelData.text || ""
-                                            font.pixelSize: Theme.fontSizeMedium
-                                            color: parent.parent.isActive ? Theme.primary : 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
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-
-                    Item {
-                        width: parent.width - sidebarContainer.width
-                        height: parent.height
-
-                        Rectangle {
-                            anchors.fill: parent
-                            anchors.leftMargin: 0
-                            anchors.rightMargin: Theme.spacingS
-                            anchors.bottomMargin: Theme.spacingM
-                            anchors.topMargin: 0
-                            color: "transparent"
-
-                            Loader {
-                                id: personalizationLoader
-
-                                anchors.fill: parent
-                                active: sidebarContainer.currentIndex === 0
-                                visible: active
-                                asynchronous: true
-
-                                sourceComponent: Component {
-                                    PersonalizationTab {
-                                        parentModal: settingsModal
-                                    }
-                                }
-                            }
-
-                            Loader {
-                                id: timeLoader
-
-                                anchors.fill: parent
-                                active: sidebarContainer.currentIndex === 1
-                                visible: active
-                                asynchronous: true
-
-                                sourceComponent: TimeTab {}
-                            }
-
-                            Loader {
-                                id: weatherLoader
-
-                                anchors.fill: parent
-                                active: sidebarContainer.currentIndex === 2
-                                visible: active
-                                asynchronous: true
-
-                                sourceComponent: WeatherTab {}
-                            }
-
-                            Loader {
-                                id: topBarLoader
-
-                                anchors.fill: parent
-                                active: sidebarContainer.currentIndex === 3
-                                visible: active
-                                asynchronous: true
-
-                                sourceComponent: TopBarTab {}
-                            }
-
-                            Loader {
-                                id: widgetsLoader
-
-                                anchors.fill: parent
-                                active: sidebarContainer.currentIndex === 4
-                                visible: active
-                                asynchronous: true
-                                sourceComponent: WidgetTweaksTab {}
-                            }
-
-                            Loader {
-                                id: dockLoader
-
-                                anchors.fill: parent
-                                active: sidebarContainer.currentIndex === 5
-                                visible: active
-                                asynchronous: true
-
-                                sourceComponent: Component {
-                                    DockTab {}
-                                }
-                            }
-
-                            Loader {
-                                id: recentAppsLoader
-
-                                anchors.fill: parent
-                                active: sidebarContainer.currentIndex === 6
-                                visible: active
-                                asynchronous: true
-                                sourceComponent: RecentAppsTab {}
-                            }
-
-                            Loader {
-                                id: themeColorsLoader
-
-                                anchors.fill: parent
-                                active: sidebarContainer.currentIndex === 7
-                                visible: active
-                                asynchronous: true
-                                sourceComponent: ThemeColorsTab {}
-                            }
-
-                            Loader {
-                                id: aboutLoader
-
-                                anchors.fill: parent
-                                active: sidebarContainer.currentIndex === 8
-                                visible: active
-                                asynchronous: true
-                                sourceComponent: AboutTab {}
-                            }
-                        }
-                    }
-                }
-
-            }
-
-        }
-    }
-
-    FileBrowserModal {
-        id: profileBrowser
-
-        browserTitle: "Select Profile Image"
-        browserIcon: "person"
-        browserType: "profile"
-        fileExtensions: ["*.jpg", "*.jpeg", "*.png", "*.bmp", "*.gif", "*.webp"]
-        onFileSelected: path => {
-                            PortalService.setProfileImage(path)
-                            close()
-                        }
-        onDialogClosed: {
-            if (settingsModal) {
-                settingsModal.allowFocusOverride = false
-                settingsModal.shouldHaveFocus = Qt.binding(() => {
-                                                               return settingsModal.shouldBeVisible
-                                                           })
-            }
-        }
-    }
-}

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

@@ -0,0 +1,446 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Modals.Spotlight
+import qs.Modules.AppDrawer
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: spotlightKeyHandler
+
+    property alias appLauncher: appLauncher
+    property alias searchField: searchField
+    property alias fileSearchController: fileSearchController
+    property var parentModal: null
+    property string searchMode: "apps"
+
+    function 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
+    focus: true
+    clip: false
+    Keys.onPressed: event => {
+                        if (event.key === Qt.Key_Escape) {
+                            if (parentModal)
+                            parentModal.hide()
+
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Down) {
+                            if (searchMode === "apps") {
+                                appLauncher.selectNext()
+                            } else {
+                                fileSearchController.selectNext()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Up) {
+                            if (searchMode === "apps") {
+                                appLauncher.selectPrevious()
+                            } else {
+                                fileSearchController.selectPrevious()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Right && searchMode === "apps" && appLauncher.viewMode === "grid") {
+                            appLauncher.selectNextInRow()
+                            event.accepted = true
+                        } 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) {
+                            if (searchMode === "apps") {
+                                appLauncher.selectNext()
+                            } else {
+                                fileSearchController.selectNext()
+                            }
+                            event.accepted = true
+                        } else if (event.key == Qt.Key_K && event.modifiers & Qt.ControlModifier) {
+                            if (searchMode === "apps") {
+                                appLauncher.selectPrevious()
+                            } else {
+                                fileSearchController.selectPrevious()
+                            }
+                            event.accepted = true
+                        } 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 && searchMode === "apps" && appLauncher.viewMode === "grid") {
+                            appLauncher.selectPreviousInRow()
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Tab) {
+                            if (searchMode === "apps") {
+                                if (appLauncher.viewMode === "grid") {
+                                    appLauncher.selectNextInRow()
+                                } else {
+                                    appLauncher.selectNext()
+                                }
+                            } else {
+                                fileSearchController.selectNext()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Backtab) {
+                            if (searchMode === "apps") {
+                                if (appLauncher.viewMode === "grid") {
+                                    appLauncher.selectPreviousInRow()
+                                } else {
+                                    appLauncher.selectPrevious()
+                                }
+                            } else {
+                                fileSearchController.selectPrevious()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) {
+                            if (searchMode === "apps") {
+                                if (appLauncher.viewMode === "grid") {
+                                    appLauncher.selectNextInRow()
+                                } else {
+                                    appLauncher.selectNext()
+                                }
+                            } else {
+                                fileSearchController.selectNext()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_P && event.modifiers & Qt.ControlModifier) {
+                            if (searchMode === "apps") {
+                                if (appLauncher.viewMode === "grid") {
+                                    appLauncher.selectPreviousInRow()
+                                } else {
+                                    appLauncher.selectPrevious()
+                                }
+                            } else {
+                                fileSearchController.selectPrevious()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
+                            if (searchMode === "apps") {
+                                appLauncher.launchSelected()
+                            } else if (searchMode === "files") {
+                                fileSearchController.openSelected()
+                            }
+                            event.accepted = true
+                        }
+                    }
+
+    AppLauncher {
+        id: appLauncher
+
+        viewMode: SettingsData.spotlightModalViewMode
+        gridColumns: 4
+        onAppLaunched: () => {
+                           if (parentModal)
+                           parentModal.hide()
+                       }
+        onViewModeSelected: mode => {
+                                SettingsData.set("spotlightModalViewMode", mode)
+                            }
+    }
+
+    FileSearchController {
+        id: fileSearchController
+
+        onFileOpened: () => {
+                          if (parentModal)
+                          parentModal.hide()
+                      }
+    }
+
+    Column {
+        anchors.fill: parent
+        anchors.margins: Theme.spacingM
+        spacing: Theme.spacingM
+        clip: false
+
+        Row {
+            width: parent.width
+            spacing: Theme.spacingM
+            leftPadding: Theme.spacingS
+
+            DankTextField {
+                id: searchField
+
+                width: parent.width - 80 - Theme.spacingL
+                height: 56
+                cornerRadius: Theme.cornerRadius
+                backgroundColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                normalBorderColor: Theme.outlineMedium
+                focusedBorderColor: Theme.primary
+                leftIconName: searchMode === "files" ? "folder" : "search"
+                leftIconSize: Theme.iconSize
+                leftIconColor: Theme.surfaceVariantText
+                leftIconFocusedColor: Theme.primary
+                showClearButton: true
+                textColor: Theme.surfaceText
+                font.pixelSize: Theme.fontSizeLarge
+                enabled: parentModal ? parentModal.spotlightOpen : true
+                placeholderText: ""
+                ignoreLeftRightKeys: appLauncher.viewMode !== "list"
+                ignoreTabKeys: true
+                keyForwardTargets: [spotlightKeyHandler]
+                onTextChanged: {
+                    if (searchMode === "apps") {
+                        appLauncher.searchQuery = text
+                    }
+                }
+                onTextEdited: {
+                    updateSearchMode()
+                }
+                Keys.onPressed: event => {
+                                    if (event.key === Qt.Key_Escape) {
+                                        if (parentModal)
+                                        parentModal.hide()
+
+                                        event.accepted = true
+                                    } else if ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && text.length > 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)) {
+                                        event.accepted = false
+                                    }
+                                }
+            }
+
+            Row {
+                spacing: Theme.spacingXS
+                visible: searchMode === "apps" && appLauncher.model.count > 0
+                anchors.verticalCenter: parent.verticalCenter
+
+                Rectangle {
+                    width: 36
+                    height: 36
+                    radius: Theme.cornerRadius
+                    color: appLauncher.viewMode === "list" ? Theme.primaryHover : listViewArea.containsMouse ? Theme.surfaceHover : "transparent"
+
+                    DankIcon {
+                        anchors.centerIn: parent
+                        name: "view_list"
+                        size: 18
+                        color: appLauncher.viewMode === "list" ? Theme.primary : Theme.surfaceText
+                    }
+
+                    MouseArea {
+                        id: listViewArea
+
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: () => {
+                                       appLauncher.setViewMode("list")
+                                   }
+                    }
+                }
+
+                Rectangle {
+                    width: 36
+                    height: 36
+                    radius: Theme.cornerRadius
+                    color: appLauncher.viewMode === "grid" ? Theme.primaryHover : gridViewArea.containsMouse ? Theme.surfaceHover : "transparent"
+
+                    DankIcon {
+                        anchors.centerIn: parent
+                        name: "grid_view"
+                        size: 18
+                        color: appLauncher.viewMode === "grid" ? Theme.primary : Theme.surfaceText
+                    }
+
+                    MouseArea {
+                        id: gridViewArea
+
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: () => {
+                                       appLauncher.setViewMode("grid")
+                                   }
+                    }
+                }
+            }
+
+            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
+                        }
+                    }
+                }
+            }
+        }
+
+        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"
+            }
+        }
+    }
+
+    SpotlightContextMenu {
+        id: contextMenu
+
+        appLauncher: spotlightKeyHandler.appLauncher
+        parentHandler: spotlightKeyHandler
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        visible: contextMenu.visible
+        z: 999
+        onClicked: () => {
+                       contextMenu.hide()
+                   }
+
+        MouseArea {
+
+            x: contextMenu.x
+            y: contextMenu.y
+            width: contextMenu.width
+            height: contextMenu.height
+            onClicked: () => {}
+        }
+    }
+
+    Loader {
+        id: filenameTooltipLoader
+
+        active: false
+        sourceComponent: DankTooltip {}
+    }
+
+    Loader {
+        id: contentTooltipLoader
+
+        active: false
+        sourceComponent: DankTooltip {}
+    }
+}

Modals/Spotlight/SpotlightContextMenu.qml

@@ -0,0 +1,338 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Widgets
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Popup {
+    id: contextMenu
+
+    property var currentApp: null
+    property var appLauncher: null
+    property var parentHandler: null
+    readonly property var desktopEntry: (currentApp && !currentApp.isPlugin && appLauncher && appLauncher._uniqueApps && currentApp.appIndex >= 0 && currentApp.appIndex < appLauncher._uniqueApps.length) ? appLauncher._uniqueApps[currentApp.appIndex] : null
+
+    function show(x, y, app) {
+        currentApp = app
+        contextMenu.x = x + 4
+        contextMenu.y = y + 4
+        contextMenu.open()
+    }
+
+    function hide() {
+        contextMenu.close()
+    }
+
+    width: Math.max(180, menuColumn.implicitWidth + Theme.spacingS * 2)
+    height: menuColumn.implicitHeight + Theme.spacingS * 2
+    padding: 0
+    closePolicy: Popup.CloseOnPressOutside
+    modal: false
+    dim: false
+
+    background: Rectangle {
+        radius: Theme.cornerRadius
+        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
+
+        Rectangle {
+            anchors.fill: parent
+            anchors.topMargin: 4
+            anchors.leftMargin: 2
+            anchors.rightMargin: -2
+            anchors.bottomMargin: -4
+            radius: parent.radius
+            color: Qt.rgba(0, 0, 0, 0.15)
+            z: -1
+        }
+    }
+
+    enter: Transition {
+        NumberAnimation {
+            property: "opacity"
+            from: 0
+            to: 1
+            duration: Theme.shortDuration
+            easing.type: Theme.emphasizedEasing
+        }
+    }
+
+    exit: Transition {
+        NumberAnimation {
+            property: "opacity"
+            from: 1
+            to: 0
+            duration: Theme.shortDuration
+            easing.type: Theme.emphasizedEasing
+        }
+    }
+
+    Column {
+        id: menuColumn
+
+        anchors.fill: parent
+        anchors.margins: Theme.spacingS
+        spacing: 1
+
+        Rectangle {
+            width: parent.width
+            height: 32
+            radius: Theme.cornerRadius
+            color: pinMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+            Row {
+                id: pinRow
+                anchors.left: parent.left
+                anchors.leftMargin: Theme.spacingS
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: Theme.spacingS
+
+                DankIcon {
+                    name: {
+                        if (!desktopEntry)
+                            return "push_pin"
+
+                        const appId = desktopEntry.id || desktopEntry.execString || ""
+                        return SessionData.isPinnedApp(appId) ? "keep_off" : "push_pin"
+                    }
+                    size: Theme.iconSize - 2
+                    color: Theme.surfaceText
+                    opacity: 0.7
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StyledText {
+                    text: {
+                        if (!desktopEntry)
+                            return I18n.tr("Pin to Dock")
+
+                        const appId = desktopEntry.id || desktopEntry.execString || ""
+                        return SessionData.isPinnedApp(appId) ? I18n.tr("Unpin from Dock") : I18n.tr("Pin to Dock")
+                    }
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.surfaceText
+                    font.weight: Font.Normal
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
+
+            MouseArea {
+                id: pinMouseArea
+
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: () => {
+                               if (!desktopEntry)
+                               return
+
+                               const appId = desktopEntry.id || desktopEntry.execString || ""
+                               if (SessionData.isPinnedApp(appId))
+                               SessionData.removePinnedApp(appId)
+                               else
+                               SessionData.addPinnedApp(appId)
+                               contextMenu.hide()
+                           }
+            }
+        }
+
+        Rectangle {
+            width: parent.width - Theme.spacingS * 2
+            height: 5
+            anchors.horizontalCenter: parent.horizontalCenter
+            color: "transparent"
+
+            Rectangle {
+                anchors.centerIn: parent
+                width: parent.width
+                height: 1
+                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+            }
+        }
+
+        Repeater {
+            model: desktopEntry && desktopEntry.actions ? desktopEntry.actions : []
+
+            Rectangle {
+                width: parent.width
+                height: 32
+                radius: Theme.cornerRadius
+                color: actionMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+                Row {
+                    id: actionRow
+                    anchors.left: parent.left
+                    anchors.leftMargin: Theme.spacingS
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: Theme.spacingS
+
+                    Item {
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: Theme.iconSize - 2
+                        height: Theme.iconSize - 2
+                        visible: modelData.icon && modelData.icon !== ""
+
+                        IconImage {
+                            anchors.fill: parent
+                            source: modelData.icon ? Quickshell.iconPath(modelData.icon, true) : ""
+                            smooth: true
+                            asynchronous: true
+                            visible: status === Image.Ready
+                        }
+                    }
+
+                    StyledText {
+                        text: modelData.name || ""
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceText
+                        font.weight: Font.Normal
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+                }
+
+                MouseArea {
+                    id: actionMouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        if (modelData && desktopEntry) {
+                            SessionService.launchDesktopAction(desktopEntry, modelData)
+                            if (appLauncher && contextMenu.currentApp) {
+                                appLauncher.appLaunched(contextMenu.currentApp)
+                            }
+                        }
+                        contextMenu.hide()
+                    }
+                }
+            }
+        }
+
+        Rectangle {
+            visible: desktopEntry && desktopEntry.actions && desktopEntry.actions.length > 0
+            width: parent.width - Theme.spacingS * 2
+            height: 5
+            anchors.horizontalCenter: parent.horizontalCenter
+            color: "transparent"
+
+            Rectangle {
+                anchors.centerIn: parent
+                width: parent.width
+                height: 1
+                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+            }
+        }
+
+        Rectangle {
+            width: parent.width
+            height: 32
+            radius: Theme.cornerRadius
+            color: launchMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+            Row {
+                id: launchRow
+                anchors.left: parent.left
+                anchors.leftMargin: Theme.spacingS
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: Theme.spacingS
+
+                DankIcon {
+                    name: "launch"
+                    size: Theme.iconSize - 2
+                    color: Theme.surfaceText
+                    opacity: 0.7
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StyledText {
+                    text: I18n.tr("Launch")
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.surfaceText
+                    font.weight: Font.Normal
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
+
+            MouseArea {
+                id: launchMouseArea
+
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: () => {
+                               if (contextMenu.currentApp && appLauncher)
+                               appLauncher.launchApp(contextMenu.currentApp)
+
+                               contextMenu.hide()
+                           }
+            }
+        }
+
+        Rectangle {
+            visible: SessionService.hasPrimeRun
+            width: parent.width - Theme.spacingS * 2
+            height: 5
+            anchors.horizontalCenter: parent.horizontalCenter
+            color: "transparent"
+
+            Rectangle {
+                anchors.centerIn: parent
+                width: parent.width
+                height: 1
+                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+            }
+        }
+
+        Rectangle {
+            visible: SessionService.hasPrimeRun
+            width: parent.width
+            height: 32
+            radius: Theme.cornerRadius
+            color: primeRunMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+            Row {
+                id: primeRunRow
+                anchors.left: parent.left
+                anchors.leftMargin: Theme.spacingS
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: Theme.spacingS
+
+                DankIcon {
+                    name: "memory"
+                    size: Theme.iconSize - 2
+                    color: Theme.surfaceText
+                    opacity: 0.7
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StyledText {
+                    text: I18n.tr("Launch on dGPU")
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.surfaceText
+                    font.weight: Font.Normal
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
+
+            MouseArea {
+                id: primeRunMouseArea
+
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: () => {
+                               if (desktopEntry) {
+                                   SessionService.launchDesktopEntry(desktopEntry, true)
+                                   if (appLauncher && contextMenu.currentApp) {
+                                       appLauncher.appLaunched(contextMenu.currentApp)
+                                   }
+                               }
+                               contextMenu.hide()
+                           }
+            }
+        }
+    }
+}

Modals/Spotlight/SpotlightModal.qml

@@ -0,0 +1,158 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Io
+import Quickshell.Widgets
+import qs.Common
+import qs.Modals.Common
+import qs.Modules.AppDrawer
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: spotlightModal
+
+    layerNamespace: "dms:spotlight"
+
+    property bool spotlightOpen: false
+    property alias spotlightContent: spotlightContentInstance
+
+    function show() {
+        spotlightOpen = true
+        open()
+
+        Qt.callLater(() => {
+                         if (spotlightContent && spotlightContent.searchField) {
+                             spotlightContent.searchField.forceActiveFocus()
+                         }
+                     })
+    }
+
+    function showWithQuery(query) {
+        if (spotlightContent) {
+            if (spotlightContent.appLauncher) {
+                spotlightContent.appLauncher.searchQuery = query
+            }
+            if (spotlightContent.searchField) {
+                spotlightContent.searchField.text = query
+            }
+        }
+
+        spotlightOpen = true
+        open()
+
+        Qt.callLater(() => {
+                         if (spotlightContent && spotlightContent.searchField) {
+                             spotlightContent.searchField.forceActiveFocus()
+                         }
+                     })
+    }
+
+    function hide() {
+        spotlightOpen = false
+        close()
+    }
+
+    onDialogClosed: {
+        if (spotlightContent) {
+            if (spotlightContent.appLauncher) {
+                spotlightContent.appLauncher.searchQuery = ""
+                spotlightContent.appLauncher.selectedIndex = 0
+                spotlightContent.appLauncher.setCategory(I18n.tr("All"))
+            }
+            if (spotlightContent.fileSearchController) {
+                spotlightContent.fileSearchController.reset()
+            }
+            if (spotlightContent.resetScroll) {
+                spotlightContent.resetScroll()
+            }
+            if (spotlightContent.searchField) {
+                spotlightContent.searchField.text = ""
+            }
+        }
+    }
+
+    function toggle() {
+        if (spotlightOpen) {
+            hide()
+        } else {
+            show()
+        }
+    }
+
+    shouldBeVisible: spotlightOpen
+    width: 500
+    height: 600
+    backgroundColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    cornerRadius: Theme.cornerRadius
+    borderColor: Theme.outlineMedium
+    borderWidth: 1
+    enableShadow: true
+    keepContentLoaded: true
+    onVisibleChanged: () => {
+                          if (visible && !spotlightOpen) {
+                              show()
+                          }
+                          if (visible && spotlightContent) {
+                              Qt.callLater(() => {
+                                               if (spotlightContent.searchField) {
+                                                   spotlightContent.searchField.forceActiveFocus()
+                                               }
+                                           })
+                          }
+                      }
+    onBackgroundClicked: () => {
+                             return hide()
+                         }
+
+    Connections {
+        function onCloseAllModalsExcept(excludedModal) {
+            if (excludedModal !== spotlightModal && !allowStacking && spotlightOpen) {
+                spotlightOpen = false
+            }
+        }
+
+        target: ModalManager
+    }
+
+    IpcHandler {
+        function open(): string {
+            spotlightModal.show()
+            return "SPOTLIGHT_OPEN_SUCCESS"
+        }
+
+        function close(): string {
+            spotlightModal.hide()
+            return "SPOTLIGHT_CLOSE_SUCCESS"
+        }
+
+        function toggle(): string {
+            spotlightModal.toggle()
+            return "SPOTLIGHT_TOGGLE_SUCCESS"
+        }
+
+        function openQuery(query: string): string {
+            spotlightModal.showWithQuery(query)
+            return "SPOTLIGHT_OPEN_QUERY_SUCCESS"
+        }
+
+        function toggleQuery(query: string): string {
+            if (spotlightModal.spotlightOpen) {
+                spotlightModal.hide()
+            } else {
+                spotlightModal.showWithQuery(query)
+            }
+            return "SPOTLIGHT_TOGGLE_QUERY_SUCCESS"
+        }
+
+        target: "spotlight"
+    }
+
+    SpotlightContent {
+        id: spotlightContentInstance
+
+        parentModal: spotlightModal
+    }
+
+    directContent: spotlightContentInstance
+}

Modals/Spotlight/SpotlightResults.qml

@@ -0,0 +1,179 @@
+import QtQuick
+import Quickshell
+import Quickshell.Widgets
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: resultsContainer
+
+    property var appLauncher: null
+    property var contextMenu: null
+
+    function resetScroll() {
+        resultsList.contentY = 0
+        resultsGrid.contentY = 0
+    }
+
+    radius: Theme.cornerRadius
+    color: "transparent"
+    clip: true
+
+    DankListView {
+        id: resultsList
+
+        property int itemHeight: 60
+        property int iconSize: 40
+        property bool showDescription: true
+        property int itemSpacing: Theme.spacingS
+        property bool hoverUpdatesSelection: false
+        property bool keyboardNavigationActive: appLauncher ? appLauncher.keyboardNavigationActive : false
+
+        signal keyboardNavigationReset
+        signal itemClicked(int index, var modelData)
+        signal itemRightClicked(int index, var modelData, real mouseX, real mouseY)
+
+        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
+        visible: appLauncher && appLauncher.viewMode === "list"
+        model: appLauncher ? appLauncher.model : null
+        currentIndex: appLauncher ? appLauncher.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: (index, modelData) => {
+                           if (appLauncher)
+                           appLauncher.launchApp(modelData)
+                       }
+        onItemRightClicked: (index, modelData, mouseX, mouseY) => {
+                                if (contextMenu)
+                                contextMenu.show(mouseX, mouseY, modelData)
+                            }
+        onKeyboardNavigationReset: () => {
+                                       if (appLauncher)
+                                       appLauncher.keyboardNavigationActive = false
+                                   }
+
+        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
+        }
+    }
+
+    DankGridView {
+        id: resultsGrid
+
+        property int currentIndex: appLauncher ? appLauncher.selectedIndex : -1
+        property int columns: 4
+        property bool adaptiveColumns: false
+        property int minCellWidth: 120
+        property int maxCellWidth: 160
+        property int cellPadding: 8
+        property real iconSizeRatio: 0.55
+        property int maxIconSize: 48
+        property int minIconSize: 32
+        property bool hoverUpdatesSelection: false
+        property bool keyboardNavigationActive: appLauncher ? appLauncher.keyboardNavigationActive : false
+        property int baseCellWidth: adaptiveColumns ? Math.max(minCellWidth, Math.min(maxCellWidth, width / columns)) : (width - Theme.spacingS * 2) / columns
+        property int baseCellHeight: baseCellWidth + 20
+        property int actualColumns: adaptiveColumns ? Math.floor(width / cellWidth) : columns
+        property int remainingSpace: width - (actualColumns * cellWidth)
+
+        signal keyboardNavigationReset
+        signal itemClicked(int index, var modelData)
+        signal itemRightClicked(int index, var modelData, real mouseX, real mouseY)
+
+        function ensureVisible(index) {
+            if (index < 0 || index >= count)
+                return
+
+            const itemY = Math.floor(index / actualColumns) * cellHeight
+            const itemBottom = itemY + cellHeight
+            if (itemY < contentY)
+                contentY = itemY
+            else if (itemBottom > contentY + height)
+                contentY = itemBottom - height
+        }
+
+        anchors.fill: parent
+        anchors.margins: Theme.spacingS
+        visible: appLauncher && appLauncher.viewMode === "grid"
+        model: appLauncher ? appLauncher.model : null
+        clip: true
+        cellWidth: baseCellWidth
+        cellHeight: baseCellHeight
+        leftMargin: Math.max(Theme.spacingS, remainingSpace / 2)
+        rightMargin: leftMargin
+        focus: true
+        interactive: true
+        cacheBuffer: Math.max(0, Math.min(height * 2, 1000))
+        reuseItems: true
+        onCurrentIndexChanged: {
+            if (keyboardNavigationActive)
+                ensureVisible(currentIndex)
+        }
+        onItemClicked: (index, modelData) => {
+                           if (appLauncher)
+                           appLauncher.launchApp(modelData)
+                       }
+        onItemRightClicked: (index, modelData, mouseX, mouseY) => {
+                                if (contextMenu)
+                                contextMenu.show(mouseX, mouseY, modelData)
+                            }
+        onKeyboardNavigationReset: () => {
+                                       if (appLauncher)
+                                       appLauncher.keyboardNavigationActive = false
+                                   }
+
+        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/SpotlightModal.qml

@@ -1,919 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
-import Quickshell
-import Quickshell.Io
-import Quickshell.Widgets
-import qs.Common
-import qs.Modules.AppDrawer
-import qs.Services
-import qs.Widgets
-
-DankModal {
-    id: spotlightModal
-
-    property bool spotlightOpen: false
-    property Component spotlightContent
-
-    function show() {
-        spotlightOpen = true
-        open()
-        if (contentLoader.item && contentLoader.item.appLauncher)
-            contentLoader.item.appLauncher.searchQuery = ""
-
-        Qt.callLater(function () {
-            if (contentLoader.item && contentLoader.item.searchField)
-                contentLoader.item.searchField.forceActiveFocus()
-        })
-    }
-
-    function hide() {
-        spotlightOpen = false
-        close()
-        if (contentLoader.item && contentLoader.item.appLauncher) {
-            contentLoader.item.appLauncher.searchQuery = ""
-            contentLoader.item.appLauncher.selectedIndex = 0
-            contentLoader.item.appLauncher.setCategory("All")
-        }
-    }
-
-    function toggle() {
-        if (spotlightOpen)
-            hide()
-        else
-            show()
-    }
-
-    shouldBeVisible: spotlightOpen
-
-    Connections {
-        target: ModalManager
-        function onCloseAllModalsExcept(excludedModal) {
-            if (excludedModal !== spotlightModal && !allowStacking
-                    && spotlightOpen) {
-                spotlightOpen = false
-            }
-        }
-    }
-    width: 550
-    height: 600
-    backgroundColor: Theme.popupBackground()
-    cornerRadius: Theme.cornerRadius
-    borderColor: Theme.outlineMedium
-    borderWidth: 1
-    enableShadow: true
-    onVisibleChanged: {
-        if (visible && !spotlightOpen)
-            show()
-
-        if (visible && contentLoader.item)
-            Qt.callLater(function () {
-                if (contentLoader.item.searchField)
-                    contentLoader.item.searchField.forceActiveFocus()
-            })
-    }
-    onBackgroundClicked: {
-        hide()
-    }
-    Component.onCompleted: {
-
-    }
-    content: spotlightContent
-
-    IpcHandler {
-        function open() {
-            spotlightModal.show()
-            return "SPOTLIGHT_OPEN_SUCCESS"
-        }
-
-        function close() {
-            spotlightModal.hide()
-            return "SPOTLIGHT_CLOSE_SUCCESS"
-        }
-
-        function toggle() {
-            spotlightModal.toggle()
-            return "SPOTLIGHT_TOGGLE_SUCCESS"
-        }
-
-        target: "spotlight"
-    }
-
-    spotlightContent: Component {
-        Item {
-            id: spotlightKeyHandler
-
-            property alias appLauncher: appLauncher
-            property alias searchField: searchField
-
-            anchors.fill: parent
-            focus: true
-            Keys.onPressed: function (event) {
-                if (event.key === Qt.Key_Escape) {
-                    hide()
-                    event.accepted = true
-                } else if (event.key === Qt.Key_Down) {
-                    appLauncher.selectNext()
-                    event.accepted = true
-                } else if (event.key === Qt.Key_Up) {
-                    appLauncher.selectPrevious()
-                    event.accepted = true
-                } else if (event.key === Qt.Key_Right
-                           && appLauncher.viewMode === "grid") {
-                    appLauncher.selectNextInRow()
-                    event.accepted = true
-                } else if (event.key === Qt.Key_Left
-                           && appLauncher.viewMode === "grid") {
-                    appLauncher.selectPreviousInRow()
-                    event.accepted = true
-                } else if (event.key === Qt.Key_Return
-                           || event.key === Qt.Key_Enter) {
-                    appLauncher.launchSelected()
-                    event.accepted = true
-                } else if (!searchField.activeFocus && event.text
-                           && event.text.length > 0 && event.text.match(
-                               /[a-zA-Z0-9\\s]/)) {
-                    searchField.forceActiveFocus()
-                    searchField.insertText(event.text)
-                    event.accepted = true
-                }
-            }
-
-            AppLauncher {
-                id: appLauncher
-
-                viewMode: SettingsData.spotlightModalViewMode
-                gridColumns: 4
-                onAppLaunched: hide()
-                onViewModeSelected: function (mode) {
-                    SettingsData.setSpotlightModalViewMode(mode)
-                }
-            }
-
-            Column {
-                anchors.fill: parent
-                anchors.margins: Theme.spacingL
-                spacing: Theme.spacingL
-
-                Rectangle {
-                    width: parent.width
-                    height: categorySelector.height + Theme.spacingM * 2
-                    radius: Theme.cornerRadius
-                    color: Theme.surfaceVariantAlpha
-                    border.color: Theme.outlineMedium
-                    border.width: 1
-                    visible: appLauncher.categories.length > 1
-                             || appLauncher.model.count > 0
-
-                    CategorySelector {
-                        id: categorySelector
-
-                        anchors.centerIn: parent
-                        width: parent.width - Theme.spacingM * 2
-                        categories: appLauncher.categories
-                        selectedCategory: appLauncher.selectedCategory
-                        compact: false
-                        onCategorySelected: category => {
-                                                return appLauncher.setCategory(
-                                                    category)
-                                            }
-                    }
-                }
-
-                Row {
-                    width: parent.width
-                    spacing: Theme.spacingM
-
-                    DankTextField {
-                        id: searchField
-
-                        width: parent.width - 80
-                               - Theme.spacingM // Leave space for view toggle buttons
-                        height: 56
-                        cornerRadius: Theme.cornerRadius
-                        backgroundColor: Qt.rgba(
-                                             Theme.surfaceVariant.r,
-                                             Theme.surfaceVariant.g,
-                                             Theme.surfaceVariant.b,
-                                             Theme.getContentBackgroundAlpha(
-                                                 ) * 0.7)
-                        normalBorderColor: Theme.outlineMedium
-                        focusedBorderColor: Theme.primary
-                        leftIconName: "search"
-                        leftIconSize: Theme.iconSize
-                        leftIconColor: Theme.surfaceVariantText
-                        leftIconFocusedColor: Theme.primary
-                        showClearButton: true
-                        textColor: Theme.surfaceText
-                        font.pixelSize: Theme.fontSizeLarge
-                        enabled: spotlightOpen
-                        placeholderText: ""
-                        ignoreLeftRightKeys: true
-                        keyForwardTargets: [spotlightKeyHandler]
-                        text: appLauncher.searchQuery
-                        onTextEdited: {
-                            appLauncher.searchQuery = text
-                        }
-                        Keys.onPressed: event => {
-                                            if (event.key === Qt.Key_Escape) {
-                                                hide()
-                                                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))
-                                                event.accepted = true
-                                            } else if (event.key === Qt.Key_Down || event.key === Qt.Key_Up || event.key === Qt.Key_Left || event.key === Qt.Key_Right || ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && text.length === 0)) {
-                                                event.accepted = false
-                                            }
-                                        }
-                    }
-
-                    Row {
-                        spacing: Theme.spacingXS
-                        visible: appLauncher.model.count > 0
-                        anchors.verticalCenter: parent.verticalCenter
-
-                        Rectangle {
-                            width: 36
-                            height: 36
-                            radius: Theme.cornerRadius
-                            color: appLauncher.viewMode === "list" ? Theme.primaryHover : listViewArea.containsMouse ? Theme.surfaceHover : "transparent"
-                            border.color: appLauncher.viewMode
-                                          === "list" ? Theme.primarySelected : "transparent"
-                            border.width: 1
-
-                            DankIcon {
-                                anchors.centerIn: parent
-                                name: "view_list"
-                                size: 18
-                                color: appLauncher.viewMode
-                                       === "list" ? Theme.primary : Theme.surfaceText
-                            }
-
-                            MouseArea {
-                                id: listViewArea
-
-                                anchors.fill: parent
-                                hoverEnabled: true
-                                cursorShape: Qt.PointingHandCursor
-                                onClicked: {
-                                    appLauncher.setViewMode("list")
-                                }
-                            }
-                        }
-
-                        Rectangle {
-                            width: 36
-                            height: 36
-                            radius: Theme.cornerRadius
-                            color: appLauncher.viewMode === "grid" ? Theme.primaryHover : gridViewArea.containsMouse ? Theme.surfaceHover : "transparent"
-                            border.color: appLauncher.viewMode
-                                          === "grid" ? Theme.primarySelected : "transparent"
-                            border.width: 1
-
-                            DankIcon {
-                                anchors.centerIn: parent
-                                name: "grid_view"
-                                size: 18
-                                color: appLauncher.viewMode
-                                       === "grid" ? Theme.primary : Theme.surfaceText
-                            }
-
-                            MouseArea {
-                                id: gridViewArea
-
-                                anchors.fill: parent
-                                hoverEnabled: true
-                                cursorShape: Qt.PointingHandCursor
-                                onClicked: {
-                                    appLauncher.setViewMode("grid")
-                                }
-                            }
-                        }
-                    }
-                }
-
-                Rectangle {
-                    id: resultsContainer
-
-                    width: parent.width
-                    height: parent.height - y
-                    radius: Theme.cornerRadius
-                    color: Theme.surfaceLight
-                    border.color: Theme.outlineLight
-                    border.width: 1
-
-                    DankListView {
-                        id: resultsList
-
-                        property int itemHeight: 60
-                        property int iconSize: 40
-                        property bool showDescription: true
-                        property int itemSpacing: Theme.spacingS
-                        property bool hoverUpdatesSelection: false
-                        property bool keyboardNavigationActive: appLauncher.keyboardNavigationActive
-
-                        signal keyboardNavigationReset
-                        signal itemClicked(int index, var modelData)
-                        signal itemRightClicked(int index, var modelData, real mouseX, real mouseY)
-
-                        function ensureVisible(index) {
-                            if (index < 0 || index >= count)
-                                return
-
-                            var itemY = index * (itemHeight + itemSpacing)
-                            var itemBottom = itemY + itemHeight
-                            if (itemY < contentY)
-                                contentY = itemY
-                            else if (itemBottom > contentY + height)
-                                contentY = itemBottom - height
-                        }
-
-                        anchors.fill: parent
-                        anchors.margins: Theme.spacingS
-                        visible: appLauncher.viewMode === "list"
-                        model: appLauncher.model
-                        currentIndex: appLauncher.selectedIndex
-                        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, modelData) {
-                            appLauncher.launchApp(modelData)
-                        }
-                        onItemRightClicked: function (index, modelData, mouseX, mouseY) {
-                            contextMenu.show(mouseX, mouseY, modelData)
-                        }
-                        onKeyboardNavigationReset: {
-                            appLauncher.keyboardNavigationActive = false
-                        }
-
-                        ScrollBar.vertical: ScrollBar {
-                            policy: ScrollBar.AlwaysOn
-                        }
-
-                        ScrollBar.horizontal: ScrollBar {
-                            policy: ScrollBar.AlwaysOff
-                        }
-
-                        delegate: Rectangle {
-                            width: ListView.view.width
-                            height: resultsList.itemHeight
-                            radius: Theme.cornerRadius
-                            color: ListView.isCurrentItem ? Theme.primaryPressed : listMouseArea.containsMouse ? Theme.primaryHoverLight : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.03)
-                            border.color: ListView.isCurrentItem ? Theme.primarySelected : Theme.outlineMedium
-                            border.width: ListView.isCurrentItem ? 2 : 1
-
-                            Row {
-                                anchors.fill: parent
-                                anchors.margins: Theme.spacingM
-                                spacing: Theme.spacingL
-
-                                Item {
-                                    width: resultsList.iconSize
-                                    height: resultsList.iconSize
-                                    anchors.verticalCenter: parent.verticalCenter
-
-                                    IconImage {
-                                        id: listIconImg
-
-                                        anchors.fill: parent
-                                        source: (model.icon) ? Quickshell.iconPath(
-                                                                   model.icon,
-                                                                   SettingsData.iconTheme === "System Default" ? "" : SettingsData.iconTheme) : ""
-                                        smooth: true
-                                        asynchronous: true
-                                        visible: status === Image.Ready
-                                    }
-
-                                    Rectangle {
-                                        anchors.fill: parent
-                                        visible: !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: parent.width - resultsList.iconSize - Theme.spacingL
-                                    spacing: Theme.spacingXS
-
-                                    StyledText {
-                                        width: parent.width
-                                        text: model.name || ""
-                                        font.pixelSize: Theme.fontSizeLarge
-                                        color: Theme.surfaceText
-                                        font.weight: Font.Medium
-                                        elide: Text.ElideRight
-                                    }
-
-                                    StyledText {
-                                        width: parent.width
-                                        text: model.comment || "Application"
-                                        font.pixelSize: Theme.fontSizeMedium
-                                        color: Theme.surfaceVariantText
-                                        elide: Text.ElideRight
-                                        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) {
-                                                   var modalPos = mapToItem(
-                                                       spotlightKeyHandler,
-                                                       mouse.x, mouse.y)
-                                                   resultsList.itemRightClicked(
-                                                       index, model,
-                                                       modalPos.x, modalPos.y)
-                                               }
-                                           }
-                            }
-                        }
-                    }
-
-                    DankGridView {
-                        id: resultsGrid
-
-                        property int currentIndex: appLauncher.selectedIndex
-                        property int columns: 4
-                        property bool adaptiveColumns: false
-                        property int minCellWidth: 120
-                        property int maxCellWidth: 160
-                        property int cellPadding: 8
-                        property real iconSizeRatio: 0.55
-                        property int maxIconSize: 48
-                        property int minIconSize: 32
-                        property bool hoverUpdatesSelection: false
-                        property bool keyboardNavigationActive: appLauncher.keyboardNavigationActive
-                        property int baseCellWidth: adaptiveColumns ? Math.max(
-                                                                          minCellWidth,
-                                                                          Math.min(maxCellWidth, width / columns)) : (width - Theme.spacingS * 2) / columns
-                        property int baseCellHeight: baseCellWidth + 20
-                        property int actualColumns: adaptiveColumns ? Math.floor(
-                                                                          width
-                                                                          / cellWidth) : columns
-                        property int remainingSpace: width - (actualColumns * cellWidth)
-
-                        signal keyboardNavigationReset
-                        signal itemClicked(int index, var modelData)
-                        signal itemRightClicked(int index, var modelData, real mouseX, real mouseY)
-
-                        function ensureVisible(index) {
-                            if (index < 0 || index >= count)
-                                return
-
-                            var itemY = Math.floor(
-                                        index / actualColumns) * cellHeight
-                            var itemBottom = itemY + cellHeight
-                            if (itemY < contentY)
-                                contentY = itemY
-                            else if (itemBottom > contentY + height)
-                                contentY = itemBottom - height
-                        }
-
-                        anchors.fill: parent
-                        anchors.margins: Theme.spacingS
-                        visible: appLauncher.viewMode === "grid"
-                        model: appLauncher.model
-                        clip: true
-                        cellWidth: baseCellWidth
-                        cellHeight: baseCellHeight
-                        leftMargin: Math.max(Theme.spacingS, remainingSpace / 2)
-                        rightMargin: leftMargin
-                        focus: true
-                        interactive: true
-                        cacheBuffer: Math.max(0, Math.min(height * 2, 1000))
-                        reuseItems: true
-                        onCurrentIndexChanged: {
-                            if (keyboardNavigationActive)
-                                ensureVisible(currentIndex)
-                        }
-                        onItemClicked: function (index, modelData) {
-                            appLauncher.launchApp(modelData)
-                        }
-                        onItemRightClicked: function (index, modelData, mouseX, mouseY) {
-                            contextMenu.show(mouseX, mouseY, modelData)
-                        }
-                        onKeyboardNavigationReset: {
-                            appLauncher.keyboardNavigationActive = false
-                        }
-
-                        ScrollBar.vertical: ScrollBar {
-                            policy: ScrollBar.AsNeeded
-                        }
-
-                        ScrollBar.horizontal: ScrollBar {
-                            policy: ScrollBar.AlwaysOff
-                        }
-
-                        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 : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.03)
-                            border.color: resultsGrid.currentIndex
-                                          === index ? Theme.primarySelected : Theme.outlineMedium
-                            border.width: resultsGrid.currentIndex === index ? 2 : 1
-
-                            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
-
-                                    IconImage {
-                                        id: gridIconImg
-
-                                        anchors.fill: parent
-                                        source: (model.icon) ? Quickshell.iconPath(
-                                                                   model.icon,
-                                                                   SettingsData.iconTheme === "System Default" ? "" : SettingsData.iconTheme) : ""
-                                        smooth: true
-                                        asynchronous: true
-                                        visible: status === Image.Ready
-                                    }
-
-                                    Rectangle {
-                                        anchors.fill: parent
-                                        visible: !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: 2
-                                    wrapMode: Text.WordWrap
-                                }
-                            }
-
-                            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) {
-                                                   var modalPos = mapToItem(
-                                                       spotlightKeyHandler,
-                                                       mouse.x, mouse.y)
-                                                   resultsGrid.itemRightClicked(
-                                                       index, model,
-                                                       modalPos.x, modalPos.y)
-                                               }
-                                           }
-                            }
-                        }
-                    }
-                }
-            }
-
-            Rectangle {
-                id: contextMenu
-
-                property var currentApp: null
-                property bool menuVisible: false
-
-                function show(x, y, app) {
-                    currentApp = app
-
-                    const menuWidth = 180
-                    const menuHeight = menuColumn.implicitHeight + Theme.spacingS * 2
-                    let finalX = x + 8
-                    let finalY = y + 8
-
-                    if (finalX + menuWidth > spotlightKeyHandler.width) {
-                        finalX = x - menuWidth - 8
-                    }
-
-                    if (finalY + menuHeight > spotlightKeyHandler.height) {
-                        finalY = y - menuHeight - 8
-                    }
-
-                    finalX = Math.max(
-                                8, Math.min(
-                                    finalX,
-                                    spotlightKeyHandler.width - menuWidth - 8))
-                    finalY = Math.max(
-                                8, Math.min(
-                                    finalY,
-                                    spotlightKeyHandler.height - menuHeight - 8))
-
-                    contextMenu.x = finalX
-                    contextMenu.y = finalY
-                    contextMenu.visible = true
-                    contextMenu.menuVisible = true
-                }
-
-                function close() {
-                    contextMenu.menuVisible = false
-                    Qt.callLater(() => {
-                                     contextMenu.visible = false
-                                 })
-                }
-
-                visible: false
-                width: 180
-                height: menuColumn.implicitHeight + Theme.spacingS * 2
-                radius: Theme.cornerRadius
-                color: Theme.popupBackground()
-                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                                      Theme.outline.b, 0.08)
-                border.width: 1
-                z: 1000
-                opacity: menuVisible ? 1 : 0
-                scale: menuVisible ? 1 : 0.85
-
-                Rectangle {
-                    anchors.fill: parent
-                    anchors.topMargin: 4
-                    anchors.leftMargin: 2
-                    anchors.rightMargin: -2
-                    anchors.bottomMargin: -4
-                    radius: parent.radius
-                    color: Qt.rgba(0, 0, 0, 0.15)
-                    z: parent.z - 1
-                }
-
-                Column {
-                    id: menuColumn
-
-                    anchors.fill: parent
-                    anchors.margins: Theme.spacingS
-                    spacing: 1
-
-                    Rectangle {
-                        width: parent.width
-                        height: 32
-                        radius: Theme.cornerRadius
-                        color: pinMouseArea.containsMouse ? Qt.rgba(
-                                                                Theme.primary.r,
-                                                                Theme.primary.g,
-                                                                Theme.primary.b,
-                                                                0.12) : "transparent"
-
-                        Row {
-                            anchors.left: parent.left
-                            anchors.leftMargin: Theme.spacingS
-                            anchors.verticalCenter: parent.verticalCenter
-                            spacing: Theme.spacingS
-
-                            DankIcon {
-                                name: {
-                                    if (!contextMenu.currentApp
-                                            || !contextMenu.currentApp.desktopEntry)
-                                        return "push_pin"
-
-                                    var appId = contextMenu.currentApp.desktopEntry.id
-                                            || contextMenu.currentApp.desktopEntry.execString
-                                            || ""
-                                    return SessionData.isPinnedApp(
-                                                appId) ? "keep_off" : "push_pin"
-                                }
-                                size: Theme.iconSize - 2
-                                color: Theme.surfaceText
-                                opacity: 0.7
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                            StyledText {
-                                text: {
-                                    if (!contextMenu.currentApp
-                                            || !contextMenu.currentApp.desktopEntry)
-                                        return "Pin to Dock"
-
-                                    var appId = contextMenu.currentApp.desktopEntry.id
-                                            || contextMenu.currentApp.desktopEntry.execString
-                                            || ""
-                                    return SessionData.isPinnedApp(
-                                                appId) ? "Unpin from Dock" : "Pin to Dock"
-                                }
-                                font.pixelSize: Theme.fontSizeSmall
-                                color: Theme.surfaceText
-                                font.weight: Font.Normal
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-                        }
-
-                        MouseArea {
-                            id: pinMouseArea
-
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                if (!contextMenu.currentApp
-                                        || !contextMenu.currentApp.desktopEntry)
-                                    return
-
-                                var appId = contextMenu.currentApp.desktopEntry.id
-                                        || contextMenu.currentApp.desktopEntry.execString
-                                        || ""
-                                if (SessionData.isPinnedApp(appId))
-                                    SessionData.removePinnedApp(appId)
-                                else
-                                    SessionData.addPinnedApp(appId)
-                                contextMenu.close()
-                            }
-                        }
-                    }
-
-                    Rectangle {
-                        width: parent.width - Theme.spacingS * 2
-                        height: 5
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        color: "transparent"
-
-                        Rectangle {
-                            anchors.centerIn: parent
-                            width: parent.width
-                            height: 1
-                            color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                                           Theme.outline.b, 0.2)
-                        }
-                    }
-
-                    Rectangle {
-                        width: parent.width
-                        height: 32
-                        radius: Theme.cornerRadius
-                        color: launchMouseArea.containsMouse ? Qt.rgba(
-                                                                   Theme.primary.r,
-                                                                   Theme.primary.g,
-                                                                   Theme.primary.b,
-                                                                   0.12) : "transparent"
-
-                        Row {
-                            anchors.left: parent.left
-                            anchors.leftMargin: Theme.spacingS
-                            anchors.verticalCenter: parent.verticalCenter
-                            spacing: Theme.spacingS
-
-                            DankIcon {
-                                name: "launch"
-                                size: Theme.iconSize - 2
-                                color: Theme.surfaceText
-                                opacity: 0.7
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                            StyledText {
-                                text: "Launch"
-                                font.pixelSize: Theme.fontSizeSmall
-                                color: Theme.surfaceText
-                                font.weight: Font.Normal
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-                        }
-
-                        MouseArea {
-                            id: launchMouseArea
-
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                if (contextMenu.currentApp)
-                                    appLauncher.launchApp(
-                                                contextMenu.currentApp)
-
-                                contextMenu.close()
-                            }
-                        }
-                    }
-                }
-
-                Behavior on opacity {
-                    NumberAnimation {
-                        duration: Theme.mediumDuration
-                        easing.type: Theme.emphasizedEasing
-                    }
-                }
-
-                Behavior on scale {
-                    NumberAnimation {
-                        duration: Theme.mediumDuration
-                        easing.type: Theme.emphasizedEasing
-                    }
-                }
-            }
-
-            MouseArea {
-                anchors.fill: parent
-                visible: contextMenu.visible
-                z: 999
-                onClicked: {
-                    contextMenu.close()
-                }
-
-                MouseArea {
-                    x: contextMenu.x
-                    y: contextMenu.y
-                    width: contextMenu.width
-                    height: contextMenu.height
-                    onClicked: {
-
-                        // Prevent closing when clicking on the menu itself
-                    }
-                }
-            }
-        }
-    }
-}

Modals/WifiPasswordModal.qml

@@ -1,71 +1,170 @@
 import QtQuick
-import QtQuick.Controls
 import qs.Common
+import qs.Modals.Common
 import qs.Services
 import qs.Widgets
 
 DankModal {
     id: root
 
+    layerNamespace: "dms:wifi-password"
+
     property string wifiPasswordSSID: ""
     property string wifiPasswordInput: ""
+    property string wifiUsernameInput: ""
+    property bool requiresEnterprise: false
+
+    property string wifiAnonymousIdentityInput: ""
+    property string wifiDomainInput: ""
+
+    property bool isPromptMode: false
+    property string promptToken: ""
+    property string promptReason: ""
+    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 = ""
+        wifiUsernameInput = ""
+        wifiAnonymousIdentityInput = ""
+        wifiDomainInput = ""
+        isPromptMode = false
+        promptToken = ""
+        promptReason = ""
+        promptFields = []
+        promptSetting = ""
+        isVpnPrompt = false
+        connectionName = ""
+        vpnServiceType = ""
+        connectionType = ""
+
+        const network = NetworkService.wifiNetworks.find(n => n.ssid === ssid)
+        requiresEnterprise = network?.enterprise || false
+
         open()
-        Qt.callLater(function () {
-            if (contentLoader.item && contentLoader.item.passwordInput) {
-                contentLoader.item.passwordInput.forceActiveFocus()
-            }
-        })
+        Qt.callLater(() => {
+                         if (contentLoader.item) {
+                             if (requiresEnterprise && contentLoader.item.usernameInput) {
+                                 contentLoader.item.usernameInput.forceActiveFocus()
+                             } else if (contentLoader.item.passwordInput) {
+                                 contentLoader.item.passwordInput.forceActiveFocus()
+                             }
+                         }
+                     })
+    }
+
+    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"
+
+        if (reason === "wrong-password") {
+            wifiPasswordInput = ""
+            wifiUsernameInput = ""
+        } else {
+            wifiPasswordInput = ""
+            wifiUsernameInput = ""
+            wifiAnonymousIdentityInput = ""
+            wifiDomainInput = ""
+        }
+
+        open()
+        Qt.callLater(() => {
+                         if (contentLoader.item) {
+                             if (reason === "wrong-password" && contentLoader.item.passwordInput) {
+                                 contentLoader.item.passwordInput.text = ""
+                                 contentLoader.item.passwordInput.forceActiveFocus()
+                             } else if (requiresEnterprise && contentLoader.item.usernameInput) {
+                                 contentLoader.item.usernameInput.forceActiveFocus()
+                             } else if (contentLoader.item.passwordInput) {
+                                 contentLoader.item.passwordInput.forceActiveFocus()
+                             }
+                         }
+                     })
     }
 
     shouldBeVisible: false
     width: 420
-    height: 230
-    onShouldBeVisibleChanged: {
-        if (!shouldBeVisible)
-            wifiPasswordInput = ""
-    }
+    height: requiresEnterprise ? 430 : 230
+    onShouldBeVisibleChanged: () => {
+                                  if (!shouldBeVisible) {
+                                      wifiPasswordInput = ""
+                                      wifiUsernameInput = ""
+                                      wifiAnonymousIdentityInput = ""
+                                      wifiDomainInput = ""
+                                  }
+                              }
     onOpened: {
-        Qt.callLater(function () {
-            if (contentLoader.item && contentLoader.item.passwordInput) {
-                contentLoader.item.passwordInput.forceActiveFocus()
-            }
-        })
-    }
-    onBackgroundClicked: {
-        close()
-        wifiPasswordInput = ""
+        Qt.callLater(() => {
+                         if (contentLoader.item) {
+                             if (requiresEnterprise && contentLoader.item.usernameInput) {
+                                 contentLoader.item.usernameInput.forceActiveFocus()
+                             } else if (contentLoader.item.passwordInput) {
+                                 contentLoader.item.passwordInput.forceActiveFocus()
+                             }
+                         }
+                     })
     }
+    onBackgroundClicked: () => {
+                             if (isPromptMode) {
+                                 NetworkService.cancelCredentials(promptToken)
+                             }
+                             close()
+                             wifiPasswordInput = ""
+                             wifiUsernameInput = ""
+                             wifiAnonymousIdentityInput = ""
+                             wifiDomainInput = ""
+                         }
 
     Connections {
+        target: NetworkService
+
         function onPasswordDialogShouldReopenChanged() {
-            if (NetworkService.passwordDialogShouldReopen
-                    && NetworkService.connectingSSID !== "") {
+            if (NetworkService.passwordDialogShouldReopen && NetworkService.connectingSSID !== "") {
                 wifiPasswordSSID = NetworkService.connectingSSID
                 wifiPasswordInput = ""
                 open()
                 NetworkService.passwordDialogShouldReopen = false
             }
         }
-
-        target: NetworkService
     }
 
     content: Component {
         FocusScope {
             id: wifiContent
+
+            property alias usernameInput: usernameInput
             property alias passwordInput: passwordInput
 
             anchors.fill: parent
             focus: true
-            Keys.onEscapePressed: function (event) {
-                close()
-                wifiPasswordInput = ""
-                event.accepted = true
-            }
+            Keys.onEscapePressed: event => {
+                                      if (isPromptMode) {
+                                          NetworkService.cancelCredentials(promptToken)
+                                      }
+                                      close()
+                                      wifiPasswordInput = ""
+                                      wifiUsernameInput = ""
+                                      wifiAnonymousIdentityInput = ""
+                                      wifiDomainInput = ""
+                                      event.accepted = true
+                                  }
 
             Column {
                 anchors.centerIn: parent
@@ -80,18 +179,42 @@ DankModal {
                         spacing: Theme.spacingXS
 
                         StyledText {
-                            text: "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
                         }
 
-                        StyledText {
-                            text: "Enter password for \"" + wifiPasswordSSID + "\""
-                            font.pixelSize: Theme.fontSizeMedium
-                            color: Theme.surfaceTextMedium
+                        Column {
                             width: parent.width
-                            elide: Text.ElideRight
+                            spacing: Theme.spacingXS
+
+                            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
+                                }
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceTextMedium
+                                width: parent.width
+                                elide: Text.ElideRight
+                            }
+
+                            StyledText {
+                                visible: isPromptMode && promptReason === "wrong-password"
+                                text: I18n.tr("Incorrect password")
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.error
+                                width: parent.width
+                            }
                         }
                     }
 
@@ -99,11 +222,53 @@ DankModal {
                         iconName: "close"
                         iconSize: Theme.iconSize - 4
                         iconColor: Theme.surfaceText
-                        hoverColor: Theme.errorHover
-                        onClicked: {
-                            close()
-                            wifiPasswordInput = ""
-                        }
+                        onClicked: () => {
+                                       if (isPromptMode) {
+                                           NetworkService.cancelCredentials(promptToken)
+                                       }
+                                       close()
+                                       wifiPasswordInput = ""
+                                       wifiUsernameInput = ""
+                                       wifiAnonymousIdentityInput = ""
+                                       wifiDomainInput = ""
+                                   }
+                    }
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceHover
+                    border.color: usernameInput.activeFocus ? Theme.primary : Theme.outlineStrong
+                    border.width: usernameInput.activeFocus ? 2 : 1
+                    visible: requiresEnterprise && !isVpnPrompt
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: () => {
+                                       usernameInput.forceActiveFocus()
+                                   }
+                    }
+
+                    DankTextField {
+                        id: usernameInput
+
+                        anchors.fill: parent
+                        font.pixelSize: Theme.fontSizeMedium
+                        textColor: Theme.surfaceText
+                        text: wifiUsernameInput
+                        placeholderText: I18n.tr("Username")
+                        backgroundColor: "transparent"
+                        enabled: root.shouldBeVisible
+                        onTextEdited: () => {
+                                          wifiUsernameInput = text
+                                      }
+                        onAccepted: () => {
+                                        if (passwordInput) {
+                                            passwordInput.forceActiveFocus()
+                                        }
+                                    }
                     }
                 }
 
@@ -117,9 +282,9 @@ DankModal {
 
                     MouseArea {
                         anchors.fill: parent
-                        onClicked: {
-                            passwordInput.forceActiveFocus()
-                        }
+                        onClicked: () => {
+                                       passwordInput.forceActiveFocus()
+                                   }
                     }
 
                     DankTextField {
@@ -130,49 +295,140 @@ DankModal {
                         textColor: Theme.surfaceText
                         text: wifiPasswordInput
                         echoMode: showPasswordCheckbox.checked ? TextInput.Normal : TextInput.Password
-                        placeholderText: ""
+                        placeholderText: (requiresEnterprise && !isVpnPrompt) ? I18n.tr("Password") : ""
                         backgroundColor: "transparent"
-                        focus: true
+                        focus: !requiresEnterprise
                         enabled: root.shouldBeVisible
-                        onTextEdited: {
-                            wifiPasswordInput = text
-                        }
-                        onAccepted: {
-                            NetworkService.connectToWifiWithPassword(
-                                        wifiPasswordSSID, passwordInput.text)
-                            close()
-                            wifiPasswordInput = ""
-                            passwordInput.text = ""
-                        }
-
-                        Component.onCompleted: {
-                            if (root.shouldBeVisible) {
-                                focusDelayTimer.start()
-                            }
-                        }
+                        onTextEdited: () => {
+                                          wifiPasswordInput = text
+                                      }
+                        onAccepted: () => {
+                                        if (isPromptMode) {
+                                            const secrets = {}
+                                            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
+                                                if (passwordInput.text) secrets["password"] = passwordInput.text
+                                                if (wifiAnonymousIdentityInput) secrets["anonymous-identity"] = wifiAnonymousIdentityInput
+                                            }
+                                            NetworkService.submitCredentials(promptToken, secrets, true)
+                                        } else {
+                                            const username = requiresEnterprise ? usernameInput.text : ""
+                                            NetworkService.connectToWifi(
+                                                wifiPasswordSSID,
+                                                passwordInput.text,
+                                                username,
+                                                wifiAnonymousIdentityInput,
+                                                wifiDomainInput
+                                            )
+                                        }
+                                        close()
+                                        wifiPasswordInput = ""
+                                        wifiUsernameInput = ""
+                                        wifiAnonymousIdentityInput = ""
+                                        wifiDomainInput = ""
+                                        passwordInput.text = ""
+                                        if (requiresEnterprise) usernameInput.text = ""
+                                    }
+                        Component.onCompleted: () => {
+                                                   if (root.shouldBeVisible && !requiresEnterprise)
+                                                   focusDelayTimer.start()
+                                               }
 
                         Timer {
                             id: focusDelayTimer
+
                             interval: 100
                             repeat: false
-                            onTriggered: {
-                                if (root.shouldBeVisible) {
-                                    passwordInput.forceActiveFocus()
-                                }
-                            }
+                            onTriggered: () => {
+                                             if (root.shouldBeVisible) {
+                                                 if (requiresEnterprise && usernameInput) {
+                                                     usernameInput.forceActiveFocus()
+                                                 } else {
+                                                     passwordInput.forceActiveFocus()
+                                                 }
+                                             }
+                                         }
                         }
 
                         Connections {
                             target: root
+
                             function onShouldBeVisibleChanged() {
-                                if (root.shouldBeVisible) {
+                                if (root.shouldBeVisible)
                                     focusDelayTimer.start()
-                                }
                             }
                         }
                     }
                 }
 
+                Rectangle {
+                    visible: requiresEnterprise && !isVpnPrompt
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceHover
+                    border.color: anonInput.activeFocus ? Theme.primary : Theme.outlineStrong
+                    border.width: anonInput.activeFocus ? 2 : 1
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: () => {
+                                       anonInput.forceActiveFocus()
+                                   }
+                    }
+
+                    DankTextField {
+                        id: anonInput
+
+                        anchors.fill: parent
+                        font.pixelSize: Theme.fontSizeMedium
+                        textColor: Theme.surfaceText
+                        text: wifiAnonymousIdentityInput
+                        placeholderText: I18n.tr("Anonymous Identity (optional)")
+                        backgroundColor: "transparent"
+                        enabled: root.shouldBeVisible
+                        onTextEdited: () => {
+                                          wifiAnonymousIdentityInput = text
+                                      }
+                    }
+                }
+
+                Rectangle {
+                    visible: requiresEnterprise && !isVpnPrompt
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceHover
+                    border.color: domainMatchInput.activeFocus ? Theme.primary : Theme.outlineStrong
+                    border.width: domainMatchInput.activeFocus ? 2 : 1
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: () => {
+                                       domainMatchInput.forceActiveFocus()
+                                   }
+                    }
+
+                    DankTextField {
+                        id: domainMatchInput
+
+                        anchors.fill: parent
+                        font.pixelSize: Theme.fontSizeMedium
+                        textColor: Theme.surfaceText
+                        text: wifiDomainInput
+                        placeholderText: I18n.tr("Domain (optional)")
+                        backgroundColor: "transparent"
+                        enabled: root.shouldBeVisible
+                        onTextEdited: () => {
+                                          wifiDomainInput = text
+                                      }
+                    }
+                }
+
                 Row {
                     spacing: Theme.spacingS
 
@@ -200,14 +456,14 @@ DankModal {
                             anchors.fill: parent
                             hoverEnabled: true
                             cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                showPasswordCheckbox.checked = !showPasswordCheckbox.checked
-                            }
+                            onClicked: () => {
+                                           showPasswordCheckbox.checked = !showPasswordCheckbox.checked
+                                       }
                         }
                     }
 
                     StyledText {
-                        text: "Show password"
+                        text: I18n.tr("Show password")
                         font.pixelSize: Theme.fontSizeMedium
                         color: Theme.surfaceText
                         anchors.verticalCenter: parent.verticalCenter
@@ -224,9 +480,7 @@ DankModal {
                         spacing: Theme.spacingM
 
                         Rectangle {
-                            width: Math.max(
-                                       70,
-                                       cancelText.contentWidth + Theme.spacingM * 2)
+                            width: Math.max(70, cancelText.contentWidth + Theme.spacingM * 2)
                             height: 36
                             radius: Theme.cornerRadius
                             color: cancelArea.containsMouse ? Theme.surfaceTextHover : "transparent"
@@ -237,7 +491,7 @@ DankModal {
                                 id: cancelText
 
                                 anchors.centerIn: parent
-                                text: "Cancel"
+                                text: I18n.tr("Cancel")
                                 font.pixelSize: Theme.fontSizeMedium
                                 color: Theme.surfaceText
                                 font.weight: Font.Medium
@@ -249,30 +503,37 @@ DankModal {
                                 anchors.fill: parent
                                 hoverEnabled: true
                                 cursorShape: Qt.PointingHandCursor
-                                onClicked: {
-                                    close()
-                                    wifiPasswordInput = ""
-                                }
+                                onClicked: () => {
+                                               if (isPromptMode) {
+                                                   NetworkService.cancelCredentials(promptToken)
+                                               }
+                                               close()
+                                               wifiPasswordInput = ""
+                                               wifiUsernameInput = ""
+                                               wifiAnonymousIdentityInput = ""
+                                               wifiDomainInput = ""
+                                           }
                             }
                         }
 
                         Rectangle {
-                            width: Math.max(
-                                       80,
-                                       connectText.contentWidth + Theme.spacingM * 2)
+                            width: Math.max(80, connectText.contentWidth + Theme.spacingM * 2)
                             height: 36
                             radius: Theme.cornerRadius
-                            color: connectArea.containsMouse ? Qt.darker(
-                                                                   Theme.primary,
-                                                                   1.1) : Theme.primary
-                            enabled: passwordInput.text.length > 0
+                            color: connectArea.containsMouse ? Qt.darker(Theme.primary, 1.1) : Theme.primary
+                            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 {
                                 id: connectText
 
                                 anchors.centerIn: parent
-                                text: "Connect"
+                                text: I18n.tr("Connect")
                                 font.pixelSize: Theme.fontSizeMedium
                                 color: Theme.background
                                 font.weight: Font.Medium
@@ -285,14 +546,37 @@ DankModal {
                                 hoverEnabled: true
                                 cursorShape: Qt.PointingHandCursor
                                 enabled: parent.enabled
-                                onClicked: {
-                                    NetworkService.connectToWifiWithPassword(
-                                                wifiPasswordSSID,
-                                                passwordInput.text)
-                                    close()
-                                    wifiPasswordInput = ""
-                                    passwordInput.text = ""
-                                }
+                                onClicked: () => {
+                                               if (isPromptMode) {
+                                                   const secrets = {}
+                                                   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
+                                                       if (passwordInput.text) secrets["password"] = passwordInput.text
+                                                       if (wifiAnonymousIdentityInput) secrets["anonymous-identity"] = wifiAnonymousIdentityInput
+                                                   }
+                                                   NetworkService.submitCredentials(promptToken, secrets, true)
+                                               } else {
+                                                   const username = requiresEnterprise ? usernameInput.text : ""
+                                                   NetworkService.connectToWifi(
+                                                       wifiPasswordSSID,
+                                                       passwordInput.text,
+                                                       username,
+                                                       wifiAnonymousIdentityInput,
+                                                       wifiDomainInput
+                                                   )
+                                               }
+                                               close()
+                                               wifiPasswordInput = ""
+                                               wifiUsernameInput = ""
+                                               wifiAnonymousIdentityInput = ""
+                                               wifiDomainInput = ""
+                                               passwordInput.text = ""
+                                               if (requiresEnterprise) usernameInput.text = ""
+                                           }
                             }
 
                             Behavior on color {

Modules/AppDrawer/AppLauncher.qml

@@ -8,8 +8,12 @@ import qs.Widgets
 Item {
     id: root
 
+    // DEVELOPER NOTE: This component manages the AppDrawer launcher (accessed via DankBar icon).
+    // Changes to launcher behavior, especially item rendering, filtering, or model structure,
+    // likely require corresponding updates in Modals/Spotlight/SpotlightResults.qml and vice versa.
+
     property string searchQuery: ""
-    property string selectedCategory: "All"
+    property string selectedCategory: I18n.tr("All")
     property string viewMode: "list" // "list" or "grid"
     property int selectedIndex: 0
     property int maxResults: 50
@@ -17,145 +21,224 @@ Item {
     property bool debounceSearch: true
     property int debounceInterval: 50
     property bool keyboardNavigationActive: false
+    property bool suppressUpdatesWhileLaunching: false
     property var categories: {
-        var allCategories = AppSearchService.getAllCategories().filter(cat => {
-                                                                           return cat !== "Education"
-                                                                           && cat !== "Science"
-                                                                       })
-        var result = ["All"]
-        return result.concat(allCategories.filter(cat => {
-                                                      return cat !== "All"
-                                                  }))
+        const allCategories = AppSearchService.getAllCategories().filter(cat => cat !== "Education" && cat !== "Science")
+        const result = [I18n.tr("All")]
+        return result.concat(allCategories.filter(cat => cat !== I18n.tr("All")))
     }
-    property var categoryIcons: categories.map(category => {
-                                                   return AppSearchService.getCategoryIcon(
-                                                       category)
-                                               })
+    readonly property var categoryIcons: categories.map(category => AppSearchService.getCategoryIcon(category))
     property var appUsageRanking: AppUsageHistoryData.appUsageRanking || {}
     property alias model: filteredModel
     property var _watchApplications: AppSearchService.applications
+    property var _uniqueApps: []
+    property bool _isTriggered: false
+    property string _triggeredCategory: ""
+    property bool _updatingFromTrigger: false
 
     signal appLaunched(var app)
     signal categorySelected(string category)
     signal viewModeSelected(string mode)
 
+    function updateCategories() {
+        const allCategories = AppSearchService.getAllCategories().filter(cat => cat !== "Education" && cat !== "Science")
+        const result = [I18n.tr("All")]
+        categories = result.concat(allCategories.filter(cat => cat !== I18n.tr("All")))
+    }
+
+    Connections {
+        target: PluginService
+        function onPluginLoaded() { updateCategories() }
+        function onPluginUnloaded() { updateCategories() }
+        function onPluginListUpdated() { updateCategories() }
+    }
+
+    Connections {
+        target: SettingsData
+        function onSortAppsAlphabeticallyChanged() {
+            updateFilteredModel()
+        }
+    }
+
+
+
     function updateFilteredModel() {
+        if (suppressUpdatesWhileLaunching) {
+            suppressUpdatesWhileLaunching = false
+            return
+        }
         filteredModel.clear()
         selectedIndex = 0
         keyboardNavigationActive = false
-        var apps = []
-        if (searchQuery.length === 0) {
-            if (selectedCategory === "All") {
-                apps = AppSearchService.getAppsInCategory(
-                            "All") // HACK: Use function call instead of property
-            } else {
-                var categoryApps = AppSearchService.getAppsInCategory(
-                            selectedCategory)
-                apps = categoryApps.slice(0, maxResults)
-            }
+
+        const triggerResult = checkPluginTriggers(searchQuery)
+        if (triggerResult.triggered) {
+            console.log("AppLauncher: Plugin trigger detected:", triggerResult.trigger, "for plugin:", triggerResult.pluginId)
+        }
+
+        let apps = []
+        const allCategory = I18n.tr("All")
+        const emptyTriggerPlugins = typeof PluginService !== "undefined" ? PluginService.getPluginsWithEmptyTrigger() : []
+
+        if (triggerResult.triggered) {
+            _isTriggered = true
+            _triggeredCategory = triggerResult.pluginCategory
+            _updatingFromTrigger = true
+            selectedCategory = triggerResult.pluginCategory
+            _updatingFromTrigger = false
+            apps = AppSearchService.getPluginItems(triggerResult.pluginCategory, triggerResult.query)
         } else {
-            if (selectedCategory === "All") {
-                apps = AppSearchService.searchApplications(searchQuery)
-            } else {
-                var categoryApps = AppSearchService.getAppsInCategory(
-                            selectedCategory)
-                if (categoryApps.length > 0) {
-                    var allSearchResults = AppSearchService.searchApplications(
-                                searchQuery)
-                    var categoryNames = new Set(categoryApps.map(app => {
-                                                                     return app.name
-                                                                 }))
-                    apps = allSearchResults.filter(searchApp => {
-                                                       return categoryNames.has(
-                                                           searchApp.name)
-                                                   }).slice(0, maxResults)
+            if (_isTriggered) {
+                _updatingFromTrigger = true
+                selectedCategory = allCategory
+                _updatingFromTrigger = false
+                _isTriggered = false
+                _triggeredCategory = ""
+            }
+            if (searchQuery.length === 0) {
+                if (selectedCategory === allCategory) {
+                    let emptyTriggerItems = []
+                    emptyTriggerPlugins.forEach(pluginId => {
+                        const plugin = PluginService.getLauncherPlugin(pluginId)
+                        const pluginCategory = plugin.name || pluginId
+                        const items = AppSearchService.getPluginItems(pluginCategory, "")
+                        emptyTriggerItems = emptyTriggerItems.concat(items)
+                    })
+                    apps = AppSearchService.applications.concat(emptyTriggerItems)
                 } else {
-                    apps = []
+                    apps = AppSearchService.getAppsInCategory(selectedCategory).slice(0, maxResults)
+                }
+            } else {
+                if (selectedCategory === allCategory) {
+                    apps = AppSearchService.searchApplications(searchQuery)
+
+                    let emptyTriggerItems = []
+                    emptyTriggerPlugins.forEach(pluginId => {
+                        const plugin = PluginService.getLauncherPlugin(pluginId)
+                        const pluginCategory = plugin.name || pluginId
+                        const items = AppSearchService.getPluginItems(pluginCategory, searchQuery)
+                        emptyTriggerItems = emptyTriggerItems.concat(items)
+                    })
+                    apps = apps.concat(emptyTriggerItems)
+                } else {
+                    const categoryApps = AppSearchService.getAppsInCategory(selectedCategory)
+                    if (categoryApps.length > 0) {
+                        const allSearchResults = AppSearchService.searchApplications(searchQuery)
+                        const categoryNames = new Set(categoryApps.map(app => app.name))
+                        apps = allSearchResults.filter(searchApp => categoryNames.has(searchApp.name)).slice(0, maxResults)
+                    } else {
+                        apps = []
+                    }
                 }
             }
         }
-        if (searchQuery.length === 0)
-            apps = apps.sort(function (a, b) {
-                var aId = a.id || (a.execString || a.exec || "")
-                var bId = b.id || (b.execString || b.exec || "")
-                var aUsage = appUsageRanking[aId] ? appUsageRanking[aId].usageCount : 0
-                var bUsage = appUsageRanking[bId] ? appUsageRanking[bId].usageCount : 0
-                if (aUsage !== bUsage)
-                    return bUsage - aUsage
 
-                return (a.name || "").localeCompare(b.name || "")
-            })
+        if (searchQuery.length === 0) {
+            if (SettingsData.sortAppsAlphabetically) {
+                apps = apps.sort((a, b) => {
+                                     return (a.name || "").localeCompare(b.name || "")
+                                 })
+            } else {
+                apps = apps.sort((a, b) => {
+                                     const aId = a.id || a.execString || a.exec || ""
+                                     const bId = b.id || b.execString || b.exec || ""
+                                     const aUsage = appUsageRanking[aId] ? appUsageRanking[aId].usageCount : 0
+                                     const bUsage = appUsageRanking[bId] ? appUsageRanking[bId].usageCount : 0
+                                     if (aUsage !== bUsage) {
+                                         return bUsage - aUsage
+                                     }
+                                     return (a.name || "").localeCompare(b.name || "")
+                                 })
+            }
+        }
 
+        const seenNames = new Set()
+        const uniqueApps = []
         apps.forEach(app => {
-                         if (app)
-                         filteredModel.append({
-                                                  "name": app.name || "",
-                                                  "exec": app.execString || "",
-                                                  "icon": app.icon
-                                                          || "application-x-executable",
-                                                  "comment": app.comment || "",
-                                                  "categories": app.categories
-                                                                || [],
-                                                  "desktopEntry": app
-                                              })
+                         if (app) {
+                             const itemKey = app.name + "|" + (app.execString || app.exec || app.action || "")
+                             if (seenNames.has(itemKey)) {
+                                 return
+                             }
+                             seenNames.add(itemKey)
+                             uniqueApps.push(app)
+
+                             const isPluginItem = app.action !== undefined
+                             filteredModel.append({
+                                                      "name": app.name || "",
+                                                      "exec": app.execString || app.exec || app.action || "",
+                                                      "icon": app.icon !== undefined ? app.icon : (isPluginItem ? "" : "application-x-executable"),
+                                                      "comment": app.comment || "",
+                                                      "categories": app.categories || [],
+                                                      "isPlugin": isPluginItem,
+                                                      "appIndex": uniqueApps.length - 1
+                                                  })
+                         }
                      })
+
+        root._uniqueApps = uniqueApps
     }
 
     function selectNext() {
-        if (filteredModel.count > 0) {
-            keyboardNavigationActive = true
-            if (viewMode === "grid") {
-                var newIndex = Math.min(selectedIndex + gridColumns,
-                                        filteredModel.count - 1)
-                selectedIndex = newIndex
-            } else {
-                selectedIndex = Math.min(selectedIndex + 1,
-                                         filteredModel.count - 1)
-            }
+        if (filteredModel.count === 0) {
+            return
         }
+        keyboardNavigationActive = true
+        selectedIndex = viewMode === "grid" ? Math.min(selectedIndex + gridColumns, filteredModel.count - 1) : Math.min(selectedIndex + 1, filteredModel.count - 1)
     }
 
     function selectPrevious() {
-        if (filteredModel.count > 0) {
-            keyboardNavigationActive = true
-            if (viewMode === "grid") {
-                var newIndex = Math.max(selectedIndex - gridColumns, 0)
-                selectedIndex = newIndex
-            } else {
-                selectedIndex = Math.max(selectedIndex - 1, 0)
-            }
+        if (filteredModel.count === 0) {
+            return
         }
+        keyboardNavigationActive = true
+        selectedIndex = viewMode === "grid" ? Math.max(selectedIndex - gridColumns, 0) : Math.max(selectedIndex - 1, 0)
     }
 
     function selectNextInRow() {
-        if (filteredModel.count > 0 && viewMode === "grid") {
-            keyboardNavigationActive = true
-            selectedIndex = Math.min(selectedIndex + 1, filteredModel.count - 1)
+        if (filteredModel.count === 0 || viewMode !== "grid") {
+            return
         }
+        keyboardNavigationActive = true
+        selectedIndex = Math.min(selectedIndex + 1, filteredModel.count - 1)
     }
 
     function selectPreviousInRow() {
-        if (filteredModel.count > 0 && viewMode === "grid") {
-            keyboardNavigationActive = true
-            selectedIndex = Math.max(selectedIndex - 1, 0)
+        if (filteredModel.count === 0 || viewMode !== "grid") {
+            return
         }
+        keyboardNavigationActive = true
+        selectedIndex = Math.max(selectedIndex - 1, 0)
     }
 
     function launchSelected() {
-        if (filteredModel.count > 0 && selectedIndex >= 0
-                && selectedIndex < filteredModel.count) {
-            var selectedApp = filteredModel.get(selectedIndex)
-            launchApp(selectedApp)
+        if (filteredModel.count === 0 || selectedIndex < 0 || selectedIndex >= filteredModel.count) {
+            return
         }
+        const selectedApp = filteredModel.get(selectedIndex)
+        launchApp(selectedApp)
     }
 
     function launchApp(appData) {
-        if (!appData)
+        if (!appData || typeof appData.appIndex === "undefined" || appData.appIndex < 0 || appData.appIndex >= _uniqueApps.length) {
             return
+        }
+        suppressUpdatesWhileLaunching = true
 
-        appData.desktopEntry.execute()
-        appLaunched(appData)
-        AppUsageHistoryData.addAppUsage(appData.desktopEntry)
+        const actualApp = _uniqueApps[appData.appIndex]
+
+        if (appData.isPlugin) {
+            const pluginId = getPluginIdForItem(actualApp)
+            if (pluginId) {
+                AppSearchService.executePluginItem(actualApp, pluginId)
+                appLaunched(appData)
+                return
+            }
+        } else {
+            SessionService.launchDesktopEntry(actualApp)
+            appLaunched(appData)
+            AppUsageHistoryData.addAppUsage(actualApp)
+        }
     }
 
     function setCategory(category) {
@@ -169,12 +252,18 @@ Item {
     }
 
     onSearchQueryChanged: {
-        if (debounceSearch)
+        if (debounceSearch) {
             searchDebounceTimer.restart()
-        else
+        } else {
             updateFilteredModel()
+        }
+    }
+    onSelectedCategoryChanged: {
+        if (_updatingFromTrigger) {
+            return
+        }
+        updateFilteredModel()
     }
-    onSelectedCategoryChanged: updateFilteredModel()
     onAppUsageRankingChanged: updateFilteredModel()
     on_WatchApplicationsChanged: updateFilteredModel()
     Component.onCompleted: {
@@ -192,4 +281,63 @@ Item {
         repeat: false
         onTriggered: updateFilteredModel()
     }
+
+    // Plugin trigger system functions
+    function checkPluginTriggers(query) {
+        if (!query || typeof PluginService === "undefined") {
+            return { triggered: false, pluginCategory: "", query: "" }
+        }
+
+        const triggers = PluginService.getAllPluginTriggers()
+
+        for (const trigger in triggers) {
+            if (query.startsWith(trigger)) {
+                const pluginId = triggers[trigger]
+                const plugin = PluginService.getLauncherPlugin(pluginId)
+
+                if (plugin) {
+                    const remainingQuery = query.substring(trigger.length).trim()
+                    const result = {
+                        triggered: true,
+                        pluginId: pluginId,
+                        pluginCategory: plugin.name || pluginId,
+                        query: remainingQuery,
+                        trigger: trigger
+                    }
+                    return result
+                }
+            }
+        }
+
+        return { triggered: false, pluginCategory: "", query: "" }
+    }
+
+    function getPluginIdForItem(item) {
+        if (!item || !item.categories || typeof PluginService === "undefined") {
+            return null
+        }
+
+        const launchers = PluginService.getLauncherPlugins()
+        for (const pluginId in launchers) {
+            const plugin = launchers[pluginId]
+            const pluginCategory = plugin.name || pluginId
+
+            let hasCategory = false
+            if (Array.isArray(item.categories)) {
+                hasCategory = item.categories.includes(pluginCategory)
+            } else if (item.categories && typeof item.categories.count !== "undefined") {
+                for (let i = 0; i < item.categories.count; i++) {
+                    if (item.categories.get(i) === pluginCategory) {
+                        hasCategory = true
+                        break
+                    }
+                }
+            }
+
+            if (hasCategory) {
+                return pluginId
+            }
+        }
+        return null
+    }
 }

Modules/AppDrawer/CategorySelector.qml

@@ -1,18 +1,32 @@
 import QtQuick
 import QtQuick.Controls
 import qs.Common
+import qs.Services
 import qs.Widgets
 
 Item {
     id: root
 
     property var categories: []
-    property string selectedCategory: "All"
-    property bool compact: false // For different layout styles
+    property string selectedCategory: I18n.tr("All")
+    property bool compact: false
 
     signal categorySelected(string category)
 
-    height: compact ? 36 : (72 + Theme.spacingS) // Single row vs two rows
+    readonly property int maxCompactItems: 8
+    readonly property int itemHeight: 36
+    readonly property color selectedBorderColor: "transparent"
+    readonly property color unselectedBorderColor: "transparent"
+
+    function handleCategoryClick(category) {
+        categorySelected(category)
+    }
+
+    function getButtonWidth(itemCount, containerWidth) {
+        return itemCount > 0 ? (containerWidth - (itemCount - 1) * Theme.spacingS) / itemCount : 0
+    }
+
+    height: compact ? itemHeight : (itemHeight * 2 + Theme.spacingS)
 
     Row {
         visible: compact
@@ -20,22 +34,15 @@ Item {
         spacing: Theme.spacingS
 
         Repeater {
-            model: categories.slice(0, Math.min(categories.length,
-                                                8)) // Limit for space
+            model: categories ? categories.slice(0, Math.min(categories.length || 0, maxCompactItems)) : []
 
             Rectangle {
-                height: 36
-                width: (parent.width - (Math.min(
-                                            categories.length,
-                                            8) - 1) * Theme.spacingS) / Math.min(
-                           categories.length, 8)
+                property int itemCount: Math.min(categories ? categories.length || 0 : 0, maxCompactItems)
+
+                height: root.itemHeight
+                width: root.getButtonWidth(itemCount, parent.width)
                 radius: Theme.cornerRadius
-                color: selectedCategory === modelData ? Theme.primary : "transparent"
-                border.color: selectedCategory === modelData ? "transparent" : Qt.rgba(
-                                                                   Theme.outline.r,
-                                                                   Theme.outline.g,
-                                                                   Theme.outline.b,
-                                                                   0.3)
+                color: selectedCategory === modelData ? Theme.primary : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
 
                 StyledText {
                     anchors.centerIn: parent
@@ -50,10 +57,7 @@ Item {
                     anchors.fill: parent
                     hoverEnabled: true
                     cursorShape: Qt.PointingHandCursor
-                    onClicked: {
-                        selectedCategory = modelData
-                        categorySelected(modelData)
-                    }
+                    onClicked: root.handleCategoryClick(modelData)
                 }
             }
         }
@@ -65,27 +69,20 @@ Item {
         spacing: Theme.spacingS
 
         Row {
-            property var firstRowCategories: categories.slice(
-                                                 0, Math.min(4,
-                                                             categories.length))
-
             width: parent.width
             spacing: Theme.spacingS
 
             Repeater {
-                model: parent.firstRowCategories
+                model: categories ? categories.slice(0, Math.min(4, categories.length || 0)) : []
 
                 Rectangle {
-                    height: 36
-                    width: (parent.width - (parent.firstRowCategories.length - 1)
-                            * Theme.spacingS) / parent.firstRowCategories.length
+                    property int itemCount: Math.min(4, categories ? categories.length || 0 : 0)
+
+                    height: root.itemHeight
+                    width: root.getButtonWidth(itemCount, parent.width)
                     radius: Theme.cornerRadius
-                    color: selectedCategory === modelData ? Theme.primary : "transparent"
-                    border.color: selectedCategory
-                                  === modelData ? "transparent" : Qt.rgba(
-                                                      Theme.outline.r,
-                                                      Theme.outline.g,
-                                                      Theme.outline.b, 0.3)
+                    color: selectedCategory === modelData ? Theme.primary : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                    border.color: selectedCategory === modelData ? selectedBorderColor : unselectedBorderColor
 
                     StyledText {
                         anchors.centerIn: parent
@@ -100,37 +97,28 @@ Item {
                         anchors.fill: parent
                         hoverEnabled: true
                         cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            selectedCategory = modelData
-                            categorySelected(modelData)
-                        }
+                        onClicked: root.handleCategoryClick(modelData)
                     }
                 }
             }
         }
 
         Row {
-            property var secondRowCategories: categories.slice(
-                                                  4, categories.length)
-
             width: parent.width
             spacing: Theme.spacingS
-            visible: secondRowCategories.length > 0
+            visible: categories && categories.length > 4
 
             Repeater {
-                model: parent.secondRowCategories
+                model: categories && categories.length > 4 ? categories.slice(4) : []
 
                 Rectangle {
-                    height: 36
-                    width: (parent.width - (parent.secondRowCategories.length - 1)
-                            * Theme.spacingS) / parent.secondRowCategories.length
+                    property int itemCount: categories && categories.length > 4 ? categories.length - 4 : 0
+
+                    height: root.itemHeight
+                    width: root.getButtonWidth(itemCount, parent.width)
                     radius: Theme.cornerRadius
-                    color: selectedCategory === modelData ? Theme.primary : "transparent"
-                    border.color: selectedCategory
-                                  === modelData ? "transparent" : Qt.rgba(
-                                                      Theme.outline.r,
-                                                      Theme.outline.g,
-                                                      Theme.outline.b, 0.3)
+                    color: selectedCategory === modelData ? Theme.primary : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                    border.color: selectedCategory === modelData ? selectedBorderColor : unselectedBorderColor
 
                     StyledText {
                         anchors.centerIn: parent
@@ -145,10 +133,7 @@ Item {
                         anchors.fill: parent
                         hoverEnabled: true
                         cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            selectedCategory = modelData
-                            categorySelected(modelData)
-                        }
+                        onClicked: root.handleCategoryClick(modelData)
                     }
                 }
             }

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/CentcomCenter/CalendarGrid.qml

@@ -1,276 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-Column {
-    id: calendarGrid
-
-    property date displayDate: new Date()
-    property date selectedDate: new Date()
-
-    function loadEventsForMonth() {
-        if (!CalendarService || !CalendarService.khalAvailable)
-            return
-
-        let firstDay = new Date(displayDate.getFullYear(),
-                                displayDate.getMonth(), 1)
-        let dayOfWeek = firstDay.getDay()
-        let startDate = new Date(firstDay)
-        startDate.setDate(startDate.getDate(
-                              ) - dayOfWeek - 7) // Extra week padding
-        let lastDay = new Date(displayDate.getFullYear(),
-                               displayDate.getMonth() + 1, 0)
-        let endDate = new Date(lastDay)
-        endDate.setDate(endDate.getDate() + (6 - lastDay.getDay(
-                                                 )) + 7) // Extra week padding
-        CalendarService.loadEvents(startDate, endDate)
-    }
-
-    spacing: Theme.spacingM
-    onDisplayDateChanged: {
-        loadEventsForMonth()
-    }
-    Component.onCompleted: {
-        loadEventsForMonth()
-    }
-
-    Connections {
-        function onKhalAvailableChanged() {
-            if (CalendarService && CalendarService.khalAvailable)
-                loadEventsForMonth()
-        }
-
-        target: CalendarService
-        enabled: CalendarService !== null
-    }
-
-    Row {
-        width: parent.width
-        height: 40
-
-        Rectangle {
-            width: 40
-            height: 40
-            radius: Theme.cornerRadius
-            color: prevMonthArea.containsMouse ? Qt.rgba(Theme.primary.r,
-                                                         Theme.primary.g,
-                                                         Theme.primary.b,
-                                                         0.12) : "transparent"
-
-            DankIcon {
-                anchors.centerIn: parent
-                name: "chevron_left"
-                size: Theme.iconSize
-                color: Theme.primary
-            }
-
-            MouseArea {
-                id: prevMonthArea
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    let newDate = new Date(displayDate)
-                    newDate.setMonth(newDate.getMonth() - 1)
-                    displayDate = newDate
-                }
-            }
-        }
-
-        StyledText {
-            width: parent.width - 80
-            height: 40
-            text: Qt.formatDate(displayDate, "MMMM yyyy")
-            font.pixelSize: Theme.fontSizeLarge
-            color: Theme.surfaceText
-            font.weight: Font.Medium
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-        }
-
-        Rectangle {
-            width: 40
-            height: 40
-            radius: Theme.cornerRadius
-            color: nextMonthArea.containsMouse ? Qt.rgba(Theme.primary.r,
-                                                         Theme.primary.g,
-                                                         Theme.primary.b,
-                                                         0.12) : "transparent"
-
-            DankIcon {
-                anchors.centerIn: parent
-                name: "chevron_right"
-                size: Theme.iconSize
-                color: Theme.primary
-            }
-
-            MouseArea {
-                id: nextMonthArea
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    let newDate = new Date(displayDate)
-                    newDate.setMonth(newDate.getMonth() + 1)
-                    displayDate = newDate
-                }
-            }
-        }
-    }
-
-    Row {
-        width: parent.width
-        height: 32
-
-        Repeater {
-            model: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
-
-            Rectangle {
-                width: parent.width / 7
-                height: 32
-                color: "transparent"
-
-                StyledText {
-                    anchors.centerIn: parent
-                    text: modelData
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g,
-                                   Theme.surfaceText.b, 0.6)
-                    font.weight: Font.Medium
-                }
-            }
-        }
-    }
-
-    Grid {
-        property date firstDay: {
-            let date = new Date(displayDate.getFullYear(),
-                                displayDate.getMonth(), 1)
-            let dayOfWeek = date.getDay()
-            date.setDate(date.getDate() - dayOfWeek)
-            return date
-        }
-
-        width: parent.width
-        height: 200 // Fixed height for calendar
-        columns: 7
-        rows: 6
-
-        Repeater {
-            model: 42
-
-            Rectangle {
-                property date dayDate: {
-                    let date = new Date(parent.firstDay)
-                    date.setDate(date.getDate() + index)
-                    return date
-                }
-                property bool isCurrentMonth: dayDate.getMonth(
-                                                  ) === displayDate.getMonth()
-                property bool isToday: dayDate.toDateString(
-                                           ) === new Date().toDateString()
-                property bool isSelected: dayDate.toDateString(
-                                              ) === selectedDate.toDateString()
-
-                width: parent.width / 7
-                height: parent.height / 6
-                color: "transparent"
-                clip: true
-
-                Rectangle {
-                    anchors.centerIn: parent
-                    width: parent.width - 4
-                    height: parent.height - 4
-                    color: isSelected ? Theme.primary : isToday ? Qt.rgba(
-                                                                      Theme.primary.r,
-                                                                      Theme.primary.g,
-                                                                      Theme.primary.b,
-                                                                      0.12) : dayArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
-                    radius: Theme.cornerRadius
-                    clip: true
-
-                    StyledText {
-                        anchors.centerIn: parent
-                        text: dayDate.getDate()
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: isSelected ? Theme.surface : isToday ? Theme.primary : isCurrentMonth ? Theme.surfaceText : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.4)
-                        font.weight: isToday
-                                     || isSelected ? Font.Medium : Font.Normal
-                    }
-
-                    Rectangle {
-                        id: eventIndicator
-
-                        anchors.fill: parent
-                        radius: parent.radius
-                        visible: CalendarService
-                                 && CalendarService.khalAvailable
-                                 && CalendarService.hasEventsForDate(dayDate)
-                        opacity: {
-                            if (isSelected)
-                                return 0.9
-                            else if (isToday)
-                                return 0.8
-                            else
-                                return 0.6
-                        }
-
-                        gradient: Gradient {
-                            GradientStop {
-                                position: 0.89
-                                color: "transparent"
-                            }
-
-                            GradientStop {
-                                position: 0.9
-                                color: {
-                                    if (isSelected)
-                                        return Qt.lighter(Theme.primary, 1.3)
-                                    else if (isToday)
-                                        return Theme.primary
-                                    else
-                                        return Theme.primary
-                                }
-                            }
-
-                            GradientStop {
-                                position: 1
-                                color: {
-                                    if (isSelected)
-                                        return Qt.lighter(Theme.primary, 1.3)
-                                    else if (isToday)
-                                        return Theme.primary
-                                    else
-                                        return Theme.primary
-                                }
-                            }
-                        }
-
-                        Behavior on opacity {
-                            NumberAnimation {
-                                duration: Theme.shortDuration
-                                easing.type: Theme.standardEasing
-                            }
-                        }
-                    }
-                }
-
-                MouseArea {
-                    id: dayArea
-
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
-                    onClicked: {
-                        selectedDate = dayDate
-                    }
-                }
-            }
-        }
-    }
-}

Modules/CentcomCenter/CentcomPopout.qml

@@ -1,326 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
-import Quickshell
-import Quickshell.Services.Mpris
-import Quickshell.Wayland
-import Quickshell.Widgets
-import qs.Common
-import qs.Modules.CentcomCenter
-import qs.Services
-
-PanelWindow {
-    id: root
-
-    readonly property bool hasActiveMedia: MprisController.activePlayer !== null
-    property bool calendarVisible: false
-    property bool shouldBeVisible: false
-    property real triggerX: (Screen.width - 480) / 2
-    property real triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + 4
-    property real triggerWidth: 80
-    property string triggerSection: "center"
-    property var triggerScreen: null
-
-    function setTriggerPosition(x, y, width, section, screen) {
-        triggerX = x
-        triggerY = y
-        triggerWidth = width
-        triggerSection = section
-        triggerScreen = screen
-    }
-
-    visible: calendarVisible || closeTimer.running
-    screen: triggerScreen
-    onCalendarVisibleChanged: {
-        if (calendarVisible) {
-            closeTimer.stop()
-            shouldBeVisible = true
-            visible = true
-            Qt.callLater(() => {
-                             calendarGrid.loadEventsForMonth()
-                         })
-        } else {
-            shouldBeVisible = false
-            closeTimer.restart()
-        }
-    }
-
-    Timer {
-        id: closeTimer
-        interval: Theme.mediumDuration + 50
-        onTriggered: {
-            if (!shouldBeVisible) {
-                visible = false
-            }
-        }
-    }
-    onVisibleChanged: {
-        if (visible && calendarGrid)
-            calendarGrid.loadEventsForMonth()
-    }
-    implicitWidth: 480
-    implicitHeight: 600
-    WlrLayershell.layer: WlrLayershell.Overlay
-    WlrLayershell.exclusiveZone: -1
-    WlrLayershell.keyboardFocus: shouldBeVisible ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
-    color: "transparent"
-
-    anchors {
-        top: true
-        left: true
-        right: true
-        bottom: true
-    }
-
-    Rectangle {
-        id: mainContainer
-
-        readonly property real targetWidth: Math.min(
-                                                (root.screen ? root.screen.width : Screen.width)
-                                                * 0.9, 600)
-
-        function calculateWidth() {
-            let baseWidth = 320
-            if (leftWidgets.hasAnyWidgets)
-                return Math.min(parent.width * 0.9, 600)
-
-            return Math.min(parent.width * 0.7, 400)
-        }
-
-        function calculateHeight() {
-            let contentHeight = Theme.spacingM * 2
-            // margins
-            let widgetHeight = 160
-            widgetHeight += 140 + Theme.spacingM
-            let calendarHeight = 300
-            let mainRowHeight = Math.max(widgetHeight, calendarHeight)
-            contentHeight += mainRowHeight + Theme.spacingM
-            if (CalendarService && CalendarService.khalAvailable) {
-                let hasEvents = events.selectedDateEvents
-                    && events.selectedDateEvents.length > 0
-                let eventsHeight = hasEvents ? Math.min(
-                                                   300,
-                                                   80 + events.selectedDateEvents.length * 60) : 120
-                contentHeight += eventsHeight
-            } else {
-                contentHeight -= Theme.spacingM
-            }
-            return Math.min(contentHeight, parent.height * 0.9)
-        }
-
-        readonly property real calculatedX: {
-            var screenWidth = root.screen ? root.screen.width : Screen.width
-            if (root.triggerSection === "center") {
-                return (screenWidth - targetWidth) / 2
-            }
-
-            var centerX = root.triggerX + (root.triggerWidth / 2) - (targetWidth / 2)
-
-            if (centerX >= Theme.spacingM
-                    && centerX + targetWidth <= screenWidth - Theme.spacingM) {
-                return centerX
-            }
-
-            if (centerX < Theme.spacingM) {
-                return Theme.spacingM
-            }
-
-            if (centerX + targetWidth > screenWidth - Theme.spacingM) {
-                return screenWidth - targetWidth - Theme.spacingM
-            }
-
-            return centerX
-        }
-
-        width: targetWidth
-        height: calculateHeight()
-        color: Theme.surfaceContainer
-        radius: Theme.cornerRadius
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                              Theme.outline.b, 0.08)
-        border.width: 1
-        layer.enabled: true
-        opacity: shouldBeVisible ? 1 : 0
-        scale: shouldBeVisible ? 1 : 0.9
-        x: calculatedX
-        y: root.triggerY
-        onOpacityChanged: {
-            if (opacity === 1)
-                Qt.callLater(() => {
-                                 height = calculateHeight()
-                             })
-        }
-
-        Connections {
-            function onEventsByDateChanged() {
-                if (mainContainer.opacity === 1)
-                    mainContainer.height = mainContainer.calculateHeight()
-            }
-
-            function onKhalAvailableChanged() {
-                if (mainContainer.opacity === 1)
-                    mainContainer.height = mainContainer.calculateHeight()
-            }
-
-            target: CalendarService
-            enabled: CalendarService !== null
-        }
-
-        Connections {
-            function onSelectedDateEventsChanged() {
-                if (mainContainer.opacity === 1)
-                    mainContainer.height = mainContainer.calculateHeight()
-            }
-
-            target: events
-            enabled: events !== null
-        }
-
-        Rectangle {
-            anchors.fill: parent
-            color: Qt.rgba(Theme.surfaceTint.r, Theme.surfaceTint.g,
-                           Theme.surfaceTint.b, 0.04)
-            radius: parent.radius
-
-            SequentialAnimation on opacity {
-                running: shouldBeVisible
-                loops: Animation.Infinite
-
-                NumberAnimation {
-                    to: 0.08
-                    duration: Theme.extraLongDuration
-                    easing.type: Theme.standardEasing
-                }
-
-                NumberAnimation {
-                    to: 0.02
-                    duration: Theme.extraLongDuration
-                    easing.type: Theme.standardEasing
-                }
-            }
-        }
-
-        Column {
-            anchors.fill: parent
-            anchors.margins: Theme.spacingM
-            spacing: Theme.spacingM
-            focus: true
-            Keys.onPressed: function (event) {
-                if (event.key === Qt.Key_Escape) {
-                    calendarVisible = false
-                    event.accepted = true
-                } else {
-                    // Don't handle other keys - let them bubble up to modals
-                    event.accepted = false
-                }
-            }
-
-            Row {
-                width: parent.width
-                height: {
-                    let widgetHeight = 160
-                    // Media widget
-                    widgetHeight += 140 + Theme.spacingM // Weather/SystemInfo widget with spacing
-                    let calendarHeight = 300
-                    // Calendar
-                    return Math.max(widgetHeight, calendarHeight)
-                }
-                spacing: Theme.spacingM
-
-                Column {
-                    id: leftWidgets
-
-                    property bool hasAnyWidgets: true
-
-                    width: hasAnyWidgets ? parent.width
-                                           * 0.42 : 0 // Slightly narrower for better proportions
-                    height: childrenRect.height
-                    spacing: Theme.spacingM
-                    visible: hasAnyWidgets
-                    anchors.top: parent.top
-
-                    MediaPlayer {
-                        width: parent.width
-                        height: 160
-                    }
-
-                    Weather {
-                        width: parent.width
-                        height: 140
-                        visible: SettingsData.weatherEnabled
-                    }
-
-                    SystemInfo {
-                        width: parent.width
-                        height: 140
-                        visible: !SettingsData.weatherEnabled
-                    }
-                }
-
-                Rectangle {
-                    width: leftWidgets.hasAnyWidgets ? parent.width - leftWidgets.width
-                                                       - Theme.spacingM : parent.width
-                    height: parent.height
-                    radius: Theme.cornerRadius
-                    color: Qt.rgba(Theme.surfaceVariant.r,
-                                   Theme.surfaceVariant.g,
-                                   Theme.surfaceVariant.b, 0.2)
-                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                                          Theme.outline.b, 0.08)
-                    border.width: 1
-
-                    CalendarGrid {
-                        id: calendarGrid
-
-                        anchors.fill: parent
-                        anchors.margins: Theme.spacingS
-                    }
-                }
-            }
-
-            Events {
-                id: events
-
-                width: parent.width
-                selectedDate: calendarGrid.selectedDate
-            }
-        }
-
-        Behavior on opacity {
-            NumberAnimation {
-                duration: Anims.durMed
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Anims.emphasized
-            }
-        }
-
-        Behavior on scale {
-            NumberAnimation {
-                duration: Anims.durMed
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Anims.emphasized
-            }
-        }
-
-        layer.effect: MultiEffect {
-            shadowEnabled: true
-            shadowHorizontalOffset: 0
-            shadowVerticalOffset: 4
-            shadowBlur: 0.5
-            shadowColor: Qt.rgba(0, 0, 0, 0.15)
-            shadowOpacity: 0.15
-        }
-    }
-
-    MouseArea {
-        anchors.fill: parent
-        z: -1
-        enabled: shouldBeVisible
-        onClicked: function (mouse) {
-            var localPos = mapToItem(mainContainer, mouse.x, mouse.y)
-            if (localPos.x < 0 || localPos.x > mainContainer.width
-                    || localPos.y < 0 || localPos.y > mainContainer.height)
-                calendarVisible = false
-        }
-    }
-}

Modules/CentcomCenter/Events.qml

@@ -1,353 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-Rectangle {
-    id: events
-
-    property date selectedDate: new Date()
-    property var selectedDateEvents: []
-    property bool hasEvents: selectedDateEvents && selectedDateEvents.length > 0
-    property bool shouldShow: CalendarService && CalendarService.khalAvailable
-
-    function updateSelectedDateEvents() {
-        if (CalendarService && CalendarService.khalAvailable) {
-            let events = CalendarService.getEventsForDate(selectedDate)
-            selectedDateEvents = events
-        } else {
-            selectedDateEvents = []
-        }
-    }
-
-    onSelectedDateEventsChanged: {
-        eventsList.model = selectedDateEvents
-    }
-    width: parent.width
-    height: shouldShow ? (hasEvents ? Math.min(
-                                          300,
-                                          80 + selectedDateEvents.length * 60) : 120) : 0
-    radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
-                   Theme.surfaceVariant.b, 0.12)
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                          Theme.outline.b, 0.08)
-    border.width: 1
-    visible: shouldShow
-    layer.enabled: true
-    Component.onCompleted: {
-        updateSelectedDateEvents()
-    }
-    onSelectedDateChanged: {
-        updateSelectedDateEvents()
-    }
-
-    Connections {
-        function onEventsByDateChanged() {
-            updateSelectedDateEvents()
-        }
-
-        function onKhalAvailableChanged() {
-            updateSelectedDateEvents()
-        }
-
-        target: CalendarService
-        enabled: CalendarService !== null
-    }
-
-    Row {
-        id: headerRow
-
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.margins: Theme.spacingL
-        spacing: Theme.spacingS
-
-        DankIcon {
-            name: "event"
-            size: Theme.iconSize - 2
-            color: Theme.primary
-            anchors.verticalCenter: parent.verticalCenter
-        }
-
-        StyledText {
-            text: hasEvents ? (Qt.formatDate(selectedDate, "MMM d") + " • "
-                               + (selectedDateEvents.length
-                                  === 1 ? "1 event" : selectedDateEvents.length
-                                          + " events")) : Qt.formatDate(
-                                  selectedDate, "MMM d")
-            font.pixelSize: Theme.fontSizeMedium
-            color: Theme.surfaceText
-            font.weight: Font.Medium
-            anchors.verticalCenter: parent.verticalCenter
-        }
-    }
-
-    Column {
-        anchors.centerIn: parent
-        spacing: Theme.spacingXS
-        visible: !hasEvents
-
-        DankIcon {
-            name: "event_busy"
-            size: Theme.iconSize + 8
-            color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g,
-                           Theme.surfaceText.b, 0.3)
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        StyledText {
-            text: "No events"
-            font.pixelSize: Theme.fontSizeMedium
-            color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g,
-                           Theme.surfaceText.b, 0.5)
-            font.weight: Font.Normal
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-    }
-
-    DankListView {
-        id: eventsList
-
-        anchors.top: headerRow.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        anchors.margins: Theme.spacingL
-        anchors.topMargin: Theme.spacingM
-        visible: opacity > 0
-        opacity: hasEvents ? 1 : 0
-        clip: true
-        spacing: Theme.spacingS
-        boundsBehavior: Flickable.StopAtBounds
-
-        // Qt 6.9+ scrolling: flickDeceleration/maximumFlickVelocity only affect touch now
-        interactive: true
-        flickDeceleration: 1500
-        maximumFlickVelocity: 2000
-        boundsMovement: Flickable.FollowBoundsBehavior
-        pressDelay: 0
-        flickableDirection: Flickable.VerticalFlick
-
-        // Custom wheel handler for Qt 6.9+ responsive mouse wheel scrolling
-        WheelHandler {
-            acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
-            property real momentum: 0
-            onWheel: event => {
-                         if (event.pixelDelta.y !== 0) {
-                             // Touchpad with pixel delta
-                             momentum = event.pixelDelta.y * 1.8
-                         } else {
-                             // Mouse wheel with angle delta
-                             momentum = (event.angleDelta.y / 120)
-                             * (60 * 2.5) // ~2.5 items per wheel step
-                         }
-
-                         let newY = parent.contentY - momentum
-                         newY = Math.max(
-                             0, Math.min(parent.contentHeight - parent.height,
-                                         newY))
-                         parent.contentY = newY
-                         momentum *= 0.92 // Decay for smooth momentum
-                         event.accepted = true
-                     }
-        }
-
-        ScrollBar.vertical: ScrollBar {
-            policy: eventsList.contentHeight
-                    > eventsList.height ? ScrollBar.AsNeeded : ScrollBar.AlwaysOff
-        }
-
-        Behavior on opacity {
-            NumberAnimation {
-                duration: Theme.mediumDuration
-                easing.type: Theme.emphasizedEasing
-            }
-        }
-
-        delegate: Rectangle {
-            width: eventsList.width
-            height: eventContent.implicitHeight + Theme.spacingM
-            radius: Theme.cornerRadius
-            color: {
-                if (modelData.url && eventMouseArea.containsMouse)
-                    return Qt.rgba(Theme.primary.r, Theme.primary.g,
-                                   Theme.primary.b, 0.12)
-                else if (eventMouseArea.containsMouse)
-                    return Qt.rgba(Theme.primary.r, Theme.primary.g,
-                                   Theme.primary.b, 0.06)
-                return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
-                               Theme.surfaceVariant.b, 0.06)
-            }
-            border.color: {
-                if (modelData.url && eventMouseArea.containsMouse)
-                    return Qt.rgba(Theme.primary.r, Theme.primary.g,
-                                   Theme.primary.b, 0.3)
-                else if (eventMouseArea.containsMouse)
-                    return Qt.rgba(Theme.primary.r, Theme.primary.g,
-                                   Theme.primary.b, 0.15)
-                return "transparent"
-            }
-            border.width: 1
-
-            Rectangle {
-                width: 4
-                height: parent.height - 8
-                anchors.left: parent.left
-                anchors.leftMargin: 4
-                anchors.verticalCenter: parent.verticalCenter
-                radius: 2
-                color: Theme.primary
-                opacity: 0.8
-            }
-
-            Column {
-                id: eventContent
-
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.leftMargin: Theme.spacingL + 4
-                anchors.rightMargin: Theme.spacingM
-                spacing: 6
-
-                StyledText {
-                    width: parent.width
-                    text: modelData.title
-                    font.pixelSize: Theme.fontSizeMedium
-                    color: Theme.surfaceText
-                    font.weight: Font.Medium
-                    elide: Text.ElideRight
-                    wrapMode: Text.Wrap
-                    maximumLineCount: 2
-                }
-
-                Item {
-                    width: parent.width
-                    height: Math.max(timeRow.height, locationRow.height)
-
-                    Row {
-                        id: timeRow
-
-                        spacing: 4
-                        anchors.left: parent.left
-                        anchors.verticalCenter: parent.verticalCenter
-
-                        DankIcon {
-                            name: "schedule"
-                            size: Theme.fontSizeSmall
-                            color: Qt.rgba(Theme.surfaceText.r,
-                                           Theme.surfaceText.g,
-                                           Theme.surfaceText.b, 0.7)
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-
-                        StyledText {
-                            text: {
-                                if (modelData.allDay) {
-                                    return "All day"
-                                } else {
-                                    let timeFormat = SettingsData.use24HourClock ? "H:mm" : "h:mm AP"
-                                    let startTime = Qt.formatTime(
-                                            modelData.start, timeFormat)
-                                    if (modelData.start.toDateString(
-                                                ) !== modelData.end.toDateString(
-                                                ) || modelData.start.getTime(
-                                                ) !== modelData.end.getTime())
-                                        return startTime + " – " + Qt.formatTime(
-                                                    modelData.end, timeFormat)
-
-                                    return startTime
-                                }
-                            }
-                            font.pixelSize: Theme.fontSizeSmall
-                            color: Qt.rgba(Theme.surfaceText.r,
-                                           Theme.surfaceText.g,
-                                           Theme.surfaceText.b, 0.7)
-                            font.weight: Font.Normal
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-                    }
-
-                    Row {
-                        id: locationRow
-
-                        spacing: 4
-                        anchors.right: parent.right
-                        anchors.verticalCenter: parent.verticalCenter
-                        visible: modelData.location !== ""
-
-                        DankIcon {
-                            name: "location_on"
-                            size: Theme.fontSizeSmall
-                            color: Qt.rgba(Theme.surfaceText.r,
-                                           Theme.surfaceText.g,
-                                           Theme.surfaceText.b, 0.7)
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-
-                        StyledText {
-                            text: modelData.location
-                            font.pixelSize: Theme.fontSizeSmall
-                            color: Qt.rgba(Theme.surfaceText.r,
-                                           Theme.surfaceText.g,
-                                           Theme.surfaceText.b, 0.7)
-                            elide: Text.ElideRight
-                            anchors.verticalCenter: parent.verticalCenter
-                            maximumLineCount: 1
-                            width: Math.min(implicitWidth, 200)
-                        }
-                    }
-                }
-            }
-
-            MouseArea {
-                id: eventMouseArea
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: modelData.url ? Qt.PointingHandCursor : Qt.ArrowCursor
-                enabled: modelData.url !== ""
-                onClicked: {
-                    if (modelData.url && modelData.url !== "") {
-                        if (Qt.openUrlExternally(modelData.url) === false)
-                            console.warn("Failed to open URL: " + modelData.url)
-                    }
-                }
-            }
-
-            Behavior on color {
-                ColorAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
-            }
-
-            Behavior on border.color {
-                ColorAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
-            }
-        }
-    }
-
-    layer.effect: MultiEffect {
-        shadowEnabled: true
-        shadowHorizontalOffset: 0
-        shadowVerticalOffset: 2
-        shadowBlur: 0.25
-        shadowColor: Qt.rgba(0, 0, 0, 0.1)
-        shadowOpacity: 0.1
-    }
-
-    Behavior on height {
-        NumberAnimation {
-            duration: Theme.mediumDuration
-            easing.type: Theme.emphasizedEasing
-        }
-    }
-}

Modules/CentcomCenter/MediaPlayer.qml

@@ -1,471 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
-import Quickshell
-import Quickshell.Services.Mpris
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-Rectangle {
-    id: mediaPlayer
-
-    property MprisPlayer activePlayer: MprisController.activePlayer
-    property string lastValidTitle: ""
-    property string lastValidArtist: ""
-    property string lastValidAlbum: ""
-    property string lastValidArtUrl: ""
-    property real currentPosition: activePlayer
-                                   && activePlayer.positionSupported ? activePlayer.position : 0
-
-    function ratio() {
-        if (!activePlayer || activePlayer.length <= 0) {
-            return 0
-        }
-        let calculatedRatio = currentPosition / activePlayer.length
-        return Math.max(0, Math.min(1, calculatedRatio))
-    }
-
-    onActivePlayerChanged: {
-        if (activePlayer && activePlayer.positionSupported) {
-            activePlayer.positionChanged()
-        }
-    }
-    width: parent.width
-    height: parent.height
-    radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g,
-                   Theme.surfaceContainer.b, 0.4)
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                          Theme.outline.b, 0.08)
-    border.width: 1
-    layer.enabled: true
-
-    Timer {
-        id: positionTimer
-
-        interval: 500
-        running: activePlayer
-                 && activePlayer.playbackState === MprisPlaybackState.Playing
-                 && !progressMouseArea.isSeeking
-        repeat: true
-        onTriggered: {
-            if (activePlayer && activePlayer.positionSupported) {
-                activePlayer.positionChanged()
-            }
-        }
-    }
-
-    Timer {
-        id: cleanupTimer
-
-        interval: 2000
-        running: !activePlayer
-        onTriggered: {
-            lastValidTitle = ""
-            lastValidArtist = ""
-            lastValidAlbum = ""
-            lastValidArtUrl = ""
-            currentPosition = 0
-            stop()
-        }
-    }
-
-    Connections {
-        function onTrackChanged() {
-            if (activePlayer && activePlayer.positionSupported) {
-                activePlayer.positionChanged()
-            }
-        }
-
-        target: activePlayer
-    }
-
-    Item {
-        anchors.fill: parent
-        anchors.margins: Theme.spacingS
-
-        Column {
-            anchors.centerIn: parent
-            spacing: Theme.spacingS
-            visible: (!activePlayer && !lastValidTitle)
-                     || (activePlayer && activePlayer.trackTitle === ""
-                         && lastValidTitle === "")
-
-            DankIcon {
-                name: "music_note"
-                size: Theme.iconSize + 8
-                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g,
-                               Theme.surfaceText.b, 0.5)
-                anchors.horizontalCenter: parent.horizontalCenter
-            }
-
-            StyledText {
-                text: "No Media Playing"
-                font.pixelSize: Theme.fontSizeMedium
-                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g,
-                               Theme.surfaceText.b, 0.7)
-                anchors.horizontalCenter: parent.horizontalCenter
-            }
-        }
-
-        Column {
-            anchors.fill: parent
-            spacing: Theme.spacingS
-            visible: activePlayer && activePlayer.trackTitle !== ""
-                     || lastValidTitle !== ""
-
-            Row {
-                width: parent.width
-                height: 60
-                spacing: Theme.spacingM
-
-                Rectangle {
-                    width: 60
-                    height: 60
-                    radius: Theme.cornerRadius
-                    color: Qt.rgba(Theme.surfaceVariant.r,
-                                   Theme.surfaceVariant.g,
-                                   Theme.surfaceVariant.b, 0.3)
-
-                    Item {
-                        anchors.fill: parent
-                        clip: true
-
-                        Image {
-                            id: albumArt
-
-                            anchors.fill: parent
-                            source: activePlayer && activePlayer.trackArtUrl
-                                    || lastValidArtUrl || ""
-                            onSourceChanged: {
-                                if (activePlayer && activePlayer.trackArtUrl)
-                                    lastValidArtUrl = activePlayer.trackArtUrl
-                            }
-                            fillMode: Image.PreserveAspectCrop
-                            smooth: true
-                            cache: true
-                        }
-
-                        Rectangle {
-                            anchors.fill: parent
-                            visible: albumArt.status !== Image.Ready
-                            color: "transparent"
-
-                            DankIcon {
-                                anchors.centerIn: parent
-                                name: "album"
-                                size: 28
-                                color: Theme.surfaceVariantText
-                            }
-                        }
-                    }
-                }
-
-                Column {
-                    width: parent.width - 60 - Theme.spacingM
-                    height: parent.height
-                    spacing: Theme.spacingXS
-
-                    StyledText {
-                        text: activePlayer && activePlayer.trackTitle
-                              || lastValidTitle || "Unknown Track"
-                        onTextChanged: {
-                            if (activePlayer && activePlayer.trackTitle)
-                                lastValidTitle = activePlayer.trackTitle
-                        }
-                        font.pixelSize: Theme.fontSizeMedium
-                        font.weight: Font.Bold
-                        color: Theme.surfaceText
-                        width: parent.width
-                        elide: Text.ElideRight
-                        wrapMode: Text.NoWrap
-                        maximumLineCount: 1
-                    }
-
-                    StyledText {
-                        text: activePlayer && activePlayer.trackArtist
-                              || lastValidArtist || "Unknown Artist"
-                        onTextChanged: {
-                            if (activePlayer && activePlayer.trackArtist)
-                                lastValidArtist = activePlayer.trackArtist
-                        }
-                        font.pixelSize: Theme.fontSizeSmall
-                        color: Qt.rgba(Theme.surfaceText.r,
-                                       Theme.surfaceText.g,
-                                       Theme.surfaceText.b, 0.8)
-                        width: parent.width
-                        elide: Text.ElideRight
-                        wrapMode: Text.NoWrap
-                        maximumLineCount: 1
-                    }
-
-                    StyledText {
-                        text: activePlayer && activePlayer.trackAlbum
-                              || lastValidAlbum || ""
-                        onTextChanged: {
-                            if (activePlayer && activePlayer.trackAlbum)
-                                lastValidAlbum = activePlayer.trackAlbum
-                        }
-                        font.pixelSize: Theme.fontSizeSmall
-                        color: Qt.rgba(Theme.surfaceText.r,
-                                       Theme.surfaceText.g,
-                                       Theme.surfaceText.b, 0.6)
-                        width: parent.width
-                        elide: Text.ElideRight
-                        wrapMode: Text.NoWrap
-                        maximumLineCount: 1
-                        visible: text.length > 0
-                    }
-                }
-            }
-
-            Item {
-                id: progressBarContainer
-
-                width: parent.width
-                height: 24
-
-                Rectangle {
-                    id: progressBarBackground
-
-                    width: parent.width
-                    height: 6
-                    radius: 3
-                    color: Qt.rgba(Theme.surfaceVariant.r,
-                                   Theme.surfaceVariant.g,
-                                   Theme.surfaceVariant.b, 0.3)
-                    visible: activePlayer !== null
-                    anchors.verticalCenter: parent.verticalCenter
-
-                    Rectangle {
-                        id: progressFill
-
-                        height: parent.height
-                        radius: parent.radius
-                        color: Theme.primary
-                        width: Math.max(0, Math.min(parent.width,
-                                                    parent.width * ratio()))
-
-                        Behavior on width {
-                            NumberAnimation {
-                                duration: 100
-                            }
-                        }
-                    }
-
-                    Rectangle {
-                        id: progressHandle
-
-                        width: 12
-                        height: 12
-                        radius: 6
-                        color: Theme.primary
-                        border.color: Qt.lighter(Theme.primary, 1.3)
-                        border.width: 1
-                        x: Math.max(0, Math.min(parent.width - width,
-                                                progressFill.width - width / 2))
-                        anchors.verticalCenter: parent.verticalCenter
-                        visible: activePlayer && activePlayer.length > 0
-                        scale: progressMouseArea.containsMouse
-                               || progressMouseArea.pressed ? 1.2 : 1
-
-                        Behavior on scale {
-                            NumberAnimation {
-                                duration: 150
-                            }
-                        }
-                    }
-                }
-
-                MouseArea {
-                    id: progressMouseArea
-
-                    property bool isSeeking: false
-
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
-                    enabled: activePlayer && activePlayer.length > 0
-                             && activePlayer.canSeek
-                    preventStealing: true
-                    onPressed: function (mouse) {
-                        isSeeking = true
-                        if (activePlayer && activePlayer.length > 0
-                                && activePlayer.canSeek) {
-                            let ratio = Math.max(
-                                    0, Math.min(
-                                        1,
-                                        mouse.x / progressBarBackground.width))
-                            let seekPosition = ratio * activePlayer.length
-                            activePlayer.position = seekPosition
-                        }
-                    }
-                    onReleased: {
-                        isSeeking = false
-                    }
-                    onPositionChanged: function (mouse) {
-                        if (pressed && isSeeking && activePlayer
-                                && activePlayer.length > 0
-                                && activePlayer.canSeek) {
-                            let ratio = Math.max(
-                                    0, Math.min(
-                                        1,
-                                        mouse.x / progressBarBackground.width))
-                            let seekPosition = ratio * activePlayer.length
-                            activePlayer.position = seekPosition
-                        }
-                    }
-                    onClicked: function (mouse) {
-                        if (activePlayer && activePlayer.length > 0
-                                && activePlayer.canSeek) {
-                            let ratio = Math.max(
-                                    0, Math.min(
-                                        1,
-                                        mouse.x / progressBarBackground.width))
-                            let seekPosition = ratio * activePlayer.length
-                            activePlayer.position = seekPosition
-                        }
-                    }
-                }
-
-                MouseArea {
-                    id: progressGlobalMouseArea
-
-                    x: 0
-                    y: 0
-                    width: mediaPlayer.width
-                    height: mediaPlayer.height
-                    enabled: progressMouseArea.isSeeking
-                    visible: false
-                    preventStealing: true
-                    onPositionChanged: function (mouse) {
-                        if (progressMouseArea.isSeeking && activePlayer
-                                && activePlayer.length > 0
-                                && activePlayer.canSeek) {
-                            let globalPos = mapToItem(progressBarBackground,
-                                                      mouse.x, mouse.y)
-                            let ratio = Math.max(
-                                    0, Math.min(
-                                        1,
-                                        globalPos.x / progressBarBackground.width))
-                            let seekPosition = ratio * activePlayer.length
-                            activePlayer.position = seekPosition
-                        }
-                    }
-                    onReleased: {
-                        progressMouseArea.isSeeking = false
-                    }
-                }
-            }
-
-            Item {
-                width: parent.width
-                height: 32
-                visible: activePlayer !== null
-
-                Row {
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    spacing: Theme.spacingM
-                    height: parent.height
-
-                    Rectangle {
-                        width: 28
-                        height: 28
-                        radius: 14
-                        color: prevBtnArea.containsMouse ? Qt.rgba(
-                                                               Theme.surfaceVariant.r,
-                                                               Theme.surfaceVariant.g,
-                                                               Theme.surfaceVariant.b,
-                                                               0.12) : "transparent"
-
-                        DankIcon {
-                            anchors.centerIn: parent
-                            name: "skip_previous"
-                            size: 16
-                            color: Theme.surfaceText
-                        }
-
-                        MouseArea {
-                            id: prevBtnArea
-
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                if (!activePlayer)
-                                    return
-
-                                if (activePlayer.position > 8
-                                        && activePlayer.canSeek) {
-                                    activePlayer.position = 0
-                                } else {
-                                    activePlayer.previous()
-                                }
-                            }
-                        }
-                    }
-
-                    Rectangle {
-                        width: 32
-                        height: 32
-                        radius: 16
-                        color: Theme.primary
-
-                        DankIcon {
-                            anchors.centerIn: parent
-                            name: activePlayer && activePlayer.playbackState
-                                  === MprisPlaybackState.Playing ? "pause" : "play_arrow"
-                            size: 20
-                            color: Theme.background
-                        }
-
-                        MouseArea {
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: activePlayer
-                                       && activePlayer.togglePlaying()
-                        }
-                    }
-
-                    Rectangle {
-                        width: 28
-                        height: 28
-                        radius: 14
-                        color: nextBtnArea.containsMouse ? Qt.rgba(
-                                                               Theme.surfaceVariant.r,
-                                                               Theme.surfaceVariant.g,
-                                                               Theme.surfaceVariant.b,
-                                                               0.12) : "transparent"
-
-                        DankIcon {
-                            anchors.centerIn: parent
-                            name: "skip_next"
-                            size: 16
-                            color: Theme.surfaceText
-                        }
-
-                        MouseArea {
-                            id: nextBtnArea
-
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: activePlayer && activePlayer.next()
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    layer.effect: MultiEffect {
-        shadowEnabled: true
-        shadowHorizontalOffset: 0
-        shadowVerticalOffset: 2
-        shadowBlur: 0.5
-        shadowColor: Qt.rgba(0, 0, 0, 0.1)
-        shadowOpacity: 0.1
-    }
-}

Modules/CentcomCenter/SystemInfo.qml

@@ -1,137 +0,0 @@
-import QtQuick
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-Rectangle {
-    id: root
-
-    radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g,
-                   Theme.surfaceContainer.b, 0.4)
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                          Theme.outline.b, 0.08)
-    border.width: 1
-
-    Ref {
-        service: DgopService
-    }
-
-    Column {
-        anchors.fill: parent
-        anchors.margins: Theme.spacingM
-        spacing: Theme.spacingS
-
-        Row {
-            width: parent.width
-            spacing: Theme.spacingM
-
-            SystemLogo {
-                width: 48
-                height: 48
-            }
-
-            Column {
-                width: parent.width - 48 - Theme.spacingM
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Theme.spacingXS
-
-                StyledText {
-                    text: DgopService.hostname
-                    font.pixelSize: Theme.fontSizeLarge
-                    font.weight: Font.Medium
-                    color: Theme.surfaceText
-                    width: parent.width
-                    elide: Text.ElideRight
-                }
-
-                StyledText {
-                    text: DgopService.distribution + " • " + DgopService.architecture
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g,
-                                   Theme.surfaceText.b, 0.7)
-                    width: parent.width
-                    elide: Text.ElideRight
-                }
-            }
-        }
-
-        Rectangle {
-            width: parent.width
-            height: 1
-            color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                           Theme.outline.b, 0.1)
-        }
-
-        Column {
-            width: parent.width
-            spacing: Theme.spacingXS
-
-            StyledText {
-                text: "Uptime " + formatUptime(UserInfoService.uptime)
-                font.pixelSize: Theme.fontSizeSmall
-                color: Theme.surfaceText
-                width: parent.width
-                elide: Text.ElideRight
-            }
-
-            StyledText {
-                text: "Load: " + DgopService.loadAverage
-                font.pixelSize: Theme.fontSizeSmall
-                color: Theme.surfaceText
-                width: parent.width
-                elide: Text.ElideRight
-            }
-
-            StyledText {
-                text: DgopService.processCount + " proc, " + DgopService.threadCount + " threads"
-                font.pixelSize: Theme.fontSizeSmall
-                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g,
-                               Theme.surfaceText.b, 0.8)
-                width: parent.width
-                elide: Text.ElideRight
-            }
-        }
-    }
-
-    function formatUptime(uptime) {
-        if (!uptime)
-            return "0m"
-
-        // Parse the uptime string - handle formats like "1 week, 4 days, 3:45" or "4 days, 3:45" or "3:45"
-        var uptimeStr = uptime.toString().trim()
-
-        // Check for weeks and days - need to add them together
-        var weekMatch = uptimeStr.match(/(\d+)\s+weeks?/)
-        var dayMatch = uptimeStr.match(/(\d+)\s+days?/)
-
-        if (weekMatch) {
-            var weeks = parseInt(weekMatch[1])
-            var totalDays = weeks * 7
-            if (dayMatch) {
-                var days = parseInt(dayMatch[1])
-                totalDays += days
-            }
-            return totalDays + "d"
-        } else if (dayMatch) {
-            var days = parseInt(dayMatch[1])
-            return days + "d"
-        }
-
-        // If it's just hours:minutes, show the largest unit
-        var timeMatch = uptimeStr.match(/(\d+):(\d+)/)
-        if (timeMatch) {
-            var hours = parseInt(timeMatch[1])
-            var minutes = parseInt(timeMatch[2])
-            if (hours > 0) {
-                return hours + "h"
-            } else {
-                return minutes + "m"
-            }
-        }
-
-        // Fallback - return as is but truncated
-        return uptimeStr.length > 8 ? uptimeStr.substring(0,
-                                                          8) + "…" : uptimeStr
-    }
-}

Modules/CentcomCenter/Weather.qml

@@ -1,236 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-Rectangle {
-    id: weather
-
-    width: parent.width
-    height: parent.height
-    radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g,
-                   Theme.surfaceContainer.b, 0.4)
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                          Theme.outline.b, 0.08)
-    border.width: 1
-    layer.enabled: true
-
-    Ref {
-        service: WeatherService
-    }
-
-    Column {
-        anchors.centerIn: parent
-        spacing: Theme.spacingS
-        visible: !WeatherService.weather.available
-                 || WeatherService.weather.temp === 0
-
-        DankIcon {
-            name: "cloud_off"
-            size: Theme.iconSize + 8
-            color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g,
-                           Theme.surfaceText.b, 0.5)
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        StyledText {
-            text: "No Weather Data"
-            font.pixelSize: Theme.fontSizeMedium
-            color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g,
-                           Theme.surfaceText.b, 0.7)
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-    }
-
-    Column {
-        anchors.fill: parent
-        anchors.margins: Theme.spacingL
-        spacing: Theme.spacingS
-        visible: WeatherService.weather.available
-                 && WeatherService.weather.temp !== 0
-
-        Item {
-            width: parent.width
-            height: 60
-
-            DankIcon {
-                id: refreshButton
-                name: "refresh"
-                size: Theme.iconSize - 6
-                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g,
-                               Theme.surfaceText.b, 0.3)
-                anchors.right: parent.right
-                anchors.top: parent.top
-                anchors.rightMargin: -Theme.spacingS
-                anchors.topMargin: -Theme.spacingS
-
-                property bool isRefreshing: false
-                enabled: !isRefreshing
-
-                MouseArea {
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    cursorShape: parent.enabled ? Qt.PointingHandCursor : Qt.ForbiddenCursor
-                    onClicked: {
-                        refreshButton.isRefreshing = true
-                        WeatherService.forceRefresh()
-                        refreshTimer.restart()
-                    }
-                    enabled: parent.enabled
-                }
-
-                Timer {
-                    id: refreshTimer
-                    interval: 2000
-                    onTriggered: refreshButton.isRefreshing = false
-                }
-
-                NumberAnimation on rotation {
-                    running: refreshButton.isRefreshing
-                    from: 0
-                    to: 360
-                    duration: 1000
-                    loops: Animation.Infinite
-                }
-            }
-
-            Row {
-                anchors.centerIn: parent
-                spacing: Theme.spacingL
-
-                DankIcon {
-                    name: WeatherService.getWeatherIcon(
-                              WeatherService.weather.wCode)
-                    size: Theme.iconSize + 8
-                    color: Theme.primary
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                Column {
-                    spacing: Theme.spacingXS
-                    anchors.verticalCenter: parent.verticalCenter
-
-                    StyledText {
-                        text: (SettingsData.useFahrenheit ? WeatherService.weather.tempF : WeatherService.weather.temp)
-                              + "°" + (SettingsData.useFahrenheit ? "F" : "C")
-                        font.pixelSize: Theme.fontSizeXLarge
-                        color: Theme.surfaceText
-                        font.weight: Font.Light
-
-                        MouseArea {
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                if (WeatherService.weather.available)
-                                    SettingsData.setTemperatureUnit(
-                                                !SettingsData.useFahrenheit)
-                            }
-                            enabled: WeatherService.weather.available
-                        }
-                    }
-
-                    StyledText {
-                        text: WeatherService.weather.city || ""
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: Qt.rgba(Theme.surfaceText.r,
-                                       Theme.surfaceText.g,
-                                       Theme.surfaceText.b, 0.7)
-                        visible: text.length > 0
-                    }
-                }
-            }
-        }
-
-        Grid {
-            columns: 2
-            spacing: Theme.spacingM
-            anchors.horizontalCenter: parent.horizontalCenter
-
-            Row {
-                spacing: Theme.spacingXS
-
-                DankIcon {
-                    name: "humidity_low"
-                    size: Theme.fontSizeSmall
-                    color: Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    text: WeatherService.weather.humidity ? WeatherService.weather.humidity
-                                                            + "%" : "--"
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
-
-            Row {
-                spacing: Theme.spacingXS
-
-                DankIcon {
-                    name: "air"
-                    size: Theme.fontSizeSmall
-                    color: Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    text: WeatherService.weather.wind || "--"
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
-
-            Row {
-                spacing: Theme.spacingXS
-
-                DankIcon {
-                    name: "wb_twilight"
-                    size: Theme.fontSizeSmall
-                    color: Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    text: WeatherService.weather.sunrise || "--"
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
-
-            Row {
-                spacing: Theme.spacingXS
-
-                DankIcon {
-                    name: "bedtime"
-                    size: Theme.fontSizeSmall
-                    color: Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    text: WeatherService.weather.sunset || "--"
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
-        }
-    }
-
-    layer.effect: MultiEffect {
-        shadowEnabled: true
-        shadowHorizontalOffset: 0
-        shadowVerticalOffset: 2
-        shadowBlur: 0.5
-        shadowColor: Qt.rgba(0, 0, 0, 0.1)
-        shadowOpacity: 0.1
-    }
-}

Modules/ControlCenter/Audio/AudioDevicesList.qml

@@ -1,150 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import Quickshell
-import Quickshell.Io
-import Quickshell.Services.Pipewire
-import Quickshell.Widgets
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-Column {
-    id: root
-
-    property string currentSinkDisplayName: AudioService.sink ? AudioService.displayName(
-                                                                    AudioService.sink) : ""
-
-    width: parent.width
-    spacing: Theme.spacingM
-
-    StyledText {
-        text: "Output Device"
-        font.pixelSize: Theme.fontSizeLarge
-        color: Theme.surfaceText
-        font.weight: Font.Medium
-    }
-
-    Rectangle {
-        width: parent.width
-        height: 35
-        radius: Theme.cornerRadius
-        color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
-        border.color: Qt.rgba(Theme.primary.r, Theme.primary.g,
-                              Theme.primary.b, 0.3)
-        border.width: 1
-        visible: AudioService.sink !== null
-
-        Row {
-            anchors.left: parent.left
-            anchors.leftMargin: Theme.spacingM
-            anchors.verticalCenter: parent.verticalCenter
-            spacing: Theme.spacingS
-
-            DankIcon {
-                name: "check_circle"
-                size: Theme.iconSize - 4
-                color: Theme.primary
-            }
-
-            StyledText {
-                text: "Current: " + (root.currentSinkDisplayName || "None")
-                font.pixelSize: Theme.fontSizeMedium
-                color: Theme.primary
-                font.weight: Font.Medium
-            }
-        }
-    }
-
-    Repeater {
-        model: {
-            if (!Pipewire.ready || !Pipewire.nodes || !Pipewire.nodes.values)
-                return []
-
-            let sinks = []
-            for (var i = 0; i < Pipewire.nodes.values.length; i++) {
-                let node = Pipewire.nodes.values[i]
-                if (!node || node.isStream)
-                    continue
-
-                if ((node.type & PwNodeType.AudioSink) === PwNodeType.AudioSink)
-                    sinks.push(node)
-            }
-            return sinks
-        }
-
-        Rectangle {
-            width: parent.width
-            height: 50
-            radius: Theme.cornerRadius
-            color: deviceArea.containsMouse ? Qt.rgba(
-                                                  Theme.primary.r, Theme.primary.g,
-                                                  Theme.primary.b, 0.08) : (modelData === AudioService.sink ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08))
-            border.color: modelData === AudioService.sink ? Theme.primary : "transparent"
-            border.width: 1
-
-            Row {
-                anchors.left: parent.left
-                anchors.leftMargin: Theme.spacingM
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Theme.spacingM
-
-                DankIcon {
-                    name: {
-                        if (modelData.name.includes("bluez"))
-                            return "headset"
-                        else if (modelData.name.includes("hdmi"))
-                            return "tv"
-                        else if (modelData.name.includes("usb"))
-                            return "headset"
-                        else
-                            return "speaker"
-                    }
-                    size: Theme.iconSize
-                    color: modelData === AudioService.sink ? Theme.primary : Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                Column {
-                    spacing: 2
-                    anchors.verticalCenter: parent.verticalCenter
-
-                    StyledText {
-                        text: AudioService.displayName(modelData)
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: modelData === AudioService.sink ? Theme.primary : Theme.surfaceText
-                        font.weight: modelData === AudioService.sink ? Font.Medium : Font.Normal
-                    }
-
-                    StyledText {
-                        text: {
-                            if (AudioService.subtitle(modelData.name)
-                                    && AudioService.subtitle(
-                                        modelData.name) !== "")
-                                return AudioService.subtitle(modelData.name)
-                                        + (modelData === AudioService.sink ? " • Selected" : "")
-                            else
-                                return modelData === AudioService.sink ? "Selected" : ""
-                        }
-                        font.pixelSize: Theme.fontSizeSmall
-                        color: Qt.rgba(Theme.surfaceText.r,
-                                       Theme.surfaceText.g,
-                                       Theme.surfaceText.b, 0.7)
-                        visible: text !== ""
-                    }
-                }
-            }
-
-            MouseArea {
-                id: deviceArea
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    if (modelData)
-                        Pipewire.preferredDefaultAudioSink = modelData
-                }
-            }
-        }
-    }
-}

Modules/ControlCenter/Audio/AudioInputDevicesList.qml

@@ -1,149 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import Quickshell
-import Quickshell.Io
-import Quickshell.Services.Pipewire
-import Quickshell.Widgets
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-Column {
-    id: root
-
-    property string currentSourceDisplayName: AudioService.source ? AudioService.displayName(
-                                                                        AudioService.source) : ""
-
-    width: parent.width
-    spacing: Theme.spacingM
-
-    StyledText {
-        text: "Input Device"
-        font.pixelSize: Theme.fontSizeLarge
-        color: Theme.surfaceText
-        font.weight: Font.Medium
-    }
-
-    Rectangle {
-        width: parent.width
-        height: 35
-        radius: Theme.cornerRadius
-        color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
-        border.color: Qt.rgba(Theme.primary.r, Theme.primary.g,
-                              Theme.primary.b, 0.3)
-        border.width: 1
-        visible: AudioService.source !== null
-
-        Row {
-            anchors.left: parent.left
-            anchors.leftMargin: Theme.spacingM
-            anchors.verticalCenter: parent.verticalCenter
-            spacing: Theme.spacingS
-
-            DankIcon {
-                name: "check_circle"
-                size: Theme.iconSize - 4
-                color: Theme.primary
-            }
-
-            StyledText {
-                text: "Current: " + (root.currentSourceDisplayName || "None")
-                font.pixelSize: Theme.fontSizeMedium
-                color: Theme.primary
-                font.weight: Font.Medium
-            }
-        }
-    }
-
-    Repeater {
-        model: {
-            if (!Pipewire.ready || !Pipewire.nodes || !Pipewire.nodes.values)
-                return []
-
-            let sources = []
-            for (var i = 0; i < Pipewire.nodes.values.length; i++) {
-                let node = Pipewire.nodes.values[i]
-                if (!node || node.isStream)
-                    continue
-
-                if ((node.type & PwNodeType.AudioSource) === PwNodeType.AudioSource
-                        && !node.name.includes(".monitor"))
-                    sources.push(node)
-            }
-            return sources
-        }
-
-        Rectangle {
-            width: parent.width
-            height: 50
-            radius: Theme.cornerRadius
-            color: sourceArea.containsMouse ? Qt.rgba(
-                                                  Theme.primary.r, Theme.primary.g,
-                                                  Theme.primary.b, 0.08) : (modelData === AudioService.source ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08))
-            border.color: modelData === AudioService.source ? Theme.primary : "transparent"
-            border.width: 1
-
-            Row {
-                anchors.left: parent.left
-                anchors.leftMargin: Theme.spacingM
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Theme.spacingM
-
-                DankIcon {
-                    name: {
-                        if (modelData.name.includes("bluez"))
-                            return "headset_mic"
-                        else if (modelData.name.includes("usb"))
-                            return "headset_mic"
-                        else
-                            return "mic"
-                    }
-                    size: Theme.iconSize
-                    color: modelData === AudioService.source ? Theme.primary : Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                Column {
-                    spacing: 2
-                    anchors.verticalCenter: parent.verticalCenter
-
-                    StyledText {
-                        text: AudioService.displayName(modelData)
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: modelData === AudioService.source ? Theme.primary : Theme.surfaceText
-                        font.weight: modelData === AudioService.source ? Font.Medium : Font.Normal
-                    }
-
-                    StyledText {
-                        text: {
-                            if (AudioService.subtitle(modelData.name)
-                                    && AudioService.subtitle(
-                                        modelData.name) !== "")
-                                return AudioService.subtitle(modelData.name)
-                                        + (modelData === AudioService.source ? " • Selected" : "")
-                            else
-                                return modelData === AudioService.source ? "Selected" : ""
-                        }
-                        font.pixelSize: Theme.fontSizeSmall
-                        color: Qt.rgba(Theme.surfaceText.r,
-                                       Theme.surfaceText.g,
-                                       Theme.surfaceText.b, 0.7)
-                        visible: text !== ""
-                    }
-                }
-            }
-
-            MouseArea {
-                id: sourceArea
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    if (modelData)
-                        Pipewire.preferredDefaultAudioSource = modelData
-                }
-            }
-        }
-    }
-}

Modules/ControlCenter/Audio/MicrophoneControl.qml

@@ -1,239 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import Quickshell
-import Quickshell.Io
-import Quickshell.Widgets
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-Column {
-    id: root
-
-    property real micLevel: Math.min(100,
-                                     (AudioService.source
-                                      && AudioService.source.audio
-                                      && AudioService.source.audio.volume * 100)
-                                     || 0)
-    property bool micMuted: (AudioService.source && AudioService.source.audio
-                             && AudioService.source.audio.muted) || false
-
-    width: parent.width
-    spacing: Theme.spacingM
-
-    StyledText {
-        text: "Microphone Level"
-        font.pixelSize: Theme.fontSizeLarge
-        color: Theme.surfaceText
-        font.weight: Font.Medium
-    }
-
-    Row {
-        width: parent.width
-        spacing: Theme.spacingM
-
-        DankIcon {
-            name: root.micMuted ? "mic_off" : "mic"
-            size: Theme.iconSize
-            color: root.micMuted ? Theme.error : Theme.surfaceText
-            anchors.verticalCenter: parent.verticalCenter
-
-            MouseArea {
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    if (AudioService.source && AudioService.source.audio)
-                        AudioService.source.audio.muted = !AudioService.source.audio.muted
-                }
-            }
-        }
-
-        Item {
-            id: micSliderContainer
-
-            width: parent.width - 80
-            height: 32
-            anchors.verticalCenter: parent.verticalCenter
-
-            Rectangle {
-                id: micSliderTrack
-
-                width: parent.width
-                height: 8
-                radius: 4
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
-                               Theme.surfaceVariant.b, 0.3)
-                anchors.verticalCenter: parent.verticalCenter
-
-                Rectangle {
-                    id: micSliderFill
-
-                    width: parent.width * (root.micLevel / 100)
-                    height: parent.height
-                    radius: parent.radius
-                    color: Theme.primary
-
-                    Behavior on width {
-                        NumberAnimation {
-                            duration: Anims.durShort
-                            easing.type: Easing.BezierSpline
-                            easing.bezierCurve: Anims.standardDecel
-                        }
-                    }
-                }
-
-                Rectangle {
-                    id: micHandle
-
-                    width: 18
-                    height: 18
-                    radius: 9
-                    color: Theme.primary
-                    border.color: Qt.lighter(Theme.primary, 1.3)
-                    border.width: 2
-                    x: Math.max(0, Math.min(parent.width - width,
-                                            micSliderFill.width - width / 2))
-                    anchors.verticalCenter: parent.verticalCenter
-                    scale: micMouseArea.containsMouse
-                           || micMouseArea.pressed ? 1.2 : 1
-
-                    Rectangle {
-                        id: micTooltip
-
-                        width: tooltipText.contentWidth + Theme.spacingS * 2
-                        height: tooltipText.contentHeight + Theme.spacingXS * 2
-                        radius: Theme.cornerRadius
-                        color: Theme.surfaceContainer
-                        border.color: Theme.outline
-                        border.width: 1
-                        anchors.bottom: parent.top
-                        anchors.bottomMargin: Theme.spacingS
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        visible: (micMouseArea.containsMouse && !root.micMuted)
-                                 || micMouseArea.isDragging
-                        opacity: visible ? 1 : 0
-
-                        StyledText {
-                            id: tooltipText
-
-                            text: Math.round(root.micLevel) + "%"
-                            font.pixelSize: Theme.fontSizeSmall
-                            color: Theme.surfaceText
-                            font.weight: Font.Medium
-                            anchors.centerIn: parent
-                        }
-
-                        Behavior on opacity {
-                            NumberAnimation {
-                                duration: Theme.shortDuration
-                                easing.type: Theme.standardEasing
-                            }
-                        }
-                    }
-
-                    Behavior on scale {
-                        NumberAnimation {
-                            duration: Anims.durShort
-                            easing.type: Easing.BezierSpline
-                            easing.bezierCurve: Anims.standard
-                        }
-                    }
-                }
-            }
-
-            MouseArea {
-                id: micMouseArea
-
-                property bool isDragging: false
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                preventStealing: true
-                onPressed: mouse => {
-                               isDragging = true
-                               let ratio = Math.max(
-                                   0, Math.min(1,
-                                               mouse.x / micSliderTrack.width))
-                               let newMicLevel = Math.round(ratio * 100)
-                               if (AudioService.source
-                                   && AudioService.source.audio) {
-                                   AudioService.source.audio.muted = false
-                                   AudioService.source.audio.volume = newMicLevel / 100
-                               }
-                           }
-                onReleased: {
-                    isDragging = false
-                }
-                onPositionChanged: mouse => {
-                                       if (pressed && isDragging) {
-                                           let ratio = Math.max(
-                                               0, Math.min(
-                                                   1,
-                                                   mouse.x / micSliderTrack.width))
-                                           let newMicLevel = Math.max(
-                                               0, Math.min(100, Math.round(
-                                                               ratio * 100)))
-                                           if (AudioService.source
-                                               && AudioService.source.audio) {
-                                               AudioService.source.audio.muted = false
-                                               AudioService.source.audio.volume = newMicLevel / 100
-                                           }
-                                       }
-                                   }
-                onClicked: mouse => {
-                               let ratio = Math.max(
-                                   0, Math.min(1,
-                                               mouse.x / micSliderTrack.width))
-                               let newMicLevel = Math.round(ratio * 100)
-                               if (AudioService.source
-                                   && AudioService.source.audio) {
-                                   AudioService.source.audio.muted = false
-                                   AudioService.source.audio.volume = newMicLevel / 100
-                               }
-                           }
-            }
-
-            MouseArea {
-                id: micGlobalMouseArea
-
-                x: 0
-                y: 0
-                width: root.parent ? root.parent.width : 0
-                height: root.parent ? root.parent.height : 0
-                enabled: micMouseArea.isDragging
-                visible: false
-                preventStealing: true
-                onPositionChanged: mouse => {
-                                       if (micMouseArea.isDragging) {
-                                           let globalPos = mapToItem(
-                                               micSliderTrack, mouse.x, mouse.y)
-                                           let ratio = Math.max(
-                                               0, Math.min(
-                                                   1,
-                                                   globalPos.x / micSliderTrack.width))
-                                           let newMicLevel = Math.max(
-                                               0, Math.min(100, Math.round(
-                                                               ratio * 100)))
-                                           if (AudioService.source
-                                               && AudioService.source.audio) {
-                                               AudioService.source.audio.muted = false
-                                               AudioService.source.audio.volume = newMicLevel / 100
-                                           }
-                                       }
-                                   }
-                onReleased: {
-                    micMouseArea.isDragging = false
-                }
-            }
-        }
-
-        DankIcon {
-            name: "mic"
-            size: Theme.iconSize
-            color: Theme.surfaceText
-            anchors.verticalCenter: parent.verticalCenter
-        }
-    }
-}

Modules/ControlCenter/Audio/VolumeControl.qml

@@ -1,69 +0,0 @@
-import QtQuick
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-Column {
-    id: root
-
-    property real volumeLevel: Math.min(
-                                   100,
-                                   (AudioService.sink && AudioService.sink.audio
-                                    && AudioService.sink.audio.volume * 100)
-                                   || 0)
-    property bool volumeMuted: (AudioService.sink && AudioService.sink.audio
-                                && AudioService.sink.audio.muted) || false
-
-    width: parent.width
-    spacing: Theme.spacingM
-
-    StyledText {
-        text: "Volume"
-        font.pixelSize: Theme.fontSizeLarge
-        color: Theme.surfaceText
-        font.weight: Font.Medium
-    }
-
-    DankSlider {
-        id: volumeSlider
-
-        width: parent.width
-        minimum: 0
-        maximum: 100
-        leftIcon: root.volumeMuted ? "volume_off" : "volume_down"
-        rightIcon: "volume_up"
-        enabled: !root.volumeMuted
-        showValue: true
-        unit: "%"
-
-        Connections {
-            target: AudioService.sink
-                    && AudioService.sink.audio ? AudioService.sink.audio : null
-            function onVolumeChanged() {
-                volumeSlider.value = Math.round(
-                            AudioService.sink.audio.volume * 100)
-            }
-        }
-
-        Component.onCompleted: {
-            if (AudioService.sink && AudioService.sink.audio) {
-                value = Math.round(AudioService.sink.audio.volume * 100)
-            }
-
-            let leftIconItem = volumeSlider.children[0].children[0]
-            if (leftIconItem) {
-                let mouseArea = Qt.createQmlObject(
-                        'import QtQuick; import qs.Services; MouseArea { anchors.fill: parent; hoverEnabled: true; cursorShape: Qt.PointingHandCursor; onClicked: { if (AudioService.sink && AudioService.sink.audio) AudioService.sink.audio.muted = !AudioService.sink.audio.muted; } }',
-                        leftIconItem, "dynamicMouseArea")
-            }
-        }
-
-        onSliderValueChanged: newValue => {
-                                  if (AudioService.sink
-                                      && AudioService.sink.audio) {
-                                      AudioService.sink.audio.muted = false
-                                      AudioService.sink.audio.volume = newValue / 100
-                                  }
-                              }
-    }
-}

Modules/ControlCenter/AudioTab.qml

@@ -1,128 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import Quickshell
-import Quickshell.Io
-import Quickshell.Services.Pipewire
-import Quickshell.Widgets
-import qs.Common
-import qs.Modules.ControlCenter.Audio
-import qs.Services
-import qs.Widgets
-
-Item {
-    id: audioTab
-
-    property int audioSubTab: 0
-
-    Column {
-        anchors.fill: parent
-        spacing: Theme.spacingM
-
-        DankTabBar {
-            width: parent.width
-            tabHeight: 40
-            currentIndex: audioTab.audioSubTab
-            showIcons: false
-            model: [{
-                    "text": "Output"
-                }, {
-                    "text": "Input"
-                }]
-            onTabClicked: function (index) {
-                audioTab.audioSubTab = index
-            }
-        }
-
-        // Single Loader that switches between Output and Input
-        Loader {
-            width: parent.width
-            height: parent.height - 48
-            asynchronous: true
-            sourceComponent: audioTab.audioSubTab === 0 ? outputTabComponent : inputTabComponent
-        }
-    }
-
-    // Output Tab Component
-    Component {
-        id: outputTabComponent
-        DankFlickable {
-            clip: true
-            contentHeight: outputColumn.height
-            contentWidth: width
-
-            Column {
-                id: outputColumn
-                width: parent.width
-                spacing: Theme.spacingL
-
-                Loader {
-                    width: parent.width
-                    sourceComponent: volumeComponent
-                }
-
-                Loader {
-                    width: parent.width
-                    sourceComponent: outputDevicesComponent
-                }
-            }
-        }
-    }
-
-    // Input Tab Component
-    Component {
-        id: inputTabComponent
-        DankFlickable {
-            clip: true
-            contentHeight: inputColumn.height
-            contentWidth: width
-
-            Column {
-                id: inputColumn
-                width: parent.width
-                spacing: Theme.spacingL
-
-                Loader {
-                    width: parent.width
-                    sourceComponent: microphoneComponent
-                }
-
-                Loader {
-                    width: parent.width
-                    sourceComponent: inputDevicesComponent
-                }
-            }
-        }
-    }
-
-    // Volume Control Component
-    Component {
-        id: volumeComponent
-        VolumeControl {
-            width: parent.width
-        }
-    }
-
-    // Microphone Control Component
-    Component {
-        id: microphoneComponent
-        MicrophoneControl {
-            width: parent.width
-        }
-    }
-
-    // Output Devices Component
-    Component {
-        id: outputDevicesComponent
-        AudioDevicesList {
-            width: parent.width
-        }
-    }
-
-    // Input Devices Component
-    Component {
-        id: inputDevicesComponent
-        AudioInputDevicesList {
-            width: parent.width
-        }
-    }
-}

Modules/ControlCenter/Bluetooth/AvailableDevicesList.qml

@@ -1,452 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import Quickshell
-import Quickshell.Bluetooth
-import Quickshell.Io
-import Quickshell.Widgets
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-Column {
-    id: root
-
-    width: parent.width
-    spacing: Theme.spacingM
-    visible: BluetoothService.adapter && BluetoothService.adapter.enabled
-
-    Row {
-        width: parent.width
-        spacing: Theme.spacingM
-
-        StyledText {
-            text: "Available Devices"
-            font.pixelSize: Theme.fontSizeLarge
-            color: Theme.surfaceText
-            font.weight: Font.Medium
-            anchors.verticalCenter: parent.verticalCenter
-        }
-
-        Item {
-            width: parent.width - scanButton.width - parent.spacing
-                   - 150 // Spacer to push button right
-            height: 1
-        }
-
-        Rectangle {
-            id: scanButton
-
-            width: Math.max(100, scanText.contentWidth + Theme.spacingL * 2)
-            height: 32
-            radius: Theme.cornerRadius
-            color: scanArea.containsMouse ? Qt.rgba(Theme.primary.r,
-                                                    Theme.primary.g,
-                                                    Theme.primary.b,
-                                                    0.12) : Qt.rgba(
-                                                Theme.primary.r,
-                                                Theme.primary.g,
-                                                Theme.primary.b, 0.08)
-            border.color: Theme.primary
-            border.width: 1
-
-            Row {
-                anchors.centerIn: parent
-                spacing: Theme.spacingXS
-
-                DankIcon {
-                    name: BluetoothService.adapter
-                          && BluetoothService.adapter.discovering ? "stop" : "bluetooth_searching"
-                    size: Theme.iconSize - 6
-                    color: Theme.primary
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    id: scanText
-
-                    text: BluetoothService.adapter
-                          && BluetoothService.adapter.discovering ? "Stop Scanning" : "Scan"
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.primary
-                    font.weight: Font.Medium
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
-
-            MouseArea {
-                id: scanArea
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    if (BluetoothService.adapter)
-                        BluetoothService.adapter.discovering = !BluetoothService.adapter.discovering
-                }
-            }
-        }
-    }
-
-    Rectangle {
-        width: parent.width
-        height: noteColumn.implicitHeight + Theme.spacingM * 2
-        radius: Theme.cornerRadius
-        color: Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.08)
-        border.color: Qt.rgba(Theme.warning.r, Theme.warning.g,
-                              Theme.warning.b, 0.2)
-        border.width: 1
-
-        Column {
-            id: noteColumn
-
-            anchors.fill: parent
-            anchors.margins: Theme.spacingM
-            spacing: Theme.spacingS
-
-            Row {
-                width: parent.width
-                spacing: Theme.spacingS
-
-                DankIcon {
-                    name: "info"
-                    size: Theme.iconSize - 2
-                    color: Theme.warning
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    text: "Pairing Limitation"
-                    font.pixelSize: Theme.fontSizeMedium
-                    color: Theme.warning
-                    font.weight: Font.Medium
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
-
-            StyledText {
-                text: "Quickshell does not support pairing devices that require pin or confirmation."
-                font.pixelSize: Theme.fontSizeSmall
-                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g,
-                               Theme.surfaceText.b, 0.8)
-                wrapMode: Text.WordWrap
-                width: parent.width
-            }
-        }
-    }
-
-    Repeater {
-        model: {
-            if (!BluetoothService.adapter
-                    || !BluetoothService.adapter.discovering
-                    || !Bluetooth.devices)
-                return []
-
-            var filtered = Bluetooth.devices.values.filter(dev => {
-                                                               return dev
-                                                               && !dev.paired
-                                                               && !dev.pairing
-                                                               && !dev.blocked
-                                                               && (dev.signalStrength === undefined
-                                                                   || dev.signalStrength > 0)
-                                                           })
-            return BluetoothService.sortDevices(filtered)
-        }
-
-        Rectangle {
-            property bool canConnect: BluetoothService.canConnect(modelData)
-            property bool isBusy: BluetoothService.isDeviceBusy(modelData)
-
-            width: parent.width
-            height: 70
-            radius: Theme.cornerRadius
-            color: {
-                if (availableDeviceArea.containsMouse && !isBusy)
-                    return Qt.rgba(Theme.primary.r, Theme.primary.g,
-                                   Theme.primary.b, 0.08)
-
-                if (modelData.pairing
-                        || modelData.state === BluetoothDeviceState.Connecting)
-                    return Qt.rgba(Theme.warning.r, Theme.warning.g,
-                                   Theme.warning.b, 0.12)
-
-                if (modelData.blocked)
-                    return Qt.rgba(Theme.error.r, Theme.error.g,
-                                   Theme.error.b, 0.08)
-
-                return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
-                               Theme.surfaceVariant.b, 0.08)
-            }
-            border.color: {
-                if (modelData.pairing)
-                    return Theme.warning
-
-                if (modelData.blocked)
-                    return Theme.error
-
-                return Qt.rgba(Theme.outline.r, Theme.outline.g,
-                               Theme.outline.b, 0.2)
-            }
-            border.width: 1
-
-            Row {
-                anchors.left: parent.left
-                anchors.leftMargin: Theme.spacingM
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Theme.spacingM
-
-                DankIcon {
-                    name: BluetoothService.getDeviceIcon(modelData)
-                    size: Theme.iconSize
-                    color: {
-                        if (modelData.pairing)
-                            return Theme.warning
-
-                        if (modelData.blocked)
-                            return Theme.error
-
-                        return Theme.surfaceText
-                    }
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                Column {
-                    spacing: 2
-                    anchors.verticalCenter: parent.verticalCenter
-
-                    StyledText {
-                        text: modelData.name || modelData.deviceName
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: {
-                            if (modelData.pairing)
-                                return Theme.warning
-
-                            if (modelData.blocked)
-                                return Theme.error
-
-                            return Theme.surfaceText
-                        }
-                        font.weight: modelData.pairing ? Font.Medium : Font.Normal
-                    }
-
-                    Row {
-                        spacing: Theme.spacingXS
-
-                        Row {
-                            spacing: Theme.spacingS
-
-                            StyledText {
-                                text: {
-                                    if (modelData.pairing)
-                                        return "Pairing..."
-
-                                    if (modelData.blocked)
-                                        return "Blocked"
-
-                                    return BluetoothService.getSignalStrength(
-                                                modelData)
-                                }
-                                font.pixelSize: Theme.fontSizeSmall
-                                color: {
-                                    if (modelData.pairing)
-                                        return Theme.warning
-
-                                    if (modelData.blocked)
-                                        return Theme.error
-
-                                    return Qt.rgba(Theme.surfaceText.r,
-                                                   Theme.surfaceText.g,
-                                                   Theme.surfaceText.b, 0.7)
-                                }
-                            }
-
-                            DankIcon {
-                                name: BluetoothService.getSignalIcon(modelData)
-                                size: Theme.fontSizeSmall
-                                color: Qt.rgba(Theme.surfaceText.r,
-                                               Theme.surfaceText.g,
-                                               Theme.surfaceText.b, 0.7)
-                                visible: modelData.signalStrength !== undefined
-                                         && modelData.signalStrength > 0
-                                         && !modelData.pairing
-                                         && !modelData.blocked
-                            }
-
-                            StyledText {
-                                text: (modelData.signalStrength !== undefined
-                                       && modelData.signalStrength
-                                       > 0) ? modelData.signalStrength + "%" : ""
-                                font.pixelSize: Theme.fontSizeSmall
-                                color: Qt.rgba(Theme.surfaceText.r,
-                                               Theme.surfaceText.g,
-                                               Theme.surfaceText.b, 0.5)
-                                visible: modelData.signalStrength !== undefined
-                                         && modelData.signalStrength > 0
-                                         && !modelData.pairing
-                                         && !modelData.blocked
-                            }
-                        }
-                    }
-                }
-            }
-
-            Rectangle {
-                width: 80
-                height: 28
-                radius: Theme.cornerRadius
-                anchors.right: parent.right
-                anchors.rightMargin: Theme.spacingM
-                anchors.verticalCenter: parent.verticalCenter
-                visible: modelData.state !== BluetoothDeviceState.Connecting
-                color: {
-                    if (!canConnect && !isBusy)
-                        return Qt.rgba(Theme.surfaceVariant.r,
-                                       Theme.surfaceVariant.g,
-                                       Theme.surfaceVariant.b, 0.3)
-
-                    if (actionButtonArea.containsMouse && !isBusy)
-                        return Qt.rgba(Theme.primary.r, Theme.primary.g,
-                                       Theme.primary.b, 0.12)
-
-                    return "transparent"
-                }
-                border.color: canConnect || isBusy ? Theme.primary : Qt.rgba(
-                                                         Theme.outline.r,
-                                                         Theme.outline.g,
-                                                         Theme.outline.b, 0.2)
-                border.width: 1
-                opacity: canConnect || isBusy ? 1 : 0.5
-
-                StyledText {
-                    anchors.centerIn: parent
-                    text: {
-                        if (modelData.pairing)
-                            return "Pairing..."
-
-                        if (modelData.blocked)
-                            return "Blocked"
-
-                        return "Connect"
-                    }
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: canConnect || isBusy ? Theme.primary : Qt.rgba(
-                                                      Theme.surfaceText.r,
-                                                      Theme.surfaceText.g,
-                                                      Theme.surfaceText.b, 0.5)
-                    font.weight: Font.Medium
-                }
-
-                MouseArea {
-                    id: actionButtonArea
-
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    cursorShape: canConnect
-                                 && !isBusy ? Qt.PointingHandCursor : (isBusy ? Qt.BusyCursor : Qt.ArrowCursor)
-                    enabled: canConnect && !isBusy
-                    onClicked: {
-                        if (modelData)
-                            BluetoothService.connectDeviceWithTrust(modelData)
-                    }
-                }
-            }
-
-            MouseArea {
-                id: availableDeviceArea
-
-                anchors.fill: parent
-                anchors.rightMargin: 90
-                hoverEnabled: true
-                cursorShape: canConnect
-                             && !isBusy ? Qt.PointingHandCursor : (isBusy ? Qt.BusyCursor : Qt.ArrowCursor)
-                enabled: canConnect && !isBusy
-                onClicked: {
-                    if (modelData)
-                        BluetoothService.connectDeviceWithTrust(modelData)
-                }
-            }
-        }
-    }
-
-    Column {
-        width: parent.width
-        spacing: Theme.spacingM
-        visible: {
-            if (!BluetoothService.adapter
-                    || !BluetoothService.adapter.discovering
-                    || !Bluetooth.devices)
-                return false
-
-            var availableCount = Bluetooth.devices.values.filter(dev => {
-                                                                     return dev
-                                                                     && !dev.paired
-                                                                     && !dev.pairing
-                                                                     && !dev.blocked
-                                                                     && (dev.signalStrength
-                                                                         === undefined
-                                                                         || dev.signalStrength > 0)
-                                                                 }).length
-            return availableCount === 0
-        }
-
-        Row {
-            anchors.horizontalCenter: parent.horizontalCenter
-            spacing: Theme.spacingM
-
-            DankIcon {
-                name: "sync"
-                size: Theme.iconSizeLarge
-                color: Theme.primary
-                anchors.verticalCenter: parent.verticalCenter
-
-                RotationAnimation on rotation {
-                    running: true
-                    loops: Animation.Infinite
-                    from: 0
-                    to: 360
-                    duration: 2000
-                }
-            }
-
-            StyledText {
-                text: "Scanning for devices..."
-                font.pixelSize: Theme.fontSizeLarge
-                color: Theme.surfaceText
-                font.weight: Font.Medium
-                anchors.verticalCenter: parent.verticalCenter
-            }
-        }
-
-        StyledText {
-            text: "Make sure your device is in pairing mode"
-            font.pixelSize: Theme.fontSizeMedium
-            color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g,
-                           Theme.surfaceText.b, 0.7)
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-    }
-
-    StyledText {
-        text: "No devices found. Put your device in pairing mode and click Start Scanning."
-        font.pixelSize: Theme.fontSizeMedium
-        color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g,
-                       Theme.surfaceText.b, 0.7)
-        visible: {
-            if (!BluetoothService.adapter || !Bluetooth.devices)
-                return true
-
-            var availableCount = Bluetooth.devices.values.filter(dev => {
-                                                                     return dev
-                                                                     && !dev.paired
-                                                                     && !dev.pairing
-                                                                     && !dev.blocked
-                                                                     && (dev.signalStrength
-                                                                         === undefined
-                                                                         || dev.signalStrength > 0)
-                                                                 }).length
-            return availableCount === 0 && !BluetoothService.adapter.discovering
-        }
-        wrapMode: Text.WordWrap
-        width: parent.width
-        horizontalAlignment: Text.AlignHCenter
-    }
-}

Modules/ControlCenter/Bluetooth/BluetoothContextMenu.qml

@@ -1,265 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import Quickshell
-import Quickshell.Bluetooth
-import Quickshell.Io
-import Quickshell.Widgets
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-Rectangle {
-    id: root
-
-    property var deviceData: null
-    property bool menuVisible: false
-    property var parentItem
-    property var codecSelector
-
-    function show(x, y) {
-        const menuWidth = 160;
-        const menuHeight = menuColumn.implicitHeight + Theme.spacingS * 2;
-        let finalX = x - menuWidth / 2;
-        let finalY = y;
-        finalX = Math.max(0, Math.min(finalX, parentItem.width - menuWidth));
-        finalY = Math.max(0, Math.min(finalY, parentItem.height - menuHeight));
-        root.x = finalX;
-        root.y = finalY;
-        root.visible = true;
-        root.menuVisible = true;
-    }
-
-    function hide() {
-        root.menuVisible = false;
-        Qt.callLater(() => {
-            root.visible = false;
-        });
-    }
-
-    visible: false
-    width: 160
-    height: menuColumn.implicitHeight + Theme.spacingS * 2
-    radius: Theme.cornerRadius
-    color: Theme.popupBackground()
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 1
-    z: 1000
-    opacity: menuVisible ? 1 : 0
-    scale: menuVisible ? 1 : 0.85
-
-    Rectangle {
-        anchors.fill: parent
-        anchors.topMargin: 4
-        anchors.leftMargin: 2
-        anchors.rightMargin: -2
-        anchors.bottomMargin: -4
-        radius: parent.radius
-        color: Qt.rgba(0, 0, 0, 0.15)
-        z: parent.z - 1
-    }
-
-    Column {
-        id: menuColumn
-
-        anchors.fill: parent
-        anchors.margins: Theme.spacingS
-        spacing: 1
-
-        Rectangle {
-            width: parent.width
-            height: 32
-            radius: Theme.cornerRadius
-            color: connectArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
-
-            Row {
-                anchors.left: parent.left
-                anchors.leftMargin: Theme.spacingS
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Theme.spacingS
-
-                DankIcon {
-                    name: root.deviceData && root.deviceData.connected ? "link_off" : "link"
-                    size: Theme.iconSize - 2
-                    color: Theme.surfaceText
-                    opacity: 0.7
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    text: root.deviceData && root.deviceData.connected ? "Disconnect" : "Connect"
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.surfaceText
-                    font.weight: Font.Normal
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-            }
-
-            MouseArea {
-                id: connectArea
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    if (root.deviceData) {
-                        if (root.deviceData.connected)
-                            root.deviceData.disconnect();
-                        else
-                            BluetoothService.connectDeviceWithTrust(root.deviceData);
-                    }
-                    root.hide();
-                }
-            }
-
-            Behavior on color {
-                ColorAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
-
-            }
-
-        }
-
-        Rectangle {
-            width: parent.width
-            height: 32
-            radius: Theme.cornerRadius
-            color: codecArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
-            visible: root.deviceData && BluetoothService.isAudioDevice(root.deviceData) && root.deviceData.connected
-
-            Row {
-                anchors.left: parent.left
-                anchors.leftMargin: Theme.spacingS
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Theme.spacingS
-
-                DankIcon {
-                    name: "high_quality"
-                    size: Theme.iconSize - 2
-                    color: Theme.surfaceText
-                    opacity: 0.7
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    text: "Audio Codec"
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.surfaceText
-                    font.weight: Font.Normal
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-            }
-
-            MouseArea {
-                id: codecArea
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    codecSelector.show(root.deviceData);
-                    root.hide();
-                }
-            }
-
-            Behavior on color {
-                ColorAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
-
-            }
-
-        }
-
-        Rectangle {
-            width: parent.width - Theme.spacingS * 2
-            height: 5
-            anchors.horizontalCenter: parent.horizontalCenter
-            color: "transparent"
-
-            Rectangle {
-                anchors.centerIn: parent
-                width: parent.width
-                height: 1
-                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
-            }
-
-        }
-
-        Rectangle {
-            width: parent.width
-            height: 32
-            radius: Theme.cornerRadius
-            color: forgetArea.containsMouse ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12) : "transparent"
-
-            Row {
-                anchors.left: parent.left
-                anchors.leftMargin: Theme.spacingS
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Theme.spacingS
-
-                DankIcon {
-                    name: "delete"
-                    size: Theme.iconSize - 2
-                    color: forgetArea.containsMouse ? Theme.error : Theme.surfaceText
-                    opacity: 0.7
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    text: "Forget Device"
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: forgetArea.containsMouse ? Theme.error : Theme.surfaceText
-                    font.weight: Font.Normal
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-            }
-
-            MouseArea {
-                id: forgetArea
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    if (root.deviceData)
-                        root.deviceData.forget();
-
-                    root.hide();
-                }
-            }
-
-            Behavior on color {
-                ColorAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
-
-            }
-
-        }
-
-    }
-
-    Behavior on opacity {
-        NumberAnimation {
-            duration: Theme.mediumDuration
-            easing.type: Theme.emphasizedEasing
-        }
-
-    }
-
-    Behavior on scale {
-        NumberAnimation {
-            duration: Theme.mediumDuration
-            easing.type: Theme.emphasizedEasing
-        }
-
-    }
-
-}

Modules/ControlCenter/Bluetooth/BluetoothToggle.qml

@@ -1,72 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import Quickshell
-import Quickshell.Bluetooth
-import Quickshell.Io
-import Quickshell.Widgets
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-Rectangle {
-    id: root
-
-    width: parent.width
-    height: 60
-    radius: Theme.cornerRadius
-    color: bluetoothToggle.containsMouse ? Qt.rgba(
-                                               Theme.primary.r, Theme.primary.g,
-                                               Theme.primary.b, 0.12) : (BluetoothService.adapter
-                                                                         && BluetoothService.adapter.enabled ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.16) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.12))
-    border.color: BluetoothService.adapter
-                  && BluetoothService.adapter.enabled ? Theme.primary : "transparent"
-    border.width: 2
-
-    Row {
-        anchors.left: parent.left
-        anchors.leftMargin: Theme.spacingL
-        anchors.verticalCenter: parent.verticalCenter
-        spacing: Theme.spacingM
-
-        DankIcon {
-            name: "bluetooth"
-            size: Theme.iconSizeLarge
-            color: BluetoothService.adapter
-                   && BluetoothService.adapter.enabled ? Theme.primary : Theme.surfaceText
-            anchors.verticalCenter: parent.verticalCenter
-        }
-
-        Column {
-            spacing: 2
-            anchors.verticalCenter: parent.verticalCenter
-
-            StyledText {
-                text: "Bluetooth"
-                font.pixelSize: Theme.fontSizeLarge
-                color: BluetoothService.adapter
-                       && BluetoothService.adapter.enabled ? Theme.primary : Theme.surfaceText
-                font.weight: Font.Medium
-            }
-
-            StyledText {
-                text: BluetoothService.adapter
-                      && BluetoothService.adapter.enabled ? "Enabled" : "Disabled"
-                font.pixelSize: Theme.fontSizeSmall
-                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g,
-                               Theme.surfaceText.b, 0.7)
-            }
-        }
-    }
-
-    MouseArea {
-        id: bluetoothToggle
-
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        onClicked: {
-            if (BluetoothService.adapter)
-                BluetoothService.adapter.enabled = !BluetoothService.adapter.enabled
-        }
-    }
-}

Modules/ControlCenter/Bluetooth/PairedDevicesList.qml

@@ -1,190 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import Quickshell
-import Quickshell.Bluetooth
-import Quickshell.Io
-import Quickshell.Widgets
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-Column {
-    id: root
-
-    function findBluetoothContextMenu() {
-        var p = parent
-        while (p) {
-            if (p.bluetoothContextMenuWindow)
-                return p.bluetoothContextMenuWindow
-            p = p.parent
-        }
-        return null
-    }
-
-    width: parent.width
-    spacing: Theme.spacingM
-    visible: BluetoothService.adapter && BluetoothService.adapter.enabled
-
-    StyledText {
-        text: "Paired Devices"
-        font.pixelSize: Theme.fontSizeLarge
-        color: Theme.surfaceText
-        font.weight: Font.Medium
-    }
-
-    Repeater {
-        model: BluetoothService.adapter
-               && BluetoothService.adapter.devices ? BluetoothService.adapter.devices.values.filter(
-                                                         dev => {
-                                                             return dev
-                                                             && (dev.paired
-                                                                 || dev.trusted)
-                                                         }) : []
-
-        Rectangle {
-            width: parent.width
-            height: 60
-            radius: Theme.cornerRadius
-            color: btDeviceArea.containsMouse ? Qt.rgba(
-                                                    Theme.primary.r,
-                                                    Theme.primary.g,
-                                                    Theme.primary.b,
-                                                    0.08) : (modelData.connected ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08))
-            border.color: modelData.connected ? Theme.primary : "transparent"
-            border.width: 1
-
-            Row {
-                anchors.left: parent.left
-                anchors.leftMargin: Theme.spacingM
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Theme.spacingM
-
-                DankIcon {
-                    name: BluetoothService.getDeviceIcon(modelData)
-                    size: Theme.iconSize
-                    color: modelData.connected ? Theme.primary : Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                Column {
-                    spacing: 2
-                    anchors.verticalCenter: parent.verticalCenter
-
-                    StyledText {
-                        text: modelData.name || modelData.deviceName
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: modelData.connected ? Theme.primary : Theme.surfaceText
-                        font.weight: modelData.connected ? Font.Medium : Font.Normal
-                    }
-
-                    Row {
-                        spacing: Theme.spacingXS
-
-                        StyledText {
-                            text: BluetoothDeviceState.toString(modelData.state)
-                            font.pixelSize: Theme.fontSizeSmall
-                            color: Qt.rgba(Theme.surfaceText.r,
-                                           Theme.surfaceText.g,
-                                           Theme.surfaceText.b, 0.7)
-                        }
-
-                        StyledText {
-                            text: {
-                                if (modelData.batteryAvailable
-                                        && modelData.battery > 0)
-                                    return "• " + Math.round(
-                                                modelData.battery * 100) + "%"
-
-                                var btBattery = BatteryService.bluetoothDevices.find(
-                                            dev => {
-                                                return dev.name === (modelData.name
-                                                                     || modelData.deviceName)
-                                                || dev.name.toLowerCase(
-                                                    ).includes(
-                                                    (modelData.name
-                                                     || modelData.deviceName).toLowerCase(
-                                                        ))
-                                                || (modelData.name
-                                                    || modelData.deviceName).toLowerCase(
-                                                    ).includes(
-                                                    dev.name.toLowerCase())
-                                            })
-                                return btBattery ? "• " + btBattery.percentage + "%" : ""
-                            }
-                            font.pixelSize: Theme.fontSizeSmall
-                            color: Qt.rgba(Theme.surfaceText.r,
-                                           Theme.surfaceText.g,
-                                           Theme.surfaceText.b, 0.7)
-                            visible: text.length > 0
-                        }
-                    }
-                }
-            }
-
-            Rectangle {
-                id: btMenuButton
-
-                width: 32
-                height: 32
-                radius: Theme.cornerRadius
-                color: btMenuButtonArea.containsMouse ? Qt.rgba(
-                                                            Theme.surfaceText.r,
-                                                            Theme.surfaceText.g,
-                                                            Theme.surfaceText.b,
-                                                            0.08) : "transparent"
-                anchors.right: parent.right
-                anchors.rightMargin: Theme.spacingM
-                anchors.verticalCenter: parent.verticalCenter
-
-                DankIcon {
-                    name: "more_vert"
-                    size: Theme.iconSize
-                    color: Theme.surfaceText
-                    opacity: 0.6
-                    anchors.centerIn: parent
-                }
-
-                MouseArea {
-                    id: btMenuButtonArea
-
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
-                    onClicked: {
-                        var contextMenu = root.findBluetoothContextMenu()
-                        if (contextMenu) {
-                            contextMenu.deviceData = modelData
-                            let localPos = btMenuButtonArea.mapToItem(
-                                    contextMenu.parentItem,
-                                    btMenuButtonArea.width / 2,
-                                    btMenuButtonArea.height)
-                            contextMenu.show(localPos.x, localPos.y)
-                        }
-                    }
-                }
-
-                Behavior on color {
-                    ColorAnimation {
-                        duration: Theme.shortDuration
-                    }
-                }
-            }
-
-            MouseArea {
-                id: btDeviceArea
-
-                anchors.fill: parent
-                anchors.rightMargin: 40
-                hoverEnabled: true
-                enabled: !BluetoothService.isDeviceBusy(modelData)
-                cursorShape: enabled ? Qt.PointingHandCursor : Qt.BusyCursor
-                onClicked: {
-                    if (modelData.connected)
-                        modelData.disconnect()
-                    else
-                        BluetoothService.connectDeviceWithTrust(modelData)
-                }
-            }
-        }
-    }
-}

Modules/ControlCenter/BluetoothTab.qml

@@ -1,107 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import Quickshell
-import Quickshell.Bluetooth
-import Quickshell.Io
-import Quickshell.Widgets
-import qs.Common
-import qs.Modules.ControlCenter.Bluetooth
-import qs.Services
-import qs.Widgets
-
-Item {
-    id: bluetoothTab
-
-    property alias bluetoothContextMenuWindow: bluetoothContextMenuWindow
-
-    DankFlickable {
-        anchors.fill: parent
-        clip: true
-        contentHeight: mainColumn.height
-        contentWidth: width
-
-        Column {
-            id: mainColumn
-
-            width: parent.width
-            spacing: Theme.spacingL
-
-            Loader {
-                width: parent.width
-                sourceComponent: toggleComponent
-            }
-
-            Loader {
-                width: parent.width
-                sourceComponent: pairedComponent
-            }
-
-            Loader {
-                width: parent.width
-                sourceComponent: availableComponent
-            }
-
-        }
-
-    }
-
-    BluetoothContextMenu {
-        id: bluetoothContextMenuWindow
-
-        parentItem: bluetoothTab
-        codecSelector: codecSelector
-    }
-
-    BluetoothCodecSelector {
-        id: codecSelector
-
-        parentItem: bluetoothTab
-    }
-
-    MouseArea {
-        anchors.fill: parent
-        visible: bluetoothContextMenuWindow.visible || codecSelector.visible
-        onClicked: {
-            bluetoothContextMenuWindow.hide();
-            codecSelector.hide();
-        }
-
-        MouseArea {
-            x: bluetoothContextMenuWindow.x
-            y: bluetoothContextMenuWindow.y
-            width: bluetoothContextMenuWindow.width
-            height: bluetoothContextMenuWindow.height
-            onClicked: {
-            }
-        }
-
-    }
-
-    Component {
-        id: toggleComponent
-
-        BluetoothToggle {
-            width: parent.width
-        }
-
-    }
-
-    Component {
-        id: pairedComponent
-
-        PairedDevicesList {
-            width: parent.width
-        }
-
-    }
-
-    Component {
-        id: availableComponent
-
-        AvailableDevicesList {
-            width: parent.width
-        }
-
-    }
-
-}