Surface color overhaul

.githooks/pre-commit

@@ -1,27 +0,0 @@
-#!/bin/bash
-
-# DISABLED for now
-exit 0
-
-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

@@ -1,15 +0,0 @@
-# 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

@@ -9,25 +9,23 @@ 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://danklinux.com/docs/dankmaterialshell/icon-theming) section to ensure your QT environment variable is configured correctly for themes.
+  - 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 -->
@@ -47,14 +45,6 @@ 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

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

.github/ISSUE_TEMPLATE/support_request.md

@@ -10,18 +10,8 @@ assignees: ""
 
 - [ ] 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/go-ci.yml

@@ -1,42 +0,0 @@
-name: Go CI
-
-on:
-  push:
-    branches:
-      - '**'
-    paths:
-      - 'core/**'
-      - '.github/workflows/go-ci.yml'
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: core
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Set up Go
-        uses: actions/setup-go@v5
-        with:
-          go-version-file: ./core/go.mod
-
-      - name: Format check
-        run: |
-          if [ "$(gofmt -s -l . | wc -l)" -gt 0 ]; then
-            echo "The following files are not formatted:"
-            gofmt -s -l .
-            exit 1
-          fi
-
-      - name: Test
-        run: go test -v ./...
-
-      - name: Build dms
-        run: go build -v ./cmd/dms
-
-      - name: Build dankinstall
-        run: go build -v ./cmd/dankinstall

.github/workflows/release.yml

@@ -1,692 +1,59 @@
-name: Release
-
+name: Create Release
 on:
   push:
     tags:
       - 'v*'
 
-permissions:
-  contents: write
-  actions: write
-
 concurrency:
   group: release-${{ github.ref_name }}
   cancel-in-progress: true
 
 jobs:
-  build-core:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        arch: [amd64, arm64]
-
-    defaults:
-      run:
-        working-directory: core
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Set up Go
-        uses: actions/setup-go@v5
-        with:
-          go-version-file: ./core/go.mod
-
-      - name: Format check
-        run: |
-          if [ "$(gofmt -s -l . | wc -l)" -gt 0 ]; then
-            echo "The following files are not formatted:"
-            gofmt -s -l .
-            exit 1
-          fi
-
-      - name: Run tests
-        run: go test -v ./...
-
-      - name: Build dankinstall (${{ matrix.arch }})
-        env:
-          GOOS: linux
-          CGO_ENABLED: 0
-          GOARCH: ${{ matrix.arch }}
-        run: |
-          set -eux
-          cd cmd/dankinstall
-          go build -trimpath -ldflags "-s -w -X main.Version=${GITHUB_REF#refs/tags/}" \
-            -o ../../dankinstall-${{ matrix.arch }}
-          cd ../..
-          gzip -9 -k dankinstall-${{ matrix.arch }}
-          sha256sum dankinstall-${{ matrix.arch }}.gz > dankinstall-${{ matrix.arch }}.gz.sha256
-
-      - name: Build dms (${{ matrix.arch }})
-        env:
-          GOOS: linux
-          CGO_ENABLED: 0
-          GOARCH: ${{ matrix.arch }}
-        run: |
-          set -eux
-          cd cmd/dms
-          go build -trimpath -ldflags "-s -w -X main.Version=${GITHUB_REF#refs/tags/}" \
-            -o ../../dms-${{ matrix.arch }}
-          cd ../..
-          gzip -9 -k dms-${{ matrix.arch }}
-          sha256sum dms-${{ matrix.arch }}.gz > dms-${{ matrix.arch }}.gz.sha256
-
-      - name: Generate shell completions
-        if: matrix.arch == 'amd64'
-        run: |
-          set -eux
-          chmod +x dms-amd64
-          ./dms-amd64 completion bash > completion.bash
-          ./dms-amd64 completion fish > completion.fish
-          ./dms-amd64 completion zsh > completion.zsh
-
-      - name: Build dms-distropkg (${{ matrix.arch }})
-        env:
-          GOOS: linux
-          CGO_ENABLED: 0
-          GOARCH: ${{ matrix.arch }}
-        run: |
-          set -eux
-          cd cmd/dms
-          go build -trimpath -tags distro_binary -ldflags "-s -w -X main.Version=${GITHUB_REF#refs/tags/}" \
-            -o ../../dms-distropkg-${{ matrix.arch }}
-          cd ../..
-          gzip -9 -k dms-distropkg-${{ matrix.arch }}
-          sha256sum dms-distropkg-${{ matrix.arch }}.gz > dms-distropkg-${{ matrix.arch }}.gz.sha256
-
-      - name: Upload artifacts (${{ matrix.arch }})
-        if: matrix.arch == 'arm64'
-        uses: actions/upload-artifact@v4
-        with:
-          name: core-assets-${{ matrix.arch }}
-          path: |
-            core/dankinstall-${{ matrix.arch }}.gz
-            core/dankinstall-${{ matrix.arch }}.gz.sha256
-            core/dms-${{ matrix.arch }}.gz
-            core/dms-${{ matrix.arch }}.gz.sha256
-            core/dms-distropkg-${{ matrix.arch }}.gz
-            core/dms-distropkg-${{ matrix.arch }}.gz.sha256
-          if-no-files-found: error
-
-      - name: Upload artifacts with completions
-        if: matrix.arch == 'amd64'
-        uses: actions/upload-artifact@v4
-        with:
-          name: core-assets-${{ matrix.arch }}
-          path: |
-            core/dankinstall-${{ matrix.arch }}.gz
-            core/dankinstall-${{ matrix.arch }}.gz.sha256
-            core/dms-${{ matrix.arch }}.gz
-            core/dms-${{ matrix.arch }}.gz.sha256
-            core/dms-distropkg-${{ matrix.arch }}.gz
-            core/dms-distropkg-${{ matrix.arch }}.gz.sha256
-            core/completion.bash
-            core/completion.fish
-            core/completion.zsh
-          if-no-files-found: error
-
-  update-versions:
-    runs-on: ubuntu-latest
-    needs: build-core
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          fetch-depth: 0
-
-      - name: Update VERSION
-        run: |
-          set -euo pipefail
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-
-          version="${GITHUB_REF#refs/tags/}"
-          version_no_v="${version#v}"
-          echo "Updating to version: $version"
-
-          # Update VERSION file in quickshell/
-          echo "${version}" > quickshell/VERSION
-
-          git add quickshell/VERSION
-
-          if ! git diff --cached --quiet; then
-            git commit -m "chore: bump version to $version"
-            git push origin HEAD:master || git push origin HEAD:main
-            echo "Pushed version updates to master"
-          else
-            echo "No version changes needed"
-          fi
-
-          # Force-push the tag to point to the commit with updated VERSION
-          git tag -f "${version}"
-          git push -f origin "${version}"
-
-  release:
+  create_release:
+    name: 📦 Create GitHub Release
     runs-on: ubuntu-24.04
-    needs: [build-core, update-versions]
-    env:
-      TAG: ${{ github.ref_name }}
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
+      - uses: actions/checkout@v4
         with:
-          fetch-depth: 0
-
-      - name: Fetch updated tag after version bump
-        run: |
-          git fetch origin --force tag ${{ github.ref_name }}
-          git checkout ${{ github.ref_name }}
-
-      - name: Download core artifacts
-        uses: actions/download-artifact@v4
-        with:
-          pattern: core-assets-*
-          merge-multiple: true
-          path: ./_core_assets
+          fetch-depth: 0 # Fetch full history for changelog generation
 
+      # Generate changelog
       - name: Generate Changelog
         id: changelog
         run: |
-          set -e
-          PREVIOUS_TAG=$(git describe --tags --abbrev=0 "${TAG}^" 2>/dev/null || echo "")
+          # Get the previous tag
+          PREVIOUS_TAG=$(git describe --tags --abbrev=0 HEAD^ 2>/dev/null || echo "")
+
           if [ -z "$PREVIOUS_TAG" ]; then
-            CHANGELOG=$(git log --oneline --pretty=format:"%an|%s (%h)" | grep -v "^github-actions\[bot\]|" | sed 's/^[^|]*|/- /' | head -50)
+            echo "No previous tag found, using all commits"
+            CHANGELOG=$(git log --oneline --pretty=format:"- %s (%h)" | head -50)
           else
-            CHANGELOG=$(git log --oneline --pretty=format:"%an|%s (%h)" "${PREVIOUS_TAG}..${TAG}" | grep -v "^github-actions\[bot\]|" | sed 's/^[^|]*|/- /')
+            echo "Generating changelog from $PREVIOUS_TAG to HEAD"
+            CHANGELOG=$(git log --oneline --pretty=format:"- %s (%h)" $PREVIOUS_TAG..HEAD)
           fi
 
-          cat > RELEASE_BODY.md << 'EOF'
-          ## Installation
-
-          ```bash
-          curl -fsSL https://install.danklinux.com | sh
-          ```
-
-          ## Assets
-
-          ### Complete Packages
-          - **`dms-full-amd64.tar.gz`** - Complete package for x86_64 systems (CLI binaries + QML source + shell completions + installation guide)
-          - **`dms-full-arm64.tar.gz`** - Complete package for ARM64 systems (CLI binaries + QML source + shell completions + installation guide)
-
-          ### Individual Components
-          - **`dms-cli-amd64.gz`** - DMS CLI binary for x86_64 systems
-          - **`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
-          - **`dankinstall-amd64.gz`** - Installer binary for x86_64 systems
-          - **`dankinstall-arm64.gz`** - Installer binary 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
+          # Create the changelog with proper formatting
+          cat > CHANGELOG.md << EOF
           ## What's Changed
 
           $CHANGELOG
 
-          **Full Changelog**: https://github.com/${{ github.repository }}/compare/${PREVIOUS_TAG}...${TAG}
+          **Full Changelog**: https://github.com/${{ github.repository }}/compare/${PREVIOUS_TAG}...${{ github.ref_name }}
           EOF
 
+          # Set output for use in release step
           echo "changelog<<EOF" >> $GITHUB_OUTPUT
-          cat RELEASE_BODY.md >> $GITHUB_OUTPUT
+          cat CHANGELOG.md >> $GITHUB_OUTPUT
           echo "EOF" >> $GITHUB_OUTPUT
 
-      - name: Prepare release assets
-        run: |
-          set -euxo pipefail
-
-          mkdir -p _release_assets
-
-          # Copy core binaries and rename dms-*.gz to dms-cli-*.gz
-          for file in _core_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
-
-          # Copy dankinstall binaries
-          cp _core_assets/dankinstall-*.gz* _release_assets/
-
-          # Copy completions
-          cp _core_assets/completion.* _release_assets/ 2>/dev/null || true
-
-          # Create QML source package (exclude build artifacts and git files)
-          # Copy root LICENSE and CONTRIBUTING.md to quickshell/ for packaging
-          cp LICENSE CONTRIBUTING.md quickshell/
-
-          # Tar the CONTENTS of quickshell/, not the directory itself
-          (cd quickshell && tar --exclude='.git' \
-              --exclude='.github' \
-              --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
-            mkdir -p _temp_full/completions
-
-            # Extract QML source
-            tar -xzf _release_assets/dms-qml.tar.gz -C _temp_full/dms
-
-            # Add CLI binaries
-            if [ -f "_core_assets/dms-${arch}.gz" ]; then
-              gunzip -c "_core_assets/dms-${arch}.gz" > _temp_full/bin/dms
-              chmod +x _temp_full/bin/dms
-            fi
-
-            if [ -f "_core_assets/dms-distropkg-${arch}.gz" ]; then
-              gunzip -c "_core_assets/dms-distropkg-${arch}.gz" > _temp_full/bin/dms-distropkg
-              chmod +x _temp_full/bin/dms-distropkg
-            fi
-
-            # Add shell completions
-            for completion in _core_assets/completion.*; do
-              if [ -f "$completion" ]; then
-                cp "$completion" _temp_full/completions/
-              fi
-            done
-
-            # Copy docs directory
-            if [ -d "docs" ]; then
-              cp -r docs _temp_full/
-            fi
-
-            # Create installation guide
-            cat > _temp_full/INSTALL.md << 'EOFINSTALL'
-          # 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
-             ```
-
-          3. **Install shell completions (optional):**
-             ```bash
-             # Bash
-             sudo install -m 644 completions/completion.bash /usr/share/bash-completion/completions/dms
-
-             # Fish
-             sudo install -m 644 completions/completion.fish /usr/share/fish/vendor_completions.d/dms.fish
-
-             # Zsh
-             sudo install -m 644 completions/completion.zsh /usr/share/zsh/site-functions/_dms
-             ```
-
-          4. **Start the shell:**
-             ```bash
-             dms run
-             ```
-
-          ## 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: `DMS_LOG_LEVEL=debug dms run`
-          - Ensure all dependencies are installed
-          EOFINSTALL
-
-            # 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
-
+      # Create GitHub Release
       - name: Create GitHub Release
-        uses: softprops/action-gh-release@v2
-        with:
-          tag_name: ${{ env.TAG }}
-          name: Release ${{ env.TAG }}
-          body: ${{ steps.changelog.outputs.changelog }}
-          files: _release_assets/**
-          draft: false
-          prerelease: ${{ contains(env.TAG, '-') }}
+        uses: comnoco/create-release-action@v2.0.5
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  trigger-obs-update:
-    runs-on: ubuntu-latest
-    needs: release
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      
-      - name: Install OSC
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y osc
-          
-          mkdir -p ~/.config/osc
-          cat > ~/.config/osc/oscrc << EOF
-          [general]
-          apiurl = https://api.opensuse.org
-          
-          [https://api.opensuse.org]
-          user = ${{ secrets.OBS_USERNAME }}
-          pass = ${{ secrets.OBS_PASSWORD }}
-          EOF
-          chmod 600 ~/.config/osc/oscrc
-      
-      - name: Update OBS packages
-        run: |
-          VERSION="${{ github.ref_name }}"
-          cd distro
-          bash scripts/obs-upload.sh dms "Update to $VERSION"
-
-  trigger-ppa-update:
-    runs-on: ubuntu-latest
-    needs: release
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      
-      - name: Install build dependencies
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y \
-            debhelper \
-            devscripts \
-            dput \
-            lftp \
-            build-essential \
-            fakeroot \
-            dpkg-dev
-      
-      - name: Configure GPG
-        env:
-          GPG_KEY: ${{ secrets.GPG_PRIVATE_KEY }}
-        run: |
-          echo "$GPG_KEY" | gpg --import
-          GPG_KEY_ID=$(gpg --list-secret-keys --keyid-format LONG | grep sec | awk '{print $2}' | cut -d'/' -f2)
-          echo "DEBSIGN_KEYID=$GPG_KEY_ID" >> $GITHUB_ENV
-      
-      - name: Upload to PPA
-        run: |
-          VERSION="${{ github.ref_name }}"
-          cd distro/ubuntu/ppa
-          bash create-and-upload.sh ../dms dms questing
-
-  copr-build:
-    runs-on: ubuntu-latest
-    needs: release
-    env:
-      TAG: ${{ github.ref_name }}
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Determine version
-        id: version
-        run: |
-          VERSION="${TAG#v}"
-          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}
-
-      - name: Download release assets
-        run: |
-          VERSION="${{ steps.version.outputs.version }}"
-          cd ~/rpmbuild/SOURCES
-
-          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
-          }
-
-      - 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:        MIT
-          URL:            https://github.com/AvengeMedia/DankMaterialShell
-
-          Source0:        dms-qml.tar.gz
-
-          BuildRequires:  gzip
-          BuildRequires:  wget
-          BuildRequires:  systemd-rpm-macros
-
-          Requires:       (quickshell or quickshell-git)
-          Requires:       accountsservice
-          Requires:       dms-cli
-          Requires:       dgop
-
-          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:        MIT
-          URL:            https://github.com/AvengeMedia/DankMaterialShell
-
-          %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
-          case "%{_arch}" in
-            x86_64)
-              ARCH_SUFFIX="amd64"
-              ;;
-            aarch64)
-              ARCH_SUFFIX="arm64"
-              ;;
-            *)
-              echo "Unsupported architecture: %{_arch}"
-              exit 1
-              ;;
-          esac
-
-          wget -O %{_builddir}/dms-cli.gz "https://github.com/AvengeMedia/DankMaterialShell/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
-
-          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 -d %{buildroot}%{_datadir}/bash-completion/completions
-          install -d %{buildroot}%{_datadir}/zsh/site-functions
-          install -d %{buildroot}%{_datadir}/fish/vendor_completions.d
-          %{_builddir}/dms-cli completion bash > %{buildroot}%{_datadir}/bash-completion/completions/dms || :
-          %{_builddir}/dms-cli completion zsh > %{buildroot}%{_datadir}/zsh/site-functions/_dms || :
-          %{_builddir}/dms-cli completion fish > %{buildroot}%{_datadir}/fish/vendor_completions.d/dms.fish || :
-
-          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 -rf %{buildroot}%{_datadir}/quickshell/dms/distro
-
-          %posttrans
-          if [ -d "%{_sysconfdir}/xdg/quickshell/dms" ]; then
-              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
-
-          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
-          %{_datadir}/bash-completion/completions/dms
-          %{_datadir}/zsh/site-functions/_dms
-          %{_datadir}/fish/vendor_completions.d/dms.fish
-
-          %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
-
-      - name: Build SRPM
-        id: build
-        run: |
-          cd ~/rpmbuild/SPECS
-          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"
-
-      - 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
-
-      - name: Upload to Copr
-        run: |
-          SRPM="${{ steps.build.outputs.srpm_path }}"
-          VERSION="${{ steps.version.outputs.version }}"
-
-          echo "Uploading SRPM to avengemedia/dms..."
-          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: https://copr.fedorainfracloud.org/coprs/avengemedia/dms/build/$BUILD_ID/"
-          fi
+          tag_name: ${{ github.ref_name }}
+          release_name: Release ${{ github.ref_name }}
+          body: ${{ steps.changelog.outputs.changelog }}
+          draft: false
+          prerelease: ${{ contains(github.ref_name, '-') }}

.github/workflows/run-copr.yml

@@ -1,315 +0,0 @@
-name: DMS Copr Stable Release
-
-on:
-  workflow_dispatch:
-    inputs:
-      version:
-        description: 'Versioning (e.g., 0.1.14, leave empty for latest release)'
-        required: false
-        default: ''
-      release:
-        description: 'Release number (e.g., 1, 2, 3 for hotfixes)'
-        required: false
-        default: '1'
-
-jobs:
-  build-and-upload:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-      
-      - name: Determine version
-        id: version
-        run: |
-          # Get version from manual input or latest release
-          if [ -n "${{ github.event.inputs.version }}" ]; then
-            VERSION="${{ github.event.inputs.version }}"
-            echo "Using manual version: $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
-
-          RELEASE="${{ github.event.inputs.release }}"
-          if [ -z "$RELEASE" ]; then
-            RELEASE="1"
-          fi
-
-          echo "version=$VERSION" >> $GITHUB_OUTPUT
-          echo "release=$RELEASE" >> $GITHUB_OUTPUT
-          echo "✅ Building DMS hotfix version: $VERSION-$RELEASE"
-      
-      - 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 }}"
-          RELEASE="${{ steps.version.outputs.release }}"
-          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:        RELEASE_PLACEHOLDER%{?dist}
-          Summary:        %{pkg_summary}
-
-          License:        MIT
-          URL:            https://github.com/AvengeMedia/DankMaterialShell
-
-          Source0:        dms-qml.tar.gz
-
-          BuildRequires:  gzip
-          BuildRequires:  wget
-          BuildRequires:  systemd-rpm-macros
-
-          Requires:       (quickshell or quickshell-git)
-          Requires:       accountsservice
-          Requires:       dms-cli
-          Requires:       dgop
-
-          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:        MIT
-          URL:            https://github.com/AvengeMedia/DankMaterialShell
-
-          %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/DankMaterialShell/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
-
-          # Shell completions
-          install -d %{buildroot}%{_datadir}/bash-completion/completions
-          install -d %{buildroot}%{_datadir}/zsh/site-functions
-          install -d %{buildroot}%{_datadir}/fish/vendor_completions.d
-          %{_builddir}/dms-cli completion bash > %{buildroot}%{_datadir}/bash-completion/completions/dms || :
-          %{_builddir}/dms-cli completion zsh > %{buildroot}%{_datadir}/zsh/site-functions/_dms || :
-          %{_builddir}/dms-cli completion fish > %{buildroot}%{_datadir}/fish/vendor_completions.d/dms.fish || :
-
-          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 -rf %{buildroot}%{_datadir}/quickshell/dms/distro
-
-          %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
-          %{_datadir}/bash-completion/completions/dms
-          %{_datadir}/zsh/site-functions/_dms
-          %{_datadir}/fish/vendor_completions.d/dms.fish
-
-          %files -n dgop
-          %{_bindir}/dgop
-
-          %changelog
-          * CHANGELOG_DATE_PLACEHOLDER AvengeMedia <contact@avengemedia.com> - VERSION_PLACEHOLDER-RELEASE_PLACEHOLDER
-          - 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/RELEASE_PLACEHOLDER/${RELEASE}/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}-${RELEASE}"
-          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 }}-${{ steps.version.outputs.release }}" >> $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/run-obs.yml

@@ -1,238 +0,0 @@
-name: Update OBS Packages
-
-on:
-  workflow_dispatch:
-    inputs:
-      package:
-        description: 'Package to update (dms, dms-git, or all)'
-        required: false
-        default: 'all'
-      rebuild_release:
-        description: 'Release number for rebuilds (e.g., 2, 3, 4 to increment spec Release)'
-        required: false
-        default: ''
-  push:
-    tags:
-      - 'v*'
-  schedule:
-    - cron: '0 */3 * * *'  # Every 3 hours for dms-git builds
-
-jobs:
-  check-updates:
-    name: Check for updates
-    runs-on: ubuntu-latest
-    
-    outputs:
-      has_updates: ${{ steps.check.outputs.has_updates }}
-      packages: ${{ steps.check.outputs.packages }}
-      version: ${{ steps.check.outputs.version }}
-    
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      
-      - name: Install OSC
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y osc
-          
-          mkdir -p ~/.config/osc
-          cat > ~/.config/osc/oscrc << EOF
-          [general]
-          apiurl = https://api.opensuse.org
-          
-          [https://api.opensuse.org]
-          user = ${{ secrets.OBS_USERNAME }}
-          pass = ${{ secrets.OBS_PASSWORD }}
-          EOF
-          chmod 600 ~/.config/osc/oscrc
-      
-      - name: Check for updates
-        id: check
-        run: |
-          if [[ "${{ github.event_name }}" == "push" && "${{ github.ref }}" =~ ^refs/tags/ ]]; then
-            echo "packages=dms" >> $GITHUB_OUTPUT
-            VERSION="${GITHUB_REF#refs/tags/}"
-            echo "version=$VERSION" >> $GITHUB_OUTPUT
-            echo "has_updates=true" >> $GITHUB_OUTPUT
-            echo "Triggered by tag: $VERSION (always update)"
-          elif [[ "${{ github.event_name }}" == "schedule" ]]; then
-            echo "packages=dms-git" >> $GITHUB_OUTPUT
-            echo "Checking if dms-git source has changed..."
-            
-            # Get latest commit hash from master branch
-            LATEST_COMMIT=$(git rev-parse origin/master 2>/dev/null || git rev-parse master 2>/dev/null || echo "")
-            
-            if [[ -z "$LATEST_COMMIT" ]]; then
-              echo "has_updates=true" >> $GITHUB_OUTPUT
-              echo "Could not determine git commit, proceeding with update"
-            else
-              # Check OBS for last uploaded commit
-              OBS_BASE="$HOME/.cache/osc-checkouts"
-              mkdir -p "$OBS_BASE"
-              OBS_PROJECT="home:AvengeMedia:dms-git"
-              
-              if [[ -d "$OBS_BASE/$OBS_PROJECT/dms-git" ]]; then
-                cd "$OBS_BASE/$OBS_PROJECT/dms-git"
-                osc up -q 2>/dev/null || true
-                
-                # Check tarball age - if older than 3 hours, update needed
-                if [[ -f "dms-git-source.tar.gz" ]]; then
-                  TARBALL_MTIME=$(stat -c%Y "dms-git-source.tar.gz" 2>/dev/null || echo "0")
-                  CURRENT_TIME=$(date +%s)
-                  AGE_SECONDS=$((CURRENT_TIME - TARBALL_MTIME))
-                  AGE_HOURS=$((AGE_SECONDS / 3600))
-                  
-                  # If tarball is older than 3 hours, check for new commits
-                  if [[ $AGE_HOURS -ge 3 ]]; then
-                    # Check if there are new commits in the last 3 hours
-                    cd "${{ github.workspace }}"
-                    NEW_COMMITS=$(git log --since="3 hours ago" --oneline origin/master 2>/dev/null | wc -l)
-                    
-                    if [[ $NEW_COMMITS -gt 0 ]]; then
-                      echo "has_updates=true" >> $GITHUB_OUTPUT
-                      echo "📋 New commits detected in last 3 hours, update needed"
-                    else
-                      echo "has_updates=false" >> $GITHUB_OUTPUT
-                      echo "📋 No new commits in last 3 hours, skipping update"
-                    fi
-                  else
-                    echo "has_updates=false" >> $GITHUB_OUTPUT
-                    echo "📋 Recent upload exists (< 3 hours), skipping update"
-                  fi
-                else
-                  echo "has_updates=true" >> $GITHUB_OUTPUT
-                  echo "📋 No existing tarball in OBS, update needed"
-                fi
-                cd "${{ github.workspace }}"
-              else
-                echo "has_updates=true" >> $GITHUB_OUTPUT
-                echo "📋 First upload to OBS, update needed"
-              fi
-            fi
-          elif [[ -n "${{ github.event.inputs.package }}" ]]; then
-            echo "packages=${{ github.event.inputs.package }}" >> $GITHUB_OUTPUT
-            echo "has_updates=true" >> $GITHUB_OUTPUT
-            echo "Manual trigger: ${{ github.event.inputs.package }}"
-          else
-            echo "packages=all" >> $GITHUB_OUTPUT
-            echo "has_updates=true" >> $GITHUB_OUTPUT
-          fi
-
-  update-obs:
-    name: Upload to OBS
-    needs: check-updates
-    runs-on: ubuntu-latest
-    if: |
-      github.event_name == 'workflow_dispatch' ||
-      needs.check-updates.outputs.has_updates == 'true'
-    
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      
-      - name: Determine packages to update
-        id: packages
-        run: |
-          if [[ "${{ github.event_name }}" == "push" && "${{ github.ref }}" =~ ^refs/tags/ ]]; then
-            echo "packages=dms" >> $GITHUB_OUTPUT
-            VERSION="${GITHUB_REF#refs/tags/}"
-            echo "version=$VERSION" >> $GITHUB_OUTPUT
-            echo "Triggered by tag: $VERSION"
-          elif [[ "${{ github.event_name }}" == "schedule" ]]; then
-            echo "packages=${{ needs.check-updates.outputs.packages }}" >> $GITHUB_OUTPUT
-            echo "Triggered by schedule: updating git package"
-          elif [[ -n "${{ github.event.inputs.package }}" ]]; then
-            echo "packages=${{ github.event.inputs.package }}" >> $GITHUB_OUTPUT
-            echo "Manual trigger: ${{ github.event.inputs.package }}"
-          else
-            echo "packages=${{ needs.check-updates.outputs.packages }}" >> $GITHUB_OUTPUT
-          fi
-      
-      - name: Update dms-git spec version
-        if: contains(steps.packages.outputs.packages, 'dms-git') || steps.packages.outputs.packages == 'all'
-        run: |
-          # Get commit info for dms-git versioning
-          COMMIT_HASH=$(git rev-parse --short=8 HEAD)
-          COMMIT_COUNT=$(git rev-list --count HEAD)
-          BASE_VERSION=$(grep -oP '^Version:\s+\K[0-9.]+' distro/opensuse/dms.spec | head -1 || echo "0.6.2")
-          
-          NEW_VERSION="${BASE_VERSION}+git${COMMIT_COUNT}.${COMMIT_HASH}"
-          echo "📦 Updating dms-git.spec to version: $NEW_VERSION"
-          
-          # Update version in spec
-          sed -i "s/^Version:.*/Version:        $NEW_VERSION/" distro/opensuse/dms-git.spec
-          
-          # Add changelog entry
-          DATE_STR=$(date "+%a %b %d %Y")
-          CHANGELOG_ENTRY="* $DATE_STR Avenge Media <AvengeMedia.US@gmail.com> - ${NEW_VERSION}-1\n- Git snapshot (commit $COMMIT_COUNT: $COMMIT_HASH)"
-          sed -i "/%changelog/a\\$CHANGELOG_ENTRY" distro/opensuse/dms-git.spec
-      
-      - name: Update dms stable version
-        if: steps.packages.outputs.version != ''
-        run: |
-          VERSION="${{ steps.packages.outputs.version }}"
-          VERSION_NO_V="${VERSION#v}"
-          echo "Updating packaging to version $VERSION_NO_V"
-          
-          # Update openSUSE dms spec (stable only)
-          sed -i "s/^Version:.*/Version:        $VERSION_NO_V/" distro/opensuse/dms.spec
-          
-          # Update Debian _service files
-          for service in distro/debian/*/_service; do
-            if [[ -f "$service" ]]; then
-              sed -i "s|<param name=\"revision\">v[0-9.]*</param>|<param name=\"revision\">$VERSION</param>|" "$service"
-            fi
-          done
-      
-      - name: Install OSC
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y osc
-          
-          mkdir -p ~/.config/osc
-          cat > ~/.config/osc/oscrc << EOF
-          [general]
-          apiurl = https://api.opensuse.org
-          
-          [https://api.opensuse.org]
-          user = ${{ secrets.OBS_USERNAME }}
-          pass = ${{ secrets.OBS_PASSWORD }}
-          EOF
-          chmod 600 ~/.config/osc/oscrc
-      
-      - name: Upload to OBS
-        env:
-          FORCE_REBUILD: ${{ github.event_name == 'workflow_dispatch' && 'true' || '' }}
-          REBUILD_RELEASE: ${{ github.event.inputs.rebuild_release }}
-        run: |
-          PACKAGES="${{ steps.packages.outputs.packages }}"
-          MESSAGE="Automated update from GitHub Actions"
-          
-          if [[ -n "${{ steps.packages.outputs.version }}" ]]; then
-            MESSAGE="Update to ${{ steps.packages.outputs.version }}"
-          fi
-          
-          if [[ "$PACKAGES" == "all" ]]; then
-            bash distro/scripts/obs-upload.sh dms "$MESSAGE"
-            bash distro/scripts/obs-upload.sh dms-git "Automated git update"
-          else
-            bash distro/scripts/obs-upload.sh "$PACKAGES" "$MESSAGE"
-          fi
-      
-      - name: Summary
-        run: |
-          echo "### OBS Package Update Complete" >> $GITHUB_STEP_SUMMARY
-          echo "" >> $GITHUB_STEP_SUMMARY
-          echo "- **Packages**: ${{ steps.packages.outputs.packages }}" >> $GITHUB_STEP_SUMMARY
-          if [[ -n "${{ steps.packages.outputs.version }}" ]]; then
-            echo "- **Version**: ${{ steps.packages.outputs.version }}" >> $GITHUB_STEP_SUMMARY
-          fi
-          if [[ "${{ needs.check-updates.outputs.has_updates }}" == "false" ]]; then
-            echo "- **Status**: Skipped (no changes detected)" >> $GITHUB_STEP_SUMMARY
-          fi
-          echo "- **Project**: https://build.opensuse.org/project/show/home:AvengeMedia" >> $GITHUB_STEP_SUMMARY

.github/workflows/run-ppa.yml

@@ -1,108 +0,0 @@
-name: Update PPA Packages
-
-on:
-  workflow_dispatch:
-    inputs:
-      package:
-        description: 'Package to upload (dms, dms-git, or all)'
-        required: false
-        default: 'dms-git'
-      rebuild_release:
-        description: 'Release number for rebuilds (e.g., 2, 3, 4 for ppa2, ppa3, ppa4)'
-        required: false
-        default: ''
-  schedule:
-    - cron: '0 */3 * * *'  # Every 3 hours for dms-git builds
-
-jobs:
-  upload-ppa:
-    runs-on: ubuntu-latest
-    
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      
-      - name: Install build dependencies
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y \
-            debhelper \
-            devscripts \
-            dput \
-            lftp \
-            build-essential \
-            fakeroot \
-            dpkg-dev
-      
-      - name: Configure GPG
-        env:
-          GPG_KEY: ${{ secrets.GPG_PRIVATE_KEY }}
-        run: |
-          echo "$GPG_KEY" | gpg --import
-          GPG_KEY_ID=$(gpg --list-secret-keys --keyid-format LONG | grep sec | awk '{print $2}' | cut -d'/' -f2)
-          echo "DEBSIGN_KEYID=$GPG_KEY_ID" >> $GITHUB_ENV
-      
-      - name: Determine packages to upload
-        id: packages
-        run: |
-          if [[ "${{ github.event_name }}" == "schedule" ]]; then
-            echo "packages=dms-git" >> $GITHUB_OUTPUT
-            echo "Triggered by schedule: uploading git package"
-          elif [[ -n "${{ github.event.inputs.package }}" ]]; then
-            echo "packages=${{ github.event.inputs.package }}" >> $GITHUB_OUTPUT
-            echo "Manual trigger: ${{ github.event.inputs.package }}"
-          else
-            echo "packages=dms-git" >> $GITHUB_OUTPUT
-          fi
-      
-      - name: Upload to PPA
-        env:
-          REBUILD_RELEASE: ${{ github.event.inputs.rebuild_release }}
-        run: |
-          PACKAGES="${{ steps.packages.outputs.packages }}"
-          
-          if [[ "$PACKAGES" == "all" ]]; then
-            echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-            echo "Uploading dms to PPA..."
-            if [ -n "$REBUILD_RELEASE" ]; then
-              echo "🔄 Using rebuild release number: ppa$REBUILD_RELEASE"
-            fi
-            echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-            bash distro/scripts/ppa-upload.sh "distro/ubuntu/dms" dms questing
-            
-            echo ""
-            echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-            echo "Uploading dms-git to PPA..."
-            echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-            bash distro/scripts/ppa-upload.sh "distro/ubuntu/dms-git" dms-git questing
-          else
-            PPA_NAME="$PACKAGES"
-            echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-            echo "Uploading $PACKAGES to PPA..."
-            echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-            bash distro/scripts/ppa-upload.sh "distro/ubuntu/$PACKAGES" "$PPA_NAME" questing
-          fi
-      
-      - name: Summary
-        run: |
-          echo "### PPA Package Upload Complete" >> $GITHUB_STEP_SUMMARY
-          echo "" >> $GITHUB_STEP_SUMMARY
-          echo "- **Packages**: ${{ steps.packages.outputs.packages }}" >> $GITHUB_STEP_SUMMARY
-          
-          PACKAGES="${{ steps.packages.outputs.packages }}"
-          if [[ "$PACKAGES" == "all" ]]; then
-            echo "- **PPA dms**: https://launchpad.net/~avengemedia/+archive/ubuntu/dms/+packages" >> $GITHUB_STEP_SUMMARY
-            echo "- **PPA dms-git**: https://launchpad.net/~avengemedia/+archive/ubuntu/dms-git/+packages" >> $GITHUB_STEP_SUMMARY
-          elif [[ "$PACKAGES" == "dms" ]]; then
-            echo "- **PPA**: https://launchpad.net/~avengemedia/+archive/ubuntu/dms/+packages" >> $GITHUB_STEP_SUMMARY
-          elif [[ "$PACKAGES" == "dms-git" ]]; then
-            echo "- **PPA**: https://launchpad.net/~avengemedia/+archive/ubuntu/dms-git/+packages" >> $GITHUB_STEP_SUMMARY
-          fi
-          
-          if [[ -n "${{ steps.packages.outputs.version }}" ]]; then
-            echo "- **Version**: ${{ steps.packages.outputs.version }}" >> $GITHUB_STEP_SUMMARY
-          fi
-          echo "" >> $GITHUB_STEP_SUMMARY
-          echo "Builds will appear once Launchpad processes the uploads." >> $GITHUB_STEP_SUMMARY

.github/workflows/update-vendor-hash.yml

@@ -1,90 +0,0 @@
-name: Update Vendor Hash
-
-on:
-  push:
-    paths:
-      - "core/go.mod"
-      - "core/go.sum"
-    branches:
-      - master
-
-jobs:
-  update-vendor-hash:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Install Nix
-        uses: cachix/install-nix-action@v31
-
-      - name: Update vendorHash in flake.nix
-        run: |
-          set -euo pipefail
-
-          # Try to build and capture the expected hash from error message
-          echo "Attempting nix build to get new vendorHash..."
-
-          if output=$(nix build .#dmsCli 2>&1); then
-            echo "Build succeeded, no hash update needed"
-            exit 0
-          fi
-
-          # Extract the expected hash from the error message
-          new_hash=$(echo "$output" | grep -oP "got:\s+\K\S+" | head -n1)
-
-          if [ -z "$new_hash" ]; then
-            echo "Could not extract new vendorHash from build output"
-            echo "Build output:"
-            echo "$output"
-            exit 1
-          fi
-
-          echo "New vendorHash: $new_hash"
-
-          # Get current hash from flake.nix
-          current_hash=$(grep -oP 'vendorHash = "\K[^"]+' flake.nix)
-          echo "Current vendorHash: $current_hash"
-
-          if [ "$current_hash" = "$new_hash" ]; then
-            echo "vendorHash is already up to date"
-            exit 0
-          fi
-
-          # Update the hash in flake.nix
-          sed -i "s|vendorHash = \"$current_hash\"|vendorHash = \"$new_hash\"|" flake.nix
-
-          # Verify the build works with the new hash
-          echo "Verifying build with new vendorHash..."
-          nix build .#dmsCli
-
-          echo "vendorHash updated successfully!"
-
-      - name: Commit and push vendorHash update
-        run: |
-          set -euo pipefail
-
-          if ! git diff --quiet flake.nix; then
-            git config user.name "github-actions[bot]"
-            git config user.email "github-actions[bot]@users.noreply.github.com"
-
-            git add flake.nix
-            git commit -m "nix: update vendorHash for go.mod changes"
-
-            for attempt in 1 2 3; do
-              if git push; then
-                echo "Successfully pushed vendorHash update"
-                exit 0
-              fi
-              echo "Push attempt $attempt failed, pulling and retrying..."
-              git pull --rebase
-              sleep $((attempt*2))
-            done
-
-            echo "Failed to push after retries" >&2
-            exit 1
-          else
-            echo "No changes to flake.nix"
-          fi

.gitignore

@@ -27,6 +27,7 @@ qrc_*.cpp
 ui_*.h
 *.qmlc
 *.jsc
+Makefile*
 *build-*
 *.qm
 *.prl
@@ -101,44 +102,3 @@ go.work.sum
 # Editor/IDE
 # .idea/
 # .vscode/
-
-# If you prefer the allow list template instead of the deny list, see community template:
-# https://github.com/github/gitignore/blob/main/community/Golang/Go.AllowList.gitignore
-#
-# Binaries for programs and plugins
-*.exe
-*.exe~
-*.dll
-*.so
-*.dylib
-
-# Test binary, built with `go test -c`
-*.test
-
-# Code coverage profiles and other test artifacts
-*.out
-coverage.*
-*.coverprofile
-profile.cov
-
-# Dependency directories (remove the comment below to include it)
-# vendor/
-
-# Go workspace file
-go.work
-go.work.sum
-
-# env file
-.env
-
-# Editor/IDE
-# .idea/
-# .vscode/
-
-bin/
-
-# Extracted source trees in Ubuntu package directories  
-distro/ubuntu/*/dms-git-repo/
-distro/ubuntu/*/DankMaterialShell-*/
-distro/ubuntu/danklinux/*/dsearch-*/
-distro/ubuntu/danklinux/*/dgop-*/

CLAUDE.md

@@ -63,9 +63,6 @@ quickshell -p shell.qml
 # Or use the shorthand
 qs -p .
 
-# Run with verbose output for debugging
-qs -v -p shell.qml
-
 # Code formatting and linting
 qmlfmt -t 4 -i 4 -b 250 -w /path/to/file.qml    # Format a QML file (requires qmlfmt, do not use qmlformat)
 qmllint **/*.qml         # Lint all QML files for syntax errors
@@ -92,7 +89,6 @@ shell.qml           # Main entry point (minimal orchestration)
 │   ├── DisplayService.qml
 │   ├── NotificationService.qml
 │   ├── WeatherService.qml
-│   ├── PluginService.qml
 │   └── [14 more services]
 ├── Modules/        # UI components (93 files)
 │   ├── TopBar/     # Panel components (13 files)
@@ -108,21 +104,15 @@ 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]
-└── plugins/        # External plugins directory ($CONFIGPATH/DankMaterialShell/plugins/)
-    └── PluginName/ # Example Plugin structure
-        ├── plugin.json            # Plugin manifest
-        ├── PluginNameWidget.qml   # Widget component
-        └── PluginNameSettings.qml # Settings UI
+└── Widgets/        # Reusable UI controls (19 files)
+    ├── DankIcon.qml
+    ├── DankSlider.qml
+    ├── DankToggle.qml
+    ├── DankTabBar.qml
+    ├── DankGridView.qml
+    ├── DankListView.qml
+    └── [13 more widgets]
 ```
 
 ### Component Organization
@@ -173,12 +163,6 @@ 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**:
@@ -446,200 +430,6 @@ 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
@@ -664,7 +454,6 @@ Daemon plugins run invisibly in the background without any UI components. They'r
 - **Function Discovery**: Use grep/search tools to find existing utility functions before implementing new ones
 - **Modern QML Patterns**: Leverage new widgets like DankTextField, DankDropdown, CachingImage
 - **Structured Organization**: Follow the established Services/Modules/Widgets/Modals separation
-- **Plugin System**: For user extensions, create plugins instead of modifying core modules - see docs/PLUGINS.md
 
 ### Common Widget Patterns
 

CONTRIBUTING.md

@@ -1,43 +1,29 @@
 # Contributing
 
-Contributions are welcome and encouraged.
+Contributions are welcome and encourages.
 
-To contribute fork this repository, make your changes, and open a pull request.
+## Formatting
 
-## VSCode Setup
+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.
 
-This is a monorepo, the easiest thing to do is to open an editor in either `quickshell`, `core`, or both depending on which part of the project you are working on.
+We need some consistent style, so this at least gives the same formatter that Qt Creator uses.
 
-### QML (`quickshell` directory)
-
-1. Install the [QML Extension](https://doc.qt.io/vscodeext/)
-2. Configure `ctrl+shift+p` -> user preferences (json) with qmlls path
+You can configure it to format on save in vscode by configuring the "custom local formatters" extension then adding this to settings json.
 
 ```json
-{
-  "qt-qml.doNotAskForQmllsDownload": true,
-  "qt-qml.qmlls.customExePath": "/usr/lib/qt6/bin/qmlls"
-}
+  "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
+  },
 ```
 
-3. Create empty `.qmlls.ini` file in `quickshell/` directory
-
-```bash
-cd quickshell
-touch .qmlls.ini
-```
-
-4. Restart dms to generate the `.qmlls.ini` file
-
-5. Make your changes, test, and open a pull request.
-
-### GO (`core` directory)
-
-1. Install the [Go Extension](https://code.visualstudio.com/docs/languages/go)
-2. Ensure code is formatted with `make fmt`
-3. Add appropriate test coverage and ensure tests pass with `make test`
-4. Run `go mod tidy`
-5. Open pull request
+Sometimes it just breaks code though. Like turning `"_\""` into `"_""`, so you may not want to do formatOnSave.
 
 ## Pull request
 

Common/AppUsageHistoryData.qml

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

Common/CacheUtils.qml

@@ -1,24 +1,28 @@
-pragma Singleton
-pragma ComponentBehavior: Bound
 import Quickshell
+pragma Singleton
 
 Singleton {
     id: root
 
     // Clear all image cache
     function clearImageCache() {
-        Quickshell.execDetached(["rm", "-rf", Paths.stringify(Paths.imagecache)]);
-        Paths.mkdir(Paths.imagecache);
+        Quickshell.execDetached(["rm", "-rf", Paths.stringify(
+                                     Paths.imagecache)])
+        Paths.mkdir(Paths.imagecache)
     }
 
     // Clear cache older than specified minutes
     function clearOldCache(ageInMinutes) {
-        Quickshell.execDetached(["find", Paths.stringify(Paths.imagecache), "-name", "*.png", "-mmin", `+${ageInMinutes}`, "-delete"]);
+        Quickshell.execDetached(
+                    ["find", Paths.stringify(
+                         Paths.imagecache), "-name", "*.png", "-mmin", `+${ageInMinutes}`, "-delete"])
     }
 
     // Clear cache for specific size
     function clearCacheForSize(size) {
-        Quickshell.execDetached(["find", Paths.stringify(Paths.imagecache), "-name", `*@${size}x${size}.png`, "-delete"]);
+        Quickshell.execDetached(
+                    ["find", Paths.stringify(
+                         Paths.imagecache), "-name", `*@${size}x${size}.png`, "-delete"])
     }
 
     // Get cache size in MB
@@ -26,7 +30,8 @@ Singleton {
         var process = Qt.createQmlObject(`
                                          import Quickshell.Io
                                          Process {
-                                         command: ["du", "-sm", "${Paths.stringify(Paths.imagecache)}"]
+                                         command: ["du", "-sm", "${Paths.stringify(
+                                             Paths.imagecache)}"]
                                          running: true
                                          stdout: StdioCollector {
                                          onStreamFinished: {
@@ -35,6 +40,6 @@ Singleton {
                                          }
                                          }
                                          }
-                                         `, root);
+                                         `, root)
     }
 }

Common/ModalManager.qml

@@ -1,5 +1,4 @@
 pragma Singleton
-pragma ComponentBehavior: Bound
 
 import Quickshell
 import QtQuick
@@ -11,11 +10,7 @@ Singleton {
 
     function openModal(modal) {
         if (!modal.allowStacking) {
-            closeAllModalsExcept(modal);
+            closeAllModalsExcept(modal)
         }
-        if (!modal.keepPopoutsOpen) {
-            PopoutManager.closeAllPopouts();
-        }
-        TrayMenuManager.closeAllMenus();
     }
 }

Common/Paths.qml

@@ -0,0 +1,61 @@
+pragma Singleton
+
+import Quickshell
+import QtCore
+
+Singleton {
+    id: root
+
+    readonly property url home: StandardPaths.standardLocations(
+                                    StandardPaths.HomeLocation)[0]
+    readonly property url pictures: StandardPaths.standardLocations(
+                                        StandardPaths.PicturesLocation)[0]
+
+    readonly property url data: `${StandardPaths.standardLocations(
+                                    StandardPaths.GenericDataLocation)[0]}/DankMaterialShell`
+    readonly property url state: `${StandardPaths.standardLocations(
+                                     StandardPaths.GenericStateLocation)[0]}/DankMaterialShell`
+    readonly property url cache: `${StandardPaths.standardLocations(
+                                     StandardPaths.GenericCacheLocation)[0]}/DankMaterialShell`
+    readonly property url config: `${StandardPaths.standardLocations(
+                                      StandardPaths.GenericConfigLocation)[0]}/DankMaterialShell`
+
+    readonly property url imagecache: `${cache}/imagecache`
+
+    function stringify(path: url): string {
+        return path.toString().replace(/%20/g, " ")
+    }
+
+    function expandTilde(path: string): string {
+        return strip(path.replace("~", stringify(root.home)))
+    }
+
+    function shortenHome(path: string): string {
+        return path.replace(strip(root.home), "~")
+    }
+
+    function strip(path: url): string {
+        return stringify(path).replace("file://", "")
+    }
+
+    function mkdir(path: url): void {
+        Quickshell.execDetached(["mkdir", "-p", strip(path)])
+    }
+
+    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/SessionData.qml

@@ -0,0 +1,698 @@
+pragma Singleton
+pragma ComponentBehavior: Bound
+
+import QtCore
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import qs.Common
+import qs.Services
+
+Singleton {
+
+    id: root
+
+    property bool isLightMode: false
+    property string wallpaperPath: ""
+    property string wallpaperLastPath: ""
+    property string profileLastPath: ""
+    property bool perMonitorWallpaper: false
+    property var monitorWallpapers: ({})
+    property bool doNotDisturb: false
+    property bool nightModeEnabled: false
+    property int nightModeTemperature: 4500
+    property bool nightModeAutoEnabled: false
+    property string nightModeAutoMode: "time"
+    
+    property bool hasTriedDefaultSession: false
+    readonly property string _stateUrl: StandardPaths.writableLocation(StandardPaths.GenericStateLocation)
+    readonly property string _stateDir: Paths.strip(_stateUrl)
+    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 string nightModeLocationProvider: ""
+    property var pinnedApps: []
+    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 var monitorCyclingSettings: ({})
+    property string lastBrightnessDevice: ""
+    property string launchPrefix: ""
+    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")
+
+    // Power management settings - AC Power
+    property int acMonitorTimeout: 0 // Never
+    property int acLockTimeout: 0 // Never
+    property int acSuspendTimeout: 0 // Never
+    property int acHibernateTimeout: 0 // Never
+
+    // Power management settings - Battery
+    property int batteryMonitorTimeout: 0 // Never
+    property int batteryLockTimeout: 0 // Never
+    property int batterySuspendTimeout: 0 // Never
+    property int batteryHibernateTimeout: 0 // Never
+
+    property bool lockBeforeSuspend: false
+
+
+    Component.onCompleted: {
+        loadSettings()
+    }
+
+    function loadSettings() {
+        parseSettings(settingsFile.text())
+    }
+
+    function parseSettings(content) {
+        try {
+            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 : ""
+                perMonitorWallpaper = settings.perMonitorWallpaper !== undefined ? settings.perMonitorWallpaper : false
+                monitorWallpapers = settings.monitorWallpapers !== undefined ? settings.monitorWallpapers : {}
+                doNotDisturb = settings.doNotDisturb !== undefined ? settings.doNotDisturb : false
+                nightModeEnabled = settings.nightModeEnabled !== undefined ? settings.nightModeEnabled : false
+                nightModeTemperature = settings.nightModeTemperature !== undefined ? settings.nightModeTemperature : 4500
+                nightModeAutoEnabled = settings.nightModeAutoEnabled !== undefined ? settings.nightModeAutoEnabled : false
+                nightModeAutoMode = settings.nightModeAutoMode !== undefined ? settings.nightModeAutoMode : "time"
+                // Handle legacy time format
+                if (settings.nightModeStartTime !== undefined) {
+                    const parts = settings.nightModeStartTime.split(":")
+                    nightModeStartHour = parseInt(parts[0]) || 18
+                    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
+                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"
+                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")
+
+                acMonitorTimeout = settings.acMonitorTimeout !== undefined ? settings.acMonitorTimeout : 0
+                acLockTimeout = settings.acLockTimeout !== undefined ? settings.acLockTimeout : 0
+                acSuspendTimeout = settings.acSuspendTimeout !== undefined ? settings.acSuspendTimeout : 0
+                acHibernateTimeout = settings.acHibernateTimeout !== undefined ? settings.acHibernateTimeout : 0
+                batteryMonitorTimeout = settings.batteryMonitorTimeout !== undefined ? settings.batteryMonitorTimeout : 0
+                batteryLockTimeout = settings.batteryLockTimeout !== undefined ? settings.batteryLockTimeout : 0
+                batterySuspendTimeout = settings.batterySuspendTimeout !== undefined ? settings.batterySuspendTimeout : 0
+                batteryHibernateTimeout = settings.batteryHibernateTimeout !== undefined ? settings.batteryHibernateTimeout : 0
+                lockBeforeSuspend = settings.lockBeforeSuspend !== undefined ? settings.lockBeforeSuspend : false
+                
+                // Generate system themes but don't override user's theme choice
+                if (typeof Theme !== "undefined") {
+                    Theme.generateSystemThemesFromCurrentTheme()
+                }
+            }
+        } catch (e) {
+
+        }
+    }
+
+    function saveSettings() {
+        settingsFile.setText(JSON.stringify({
+                                                "isLightMode": isLightMode,
+                                                "wallpaperPath": wallpaperPath,
+                                                "wallpaperLastPath": wallpaperLastPath,
+                                                "profileLastPath": profileLastPath,
+                                                "perMonitorWallpaper": perMonitorWallpaper,
+                                                "monitorWallpapers": monitorWallpapers,
+                                                "doNotDisturb": doNotDisturb,
+                                                "nightModeEnabled": nightModeEnabled,
+                                                "nightModeTemperature": nightModeTemperature,
+                                                "nightModeAutoEnabled": nightModeAutoEnabled,
+                                                "nightModeAutoMode": nightModeAutoMode,
+                                                "nightModeStartHour": nightModeStartHour,
+                                                "nightModeStartMinute": nightModeStartMinute,
+                                                "nightModeEndHour": nightModeEndHour,
+                                                "nightModeEndMinute": nightModeEndMinute,
+                                                "latitude": latitude,
+                                                "longitude": longitude,
+                                                "nightModeLocationProvider": nightModeLocationProvider,
+                                                "pinnedApps": pinnedApps,
+                                                "selectedGpuIndex": selectedGpuIndex,
+                                                "nvidiaGpuTempEnabled": nvidiaGpuTempEnabled,
+                                                "nonNvidiaGpuTempEnabled": nonNvidiaGpuTempEnabled,
+                                                "enabledGpuPciIds": enabledGpuPciIds,
+                                                "wallpaperCyclingEnabled": wallpaperCyclingEnabled,
+                                                "wallpaperCyclingMode": wallpaperCyclingMode,
+                                                "wallpaperCyclingInterval": wallpaperCyclingInterval,
+                                                "wallpaperCyclingTime": wallpaperCyclingTime,
+                                                "monitorCyclingSettings": monitorCyclingSettings,
+                                                "lastBrightnessDevice": lastBrightnessDevice,
+                                                "launchPrefix": launchPrefix,
+                                                "wallpaperTransition": wallpaperTransition,
+                                                "includedTransitions": includedTransitions,
+                                                "acMonitorTimeout": acMonitorTimeout,
+                                                "acLockTimeout": acLockTimeout,
+                                                "acSuspendTimeout": acSuspendTimeout,
+                                                "acHibernateTimeout": acHibernateTimeout,
+                                                "batteryMonitorTimeout": batteryMonitorTimeout,
+                                                "batteryLockTimeout": batteryLockTimeout,
+                                                "batterySuspendTimeout": batterySuspendTimeout,
+                                                "batteryHibernateTimeout": batteryHibernateTimeout,
+                                                "lockBeforeSuspend": lockBeforeSuspend
+                                            }, null, 2))
+    }
+
+    function setLightMode(lightMode) {
+        isLightMode = lightMode
+        saveSettings()
+    }
+
+    function setDoNotDisturb(enabled) {
+        doNotDisturb = enabled
+        saveSettings()
+    }
+
+    function setNightModeEnabled(enabled) {
+        nightModeEnabled = enabled
+        saveSettings()
+    }
+
+    function setNightModeTemperature(temperature) {
+        nightModeTemperature = temperature
+        saveSettings()
+    }
+
+    function setNightModeAutoEnabled(enabled) {
+        console.log("SessionData: Setting nightModeAutoEnabled to", enabled)
+        nightModeAutoEnabled = enabled
+        saveSettings()
+    }
+
+    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 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()
+    }
+
+    function setWallpaperPath(path) {
+        wallpaperPath = path
+        saveSettings()
+    }
+
+    function setWallpaper(imagePath) {
+        wallpaperPath = imagePath
+        saveSettings()
+
+        if (typeof Theme !== "undefined") {
+            if (Theme.currentTheme === Theme.dynamic) {
+                Theme.extractColors()
+            }
+            Theme.generateSystemThemesFromCurrentTheme()
+        }
+    }
+
+    function setWallpaperColor(color) {
+        wallpaperPath = color
+        saveSettings()
+
+        if (typeof Theme !== "undefined") {
+            if (Theme.currentTheme === Theme.dynamic) {
+                Theme.extractColors()
+            }
+            Theme.generateSystemThemesFromCurrentTheme()
+        }
+    }
+
+    function clearWallpaper() {
+        wallpaperPath = ""
+        saveSettings()
+
+        if (typeof Theme !== "undefined") {
+            if (typeof SettingsData !== "undefined" && SettingsData.theme) {
+                Theme.switchTheme(SettingsData.theme)
+            } else {
+                Theme.switchTheme("blue")
+            }
+        }
+    }
+
+    function setWallpaperLastPath(path) {
+        wallpaperLastPath = path
+        saveSettings()
+    }
+
+    function setProfileLastPath(path) {
+        profileLastPath = path
+        saveSettings()
+    }
+
+    function setPinnedApps(apps) {
+        pinnedApps = apps
+        saveSettings()
+    }
+
+    function addPinnedApp(appId) {
+        if (!appId)
+            return
+        var currentPinned = [...pinnedApps]
+        if (currentPinned.indexOf(appId) === -1) {
+            currentPinned.push(appId)
+            setPinnedApps(currentPinned)
+        }
+    }
+
+    function removePinnedApp(appId) {
+        if (!appId)
+            return
+        var currentPinned = pinnedApps.filter(id => id !== appId)
+        setPinnedApps(currentPinned)
+    }
+
+    function isPinnedApp(appId) {
+        return appId && pinnedApps.indexOf(appId) !== -1
+    }
+
+    function setSelectedGpuIndex(index) {
+        selectedGpuIndex = index
+        saveSettings()
+    }
+
+    function setNvidiaGpuTempEnabled(enabled) {
+        nvidiaGpuTempEnabled = enabled
+        saveSettings()
+    }
+
+    function setNonNvidiaGpuTempEnabled(enabled) {
+        nonNvidiaGpuTempEnabled = enabled
+        saveSettings()
+    }
+
+    function setEnabledGpuPciIds(pciIds) {
+        enabledGpuPciIds = pciIds
+        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 getMonitorCyclingSettings(screenName) {
+        return monitorCyclingSettings[screenName] || {
+            enabled: false,
+            mode: "interval",
+            interval: 300,
+            time: "06:00"
+        }
+    }
+
+    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 setPerMonitorWallpaper(enabled) {
+        perMonitorWallpaper = enabled
+        saveSettings()
+
+        // Refresh dynamic theming when per-monitor mode changes
+        if (typeof Theme !== "undefined") {
+            if (Theme.currentTheme === Theme.dynamic) {
+                Theme.extractColors()
+            }
+            Theme.generateSystemThemesFromCurrentTheme()
+        }
+    }
+
+    function setMonitorWallpaper(screenName, path) {
+        var newMonitorWallpapers = Object.assign({}, monitorWallpapers)
+        if (path && path !== "") {
+            newMonitorWallpapers[screenName] = path
+        } else {
+            delete newMonitorWallpapers[screenName]
+        }
+        monitorWallpapers = newMonitorWallpapers
+        saveSettings()
+
+        // Trigger dynamic theming if this is the first monitor and dynamic theming is enabled
+        if (typeof Theme !== "undefined" && typeof Quickshell !== "undefined") {
+            var screens = Quickshell.screens
+            if (screens.length > 0 && screenName === screens[0].name) {
+                if (Theme.currentTheme === Theme.dynamic) {
+                    Theme.extractColors()
+                }
+                Theme.generateSystemThemesFromCurrentTheme()
+            }
+        }
+    }
+
+    function getMonitorWallpaper(screenName) {
+        if (!perMonitorWallpaper) {
+            return wallpaperPath
+        }
+        return monitorWallpapers[screenName] || wallpaperPath
+    }
+
+    function setLastBrightnessDevice(device) {
+        lastBrightnessDevice = device
+        saveSettings()
+    }
+
+    function setLaunchPrefix(prefix) {
+        launchPrefix = prefix
+        saveSettings()
+    }
+
+    function setWallpaperTransition(transition) {
+        wallpaperTransition = transition
+        saveSettings()
+    }
+
+    function setAcMonitorTimeout(timeout) {
+        acMonitorTimeout = timeout
+        saveSettings()
+    }
+
+    function setAcLockTimeout(timeout) {
+        acLockTimeout = timeout
+        saveSettings()
+    }
+
+    function setAcSuspendTimeout(timeout) {
+        acSuspendTimeout = timeout
+        saveSettings()
+    }
+
+    function setBatteryMonitorTimeout(timeout) {
+        batteryMonitorTimeout = timeout
+        saveSettings()
+    }
+
+    function setBatteryLockTimeout(timeout) {
+        batteryLockTimeout = timeout
+        saveSettings()
+    }
+
+    function setBatterySuspendTimeout(timeout) {
+        batterySuspendTimeout = timeout
+        saveSettings()
+    }
+
+    function setAcHibernateTimeout(timeout) {
+        acHibernateTimeout = timeout
+        saveSettings()
+    }
+
+    function setBatteryHibernateTimeout(timeout) {
+        batteryHibernateTimeout = timeout
+        saveSettings()
+    }
+
+    function setLockBeforeSuspend(enabled) {
+        lockBeforeSuspend = enabled
+        saveSettings()
+    }
+
+    FileView {
+        id: settingsFile
+
+        path: StandardPaths.writableLocation(StandardPaths.GenericStateLocation) + "/DankMaterialShell/session.json"
+        blockLoading: true
+        blockWrites: true
+        watchChanges: true
+        onLoaded: {
+            parseSettings(settingsFile.text())
+            hasTriedDefaultSession = false
+        }
+        onLoadFailed: error => {
+            if (!hasTriedDefaultSession) {
+                hasTriedDefaultSession = true
+                defaultSessionCheckProcess.running = true
+            }
+        }
+    }
+
+    Process {
+        id: defaultSessionCheckProcess
+
+        command: ["sh", "-c", "CONFIG_DIR=\"" + _stateDir
+            + "/DankMaterialShell\"; if [ -f \"$CONFIG_DIR/default-session.json\" ] && [ ! -f \"$CONFIG_DIR/session.json\" ]; then cp \"$CONFIG_DIR/default-session.json\" \"$CONFIG_DIR/session.json\" && echo 'copied'; else echo 'not_found'; fi"]
+        running: false
+        onExited: exitCode => {
+            if (exitCode === 0) {
+                console.log("Copied default-session.json to session.json")
+                settingsFile.reload()
+            }
+        }
+    }
+
+    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
+
+            try {
+                root.setWallpaper(absolutePath)
+                return "SUCCESS: Wallpaper set to " + absolutePath
+            } catch (e) {
+                return "ERROR: Failed to set wallpaper: " + e.toString()
+            }
+        }
+
+        function clear(): string {
+            root.setWallpaper("")
+            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"
+            }
+
+            try {
+                WallpaperCyclingService.cycleNextManually()
+                return "SUCCESS: Cycling to next wallpaper"
+            } catch (e) {
+                return "ERROR: Failed to cycle wallpaper: " + e.toString()
+            }
+        }
+
+        function prev(): string {
+            if (root.perMonitorWallpaper) {
+                return "ERROR: Per-monitor mode enabled. Use prevFor(screenName) instead."
+            }
+
+            if (!root.wallpaperPath) {
+                return "ERROR: No wallpaper set"
+            }
+
+            try {
+                WallpaperCyclingService.cyclePrevManually()
+                return "SUCCESS: Cycling to previous wallpaper"
+            } catch (e) {
+                return "ERROR: Failed to cycle wallpaper: " + e.toString()
+            }
+        }
+
+        function getFor(screenName: string): string {
+            if (!screenName) {
+                return "ERROR: No screen name provided"
+            }
+            return root.getMonitorWallpaper(screenName) || ""
+        }
+
+        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 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 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

@@ -2,101 +2,101 @@
 // Separated from Theme.qml to keep that file clean
 
 const CatppuccinMocha = {
-    surface: "#181825",
+    surface: "#45475a",
     surfaceText: "#cdd6f4",
-    surfaceVariant: "#1e1e2e",
+    surfaceVariant: "#45475a",
     surfaceVariantText: "#a6adc8",
-    background: "#181825",
+    background: "#1e1e2e",
     backgroundText: "#cdd6f4",
     outline: "#6c7086",
-    surfaceContainer: "#1e1e2e",
-    surfaceContainerHigh: "#313244",
-    surfaceContainerHighest: "#45475a"
+    surfaceContainer: "#313244",
+    surfaceContainerHigh: "#585b70",
+    surfaceContainerHighest: "#7f849c"
 }
 
 const CatppuccinLatte = {
-    surface: "#e6e9ef",
+    surface: "#bcc0cc",
     surfaceText: "#4c4f69",
-    surfaceVariant: "#e6e9ef",
+    surfaceVariant: "#bcc0cc",
     surfaceVariantText: "#6c6f85",
     background: "#eff1f5",
     backgroundText: "#4c4f69",
     outline: "#9ca0b0",
-    surfaceContainer: "#dce0e8",
-    surfaceContainerHigh: "#ccd0da",
-    surfaceContainerHighest: "#bcc0cc"
+    surfaceContainer: "#ccd0da",
+    surfaceContainerHigh: "#acb0be",
+    surfaceContainerHighest: "#8c8fa1"
 }
 
 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" }
+        dark: { primary: "#f5e0dc", secondary: "#f2cdcd", primaryText: "#1e1e2e", primaryContainer: "#8b6b5e", surfaceTint: "#f5e0dc" },
+        light: { primary: "#dc8a78", secondary: "#dd7878", primaryText: "#ffffff", primaryContainer: "#f4d2ca", 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" }
+        dark: { primary: "#f2cdcd", secondary: "#f5e0dc", primaryText: "#1e1e2e", primaryContainer: "#885d62", surfaceTint: "#f2cdcd" },
+        light: { primary: "#dd7878", secondary: "#dc8a78", primaryText: "#ffffff", primaryContainer: "#f4caca", 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" }
+        dark: { primary: "#f5c2e7", secondary: "#cba6f7", primaryText: "#1e1e2e", primaryContainer: "#8b537a", surfaceTint: "#f5c2e7" },
+        light: { primary: "#ea76cb", secondary: "#8839ef", primaryText: "#ffffff", primaryContainer: "#f7c9e7", 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" }
+        dark: { primary: "#cba6f7", secondary: "#b4befe", primaryText: "#1e1e2e", primaryContainer: "#61378a", surfaceTint: "#cba6f7" },
+        light: { primary: "#8839ef", secondary: "#7287fd", primaryText: "#ffffff", primaryContainer: "#e4d3ff", 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" }
+        dark: { primary: "#f38ba8", secondary: "#eba0ac", primaryText: "#1e1e2e", primaryContainer: "#891c3b", surfaceTint: "#f38ba8" },
+        light: { primary: "#d20f39", secondary: "#e64553", primaryText: "#ffffff", primaryContainer: "#f1b8c4", 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" }
+        dark: { primary: "#eba0ac", secondary: "#f38ba8", primaryText: "#1e1e2e", primaryContainer: "#81313f", surfaceTint: "#eba0ac" },
+        light: { primary: "#e64553", secondary: "#d20f39", primaryText: "#ffffff", primaryContainer: "#f4c3c8", 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" }
+        dark: { primary: "#fab387", secondary: "#f9e2af", primaryText: "#1e1e2e", primaryContainer: "#90441a", surfaceTint: "#fab387" },
+        light: { primary: "#fe640b", secondary: "#df8e1d", primaryText: "#ffffff", primaryContainer: "#ffddcc", 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" }
+        dark: { primary: "#f9e2af", secondary: "#a6e3a1", primaryText: "#1e1e2e", primaryContainer: "#8f7342", surfaceTint: "#f9e2af" },
+        light: { primary: "#df8e1d", secondary: "#40a02b", primaryText: "#ffffff", primaryContainer: "#fff3cc", 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" }
+        dark: { primary: "#a6e3a1", secondary: "#94e2d5", primaryText: "#1e1e2e", primaryContainer: "#3c7534", surfaceTint: "#a6e3a1" },
+        light: { primary: "#40a02b", secondary: "#179299", primaryText: "#ffffff", primaryContainer: "#d4f5d4", 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" }
+        dark: { primary: "#94e2d5", secondary: "#89dceb", primaryText: "#1e1e2e", primaryContainer: "#2a7468", surfaceTint: "#94e2d5" },
+        light: { primary: "#179299", secondary: "#04a5e5", primaryText: "#ffffff", primaryContainer: "#ccf2f2", 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" }
+        dark: { primary: "#89dceb", secondary: "#74c7ec", primaryText: "#1e1e2e", primaryContainer: "#196e7e", surfaceTint: "#89dceb" },
+        light: { primary: "#04a5e5", secondary: "#209fb5", primaryText: "#ffffff", primaryContainer: "#ccebff", 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" }
+        dark: { primary: "#74c7ec", secondary: "#89b4fa", primaryText: "#1e1e2e", primaryContainer: "#0a597f", surfaceTint: "#74c7ec" },
+        light: { primary: "#209fb5", secondary: "#1e66f5", primaryText: "#ffffff", primaryContainer: "#d0f0f5", 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" }
+        dark: { primary: "#89b4fa", secondary: "#b4befe", primaryText: "#1e1e2e", primaryContainer: "#19468d", surfaceTint: "#89b4fa" },
+        light: { primary: "#1e66f5", secondary: "#7287fd", primaryText: "#ffffff", primaryContainer: "#ccd9ff", 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" }
+        dark: { primary: "#b4befe", secondary: "#cba6f7", primaryText: "#1e1e2e", primaryContainer: "#4a5091", surfaceTint: "#b4befe" },
+        light: { primary: "#7287fd", secondary: "#8839ef", primaryText: "#ffffff", primaryContainer: "#dde1ff", surfaceTint: "#7287fd" }
     }
 }
 
@@ -120,17 +120,17 @@ const StockThemes = {
             primaryText: "#000000",
             primaryContainer: "#0d47a1",
             secondary: "#8ab4f8",
-            surface: "#101418",
-            surfaceText: "#e0e2e8",
-            surfaceVariant: "#42474e",
-            surfaceVariantText: "#c2c7cf",
+            surface: "#1a1c1e",
+            surfaceText: "#e3e8ef",
+            surfaceVariant: "#44464f",
+            surfaceVariantText: "#c4c7c5",
             surfaceTint: "#8ab4f8",
-            background: "#101418",
-            backgroundText: "#e0e2e8",
-            outline: "#8c9199",
-            surfaceContainer: "#1d2024",
-            surfaceContainerHigh: "#272a2f",
-            surfaceContainerHighest: "#32353a"
+            background: "#1a1c1e",
+            backgroundText: "#e3e8ef",
+            outline: "#8e918f",
+            surfaceContainer: "#1e2023",
+            surfaceContainerHigh: "#292b2f",
+            surfaceContainerHighest: "#343740"
         },
         purple: {
             name: "Purple",
@@ -138,17 +138,17 @@ const StockThemes = {
             primaryText: "#381E72",
             primaryContainer: "#4F378B",
             secondary: "#CCC2DC",
-            surface: "#141218",
-            surfaceText: "#e6e0e9",
-            surfaceVariant: "#49454e",
-            surfaceVariantText: "#cac4cf",
+            surface: "#10121E",
+            surfaceText: "#E6E0E9",
+            surfaceVariant: "#49454F",
+            surfaceVariantText: "#CAC4D0",
             surfaceTint: "#D0BCFF",
-            background: "#141218",
-            backgroundText: "#e6e0e9",
-            outline: "#948f99",
-            surfaceContainer: "#211f24",
-            surfaceContainerHigh: "#2b292f",
-            surfaceContainerHighest: "#36343a"
+            background: "#10121E",
+            backgroundText: "#E6E0E9",
+            outline: "#938F99",
+            surfaceContainer: "#1D1B20",
+            surfaceContainerHigh: "#2B2930",
+            surfaceContainerHighest: "#36343B"
         },
         green: {
             name: "Green",
@@ -156,17 +156,17 @@ const StockThemes = {
             primaryText: "#000000",
             primaryContainer: "#1b5e20",
             secondary: "#81c995",
-            surface: "#10140f",
-            surfaceText: "#e0e4db",
-            surfaceVariant: "#424940",
-            surfaceVariantText: "#c2c9bd",
+            surface: "#0f1411",
+            surfaceText: "#e1f5e3",
+            surfaceVariant: "#404943",
+            surfaceVariantText: "#c1cbc4",
             surfaceTint: "#81c995",
-            background: "#10140f",
-            backgroundText: "#e0e4db",
-            outline: "#8c9388",
-            surfaceContainer: "#1d211b",
-            surfaceContainerHigh: "#272b25",
-            surfaceContainerHighest: "#323630"
+            background: "#0f1411",
+            backgroundText: "#e1f5e3",
+            outline: "#8b938c",
+            surfaceContainer: "#1a1f1b",
+            surfaceContainerHigh: "#252a26",
+            surfaceContainerHighest: "#30352f"
         },
         orange: {
             name: "Orange",
@@ -174,17 +174,17 @@ const StockThemes = {
             primaryText: "#000000",
             primaryContainer: "#3e2723",
             secondary: "#ffb74d",
-            surface: "#1a120e",
-            surfaceText: "#f0dfd8",
-            surfaceVariant: "#52443d",
-            surfaceVariantText: "#d7c2b9",
+            surface: "#1c1410",
+            surfaceText: "#f5f1ea",
+            surfaceVariant: "#4a453a",
+            surfaceVariantText: "#cbc5b8",
             surfaceTint: "#ffb74d",
-            background: "#1a120e",
-            backgroundText: "#f0dfd8",
-            outline: "#a08d85",
-            surfaceContainer: "#271e1a",
-            surfaceContainerHigh: "#322824",
-            surfaceContainerHighest: "#3d332e"
+            background: "#1c1410",
+            backgroundText: "#f5f1ea",
+            outline: "#958f84",
+            surfaceContainer: "#211e17",
+            surfaceContainerHigh: "#2c291f",
+            surfaceContainerHighest: "#373427"
         },
         red: {
             name: "Red",
@@ -192,17 +192,17 @@ const StockThemes = {
             primaryText: "#000000",
             primaryContainer: "#4a0e0e",
             secondary: "#f28b82",
-            surface: "#1a1110",
-            surfaceText: "#f1dedc",
-            surfaceVariant: "#534341",
-            surfaceVariantText: "#d8c2be",
+            surface: "#1c1011",
+            surfaceText: "#f5e8ea",
+            surfaceVariant: "#4a3f41",
+            surfaceVariantText: "#cbc2c4",
             surfaceTint: "#f28b82",
-            background: "#1a1110",
-            backgroundText: "#f1dedc",
-            outline: "#a08c89",
-            surfaceContainer: "#271d1c",
-            surfaceContainerHigh: "#322826",
-            surfaceContainerHighest: "#3d3231"
+            background: "#1c1011",
+            backgroundText: "#f5e8ea",
+            outline: "#958b8d",
+            surfaceContainer: "#211b1c",
+            surfaceContainerHigh: "#2c2426",
+            surfaceContainerHighest: "#372f30"
         },
         cyan: {
             name: "Cyan",
@@ -210,15 +210,15 @@ const StockThemes = {
             primaryText: "#000000",
             primaryContainer: "#004d5c",
             secondary: "#4dd0e1",
-            surface: "#0e1416",
-            surfaceText: "#dee3e5",
-            surfaceVariant: "#3f484a",
-            surfaceVariantText: "#bfc8ca",
+            surface: "#0f1617",
+            surfaceText: "#e8f4f5",
+            surfaceVariant: "#3f474a",
+            surfaceVariantText: "#c2c9cb",
             surfaceTint: "#4dd0e1",
-            background: "#0e1416",
-            backgroundText: "#dee3e5",
-            outline: "#899295",
-            surfaceContainer: "#1b2122",
+            background: "#0f1617",
+            backgroundText: "#e8f4f5",
+            outline: "#8c9194",
+            surfaceContainer: "#1a1f20",
             surfaceContainerHigh: "#252b2c",
             surfaceContainerHighest: "#303637"
         },
@@ -228,17 +228,17 @@ const StockThemes = {
             primaryText: "#000000",
             primaryContainer: "#4a0e2f",
             secondary: "#f8bbd9",
-            surface: "#191112",
-            surfaceText: "#f0dee0",
-            surfaceVariant: "#524345",
-            surfaceVariantText: "#d6c2c3",
+            surface: "#1a1014",
+            surfaceText: "#f3e8ee",
+            surfaceVariant: "#483f45",
+            surfaceVariantText: "#c9c2c7",
             surfaceTint: "#f8bbd9",
-            background: "#191112",
-            backgroundText: "#f0dee0",
-            outline: "#9f8c8e",
-            surfaceContainer: "#261d1e",
-            surfaceContainerHigh: "#312829",
-            surfaceContainerHighest: "#3c3233"
+            background: "#1a1014",
+            backgroundText: "#f3e8ee",
+            outline: "#938a90",
+            surfaceContainer: "#1f1b1e",
+            surfaceContainerHigh: "#2a2428",
+            surfaceContainerHighest: "#352f32"
         },
         amber: {
             name: "Amber",
@@ -246,17 +246,17 @@ const StockThemes = {
             primaryText: "#000000",
             primaryContainer: "#4a3c00",
             secondary: "#ffd54f",
-            surface: "#17130b",
-            surfaceText: "#ebe1d4",
-            surfaceVariant: "#4d4639",
-            surfaceVariantText: "#d0c5b4",
+            surface: "#1a1710",
+            surfaceText: "#f3f0e8",
+            surfaceVariant: "#49453a",
+            surfaceVariantText: "#cac5b8",
             surfaceTint: "#ffd54f",
-            background: "#17130b",
-            backgroundText: "#ebe1d4",
-            outline: "#998f80",
-            surfaceContainer: "#231f17",
-            surfaceContainerHigh: "#2e2921",
-            surfaceContainerHighest: "#39342b"
+            background: "#1a1710",
+            backgroundText: "#f3f0e8",
+            outline: "#949084",
+            surfaceContainer: "#1f1e17",
+            surfaceContainerHigh: "#2a281f",
+            surfaceContainerHighest: "#353327"
         },
         coral: {
             name: "Coral",
@@ -265,16 +265,16 @@ const StockThemes = {
             primaryContainer: "#8c1d18",
             secondary: "#f9dedc",
             surface: "#1a1110",
-            surfaceText: "#f1dedc",
-            surfaceVariant: "#534341",
-            surfaceVariantText: "#d8c2bf",
+            surfaceText: "#f1e8e7",
+            surfaceVariant: "#4a4142",
+            surfaceVariantText: "#cdc2c1",
             surfaceTint: "#ffb4ab",
             background: "#1a1110",
-            backgroundText: "#f1dedc",
-            outline: "#a08c8a",
-            surfaceContainer: "#271d1c",
-            surfaceContainerHigh: "#322826",
-            surfaceContainerHighest: "#3d3231"
+            backgroundText: "#f1e8e7",
+            outline: "#968b8a",
+            surfaceContainer: "#201a19",
+            surfaceContainerHigh: "#2b2221",
+            surfaceContainerHighest: "#362d29"
         },
         monochrome: {
             name: "Monochrome",
@@ -290,9 +290,9 @@ const StockThemes = {
             background: "#131315",
             backgroundText: "#e4e2e3",
             outline: "#929092",
-            surfaceContainer: "#353535",
-            surfaceContainerHigh: "#424242",
-            surfaceContainerHighest: "#505050",
+            surfaceContainer: "#2a2a2a",
+            surfaceContainerHigh: "#2a2a2b",
+            surfaceContainerHighest: "#353535",
             error: "#ffb4ab",
             warning: "#3f4759",
             info: "#595e6c",
@@ -306,17 +306,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#e3f2fd",
             secondary: "#42a5f5",
-            surface: "#f7f9ff",
-            surfaceText: "#181c20",
-            surfaceVariant: "#dee3eb",
-            surfaceVariantText: "#42474e",
+            surface: "#fefefe",
+            surfaceText: "#1a1c1e",
+            surfaceVariant: "#e7e0ec",
+            surfaceVariantText: "#49454f",
             surfaceTint: "#1976d2",
-            background: "#f7f9ff",
-            backgroundText: "#181c20",
-            outline: "#72777f",
-            surfaceContainer: "#eceef4",
-            surfaceContainerHigh: "#e6e8ee",
-            surfaceContainerHighest: "#e0e2e8"
+            background: "#fefefe",
+            backgroundText: "#1a1c1e",
+            outline: "#79747e",
+            surfaceContainer: "#f3f3f3",
+            surfaceContainerHigh: "#ececec",
+            surfaceContainerHighest: "#e6e6e6"
         },
         purple: {
             name: "Purple Light",
@@ -324,17 +324,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#EADDFF",
             secondary: "#625B71",
-            surface: "#fef7ff",
-            surfaceText: "#1d1b20",
-            surfaceVariant: "#e7e0eb",
-            surfaceVariantText: "#49454e",
+            surface: "#FFFBFE",
+            surfaceText: "#1C1B1F",
+            surfaceVariant: "#E7E0EC",
+            surfaceVariantText: "#49454F",
             surfaceTint: "#6750A4",
-            background: "#fef7ff",
-            backgroundText: "#1d1b20",
-            outline: "#7a757f",
-            surfaceContainer: "#f2ecf4",
-            surfaceContainerHigh: "#ece6ee",
-            surfaceContainerHighest: "#e6e0e9"
+            background: "#FFFBFE",
+            backgroundText: "#1C1B1F",
+            outline: "#79747E",
+            surfaceContainer: "#F3EDF7",
+            surfaceContainerHigh: "#ECE6F0",
+            surfaceContainerHighest: "#E6DFE9"
         },
         green: {
             name: "Green Light",
@@ -342,17 +342,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#e8f5e8",
             secondary: "#4caf50",
-            surface: "#f7fbf1",
-            surfaceText: "#191d17",
-            surfaceVariant: "#dee5d8",
-            surfaceVariantText: "#424940",
+            surface: "#fefefe",
+            surfaceText: "#1a1c1e",
+            surfaceVariant: "#e7e0ec",
+            surfaceVariantText: "#49454f",
             surfaceTint: "#2e7d32",
-            background: "#f7fbf1",
-            backgroundText: "#191d17",
-            outline: "#72796f",
-            surfaceContainer: "#ecefe6",
-            surfaceContainerHigh: "#e6e9e0",
-            surfaceContainerHighest: "#e0e4db"
+            background: "#fefefe",
+            backgroundText: "#1a1c1e",
+            outline: "#79747e",
+            surfaceContainer: "#f3f3f3",
+            surfaceContainerHigh: "#ececec",
+            surfaceContainerHighest: "#e6e6e6"
         },
         orange: {
             name: "Orange Light",
@@ -360,17 +360,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#ffecb3",
             secondary: "#ff9800",
-            surface: "#fff8f6",
-            surfaceText: "#221a16",
-            surfaceVariant: "#f4ded5",
-            surfaceVariantText: "#52443d",
+            surface: "#fefefe",
+            surfaceText: "#1a1c1e",
+            surfaceVariant: "#e7e0ec",
+            surfaceVariantText: "#49454f",
             surfaceTint: "#e65100",
-            background: "#fff8f6",
-            backgroundText: "#221a16",
-            outline: "#85736c",
-            surfaceContainer: "#fceae3",
-            surfaceContainerHigh: "#f6e5de",
-            surfaceContainerHighest: "#f0dfd8"
+            background: "#fefefe",
+            backgroundText: "#1a1c1e",
+            outline: "#79747e",
+            surfaceContainer: "#f3f3f3",
+            surfaceContainerHigh: "#ececec",
+            surfaceContainerHighest: "#e6e6e6"
         },
         red: {
             name: "Red Light",
@@ -378,17 +378,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#ffebee",
             secondary: "#f44336",
-            surface: "#fff8f7",
-            surfaceText: "#231918",
-            surfaceVariant: "#f5ddda",
-            surfaceVariantText: "#534341",
+            surface: "#fefefe",
+            surfaceText: "#1a1c1e",
+            surfaceVariant: "#e7e0ec",
+            surfaceVariantText: "#49454f",
             surfaceTint: "#d32f2f",
-            background: "#fff8f7",
-            backgroundText: "#231918",
-            outline: "#857370",
-            surfaceContainer: "#fceae7",
-            surfaceContainerHigh: "#f7e4e1",
-            surfaceContainerHighest: "#f1dedc"
+            background: "#fefefe",
+            backgroundText: "#1a1c1e",
+            outline: "#79747e",
+            surfaceContainer: "#f3f3f3",
+            surfaceContainerHigh: "#ececec",
+            surfaceContainerHighest: "#e6e6e6"
         },
         cyan: {
             name: "Cyan Light",
@@ -396,17 +396,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#e0f2f1",
             secondary: "#00bcd4",
-            surface: "#f5fafc",
-            surfaceText: "#171d1e",
-            surfaceVariant: "#dbe4e6",
-            surfaceVariantText: "#3f484a",
+            surface: "#fefefe",
+            surfaceText: "#1a1c1e",
+            surfaceVariant: "#e7e0ec",
+            surfaceVariantText: "#49454f",
             surfaceTint: "#0097a7",
-            background: "#f5fafc",
-            backgroundText: "#171d1e",
-            outline: "#6f797b",
-            surfaceContainer: "#e9eff0",
-            surfaceContainerHigh: "#e3e9eb",
-            surfaceContainerHighest: "#dee3e5"
+            background: "#fefefe",
+            backgroundText: "#1a1c1e",
+            outline: "#79747e",
+            surfaceContainer: "#f3f3f3",
+            surfaceContainerHigh: "#ececec",
+            surfaceContainerHighest: "#e6e6e6"
         },
         pink: {
             name: "Pink Light",
@@ -414,17 +414,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#fce4ec",
             secondary: "#e91e63",
-            surface: "#fff8f7",
-            surfaceText: "#22191a",
-            surfaceVariant: "#f3dddf",
-            surfaceVariantText: "#524345",
+            surface: "#fefefe",
+            surfaceText: "#1a1c1e",
+            surfaceVariant: "#e7e0ec",
+            surfaceVariantText: "#49454f",
             surfaceTint: "#c2185b",
-            background: "#fff8f7",
-            backgroundText: "#22191a",
-            outline: "#847375",
-            surfaceContainer: "#fbeaeb",
-            surfaceContainerHigh: "#f5e4e5",
-            surfaceContainerHighest: "#f0dee0"
+            background: "#fefefe",
+            backgroundText: "#1a1c1e",
+            outline: "#79747e",
+            surfaceContainer: "#f3f3f3",
+            surfaceContainerHigh: "#ececec",
+            surfaceContainerHighest: "#e6e6e6"
         },
         amber: {
             name: "Amber Light",
@@ -432,17 +432,17 @@ const StockThemes = {
             primaryText: "#000000",
             primaryContainer: "#fff8e1",
             secondary: "#ffc107",
-            surface: "#fff8f2",
-            surfaceText: "#1f1b13",
-            surfaceVariant: "#ede1cf",
-            surfaceVariantText: "#4d4639",
+            surface: "#fefefe",
+            surfaceText: "#1a1c1e",
+            surfaceVariant: "#e7e0ec",
+            surfaceVariantText: "#49454f",
             surfaceTint: "#ff8f00",
-            background: "#fff8f2",
-            backgroundText: "#1f1b13",
-            outline: "#7f7667",
-            surfaceContainer: "#f6ecdf",
-            surfaceContainerHigh: "#f1e7d9",
-            surfaceContainerHighest: "#ebe1d4"
+            background: "#fefefe",
+            backgroundText: "#1a1c1e",
+            outline: "#79747e",
+            surfaceContainer: "#f3f3f3",
+            surfaceContainerHigh: "#ececec",
+            surfaceContainerHighest: "#e6e6e6"
         },
         coral: {
             name: "Coral Light",
@@ -450,17 +450,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#ffdad6",
             secondary: "#ff5449",
-            surface: "#fff8f7",
-            surfaceText: "#231918",
-            surfaceVariant: "#f5ddda",
-            surfaceVariantText: "#534341",
+            surface: "#fefefe",
+            surfaceText: "#1a1c1e",
+            surfaceVariant: "#e7e0ec",
+            surfaceVariantText: "#49454f",
             surfaceTint: "#8c1d18",
-            background: "#fff8f7",
-            backgroundText: "#231918",
-            outline: "#857371",
-            surfaceContainer: "#fceae7",
-            surfaceContainerHigh: "#f6e4e2",
-            surfaceContainerHighest: "#f1dedc"
+            background: "#fefefe",
+            backgroundText: "#1a1c1e",
+            outline: "#79747e",
+            surfaceContainer: "#f3f3f3",
+            surfaceContainerHigh: "#ececec",
+            surfaceContainerHighest: "#e6e6e6"
         },
         monochrome: {
             name: "Monochrome Light",
@@ -476,9 +476,8 @@ const StockThemes = {
             background: "#ffffff",
             backgroundText: "#1a1a1a",
             outline: "#757577",
-            surfaceContainer: "#e8e8ea",
-            surfaceContainerHigh: "#dcdcde",
-            surfaceContainerHighest: "#d0d0d2",
+            surfaceContainer: "#f5f5f6",
+            surfaceContainerHigh: "#eaeaeb",
             error: "#ba1a1a",
             warning: "#f9e79f",
             info: "#5d6475",

LICENSE

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

Modals/Clipboard/ClipboardContent.qml

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

Modals/Clipboard/ClipboardEntry.qml

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

Modals/Clipboard/ClipboardHeader.qml

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

Modals/Clipboard/ClipboardHistoryModal.qml

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

Modals/Clipboard/ClipboardKeyboardController.qml

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

Modals/Clipboard/ClipboardKeyboardHints.qml

@@ -6,8 +6,6 @@ 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)
@@ -28,7 +26,7 @@ Rectangle {
         }
 
         StyledText {
-            text: keyboardHints.hintsText
+            text: "Shift+Del: Clear All • Esc: Close"
             font.pixelSize: Theme.fontSizeSmall
             color: Theme.surfaceText
             anchors.horizontalCenter: parent.horizontalCenter

Modals/ColorPickerModal.qml

@@ -0,0 +1,37 @@
+import QtQuick
+import Qt.labs.platform
+import Quickshell
+import qs.Common
+import qs.Services
+
+Item {
+    id: colorPickerModal
+
+    signal colorSelected(color selectedColor)
+
+    function show() {
+        colorDialog.open()
+    }
+
+    function hide() {
+        colorDialog.close()
+    }
+
+    function copyColorToClipboard(colorValue) {
+        Quickshell.execDetached(["sh", "-c", `echo "${colorValue}" | wl-copy`])
+        ToastService.showInfo(`Color ${colorValue} copied to clipboard`)
+        console.log("Copied color to clipboard:", colorValue)
+    }
+
+    ColorDialog {
+        id: colorDialog
+        title: "Color Picker - Select and copy color"
+        color: Theme.primary
+
+        onAccepted: {
+            const colorString = color.toString()
+            copyColorToClipboard(colorString)
+            colorSelected(color)
+        }
+    }
+}

Modals/Common/ConfirmModal.qml

@@ -6,8 +6,6 @@ import qs.Widgets
 DankModal {
     id: root
 
-    layerNamespace: "dms:confirm-modal"
-
     property string confirmTitle: ""
     property string confirmMessage: ""
     property string confirmButtonText: "Confirm"
@@ -19,158 +17,108 @@ DankModal {
     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();
+        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();
+        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();
+        close()
         if (selectedButton === 0) {
             if (onCancel) {
-                onCancel();
+                onCancel()
             }
         } else {
             if (onConfirm) {
-                onConfirm();
+                onConfirm()
             }
         }
     }
 
     shouldBeVisible: false
     allowStacking: true
-    modalWidth: 350
-    modalHeight: contentLoader.item ? contentLoader.item.implicitHeight + Theme.spacingM * 2 : 160
+    width: 350
+    height: 160
     enableShadow: true
     shouldHaveFocus: true
     onBackgroundClicked: {
-        close();
+        close()
         if (onCancel) {
-            onCancel();
+            onCancel()
         }
     }
     onOpened: {
-        Qt.callLater(function () {
-            modalFocusScope.forceActiveFocus();
-            modalFocusScope.focus = true;
-            shouldHaveFocus = true;
-        });
+        modalFocusScope.forceActiveFocus()
+        modalFocusScope.focus = true
+        shouldHaveFocus = true
     }
     modalFocusScope.Keys.onPressed: function (event) {
         switch (event.key) {
         case Qt.Key_Escape:
-            close();
+            close()
             if (onCancel) {
-                onCancel();
+                onCancel()
             }
-            event.accepted = true;
-            break;
+            event.accepted = true
+            break
         case Qt.Key_Left:
         case Qt.Key_Up:
-            keyboardNavigation = true;
-            selectedButton = 0;
-            event.accepted = true;
-            break;
+            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;
+            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;
+            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();
+                selectButton()
             } else {
-                selectedButton = 1;
-                selectButton();
+                selectedButton = 1
+                selectButton()
             }
-            event.accepted = true;
-            break;
+            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
+                anchors.centerIn: parent
+                width: parent.width - Theme.spacingM * 2
+                spacing: Theme.spacingM
 
                 StyledText {
                     text: confirmTitle
@@ -181,11 +129,6 @@ DankModal {
                     horizontalAlignment: Text.AlignHCenter
                 }
 
-                Item {
-                    width: 1
-                    height: Theme.spacingL
-                }
-
                 StyledText {
                     text: confirmMessage
                     font.pixelSize: Theme.fontSizeMedium
@@ -196,8 +139,7 @@ DankModal {
                 }
 
                 Item {
-                    width: 1
-                    height: Theme.spacingL * 1.5
+                    height: Theme.spacingS
                 }
 
                 Row {
@@ -210,11 +152,11 @@ DankModal {
                         radius: Theme.cornerRadius
                         color: {
                             if (keyboardNavigation && selectedButton === 0) {
-                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
                             } else if (cancelButton.containsMouse) {
-                                return Theme.surfacePressed;
+                                return Theme.surfacePressed
                             } else {
-                                return Theme.surfaceVariantAlpha;
+                                return Theme.surfaceVariantAlpha
                             }
                         }
                         border.color: (keyboardNavigation && selectedButton === 0) ? Theme.primary : "transparent"
@@ -235,8 +177,8 @@ DankModal {
                             hoverEnabled: true
                             cursorShape: Qt.PointingHandCursor
                             onClicked: {
-                                selectedButton = 0;
-                                selectButton();
+                                selectedButton = 0
+                                selectButton()
                             }
                         }
                     }
@@ -246,13 +188,13 @@ DankModal {
                         height: 40
                         radius: Theme.cornerRadius
                         color: {
-                            const baseColor = confirmButtonColor;
+                            const baseColor = confirmButtonColor
                             if (keyboardNavigation && selectedButton === 1) {
-                                return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, 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);
+                                return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, 0.9)
                             } else {
-                                return baseColor;
+                                return baseColor
                             }
                         }
                         border.color: (keyboardNavigation && selectedButton === 1) ? "white" : "transparent"
@@ -273,17 +215,12 @@ DankModal {
                             hoverEnabled: true
                             cursorShape: Qt.PointingHandCursor
                             onClicked: {
-                                selectedButton = 1;
-                                selectButton();
+                                selectedButton = 1
+                                selectButton()
                             }
                         }
                     }
                 }
-
-                Item {
-                    width: 1
-                    height: Theme.spacingL
-                }
             }
         }
     }

Modals/Common/DankModal.qml

@@ -0,0 +1,234 @@
+import QtQuick
+import QtQuick.Effects
+import Quickshell
+import Quickshell.Wayland
+import qs.Common
+
+PanelWindow {
+    id: root
+
+    WlrLayershell.namespace: "quickshell:modal"
+
+    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.shorterDuration
+    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
+    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
+
+    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 + 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 => {
+                           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()
+                           }
+                       }
+        }
+
+        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
+        }
+        y: {
+            if (positioning === "top-right") {
+                return Theme.barHeight + Theme.spacingXS
+            } else if (positioning === "custom") {
+                return root.customPosition.y
+            }
+            return 0
+        }
+        color: root.backgroundColor
+        radius: root.cornerRadius
+        border.color: root.borderColor
+        border.width: root.borderWidth
+        layer.enabled: root.enableShadow
+        opacity: root.shouldBeVisible ? 1 : 0
+        scale: root.animationType === "scale" ? (root.shouldBeVisible ? 1 : 0.9) : 1
+        transform: root.animationType === "slide" ? slideTransform : null
+
+        Translate {
+            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 => {
+                                  if (root.closeOnEscapeKey && shouldHaveFocus) {
+                                      root.close()
+                                      event.accepted = true
+                                  }
+                              }
+        onVisibleChanged: {
+            if (visible && shouldHaveFocus) {
+                Qt.callLater(() => focusScope.forceActiveFocus())
+            }
+        }
+
+        Connections {
+            function onShouldHaveFocusChanged() {
+                if (shouldHaveFocus && visible) {
+                    Qt.callLater(() => focusScope.forceActiveFocus())
+                }
+            }
+
+            target: root
+        }
+    }
+}

Modals/FileBrowser/FileBrowserModal.qml

@@ -0,0 +1,908 @@
+import Qt.labs.folderlistmodel
+import QtCore
+import QtQuick
+import QtQuick.Controls
+import Quickshell.Io
+import qs.Common
+import qs.Modals.Common
+import qs.Widgets
+
+DankModal {
+    id: fileBrowserModal
+
+    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
+    property int selectedIndex: -1
+    property bool keyboardNavigationActive: false
+    property bool backButtonFocused: false
+    property bool saveMode: false // Enable save functionality
+    property string defaultFileName: "" // Default filename for save mode
+    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 bool weAvailable: false
+    property string wePath: ""
+    property bool weMode: false
+
+    signal fileSelected(string path)
+
+    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 lastPath = browserType === "wallpaper" ? SessionData.wallpaperLastPath : browserType === "profile" ? SessionData.profileLastPath : ""
+        return (lastPath && lastPath !== "") ? lastPath : homeDir
+    }
+
+    function saveLastPath(path) {
+        if (browserType === "wallpaper") {
+            SessionData.setWallpaperLastPath(path)
+        } else if (browserType === "profile") {
+            SessionData.setProfileLastPath(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) {
+        // Ensure the filePath has the correct file:// protocol format
+        var normalizedPath = filePath
+        if (!normalizedPath.startsWith("file://")) {
+            normalizedPath = "file://" + filePath
+        }
+        
+        // Check if file exists by looking through the folder model
+        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
+    Component.onCompleted: {
+        currentPath = getLastPath()
+    }
+    
+    property var steamPaths: [
+        StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/.steam/steam/steamapps/workshop/content/431960",
+        StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/.local/share/Steam/steamapps/workshop/content/431960",
+        StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/.var/app/com.valvesoftware.Steam/.local/share/Steam/steamapps/workshop/content/431960",
+        StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/snap/steam/common/.local/share/Steam/steamapps/workshop/content/431960"
+    ]
+    property int currentPathIndex: 0
+    
+    function discoverWallpaperEngine() {
+        currentPathIndex = 0
+        checkNextPath()
+    }
+    
+    function checkNextPath() {
+        if (currentPathIndex >= steamPaths.length) {
+            return
+        }
+        
+        const wePath = steamPaths[currentPathIndex]
+        const cleanPath = wePath.replace(/^file:\/\//, '')
+        weDiscoveryProcess.command = ["test", "-d", cleanPath]
+        weDiscoveryProcess.wePath = wePath
+        weDiscoveryProcess.running = true
+    }
+    width: 800
+    height: 600
+    enableShadow: true
+    visible: false
+    onBackgroundClicked: close()
+    onOpened: {
+        modalFocusScope.forceActiveFocus()
+    }
+    modalFocusScope.Keys.onPressed: function (event) {
+        keyboardController.handleKey(event)
+    }
+    onVisibleChanged: {
+        if (visible) {
+            currentPath = getLastPath()
+            selectedIndex = -1
+            keyboardNavigationActive = false
+            backButtonFocused = false
+            if (browserType === "wallpaper" && !weAvailable) {
+                discoverWallpaperEngine()
+            }
+        }
+    }
+    onCurrentPathChanged: {
+        selectedFilePath = ""
+        selectedFileName = ""
+        selectedFileIsDir = false
+    }
+    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
+    }
+
+    QtObject {
+        id: keyboardController
+
+        property int totalItems: folderModel.count
+        property int gridColumns: 5
+
+        function handleKey(event) {
+            if (event.key === Qt.Key_Escape) {
+                close()
+                event.accepted = true
+                return
+            }
+            // F10 toggles keyboard hints
+            if (event.key === Qt.Key_F10) {
+                showKeyboardHints = !showKeyboardHints
+                event.accepted = true
+                return
+            }
+            // F1 or I key for file information
+            if (event.key === Qt.Key_F1 || event.key === Qt.Key_I) {
+                showFileInfo = !showFileInfo
+                event.accepted = true
+                return
+            }
+            // Alt+Left or Backspace to go back
+            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) {
+                if (event.key === Qt.Key_Tab || event.key === Qt.Key_Down || event.key === Qt.Key_Right) {
+                    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_Left:
+                if (backButtonFocused)
+                    return
+
+                if (selectedIndex > 0) {
+                    selectedIndex--
+                } else if (currentPath !== homeDir) {
+                    backButtonFocused = true
+                    selectedIndex = -1
+                }
+                event.accepted = true
+                break
+            case Qt.Key_Right:
+                if (backButtonFocused) {
+                    backButtonFocused = false
+                    selectedIndex = 0
+                } else if (selectedIndex < totalItems - 1) {
+                    selectedIndex++
+                }
+                event.accepted = true
+                break
+            case Qt.Key_Up:
+                if (backButtonFocused) {
+                    backButtonFocused = false
+                    // Go to first row, appropriate column
+                    var col = selectedIndex % gridColumns
+                    selectedIndex = Math.min(col, totalItems - 1)
+                } else if (selectedIndex >= gridColumns) {
+                    // Move up one row
+                    selectedIndex -= gridColumns
+                } else if (currentPath !== homeDir) {
+                    // At top row, go to back button
+                    backButtonFocused = true
+                    selectedIndex = -1
+                }
+                event.accepted = true
+                break
+            case Qt.Key_Down:
+                if (backButtonFocused) {
+                    backButtonFocused = false
+                    selectedIndex = 0
+                } else {
+                    // Move down one row if possible
+                    var newIndex = selectedIndex + gridColumns
+                    if (newIndex < totalItems) {
+                        selectedIndex = newIndex
+                    } else {
+                        // If can't go down a full row, go to last item in the column if exists
+                        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)
+                    // Trigger selection by setting the grid's current index and using signal
+                    fileBrowserModal.keyboardFileSelection(selectedIndex)
+                event.accepted = true
+                break
+            }
+        }
+    }
+
+    Timer {
+        id: keyboardSelectionTimer
+
+        property int targetIndex: -1
+
+        interval: 1
+        onTriggered: {
+            // Access the currently selected item through model role names
+            // This will work because QML models expose role data
+            executeKeyboardSelection(targetIndex)
+        }
+    }
+    
+    Process {
+        id: weDiscoveryProcess
+        
+        property string wePath: ""
+        running: false
+        
+        onExited: exitCode => {
+            if (exitCode === 0) {
+                fileBrowserModal.weAvailable = true
+                fileBrowserModal.wePath = wePath
+            } else {
+                currentPathIndex++
+                checkNextPath()
+            }
+        }
+    }
+
+    content: Component {
+        Item {
+            anchors.fill: parent
+
+            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
+                        }
+                    }
+
+                    Row {
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingS
+
+                        DankActionButton {
+                            circular: false
+                            iconName: "movie"
+                            iconSize: Theme.iconSize - 4
+                            iconColor: weMode ? Theme.primary : Theme.surfaceText
+                            visible: weAvailable && browserType === "wallpaper"
+                            onClicked: {
+                                weMode = !weMode
+                                if (weMode) {
+                                    navigateTo(wePath)
+                                } else {
+                                    navigateTo(getLastPath())
+                                }
+                            }
+                        }
+                        
+                        DankActionButton {
+                            circular: false
+                            iconName: "info"
+                            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()
+                        }
+                    }
+                }
+
+                Row {
+                    width: parent.width
+                    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
+
+                        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: 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: weMode ? 255 : 150
+                    cellHeight: weMode ? 215 : 130
+                    cacheBuffer: 260
+                    model: folderModel
+                    currentIndex: selectedIndex
+                    onCurrentIndexChanged: {
+                        if (keyboardNavigationActive && currentIndex >= 0)
+                            positionViewAtIndex(currentIndex, GridView.Contain)
+                    }
+
+                    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
+                        required property int index
+
+                        width: weMode ? 245 : 140
+                        height: weMode ? 205 : 120
+                        radius: Theme.cornerRadius
+                        color: {
+                            if (keyboardNavigationActive && delegateRoot.index === selectedIndex)
+                                return Theme.surfacePressed
+
+                            return mouseArea.containsMouse ? Theme.surfaceVariant : "transparent"
+                        }
+                        border.color: keyboardNavigationActive && delegateRoot.index === selectedIndex ? Theme.primary : Theme.outline
+                        border.width: (mouseArea.containsMouse || (keyboardNavigationActive && delegateRoot.index === selectedIndex)) ? 1 : 0
+                        // Update file info when this item gets selected via keyboard or initially
+                        Component.onCompleted: {
+                            if (keyboardNavigationActive && delegateRoot.index === selectedIndex)
+                                setSelectedFileData(delegateRoot.filePath, delegateRoot.fileName, delegateRoot.fileIsDir)
+                        }
+
+                        // Watch for selectedIndex changes to update file info during keyboard navigation
+                        Connections {
+                            function onSelectedIndexChanged() {
+                                if (keyboardNavigationActive && selectedIndex === delegateRoot.index)
+                                    setSelectedFileData(delegateRoot.filePath, delegateRoot.fileName, delegateRoot.fileIsDir)
+                            }
+
+                            target: fileBrowserModal
+                        }
+
+                        Column {
+                            anchors.centerIn: parent
+                            spacing: Theme.spacingXS
+
+                            Item {
+                                width: weMode ? 225 : 80
+                                height: weMode ? 165 : 60
+                                anchors.horizontalCenter: parent.horizontalCenter
+
+                                CachingImage {
+                                    anchors.fill: parent
+                                    property var weExtensions: [".jpg", ".jpeg", ".png", ".webp", ".gif", ".bmp", ".tga"]
+                                    property int weExtIndex: 0
+                                    source: {
+                                        if (weMode && delegateRoot.fileIsDir) {
+                                            return "file://" + delegateRoot.filePath + "/preview" + weExtensions[weExtIndex]
+                                        }
+                                        return (!delegateRoot.fileIsDir && isImageFile(delegateRoot.fileName)) ? ("file://" + delegateRoot.filePath) : ""
+                                    }
+                                    onStatusChanged: {
+                                        if (weMode && delegateRoot.fileIsDir && status === Image.Error) {
+                                            if (weExtIndex < weExtensions.length - 1) {
+                                                weExtIndex++
+                                                source = "file://" + delegateRoot.filePath + "/preview" + weExtensions[weExtIndex]
+                                            } else {
+                                                source = ""
+                                            }
+                                        }
+                                    }
+                                    fillMode: Image.PreserveAspectCrop
+                                    visible: (!delegateRoot.fileIsDir && isImageFile(delegateRoot.fileName)) || (weMode && delegateRoot.fileIsDir)
+                                    maxCacheSize: weMode ? 225 : 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 && !weMode
+                                }
+                            }
+
+                            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: {
+                                // Update selected file info and index first
+                                selectedIndex = delegateRoot.index
+                                setSelectedFileData(delegateRoot.filePath, delegateRoot.fileName, delegateRoot.fileIsDir)
+                                if (weMode && delegateRoot.fileIsDir) {
+                                    var sceneId = delegateRoot.filePath.split("/").pop()
+                                    fileSelected("we:" + sceneId)
+                                    fileBrowserModal.close()
+                                } else if (delegateRoot.fileIsDir) {
+                                    navigateTo(delegateRoot.filePath)
+                                } else {
+                                    fileSelected(delegateRoot.filePath)
+                                    fileBrowserModal.close()
+                                }
+                            }
+                        }
+
+                        // Handle keyboard selection
+                        Connections {
+                            function onKeyboardSelectionRequestedChanged() {
+                                if (fileBrowserModal.keyboardSelectionRequested && fileBrowserModal.keyboardSelectionIndex === delegateRoot.index) {
+                                    fileBrowserModal.keyboardSelectionRequested = false
+                                    selectedIndex = delegateRoot.index
+                                    setSelectedFileData(delegateRoot.filePath, delegateRoot.fileName, delegateRoot.fileIsDir)
+                                    if (weMode && delegateRoot.fileIsDir) {
+                                        var sceneId = delegateRoot.filePath.split("/").pop()
+                                        fileSelected("we:" + sceneId)
+                                        fileBrowserModal.close()
+                                    } else if (delegateRoot.fileIsDir) {
+                                        navigateTo(delegateRoot.filePath)
+                                    } else {
+                                        fileSelected(delegateRoot.filePath)
+                                        fileBrowserModal.close()
+                                    }
+                                }
+                            }
+
+                            target: fileBrowserModal
+                        }
+                    }
+                }
+            }
+
+            Row {
+                id: saveRow
+
+                anchors.bottom: parent.bottom
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.margins: Theme.spacingL
+                height: saveMode ? 40 : 0
+                visible: saveMode
+                spacing: Theme.spacingM
+
+                DankTextField {
+                    id: fileNameInput
+
+                    width: parent.width - saveButton.width - Theme.spacingM
+                    height: 40
+                    text: defaultFileName
+                    placeholderText: "Enter filename..."
+                    ignoreLeftRightKeys: false
+                    focus: saveMode
+                    topPadding: Theme.spacingS
+                    bottomPadding: Theme.spacingS
+                    Component.onCompleted: {
+                        if (saveMode)
+                            Qt.callLater(() => {
+                                             forceActiveFocus()
+                                         })
+                    }
+                    onAccepted: {
+                        if (text.trim() !== "") {
+                            // Remove file:// protocol from currentPath if present for proper construction
+                            var basePath = currentPath.replace(/^file:\/\//, '')
+                            var fullPath = basePath + "/" + text.trim()
+                            // Ensure consistent path format - remove any double slashes and normalize
+                            fullPath = fullPath.replace(/\/+/g, '/')
+                            handleSaveFile(fullPath)
+                        }
+                    }
+                }
+
+                StyledRect {
+                    id: saveButton
+
+                    width: 80
+                    height: 40
+                    color: fileNameInput.text.trim() !== "" ? Theme.primary : Theme.surfaceVariant
+                    radius: Theme.cornerRadius
+
+                    StyledText {
+                        anchors.centerIn: parent
+                        text: "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() !== "") {
+                                // Remove file:// protocol from currentPath if present for proper construction
+                                var basePath = currentPath.replace(/^file:\/\//, '')
+                                var fullPath = basePath + "/" + fileNameInput.text.trim()
+                                // Ensure consistent path format - remove any double slashes and normalize
+                                fullPath = fullPath.replace(/\/+/g, '/')
+                                handleSaveFile(fullPath)
+                            }
+                        }
+                    }
+                }
+            }
+
+            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() : ""
+                }
+            }
+
+            // Overwrite confirmation dialog
+            Item {
+                id: overwriteDialog
+                anchors.fill: parent
+                visible: showOverwriteConfirmation
+                
+                Keys.onEscapePressed: {
+                    showOverwriteConfirmation = false
+                    pendingFilePath = ""
+                }
+                
+                Keys.onReturnPressed: {
+                    showOverwriteConfirmation = false
+                    fileSelected(pendingFilePath)
+                    pendingFilePath = ""
+                    Qt.callLater(() => fileBrowserModal.close())
+                }
+                
+                focus: showOverwriteConfirmation
+                
+                Rectangle {
+                    anchors.fill: parent
+                    color: Theme.shadowStrong
+                    opacity: 0.8
+                    
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: {
+                            showOverwriteConfirmation = false
+                            pendingFilePath = ""
+                        }
+                    }
+                }
+                
+                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: qsTr("File Already Exists")
+                            font.pixelSize: Theme.fontSizeLarge
+                            font.weight: Font.Medium
+                            color: Theme.surfaceText
+                            anchors.horizontalCenter: parent.horizontalCenter
+                        }
+                        
+                        StyledText {
+                            text: qsTr("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: qsTr("Cancel")
+                                    font.pixelSize: Theme.fontSizeMedium
+                                    color: Theme.surfaceText
+                                    font.weight: Font.Medium
+                                }
+                                
+                                MouseArea {
+                                    id: cancelArea
+                                    anchors.fill: parent
+                                    hoverEnabled: true
+                                    cursorShape: Qt.PointingHandCursor
+                                    onClicked: {
+                                        showOverwriteConfirmation = false
+                                        pendingFilePath = ""
+                                    }
+                                }
+                            }
+                            
+                            StyledRect {
+                                width: 90
+                                height: 36
+                                radius: Theme.cornerRadius
+                                color: overwriteArea.containsMouse ? Qt.darker(Theme.primary, 1.1) : Theme.primary
+                                
+                                StyledText {
+                                    anchors.centerIn: parent
+                                    text: qsTr("Overwrite")
+                                    font.pixelSize: Theme.fontSizeMedium
+                                    color: Theme.background
+                                    font.weight: Font.Medium
+                                }
+                                
+                                MouseArea {
+                                    id: overwriteArea
+                                    anchors.fill: parent
+                                    hoverEnabled: true
+                                    cursorShape: Qt.PointingHandCursor
+                                    onClicked: {
+                                        showOverwriteConfirmation = false
+                                        fileSelected(pendingFilePath)
+                                        pendingFilePath = ""
+                                        Qt.callLater(() => fileBrowserModal.close())
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

Modals/FileBrowser/FileInfo.qml

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

Modals/FileBrowser/KeyboardHints.qml

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

Modals/NetworkInfoModal.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Controls
 import qs.Common
 import qs.Modals.Common
 import qs.Services
@@ -7,38 +8,34 @@ import qs.Widgets
 DankModal {
     id: root
 
-    layerNamespace: "dms:network-info"
-
-    keepPopoutsOpen: true
-
     property bool networkInfoModalVisible: false
     property string networkSSID: ""
     property var networkData: null
 
     function showNetworkInfo(ssid, data) {
-        networkSSID = ssid;
-        networkData = data;
-        networkInfoModalVisible = true;
-        open();
-        NetworkService.fetchNetworkInfo(ssid);
+        networkSSID = ssid
+        networkData = data
+        networkInfoModalVisible = true
+        open()
+        NetworkService.fetchNetworkInfo(ssid)
     }
 
     function hideDialog() {
-        networkInfoModalVisible = false;
-        close();
-        networkSSID = "";
-        networkData = null;
+        networkInfoModalVisible = false
+        close()
+        networkSSID = ""
+        networkData = null
     }
 
     visible: networkInfoModalVisible
-    modalWidth: 600
-    modalHeight: 500
+    width: 600
+    height: 500
     enableShadow: true
     onBackgroundClicked: hideDialog()
     onVisibleChanged: {
         if (!visible) {
-            networkSSID = "";
-            networkData = null;
+            networkSSID = ""
+            networkData = null
         }
     }
 
@@ -59,7 +56,7 @@ DankModal {
                         spacing: Theme.spacingXS
 
                         StyledText {
-                            text: I18n.tr("Network Information")
+                            text: "Network Information"
                             font.pixelSize: Theme.fontSizeLarge
                             color: Theme.surfaceText
                             font.weight: Font.Medium
@@ -72,6 +69,7 @@ DankModal {
                             width: parent.width
                             elide: Text.ElideRight
                         }
+
                     }
 
                     DankActionButton {
@@ -80,6 +78,7 @@ DankModal {
                         iconColor: Theme.surfaceText
                         onClicked: root.hideDialog()
                     }
+
                 }
 
                 Rectangle {
@@ -108,6 +107,7 @@ DankModal {
                             wrapMode: Text.WordWrap
                         }
                     }
+
                 }
 
                 Item {
@@ -126,7 +126,7 @@ DankModal {
                             id: closeText
 
                             anchors.centerIn: parent
-                            text: I18n.tr("Close")
+                            text: "Close"
                             font.pixelSize: Theme.fontSizeMedium
                             color: Theme.background
                             font.weight: Font.Medium
@@ -146,10 +146,17 @@ DankModal {
                                 duration: Theme.shortDuration
                                 easing.type: Theme.standardEasing
                             }
+
                         }
+
                     }
+
                 }
+
             }
+
         }
+
     }
+
 }

Modals/NotificationModal.qml

@@ -1,77 +1,67 @@
 import QtQuick
-import Quickshell.Hyprland
 import Quickshell.Io
 import qs.Common
 import qs.Modals.Common
 import qs.Modules.Notifications.Center
 import qs.Services
+import qs.Widgets
 
 DankModal {
     id: notificationModal
 
-    layerNamespace: "dms:notification-center-modal"
-
-    HyprlandFocusGrab {
-        windows: [notificationModal]
-        active: CompositorService.isHyprland && notificationModal.shouldHaveFocus
-    }
-
     property bool notificationModalOpen: false
     property var notificationListRef: null
 
     function show() {
-        notificationModalOpen = true;
-        NotificationService.onOverlayOpen();
-        open();
-        modalKeyboardController.reset();
+        notificationModalOpen = true
+        NotificationService.onOverlayOpen()
+        open()
+        modalKeyboardController.reset()
         if (modalKeyboardController && notificationListRef) {
-            modalKeyboardController.listView = notificationListRef;
-            modalKeyboardController.rebuildFlatNavigation();
+            modalKeyboardController.listView = notificationListRef
+            modalKeyboardController.rebuildFlatNavigation()
             
             Qt.callLater(() => {
-                modalKeyboardController.keyboardNavigationActive = true;
-                modalKeyboardController.selectedFlatIndex = 0;
-                modalKeyboardController.updateSelectedIdFromIndex();
+                modalKeyboardController.keyboardNavigationActive = true
+                modalKeyboardController.selectedFlatIndex = 0
+                modalKeyboardController.updateSelectedIdFromIndex()
                 if (notificationListRef) {
-                    notificationListRef.keyboardActive = true;
-                    notificationListRef.currentIndex = 0;
+                    notificationListRef.keyboardActive = true
+                    notificationListRef.currentIndex = 0
                 }
-                modalKeyboardController.selectionVersion++;
-                modalKeyboardController.ensureVisible();
-            });
+                modalKeyboardController.selectionVersion++
+                modalKeyboardController.ensureVisible()
+            })
         }
     }
 
     function hide() {
-        notificationModalOpen = false;
-        NotificationService.onOverlayClose();
-        close();
-        modalKeyboardController.reset();
+        notificationModalOpen = false
+        NotificationService.onOverlayClose()
+        close()
+        modalKeyboardController.reset()
     }
 
     function toggle() {
         if (shouldBeVisible) {
-            hide();
+            hide()
         } else {
-            show();
+            show()
         }
     }
 
-    modalWidth: 500
-    modalHeight: 700
+    width: 500
+    height: 700
     visible: false
     onBackgroundClicked: hide()
-    onOpened: () => {
-        Qt.callLater(() => modalFocusScope.forceActiveFocus());
-    }
-    onShouldBeVisibleChanged: shouldBeVisible => {
+    onShouldBeVisibleChanged: (shouldBeVisible) => {
         if (!shouldBeVisible) {
-            notificationModalOpen = false;
-            modalKeyboardController.reset();
-            NotificationService.onOverlayClose();
+            notificationModalOpen = false
+            modalKeyboardController.reset()
+            NotificationService.onOverlayClose()
         }
     }
-    modalFocusScope.Keys.onPressed: event => modalKeyboardController.handleKey(event)
+    modalFocusScope.Keys.onPressed: (event) => modalKeyboardController.handleKey(event)
 
     NotificationKeyboardController {
         id: modalKeyboardController
@@ -130,13 +120,14 @@ DankModal {
                     height: parent.height - y
                     keyboardController: modalKeyboardController
                     Component.onCompleted: {
-                        notificationModal.notificationListRef = notificationList;
+                        notificationModal.notificationListRef = notificationList
                         if (modalKeyboardController) {
-                            modalKeyboardController.listView = notificationList;
-                            modalKeyboardController.rebuildFlatNavigation();
+                            modalKeyboardController.listView = notificationList
+                            modalKeyboardController.rebuildFlatNavigation()
                         }
                     }
                 }
+
             }
 
             NotificationKeyboardHints {
@@ -148,6 +139,9 @@ DankModal {
                 anchors.margins: Theme.spacingL
                 showHints: modalKeyboardController.showKeyboardHints
             }
+
         }
+
     }
+
 }

Modals/PowerMenuModal.qml

@@ -0,0 +1,406 @@
+import QtQuick
+import qs.Common
+import qs.Modals.Common
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: root
+
+    property int selectedIndex: 0
+    property int optionCount: SessionService.hibernateSupported ? 5 : 4
+
+    signal powerActionRequested(string action, string title, string message)
+
+    function selectOption(action) {
+        close();
+        const actions = {
+            "logout": {
+                "title": "Log Out",
+                "message": "Are you sure you want to log out?"
+            },
+            "suspend": {
+                "title": "Suspend",
+                "message": "Are you sure you want to suspend the system?"
+            },
+            "hibernate": {
+                "title": "Hibernate",
+                "message": "Are you sure you want to hibernate the system?"
+            },
+            "reboot": {
+                "title": "Reboot",
+                "message": "Are you sure you want to reboot the system?"
+            },
+            "poweroff": {
+                "title": "Power Off",
+                "message": "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
+    onBackgroundClicked: () => {
+        return close();
+    }
+    onOpened: () => {
+        selectedIndex = 0;
+        modalFocusScope.forceActiveFocus();
+    }
+    modalFocusScope.Keys.onPressed: (event) => {
+        switch (event.key) {
+        case Qt.Key_Up:
+            selectedIndex = (selectedIndex - 1 + optionCount) % optionCount;
+            event.accepted = true;
+            break;
+        case Qt.Key_Down:
+            selectedIndex = (selectedIndex + 1) % optionCount;
+            event.accepted = true;
+            break;
+        case Qt.Key_Tab:
+            selectedIndex = (selectedIndex + 1) % optionCount;
+            event.accepted = true;
+            break;
+        case Qt.Key_Return:
+        case Qt.Key_Enter:
+            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;
+        }
+    }
+
+    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: "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: "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: "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: "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: "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: "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

@@ -0,0 +1,356 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Common
+import qs.Modals.Common
+import qs.Modules.ProcessList
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: processListModal
+
+    property int currentTab: 0
+    property var tabNames: ["Processes", "Performance", "System"]
+
+    function show() {
+        if (!DgopService.dgopAvailable) {
+            console.warn("ProcessListModal: dgop is not available");
+            return ;
+        }
+        open();
+        UserInfoService.getUptime();
+    }
+
+    function hide() {
+        close();
+        if (processContextMenu.visible) {
+            processContextMenu.close();
+        }
+
+    }
+
+    function toggle() {
+        if (!DgopService.dgopAvailable) {
+            console.warn("ProcessListModal: dgop is not available");
+            return ;
+        }
+        if (shouldBeVisible) {
+            hide();
+        } else {
+            show();
+        }
+    }
+
+    width: 900
+    height: 680
+    visible: false
+    backgroundColor: Theme.popupBackground()
+    cornerRadius: Theme.cornerRadius
+    enableShadow: true
+    onBackgroundClicked: () => {
+        return hide();
+    }
+
+    Component {
+        id: processesTabComponent
+
+        ProcessesTab {
+            contextMenu: processContextMenu
+        }
+
+    }
+
+    Component {
+        id: performanceTabComponent
+
+        PerformanceTab {
+        }
+
+    }
+
+    Component {
+        id: systemTabComponent
+
+        SystemTab {
+        }
+
+    }
+
+    ProcessContextMenu {
+        id: processContextMenu
+    }
+
+    content: Component {
+        Item {
+            anchors.fill: parent
+            focus: true
+            Keys.onPressed: (event) => {
+                if (event.key === Qt.Key_Escape) {
+                    processListModal.hide();
+                    event.accepted = true;
+                } else if (event.key === Qt.Key_1) {
+                    currentTab = 0;
+                    event.accepted = true;
+                } else if (event.key === Qt.Key_2) {
+                    currentTab = 1;
+                    event.accepted = true;
+                } else if (event.key === Qt.Key_3) {
+                    currentTab = 2;
+                    event.accepted = true;
+                }
+            }
+
+            // Show error message when dgop is not available
+            Rectangle {
+                anchors.centerIn: parent
+                width: 400
+                height: 200
+                radius: Theme.cornerRadius
+                color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.1)
+                border.color: Theme.error
+                border.width: 2
+                visible: !DgopService.dgopAvailable
+
+                Column {
+                    anchors.centerIn: parent
+                    spacing: Theme.spacingL
+
+                    DankIcon {
+                        name: "error"
+                        size: 48
+                        color: Theme.error
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+
+                    StyledText {
+                        text: "System Monitor Unavailable"
+                        font.pixelSize: Theme.fontSizeLarge
+                        font.weight: Font.Bold
+                        color: Theme.error
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+
+                    StyledText {
+                        text: "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 {
+                anchors.fill: parent
+                anchors.margins: Theme.spacingL
+                spacing: Theme.spacingL
+                visible: DgopService.dgopAvailable
+
+                RowLayout {
+                    Layout.fillWidth: true
+                    height: 40
+
+                    StyledText {
+                        text: "System Monitor"
+                        font.pixelSize: Theme.fontSizeLarge + 4
+                        font.weight: Font.Bold
+                        color: Theme.surfaceText
+                        Layout.alignment: Qt.AlignVCenter
+                    }
+
+                    Item {
+                        Layout.fillWidth: true
+                    }
+
+                    DankActionButton {
+                        circular: false
+                        iconName: "close"
+                        iconSize: Theme.iconSize - 4
+                        iconColor: Theme.surfaceText
+                        onClicked: () => {
+                            return processListModal.hide();
+                        }
+                        Layout.alignment: Qt.AlignVCenter
+                    }
+
+                }
+
+                Rectangle {
+                    Layout.fillWidth: true
+                    height: 52
+                    color: Theme.surfaceContainerHigh
+                    radius: Theme.cornerRadius
+                    border.color: Theme.outlineLight
+                    border.width: 1
+
+                    Row {
+                        anchors.fill: parent
+                        anchors.margins: 4
+                        spacing: 2
+
+                        Repeater {
+                            model: tabNames
+
+                            Rectangle {
+                                width: (parent.width - (tabNames.length - 1) * 2) / tabNames.length
+                                height: 44
+                                radius: Theme.cornerRadius
+                                color: currentTab === index ? Theme.primaryPressed : (tabMouseArea.containsMouse ? Theme.primaryHoverLight : "transparent")
+                                border.color: currentTab === index ? Theme.primary : "transparent"
+                                border.width: currentTab === index ? 1 : 0
+
+                                Row {
+                                    anchors.centerIn: parent
+                                    spacing: Theme.spacingXS
+
+                                    DankIcon {
+                                        name: {
+                                            const tabIcons = ["list_alt", "analytics", "settings"];
+                                            return tabIcons[index] || "tab";
+                                        }
+                                        size: Theme.iconSize - 2
+                                        color: currentTab === index ? Theme.primary : Theme.surfaceText
+                                        opacity: currentTab === index ? 1 : 0.7
+                                        anchors.verticalCenter: parent.verticalCenter
+
+                                        Behavior on color {
+                                            ColorAnimation {
+                                                duration: Theme.shortDuration
+                                            }
+
+                                        }
+
+                                    }
+
+                                    StyledText {
+                                        text: modelData
+                                        font.pixelSize: Theme.fontSizeLarge
+                                        font.weight: Font.Medium
+                                        color: currentTab === index ? Theme.primary : Theme.surfaceText
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        anchors.verticalCenterOffset: -1
+
+                                        Behavior on color {
+                                            ColorAnimation {
+                                                duration: Theme.shortDuration
+                                            }
+
+                                        }
+
+                                    }
+
+                                }
+
+                                MouseArea {
+                                    id: tabMouseArea
+
+                                    anchors.fill: parent
+                                    hoverEnabled: true
+                                    cursorShape: Qt.PointingHandCursor
+                                    onClicked: () => {
+                                        currentTab = index;
+                                    }
+                                }
+
+                                Behavior on color {
+                                    ColorAnimation {
+                                        duration: Theme.shortDuration
+                                    }
+
+                                }
+
+                                Behavior on border.color {
+                                    ColorAnimation {
+                                        duration: Theme.shortDuration
+                                    }
+
+                                }
+
+                            }
+
+                        }
+
+                    }
+
+                }
+
+                Rectangle {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceContainerHigh
+                    border.color: Theme.outlineLight
+                    border.width: 1
+
+                    Loader {
+                        id: processesTab
+
+                        anchors.fill: parent
+                        anchors.margins: Theme.spacingS
+                        active: processListModal.visible && currentTab === 0
+                        visible: currentTab === 0
+                        opacity: currentTab === 0 ? 1 : 0
+                        sourceComponent: processesTabComponent
+
+                        Behavior on opacity {
+                            NumberAnimation {
+                                duration: Theme.mediumDuration
+                                easing.type: Theme.emphasizedEasing
+                            }
+
+                        }
+
+                    }
+
+                    Loader {
+                        id: performanceTab
+
+                        anchors.fill: parent
+                        anchors.margins: Theme.spacingS
+                        active: processListModal.visible && currentTab === 1
+                        visible: currentTab === 1
+                        opacity: currentTab === 1 ? 1 : 0
+                        sourceComponent: performanceTabComponent
+
+                        Behavior on opacity {
+                            NumberAnimation {
+                                duration: Theme.mediumDuration
+                                easing.type: Theme.emphasizedEasing
+                            }
+
+                        }
+
+                    }
+
+                    Loader {
+                        id: systemTab
+
+                        anchors.fill: parent
+                        anchors.margins: Theme.spacingS
+                        active: processListModal.visible && currentTab === 2
+                        visible: currentTab === 2
+                        opacity: currentTab === 2 ? 1 : 0
+                        sourceComponent: systemTabComponent
+
+                        Behavior on opacity {
+                            NumberAnimation {
+                                duration: Theme.mediumDuration
+                                easing.type: Theme.emphasizedEasing
+                            }
+
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}

Modals/Settings/PowerSettings.qml

@@ -0,0 +1,246 @@
+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: "Battery not detected - only AC power settings available"
+                font.pixelSize: Theme.fontSizeMedium
+                color: Theme.surfaceVariantText
+                visible: !BatteryService.batteryAvailable
+            }
+
+            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: "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]
+
+                        width: parent.width
+                        text: "Automatically lock after"
+                        options: timeoutOptions
+
+                        Connections {
+                            target: powerCategory
+                            function onCurrentIndexChanged() {
+                                const currentTimeout = powerCategory.currentIndex === 0 ? SessionData.acLockTimeout : SessionData.batteryLockTimeout
+                                const index = lockDropdown.timeoutValues.indexOf(currentTimeout)
+                                lockDropdown.currentValue = index >= 0 ? lockDropdown.timeoutOptions[index] : "Never"
+                            }
+                        }
+
+                        Component.onCompleted: {
+                            const currentTimeout = powerCategory.currentIndex === 0 ? SessionData.acLockTimeout : SessionData.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) {
+                                    SessionData.setAcLockTimeout(timeout)
+                                } else {
+                                    SessionData.setBatteryLockTimeout(timeout)
+                                }
+                            }
+                        }
+                    }
+
+                    DankDropdown {
+                        id: monitorDropdown
+                        property var timeoutOptions: ["Never", "1 minute", "2 minutes", "3 minutes", "5 minutes", "10 minutes", "15 minutes", "20 minutes", "30 minutes", "1 hour", "1 hour 30 minutes", "2 hours", "3 hours"]
+                        property var timeoutValues: [0, 60, 120, 180, 300, 600, 900, 1200, 1800, 3600, 5400, 7200, 10800]
+
+                        width: parent.width
+                        text: "Turn off monitors after"
+                        options: timeoutOptions
+
+                        Connections {
+                            target: powerCategory
+                            function onCurrentIndexChanged() {
+                                const currentTimeout = powerCategory.currentIndex === 0 ? SessionData.acMonitorTimeout : SessionData.batteryMonitorTimeout
+                                const index = monitorDropdown.timeoutValues.indexOf(currentTimeout)
+                                monitorDropdown.currentValue = index >= 0 ? monitorDropdown.timeoutOptions[index] : "Never"
+                            }
+                        }
+
+                        Component.onCompleted: {
+                            const currentTimeout = powerCategory.currentIndex === 0 ? SessionData.acMonitorTimeout : SessionData.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) {
+                                    SessionData.setAcMonitorTimeout(timeout)
+                                } else {
+                                    SessionData.setBatteryMonitorTimeout(timeout)
+                                }
+                            }
+                        }
+                    }
+
+                    DankDropdown {
+                        id: suspendDropdown
+                        property var timeoutOptions: ["Never", "1 minute", "2 minutes", "3 minutes", "5 minutes", "10 minutes", "15 minutes", "20 minutes", "30 minutes", "1 hour", "1 hour 30 minutes", "2 hours", "3 hours"]
+                        property var timeoutValues: [0, 60, 120, 180, 300, 600, 900, 1200, 1800, 3600, 5400, 7200, 10800]
+
+                        width: parent.width
+                        text: "Suspend system after"
+                        options: timeoutOptions
+
+                        Connections {
+                            target: powerCategory
+                            function onCurrentIndexChanged() {
+                                const currentTimeout = powerCategory.currentIndex === 0 ? SessionData.acSuspendTimeout : SessionData.batterySuspendTimeout
+                                const index = suspendDropdown.timeoutValues.indexOf(currentTimeout)
+                                suspendDropdown.currentValue = index >= 0 ? suspendDropdown.timeoutOptions[index] : "Never"
+                            }
+                        }
+
+                        Component.onCompleted: {
+                            const currentTimeout = powerCategory.currentIndex === 0 ? SessionData.acSuspendTimeout : SessionData.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) {
+                                    SessionData.setAcSuspendTimeout(timeout)
+                                } else {
+                                    SessionData.setBatterySuspendTimeout(timeout)
+                                }
+                            }
+                        }
+                    }
+
+                    DankDropdown {
+                        id: hibernateDropdown
+                        property var timeoutOptions: ["Never", "1 minute", "2 minutes", "3 minutes", "5 minutes", "10 minutes", "15 minutes", "20 minutes", "30 minutes", "1 hour", "1 hour 30 minutes", "2 hours", "3 hours"]
+                        property var timeoutValues: [0, 60, 120, 180, 300, 600, 900, 1200, 1800, 3600, 5400, 7200, 10800]
+
+                        width: parent.width
+                        text: "Hibernate system after"
+                        options: timeoutOptions
+                        visible: SessionService.hibernateSupported
+
+                        Connections {
+                            target: powerCategory
+                            function onCurrentIndexChanged() {
+                                const currentTimeout = powerCategory.currentIndex === 0 ? SessionData.acHibernateTimeout : SessionData.batteryHibernateTimeout
+                                const index = hibernateDropdown.timeoutValues.indexOf(currentTimeout)
+                                hibernateDropdown.currentValue = index >= 0 ? hibernateDropdown.timeoutOptions[index] : "Never"
+                            }
+                        }
+
+                        Component.onCompleted: {
+                            const currentTimeout = powerCategory.currentIndex === 0 ? SessionData.acHibernateTimeout : SessionData.batteryHibernateTimeout
+                            const index = timeoutValues.indexOf(currentTimeout)
+                            currentValue = index >= 0 ? timeoutOptions[index] : "Never"
+                        }
+
+                        onValueChanged: value => {
+                            const index = timeoutOptions.indexOf(value)
+                            if (index >= 0) {
+                                const timeout = timeoutValues[index]
+                                if (powerCategory.currentIndex === 0) {
+                                    SessionData.setAcHibernateTimeout(timeout)
+                                } else {
+                                    SessionData.setBatteryHibernateTimeout(timeout)
+                                }
+                            }
+                        }
+                    }
+
+                    DankToggle {
+                        width: parent.width
+                        text: "Lock before suspend"
+                        description: "Automatically lock the screen when the system prepares to suspend"
+                        checked: SessionData.lockBeforeSuspend
+                        onToggled: checked => SessionData.setLockBeforeSuspend(checked)
+                    }
+
+                    StyledText {
+                        text: "Idle monitoring not supported - requires newer Quickshell version"
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.error
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        visible: !IdleService.idleMonitorAvailable
+                    }
+                }
+            }
+
+        }
+    }
+}

Modals/Settings/ProfileSection.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Effects
 import qs.Common
 import qs.Services
 import qs.Widgets
@@ -80,6 +81,7 @@ Rectangle {
                                 }
                             }
                         }
+
                     }
 
                     Rectangle {
@@ -103,8 +105,11 @@ Rectangle {
                                 return PortalService.setProfileImage("");
                             }
                         }
+
                     }
+
                 }
+
             }
 
             MouseArea {
@@ -116,6 +121,7 @@ Rectangle {
                 propagateComposedEvents: true
                 acceptedButtons: Qt.NoButton
             }
+
         }
 
         Column {
@@ -133,12 +139,15 @@ Rectangle {
             }
 
             StyledText {
-                text: DgopService.hostname || "DMS"
+                text: DgopService.distribution || "Linux"
                 font.pixelSize: Theme.fontSizeMedium
                 color: Theme.surfaceVariantText
                 elide: Text.ElideRight
                 width: parent.width
             }
+
         }
+
     }
+
 }

Modals/Settings/SettingsContent.qml

@@ -0,0 +1,171 @@
+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
+            asynchronous: true
+
+            sourceComponent: Component {
+                PersonalizationTab {
+                    parentModal: root.parentModal
+                }
+
+            }
+
+        }
+
+        Loader {
+            id: timeLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 1
+            visible: active
+            asynchronous: true
+
+            sourceComponent: TimeTab {
+            }
+
+        }
+
+        Loader {
+            id: weatherLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 2
+            visible: active
+            asynchronous: true
+
+            sourceComponent: WeatherTab {
+            }
+
+        }
+
+        Loader {
+            id: topBarLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 3
+            visible: active
+            asynchronous: true
+
+            sourceComponent: TopBarTab {
+            }
+
+        }
+
+        Loader {
+            id: widgetsLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 4
+            visible: active
+            asynchronous: true
+
+            sourceComponent: WidgetTweaksTab {
+            }
+
+        }
+
+        Loader {
+            id: dockLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 5
+            visible: active
+            asynchronous: true
+
+            sourceComponent: Component {
+                DockTab {
+                }
+
+            }
+
+        }
+
+        Loader {
+            id: displaysLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 6
+            visible: active
+            asynchronous: true
+
+            sourceComponent: DisplaysTab {
+            }
+
+        }
+
+        Loader {
+            id: launcherLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 7
+            visible: active
+            asynchronous: true
+
+            sourceComponent: LauncherTab {
+            }
+
+        }
+
+        Loader {
+            id: themeColorsLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 8
+            visible: active
+            asynchronous: true
+
+            sourceComponent: ThemeColorsTab {
+            }
+
+        }
+
+        Loader {
+            id: powerLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 9
+            visible: active
+            asynchronous: true
+
+            sourceComponent: PowerSettings {
+            }
+
+        }
+
+        Loader {
+            id: aboutLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 10
+            visible: active
+            asynchronous: true
+
+            sourceComponent: AboutTab {
+            }
+
+        }
+
+    }
+
+}

Modals/Settings/SettingsModal.qml

@@ -0,0 +1,199 @@
+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
+
+    property Component settingsContent
+    property alias profileBrowser: profileBrowser
+
+    signal closingModal()
+
+    function show() {
+        open();
+    }
+
+    function hide() {
+        close();
+    }
+
+    function toggle() {
+        if (shouldBeVisible) {
+            hide();
+        } else {
+            show();
+        }
+    }
+
+    objectName: "settingsModal"
+    width: 800
+    height: 750
+    visible: false
+    onBackgroundClicked: () => {
+        return hide();
+    }
+    content: settingsContent
+
+    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
+        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;
+                });
+            }
+            allowStacking = true;
+        }
+    }
+
+    FileBrowserModal {
+        id: wallpaperBrowser
+
+        allowStacking: true
+        browserTitle: "Select Wallpaper"
+        browserIcon: "wallpaper"
+        browserType: "wallpaper"
+        fileExtensions: ["*.jpg", "*.jpeg", "*.png", "*.bmp", "*.gif", "*.webp"]
+        onFileSelected: (path) => {
+            SessionData.setWallpaper(path);
+            close();
+        }
+        onDialogClosed: () => {
+            allowStacking = true;
+        }
+    }
+
+    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
+                        onClicked: () => {
+                            return settingsModal.hide();
+                        }
+                    }
+
+                }
+
+                Row {
+                    width: parent.width
+                    height: parent.height - 35
+                    spacing: 0
+
+                    SettingsSidebar {
+                        id: sidebar
+
+                        parentModal: settingsModal
+                        onCurrentIndexChanged: content.currentIndex = currentIndex
+                    }
+
+                    SettingsContent {
+                        id: content
+
+                        width: parent.width - sidebar.width
+                        height: parent.height
+                        parentModal: settingsModal
+                        currentIndex: sidebar.currentIndex
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}

Modals/Settings/SettingsSidebar.qml

@@ -0,0 +1,136 @@
+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": "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": "Displays",
+        "icon": "monitor"
+    }, {
+        "text": "Launcher",
+        "icon": "apps"
+    }, {
+        "text": "Theme & Colors",
+        "icon": "palette"
+    }, {
+        "text": "Power",
+        "icon": "power_settings_new"
+    }, {
+        "text": "About",
+        "icon": "info"
+    }]
+
+    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
+
+        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
+
+            Rectangle {
+                property bool isActive: sidebarContainer.currentIndex === index
+
+                width: parent.width - Theme.spacingS * 2
+                height: 44
+                radius: Theme.cornerRadius
+                color: isActive ? Theme.primaryContainer : 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.surfaceText : Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    StyledText {
+                        text: modelData.text || ""
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: parent.parent.isActive ? Theme.surfaceText : 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/Spotlight/SpotlightContent.qml

@@ -0,0 +1,226 @@
+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 var parentModal: null
+
+    anchors.fill: parent
+    focus: true
+    Keys.onPressed: event => {
+                        if (event.key === Qt.Key_Escape) {
+                            if (parentModal)
+                            parentModal.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: () => {
+                           if (parentModal)
+                           parentModal.hide()
+                       }
+        onViewModeSelected: 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 => {
+                                        appLauncher.setCategory(category)
+                                    }
+            }
+        }
+
+        Row {
+            width: parent.width
+            spacing: Theme.spacingM
+
+            DankTextField {
+                id: searchField
+
+                width: parent.width - 80 - Theme.spacingM
+                height: 56
+                cornerRadius: Theme.cornerRadius
+                backgroundColor: Theme.surfaceContainerHigh
+                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: parentModal ? parentModal.spotlightOpen : true
+                placeholderText: ""
+                ignoreLeftRightKeys: true
+                keyForwardTargets: [spotlightKeyHandler]
+                text: appLauncher.searchQuery
+                onTextEdited: () => {
+                                  appLauncher.searchQuery = text
+                              }
+                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 (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")
+                                   }
+                    }
+                }
+            }
+        }
+
+        SpotlightResults {
+            appLauncher: spotlightKeyHandler.appLauncher
+            contextMenu: contextMenu
+        }
+    }
+
+    SpotlightContextMenu {
+        id: contextMenu
+
+        appLauncher: spotlightKeyHandler.appLauncher
+        parentHandler: spotlightKeyHandler
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        visible: contextMenu.visible
+        z: 999
+        onClicked: () => {
+                       contextMenu.close()
+                   }
+
+        MouseArea {
+
+            // Prevent closing when clicking on the menu itself
+            x: contextMenu.x
+            y: contextMenu.y
+            width: contextMenu.width
+            height: contextMenu.height
+            onClicked: () => {}
+        }
+    }
+}

Modals/Spotlight/SpotlightContextMenu.qml

@@ -0,0 +1,205 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: contextMenu
+
+    property var currentApp: null
+    property bool menuVisible: false
+    property var appLauncher: null
+    property var parentHandler: null
+
+    function show(x, y, app) {
+        currentApp = app
+        const menuWidth = 180
+        const menuHeight = menuColumn.implicitHeight + Theme.spacingS * 2
+        let finalX = x + 8
+        let finalY = y + 8
+        if (parentHandler) {
+            if (finalX + menuWidth > parentHandler.width)
+                finalX = x - menuWidth - 8
+
+            if (finalY + menuHeight > parentHandler.height)
+                finalY = y - menuHeight - 8
+
+            finalX = Math.max(8, Math.min(finalX, parentHandler.width - menuWidth - 8))
+            finalY = Math.max(8, Math.min(finalY, parentHandler.height - menuHeight - 8))
+        }
+        contextMenu.x = finalX
+        contextMenu.y = finalY
+        contextMenu.visible = true
+        contextMenu.menuVisible = true
+    }
+
+    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"
+
+                        const 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"
+
+                        const 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
+
+                               const 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)
+                               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
+        }
+    }
+}

Modals/Spotlight/SpotlightModal.qml

@@ -0,0 +1,109 @@
+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
+
+    property bool spotlightOpen: false
+    property Component spotlightContent
+
+    function show() {
+        spotlightOpen = true
+        open()
+        if (contentLoader.item && contentLoader.item.appLauncher) {
+            contentLoader.item.appLauncher.searchQuery = ""
+        }
+
+        Qt.callLater(() => {
+                         if (contentLoader.item && contentLoader.item.searchField) {
+                             contentLoader.item.searchField.forceActiveFocus()
+                         }
+                     })
+    }
+
+    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
+    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(() => {
+                                               if (contentLoader.item.searchField) {
+                                                   contentLoader.item.searchField.forceActiveFocus()
+                                               }
+                                           })
+                          }
+                      }
+    onBackgroundClicked: () => {
+                             return hide()
+                         }
+    content: spotlightContent
+
+    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"
+        }
+
+        target: "spotlight"
+    }
+
+    spotlightContent: Component {
+        SpotlightContent {
+            parentModal: spotlightModal
+        }
+    }
+}

Modals/Spotlight/SpotlightResults.qml

@@ -0,0 +1,324 @@
+import QtQuick
+import Quickshell
+import Quickshell.Widgets
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: resultsContainer
+
+    property var appLauncher: null
+    property var contextMenu: null
+
+    width: parent.width
+    height: parent.height - y
+    radius: Theme.cornerRadius
+    color: Theme.surfaceContainerHigh
+    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 ? 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: Rectangle {
+            width: ListView.view.width
+            height: resultsList.itemHeight
+            radius: Theme.cornerRadius
+            color: ListView.isCurrentItem ? Theme.primaryPressed : listMouseArea.containsMouse ? Theme.primaryHoverLight : "transparent"
+            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: Quickshell.iconPath(model.icon, 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
+                        maximumLineCount: 1
+                        visible: resultsList.showDescription && model.comment && model.comment.length > 0
+                    }
+                }
+            }
+
+            MouseArea {
+                id: listMouseArea
+
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                acceptedButtons: Qt.LeftButton | Qt.RightButton
+                z: 10
+                onEntered: () => {
+                               if (resultsList.hoverUpdatesSelection && !resultsList.keyboardNavigationActive)
+                               resultsList.currentIndex = index
+                           }
+                onPositionChanged: () => {
+                                       resultsList.keyboardNavigationReset()
+                                   }
+                onClicked: mouse => {
+                               if (mouse.button === Qt.LeftButton) {
+                                   resultsList.itemClicked(index, model)
+                               } else if (mouse.button === Qt.RightButton) {
+                                   const modalPos = mapToItem(resultsContainer.parent, mouse.x, mouse.y)
+                                   resultsList.itemRightClicked(index, model, modalPos.x, modalPos.y)
+                               }
+                           }
+            }
+        }
+    }
+
+    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: Rectangle {
+            width: resultsGrid.cellWidth - resultsGrid.cellPadding
+            height: resultsGrid.cellHeight - resultsGrid.cellPadding
+            radius: Theme.cornerRadius
+            color: resultsGrid.currentIndex === index ? Theme.primaryPressed : gridMouseArea.containsMouse ? Theme.primaryHoverLight : "transparent"
+            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: Quickshell.iconPath(model.icon, true)
+                        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) {
+                                   const modalPos = mapToItem(resultsContainer.parent, mouse.x, mouse.y)
+                                   resultsGrid.itemRightClicked(index, model, modalPos.x, modalPos.y)
+                               }
+                           }
+            }
+        }
+    }
+}

Modals/WifiPasswordModal.qml

@@ -0,0 +1,296 @@
+import QtQuick
+import qs.Common
+import qs.Modals.Common
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: root
+
+    property string wifiPasswordSSID: ""
+    property string wifiPasswordInput: ""
+
+    function show(ssid) {
+        wifiPasswordSSID = ssid
+        wifiPasswordInput = ""
+        open()
+        Qt.callLater(() => {
+                         if (contentLoader.item && contentLoader.item.passwordInput)
+                         contentLoader.item.passwordInput.forceActiveFocus()
+                     })
+    }
+
+    shouldBeVisible: false
+    width: 420
+    height: 230
+    onShouldBeVisibleChanged: () => {
+                                  if (!shouldBeVisible)
+                                  wifiPasswordInput = ""
+                              }
+    onOpened: {
+        Qt.callLater(() => {
+                         if (contentLoader.item && contentLoader.item.passwordInput)
+                         contentLoader.item.passwordInput.forceActiveFocus()
+                     })
+    }
+    onBackgroundClicked: () => {
+                             close()
+                             wifiPasswordInput = ""
+                         }
+
+    Connections {
+        target: NetworkService
+
+        function onPasswordDialogShouldReopenChanged() {
+            if (NetworkService.passwordDialogShouldReopen && NetworkService.connectingSSID !== "") {
+                wifiPasswordSSID = NetworkService.connectingSSID
+                wifiPasswordInput = ""
+                open()
+                NetworkService.passwordDialogShouldReopen = false
+            }
+        }
+    }
+
+    content: Component {
+        FocusScope {
+            id: wifiContent
+
+            property alias passwordInput: passwordInput
+
+            anchors.fill: parent
+            focus: true
+            Keys.onEscapePressed: event => {
+                                      close()
+                                      wifiPasswordInput = ""
+                                      event.accepted = true
+                                  }
+
+            Column {
+                anchors.centerIn: parent
+                width: parent.width - Theme.spacingM * 2
+                spacing: Theme.spacingM
+
+                Row {
+                    width: parent.width
+
+                    Column {
+                        width: parent.width - 40
+                        spacing: Theme.spacingXS
+
+                        StyledText {
+                            text: "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
+                            width: parent.width
+                            elide: Text.ElideRight
+                        }
+                    }
+
+                    DankActionButton {
+                        iconName: "close"
+                        iconSize: Theme.iconSize - 4
+                        iconColor: Theme.surfaceText
+                        onClicked: () => {
+                                       close()
+                                       wifiPasswordInput = ""
+                                   }
+                    }
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceHover
+                    border.color: passwordInput.activeFocus ? Theme.primary : Theme.outlineStrong
+                    border.width: passwordInput.activeFocus ? 2 : 1
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: () => {
+                                       passwordInput.forceActiveFocus()
+                                   }
+                    }
+
+                    DankTextField {
+                        id: passwordInput
+
+                        anchors.fill: parent
+                        font.pixelSize: Theme.fontSizeMedium
+                        textColor: Theme.surfaceText
+                        text: wifiPasswordInput
+                        echoMode: showPasswordCheckbox.checked ? TextInput.Normal : TextInput.Password
+                        placeholderText: ""
+                        backgroundColor: "transparent"
+                        focus: true
+                        enabled: root.shouldBeVisible
+                        onTextEdited: () => {
+                                          wifiPasswordInput = text
+                                      }
+                        onAccepted: () => {
+                                        NetworkService.connectToWifi(wifiPasswordSSID, passwordInput.text)
+                                        close()
+                                        wifiPasswordInput = ""
+                                        passwordInput.text = ""
+                                    }
+                        Component.onCompleted: () => {
+                                                   if (root.shouldBeVisible)
+                                                   focusDelayTimer.start()
+                                               }
+
+                        Timer {
+                            id: focusDelayTimer
+
+                            interval: 100
+                            repeat: false
+                            onTriggered: () => {
+                                             if (root.shouldBeVisible)
+                                             passwordInput.forceActiveFocus()
+                                         }
+                        }
+
+                        Connections {
+                            target: root
+
+                            function onShouldBeVisibleChanged() {
+                                if (root.shouldBeVisible)
+                                    focusDelayTimer.start()
+                            }
+                        }
+                    }
+                }
+
+                Row {
+                    spacing: Theme.spacingS
+
+                    Rectangle {
+                        id: showPasswordCheckbox
+
+                        property bool checked: false
+
+                        width: 20
+                        height: 20
+                        radius: 4
+                        color: checked ? Theme.primary : "transparent"
+                        border.color: checked ? Theme.primary : Theme.outlineButton
+                        border.width: 2
+
+                        DankIcon {
+                            anchors.centerIn: parent
+                            name: "check"
+                            size: 12
+                            color: Theme.background
+                            visible: parent.checked
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: () => {
+                                           showPasswordCheckbox.checked = !showPasswordCheckbox.checked
+                                       }
+                        }
+                    }
+
+                    StyledText {
+                        text: "Show password"
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+                }
+
+                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
+
+                            StyledText {
+                                id: cancelText
+
+                                anchors.centerIn: parent
+                                text: "Cancel"
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceText
+                                font.weight: Font.Medium
+                            }
+
+                            MouseArea {
+                                id: cancelArea
+
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: () => {
+                                               close()
+                                               wifiPasswordInput = ""
+                                           }
+                            }
+                        }
+
+                        Rectangle {
+                            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
+                            opacity: enabled ? 1 : 0.5
+
+                            StyledText {
+                                id: connectText
+
+                                anchors.centerIn: parent
+                                text: "Connect"
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.background
+                                font.weight: Font.Medium
+                            }
+
+                            MouseArea {
+                                id: connectArea
+
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                enabled: parent.enabled
+                                onClicked: () => {
+                                               NetworkService.connectToWifi(wifiPasswordSSID, passwordInput.text)
+                                               close()
+                                               wifiPasswordInput = ""
+                                               passwordInput.text = ""
+                                           }
+                            }
+
+                            Behavior on color {
+                                ColorAnimation {
+                                    duration: Theme.shortDuration
+                                    easing.type: Theme.standardEasing
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

Modules/AppDrawer/AppDrawerPopout.qml

@@ -1,5 +1,4 @@
 import QtQuick
-import QtQuick.Controls
 import QtQuick.Effects
 import Quickshell
 import Quickshell.Io
@@ -13,26 +12,43 @@ import qs.Widgets
 DankPopout {
     id: appDrawerPopout
 
-    layerNamespace: "dms:app-launcher"
+    property string triggerSection: "left"
+    property var triggerScreen: null
+
+    // Setting to Exclusive, so virtual keyboards can send input to app drawer
+    WlrLayershell.keyboardFocus: shouldBeVisible ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None 
 
     function show() {
         open()
     }
 
+    function setTriggerPosition(x, y, width, section, screen) {
+        triggerX = x
+        triggerY = y
+        triggerWidth = width
+        triggerSection = section
+        triggerScreen = screen
+    }
+
     popupWidth: 520
     popupHeight: 600
+    triggerX: Theme.spacingL
+    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.spacingXS
     triggerWidth: 40
-    positioning: ""
+    positioning: "center"
+    screen: triggerScreen
 
-    onBackgroundClicked: close()
-
-    onOpened: {
-        appLauncher.searchQuery = ""
-        appLauncher.selectedIndex = 0
-        appLauncher.setCategory(I18n.tr("All"))
-        if (contentLoader.item?.searchField) {
-            contentLoader.item.searchField.text = ""
-            contentLoader.item.searchField.forceActiveFocus()
+    onShouldBeVisibleChanged: {
+        if (shouldBeVisible) {
+            appLauncher.searchQuery = ""
+            appLauncher.selectedIndex = 0
+            appLauncher.setCategory("All")
+            Qt.callLater(() => {
+                             if (contentLoader.item && contentLoader.item.searchField) {
+                                 contentLoader.item.searchField.text = ""
+                                 contentLoader.item.searchField.forceActiveFocus()
+                             }
+                         })
         }
     }
 
@@ -40,10 +56,10 @@ DankPopout {
         id: appLauncher
 
         viewMode: SettingsData.appLauncherViewMode
-        gridColumns: SettingsData.appLauncherGridColumns
+        gridColumns: 4
         onAppLaunched: appDrawerPopout.close()
         onViewModeSelected: function (mode) {
-            SettingsData.set("appLauncherViewMode", mode)
+            SettingsData.setAppLauncherViewMode(mode)
         }
     }
 
@@ -53,7 +69,7 @@ DankPopout {
 
             property alias searchField: searchField
 
-            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            color: Theme.popupBackground()
             radius: Theme.cornerRadius
             antialiasing: true
             smooth: true
@@ -79,7 +95,7 @@ DankPopout {
                     color: "transparent"
                     radius: parent.radius + Math.abs(modelData.margin)
                     border.color: modelData.color
-                    border.width: 0
+                    border.width: 1
                     z: modelData.z
                 }
             }
@@ -96,8 +112,6 @@ DankPopout {
                     mappings[Qt.Key_Up] = () => appLauncher.selectPrevious()
                     mappings[Qt.Key_Return] = () => appLauncher.launchSelected()
                     mappings[Qt.Key_Enter] = () => appLauncher.launchSelected()
-                    mappings[Qt.Key_Tab] = () => appLauncher.viewMode === "grid" ? appLauncher.selectNextInRow() : appLauncher.selectNext()
-                    mappings[Qt.Key_Backtab] = () => appLauncher.viewMode === "grid" ? appLauncher.selectPreviousInRow() : appLauncher.selectPrevious()
 
                     if (appLauncher.viewMode === "grid") {
                         mappings[Qt.Key_Right] = () => appLauncher.selectNextInRow()
@@ -114,70 +128,38 @@ DankPopout {
                         return
                     }
 
-                    if (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) {
-                        appLauncher.selectNext()
+                    if (!searchField.activeFocus && event.text && /[a-zA-Z0-9\s]/.test(event.text)) {
+                        searchField.forceActiveFocus()
+                        searchField.insertText(event.text)
                         event.accepted = true
-                        return
                     }
-
-                    if (event.key === Qt.Key_P && event.modifiers & Qt.ControlModifier) {
-                        appLauncher.selectPrevious()
-                        event.accepted = true
-                        return
-                    }
-
-                    if (event.key === Qt.Key_J && event.modifiers & Qt.ControlModifier) {
-                        appLauncher.selectNext()
-                        event.accepted = true
-                        return
-                    }
-
-                    if (event.key === Qt.Key_K && event.modifiers & Qt.ControlModifier) {
-                        appLauncher.selectPrevious()
-                        event.accepted = true
-                        return
-                    }
-
-                    if (appLauncher.viewMode === "grid") {
-                        if (event.key === Qt.Key_L && event.modifiers & Qt.ControlModifier) {
-                            appLauncher.selectNextInRow()
-                            event.accepted = true
-                            return
-                        }
-
-                        if (event.key === Qt.Key_H && event.modifiers & Qt.ControlModifier) {
-                            appLauncher.selectPreviousInRow()
-                            event.accepted = true
-                            return
-                        }
-                    }
-
                 }
 
                 Column {
-                    width: parent.width - Theme.spacingS * 2
-                    height: parent.height - Theme.spacingS * 2
-                    x: Theme.spacingS
-                    y: Theme.spacingS
-                    spacing: Theme.spacingS
+                    width: parent.width - Theme.spacingL * 2
+                    height: parent.height - Theme.spacingL * 2
+                    x: Theme.spacingL
+                    y: Theme.spacingL
+                    spacing: Theme.spacingL
 
-                    Item {
+                    Row {
                         width: parent.width
                         height: 40
 
                         StyledText {
-                            anchors.left: parent.left
-                            anchors.leftMargin: Theme.spacingS
                             anchors.verticalCenter: parent.verticalCenter
-                            text: I18n.tr("Applications")
+                            text: "Applications"
                             font.pixelSize: Theme.fontSizeLarge + 4
                             font.weight: Font.Bold
                             color: Theme.surfaceText
                         }
 
+                        Item {
+                            width: parent.width - 200
+                            height: 1
+                        }
+
                         StyledText {
-                            anchors.right: parent.right
-                            anchors.rightMargin: Theme.spacingS
                             anchors.verticalCenter: parent.verticalCenter
                             text: appLauncher.model.count + " apps"
                             font.pixelSize: Theme.fontSizeMedium
@@ -188,12 +170,11 @@ DankPopout {
                     DankTextField {
                         id: searchField
 
-                        width: parent.width - Theme.spacingS * 2
-                        anchors.horizontalCenter: parent.horizontalCenter
+                        width: parent.width
                         height: 52
                         cornerRadius: Theme.cornerRadius
-                        backgroundColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
-                        normalBorderColor: Theme.outlineMedium
+                        backgroundColor: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.7)
+                        normalBorderColor: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
                         focusedBorderColor: Theme.primary
                         leftIconName: "search"
                         leftIconSize: Theme.iconSize
@@ -202,8 +183,7 @@ DankPopout {
                         showClearButton: true
                         font.pixelSize: Theme.fontSizeLarge
                         enabled: appDrawerPopout.shouldBeVisible
-                        ignoreLeftRightKeys: appLauncher.viewMode !== "list"
-                        ignoreTabKeys: true
+                        ignoreLeftRightKeys: true
                         keyForwardTargets: [keyHandler]
                         onTextEdited: {
                             appLauncher.searchQuery = text
@@ -228,7 +208,7 @@ DankPopout {
                                 return
                             }
 
-                            const navigationKeys = [Qt.Key_Down, Qt.Key_Up, Qt.Key_Left, Qt.Key_Right, Qt.Key_Tab, Qt.Key_Backtab]
+                            const navigationKeys = [Qt.Key_Down, Qt.Key_Up, Qt.Key_Left, Qt.Key_Right]
                             const isNavigationKey = navigationKeys.includes(event.key)
                             const isEmptyEnter = isEnterKey && !hasText
 
@@ -251,18 +231,14 @@ DankPopout {
                         height: 40
                         spacing: Theme.spacingM
                         visible: searchField.text.length === 0
-                        leftPadding: Theme.spacingS
 
-                        Rectangle {
-                            width: 180
-                            height: 40
-                            radius: Theme.cornerRadius
-                            color: "transparent"
+                        Item {
+                            width: 200
+                            height: 36
 
                             DankDropdown {
                                 anchors.fill: parent
                                 text: ""
-                                dropdownWidth: 180
                                 currentValue: appLauncher.selectedCategory
                                 options: appLauncher.categories
                                 optionIcons: appLauncher.categoryIcons
@@ -273,7 +249,7 @@ DankPopout {
                         }
 
                         Item {
-                            width: parent.width - 290
+                            width: parent.width - 300
                             height: 1
                         }
 
@@ -310,13 +286,15 @@ DankPopout {
                     Rectangle {
                         width: parent.width
                         height: {
-                            let usedHeight = 40 + Theme.spacingS
-                            usedHeight += 52 + Theme.spacingS
-                            usedHeight += (searchField.text.length === 0 ? 40 : 0)
+                            let usedHeight = 40 + Theme.spacingL
+                            usedHeight += 52 + Theme.spacingL
+                            usedHeight += (searchField.text.length === 0 ? 40 + Theme.spacingL : 0)
                             return parent.height - usedHeight
                         }
                         radius: Theme.cornerRadius
-                        color: "transparent"
+                        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
+                        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
+                        border.width: 1
 
                         DankListView {
                             id: appList
@@ -345,9 +323,7 @@ DankPopout {
                             }
 
                             anchors.fill: parent
-                            anchors.leftMargin: Theme.spacingS
-                            anchors.rightMargin: Theme.spacingS
-                            anchors.bottomMargin: Theme.spacingS
+                            anchors.margins: Theme.spacingS
                             visible: appLauncher.viewMode === "list"
                             model: appLauncher.model
                             currentIndex: appLauncher.selectedIndex
@@ -373,27 +349,102 @@ DankPopout {
                                 appLauncher.keyboardNavigationActive = false
                             }
 
-                            delegate: AppLauncherListDelegate {
-                                listView: appList
-                                itemHeight: appList.itemHeight
-                                iconSize: appList.iconSize
-                                showDescription: appList.showDescription
-                                hoverUpdatesSelection: appList.hoverUpdatesSelection
-                                keyboardNavigationActive: appList.keyboardNavigationActive
-                                isCurrentItem: ListView.isCurrentItem
-                                mouseAreaLeftMargin: Theme.spacingS
-                                mouseAreaRightMargin: Theme.spacingS
-                                mouseAreaBottomMargin: Theme.spacingM
-                                iconMargins: Theme.spacingXS
-                                iconFallbackLeftMargin: Theme.spacingS
-                                iconFallbackRightMargin: Theme.spacingS
-                                iconFallbackBottomMargin: Theme.spacingM
-                                onItemClicked: (idx, modelData) => appList.itemClicked(idx, modelData)
-                                onItemRightClicked: (idx, modelData, mouseX, mouseY) => {
-                                    const panelPos = contextMenu.parent.mapFromItem(null, mouseX, mouseY)
-                                    appList.itemRightClicked(idx, modelData, panelPos.x, panelPos.y)
+                            delegate: Rectangle {
+                                width: ListView.view.width
+                                height: appList.itemHeight
+                                radius: Theme.cornerRadius
+                                color: ListView.isCurrentItem ? Theme.primaryPressed : listMouseArea.containsMouse ? Theme.primaryHoverLight : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.03)
+                                border.color: ListView.isCurrentItem ? Theme.primarySelected : Theme.outlineMedium
+                                border.width: ListView.isCurrentItem ? 2 : 1
+
+                                Row {
+                                    anchors.fill: parent
+                                    anchors.margins: Theme.spacingM
+                                    spacing: Theme.spacingL
+
+                                    Item {
+                                        width: appList.iconSize
+                                        height: appList.iconSize
+                                        anchors.verticalCenter: parent.verticalCenter
+
+                                        IconImage {
+                                            id: listIconImg
+
+                                            anchors.fill: parent
+                                            source: Quickshell.iconPath(model.icon, true)
+                                            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: appList.iconSize * 0.4
+                                                color: Theme.primary
+                                                font.weight: Font.Bold
+                                            }
+                                        }
+                                    }
+
+                                    Column {
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        width: parent.width - appList.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
+                                            maximumLineCount: 1
+                                            visible: appList.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 (appList.hoverUpdatesSelection && !appList.keyboardNavigationActive)
+                                            appList.currentIndex = index
+                                    }
+                                    onPositionChanged: {
+                                        appList.keyboardNavigationReset()
+                                    }
+                                    onClicked: mouse => {
+                                                   if (mouse.button === Qt.LeftButton) {
+                                                       appList.itemClicked(index, model)
+                                                   } else if (mouse.button === Qt.RightButton) {
+                                                       var panelPos = mapToItem(contextMenu.parent, mouse.x, mouse.y)
+                                                       appList.itemRightClicked(index, model, panelPos.x, panelPos.y)
+                                                   }
+                                               }
                                 }
-                                onKeyboardNavigationReset: appList.keyboardNavigationReset
                             }
                         }
 
@@ -401,7 +452,7 @@ DankPopout {
                             id: appGrid
 
                             property int currentIndex: appLauncher.selectedIndex
-                            property int columns: appLauncher.gridColumns
+                            property int columns: 4
                             property bool adaptiveColumns: false
                             property int minCellWidth: 120
                             property int maxCellWidth: 160
@@ -414,7 +465,6 @@ DankPopout {
                             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
@@ -434,9 +484,7 @@ DankPopout {
                             }
 
                             anchors.fill: parent
-                            anchors.leftMargin: Theme.spacingS
-                            anchors.rightMargin: Theme.spacingS
-                            anchors.bottomMargin: Theme.spacingS
+                            anchors.margins: Theme.spacingS
                             visible: appLauncher.viewMode === "grid"
                             model: appLauncher.model
                             clip: true
@@ -464,30 +512,91 @@ DankPopout {
                                 appLauncher.keyboardNavigationActive = false
                             }
 
-                            delegate: AppLauncherGridDelegate {
-                                gridView: appGrid
-                                cellWidth: appGrid.cellWidth
-                                cellHeight: appGrid.cellHeight
-                                cellPadding: appGrid.cellPadding
-                                minIconSize: appGrid.minIconSize
-                                maxIconSize: appGrid.maxIconSize
-                                iconSizeRatio: appGrid.iconSizeRatio
-                                hoverUpdatesSelection: appGrid.hoverUpdatesSelection
-                                keyboardNavigationActive: appGrid.keyboardNavigationActive
-                                currentIndex: appGrid.currentIndex
-                                mouseAreaLeftMargin: Theme.spacingS
-                                mouseAreaRightMargin: Theme.spacingS
-                                mouseAreaBottomMargin: Theme.spacingS
-                                iconFallbackLeftMargin: Theme.spacingS
-                                iconFallbackRightMargin: Theme.spacingS
-                                iconFallbackBottomMargin: Theme.spacingS
-                                iconMaterialSizeAdjustment: Theme.spacingL
-                                onItemClicked: (idx, modelData) => appGrid.itemClicked(idx, modelData)
-                                onItemRightClicked: (idx, modelData, mouseX, mouseY) => {
-                                    const panelPos = contextMenu.parent.mapFromItem(null, mouseX, mouseY)
-                                    appGrid.itemRightClicked(idx, modelData, panelPos.x, panelPos.y)
+                            delegate: Rectangle {
+                                width: appGrid.cellWidth - appGrid.cellPadding
+                                height: appGrid.cellHeight - appGrid.cellPadding
+                                radius: Theme.cornerRadius
+                                color: appGrid.currentIndex === index ? Theme.primaryPressed : gridMouseArea.containsMouse ? Theme.primaryHoverLight : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.03)
+                                border.color: appGrid.currentIndex === index ? Theme.primarySelected : Theme.outlineMedium
+                                border.width: appGrid.currentIndex === index ? 2 : 1
+
+                                Column {
+                                    anchors.centerIn: parent
+                                    spacing: Theme.spacingS
+
+                                    Item {
+                                        property int iconSize: Math.min(appGrid.maxIconSize, Math.max(appGrid.minIconSize, appGrid.cellWidth * appGrid.iconSizeRatio))
+
+                                        width: iconSize
+                                        height: iconSize
+                                        anchors.horizontalCenter: parent.horizontalCenter
+
+                                        IconImage {
+                                            id: gridIconImg
+
+                                            anchors.fill: parent
+                                            source: Quickshell.iconPath(model.icon, true)
+                                            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: appGrid.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 (appGrid.hoverUpdatesSelection && !appGrid.keyboardNavigationActive)
+                                            appGrid.currentIndex = index
+                                    }
+                                    onPositionChanged: {
+                                        appGrid.keyboardNavigationReset()
+                                    }
+                                    onClicked: mouse => {
+                                                   if (mouse.button === Qt.LeftButton) {
+                                                       appGrid.itemClicked(index, model)
+                                                   } else if (mouse.button === Qt.RightButton) {
+                                                       var panelPos = mapToItem(contextMenu.parent, mouse.x, mouse.y)
+                                                       appGrid.itemRightClicked(index, model, panelPos.x, panelPos.y)
+                                                   }
+                                               }
                                 }
-                                onKeyboardNavigationReset: appGrid.keyboardNavigationReset
                             }
                         }
                     }
@@ -496,68 +605,68 @@ DankPopout {
         }
     }
 
-    Popup {
+    Rectangle {
         id: contextMenu
 
         property var currentApp: null
-        readonly property var desktopEntry: (currentApp && !currentApp.isPlugin && appLauncher && appLauncher._uniqueApps && currentApp.appIndex >= 0 && currentApp.appIndex < appLauncher._uniqueApps.length) ? appLauncher._uniqueApps[currentApp.appIndex] : null
-        readonly property string appId: desktopEntry ? (desktopEntry.id || desktopEntry.execString || "") : ""
+        property bool menuVisible: false
+
+        readonly property string appId: (currentApp && currentApp.desktopEntry) ? (currentApp.desktopEntry.id || currentApp.desktopEntry.execString || "") : ""
         readonly property bool isPinned: appId && SessionData.isPinnedApp(appId)
 
         function show(x, y, app) {
             currentApp = app
-            contextMenu.x = x + 4
-            contextMenu.y = y + 4
-            contextMenu.open()
+
+            const menuWidth = 180
+            const menuHeight = menuColumn.implicitHeight + Theme.spacingS * 2
+
+            let finalX = x + 8
+            let finalY = y + 8
+
+            if (finalX + menuWidth > appDrawerPopout.popupWidth) {
+                finalX = x - menuWidth - 8
+            }
+
+            if (finalY + menuHeight > appDrawerPopout.popupHeight) {
+                finalY = y - menuHeight - 8
+            }
+
+            finalX = Math.max(8, Math.min(finalX, appDrawerPopout.popupWidth - menuWidth - 8))
+            finalY = Math.max(8, Math.min(finalY, appDrawerPopout.popupHeight - menuHeight - 8))
+
+            contextMenu.x = finalX
+            contextMenu.y = finalY
+            contextMenu.visible = true
+            contextMenu.menuVisible = true
         }
 
-        function hide() {
-            contextMenu.close()
+        function close() {
+            contextMenu.menuVisible = false
+            Qt.callLater(() => {
+                             contextMenu.visible = false
+                         })
         }
 
-        width: Math.max(180, menuColumn.implicitWidth + Theme.spacingS * 2)
+        visible: false
+        width: 180
         height: menuColumn.implicitHeight + Theme.spacingS * 2
-        padding: 0
-        closePolicy: Popup.CloseOnPressOutside
-        modal: false
-        dim: false
+        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
 
-        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
-            }
+        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 {
@@ -588,7 +697,7 @@ DankPopout {
                     }
 
                     StyledText {
-                        text: contextMenu.isPinned ? I18n.tr("Unpin from Dock") : I18n.tr("Pin to Dock")
+                        text: contextMenu.isPinned ? "Unpin from Dock" : "Pin to Dock"
                         font.pixelSize: Theme.fontSizeSmall
                         color: Theme.surfaceText
                         font.weight: Font.Normal
@@ -603,7 +712,7 @@ DankPopout {
                     hoverEnabled: true
                     cursorShape: Qt.PointingHandCursor
                     onClicked: {
-                        if (!contextMenu.desktopEntry) {
+                        if (!contextMenu.currentApp || !contextMenu.currentApp.desktopEntry) {
                             return
                         }
 
@@ -612,7 +721,7 @@ DankPopout {
                         } else {
                             SessionData.addPinnedApp(contextMenu.appId)
                         }
-                        contextMenu.hide()
+                        contextMenu.close()
                     }
                 }
             }
@@ -631,79 +740,6 @@ DankPopout {
                 }
             }
 
-            Repeater {
-                model: contextMenu.desktopEntry && contextMenu.desktopEntry.actions ? contextMenu.desktopEntry.actions : []
-
-                Rectangle {
-                    width: Math.max(parent.width, actionRow.implicitWidth + Theme.spacingS * 2)
-                    height: 32
-                    radius: Theme.cornerRadius
-                    color: actionMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
-
-                    Row {
-                        id: actionRow
-                        anchors.left: parent.left
-                        anchors.leftMargin: Theme.spacingS
-                        anchors.verticalCenter: parent.verticalCenter
-                        spacing: Theme.spacingS
-
-                        Item {
-                            anchors.verticalCenter: parent.verticalCenter
-                            width: Theme.iconSize - 2
-                            height: Theme.iconSize - 2
-                            visible: modelData.icon && modelData.icon !== ""
-
-                            IconImage {
-                                anchors.fill: parent
-                                source: modelData.icon ? Quickshell.iconPath(modelData.icon, true) : ""
-                                smooth: true
-                                asynchronous: true
-                                visible: status === Image.Ready
-                            }
-                        }
-
-                        StyledText {
-                            text: modelData.name || ""
-                            font.pixelSize: Theme.fontSizeSmall
-                            color: Theme.surfaceText
-                            font.weight: Font.Normal
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-                    }
-
-                    MouseArea {
-                        id: actionMouseArea
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            if (modelData && contextMenu.desktopEntry) {
-                                SessionService.launchDesktopAction(contextMenu.desktopEntry, modelData)
-                                if (contextMenu.currentApp) {
-                                    appLauncher.appLaunched(contextMenu.currentApp)
-                                }
-                            }
-                            contextMenu.hide()
-                        }
-                    }
-                }
-            }
-
-            Rectangle {
-                visible: contextMenu.desktopEntry && contextMenu.desktopEntry.actions && contextMenu.desktopEntry.actions.length > 0
-                width: parent.width - Theme.spacingS * 2
-                height: 5
-                anchors.horizontalCenter: parent.horizontalCenter
-                color: "transparent"
-
-                Rectangle {
-                    anchors.centerIn: parent
-                    width: parent.width
-                    height: 1
-                    color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
-                }
-            }
-
             Rectangle {
                 width: parent.width
                 height: 32
@@ -725,7 +761,7 @@ DankPopout {
                     }
 
                     StyledText {
-                        text: I18n.tr("Launch")
+                        text: "Launch"
                         font.pixelSize: Theme.fontSizeSmall
                         color: Theme.surfaceText
                         font.weight: Font.Normal
@@ -743,72 +779,23 @@ DankPopout {
                         if (contextMenu.currentApp)
                             appLauncher.launchApp(contextMenu.currentApp)
 
-                        contextMenu.hide()
+                        contextMenu.close()
                     }
                 }
             }
+        }
 
-            Rectangle {
-                visible: SessionService.hasPrimeRun
-                width: parent.width - Theme.spacingS * 2
-                height: 5
-                anchors.horizontalCenter: parent.horizontalCenter
-                color: "transparent"
-
-                Rectangle {
-                    anchors.centerIn: parent
-                    width: parent.width
-                    height: 1
-                    color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
-                }
+        Behavior on opacity {
+            NumberAnimation {
+                duration: Theme.mediumDuration
+                easing.type: Theme.emphasizedEasing
             }
+        }
 
-            Rectangle {
-                visible: SessionService.hasPrimeRun
-                width: parent.width
-                height: 32
-                radius: Theme.cornerRadius
-                color: primeRunMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
-
-                Row {
-                    anchors.left: parent.left
-                    anchors.leftMargin: Theme.spacingS
-                    anchors.verticalCenter: parent.verticalCenter
-                    spacing: Theme.spacingS
-
-                    DankIcon {
-                        name: "memory"
-                        size: Theme.iconSize - 2
-                        color: Theme.surfaceText
-                        opacity: 0.7
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-
-                    StyledText {
-                        text: I18n.tr("Launch on dGPU")
-                        font.pixelSize: Theme.fontSizeSmall
-                        color: Theme.surfaceText
-                        font.weight: Font.Normal
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-                }
-
-                MouseArea {
-                    id: primeRunMouseArea
-
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
-                    onClicked: {
-                        if (contextMenu.desktopEntry) {
-                            SessionService.launchDesktopEntry(contextMenu.desktopEntry, true)
-                            if (contextMenu.currentApp) {
-                                appLauncher.appLaunched(contextMenu.currentApp)
-                            }
-                        }
-                        contextMenu.hide()
-                    }
-                }
+        Behavior on scale {
+            NumberAnimation {
+                duration: Theme.mediumDuration
+                easing.type: Theme.emphasizedEasing
             }
         }
     }
@@ -818,7 +805,7 @@ DankPopout {
         visible: contextMenu.visible
         z: 999
         onClicked: {
-            contextMenu.hide()
+            contextMenu.close()
         }
 
         MouseArea {

Modules/AppDrawer/AppLauncher.qml

@@ -0,0 +1,174 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    property string searchQuery: ""
+    property string selectedCategory: "All"
+    property string viewMode: "list" // "list" or "grid"
+    property int selectedIndex: 0
+    property int maxResults: 50
+    property int gridColumns: 4
+    property bool debounceSearch: true
+    property int debounceInterval: 50
+    property bool keyboardNavigationActive: false
+    property bool suppressUpdatesWhileLaunching: false
+    readonly property var categories: {
+        const allCategories = AppSearchService.getAllCategories().filter(cat => cat !== "Education" && cat !== "Science")
+        const result = ["All"]
+        return result.concat(allCategories.filter(cat => cat !== "All"))
+    }
+    readonly property var categoryIcons: categories.map(category => AppSearchService.getCategoryIcon(category))
+    property var appUsageRanking: AppUsageHistoryData.appUsageRanking || {}
+    property alias model: filteredModel
+    property var _watchApplications: AppSearchService.applications
+
+    signal appLaunched(var app)
+    signal categorySelected(string category)
+    signal viewModeSelected(string mode)
+
+    function updateFilteredModel() {
+        if (suppressUpdatesWhileLaunching) {
+            suppressUpdatesWhileLaunching = false
+            return
+        }
+        filteredModel.clear()
+        selectedIndex = 0
+        keyboardNavigationActive = false
+
+        let apps = []
+        if (searchQuery.length === 0) {
+            apps = selectedCategory === "All" ? AppSearchService.getAppsInCategory("All") : AppSearchService.getAppsInCategory(selectedCategory).slice(0, maxResults)
+        } else {
+            if (selectedCategory === "All") {
+                apps = AppSearchService.searchApplications(searchQuery)
+            } else {
+                const categoryApps = AppSearchService.getAppsInCategory(selectedCategory)
+                if (categoryApps.length > 0) {
+                    const allSearchResults = AppSearchService.searchApplications(searchQuery)
+                    const categoryNames = new Set(categoryApps.map(app => app.name))
+                    apps = allSearchResults.filter(searchApp => categoryNames.has(searchApp.name)).slice(0, maxResults)
+                } else {
+                    apps = []
+                }
+            }
+        }
+
+        if (searchQuery.length === 0) {
+            apps = apps.sort((a, b) => {
+                                 const aId = a.id || a.execString || a.exec || ""
+                                 const bId = b.id || b.execString || b.exec || ""
+                                 const aUsage = appUsageRanking[aId] ? appUsageRanking[aId].usageCount : 0
+                                 const bUsage = appUsageRanking[bId] ? appUsageRanking[bId].usageCount : 0
+                                 if (aUsage !== bUsage) {
+                                     return bUsage - aUsage
+                                 }
+                                 return (a.name || "").localeCompare(b.name || "")
+                             })
+        }
+
+        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
+                                                  })
+                         }
+                     })
+    }
+
+    function selectNext() {
+        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) {
+            return
+        }
+        keyboardNavigationActive = true
+        selectedIndex = viewMode === "grid" ? Math.max(selectedIndex - gridColumns, 0) : Math.max(selectedIndex - 1, 0)
+    }
+
+    function selectNextInRow() {
+        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") {
+            return
+        }
+        keyboardNavigationActive = true
+        selectedIndex = Math.max(selectedIndex - 1, 0)
+    }
+
+    function launchSelected() {
+        if (filteredModel.count === 0 || selectedIndex < 0 || selectedIndex >= filteredModel.count) {
+            return
+        }
+        const selectedApp = filteredModel.get(selectedIndex)
+        launchApp(selectedApp)
+    }
+
+    function launchApp(appData) {
+        if (!appData) {
+            return
+        }
+        suppressUpdatesWhileLaunching = true
+        SessionService.launchDesktopEntry(appData.desktopEntry)
+        appLaunched(appData)
+        AppUsageHistoryData.addAppUsage(appData.desktopEntry)
+    }
+
+    function setCategory(category) {
+        selectedCategory = category
+        categorySelected(category)
+    }
+
+    function setViewMode(mode) {
+        viewMode = mode
+        viewModeSelected(mode)
+    }
+
+    onSearchQueryChanged: {
+        if (debounceSearch) {
+            searchDebounceTimer.restart()
+        } else {
+            updateFilteredModel()
+        }
+    }
+    onSelectedCategoryChanged: updateFilteredModel()
+    onAppUsageRankingChanged: updateFilteredModel()
+    on_WatchApplicationsChanged: updateFilteredModel()
+    Component.onCompleted: {
+        updateFilteredModel()
+    }
+
+    ListModel {
+        id: filteredModel
+    }
+
+    Timer {
+        id: searchDebounceTimer
+
+        interval: root.debounceInterval
+        repeat: false
+        onTriggered: updateFilteredModel()
+    }
+}

Modules/AppDrawer/CategorySelector.qml

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

Modules/ControlCenter/Components/ActionTile.qml

@@ -25,7 +25,7 @@ Rectangle {
 
     readonly property color _tileBgActive: Theme.primary
     readonly property color _tileBgInactive:
-        Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+        Theme.surfaceContainerHigh
     readonly property color _tileRingActive:
         Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
 
@@ -59,7 +59,7 @@ Rectangle {
         DankIcon {
             name: root.iconName
             size: Theme.iconSize
-            color: isActive ? Theme.primaryText : Theme.primary
+            color: isActive ? Theme.primaryContainer : Theme.primary
             anchors.verticalCenter: parent.verticalCenter
         }
 
@@ -77,7 +77,7 @@ Rectangle {
                     width: parent.width
                     text: root.text
                     style: Typography.Style.Body
-                    color: isActive ? Theme.primaryText : Theme.surfaceText
+                    color: isActive ? Theme.primaryContainer : Theme.surfaceText
                     elide: Text.ElideRight
                     wrapMode: Text.NoWrap
                 }
@@ -86,7 +86,7 @@ Rectangle {
                     width: parent.width
                     text: root.secondaryText
                     style: Typography.Style.Caption
-                    color: isActive ? Theme.primaryText : Theme.surfaceVariantText
+                    color: isActive ? Theme.primaryContainer : Theme.surfaceVariantText
                     visible: text.length > 0
                     elide: Text.ElideRight
                     wrapMode: Text.NoWrap

Modules/ControlCenter/Components/DetailHost.qml

@@ -8,37 +8,31 @@ Item {
     property string expandedSection: ""
     property var expandedWidgetData: null
 
-    height: active ? 250 : 0
-    visible: active
-
-    readonly property bool active: expandedSection !== ""
-
-    Behavior on height {
-        NumberAnimation {
-            duration: Theme.mediumDuration
-            easing.type: Easing.OutCubic
-        }
-    }
-
     Loader {
-        anchors.fill: parent
-        anchors.topMargin: Theme.spacingS
+        width: parent.width
+        height: 250
+        y: Theme.spacingS
+        active: parent.height > 0
+        property string sectionKey: root.expandedSection
         sourceComponent: {
-            if (!root.active) return null
-
-            if (expandedSection.startsWith("diskUsage_")) {
-                return diskUsageDetailComponent
-            }
-
-            switch (expandedSection) {
-                case "wifi": return networkDetailComponent
-                case "bluetooth": return bluetoothDetailComponent
-                case "audioOutput": return audioOutputDetailComponent
-                case "audioInput": return audioInputDetailComponent
-                case "battery": return batteryDetailComponent
-                default: return null
+            switch (root.expandedSection) {
+            case "network":
+            case "wifi": return networkDetailComponent
+            case "bluetooth": return bluetoothDetailComponent
+            case "audioOutput": return audioOutputDetailComponent
+            case "audioInput": return audioInputDetailComponent
+            case "battery": return batteryDetailComponent
+            default:
+                if (root.expandedSection.startsWith("diskUsage_")) {
+                    return diskUsageDetailComponent
+                }
+                return null
             }
         }
+        onSectionKeyChanged: {
+            active = false
+            active = true
+        }
     }
 
     Component {
@@ -72,6 +66,7 @@ Item {
             currentMountPath: root.expandedWidgetData?.mountPath || "/"
             instanceId: root.expandedWidgetData?.instanceId || ""
 
+
             onMountPathChanged: (newMountPath) => {
                 if (root.expandedWidgetData && root.expandedWidgetData.id === "diskUsage") {
                     const widgets = SettingsData.controlCenterWidgets || []
@@ -83,7 +78,7 @@ Item {
                         }
                         return w
                     })
-                    SettingsData.set("controlCenterWidgets", newWidgets)
+                    SettingsData.setControlCenterWidgets(newWidgets)
                 }
             }
         }

Modules/ControlCenter/Components/EditControls.qml

@@ -7,7 +7,6 @@ Row {
     id: root
 
     property var availableWidgets: []
-    property Item popoutContent: null
 
     signal addWidget(string widgetId)
     signal resetToDefault()
@@ -20,9 +19,7 @@ Row {
 
     Popup {
         id: addWidgetPopup
-        parent: popoutContent
-        x: parent ? Math.round((parent.width - width) / 2) : 0
-        y: parent ? Math.round((parent.height - height) / 2) : 0
+        anchors.centerIn: parent
         width: 400
         height: 300
         modal: true
@@ -32,7 +29,7 @@ Row {
         background: Rectangle {
             color: Theme.surfaceContainer
             border.color: Theme.primarySelected
-            border.width: 0
+            border.width: 1
             radius: Theme.cornerRadius
         }
 
@@ -55,7 +52,7 @@ Row {
                 }
 
                 Typography {
-                    text: I18n.tr("Add Widget")
+                    text: "Add Widget"
                     style: Typography.Style.Subtitle
                     color: Theme.surfaceText
                     anchors.verticalCenter: parent.verticalCenter
@@ -69,16 +66,15 @@ Row {
                 anchors.right: parent.right
                 anchors.bottom: parent.bottom
                 spacing: Theme.spacingS
-                clip: true
                 model: root.availableWidgets
 
                 delegate: Rectangle {
                     width: 400 - Theme.spacingL * 2
                     height: 50
                     radius: Theme.cornerRadius
-                    color: widgetMouseArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                    color: widgetMouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceContainerHigh
                     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
-                    border.width: 0
+                    border.width: 1
 
                     Row {
                         anchors.fill: parent
@@ -142,7 +138,7 @@ Row {
         radius: Theme.cornerRadius
         color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
         border.color: Theme.primary
-        border.width: 0
+        border.width: 1
 
         Row {
             anchors.centerIn: parent
@@ -156,7 +152,7 @@ Row {
             }
 
             Typography {
-                text: I18n.tr("Add Widget")
+                text: "Add Widget"
                 style: Typography.Style.Button
                 color: Theme.primary
                 anchors.verticalCenter: parent.verticalCenter
@@ -176,7 +172,7 @@ Row {
         radius: Theme.cornerRadius
         color: Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.12)
         border.color: Theme.warning
-        border.width: 0
+        border.width: 1
 
         Row {
             anchors.centerIn: parent
@@ -190,7 +186,7 @@ Row {
             }
 
             Typography {
-                text: I18n.tr("Defaults")
+                text: "Defaults"
                 style: Typography.Style.Button
                 color: Theme.warning
                 anchors.verticalCenter: parent.verticalCenter
@@ -210,7 +206,7 @@ Row {
         radius: Theme.cornerRadius
         color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12)
         border.color: Theme.error
-        border.width: 0
+        border.width: 1
 
         Row {
             anchors.centerIn: parent
@@ -224,7 +220,7 @@ Row {
             }
 
             Typography {
-                text: I18n.tr("Reset")
+                text: "Reset"
                 style: Typography.Style.Button
                 color: Theme.error
                 anchors.verticalCenter: parent.verticalCenter

Modules/ControlCenter/Components/EditModeOverlay.qml

@@ -0,0 +1,241 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Item {
+    id: root
+
+    property bool editMode: false
+    property var widgetData: null
+    property int widgetIndex: -1
+    property bool showSizeControls: true
+    property bool isSlider: false
+
+    signal removeWidget(int index)
+    signal toggleWidgetSize(int index)
+    signal moveWidget(int fromIndex, int toIndex)
+
+    // Delete button in top-right
+    Rectangle {
+        width: 16
+        height: 16
+        radius: 8
+        color: Theme.error
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.margins: -4
+        visible: editMode
+        z: 10
+
+        DankIcon {
+            anchors.centerIn: parent
+            name: "close"
+            size: 12
+            color: Theme.primaryText
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: root.removeWidget(widgetIndex)
+        }
+    }
+
+    // Size control buttons in bottom-right
+    Row {
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        anchors.margins: -8
+        spacing: 4
+        visible: editMode && showSizeControls
+        z: 10
+
+        Rectangle {
+            width: 24
+            height: 24
+            radius: 12
+            color: (widgetData?.width || 50) === 25 ? Theme.primary : Theme.primaryContainer
+            border.color: Theme.primary
+            border.width: 1
+            visible: !isSlider
+
+            StyledText {
+                anchors.centerIn: parent
+                text: "25"
+                font.pixelSize: 10
+                font.weight: Font.Medium
+                color: (widgetData?.width || 50) === 25 ? Theme.primaryText : Theme.primary
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    var widgets = SettingsData.controlCenterWidgets.slice()
+                    if (widgetIndex >= 0 && widgetIndex < widgets.length) {
+                        widgets[widgetIndex].width = 25
+                        SettingsData.setControlCenterWidgets(widgets)
+                    }
+                }
+            }
+        }
+
+        Rectangle {
+            width: 24
+            height: 24
+            radius: 12
+            color: (widgetData?.width || 50) === 50 ? Theme.primary : Theme.primaryContainer
+            border.color: Theme.primary
+            border.width: 1
+
+            StyledText {
+                anchors.centerIn: parent
+                text: "50"
+                font.pixelSize: 10
+                font.weight: Font.Medium
+                color: (widgetData?.width || 50) === 50 ? Theme.primaryText : Theme.primary
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    var widgets = SettingsData.controlCenterWidgets.slice()
+                    if (widgetIndex >= 0 && widgetIndex < widgets.length) {
+                        widgets[widgetIndex].width = 50
+                        SettingsData.setControlCenterWidgets(widgets)
+                    }
+                }
+            }
+        }
+
+        Rectangle {
+            width: 24
+            height: 24
+            radius: 12
+            color: (widgetData?.width || 50) === 75 ? Theme.primary : Theme.primaryContainer
+            border.color: Theme.primary
+            border.width: 1
+            visible: !isSlider
+
+            StyledText {
+                anchors.centerIn: parent
+                text: "75"
+                font.pixelSize: 10
+                font.weight: Font.Medium
+                color: (widgetData?.width || 50) === 75 ? Theme.primaryText : Theme.primary
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    var widgets = SettingsData.controlCenterWidgets.slice()
+                    if (widgetIndex >= 0 && widgetIndex < widgets.length) {
+                        widgets[widgetIndex].width = 75
+                        SettingsData.setControlCenterWidgets(widgets)
+                    }
+                }
+            }
+        }
+
+        Rectangle {
+            width: 24
+            height: 24
+            radius: 12
+            color: (widgetData?.width || 50) === 100 ? Theme.primary : Theme.primaryContainer
+            border.color: Theme.primary
+            border.width: 1
+
+            StyledText {
+                anchors.centerIn: parent
+                text: "100"
+                font.pixelSize: 9
+                font.weight: Font.Medium
+                color: (widgetData?.width || 50) === 100 ? Theme.primaryText : Theme.primary
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    var widgets = SettingsData.controlCenterWidgets.slice()
+                    if (widgetIndex >= 0 && widgetIndex < widgets.length) {
+                        widgets[widgetIndex].width = 100
+                        SettingsData.setControlCenterWidgets(widgets)
+                    }
+                }
+            }
+        }
+    }
+
+    // Arrow buttons for reordering in top-left
+    Row {
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.margins: 4
+        spacing: 2
+        visible: editMode
+        z: 20
+
+        Rectangle {
+            width: 16
+            height: 16
+            radius: 8
+            color: Theme.surfaceContainer
+            border.color: Theme.outline
+            border.width: 1
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: "keyboard_arrow_left"
+                size: 12
+                color: Theme.surfaceText
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                enabled: widgetIndex > 0
+                opacity: enabled ? 1.0 : 0.5
+                onClicked: root.moveWidget(widgetIndex, widgetIndex - 1)
+            }
+        }
+
+        Rectangle {
+            width: 16
+            height: 16
+            radius: 8
+            color: Theme.surfaceContainer
+            border.color: Theme.outline
+            border.width: 1
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: "keyboard_arrow_right"
+                size: 12
+                color: Theme.surfaceText
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                enabled: widgetIndex < ((SettingsData.controlCenterWidgets?.length ?? 0) - 1)
+                opacity: enabled ? 1.0 : 0.5
+                onClicked: root.moveWidget(widgetIndex, widgetIndex + 1)
+            }
+        }
+    }
+
+    // Border highlight
+    Rectangle {
+        anchors.fill: parent
+        color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
+        radius: Theme.cornerRadius
+        border.color: Theme.primary
+        border.width: editMode ? 1 : 0
+        visible: editMode
+        z: -1
+
+        Behavior on border.width {
+            NumberAnimation { duration: Theme.shortDuration }
+        }
+    }
+}

Modules/ControlCenter/Components/HeaderPane.qml

@@ -6,19 +6,19 @@ import qs.Widgets
 Rectangle {
     id: root
 
+    property bool powerOptionsExpanded: false
     property bool editMode: false
 
-    signal powerButtonClicked()
+    signal powerActionRequested(string action, string title, string message)
     signal lockRequested()
     signal editModeToggled()
-    signal settingsButtonClicked()
 
     implicitHeight: 70
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                           Theme.outline.b, 0.08)
-    border.width: 0
+    border.width: 1
 
     Row {
         anchors.left: parent.left
@@ -83,11 +83,13 @@ Rectangle {
 
         DankActionButton {
             buttonSize: 36
-            iconName: "power_settings_new"
+            iconName: root.powerOptionsExpanded ? "expand_less" : "power_settings_new"
             iconSize: Theme.iconSize - 4
-            iconColor: Theme.surfaceText
+            iconColor: root.powerOptionsExpanded ? Theme.primary : Theme.surfaceText
             backgroundColor: "transparent"
-            onClicked: root.powerButtonClicked()
+            onClicked: {
+                root.powerOptionsExpanded = !root.powerOptionsExpanded
+            }
         }
 
         DankActionButton {
@@ -97,7 +99,6 @@ Rectangle {
             iconColor: Theme.surfaceText
             backgroundColor: "transparent"
             onClicked: {
-                root.settingsButtonClicked()
                 settingsModal.show()
             }
         }

Modules/ControlCenter/Components/PowerOptionsPane.qml

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

Modules/ControlCenter/Components/WidgetGrid.qml

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

Modules/ControlCenter/ControlCenterPopout.qml

@@ -0,0 +1,225 @@
+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.Modules.ControlCenter
+import qs.Modules.ControlCenter.Widgets
+import qs.Modules.ControlCenter.Details
+import qs.Modules.TopBar
+import qs.Services
+import qs.Widgets
+import qs.Modules.ControlCenter.Components
+import qs.Modules.ControlCenter.Models
+import "./utils/state.js" as StateUtils
+
+DankPopout {
+    id: root
+
+    property string expandedSection: ""
+    property bool powerOptionsExpanded: false
+    property string triggerSection: "right"
+    property var triggerScreen: null
+    property bool editMode: false
+    property int expandedWidgetIndex: -1
+    property var expandedWidgetData: null
+
+    signal powerActionRequested(string action, string title, string message)
+    signal lockRequested
+
+    function collapseAll() {
+        expandedSection = ""
+        expandedWidgetIndex = -1
+        expandedWidgetData = null
+    }
+
+    onEditModeChanged: {
+        if (editMode) {
+            collapseAll()
+        }
+    }
+
+    onVisibleChanged: {
+        if (!visible) {
+            collapseAll()
+        }
+    }
+
+    readonly property color _containerBg: Theme.surfaceContainerHigh
+
+    function setTriggerPosition(x, y, width, section, screen) {
+        StateUtils.setTriggerPosition(root, x, y, width, section, screen)
+    }
+
+    function openWithSection(section) {
+        StateUtils.openWithSection(root, section)
+    }
+
+    function toggleSection(section) {
+        StateUtils.toggleSection(root, section)
+    }
+
+    popupWidth: 550
+    popupHeight: Math.min((triggerScreen?.height ?? 1080) - 100, contentLoader.item && contentLoader.item.implicitHeight > 0 ? contentLoader.item.implicitHeight + 20 : 400)
+    triggerX: (triggerScreen?.width ?? 1920) - 600 - Theme.spacingL
+    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.spacingXS
+    triggerWidth: 80
+    positioning: "center"
+    screen: triggerScreen
+    shouldBeVisible: false
+    visible: shouldBeVisible
+
+    onShouldBeVisibleChanged: {
+        if (shouldBeVisible) {
+            Qt.callLater(() => {
+                NetworkService.autoRefreshEnabled = NetworkService.wifiEnabled
+                if (UserInfoService)
+                    UserInfoService.getUptime()
+            })
+        } else {
+            Qt.callLater(() => {
+                NetworkService.autoRefreshEnabled = false
+                if (BluetoothService.adapter && BluetoothService.adapter.discovering)
+                    BluetoothService.adapter.discovering = false
+                editMode = false
+            })
+        }
+    }
+
+    WidgetModel {
+        id: widgetModel
+    }
+
+    content: Component {
+        Rectangle {
+            id: controlContent
+
+            implicitHeight: mainColumn.implicitHeight + Theme.spacingM
+            property alias bluetoothCodecSelector: bluetoothCodecSelector
+
+            color: {
+                const transparency = Theme.popupTransparency || 0.92
+                const surface = Theme.surfaceContainer || Qt.rgba(0.1, 0.1, 0.1, 1)
+                return Qt.rgba(surface.r, surface.g, surface.b, transparency)
+            }
+            radius: Theme.cornerRadius
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
+                                  Theme.outline.b, 0.08)
+            border.width: 1
+            antialiasing: true
+            smooth: true
+
+            Column {
+                id: mainColumn
+                width: parent.width - Theme.spacingL * 2
+                x: Theme.spacingL
+                y: Theme.spacingL
+                spacing: Theme.spacingS
+
+                HeaderPane {
+                    id: headerPane
+                    width: parent.width
+                    powerOptionsExpanded: root.powerOptionsExpanded
+                    editMode: root.editMode
+                    onPowerOptionsExpandedChanged: root.powerOptionsExpanded = powerOptionsExpanded
+                    onEditModeToggled: root.editMode = !root.editMode
+                    onPowerActionRequested: (action, title, message) => root.powerActionRequested(action, title, message)
+                    onLockRequested: {
+                        root.close()
+                        root.lockRequested()
+                    }
+                }
+
+                PowerOptionsPane {
+                    id: powerOptionsPane
+                    width: parent.width
+                    expanded: root.powerOptionsExpanded
+                    onPowerActionRequested: (action, title, message) => {
+                        root.powerOptionsExpanded = false
+                        root.close()
+                        root.powerActionRequested(action, title, message)
+                    }
+                }
+
+                WidgetGrid {
+                    id: widgetGrid
+                    width: parent.width
+                    editMode: root.editMode
+                    expandedSection: root.expandedSection
+                    expandedWidgetIndex: root.expandedWidgetIndex
+                    expandedWidgetData: root.expandedWidgetData
+                    model: widgetModel
+                    onExpandClicked: (widgetData, globalIndex) => {
+                        root.expandedWidgetIndex = globalIndex
+                        root.expandedWidgetData = widgetData
+                        if (widgetData.id === "diskUsage") {
+                            root.toggleSection("diskUsage_" + (widgetData.instanceId || "default"))
+                        } else {
+                            root.toggleSection(widgetData.id)
+                        }
+                    }
+                    onRemoveWidget: (index) => widgetModel.removeWidget(index)
+                    onMoveWidget: (fromIndex, toIndex) => widgetModel.moveWidget(fromIndex, toIndex)
+                    onToggleWidgetSize: (index) => widgetModel.toggleWidgetSize(index)
+                }
+
+                EditControls {
+                    width: parent.width
+                    visible: editMode
+                    availableWidgets: {
+                        const existingIds = (SettingsData.controlCenterWidgets || []).map(w => w.id)
+                        return widgetModel.baseWidgetDefinitions.filter(w => w.allowMultiple || !existingIds.includes(w.id))
+                    }
+                    onAddWidget: (widgetId) => widgetModel.addWidget(widgetId)
+                    onResetToDefault: () => widgetModel.resetToDefault()
+                    onClearAll: () => widgetModel.clearAll()
+                }
+            }
+
+            BluetoothCodecSelector {
+                id: bluetoothCodecSelector
+                anchors.fill: parent
+                z: 10000
+            }
+        }
+    }
+
+    Component {
+        id: networkDetailComponent
+        NetworkDetail {}
+    }
+
+    Component {
+        id: bluetoothDetailComponent
+        BluetoothDetail {
+            id: bluetoothDetail
+            onShowCodecSelector: function(device) {
+                if (contentLoader.item && contentLoader.item.bluetoothCodecSelector) {
+                    contentLoader.item.bluetoothCodecSelector.show(device)
+                    contentLoader.item.bluetoothCodecSelector.codecSelected.connect(function(deviceAddress, codecName) {
+                        bluetoothDetail.updateDeviceCodecDisplay(deviceAddress, codecName)
+                    })
+                }
+            }
+        }
+    }
+
+    Component {
+        id: audioOutputDetailComponent
+        AudioOutputDetail {}
+    }
+
+    Component {
+        id: audioInputDetailComponent
+        AudioInputDetail {}
+    }
+
+    Component {
+        id: batteryDetailComponent
+        BatteryDetail {}
+    }
+}

Modules/ControlCenter/Details/AudioInputDetail.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Controls
 import Quickshell
 import Quickshell.Services.Pipewire
 import qs.Common
@@ -6,18 +7,16 @@ import qs.Services
 import qs.Widgets
 
 Rectangle {
-    id: root
-
     property bool hasInputVolumeSliderInCC: {
-        const widgets = SettingsData.controlCenterWidgets || [];
-        return widgets.some(widget => widget.id === "inputVolumeSlider");
+        const widgets = SettingsData.controlCenterWidgets || []
+        return widgets.some(widget => widget.id === "inputVolumeSlider")
     }
 
     implicitHeight: headerRow.height + (hasInputVolumeSliderInCC ? 0 : volumeSlider.height) + audioContent.height + Theme.spacingM
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 0
+    border.width: 1
     
     Row {
         id: headerRow
@@ -31,7 +30,7 @@ Rectangle {
         
         StyledText {
             id: headerText
-            text: I18n.tr("Input Devices")
+            text: "Input Devices"
             font.pixelSize: Theme.fontSizeLarge
             color: Theme.surfaceText
             font.weight: Font.Medium
@@ -58,6 +57,10 @@ Rectangle {
             radius: (Theme.iconSize + Theme.spacingS * 2) / 2
             color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
 
+            Behavior on color {
+                ColorAnimation { duration: Theme.shortDuration }
+            }
+
             MouseArea {
                 id: iconArea
                 anchors.fill: parent
@@ -65,7 +68,7 @@ Rectangle {
                 cursorShape: Qt.PointingHandCursor
                 onClicked: {
                     if (AudioService.source && AudioService.source.audio) {
-                        AudioService.source.audio.muted = !AudioService.source.audio.muted;
+                        AudioService.source.audio.muted = !AudioService.source.audio.muted
                     }
                 }
             }
@@ -73,10 +76,9 @@ Rectangle {
             DankIcon {
                 anchors.centerIn: parent
                 name: {
-                    if (!AudioService.source || !AudioService.source.audio)
-                        return "mic_off";
-                    let muted = AudioService.source.audio.muted;
-                    return muted ? "mic_off" : "mic";
+                    if (!AudioService.source || !AudioService.source.audio) return "mic_off"
+                    let muted = AudioService.source.audio.muted
+                    return muted ? "mic_off" : "mic"
                 }
                 size: Theme.iconSize
                 color: AudioService.source && AudioService.source.audio && !AudioService.source.audio.muted && AudioService.source.audio.volume > 0 ? Theme.primary : Theme.surfaceText
@@ -97,11 +99,11 @@ Rectangle {
             valueOverride: actualVolumePercent
             thumbOutlineColor: Theme.surfaceVariant
 
-            onSliderValueChanged: function (newValue) {
+            onSliderValueChanged: function(newValue) {
                 if (AudioService.source && AudioService.source.audio) {
-                    AudioService.source.audio.volume = newValue / 100;
+                    AudioService.source.audio.volume = newValue / 100
                     if (newValue > 0 && AudioService.source.audio.muted) {
-                        AudioService.source.audio.muted = false;
+                        AudioService.source.audio.muted = false
                     }
                 }
             }
@@ -125,31 +127,9 @@ Rectangle {
             spacing: Theme.spacingS
             
             Repeater {
-                model: ScriptModel {
-                    values: {
-                        const nodes = Pipewire.nodes.values.filter(node => {
-                            return node.audio && !node.isSink && !node.isStream;
-                        });
-                        const pins = SettingsData.audioInputDevicePins || {};
-                        const pinnedName = pins["preferredInput"];
-
-                        let sorted = [...nodes];
-                        sorted.sort((a, b) => {
-                            // Pinned device first
-                            if (a.name === pinnedName && b.name !== pinnedName)
-                                return -1;
-                            if (b.name === pinnedName && a.name !== pinnedName)
-                                return 1;
-                            // Then active device
-                            if (a === AudioService.source && b !== AudioService.source)
-                                return -1;
-                            if (b === AudioService.source && a !== AudioService.source)
-                                return 1;
-                            return 0;
-                        });
-                        return sorted;
-                    }
-                }
+                model: Pipewire.nodes.values.filter(node => {
+                    return node.audio && !node.isSink && !node.isStream
+                })
                 
                 delegate: Rectangle {
                     required property var modelData
@@ -158,9 +138,9 @@ Rectangle {
                     width: parent.width
                     height: 50
                     radius: Theme.cornerRadius
-                    color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                    color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.surfaceContainerHigh
                     border.color: modelData === AudioService.source ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: 0
+                    border.width: modelData === AudioService.source ? 2 : 1
                     
                     Row {
                         anchors.left: parent.left
@@ -171,11 +151,11 @@ Rectangle {
                         DankIcon {
                             name: {
                                 if (modelData.name.includes("bluez"))
-                                    return "headset";
+                                    return "headset"
                                 else if (modelData.name.includes("usb"))
-                                    return "headset";
+                                    return "headset"
                                 else
-                                    return "mic";
+                                    return "mic"
                             }
                             size: Theme.iconSize - 4
                             color: modelData === AudioService.source ? Theme.primary : Theme.surfaceText
@@ -184,11 +164,7 @@ Rectangle {
                         
                         Column {
                             anchors.verticalCenter: parent.verticalCenter
-                            width: {
-                                const iconWidth = Theme.iconSize;
-                                const pinButtonWidth = pinInputRow.width + Theme.spacingS * 4 + Theme.spacingM;
-                                return parent.parent.width - iconWidth - parent.spacing - pinButtonWidth - Theme.spacingM * 2;
-                            }
+                            width: parent.parent.width - parent.parent.anchors.leftMargin - parent.spacing - Theme.iconSize - Theme.spacingM
                             
                             StyledText {
                                 text: AudioService.displayName(modelData)
@@ -211,77 +187,25 @@ Rectangle {
                         }
                     }
                     
-                    Rectangle {
-                        anchors.right: parent.right
-                        anchors.rightMargin: Theme.spacingM
-                        anchors.verticalCenter: parent.verticalCenter
-                        width: pinInputRow.width + Theme.spacingS * 2
-                        height: 28
-                        radius: height / 2
-                        color: {
-                            const isThisDevicePinned = (SettingsData.audioInputDevicePins || {})["preferredInput"] === modelData.name;
-                            return isThisDevicePinned ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.surfaceText, 0.05);
-                        }
-
-                        Row {
-                            id: pinInputRow
-                            anchors.centerIn: parent
-                            spacing: 4
-
-                            DankIcon {
-                                name: "push_pin"
-                                size: 16
-                                color: {
-                                    const isThisDevicePinned = (SettingsData.audioInputDevicePins || {})["preferredInput"] === modelData.name;
-                                    return isThisDevicePinned ? Theme.primary : Theme.surfaceText;
-                                }
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                            StyledText {
-                                text: {
-                                    const isThisDevicePinned = (SettingsData.audioInputDevicePins || {})["preferredInput"] === modelData.name;
-                                    return isThisDevicePinned ? "Pinned" : "Pin";
-                                }
-                                font.pixelSize: Theme.fontSizeSmall
-                                color: {
-                                    const isThisDevicePinned = (SettingsData.audioInputDevicePins || {})["preferredInput"] === modelData.name;
-                                    return isThisDevicePinned ? Theme.primary : Theme.surfaceText;
-                                }
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-                        }
-
-                        MouseArea {
-                            anchors.fill: parent
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                const pins = JSON.parse(JSON.stringify(SettingsData.audioInputDevicePins || {}));
-                                const isCurrentlyPinned = pins["preferredInput"] === modelData.name;
-
-                                if (isCurrentlyPinned) {
-                                    delete pins["preferredInput"];
-                                } else {
-                                    pins["preferredInput"] = modelData.name;
-                                }
-
-                                SettingsData.set("audioInputDevicePins", pins);
-                            }
-                        }
-                    }
-
                     MouseArea {
                         id: deviceMouseArea
                         anchors.fill: parent
-                        anchors.rightMargin: pinInputRow.width + Theme.spacingS * 4
                         hoverEnabled: true
                         cursorShape: Qt.PointingHandCursor
                         onClicked: {
                             if (modelData) {
-                                Pipewire.preferredDefaultAudioSource = modelData;
+                                Pipewire.preferredDefaultAudioSource = modelData
                             }
                         }
                     }
+                    
+                    Behavior on color {
+                        ColorAnimation { duration: Theme.shortDuration }
+                    }
+                    
+                    Behavior on border.color {
+                        ColorAnimation { duration: Theme.shortDuration }
+                    }
                 }
             }
         }

Modules/ControlCenter/Details/AudioOutputDetail.qml

@@ -0,0 +1,220 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Services.Pipewire
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    property bool hasVolumeSliderInCC: {
+        const widgets = SettingsData.controlCenterWidgets || []
+        return widgets.some(widget => widget.id === "volumeSlider")
+    }
+
+    implicitHeight: headerRow.height + (!hasVolumeSliderInCC ? volumeSlider.height : 0) + audioContent.height + Theme.spacingM
+    radius: Theme.cornerRadius
+    color: Theme.surfaceContainerHigh
+    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.width: 1
+    
+    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.spacingS
+        height: 40
+        
+        StyledText {
+            id: headerText
+            text: "Audio Devices"
+            font.pixelSize: Theme.fontSizeLarge
+            color: Theme.surfaceText
+            font.weight: Font.Medium
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+
+    Row {
+        id: volumeSlider
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: headerRow.bottom
+        anchors.leftMargin: Theme.spacingM
+        anchors.rightMargin: Theme.spacingM
+        anchors.topMargin: Theme.spacingXS
+        height: 35
+        spacing: 0
+        visible: !hasVolumeSliderInCC
+
+        Rectangle {
+            width: Theme.iconSize + Theme.spacingS * 2
+            height: Theme.iconSize + Theme.spacingS * 2
+            anchors.verticalCenter: parent.verticalCenter
+            radius: (Theme.iconSize + Theme.spacingS * 2) / 2
+            color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+            Behavior on color {
+                ColorAnimation { duration: Theme.shortDuration }
+            }
+
+            MouseArea {
+                id: iconArea
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    if (AudioService.sink && AudioService.sink.audio) {
+                        AudioService.sink.audio.muted = !AudioService.sink.audio.muted
+                    }
+                }
+            }
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: {
+                    if (!AudioService.sink || !AudioService.sink.audio) return "volume_off"
+                    let muted = AudioService.sink.audio.muted
+                    let volume = AudioService.sink.audio.volume
+                    if (muted || volume === 0.0) return "volume_off"
+                    if (volume <= 0.33) return "volume_down"
+                    if (volume <= 0.66) return "volume_up"
+                    return "volume_up"
+                }
+                size: Theme.iconSize
+                color: AudioService.sink && AudioService.sink.audio && !AudioService.sink.audio.muted && AudioService.sink.audio.volume > 0 ? Theme.primary : Theme.surfaceText
+            }
+        }
+
+        DankSlider {
+            readonly property real actualVolumePercent: AudioService.sink && AudioService.sink.audio ? Math.round(AudioService.sink.audio.volume * 100) : 0
+
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width - (Theme.iconSize + Theme.spacingS * 2)
+            enabled: AudioService.sink && AudioService.sink.audio
+            minimum: 0
+            maximum: 100
+            value: AudioService.sink && AudioService.sink.audio ? Math.min(100, Math.round(AudioService.sink.audio.volume * 100)) : 0
+            showValue: true
+            unit: "%"
+            valueOverride: actualVolumePercent
+            thumbOutlineColor: Theme.surfaceVariant
+
+            onSliderValueChanged: function(newValue) {
+                if (AudioService.sink && AudioService.sink.audio) {
+                    AudioService.sink.audio.volume = newValue / 100
+                    if (newValue > 0 && AudioService.sink.audio.muted) {
+                        AudioService.sink.audio.muted = false
+                    }
+                    AudioService.volumeChanged()
+                }
+            }
+        }
+    }
+
+    DankFlickable {
+        id: audioContent
+        anchors.top: volumeSlider.visible ? volumeSlider.bottom : headerRow.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.margins: Theme.spacingM
+        anchors.topMargin: volumeSlider.visible ? Theme.spacingS : Theme.spacingM
+        contentHeight: audioColumn.height
+        clip: true
+        
+        Column {
+            id: audioColumn
+            width: parent.width
+            spacing: Theme.spacingS
+            
+            Repeater {
+                model: Pipewire.nodes.values.filter(node => {
+                    return node.audio && node.isSink && !node.isStream
+                })
+                
+                delegate: Rectangle {
+                    required property var modelData
+                    required property int index
+                    
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.surfaceContainerHigh
+                    border.color: modelData === AudioService.sink ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                    border.width: modelData === AudioService.sink ? 2 : 1
+                    
+                    Row {
+                        anchors.left: parent.left
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.leftMargin: Theme.spacingM
+                        spacing: Theme.spacingS
+                        
+                        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 - 4
+                            color: modelData === AudioService.sink ? Theme.primary : Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                        
+                        Column {
+                            anchors.verticalCenter: parent.verticalCenter
+                            width: parent.parent.width - parent.parent.anchors.leftMargin - parent.spacing - Theme.iconSize - Theme.spacingM
+                            
+                            StyledText {
+                                text: AudioService.displayName(modelData)
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceText
+                                font.weight: modelData === AudioService.sink ? Font.Medium : Font.Normal
+                                elide: Text.ElideRight
+                                width: parent.width
+                                wrapMode: Text.NoWrap
+                            }
+                            
+                            StyledText {
+                                text: modelData === AudioService.sink ? "Active" : "Available"
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.surfaceVariantText
+                                elide: Text.ElideRight
+                                width: parent.width
+                                wrapMode: Text.NoWrap
+                            }
+                        }
+                    }
+                    
+                    MouseArea {
+                        id: deviceMouseArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            if (modelData) {
+                                Pipewire.preferredDefaultAudioSink = modelData
+                            }
+                        }
+                    }
+                    
+                    Behavior on color {
+                        ColorAnimation { duration: Theme.shortDuration }
+                    }
+                    
+                    Behavior on border.color {
+                        ColorAnimation { duration: Theme.shortDuration }
+                    }
+                }
+            }
+        }
+    }
+}

Modules/ControlCenter/Details/BatteryDetail.qml

@@ -9,9 +9,9 @@ import qs.Widgets
 Rectangle {
     implicitHeight: contentColumn.implicitHeight + Theme.spacingL * 2
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 0
+    border.width: 1
 
     function isActiveProfile(profile) {
         if (typeof PowerProfiles === "undefined") {
@@ -125,7 +125,7 @@ Rectangle {
                 width: (parent.width - Theme.spacingM) / 2
                 height: 64
                 radius: Theme.cornerRadius
-                color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                color: Theme.surfaceContainerHighest
                 border.width: 0
 
                 Column {
@@ -133,7 +133,7 @@ Rectangle {
                     spacing: Theme.spacingXS
 
                     StyledText {
-                        text: I18n.tr("Health")
+                        text: "Health"
                         font.pixelSize: Theme.fontSizeSmall
                         color: Theme.primary
                         font.weight: Font.Medium
@@ -160,7 +160,7 @@ Rectangle {
                 width: (parent.width - Theme.spacingM) / 2
                 height: 64
                 radius: Theme.cornerRadius
-                color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                color: Theme.surfaceContainerHighest
                 border.width: 0
 
                 Column {
@@ -168,7 +168,7 @@ Rectangle {
                     spacing: Theme.spacingXS
 
                     StyledText {
-                        text: I18n.tr("Capacity")
+                        text: "Capacity"
                         font.pixelSize: Theme.fontSizeSmall
                         color: Theme.primary
                         font.weight: Font.Medium
@@ -209,7 +209,7 @@ Rectangle {
             radius: Theme.cornerRadius
             color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12)
             border.color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.3)
-            border.width: 0
+            border.width: 1
             visible: (typeof PowerProfiles !== "undefined") && PowerProfiles.degradationReason !== PerformanceDegradationReason.None
 
             Column {
@@ -237,7 +237,7 @@ Rectangle {
                         width: parent.width - Theme.iconSize - Theme.spacingM
 
                         StyledText {
-                            text: I18n.tr("Power Profile Degradation")
+                            text: "Power Profile Degradation"
                             font.pixelSize: Theme.fontSizeLarge
                             color: Theme.error
                             font.weight: Font.Medium

Modules/ControlCenter/Details/BluetoothCodecSelector.qml

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

Modules/ControlCenter/Details/BluetoothDetail.qml

@@ -5,52 +5,18 @@ import Quickshell.Bluetooth
 import qs.Common
 import qs.Services
 import qs.Widgets
-import qs.Modals
 
 Rectangle {
-    id: root
-
-    implicitHeight: {
-        if (height > 0) {
-            return height
-        }
-        return BluetoothService.adapter && BluetoothService.adapter.enabled ? headerRow.height + bluetoothContent.height + Theme.spacingM : headerRow.height
-    }
+    implicitHeight: BluetoothService.adapter && BluetoothService.adapter.enabled ? headerRow.height + bluetoothContent.height + Theme.spacingM : headerRow.height
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 0
+    border.width: 1
     
     property var bluetoothCodecModalRef: null
-    property var devicesBeingPaired: new Set()
     
     signal showCodecSelector(var device)
     
-    function isDeviceBeingPaired(deviceAddress) {
-        return devicesBeingPaired.has(deviceAddress)
-    }
-
-    function handlePairDevice(device) {
-        if (!device) return
-
-        const deviceAddr = device.address
-        const pairingSet = devicesBeingPaired
-
-        pairingSet.add(deviceAddr)
-        devicesBeingPairedChanged()
-
-        BluetoothService.pairDevice(device, function(response) {
-            pairingSet.delete(deviceAddr)
-            devicesBeingPairedChanged()
-
-            if (response.error) {
-                ToastService.showError(I18n.tr("Pairing failed"), response.error)
-            } else if (!BluetoothService.enhancedPairingAvailable) {
-                ToastService.showSuccess(I18n.tr("Device paired"))
-            }
-        })
-    }
-
     function updateDeviceCodecDisplay(deviceAddress, codecName) {
         for (let i = 0; i < pairedRepeater.count; i++) {
             let item = pairedRepeater.itemAt(i)
@@ -61,8 +27,6 @@ Rectangle {
         }
     }
     
-
-
     Row {
         id: headerRow
         anchors.left: parent.left
@@ -75,7 +39,7 @@ Rectangle {
         
         StyledText {
             id: headerText
-            text: I18n.tr("Bluetooth Settings")
+            text: "Bluetooth Settings"
             font.pixelSize: Theme.fontSizeLarge
             color: Theme.surfaceText
             font.weight: Font.Medium
@@ -94,11 +58,11 @@ Rectangle {
             radius: 18
             color: {
                 if (!BluetoothService.adapter || !BluetoothService.adapter.enabled)
-                    return Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
-                return scanMouseArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : "transparent"
+                    return Theme.surfaceContainerHigh
+                return scanMouseArea.containsMouse ? Theme.surfaceContainerHigh : "transparent"
             }
             border.color: BluetoothService.adapter && BluetoothService.adapter.enabled ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-            border.width: 0
+            border.width: 1
             visible: BluetoothService.adapter && BluetoothService.adapter.enabled
             
             Row {
@@ -132,6 +96,13 @@ Rectangle {
                         BluetoothService.adapter.discovering = !BluetoothService.adapter.discovering
                 }
             }
+            
+            Behavior on color {
+                ColorAnimation {
+                    duration: Theme.shortDuration
+                    easing.type: Theme.standardEasing
+                }
+            }
         }
     }
     
@@ -159,18 +130,10 @@ Rectangle {
                     if (!BluetoothService.adapter || !BluetoothService.adapter.devices)
                         return []
                     
-                    const pins = SettingsData.bluetoothDevicePins || {}
-                    const pinnedAddr = pins["preferredDevice"]
-                    
                     let devices = [...BluetoothService.adapter.devices.values.filter(dev => dev && (dev.paired || dev.trusted))]
                     devices.sort((a, b) => {
-                        // Pinned device first
-                        if (a.address === pinnedAddr && b.address !== pinnedAddr) return -1
-                        if (b.address === pinnedAddr && a.address !== pinnedAddr) return 1
-                        // Then connected devices
                         if (a.connected && !b.connected) return -1
                         if (!a.connected && b.connected) return 1
-                        // Then by signal strength
                         return (b.signalStrength || 0) - (a.signalStrength || 0)
                     })
                     return devices
@@ -196,7 +159,7 @@ Rectangle {
                             return Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.12)
                         if (deviceMouseArea.containsMouse)
                             return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
-                        return Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                        return Theme.surfaceContainerHigh
                     }
                     border.color: {
                         if (modelData.state === BluetoothDeviceState.Connecting)
@@ -205,7 +168,7 @@ Rectangle {
                             return Theme.primary
                         return Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
                     }
-                    border.width: 0
+                    border.width: (modelData.connected || modelData.state === BluetoothDeviceState.Connecting) ? 2 : 1
                     
                     Row {
                         anchors.left: parent.left
@@ -290,65 +253,6 @@ Rectangle {
                         }
                     }
                     
-                    Rectangle {
-                        anchors.right: pairedOptionsButton.left
-                        anchors.rightMargin: Theme.spacingS
-                        anchors.verticalCenter: parent.verticalCenter
-                        width: pinBluetoothRow.width + Theme.spacingS * 2
-                        height: 28
-                        radius: height / 2
-                        color: {
-                            const isThisDevicePinned = (SettingsData.bluetoothDevicePins || {})["preferredDevice"] === modelData.address
-                            return isThisDevicePinned ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.surfaceText, 0.05)
-                        }
-
-                        Row {
-                            id: pinBluetoothRow
-                            anchors.centerIn: parent
-                            spacing: 4
-
-                            DankIcon {
-                                name: "push_pin"
-                                size: 16
-                                color: {
-                                    const isThisDevicePinned = (SettingsData.bluetoothDevicePins || {})["preferredDevice"] === modelData.address
-                                    return isThisDevicePinned ? Theme.primary : Theme.surfaceText
-                                }
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                            StyledText {
-                                text: {
-                                    const isThisDevicePinned = (SettingsData.bluetoothDevicePins || {})["preferredDevice"] === modelData.address
-                                    return isThisDevicePinned ? "Pinned" : "Pin"
-                                }
-                                font.pixelSize: Theme.fontSizeSmall
-                                color: {
-                                    const isThisDevicePinned = (SettingsData.bluetoothDevicePins || {})["preferredDevice"] === modelData.address
-                                    return isThisDevicePinned ? Theme.primary : Theme.surfaceText
-                                }
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-                        }
-
-                        MouseArea {
-                            anchors.fill: parent
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                const pins = JSON.parse(JSON.stringify(SettingsData.bluetoothDevicePins || {}))
-                                const isCurrentlyPinned = pins["preferredDevice"] === modelData.address
-                                
-                                if (isCurrentlyPinned) {
-                                    delete pins["preferredDevice"]
-                                } else {
-                                    pins["preferredDevice"] = modelData.address
-                                }
-                                
-                                SettingsData.set("bluetoothDevicePins", pins)
-                            }
-                        }
-                    }
-
                     DankActionButton {
                         id: pairedOptionsButton
                         anchors.right: parent.right
@@ -369,7 +273,7 @@ Rectangle {
                     MouseArea {
                         id: deviceMouseArea
                         anchors.fill: parent
-                        anchors.rightMargin: pairedOptionsButton.width + Theme.spacingM + pinBluetoothRow.width + Theme.spacingS * 4
+                        anchors.rightMargin: pairedOptionsButton.width + Theme.spacingS
                         hoverEnabled: true
                         cursorShape: Qt.PointingHandCursor
                         onClicked: {
@@ -380,6 +284,14 @@ Rectangle {
                             }
                         }
                     }
+                    
+                    Behavior on color {
+                        ColorAnimation { duration: Theme.shortDuration }
+                    }
+                    
+                    Behavior on border.color {
+                        ColorAnimation { duration: Theme.shortDuration }
+                    }
                 }
             }
             
@@ -430,15 +342,15 @@ Rectangle {
                     required property int index
                     
                     property bool canConnect: BluetoothService.canConnect(modelData)
-                    property bool isBusy: BluetoothService.isDeviceBusy(modelData) || isDeviceBeingPaired(modelData.address)
+                    property bool isBusy: BluetoothService.isDeviceBusy(modelData)
                     
                     width: parent.width
                     height: 50
                     radius: Theme.cornerRadius
-                    color: availableMouseArea.containsMouse && !isBusy ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                    color: availableMouseArea.containsMouse && !isBusy ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.surfaceContainerHigh
                     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: 0
-                    opacity: (canConnect && !isBusy) ? 1 : 0.6
+                    border.width: 1
+                    opacity: canConnect ? 1 : 0.6
                     
                     Row {
                         anchors.left: parent.left
@@ -470,7 +382,7 @@ Rectangle {
                                 
                                 StyledText {
                                     text: {
-                                        if (modelData.pairing || isBusy) return "Pairing..."
+                                        if (modelData.pairing) return "Pairing..."
                                         if (modelData.blocked) return "Blocked"
                                         return BluetoothService.getSignalStrength(modelData)
                                     }
@@ -493,12 +405,12 @@ Rectangle {
                         anchors.rightMargin: Theme.spacingM
                         anchors.verticalCenter: parent.verticalCenter
                         text: {
-                            if (isBusy) return "Pairing..."
+                            if (modelData.pairing) return "Pairing..."
                             if (!canConnect) return "Cannot pair"
                             return "Pair"
                         }
                         font.pixelSize: Theme.fontSizeSmall
-                        color: (canConnect && !isBusy) ? Theme.primary : Theme.surfaceVariantText
+                        color: canConnect ? Theme.primary : Theme.surfaceVariantText
                         font.weight: Font.Medium
                     }
                     
@@ -509,10 +421,15 @@ Rectangle {
                         cursorShape: canConnect && !isBusy ? Qt.PointingHandCursor : Qt.ArrowCursor
                         enabled: canConnect && !isBusy
                         onClicked: {
-                            root.handlePairDevice(modelData)
+                            if (modelData) {
+                                BluetoothService.connectDeviceWithTrust(modelData)
+                            }
                         }
                     }
                     
+                    Behavior on color {
+                        ColorAnimation { duration: Theme.shortDuration }
+                    }
                 }
             }
             
@@ -523,7 +440,7 @@ Rectangle {
                 
                 StyledText {
                     anchors.centerIn: parent
-                    text: I18n.tr("No Bluetooth adapter found")
+                    text: "No Bluetooth adapter found"
                     font.pixelSize: Theme.fontSizeMedium
                     color: Theme.surfaceVariantText
                 }
@@ -539,9 +456,9 @@ Rectangle {
         property var currentDevice: null
         
         background: Rectangle {
-            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            color: Theme.popupBackground()
             radius: Theme.cornerRadius
-            border.width: 0
+            border.width: 1
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
         }
         
@@ -574,7 +491,7 @@ Rectangle {
         }
         
         MenuItem {
-            text: I18n.tr("Audio Codec")
+            text: "Audio Codec"
             height: bluetoothContextMenu.currentDevice && BluetoothService.isAudioDevice(bluetoothContextMenu.currentDevice) && bluetoothContextMenu.currentDevice.connected ? 32 : 0
             visible: bluetoothContextMenu.currentDevice && BluetoothService.isAudioDevice(bluetoothContextMenu.currentDevice) && bluetoothContextMenu.currentDevice.connected
             
@@ -599,7 +516,7 @@ Rectangle {
         }
         
         MenuItem {
-            text: I18n.tr("Forget Device")
+            text: "Forget Device"
             height: 32
             
             contentItem: StyledText {
@@ -617,29 +534,10 @@ Rectangle {
             
             onTriggered: {
                 if (bluetoothContextMenu.currentDevice) {
-                    if (BluetoothService.enhancedPairingAvailable) {
-                        const devicePath = BluetoothService.getDevicePath(bluetoothContextMenu.currentDevice)
-                        DMSService.bluetoothRemove(devicePath, response => {
-                            if (response.error) {
-                                ToastService.showError(I18n.tr("Failed to remove device"), response.error)
-                            }
-                        })
-                    } else {
-                        bluetoothContextMenu.currentDevice.forget()
-                    }
+                    bluetoothContextMenu.currentDevice.forget()
                 }
             }
         }
     }
     
-    Connections {
-        target: DMSService
-
-        function onBluetoothPairingRequest(data) {
-            const modal = PopoutService.bluetoothPairingModal
-            if (modal && modal.token !== data.token) {
-                modal.show(data)
-            }
-        }
-    }
 }

Modules/ControlCenter/Details/DiskUsageDetail.qml

@@ -6,8 +6,6 @@ import qs.Services
 import qs.Widgets
 
 Rectangle {
-    id: root
-
     property string currentMountPath: "/"
     property string instanceId: ""
 
@@ -15,9 +13,9 @@ Rectangle {
 
     implicitHeight: diskContent.height + Theme.spacingM
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 0
+    border.width: 1
 
     Component.onCompleted: {
         DgopService.addRef(["diskmounts"])
@@ -78,9 +76,9 @@ Rectangle {
                     width: parent.width
                     height: 80
                     radius: Theme.cornerRadius
-                    color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                    color: Theme.surfaceContainerHigh
                     border.color: modelData.mount === currentMountPath ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: modelData.mount === currentMountPath ? 2 : 0
+                    border.width: modelData.mount === currentMountPath ? 2 : 1
 
                     Row {
                         anchors.left: parent.left
@@ -154,11 +152,16 @@ Rectangle {
                         hoverEnabled: true
                         cursorShape: Qt.PointingHandCursor
                         onClicked: {
-                            currentMountPath = modelData.mount
-                            mountPathChanged(modelData.mount)
+                            if (modelData.mount !== currentMountPath) {
+                                currentMountPath = modelData.mount
+                                mountPathChanged(modelData.mount)
+                            }
                         }
                     }
 
+                    Behavior on border.color {
+                        ColorAnimation { duration: Theme.shortDuration }
+                    }
                 }
             }
         }

Modules/ControlCenter/Details/NetworkDetail.qml

@@ -0,0 +1,476 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import qs.Common
+import qs.Services
+import qs.Widgets
+import qs.Modals
+
+Rectangle {
+    implicitHeight: {
+        if (NetworkService.wifiToggling) {
+            return headerRow.height + wifiToggleContent.height + Theme.spacingM
+        }
+        if (NetworkService.wifiEnabled) {
+            return headerRow.height + wifiContent.height + Theme.spacingM
+        }
+        return headerRow.height + wifiOffContent.height + Theme.spacingM
+    }
+    radius: Theme.cornerRadius
+    color: Theme.surfaceContainerHigh
+    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.width: 1
+    
+    Component.onCompleted: {
+        NetworkService.addRef()
+        if (NetworkService.wifiEnabled) {
+            NetworkService.scanWifi()
+        }
+    }
+    
+    Component.onDestruction: {
+        NetworkService.removeRef()
+    }
+    
+    property var wifiPasswordModalRef: {
+        wifiPasswordModalLoader.active = true
+        return wifiPasswordModalLoader.item
+    }
+    property var networkInfoModalRef: {
+        networkInfoModalLoader.active = true
+        return networkInfoModalLoader.item
+    }
+    
+    Row {
+        id: headerRow
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.leftMargin: Theme.spacingM
+        anchors.rightMargin: Theme.spacingM
+        anchors.topMargin: Theme.spacingS
+        height: 40
+        
+        StyledText {
+            id: headerText
+            text: "Network Settings"
+            font.pixelSize: Theme.fontSizeLarge
+            color: Theme.surfaceText
+            font.weight: Font.Medium
+            anchors.verticalCenter: parent.verticalCenter
+        }
+        
+        Item {
+            width: Math.max(0, parent.width - headerText.implicitWidth - preferenceControls.width - Theme.spacingM)
+            height: parent.height
+        }
+        
+        DankButtonGroup {
+            id: preferenceControls
+            anchors.verticalCenter: parent.verticalCenter
+            visible: NetworkService.ethernetConnected && NetworkService.wifiConnected
+
+            property int currentPreferenceIndex: NetworkService.userPreference === "ethernet" ? 0 : 1
+
+            model: ["Ethernet", "WiFi"]
+            currentIndex: currentPreferenceIndex
+            selectionMode: "single"
+            onSelectionChanged: (index, selected) => {
+                if (!selected) return
+                NetworkService.setNetworkPreference(index === 0 ? "ethernet" : "wifi")
+            }
+        }
+    }
+    
+    Item {
+        id: wifiToggleContent
+        anchors.top: headerRow.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: Theme.spacingM
+        anchors.topMargin: Theme.spacingM
+        visible: NetworkService.wifiToggling
+        height: visible ? 80 : 0
+        
+        Column {
+            anchors.centerIn: parent
+            spacing: Theme.spacingM
+            
+            DankIcon {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: "sync"
+                size: 32
+                color: Theme.primary
+                
+                RotationAnimation on rotation {
+                    running: NetworkService.wifiToggling
+                    loops: Animation.Infinite
+                    from: 0
+                    to: 360
+                    duration: 1000
+                }
+            }
+            
+            StyledText {
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: NetworkService.wifiEnabled ? "Disabling WiFi..." : "Enabling WiFi..."
+                font.pixelSize: Theme.fontSizeMedium
+                color: Theme.surfaceText
+                horizontalAlignment: Text.AlignHCenter
+            }
+        }
+    }
+    
+    Item {
+        id: wifiOffContent
+        anchors.top: headerRow.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: Theme.spacingM
+        anchors.topMargin: Theme.spacingM
+        visible: !NetworkService.wifiEnabled && !NetworkService.wifiToggling
+        height: visible ? 120 : 0
+        
+        Column {
+            anchors.centerIn: parent
+            spacing: Theme.spacingL
+            width: parent.width
+            
+            DankIcon {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: "wifi_off"
+                size: 48
+                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.5)
+            }
+            
+            StyledText {
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: "WiFi is off"
+                font.pixelSize: Theme.fontSizeLarge
+                color: Theme.surfaceText
+                font.weight: Font.Medium
+                horizontalAlignment: Text.AlignHCenter
+            }
+            
+            Rectangle {
+                anchors.horizontalCenter: parent.horizontalCenter
+                width: 120
+                height: 36
+                radius: 18
+                color: enableWifiButton.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
+                border.width: 1
+                border.color: Theme.primary
+                
+                StyledText {
+                    anchors.centerIn: parent
+                    text: "Enable WiFi"
+                    color: Theme.primary
+                    font.pixelSize: Theme.fontSizeMedium
+                    font.weight: Font.Medium
+                }
+                
+                MouseArea {
+                    id: enableWifiButton
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: NetworkService.toggleWifiRadio()
+                }
+                
+                Behavior on color {
+                    ColorAnimation {
+                        duration: Theme.shortDuration
+                        easing.type: Theme.standardEasing
+                    }
+                }
+            }
+        }
+    }
+
+    DankFlickable {
+        id: wifiContent
+        anchors.top: headerRow.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.margins: Theme.spacingM
+        anchors.topMargin: Theme.spacingM
+        visible: NetworkService.wifiInterface && NetworkService.wifiEnabled && !NetworkService.wifiToggling
+        contentHeight: wifiColumn.height
+        clip: true
+        
+        Column {
+            id: wifiColumn
+            width: parent.width
+            spacing: Theme.spacingS
+            
+            Item {
+                width: parent.width
+                height: 200
+                visible: NetworkService.wifiInterface && NetworkService.wifiNetworks?.length < 1 && !NetworkService.wifiToggling
+                
+                DankIcon {
+                    anchors.centerIn: parent
+                    name: "refresh"
+                    size: 48
+                    color: Qt.rgba(Theme.surfaceText.r || 0.8, Theme.surfaceText.g || 0.8, Theme.surfaceText.b || 0.8, 0.3)
+                    
+                    RotationAnimation on rotation {
+                        running: true
+                        loops: Animation.Infinite
+                        from: 0
+                        to: 360
+                        duration: 1000
+                    }
+                }
+            }
+            
+            Repeater {
+                model: {
+                    let networks = [...NetworkService.wifiNetworks]
+                    networks.sort((a, b) => {
+                        if (a.ssid === NetworkService.currentWifiSSID) return -1
+                        if (b.ssid === NetworkService.currentWifiSSID) return 1
+                        return b.signal - a.signal
+                    })
+                    return networks
+                }
+                delegate: Rectangle {
+                    required property var modelData
+                    required property int index
+                    
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: networkMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.surfaceContainerHigh
+                    border.color: modelData.ssid === NetworkService.currentWifiSSID ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                    border.width: modelData.ssid === NetworkService.currentWifiSSID ? 2 : 1
+                    
+                    Row {
+                        anchors.left: parent.left
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.leftMargin: Theme.spacingM
+                        spacing: Theme.spacingS
+                        
+                        DankIcon {
+                            name: {
+                                let strength = modelData.signal || 0
+                                if (strength >= 50) return "wifi"
+                                if (strength >= 25) return "wifi_2_bar"
+                                return "wifi_1_bar"
+                            }
+                            size: Theme.iconSize - 4
+                            color: modelData.ssid === NetworkService.currentWifiSSID ? Theme.primary : Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                        
+                        Column {
+                            anchors.verticalCenter: parent.verticalCenter
+                            width: 200
+                            
+                            StyledText {
+                                text: modelData.ssid || "Unknown Network"
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceText
+                                font.weight: modelData.ssid === NetworkService.currentWifiSSID ? Font.Medium : Font.Normal
+                                elide: Text.ElideRight
+                                width: parent.width
+                            }
+                            
+                            Row {
+                                spacing: Theme.spacingXS
+                                
+                                StyledText {
+                                    text: modelData.ssid === NetworkService.currentWifiSSID ? "Connected" : (modelData.secured ? "Secured" : "Open")
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: Theme.surfaceVariantText
+                                }
+                                
+                                StyledText {
+                                    text: modelData.saved ? "• Saved" : ""
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: Theme.primary
+                                    visible: text.length > 0
+                                }
+                                
+                                StyledText {
+                                    text: "• " + modelData.signal + "%"
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: Theme.surfaceVariantText
+                                }
+                            }
+                        }
+                    }
+                    
+                    DankActionButton {
+                        id: optionsButton
+                        anchors.right: parent.right
+                        anchors.rightMargin: Theme.spacingS
+                        anchors.verticalCenter: parent.verticalCenter
+                        iconName: "more_horiz"
+                        buttonSize: 28
+                        onClicked: {
+                            if (networkContextMenu.visible) {
+                                networkContextMenu.close()
+                            } else {
+                                networkContextMenu.currentSSID = modelData.ssid
+                                networkContextMenu.currentSecured = modelData.secured
+                                networkContextMenu.currentConnected = modelData.ssid === NetworkService.currentWifiSSID
+                                networkContextMenu.currentSaved = modelData.saved
+                                networkContextMenu.currentSignal = modelData.signal
+                                networkContextMenu.popup(optionsButton, -networkContextMenu.width + optionsButton.width, optionsButton.height + Theme.spacingXS)
+                            }
+                        }
+                    }
+                    
+                    MouseArea {
+                        id: networkMouseArea
+                        anchors.fill: parent
+                        anchors.rightMargin: optionsButton.width + Theme.spacingS
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: function(event) {
+                            if (modelData.ssid !== NetworkService.currentWifiSSID) {
+                                if (modelData.secured && !modelData.saved) {
+                                    if (wifiPasswordModalRef) {
+                                        wifiPasswordModalRef.show(modelData.ssid)
+                                    }
+                                } else {
+                                    NetworkService.connectToWifi(modelData.ssid)
+                                }
+                            }
+                            event.accepted = true
+                        }
+                    }
+                    
+                    Behavior on color {
+                        ColorAnimation { duration: Theme.shortDuration }
+                    }
+                    
+                    Behavior on border.color {
+                        ColorAnimation { duration: Theme.shortDuration }
+                    }
+                }
+            }
+        }
+    }
+    
+    Menu {
+        id: networkContextMenu
+        width: 150
+        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+        
+        property string currentSSID: ""
+        property bool currentSecured: false
+        property bool currentConnected: false
+        property bool currentSaved: false
+        property int currentSignal: 0
+        
+        background: Rectangle {
+            color: Theme.popupBackground()
+            radius: Theme.cornerRadius
+            border.width: 1
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+        }
+        
+        MenuItem {
+            text: networkContextMenu.currentConnected ? "Disconnect" : "Connect"
+            height: 32
+            
+            contentItem: StyledText {
+                text: parent.text
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceText
+                leftPadding: Theme.spacingS
+                verticalAlignment: Text.AlignVCenter
+            }
+            
+            background: Rectangle {
+                color: parent.hovered ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
+                radius: Theme.cornerRadius / 2
+            }
+            
+            onTriggered: {
+                if (networkContextMenu.currentConnected) {
+                    NetworkService.disconnectWifi()
+                } else {
+                    if (networkContextMenu.currentSecured && !networkContextMenu.currentSaved) {
+                        if (wifiPasswordModalRef) {
+                            wifiPasswordModalRef.show(networkContextMenu.currentSSID)
+                        }
+                    } else {
+                        NetworkService.connectToWifi(networkContextMenu.currentSSID)
+                    }
+                }
+            }
+        }
+        
+        MenuItem {
+            text: "Network Info"
+            height: 32
+            
+            contentItem: StyledText {
+                text: parent.text
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceText
+                leftPadding: Theme.spacingS
+                verticalAlignment: Text.AlignVCenter
+            }
+            
+            background: Rectangle {
+                color: parent.hovered ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
+                radius: Theme.cornerRadius / 2
+            }
+            
+            onTriggered: {
+                if (networkInfoModalRef) {
+                    let networkData = NetworkService.getNetworkInfo(networkContextMenu.currentSSID)
+                    networkInfoModalRef.showNetworkInfo(networkContextMenu.currentSSID, networkData)
+                }
+            }
+        }
+        
+        MenuItem {
+            text: "Forget Network"
+            height: networkContextMenu.currentSaved || networkContextMenu.currentConnected ? 32 : 0
+            visible: networkContextMenu.currentSaved || networkContextMenu.currentConnected
+            
+            contentItem: StyledText {
+                text: parent.text
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.error
+                leftPadding: Theme.spacingS
+                verticalAlignment: Text.AlignVCenter
+            }
+            
+            background: Rectangle {
+                color: parent.hovered ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.08) : "transparent"
+                radius: Theme.cornerRadius / 2
+            }
+            
+            onTriggered: {
+                NetworkService.forgetWifiNetwork(networkContextMenu.currentSSID)
+            }
+        }
+    }
+    
+    LazyLoader {
+        id: wifiPasswordModalLoader
+        active: false
+        
+        WifiPasswordModal {
+            id: wifiPasswordModal
+        }
+    }
+    
+    LazyLoader {
+        id: networkInfoModalLoader
+        active: false
+        
+        NetworkInfoModal {
+            id: networkInfoModal
+        }
+    }
+
+
+}

Modules/ControlCenter/Models/WidgetModel.qml

@@ -0,0 +1,149 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import "../utils/widgets.js" as WidgetUtils
+
+QtObject {
+    id: root
+
+    readonly property var baseWidgetDefinitions: [
+        {
+            "id": "nightMode",
+            "text": "Night Mode",
+            "description": "Blue light filter",
+            "icon": "nightlight",
+            "type": "toggle",
+            "enabled": DisplayService.automationAvailable,
+            "warning": !DisplayService.automationAvailable ? "Requires night mode support" : undefined
+        },
+        {
+            "id": "darkMode",
+            "text": "Dark Mode",
+            "description": "System theme toggle",
+            "icon": "contrast",
+            "type": "toggle",
+            "enabled": true
+        },
+        {
+            "id": "doNotDisturb",
+            "text": "Do Not Disturb",
+            "description": "Block notifications",
+            "icon": "do_not_disturb_on",
+            "type": "toggle",
+            "enabled": true
+        },
+        {
+            "id": "idleInhibitor",
+            "text": "Keep Awake",
+            "description": "Prevent screen timeout",
+            "icon": "motion_sensor_active",
+            "type": "toggle",
+            "enabled": true
+        },
+        {
+            "id": "wifi",
+            "text": "Network",
+            "description": "Wi-Fi and Ethernet connection",
+            "icon": "wifi",
+            "type": "connection",
+            "enabled": NetworkService.wifiAvailable,
+            "warning": !NetworkService.wifiAvailable ? "Wi-Fi not available" : undefined
+        },
+        {
+            "id": "bluetooth",
+            "text": "Bluetooth",
+            "description": "Device connections",
+            "icon": "bluetooth",
+            "type": "connection",
+            "enabled": BluetoothService.available,
+            "warning": !BluetoothService.available ? "Bluetooth not available" : undefined
+        },
+        {
+            "id": "audioOutput",
+            "text": "Audio Output",
+            "description": "Speaker settings",
+            "icon": "volume_up",
+            "type": "connection",
+            "enabled": true
+        },
+        {
+            "id": "audioInput",
+            "text": "Audio Input",
+            "description": "Microphone settings",
+            "icon": "mic",
+            "type": "connection",
+            "enabled": true
+        },
+        {
+            "id": "volumeSlider",
+            "text": "Volume Slider",
+            "description": "Audio volume control",
+            "icon": "volume_up",
+            "type": "slider",
+            "enabled": true
+        },
+        {
+            "id": "brightnessSlider",
+            "text": "Brightness Slider",
+            "description": "Display brightness control",
+            "icon": "brightness_6",
+            "type": "slider",
+            "enabled": DisplayService.brightnessAvailable,
+            "warning": !DisplayService.brightnessAvailable ? "Brightness control not available" : undefined
+        },
+        {
+            "id": "inputVolumeSlider",
+            "text": "Input Volume Slider",
+            "description": "Microphone volume control",
+            "icon": "mic",
+            "type": "slider",
+            "enabled": true
+        },
+        {
+            "id": "battery",
+            "text": "Battery",
+            "description": "Battery and power management",
+            "icon": "battery_std",
+            "type": "action",
+            "enabled": true
+        },
+        {
+            "id": "diskUsage",
+            "text": "Disk Usage",
+            "description": "Filesystem usage monitoring",
+            "icon": "storage",
+            "type": "action",
+            "enabled": DgopService.dgopAvailable,
+            "warning": !DgopService.dgopAvailable ? "Requires 'dgop' tool" : undefined,
+            "allowMultiple": true
+        }
+    ]
+
+    function getWidgetForId(widgetId) {
+        return WidgetUtils.getWidgetForId(baseWidgetDefinitions, widgetId)
+    }
+
+    function addWidget(widgetId) {
+        WidgetUtils.addWidget(widgetId)
+    }
+
+    function removeWidget(index) {
+        WidgetUtils.removeWidget(index)
+    }
+
+    function toggleWidgetSize(index) {
+        WidgetUtils.toggleWidgetSize(index)
+    }
+
+    function moveWidget(fromIndex, toIndex) {
+        WidgetUtils.moveWidget(fromIndex, toIndex)
+    }
+
+    function resetToDefault() {
+        WidgetUtils.resetToDefault()
+    }
+
+    function clearAll() {
+        WidgetUtils.clearAll()
+    }
+}

Modules/ControlCenter/PowerMenu.qml

@@ -0,0 +1,310 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+import Quickshell.Widgets
+import qs.Common
+import qs.Widgets
+
+PanelWindow {
+    id: root
+
+    property bool powerMenuVisible: false
+    signal powerActionRequested(string action, string title, string message)
+
+    visible: powerMenuVisible
+    implicitWidth: 400
+    implicitHeight: 320
+    WlrLayershell.layer: WlrLayershell.Overlay
+    WlrLayershell.exclusiveZone: -1
+    WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
+    color: "transparent"
+
+    anchors {
+        top: true
+        left: true
+        right: true
+        bottom: true
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            powerMenuVisible = false
+        }
+    }
+
+    Rectangle {
+        width: Math.min(320, parent.width - Theme.spacingL * 2)
+        height: 320 // Fixed height to prevent cropping
+        x: Math.max(Theme.spacingL, parent.width - width - Theme.spacingL)
+        y: Theme.barHeight + Theme.spacingXS
+        color: Theme.popupBackground()
+        radius: Theme.cornerRadius
+        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
+                              Theme.outline.b, 0.08)
+        border.width: 1
+        opacity: powerMenuVisible ? 1 : 0
+        scale: powerMenuVisible ? 1 : 0.85
+
+        MouseArea {
+
+            anchors.fill: parent
+            onClicked: {
+
+            }
+        }
+
+        Column {
+            anchors.fill: parent
+            anchors.margins: Theme.spacingL
+            spacing: Theme.spacingM
+
+            Row {
+                width: parent.width
+
+                StyledText {
+                    text: "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: {
+                        powerMenuVisible = false
+                    }
+                }
+            }
+
+            Column {
+                width: parent.width
+                spacing: Theme.spacingS
+
+                Rectangle {
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: logoutArea.containsMouse ? Qt.rgba(Theme.primary.r,
+                                                              Theme.primary.g,
+                                                              Theme.primary.b,
+                                                              0.08) : Qt.rgba(
+                                                          Theme.surfaceVariant.r,
+                                                          Theme.surfaceVariant.g,
+                                                          Theme.surfaceVariant.b,
+                                                          0.08)
+
+                    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: "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: {
+                            powerMenuVisible = false
+                            root.powerActionRequested(
+                                        "logout", "Log Out",
+                                        "Are you sure you want to log out?")
+                        }
+                    }
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: suspendArea.containsMouse ? Qt.rgba(Theme.primary.r,
+                                                               Theme.primary.g,
+                                                               Theme.primary.b,
+                                                               0.08) : Qt.rgba(
+                                                           Theme.surfaceVariant.r,
+                                                           Theme.surfaceVariant.g,
+                                                           Theme.surfaceVariant.b,
+                                                           0.08)
+
+                    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: "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: {
+                            powerMenuVisible = false
+                            root.powerActionRequested(
+                                        "suspend", "Suspend",
+                                        "Are you sure you want to suspend the system?")
+                        }
+                    }
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: rebootArea.containsMouse ? Qt.rgba(Theme.warning.r,
+                                                              Theme.warning.g,
+                                                              Theme.warning.b,
+                                                              0.08) : Qt.rgba(
+                                                          Theme.surfaceVariant.r,
+                                                          Theme.surfaceVariant.g,
+                                                          Theme.surfaceVariant.b,
+                                                          0.08)
+
+                    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: "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: {
+                            powerMenuVisible = false
+                            root.powerActionRequested(
+                                        "reboot", "Reboot",
+                                        "Are you sure you want to reboot the system?")
+                        }
+                    }
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: powerOffArea.containsMouse ? Qt.rgba(Theme.error.r,
+                                                                Theme.error.g,
+                                                                Theme.error.b,
+                                                                0.08) : Qt.rgba(
+                                                            Theme.surfaceVariant.r,
+                                                            Theme.surfaceVariant.g,
+                                                            Theme.surfaceVariant.b,
+                                                            0.08)
+
+                    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: "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: {
+                            powerMenuVisible = false
+                            root.powerActionRequested(
+                                        "poweroff", "Power Off",
+                                        "Are you sure you want to power off the system?")
+                        }
+                    }
+                }
+            }
+        }
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: Theme.mediumDuration
+                easing.type: Theme.emphasizedEasing
+            }
+        }
+
+        Behavior on scale {
+            NumberAnimation {
+                duration: Theme.mediumDuration
+                easing.type: Theme.emphasizedEasing
+            }
+        }
+    }
+}

Modules/ControlCenter/Widgets/AudioInputPill.qml

@@ -0,0 +1,63 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Services.Pipewire
+import qs.Common
+import qs.Services
+import qs.Widgets
+import qs.Modules.ControlCenter.Widgets
+
+CompoundPill {
+    id: root
+
+    property var defaultSource: AudioService.source
+
+    iconName: {
+        if (!defaultSource) return "mic_off"
+
+        let volume = defaultSource.audio.volume
+        let muted = defaultSource.audio.muted
+
+        if (muted || volume === 0.0) return "mic_off"
+        return "mic"
+    }
+
+    isActive: defaultSource && !defaultSource.audio.muted
+
+    primaryText: {
+        if (!defaultSource) {
+            return "No input device"
+        }
+        return defaultSource.description || "Audio Input"
+    }
+
+    secondaryText: {
+        if (!defaultSource) {
+            return "Select device"
+        }
+        if (defaultSource.audio.muted) {
+            return "Muted"
+        }
+        return Math.round(defaultSource.audio.volume * 100) + "%"
+    }
+
+    onToggled: {
+        if (defaultSource && defaultSource.audio) {
+            defaultSource.audio.muted = !defaultSource.audio.muted
+        }
+    }
+
+    onWheelEvent: function (wheelEvent) {
+        if (!defaultSource || !defaultSource.audio) return
+        let delta = wheelEvent.angleDelta.y
+        let currentVolume = defaultSource.audio.volume * 100
+        let newVolume
+        if (delta > 0)
+            newVolume = Math.min(100, currentVolume + 5)
+        else
+            newVolume = Math.max(0, currentVolume - 5)
+        defaultSource.audio.muted = false
+        defaultSource.audio.volume = newVolume / 100
+        wheelEvent.accepted = true
+    }
+}

Modules/ControlCenter/Widgets/AudioOutputPill.qml

@@ -0,0 +1,66 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Services.Pipewire
+import qs.Common
+import qs.Services
+import qs.Widgets
+import qs.Modules.ControlCenter.Widgets
+
+CompoundPill {
+    id: root
+
+    property var defaultSink: AudioService.sink
+
+    iconName: {
+        if (!defaultSink) return "volume_off"
+
+        let volume = defaultSink.audio.volume
+        let muted = defaultSink.audio.muted
+
+        if (muted || volume === 0.0) return "volume_off"
+        if (volume <= 0.33) return "volume_down"
+        if (volume <= 0.66) return "volume_up"
+        return "volume_up"
+    }
+
+    isActive: defaultSink && !defaultSink.audio.muted
+
+    primaryText: {
+        if (!defaultSink) {
+            return "No output device"
+        }
+        return defaultSink.description || "Audio Output"
+    }
+
+    secondaryText: {
+        if (!defaultSink) {
+            return "Select device"
+        }
+        if (defaultSink.audio.muted) {
+            return "Muted"
+        }
+        return Math.round(defaultSink.audio.volume * 100) + "%"
+    }
+
+    onToggled: {
+        if (defaultSink && defaultSink.audio) {
+            defaultSink.audio.muted = !defaultSink.audio.muted
+        }
+    }
+
+    onWheelEvent: function (wheelEvent) {
+        if (!defaultSink || !defaultSink.audio) return
+        let delta = wheelEvent.angleDelta.y
+        let currentVolume = defaultSink.audio.volume * 100
+        let newVolume
+        if (delta > 0)
+            newVolume = Math.min(100, currentVolume + 5)
+        else
+            newVolume = Math.max(0, currentVolume - 5)
+        defaultSink.audio.muted = false
+        defaultSink.audio.volume = newVolume / 100
+        AudioService.volumeChanged()
+        wheelEvent.accepted = true
+    }
+}

Modules/ControlCenter/Widgets/AudioSliderRow.qml

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

Modules/ControlCenter/Widgets/BluetoothPill.qml

@@ -0,0 +1,73 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import qs.Common
+import qs.Services
+import qs.Widgets
+import qs.Modules.ControlCenter.Widgets
+
+CompoundPill {
+    id: root
+
+    property var primaryDevice: {
+        if (!BluetoothService.adapter || !BluetoothService.adapter.devices) {
+            return null
+        }
+
+        let devices = [...BluetoothService.adapter.devices.values.filter(dev => dev && (dev.paired || dev.trusted))]
+        for (let device of devices) {
+            if (device && device.connected) {
+                return device
+            }
+        }
+        return null
+    }
+
+    iconName: {
+        if (!BluetoothService.available) {
+            return "bluetooth_disabled"
+        }
+        if (!BluetoothService.adapter || !BluetoothService.adapter.enabled) {
+            return "bluetooth_disabled"
+        }
+        if (primaryDevice) {
+            return BluetoothService.getDeviceIcon(primaryDevice)
+        }
+        return "bluetooth"
+    }
+
+    isActive: !!(BluetoothService.available && BluetoothService.adapter && BluetoothService.adapter.enabled)
+    showExpandArea: BluetoothService.available
+
+    primaryText: {
+        if (!BluetoothService.available) {
+            return "Bluetooth"
+        }
+        if (!BluetoothService.adapter) {
+            return "No adapter"
+        }
+        if (!BluetoothService.adapter.enabled) {
+            return "Disabled"
+        }
+        return "Enabled"
+    }
+
+    secondaryText: {
+        if (!BluetoothService.available) {
+            return "No adapters"
+        }
+        if (!BluetoothService.adapter || !BluetoothService.adapter.enabled) {
+            return "Off"
+        }
+        if (primaryDevice) {
+            return primaryDevice.name || primaryDevice.alias || primaryDevice.deviceName || "Connected Device"
+        }
+        return "No devices"
+    }
+
+    onToggled: {
+        if (BluetoothService.available && BluetoothService.adapter) {
+            BluetoothService.adapter.enabled = !BluetoothService.adapter.enabled
+        }
+    }
+}

Modules/ControlCenter/Widgets/BrightnessSliderRow.qml

@@ -0,0 +1,144 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Row {
+    id: root
+
+    height: 40
+    spacing: 0
+
+    Rectangle {
+        width: Theme.iconSize + Theme.spacingS * 2
+        height: Theme.iconSize + Theme.spacingS * 2
+        anchors.verticalCenter: parent.verticalCenter
+        radius: (Theme.iconSize + Theme.spacingS * 2) / 2
+        color: iconArea.containsMouse
+               ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
+               : "transparent"
+
+        Behavior on color {
+            ColorAnimation { duration: Theme.shortDuration }
+        }
+
+        MouseArea {
+            id: iconArea
+            anchors.fill: parent
+            hoverEnabled: true
+            cursorShape: Qt.PointingHandCursor
+
+            onClicked: function(event) {
+                if (DisplayService.devices.length > 1) {
+                    if (deviceMenu.visible) {
+                        deviceMenu.close()
+                    } else {
+                        deviceMenu.popup(iconArea, 0, iconArea.height + Theme.spacingXS)
+                    }
+                    event.accepted = true
+                }
+            }
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: {
+                    if (!DisplayService.brightnessAvailable) return "brightness_low"
+
+                    let brightness = DisplayService.brightnessLevel
+                    if (brightness <= 33) return "brightness_low"
+                    if (brightness <= 66) return "brightness_medium"
+                    return "brightness_high"
+                }
+                size: Theme.iconSize
+                color: DisplayService.brightnessAvailable && DisplayService.brightnessLevel > 0 ? Theme.primary : Theme.surfaceText
+            }
+        }
+    }
+
+    DankSlider {
+        anchors.verticalCenter: parent.verticalCenter
+        width: parent.width - (Theme.iconSize + Theme.spacingS * 2)
+        enabled: DisplayService.brightnessAvailable
+        minimum: 1
+        maximum: 100
+        value: {
+            let level = DisplayService.brightnessLevel
+            if (level > 100) {
+                let deviceInfo = DisplayService.getCurrentDeviceInfo()
+                if (deviceInfo && deviceInfo.max > 0) {
+                    return Math.round((level / deviceInfo.max) * 100)
+                }
+                return 50
+            }
+            return level
+        }
+        onSliderValueChanged: function(newValue) {
+            if (DisplayService.brightnessAvailable) {
+                DisplayService.setBrightness(newValue)
+            }
+        }
+        thumbOutlineColor: Theme.surfaceContainer
+        trackColor: Theme.surfaceContainerHigh
+    }
+
+    Menu {
+        id: deviceMenu
+        width: 200
+        closePolicy: Popup.CloseOnEscape
+        
+        background: Rectangle {
+            color: Theme.popupBackground()
+            radius: Theme.cornerRadius
+            border.width: 1
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+        }
+        
+        Instantiator {
+            model: DisplayService.devices
+            delegate: MenuItem {
+                required property var modelData
+                required property int index
+                
+                property string deviceName: modelData.name || ""
+                property string deviceClass: modelData.class || ""
+                
+                text: deviceName
+                font.pixelSize: Theme.fontSizeMedium
+                height: 40
+                
+                indicator: Rectangle {
+                    visible: DisplayService.currentDevice === parent.deviceName
+                    anchors.left: parent.left
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.leftMargin: Theme.spacingS
+                    width: 4
+                    height: parent.height - Theme.spacingS * 2
+                    radius: 2
+                    color: Theme.primary
+                }
+                
+                contentItem: StyledText {
+                    text: parent.text
+                    font: parent.font
+                    color: DisplayService.currentDevice === parent.deviceName ? Theme.primary : Theme.surfaceText
+                    leftPadding: Theme.spacingL
+                    verticalAlignment: Text.AlignVCenter
+                }
+                
+                background: Rectangle {
+                    color: parent.hovered ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
+                    radius: Theme.cornerRadius / 2
+                }
+                
+                onTriggered: {
+                    DisplayService.setCurrentDevice(deviceName, true)
+                    deviceMenu.close()
+                }
+            }
+            onObjectAdded: (index, object) => deviceMenu.insertItem(index, object)
+            onObjectRemoved: (index, object) => deviceMenu.removeItem(object)
+        }
+    }
+}

Modules/ControlCenter/Widgets/CompactSlider.qml

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

Modules/ControlCenter/Widgets/CompoundPill.qml

@@ -27,21 +27,18 @@ Rectangle {
         return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor)
     }
 
-    readonly property color _containerBg: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _containerBg: Theme.surfaceContainerHigh
 
-    color: {
-        const baseColor = bodyMouse.containsMouse ? Theme.widgetBaseHoverColor : _containerBg
-        return baseColor
-    }
+    color: _containerBg
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.10)
-    border.width: 0
+    border.width: 1
     antialiasing: true
 
     readonly property color _labelPrimary: Theme.surfaceText
     readonly property color _labelSecondary: Theme.surfaceVariantText
     readonly property color _tileBgActive: Theme.primary
     readonly property color _tileBgInactive: {
-        const transparency = Theme.popupTransparency
+        const transparency = Theme.popupTransparency || 0.92
         const surface = Theme.surfaceContainer || Qt.rgba(0.1, 0.1, 0.1, 1)
         return Qt.rgba(surface.r, surface.g, surface.b, transparency)
     }
@@ -49,7 +46,7 @@ Rectangle {
         Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
     readonly property color _tileRingInactive:
         Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.18)
-    readonly property color _tileIconActive: Theme.primaryText
+    readonly property color _tileIconActive: Theme.primaryContainer
     readonly property color _tileIconInactive: Theme.primary
 
     property int _padH: Theme.spacingS

Modules/ControlCenter/Widgets/InputAudioSliderRow.qml

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

Modules/ControlCenter/Widgets/NetworkPill.qml

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

Modules/ControlCenter/Widgets/SmallBatteryButton.qml

@@ -25,17 +25,13 @@ Rectangle {
     }
 
     readonly property color _tileBgActive: Theme.primary
-    readonly property color _tileBgInactive: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _tileBgInactive: Theme.surfaceContainerHigh
     readonly property color _tileRingActive:
         Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
-    readonly property color _tileIconActive: Theme.primaryText
+    readonly property color _tileIconActive: Theme.primaryContainer
     readonly property color _tileIconInactive: Theme.primary
 
-    color: {
-        if (isActive) return _tileBgActive
-        const baseColor = mouseArea.containsMouse ? Theme.widgetBaseHoverColor : _tileBgInactive
-        return baseColor
-    }
+    color: isActive ? _tileBgActive : _tileBgInactive
     border.color: isActive ? _tileRingActive : "transparent"
     border.width: isActive ? 1 : 0
     antialiasing: true
@@ -91,6 +87,13 @@ Rectangle {
         onClicked: root.clicked()
     }
 
+    Behavior on color {
+        ColorAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+
     Behavior on radius {
         NumberAnimation {
             duration: Theme.shortDuration

Modules/ControlCenter/Widgets/SmallToggleButton.qml

@@ -12,7 +12,6 @@ Rectangle {
     property real iconRotation: 0
 
     signal clicked()
-    signal iconRotationCompleted()
 
     width: parent ? ((parent.width - parent.spacing * 3) / 4) : 48
     height: 48
@@ -27,17 +26,13 @@ Rectangle {
     }
 
     readonly property color _tileBgActive: Theme.primary
-    readonly property color _tileBgInactive: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _tileBgInactive: Theme.surfaceContainerHigh
     readonly property color _tileRingActive:
         Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
-    readonly property color _tileIconActive: Theme.primaryText
+    readonly property color _tileIconActive: Theme.primaryContainer
     readonly property color _tileIconInactive: Theme.primary
 
-    color: {
-        if (isActive) return _tileBgActive
-        const baseColor = mouseArea.containsMouse ? Theme.widgetBaseHoverColor : _tileBgInactive
-        return baseColor
-    }
+    color: isActive ? _tileBgActive : _tileBgInactive
     border.color: isActive ? _tileRingActive : "transparent"
     border.width: isActive ? 1 : 0
     antialiasing: true
@@ -59,7 +54,6 @@ Rectangle {
         size: Theme.iconSize
         color: isActive ? _tileIconActive : _tileIconInactive
         rotation: iconRotation
-        onRotationCompleted: root.iconRotationCompleted()
     }
 
     MouseArea {
@@ -71,6 +65,13 @@ Rectangle {
         onClicked: root.clicked()
     }
 
+    Behavior on color {
+        ColorAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+
     Behavior on radius {
         NumberAnimation {
             duration: Theme.shortDuration

Modules/ControlCenter/Widgets/ToggleButton.qml

@@ -14,7 +14,6 @@ Rectangle {
     property real iconRotation: 0
     
     signal clicked()
-    signal iconRotationCompleted()
 
     width: parent ? parent.width : 200
     height: 60
@@ -24,17 +23,13 @@ Rectangle {
     }
 
     readonly property color _tileBgActive: Theme.primary
-    readonly property color _tileBgInactive: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _tileBgInactive: Theme.surfaceContainerHigh
     readonly property color _tileRingActive:
         Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
 
-    color: {
-        if (isActive) return _tileBgActive
-        const baseColor = mouseArea.containsMouse ? Theme.widgetBaseHoverColor : _tileBgInactive
-        return baseColor
-    }
+    color: isActive ? _tileBgActive : _tileBgInactive
     border.color: isActive ? _tileRingActive : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 0
+    border.width: isActive ? 1 : 1
     opacity: enabled ? 1.0 : 0.6
 
     function hoverTint(base) {
@@ -42,12 +37,12 @@ Rectangle {
         return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor)
     }
 
-    readonly property color _containerBg: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _containerBg: Theme.surfaceContainerHigh
 
     Rectangle {
         anchors.fill: parent
         radius: Theme.cornerRadius
-        color: mouseArea.containsMouse ? hoverTint(_containerBg) : Theme.withAlpha(_containerBg, 0)
+        color: mouseArea.containsMouse ? hoverTint(_containerBg) : "transparent"
         opacity: mouseArea.containsMouse ? 0.08 : 0.0
 
         Behavior on opacity {
@@ -64,10 +59,9 @@ Rectangle {
         DankIcon {
             name: root.iconName
             size: Theme.iconSize
-            color: isActive ? Theme.primaryText : Theme.primary
+            color: isActive ? Theme.primaryContainer : Theme.primary
             anchors.verticalCenter: parent.verticalCenter
             rotation: root.iconRotation
-            onRotationCompleted: root.iconRotationCompleted()
         }
 
         Item {
@@ -84,7 +78,7 @@ Rectangle {
                     width: parent.width
                     text: root.text
                     font.pixelSize: Theme.fontSizeMedium
-                    color: isActive ? Theme.primaryText : Theme.surfaceText
+                    color: isActive ? Theme.primaryContainer : Theme.surfaceText
                     font.weight: Font.Medium
                     elide: Text.ElideRight
                     wrapMode: Text.NoWrap
@@ -94,7 +88,7 @@ Rectangle {
                     width: parent.width
                     text: root.secondaryText
                     font.pixelSize: Theme.fontSizeSmall
-                    color: isActive ? Theme.primaryText : Theme.surfaceVariantText
+                    color: isActive ? Theme.primaryContainer : Theme.surfaceVariantText
                     visible: text.length > 0
                     elide: Text.ElideRight
                     wrapMode: Text.NoWrap
@@ -112,6 +106,13 @@ Rectangle {
         onClicked: root.clicked()
     }
 
+    Behavior on color {
+        ColorAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+
     Behavior on radius {
         NumberAnimation {
             duration: Theme.shortDuration

Modules/ControlCenter/utils/widgets.js

@@ -15,13 +15,8 @@ function addWidget(widgetId) {
         widget.mountPath = "/"
     }
 
-    if (widgetId === "brightnessSlider") {
-        widget.instanceId = generateUniqueId()
-        widget.deviceName = ""
-    }
-
     widgets.push(widget)
-    SettingsData.set("controlCenterWidgets", widgets)
+    SettingsData.setControlCenterWidgets(widgets)
 }
 
 function generateUniqueId() {
@@ -32,7 +27,7 @@ function removeWidget(index) {
     var widgets = SettingsData.controlCenterWidgets.slice()
     if (index >= 0 && index < widgets.length) {
         widgets.splice(index, 1)
-        SettingsData.set("controlCenterWidgets", widgets)
+        SettingsData.setControlCenterWidgets(widgets)
     }
 }
 
@@ -54,12 +49,12 @@ function toggleWidgetSize(index) {
             }
         }
 
-        SettingsData.set("controlCenterWidgets", widgets)
+        SettingsData.setControlCenterWidgets(widgets)
     }
 }
 
 function reorderWidgets(newOrder) {
-    SettingsData.set("controlCenterWidgets", newOrder)
+    SettingsData.setControlCenterWidgets(newOrder)
 }
 
 function moveWidget(fromIndex, toIndex) {
@@ -67,7 +62,7 @@ function moveWidget(fromIndex, toIndex) {
     if (fromIndex >= 0 && fromIndex < widgets.length && toIndex >= 0 && toIndex < widgets.length) {
         const movedWidget = widgets.splice(fromIndex, 1)[0]
         widgets.splice(toIndex, 0, movedWidget)
-        SettingsData.set("controlCenterWidgets", widgets)
+        SettingsData.setControlCenterWidgets(widgets)
     }
 }
 
@@ -82,9 +77,9 @@ function resetToDefault() {
         {"id": "nightMode", "enabled": true, "width": 50},
         {"id": "darkMode", "enabled": true, "width": 50}
     ]
-    SettingsData.set("controlCenterWidgets", defaultWidgets)
+    SettingsData.setControlCenterWidgets(defaultWidgets)
 }
 
 function clearAll() {
-    SettingsData.set("controlCenterWidgets", [])
+    SettingsData.setControlCenterWidgets([])
 }

Modules/DankDash/DankDashPopout.qml

@@ -0,0 +1,201 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.Mpris
+import Quickshell.Wayland
+import qs.Common
+import qs.Widgets
+import qs.Modules.DankDash
+
+DankPopout {
+    id: root
+
+    property bool dashVisible: false
+    property string triggerSection: "center"
+    property var triggerScreen: null
+    property int currentTabIndex: 0
+
+    function setTriggerPosition(x, y, width, section, screen) {
+        if (section === "center") {
+            const screenWidth = screen ? screen.width : Screen.width
+            triggerX = (screenWidth - popupWidth) / 2
+            triggerWidth = popupWidth
+        } else {
+            triggerX = x
+            triggerWidth = width
+        }
+        triggerY = y
+        triggerSection = section
+        triggerScreen = screen
+    }
+
+    popupWidth: 700
+    popupHeight: contentLoader.item ? contentLoader.item.implicitHeight : 500
+    triggerX: Screen.width - 620 - Theme.spacingL
+    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.spacingS
+    triggerWidth: 80
+    positioning: "center"
+    shouldBeVisible: dashVisible
+    visible: shouldBeVisible
+
+
+    onDashVisibleChanged: {
+        if (dashVisible) {
+            open()
+        } else {
+            close()
+        }
+    }
+
+    onBackgroundClicked: {
+        dashVisible = false
+    }
+
+    content: Component {
+        Rectangle {
+            id: mainContainer
+
+            implicitHeight: contentColumn.height + Theme.spacingM * 2
+            color: Theme.surfaceContainer
+            radius: Theme.cornerRadius
+            focus: true
+
+            Component.onCompleted: {
+                if (root.shouldBeVisible) {
+                    forceActiveFocus()
+                }
+            }
+
+            Keys.onPressed: function(event) {
+                if (event.key === Qt.Key_Escape) {
+                    root.dashVisible = false
+                    event.accepted = true
+                }
+            }
+
+            Connections {
+                function onShouldBeVisibleChanged() {
+                    if (root.shouldBeVisible) {
+                        Qt.callLater(function() {
+                            mainContainer.forceActiveFocus()
+                        })
+                    }
+                }
+                target: root
+            }
+
+            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: root.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 {
+                id: contentColumn
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
+                anchors.margins: Theme.spacingM
+                spacing: Theme.spacingS
+
+                DankTabBar {
+                    id: tabBar
+
+                    width: parent.width
+                    height: 48
+                    currentIndex: root.currentTabIndex
+                    spacing: Theme.spacingS
+                    equalWidthTabs: true
+
+                    model: {
+                        let tabs = [
+                            { icon: "dashboard", text: "Overview" },
+                            { icon: "music_note", text: "Media" }
+                        ]
+                        
+                        if (SettingsData.weatherEnabled) {
+                            tabs.push({ icon: "wb_sunny", text: "Weather" })
+                        }
+                        
+                        tabs.push({ icon: "settings", text: "Settings", isAction: true })
+                        return tabs
+                    }
+
+                    onTabClicked: function(index) {
+                        root.currentTabIndex = index
+                    }
+
+                    onActionTriggered: function(index) {
+                        let settingsIndex = SettingsData.weatherEnabled ? 3 : 2
+                        if (index === settingsIndex) {
+                            dashVisible = false
+                            settingsModal.show()
+                        }
+                    }
+
+                }
+
+                Item {
+                    width: parent.width
+                    height: Theme.spacingXS
+                }
+
+                StackLayout {
+                    id: pages
+                    width: parent.width
+                    implicitHeight: {
+                        if (currentIndex === 0) return overviewTab.implicitHeight
+                        if (currentIndex === 1) return mediaTab.implicitHeight
+                        if (SettingsData.weatherEnabled && currentIndex === 2) return weatherTab.implicitHeight
+                        return overviewTab.implicitHeight
+                    }
+                    currentIndex: root.currentTabIndex
+
+                    OverviewTab {
+                        id: overviewTab
+
+                        onSwitchToWeatherTab: {
+                            if (SettingsData.weatherEnabled) {
+                                tabBar.currentIndex = 2
+                                tabBar.tabClicked(2)
+                            }
+                        }
+
+                        onSwitchToMediaTab: {
+                            tabBar.currentIndex = 1
+                            tabBar.tabClicked(1)
+                        }
+                    }
+
+                    MediaPlayerTab {
+                        id: mediaTab
+                    }
+
+                    WeatherTab {
+                        id: weatherTab
+                        visible: SettingsData.weatherEnabled && root.currentTabIndex === 2
+                    }
+                }
+            }
+        }
+    }
+}

Modules/DankDash/Overview/CalendarOverviewCard.qml

@@ -13,8 +13,6 @@ Rectangle {
     property var selectedDateEvents: []
     property bool hasEvents: selectedDateEvents && selectedDateEvents.length > 0
 
-    signal closeDash()
-
     function weekStartJs() {
         return Qt.locale().firstDayOfWeek % 7
     }
@@ -86,7 +84,7 @@ Rectangle {
     }
 
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
     border.width: 1
 
@@ -132,14 +130,7 @@ Rectangle {
                 anchors.rightMargin: Theme.spacingS
                 height: 40
                 anchors.verticalCenter: parent.verticalCenter
-                text: {
-                    const dateStr = Qt.formatDate(selectedDate, "MMM d")
-                    if (selectedDateEvents && selectedDateEvents.length > 0) {
-                        const eventCount = selectedDateEvents.length === 1 ? I18n.tr("1 event") : selectedDateEvents.length + " " + I18n.tr("events")
-                        return dateStr + " • " + eventCount
-                    }
-                    return dateStr
-                }
+                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
@@ -354,7 +345,7 @@ Rectangle {
                     } else if (eventMouseArea.containsMouse) {
                         return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.06)
                     }
-                    return Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                    return Theme.surfaceContainerHigh
                 }
                 border.color: {
                     if (modelData.url && eventMouseArea.containsMouse) {
@@ -401,7 +392,7 @@ Rectangle {
                         width: parent.width
                         text: {
                             if (!modelData || modelData.allDay) {
-                                return I18n.tr("All day")
+                                return "All day"
                             } else if (modelData.start && modelData.end) {
                                 const timeFormat = SettingsData.use24HourClock ? "HH:mm" : "h:mm AP"
                                 const startTime = Qt.formatTime(modelData.start, timeFormat)
@@ -430,12 +421,24 @@ Rectangle {
                         if (modelData.url && modelData.url !== "") {
                             if (Qt.openUrlExternally(modelData.url) === false) {
                                 console.warn("Failed to open URL: " + modelData.url)
-                            } else {
-                                root.closeDash()
                             }
                         }
                     }
                 }
+
+                Behavior on color {
+                    ColorAnimation {
+                        duration: Theme.shortDuration
+                        easing.type: Theme.standardEasing
+                    }
+                }
+
+                Behavior on border.color {
+                    ColorAnimation {
+                        duration: Theme.shortDuration
+                        easing.type: Theme.standardEasing
+                    }
+                }
             }
         }
     }