Merge branch 'master' of github.com:bbedward/DankMaterialShell

This reverts commit 5c3062e699.

.github/ISSUE_TEMPLATE/bug_report.md

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

.github/ISSUE_TEMPLATE/feature_request.md

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

.github/ISSUE_TEMPLATE/support_request.md

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

.github/workflows/release.yml

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

.gitignore

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

CLAUDE.md

@@ -42,6 +42,8 @@ This is a Quickshell-based desktop shell implementation with Material Design 3 d
 
 **Architecture**: Modular design with clean separation between UI components (Modules), system services (Services), and shared utilities (Common).
 
+**Compositor Support**: Originally designed for niri, now also fully compatible with Hyprland. Both compositors are supported with their own configuration examples and keybind formats.
+
 ## Technology Stack
 
 - **QML (Qt Modeling Language)** - Primary language for all UI components
@@ -61,8 +63,11 @@ quickshell -p shell.qml
 # Or use the shorthand
 qs -p .
 
+# Run with verbose output for debugging
+qs -v -p shell.qml
+
 # Code formatting and linting
-qmlformat -i **/*.qml    # Format all QML files in place
+qmlfmt -t 4 -i 4 -b 250 -w /path/to/file.qml    # Format a QML file (requires qmlfmt, do not use qmlformat)
 qmllint **/*.qml         # Lint all QML files for syntax errors
 ```
 
@@ -74,27 +79,50 @@ The shell follows a clean modular architecture reduced from 4,830 lines to ~250
 
 ```
 shell.qml           # Main entry point (minimal orchestration)
-├── Common/         # Shared resources
+├── Common/         # Shared resources (12 files)
 │   ├── Theme.qml   # Material Design 3 theme singleton
-│   └── Utilities.js # Shared utility functions
-├── Services/       # System integration singletons
+│   ├── SettingsData.qml # User preferences and configuration
+│   ├── SessionData.qml # Session state management
+│   ├── Colors.qml  # Dynamic color scheme
+│   └── [8 more utility files]
+├── Services/       # System integration singletons (20 files)
 │   ├── AudioService.qml
 │   ├── NetworkService.qml
-│   ├── BrightnessService.qml
-│   └── [9 total services]
-├── Modules/        # UI components
-│   ├── TopBar.qml
-│   ├── AppLauncher.qml
-│   ├── ControlCenter.qml
-│   └── [18 total modules]
-└── Widgets/        # Reusable UI controls
-    ├── DankIcon.qml
-    ├── DankSlider.qml
-    ├── DankToggle.qml
-    ├── DankTabBar.qml
-    ├── DankGridView.qml
-    ├── DankListView.qml
-    └── [6 total widgets]
+│   ├── BluetoothService.qml
+│   ├── DisplayService.qml
+│   ├── NotificationService.qml
+│   ├── WeatherService.qml
+│   ├── PluginService.qml
+│   └── [14 more services]
+├── Modules/        # UI components (93 files)
+│   ├── TopBar/     # Panel components (13 files)
+│   ├── ControlCenter/ # System controls (13 files)
+│   ├── Notifications/ # Notification system (12 files)
+│   ├── AppDrawer/  # Application launcher (3 files)
+│   ├── Settings/   # Configuration interface (11 files)
+│   ├── ProcessList/ # System monitoring (8 files)
+│   ├── Dock/       # Application dock (6 files)
+│   ├── Lock/       # Screen lock system (4 files)
+│   └── [23 more module files]
+├── Modals/         # Full-screen overlays (10 files)
+│   ├── 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
 ```
 
 ### Component Organization
@@ -112,21 +140,44 @@ shell.qml           # Main entry point (minimal orchestration)
 3. **Services/** - System integration singletons
    - **Pattern**: All services use `Singleton` type with `id: root`
    - **Independence**: No cross-service dependencies
-   - **Examples**: AudioService, NetworkService, BrightnessService, WeatherService
+   - **Examples**: AudioService, NetworkService, BluetoothService, DisplayService, WeatherService, NotificationService, CalendarService, BatteryService, NiriService, MprisController
    - Services handle system commands, state management, and hardware integration
 
-4. **Modules/** - UI components
-   - **Full-screen components**: AppLauncher, ClipboardHistoryModal, ControlCenter
-   - **Panel components**: TopBar, SystemTray, NotificationPopup
-   - **Layout components**: WorkspaceSwitcher
+4. **Modules/** - UI components (93 files)
+   - **TopBar/**: Panel components with workspace switching, system indicators, media controls
+   - **ControlCenter/**: System controls for WiFi, Bluetooth, audio, display settings
+   - **Notifications/**: Complete notification system with center, popups, and keyboard navigation
+   - **AppDrawer/**: Application launcher with grid/list views and category filtering
+   - **Settings/**: Comprehensive configuration interface with multiple tabs
+   - **ProcessList/**: System monitoring with process management and performance metrics
+   - **Dock/**: Application dock with running apps and window management
+   - **Lock/**: Screen lock system with authentication
 
-5. **Widgets/** - Reusable UI controls
+5. **Modals/** - Full-screen overlays (10 files)
+   - Modal system for settings, clipboard history, file browser, network info, power menu
+   - Unified modal management with consistent styling and keyboard navigation
+
+6. **Widgets/** - Reusable UI controls (19 files)
    - **DankIcon**: Centralized icon component with Material Design font integration
    - **DankSlider**: Enhanced slider with animations and smart detection
    - **DankToggle**: Consistent toggle switch component
    - **DankTabBar**: Unified tab bar implementation
    - **DankGridView**: Reusable grid view with adaptive columns
    - **DankListView**: Reusable list view with configurable styling
+   - **DankTextField**: Styled text input with validation
+   - **DankDropdown**: Dropdown selection component
+   - **DankPopout**: Base popout component for overlays
+   - **StateLayer**: Material Design 3 interaction states
+   - **StyledRect/StyledText**: Themed base components
+   - **CachingImage**: Optimized image loading with caching
+   - **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
 
@@ -183,7 +234,9 @@ shell.qml           # Main entry point (minimal orchestration)
    - `id` should be the first property
    - Properties before signal handlers before child components
    - Prefer property bindings over imperative code
-   - **IMPORTANT**: Be very conservative with comments - add comments only when absolutely necessary for understanding complex logic
+   - **CRITICAL**: NEVER add comments unless absolutely essential for complex logic understanding. Code should be self-documenting through clear naming and structure. Comments are a code smell indicating unclear implementation.
+   - Use guard statements, example `if (abc) { something() return;} somethingElse();`
+   - Don't use crazy ternary stuff, but use it for simple if else only. `propertyVal: a ? b : c`
 
 2. **Naming Conventions**:
    - **Services**: Use `Singleton` type with `id: root`
@@ -191,9 +244,7 @@ shell.qml           # Main entry point (minimal orchestration)
    - **Properties**: camelCase for properties, PascalCase for types
 
 3. **Null-Safe Operations**:
-   - **Do NOT use** `?.` operator (not supported by qmlformat)
-   - **Use** `object && object.property` instead of `object?.property`
-   - **Example**: `activePlayer && activePlayer.trackTitle` instead of `activePlayer?.trackTitle`
+   - **Use** `object?.property`
 
 4. **Component Structure**:
    ```qml
@@ -243,25 +294,32 @@ shell.qml           # Main entry point (minimal orchestration)
 
 ### Component Development Patterns
 
-1. **Smart Feature Detection**:
+1. **Code Reuse - Search Before Writing**:
+   - **ALWAYS** search the codebase for existing functions before writing new ones
+   - Use `Grep` or `Glob` tools to find existing implementations (e.g., search for "getWifiIcon", "getDeviceIcon")
+   - Many utility functions already exist in Services/ and Common/ - reuse them instead of duplicating
+   - Examples of existing utility functions: `Theme.getBatteryIcon()`, `BluetoothService.getDeviceIcon()`, `WeatherService.getWeatherIcon()`
+   - If similar functionality exists, extend or refactor rather than duplicate
+
+2. **Smart Feature Detection**:
    ```qml
    // In services - detect capabilities
    property bool brightnessAvailable: false
    
    // In modules - adapt UI accordingly
    DankSlider {
-       visible: BrightnessService.brightnessAvailable
-       enabled: BrightnessService.brightnessAvailable
-       value: BrightnessService.brightnessLevel
+       visible: DisplayService.brightnessAvailable
+       enabled: DisplayService.brightnessAvailable
+       value: DisplayService.brightnessLevel
    }
    ```
 
-2. **Reusable Components**:
+3. **Reusable Components**:
    - Create reusable widgets for common patterns (like DankSlider)
    - Use configurable properties for different use cases
    - Include proper signal handling with unique names (avoid `valueChanged`)
 
-3. **Service Integration**:
+4. **Service Integration**:
    - Services expose properties and functions
    - Modules and Widgets bind to service properties for reactive updates
    - Use service functions for actions: `ServiceName.performAction(value)`
@@ -295,9 +353,10 @@ shell.qml           # Main entry point (minimal orchestration)
 
 The shell uses Quickshell's `Variants` pattern for multi-monitor support:
 - Each connected monitor gets its own top bar instance
-- Workspace switchers are per-display and Niri-aware
+- Workspace switchers are compositor-aware (Niri and Hyprland)
 - Monitors are automatically detected by screen name (DP-1, DP-2, etc.)
-- Workspaces are dynamically synchronized with Niri's per-output workspaces
+- **Niri**: Workspaces are dynamically synchronized with Niri's per-output workspaces
+- **Hyprland**: Integrates with Hyprland's workspace system and multi-monitor handling
 
 ## Common Development Tasks
 
@@ -305,12 +364,13 @@ The shell uses Quickshell's `Variants` pattern for multi-monitor support:
 
 When modifying the shell:
 1. **Test changes**: `qs -p .` (automatic reload on file changes)
-2. **Code quality**: Run `qmlformat -i **/*.qml` and `qmllint **/*.qml` to ensure proper formatting and syntax
+2. **Code quality**: Run `./qmlformat-all.sh` or `qmlformat -i **/*.qml` and `qmllint **/*.qml` to ensure proper formatting and syntax
 3. **Performance**: Ensure animations remain smooth (60 FPS target)
 4. **Theming**: Use `Theme.propertyName` for Material Design 3 consistency
 5. **Wayland compatibility**: Test on Wayland session
 6. **Multi-monitor**: Verify behavior with multiple displays
-7. **Feature detection**: Test on systems with/without required tools
+7. **Compositor compatibility**: Test on both Niri and Hyprland when possible
+8. **Feature detection**: Test on systems with/without required tools
 
 ### Adding New Modules
 
@@ -364,10 +424,10 @@ When modifying the shell:
 
    Singleton {
        id: root
-       
+
        property bool featureAvailable: false
        property type currentValue: defaultValue
-       
+
        function performAction(param) {
            // Implementation
        }
@@ -378,7 +438,7 @@ When modifying the shell:
    ```qml
    // In module files
    property alias serviceValue: NewService.currentValue
-   
+
    SomeControl {
        visible: NewService.featureAvailable
        enabled: NewService.featureAvailable
@@ -386,6 +446,200 @@ When modifying the shell:
    }
    ```
 
+### Creating Plugins
+
+Plugins are external, dynamically-loaded components that extend DankMaterialShell functionality. Plugins are stored in `~/.config/DankMaterialShell/plugins/` and have their settings isolated from core DMS settings.
+
+**Plugin Types:**
+- **Widget plugins** (`"type": "widget"` or omit type field): Display UI components in DankBar
+- **Daemon plugins** (`"type": "daemon"`): Run invisibly in the background without UI
+
+#### Widget Plugins
+
+1. **Create plugin directory**:
+   ```bash
+   mkdir -p ~/.config/DankMaterialShell/plugins/YourPlugin
+   ```
+
+2. **Create manifest** (`plugin.json`):
+   ```json
+   {
+       "id": "yourPlugin",
+       "name": "Your Plugin",
+       "description": "Widget description",
+       "version": "1.0.0",
+       "author": "Your Name",
+       "icon": "extension",
+       "type": "widget",
+       "component": "./YourWidget.qml",
+       "settings": "./YourSettings.qml",
+       "permissions": ["settings_read", "settings_write"]
+   }
+   ```
+
+3. **Create widget component** (`YourWidget.qml`):
+   ```qml
+   import QtQuick
+   import qs.Services
+
+   Rectangle {
+       id: root
+
+       property bool compactMode: false
+       property string section: "center"
+       property real widgetHeight: 30
+       property var pluginService: null
+
+       width: content.implicitWidth + 16
+       height: widgetHeight
+       radius: 8
+       color: "#20FFFFFF"
+
+       Component.onCompleted: {
+           if (pluginService) {
+               var data = pluginService.loadPluginData("yourPlugin", "key", defaultValue)
+           }
+       }
+   }
+   ```
+
+4. **Create settings component** (`YourSettings.qml`):
+   ```qml
+   import QtQuick
+   import QtQuick.Controls
+
+   FocusScope {
+       id: root
+
+       property var pluginService: null
+
+       implicitHeight: settingsColumn.implicitHeight
+       height: implicitHeight
+
+       Column {
+           id: settingsColumn
+           anchors.fill: parent
+           anchors.margins: 16
+           spacing: 12
+
+           Text {
+               text: "Your Plugin Settings"
+               font.pixelSize: 18
+               font.weight: Font.Bold
+           }
+
+           // Your settings UI here
+       }
+
+       function saveSettings(key, value) {
+           if (pluginService) {
+               pluginService.savePluginData("yourPlugin", key, value)
+           }
+       }
+
+       function loadSettings(key, defaultValue) {
+           if (pluginService) {
+               return pluginService.loadPluginData("yourPlugin", key, defaultValue)
+           }
+           return defaultValue
+       }
+   }
+   ```
+
+5. **Enable plugin**:
+   - Open Settings → Plugins
+   - Click "Scan for Plugins"
+   - Toggle plugin to enable
+   - Add plugin ID to DankBar widget list
+
+#### Daemon Plugins
+
+Daemon plugins run invisibly in the background without any UI components. They're useful for monitoring system events, background tasks, or data synchronization.
+
+1. **Create plugin directory**:
+   ```bash
+   mkdir -p ~/.config/DankMaterialShell/plugins/YourDaemon
+   ```
+
+2. **Create manifest** (`plugin.json`):
+   ```json
+   {
+       "id": "yourDaemon",
+       "name": "Your Daemon",
+       "description": "Background daemon description",
+       "version": "1.0.0",
+       "author": "Your Name",
+       "icon": "settings_applications",
+       "type": "daemon",
+       "component": "./YourDaemon.qml",
+       "permissions": ["settings_read", "settings_write"]
+   }
+   ```
+
+3. **Create daemon component** (`YourDaemon.qml`):
+   ```qml
+   import QtQuick
+   import qs.Common
+   import qs.Services
+
+   Item {
+       id: root
+
+       property var pluginService: null
+
+       Connections {
+           target: SessionData
+           function onWallpaperPathChanged() {
+               console.log("Wallpaper changed:", SessionData.wallpaperPath)
+               if (pluginService) {
+                   pluginService.savePluginData("yourDaemon", "lastEvent", Date.now())
+               }
+           }
+       }
+
+       Component.onCompleted: {
+           console.log("Daemon started")
+       }
+   }
+   ```
+
+4. **Enable daemon**:
+   - Open Settings → Plugins
+   - Click "Scan for Plugins"
+   - Toggle daemon to enable
+   - Daemon runs automatically in background
+
+**Example**: See `PLUGINS/WallpaperWatcherDaemon/` for a complete daemon plugin that monitors wallpaper changes
+
+**Plugin Directory Structure:**
+```
+~/.config/DankMaterialShell/
+├── settings.json                    # Core DMS settings + plugin settings
+│   └── pluginSettings: {
+│       └── yourPlugin: {
+│           ├── enabled: true,
+│           └── customData: {...}
+│       }
+│   }
+└── plugins/                         # Plugin files directory
+    └── YourPlugin/                  # Plugin directory (matches manifest ID)
+        ├── plugin.json              # Plugin manifest
+        ├── YourWidget.qml           # Widget component
+        └── YourSettings.qml         # Settings UI (optional)
+```
+
+**Key Plugin APIs:**
+- `pluginService.loadPluginData(pluginId, key, default)` - Load persistent data
+- `pluginService.savePluginData(pluginId, key, value)` - Save persistent data
+- `PluginService.enablePlugin(pluginId)` - Load plugin
+- `PluginService.disablePlugin(pluginId)` - Unload plugin
+
+**Important Notes:**
+- Plugin settings are automatically injected by the PluginService via `item.pluginService = PluginService`
+- Settings are stored in the main settings.json but namespaced under `pluginSettings.{pluginId}`
+- Plugin directories must match the plugin ID in the manifest
+- Use the injected `pluginService` property in both widget and settings components
+
 ### Debugging Common Issues
 
 1. **Import errors**: Check import paths
@@ -396,6 +650,8 @@ When modifying the shell:
 
 ### Best Practices Summary
 
+- **Code Reuse**: ALWAYS search existing codebase before writing new functions - avoid duplication at all costs
+- **No Comments**: Code should be self-documenting - comments indicate poor naming/structure
 - **Modularity**: Keep components focused and independent
 - **Reusability**: Create reusable components for common patterns using Widgets/
 - **Responsiveness**: Use property bindings for reactive UI
@@ -405,6 +661,10 @@ When modifying the shell:
 - **Icon Management**: Use `DankIcon` for all icons instead of manual Text components
 - **Widget System**: Leverage existing widgets (DankSlider, DankToggle, etc.) for consistency
 - **NO WRAPPER HELL**: Avoid creating unnecessary wrapper functions - bind directly to underlying APIs for better reactivity and performance
+- **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
 
@@ -414,3 +674,29 @@ When modifying the shell:
 4. **Tab Bars**: Use `DankTabBar` for tabbed interfaces
 5. **Lists**: Use `DankListView` for scrollable lists
 6. **Grids**: Use `DankGridView` for grid layouts
+7. **Text Fields**: Use `DankTextField` for text input with validation
+8. **Dropdowns**: Use `DankDropdown` for selection menus
+9. **Popouts**: Use `DankPopout` as base for overlay components
+10. **Images**: Use `CachingImage` for optimized image loading
+
+### Essential Utility Functions
+
+Before writing new utility functions, check these existing ones:
+
+**Theme.qml utilities:**
+- `getBatteryIcon(level, isCharging, batteryAvailable)` - Battery status icons
+- `getPowerProfileIcon(profile)` - Power profile indicators
+
+**Service utilities:**
+- `BluetoothService.getDeviceIcon(device)` - Bluetooth device type icons
+- `BluetoothService.getSignalIcon(device)` - Signal strength indicators
+- `WeatherService.getWeatherIcon(code)` - Weather condition icons
+- `AppSearchService.getCategoryIcon(category)` - Application category icons
+- `DgopService.getProcessIcon(command)` - Process type icons
+- `SettingsData.getWorkspaceNameIcon(workspaceName)` - Workspace icons
+
+**Always search for existing functions using:**
+```bash
+grep -r "function.*get.*Icon" Services/ Common/
+grep -r "function.*" path/to/relevant/directory/
+```

CONTRIBUTING.md

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

Common/Anims.qml

@@ -1,26 +1,25 @@
 pragma Singleton
-
-pragma ComponentBehavior
+pragma ComponentBehavior: Bound
 
 import QtQuick
 import Quickshell
 
 Singleton {
-  id: root
+    id: root
 
-  readonly property int durShort: 200
-  readonly property int durMed: 450
-  readonly property int durLong: 600
+    readonly property int durShort: 200
+    readonly property int durMed: 450
+    readonly property int durLong: 600
 
-  readonly property int slidePx: 80
+    readonly property int slidePx: 80
 
-  readonly property var emphasized: [0.05, 0.00, 0.133333, 0.06, 0.166667, 0.40, 0.208333, 0.82, 0.25, 1.00, 1.00, 1.00]
+    readonly property var emphasized: [0.05, 0.00, 0.133333, 0.06, 0.166667, 0.40, 0.208333, 0.82, 0.25, 1.00, 1.00, 1.00]
 
-  readonly property var emphasizedDecel: [0.05, 0.70, 0.10, 1.00, 1.00, 1.00]
+    readonly property var emphasizedDecel: [0.05, 0.70, 0.10, 1.00, 1.00, 1.00]
 
-  readonly property var emphasizedAccel: [0.30, 0.00, 0.80, 0.15, 1.00, 1.00]
+    readonly property var emphasizedAccel: [0.30, 0.00, 0.80, 0.15, 1.00, 1.00]
 
-  readonly property var standard: [0.20, 0.00, 0.00, 1.00, 1.00, 1.00]
-  readonly property var standardDecel: [0.00, 0.00, 0.00, 1.00, 1.00, 1.00]
-  readonly property var standardAccel: [0.30, 0.00, 1.00, 1.00, 1.00, 1.00]
+    readonly property var standard: [0.20, 0.00, 0.00, 1.00, 1.00, 1.00]
+    readonly property var standardDecel: [0.00, 0.00, 0.00, 1.00, 1.00, 1.00]
+    readonly property var standardAccel: [0.30, 0.00, 1.00, 1.00, 1.00, 1.00]
 }

Common/AppUsageHistoryData.qml

@@ -1,6 +1,5 @@
 pragma Singleton
-
-pragma ComponentBehavior
+pragma ComponentBehavior: Bound
 
 import QtCore
 import QtQuick
@@ -9,123 +8,120 @@ import Quickshell.Io
 
 Singleton {
 
-  id: root
+    id: root
 
-  property var appUsageRanking: {
-
-  }
-
-  Component.onCompleted: {
-    loadSettings()
-  }
-
-  function loadSettings() {
-    parseSettings(settingsFile.text())
-  }
-
-  function parseSettings(content) {
-    try {
-      if (content && content.trim()) {
-        var settings = JSON.parse(content)
-        appUsageRanking = settings.appUsageRanking || {}
-      }
-    } catch (e) {
+    property var appUsageRanking: {
 
     }
-  }
 
-  function saveSettings() {
-    settingsFile.setText(JSON.stringify({
-                                          "appUsageRanking": appUsageRanking
-                                        }, null, 2))
-  }
-
-  function addAppUsage(app) {
-    if (!app)
-      return
-
-    var appId = app.id || (app.execString || app.exec || "")
-    if (!appId)
-      return
-
-    var currentRanking = Object.assign({}, appUsageRanking)
-
-    if (currentRanking[appId]) {
-      currentRanking[appId].usageCount = (currentRanking[appId].usageCount
-                                          || 1) + 1
-      currentRanking[appId].lastUsed = Date.now()
-      currentRanking[appId].icon = app.icon || currentRanking[appId].icon
-          || "application-x-executable"
-      currentRanking[appId].name = app.name || currentRanking[appId].name || ""
-    } else {
-      currentRanking[appId] = {
-        "name": app.name || "",
-        "exec": app.execString || app.exec || "",
-        "icon": app.icon || "application-x-executable",
-        "comment": app.comment || "",
-        "usageCount": 1,
-        "lastUsed": Date.now()
-      }
+    Component.onCompleted: {
+        loadSettings()
     }
 
-    appUsageRanking = currentRanking
-    saveSettings()
-  }
-
-  function getAppUsageRanking() {
-    return appUsageRanking
-  }
-
-  function getRankedApps() {
-    var apps = []
-    for (var appId in appUsageRanking) {
-      var appData = appUsageRanking[appId]
-      apps.push({
-                  "id": appId,
-                  "name": appData.name,
-                  "exec": appData.exec,
-                  "icon": appData.icon,
-                  "comment": appData.comment,
-                  "usageCount": appData.usageCount,
-                  "lastUsed": appData.lastUsed
-                })
+    function loadSettings() {
+        parseSettings(settingsFile.text())
     }
 
-    return apps.sort(function (a, b) {
-      if (a.usageCount !== b.usageCount)
-        return b.usageCount - a.usageCount
-      return a.name.localeCompare(b.name)
-    })
-  }
+    function parseSettings(content) {
+        try {
+            if (content && content.trim()) {
+                var settings = JSON.parse(content)
+                appUsageRanking = settings.appUsageRanking || {}
+            }
+        } catch (e) {
 
-  function cleanupAppUsageRanking(availableAppIds) {
-    var currentRanking = Object.assign({}, appUsageRanking)
-    var hasChanges = false
-
-    for (var appId in currentRanking) {
-      if (availableAppIds.indexOf(appId) === -1) {
-        delete currentRanking[appId]
-        hasChanges = true
-      }
+        }
     }
 
-    if (hasChanges) {
-      appUsageRanking = currentRanking
-      saveSettings()
+    function saveSettings() {
+        settingsFile.setText(JSON.stringify({
+                                                "appUsageRanking": appUsageRanking
+                                            }, null, 2))
     }
-  }
 
-  FileView {
-    id: settingsFile
+    function addAppUsage(app) {
+        if (!app)
+            return
 
-    path: StandardPaths.writableLocation(
-            StandardPaths.GenericStateLocation) + "/DankMaterialShell/appusage.json"
-    blockLoading: true
-    blockWrites: true
-    watchChanges: true
-    onLoaded: {
-      parseSettings(settingsFile.text())
+        var appId = app.id || (app.execString || app.exec || "")
+        if (!appId)
+            return
+
+        var currentRanking = Object.assign({}, appUsageRanking)
+
+        if (currentRanking[appId]) {
+            currentRanking[appId].usageCount = (currentRanking[appId].usageCount
+                                                || 1) + 1
+            currentRanking[appId].lastUsed = Date.now()
+            currentRanking[appId].icon = app.icon || currentRanking[appId].icon
+                    || "application-x-executable"
+            currentRanking[appId].name = app.name
+                    || currentRanking[appId].name || ""
+        } else {
+            currentRanking[appId] = {
+                "name": app.name || "",
+                "exec": app.execString || app.exec || "",
+                "icon": app.icon || "application-x-executable",
+                "comment": app.comment || "",
+                "usageCount": 1,
+                "lastUsed": Date.now()
+            }
+        }
+
+        appUsageRanking = currentRanking
+        saveSettings()
+    }
+
+    function getRankedApps() {
+        var apps = []
+        for (var appId in appUsageRanking) {
+            var appData = appUsageRanking[appId]
+            apps.push({
+                          "id": appId,
+                          "name": appData.name,
+                          "exec": appData.exec,
+                          "icon": appData.icon,
+                          "comment": appData.comment,
+                          "usageCount": appData.usageCount,
+                          "lastUsed": appData.lastUsed
+                      })
+        }
+
+        return apps.sort(function (a, b) {
+            if (a.usageCount !== b.usageCount)
+                return b.usageCount - a.usageCount
+            return a.name.localeCompare(b.name)
+        })
+    }
+
+    function cleanupAppUsageRanking(availableAppIds) {
+        var currentRanking = Object.assign({}, appUsageRanking)
+        var hasChanges = false
+
+        for (var appId in currentRanking) {
+            if (availableAppIds.indexOf(appId) === -1) {
+                delete currentRanking[appId]
+                hasChanges = true
+            }
+        }
+
+        if (hasChanges) {
+            appUsageRanking = currentRanking
+            saveSettings()
+        }
+    }
+
+    FileView {
+        id: settingsFile
+
+        path: StandardPaths.writableLocation(
+                  StandardPaths.GenericStateLocation) + "/DankMaterialShell/appusage.json"
+        blockLoading: true
+        blockWrites: true
+        watchChanges: true
+        onLoaded: {
+            parseSettings(settingsFile.text())
+        }
+        onLoadFailed: error => {}
     }
-    onLoadFailed: error => {}
-  }
 }

Common/Appearance.qml

@@ -1,67 +1,66 @@
 pragma Singleton
-
-pragma ComponentBehavior
+pragma ComponentBehavior: Bound
 
 import QtQuick
 import Quickshell
 
 Singleton {
-  id: root
+    id: root
 
-  readonly property Rounding rounding: Rounding {}
-  readonly property Spacing spacing: Spacing {}
-  readonly property FontSize fontSize: FontSize {}
-  readonly property Anim anim: Anim {}
+    readonly property Rounding rounding: Rounding {}
+    readonly property Spacing spacing: Spacing {}
+    readonly property FontSize fontSize: FontSize {}
+    readonly property Anim anim: Anim {}
 
-  component Rounding: QtObject {
-    readonly property int small: 8
-    readonly property int normal: 12
-    readonly property int large: 16
-    readonly property int extraLarge: 24
-    readonly property int full: 1000
-  }
+    component Rounding: QtObject {
+        readonly property int small: 8
+        readonly property int normal: 12
+        readonly property int large: 16
+        readonly property int extraLarge: 24
+        readonly property int full: 1000
+    }
 
-  component Spacing: QtObject {
-    readonly property int small: 4
-    readonly property int normal: 8
-    readonly property int large: 12
-    readonly property int extraLarge: 16
-    readonly property int huge: 24
-  }
+    component Spacing: QtObject {
+        readonly property int small: 4
+        readonly property int normal: 8
+        readonly property int large: 12
+        readonly property int extraLarge: 16
+        readonly property int huge: 24
+    }
 
-  component FontSize: QtObject {
-    readonly property int small: 12
-    readonly property int normal: 14
-    readonly property int large: 16
-    readonly property int extraLarge: 20
-    readonly property int huge: 24
-  }
+    component FontSize: QtObject {
+        readonly property int small: 12
+        readonly property int normal: 14
+        readonly property int large: 16
+        readonly property int extraLarge: 20
+        readonly property int huge: 24
+    }
 
-  component AnimCurves: QtObject {
-    readonly property list<real> standard: [0.2, 0, 0, 1, 1, 1]
-    readonly property list<real> standardAccel: [0.3, 0, 1, 1, 1, 1]
-    readonly property list<real> standardDecel: [0, 0, 0, 1, 1, 1]
-    readonly property list<real> emphasized: [0.05, 0, 2 / 15, 0.06, 1
-      / 6, 0.4, 5 / 24, 0.82, 0.25, 1, 1, 1]
-    readonly property list<real> emphasizedAccel: [0.3, 0, 0.8, 0.15, 1, 1]
-    readonly property list<real> emphasizedDecel: [0.05, 0.7, 0.1, 1, 1, 1]
-    readonly property list<real> expressiveFastSpatial: [0.42, 1.67, 0.21, 0.9, 1, 1]
-    readonly property list<real> expressiveDefaultSpatial: [0.38, 1.21, 0.22, 1, 1, 1]
-    readonly property list<real> expressiveEffects: [0.34, 0.8, 0.34, 1, 1, 1]
-  }
+    component AnimCurves: QtObject {
+        readonly property list<real> standard: [0.2, 0, 0, 1, 1, 1]
+        readonly property list<real> standardAccel: [0.3, 0, 1, 1, 1, 1]
+        readonly property list<real> standardDecel: [0, 0, 0, 1, 1, 1]
+        readonly property list<real> emphasized: [0.05, 0, 2 / 15, 0.06, 1
+            / 6, 0.4, 5 / 24, 0.82, 0.25, 1, 1, 1]
+        readonly property list<real> emphasizedAccel: [0.3, 0, 0.8, 0.15, 1, 1]
+        readonly property list<real> emphasizedDecel: [0.05, 0.7, 0.1, 1, 1, 1]
+        readonly property list<real> expressiveFastSpatial: [0.42, 1.67, 0.21, 0.9, 1, 1]
+        readonly property list<real> expressiveDefaultSpatial: [0.38, 1.21, 0.22, 1, 1, 1]
+        readonly property list<real> expressiveEffects: [0.34, 0.8, 0.34, 1, 1, 1]
+    }
 
-  component AnimDurations: QtObject {
-    readonly property int quick: 150
-    readonly property int normal: 300
-    readonly property int slow: 500
-    readonly property int extraSlow: 1000
-    readonly property int expressiveFastSpatial: 350
-    readonly property int expressiveDefaultSpatial: 500
-    readonly property int expressiveEffects: 200
-  }
+    component AnimDurations: QtObject {
+        readonly property int quick: 150
+        readonly property int normal: 300
+        readonly property int slow: 500
+        readonly property int extraSlow: 1000
+        readonly property int expressiveFastSpatial: 350
+        readonly property int expressiveDefaultSpatial: 500
+        readonly property int expressiveEffects: 200
+    }
 
-  component Anim: QtObject {
-    readonly property AnimCurves curves: AnimCurves {}
-    readonly property AnimDurations durations: AnimDurations {}
-  }
+    component Anim: QtObject {
+        readonly property AnimCurves curves: AnimCurves {}
+        readonly property AnimDurations durations: AnimDurations {}
+    }
 }

Common/CacheUtils.qml

@@ -2,43 +2,44 @@ import Quickshell
 pragma Singleton
 
 Singleton {
-  id: root
+    id: root
 
-  // Clear all image cache
-  function clearImageCache() {
-    Quickshell.execDetached(["rm", "-rf", Paths.stringify(Paths.imagecache)])
-    Paths.mkdir(Paths.imagecache)
-  }
+    // Clear all image cache
+    function clearImageCache() {
+        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"])
-  }
+    // Clear cache older than specified minutes
+    function clearOldCache(ageInMinutes) {
+        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"])
-  }
+    // Clear cache for specific size
+    function clearCacheForSize(size) {
+        Quickshell.execDetached(
+                    ["find", Paths.stringify(
+                         Paths.imagecache), "-name", `*@${size}x${size}.png`, "-delete"])
+    }
 
-  // Get cache size in MB
-  function getCacheSize(callback) {
-    var process = Qt.createQmlObject(`
-                                     import Quickshell.Io
-                                     Process {
-                                     command: ["du", "-sm", "${Paths.stringify(
-                                       Paths.imagecache)}"]
-                                     running: true
-                                     stdout: StdioCollector {
-                                     onStreamFinished: {
-                                     var sizeMB = parseInt(text.split("\\t")[0]) || 0
-                                     callback(sizeMB)
-                                     }
-                                     }
-                                     }
-                                     `, root)
-  }
+    // Get cache size in MB
+    function getCacheSize(callback) {
+        var process = Qt.createQmlObject(`
+                                         import Quickshell.Io
+                                         Process {
+                                         command: ["du", "-sm", "${Paths.stringify(
+                                             Paths.imagecache)}"]
+                                         running: true
+                                         stdout: StdioCollector {
+                                         onStreamFinished: {
+                                         var sizeMB = parseInt(text.split("\\t")[0]) || 0
+                                         callback(sizeMB)
+                                         }
+                                         }
+                                         }
+                                         `, root)
+    }
 }

Common/Colors.qml

@@ -1,384 +0,0 @@
-pragma Singleton
-
-pragma ComponentBehavior
-
-import Qt.labs.platform
-import QtQuick
-import Quickshell
-import Quickshell.Io
-import qs.Services
-
-Singleton {
-  id: root
-
-  readonly property string _homeUrl: StandardPaths.writableLocation(
-                                       StandardPaths.HomeLocation)
-  readonly property string homeDir: _homeUrl.startsWith(
-                                      "file://") ? _homeUrl.substring(
-                                                     7) : _homeUrl
-  readonly property string _configUrl: StandardPaths.writableLocation(
-                                         StandardPaths.ConfigLocation)
-  readonly property string configDir: _configUrl.startsWith(
-                                        "file://") ? _configUrl.substring(
-                                                       7) : _configUrl
-  readonly property string shellDir: Qt.resolvedUrl(".").toString().replace(
-                                       "file://", "").replace("/Common/", "")
-  readonly property string wallpaperPath: SessionData.wallpaperPath
-  property bool matugenAvailable: false
-  property bool gtkThemingEnabled: false
-  property bool qtThemingEnabled: false
-  property bool systemThemeGenerationInProgress: false
-  property var matugenColors: ({})
-  property bool extractionRequested: false
-  property int colorUpdateTrigger: 0
-  property string lastWallpaperTimestamp: ""
-  property color primary: getMatugenColor("primary", "#42a5f5")
-  property color secondary: getMatugenColor("secondary", "#8ab4f8")
-  property color tertiary: getMatugenColor("tertiary", "#bb86fc")
-  property color tertiaryContainer: getMatugenColor("tertiary_container",
-                                                    "#3700b3")
-  property color error: getMatugenColor("error", "#cf6679")
-  property color inversePrimary: getMatugenColor("inverse_primary", "#6200ea")
-  property color bg: getMatugenColor("background", "#1a1c1e")
-  property color surface: getMatugenColor("surface", "#1a1c1e")
-  property color surfaceContainer: getMatugenColor("surface_container",
-                                                   "#1e2023")
-  property color surfaceContainerHigh: getMatugenColor(
-                                         "surface_container_high", "#292b2f")
-  property color surfaceVariant: getMatugenColor("surface_variant", "#44464f")
-  property color surfaceText: getMatugenColor("on_background", "#e3e8ef")
-  property color primaryText: getMatugenColor("on_primary", "#ffffff")
-  property color surfaceVariantText: getMatugenColor("on_surface_variant",
-                                                     "#c4c7c5")
-  property color primaryContainer: getMatugenColor("primary_container",
-                                                   "#1976d2")
-  property color surfaceTint: getMatugenColor("surface_tint", "#8ab4f8")
-  property color outline: getMatugenColor("outline", "#8e918f")
-  property color accentHi: primary
-  property color accentLo: secondary
-
-  signal colorsUpdated
-
-  function onLightModeChanged() {
-    if (matugenColors && Object.keys(matugenColors).length > 0) {
-      colorUpdateTrigger++
-      colorsUpdated()
-
-      if (typeof Theme !== "undefined" && Theme.isDynamicTheme) {
-        generateSystemThemes()
-      }
-    }
-  }
-
-  function extractColors() {
-    extractionRequested = true
-    if (matugenAvailable)
-      fileChecker.running = true
-    else
-      matugenCheck.running = true
-  }
-
-  function getMatugenColor(path, fallback) {
-    colorUpdateTrigger
-    const colorMode = (typeof SessionData !== "undefined"
-                       && SessionData.isLightMode) ? "light" : "dark"
-    let cur = matugenColors && matugenColors.colors
-        && matugenColors.colors[colorMode]
-    for (const part of path.split(".")) {
-      if (!cur || typeof cur !== "object" || !(part in cur))
-        return fallback
-
-      cur = cur[part]
-    }
-    return cur || fallback
-  }
-
-  function isColorDark(c) {
-    return (0.299 * c.r + 0.587 * c.g + 0.114 * c.b) < 0.5
-  }
-
-  Component.onCompleted: {
-    matugenCheck.running = true
-    checkGtkThemingAvailability()
-    checkQtThemingAvailability()
-    if (typeof SessionData !== "undefined")
-    SessionData.isLightModeChanged.connect(root.onLightModeChanged)
-  }
-
-  Process {
-    id: matugenCheck
-
-    command: ["which", "matugen"]
-    onExited: code => {
-      matugenAvailable = (code === 0)
-      if (!matugenAvailable) {
-        ToastService.wallpaperErrorStatus = "matugen_missing"
-        ToastService.showWarning("matugen not found - dynamic theming disabled")
-        return
-      }
-      if (extractionRequested) {
-        fileChecker.running = true
-      }
-    }
-  }
-
-  Process {
-    id: fileChecker
-
-    command: ["test", "-r", wallpaperPath]
-    onExited: code => {
-      if (code === 0) {
-        matugenProcess.running = true
-      } else {
-        ToastService.wallpaperErrorStatus = "error"
-        ToastService.showError("Wallpaper processing failed")
-      }
-    }
-  }
-
-  Process {
-    id: matugenProcess
-
-    command: ["matugen", "image", wallpaperPath, "--json", "hex"]
-
-    stdout: StdioCollector {
-      id: matugenCollector
-
-      onStreamFinished: {
-        if (!matugenCollector.text) {
-          ToastService.wallpaperErrorStatus = "error"
-          ToastService.showError("Wallpaper Processing Failed: Empty JSON extracted from matugen output.")
-          return
-        }
-        try {
-          root.matugenColors = JSON.parse(matugenCollector.text)
-          root.colorsUpdated()
-          generateAppConfigs()
-          ToastService.clearWallpaperError()
-        } catch (e) {
-          ToastService.wallpaperErrorStatus = "error"
-          ToastService.showError("Wallpaper processing failed (JSON parse error after extraction)")
-        }
-      }
-    }
-
-    onExited: code => {
-      if (code !== 0) {
-        ToastService.wallpaperErrorStatus = "error"
-        ToastService.showError("Matugen command failed with exit code " + code)
-      }
-    }
-  }
-
-  function generateAppConfigs() {
-    if (!matugenColors || !matugenColors.colors) {
-      return
-    }
-
-    generateNiriConfig()
-    generateGhosttyConfig()
-
-    if (gtkThemingEnabled && typeof SettingsData !== "undefined"
-        && SettingsData.gtkThemingEnabled) {
-      generateSystemThemes()
-    } else if (qtThemingEnabled && typeof SettingsData !== "undefined"
-               && SettingsData.qtThemingEnabled) {
-      generateSystemThemes()
-    }
-  }
-
-  function generateNiriConfig() {
-    var dark = matugenColors.colors.dark
-    if (!dark)
-      return
-
-    var bg = dark.background || "#1a1c1e"
-    var primary = dark.primary || "#42a5f5"
-    var secondary = dark.secondary || "#8ab4f8"
-    var inverse = dark.inverse_primary || "#6200ea"
-
-    var content = `layout {
-    border {
-    active-color   "${primary}"
-    inactive-color "${secondary}"
-    }
-    focus-ring {
-    active-color   "${inverse}"
-    }
-    background-color "${bg}"
-    }`
-
-    Quickshell.execDetached(
-          ["bash", "-c", `echo '${content}' > niri-colors.generated.kdl`])
-  }
-
-  function generateGhosttyConfig() {
-    var dark = matugenColors.colors.dark
-    var light = matugenColors.colors.light
-    if (!dark || !light)
-      return
-
-    var bg = dark.background || "#1a1c1e"
-    var fg = dark.on_background || "#e3e8ef"
-    var primary = dark.primary || "#42a5f5"
-    var secondary = dark.secondary || "#8ab4f8"
-    var tertiary = dark.tertiary || "#bb86fc"
-    var tertiary_ctr = dark.tertiary_container || "#3700b3"
-    var error = dark.error || "#cf6679"
-    var inverse = dark.inverse_primary || "#6200ea"
-
-    var bg_b = light.background || "#fef7ff"
-    var fg_b = light.on_background || "#1d1b20"
-    var primary_b = light.primary || "#1976d2"
-    var secondary_b = light.secondary || "#1565c0"
-    var tertiary_b = light.tertiary || "#7b1fa2"
-    var tertiary_ctr_b = light.tertiary_container || "#e1bee7"
-    var error_b = light.error || "#b00020"
-    var inverse_b = light.inverse_primary || "#bb86fc"
-
-    var content = `background = ${bg}
-    foreground = ${fg}
-    cursor-color = ${inverse}
-    selection-background = ${secondary}
-    selection-foreground = #ffffff
-    palette = 0=${bg}
-    palette = 1=${error}
-    palette = 2=${tertiary}
-    palette = 3=${secondary}
-    palette = 4=${primary}
-    palette = 5=${tertiary_ctr}
-    palette = 6=${inverse}
-    palette = 7=${fg}
-    palette = 8=${bg_b}
-    palette = 9=${error_b}
-    palette = 10=${tertiary_b}
-    palette = 11=${secondary_b}
-    palette = 12=${primary_b}
-    palette = 13=${tertiary_ctr_b}
-    palette = 14=${inverse_b}
-    palette = 15=${fg_b}`
-
-    var ghosttyConfigDir = configDir + "/ghostty"
-    var ghosttyConfigPath = ghosttyConfigDir + "/config-dankcolors"
-
-    Quickshell.execDetached(
-          ["bash", "-c", `mkdir -p '${ghosttyConfigDir}' && echo '${content}' > '${ghosttyConfigPath}'`])
-  }
-
-  function checkGtkThemingAvailability() {
-    gtkAvailabilityChecker.running = true
-  }
-
-  function checkQtThemingAvailability() {
-    qtAvailabilityChecker.running = true
-  }
-
-  function generateSystemThemes() {
-    if (systemThemeGenerationInProgress) {
-      return
-    }
-
-    if (!matugenAvailable) {
-      return
-    }
-
-    if (!wallpaperPath || wallpaperPath === "") {
-      return
-    }
-
-    const isLight = (typeof SessionData !== "undefined"
-                     && SessionData.isLightMode) ? "true" : "false"
-    const iconTheme = (typeof SettingsData !== "undefined"
-                       && SettingsData.iconTheme) ? SettingsData.iconTheme : "System Default"
-    const gtkTheming = (typeof SettingsData !== "undefined"
-                        && SettingsData.gtkThemingEnabled) ? "true" : "false"
-    const qtTheming = (typeof SettingsData !== "undefined"
-                       && SettingsData.qtThemingEnabled) ? "true" : "false"
-
-    systemThemeGenerationInProgress = true
-    systemThemeGenerator.command = [shellDir + "/generate-themes.sh", wallpaperPath, shellDir, configDir, "generate", isLight, iconTheme, gtkTheming, qtTheming]
-    systemThemeGenerator.running = true
-  }
-
-  function restoreSystemThemes() {
-    const shellDir = root.shellDir
-    if (!shellDir) {
-      return
-    }
-
-    const isLight = (typeof SessionData !== "undefined"
-                     && SessionData.isLightMode) ? "true" : "false"
-    const iconTheme = (typeof SettingsData !== "undefined"
-                       && SettingsData.iconTheme) ? SettingsData.iconTheme : "System Default"
-    const gtkTheming = (typeof SettingsData !== "undefined"
-                        && SettingsData.gtkThemingEnabled) ? "true" : "false"
-    const qtTheming = (typeof SettingsData !== "undefined"
-                       && SettingsData.qtThemingEnabled) ? "true" : "false"
-
-    systemThemeRestoreProcess.command = [shellDir + "/generate-themes.sh", "", shellDir, configDir, "restore", isLight, iconTheme, gtkTheming, qtTheming]
-    systemThemeRestoreProcess.running = true
-  }
-
-  Process {
-    id: gtkAvailabilityChecker
-    command: ["bash", "-c", "command -v gsettings >/dev/null && [ -d "
-      + configDir + "/gtk-3.0 -o -d " + configDir + "/gtk-4.0 ]"]
-    running: false
-    onExited: exitCode => {
-      gtkThemingEnabled = (exitCode === 0)
-    }
-  }
-
-  Process {
-    id: qtAvailabilityChecker
-    command: ["bash", "-c", "command -v qt5ct >/dev/null || command -v qt6ct >/dev/null"]
-    running: false
-    onExited: exitCode => {
-      qtThemingEnabled = (exitCode === 0)
-    }
-  }
-
-  Process {
-    id: systemThemeGenerator
-    running: false
-
-    stdout: StdioCollector {
-      id: systemThemeStdout
-    }
-
-    stderr: StdioCollector {
-      id: systemThemeStderr
-    }
-
-    onExited: exitCode => {
-      systemThemeGenerationInProgress = false
-
-      if (exitCode !== 0) {
-        ToastService.showError(
-          "Failed to generate system themes: " + systemThemeStderr.text)
-      }
-    }
-  }
-
-  Process {
-    id: systemThemeRestoreProcess
-    running: false
-
-    stdout: StdioCollector {
-      id: restoreThemeStdout
-    }
-
-    stderr: StdioCollector {
-      id: restoreThemeStderr
-    }
-
-    onExited: exitCode => {
-      if (exitCode === 0) {
-        ToastService.showInfo("System themes restored to default")
-      } else {
-        ToastService.showWarning(
-          "Failed to restore system themes: " + restoreThemeStderr.text)
-      }
-    }
-  }
-}

Common/DankSocket.qml

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

Common/Facts.qml

@@ -7,14 +7,7 @@ import Quickshell
 Singleton {
     id: root
 
-    property bool unlocking: false
-    property string randomFact: ""
-    property string pamState: ""
-    property bool powerDialogVisible: false
-    property bool rebootDialogVisible: false
-    property bool logoutDialogVisible: false
-    
-    property var facts: [
+    readonly property var facts: [
         "A photon takes 100,000 to 200,000 years bouncing through the Sun's dense core, then races to Earth in just 8 minutes 20 seconds.",
         "A teaspoon of neutron star matter would weigh a billion metric tons here on Earth.",
         "Right now, 100 trillion solar neutrinos are passing through your body every second.",
@@ -54,52 +47,7 @@ Singleton {
         "The Boötes Supervoid is a cosmic desert 1.8 billion light-years across with 60% fewer galaxies than it should have."
     ]
 
-    function pickRandomFact() {
-        randomFact = facts[Math.floor(Math.random() * facts.length)];
+    function getRandomFact() {
+        return facts[Math.floor(Math.random() * facts.length)]
     }
-
-    function resetState() {
-        unlocking = false;
-        pamState = "";
-        powerDialogVisible = false;
-        rebootDialogVisible = false;
-        logoutDialogVisible = false;
-        pickRandomFact();
-    }
-
-    function setPamState(state) {
-        pamState = state;
-    }
-
-    function setUnlocking(value) {
-        unlocking = value;
-    }
-
-    function showPowerDialog() {
-        powerDialogVisible = true;
-    }
-
-    function hidePowerDialog() {
-        powerDialogVisible = false;
-    }
-
-    function showRebootDialog() {
-        rebootDialogVisible = true;
-    }
-
-    function hideRebootDialog() {
-        rebootDialogVisible = false;
-    }
-
-    function showLogoutDialog() {
-        logoutDialogVisible = true;
-    }
-
-    function hideLogoutDialog() {
-        logoutDialogVisible = false;
-    }
-
-    Component.onCompleted: {
-        pickRandomFact();
-    }
-}
+}

Common/I18n.qml

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

Common/ModalManager.qml

@@ -0,0 +1,16 @@
+pragma Singleton
+
+import Quickshell
+import QtQuick
+
+Singleton {
+    id: modalManager
+
+    signal closeAllModalsExcept(var excludedModal)
+
+    function openModal(modal) {
+        if (!modal.allowStacking) {
+            closeAllModalsExcept(modal)
+        }
+    }
+}

Common/Paths.qml

@@ -4,45 +4,62 @@ import Quickshell
 import QtCore
 
 Singleton {
-  id: root
+    id: root
 
-  readonly property url home: StandardPaths.standardLocations(
-                                StandardPaths.HomeLocation)[0]
-  readonly property url pictures: StandardPaths.standardLocations(
-                                    StandardPaths.PicturesLocation)[0]
+    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 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`
+    readonly property url imagecache: `${cache}/imagecache`
 
-  function stringify(path: url): string {
-    return path.toString().replace(/%20/g, " ")
-  }
+    function stringify(path: url): string {
+        return path.toString().replace(/%20/g, " ")
+    }
 
-  function expandTilde(path: string): string {
-    return strip(path.replace("~", stringify(root.home)))
-  }
+    function expandTilde(path: string): string {
+        return strip(path.replace("~", stringify(root.home)))
+    }
 
-  function shortenHome(path: string): string {
-    return path.replace(strip(root.home), "~")
-  }
+    function shortenHome(path: string): string {
+        return path.replace(strip(root.home), "~")
+    }
 
-  function strip(path: url): string {
-    return stringify(path).replace("file://", "")
-  }
+    function strip(path: url): string {
+        return stringify(path).replace("file://", "")
+    }
 
-  function mkdir(path: url): void {
-    Quickshell.execDetached(["mkdir", "-p", strip(path)])
-  }
+    function toFileUrl(path: string): string {
+        return path.startsWith("file://") ? path : "file://" + path
+    }
 
-  function copy(from: url, to: url): void {
-    Quickshell.execDetached(["cp", strip(from), strip(to)])
-  }
+    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/Ref.qml

@@ -2,8 +2,8 @@ import QtQuick
 import Quickshell
 
 QtObject {
-  required property Singleton service
+    required property Singleton service
 
-  Component.onCompleted: service.refCount++
-  Component.onDestruction: service.refCount--
+    Component.onCompleted: service.refCount++
+    Component.onDestruction: service.refCount--
 }

Common/StockThemes.js

@@ -0,0 +1,545 @@
+// Stock theme definitions for DankMaterialShell
+// Separated from Theme.qml to keep that file clean
+
+const CatppuccinMocha = {
+    surface: "#313244",
+    surfaceText: "#cdd6f4",
+    surfaceVariant: "#313244",
+    surfaceVariantText: "#a6adc8",
+    background: "#1e1e2e",
+    backgroundText: "#cdd6f4",
+    outline: "#6c7086",
+    surfaceContainer: "#45475a",
+    surfaceContainerHigh: "#585b70",
+    surfaceContainerHighest: "#6c7086"
+}
+
+const CatppuccinLatte = {
+    surface: "#e6e9ef",
+    surfaceText: "#4c4f69",
+    surfaceVariant: "#e6e9ef",
+    surfaceVariantText: "#6c6f85",
+    background: "#eff1f5",
+    backgroundText: "#4c4f69",
+    outline: "#9ca0b0",
+    surfaceContainer: "#dce0e8",
+    surfaceContainerHigh: "#ccd0da",
+    surfaceContainerHighest: "#bcc0cc"
+}
+
+const CatppuccinVariants = {
+    "cat-rosewater": {
+        name: "Rosewater",
+        dark: { primary: "#f5e0dc", secondary: "#f2cdcd", primaryText: "#1e1e2e", primaryContainer: "#7d5d56", surfaceTint: "#f5e0dc" },
+        light: { primary: "#dc8a78", secondary: "#dd7878", primaryText: "#ffffff", primaryContainer: "#f6e7e3", surfaceTint: "#dc8a78" }
+    },
+    "cat-flamingo": {
+        name: "Flamingo",
+        dark: { primary: "#f2cdcd", secondary: "#f5e0dc", primaryText: "#1e1e2e", primaryContainer: "#7a555a", surfaceTint: "#f2cdcd" },
+        light: { primary: "#dd7878", secondary: "#dc8a78", primaryText: "#ffffff", primaryContainer: "#f6e5e5", surfaceTint: "#dd7878" }
+    },
+    "cat-pink": {
+        name: "Pink",
+        dark: { primary: "#f5c2e7", secondary: "#cba6f7", primaryText: "#1e1e2e", primaryContainer: "#7a3f69", surfaceTint: "#f5c2e7" },
+        light: { primary: "#ea76cb", secondary: "#8839ef", primaryText: "#ffffff", primaryContainer: "#f7d7ee", surfaceTint: "#ea76cb" }
+    },
+    "cat-mauve": {
+        name: "Mauve",
+        dark: { primary: "#cba6f7", secondary: "#b4befe", primaryText: "#1e1e2e", primaryContainer: "#55307f", surfaceTint: "#cba6f7" },
+        light: { primary: "#8839ef", secondary: "#7287fd", primaryText: "#ffffff", primaryContainer: "#eadcff", surfaceTint: "#8839ef" }
+    },
+    "cat-red": {
+        name: "Red",
+        dark: { primary: "#f38ba8", secondary: "#eba0ac", primaryText: "#1e1e2e", primaryContainer: "#6f2438", surfaceTint: "#f38ba8" },
+        light: { primary: "#d20f39", secondary: "#e64553", primaryText: "#ffffff", primaryContainer: "#f6d0d6", surfaceTint: "#d20f39" }
+    },
+    "cat-maroon": {
+        name: "Maroon",
+        dark: { primary: "#eba0ac", secondary: "#f38ba8", primaryText: "#1e1e2e", primaryContainer: "#6d3641", surfaceTint: "#eba0ac" },
+        light: { primary: "#e64553", secondary: "#d20f39", primaryText: "#ffffff", primaryContainer: "#f7d8dc", surfaceTint: "#e64553" }
+    },
+    "cat-peach": {
+        name: "Peach",
+        dark: { primary: "#fab387", secondary: "#f9e2af", primaryText: "#1e1e2e", primaryContainer: "#734226", surfaceTint: "#fab387" },
+        light: { primary: "#fe640b", secondary: "#df8e1d", primaryText: "#ffffff", primaryContainer: "#ffe4d5", surfaceTint: "#fe640b" }
+    },
+    "cat-yellow": {
+        name: "Yellow",
+        dark: { primary: "#f9e2af", secondary: "#a6e3a1", primaryText: "#1e1e2e", primaryContainer: "#6e5a2f", surfaceTint: "#f9e2af" },
+        light: { primary: "#df8e1d", secondary: "#40a02b", primaryText: "#ffffff", primaryContainer: "#fff6d6", surfaceTint: "#df8e1d" }
+    },
+    "cat-green": {
+        name: "Green",
+        dark: { primary: "#a6e3a1", secondary: "#94e2d5", primaryText: "#1e1e2e", primaryContainer: "#2f5f36", surfaceTint: "#a6e3a1" },
+        light: { primary: "#40a02b", secondary: "#179299", primaryText: "#ffffff", primaryContainer: "#dff4e0", surfaceTint: "#40a02b" }
+    },
+    "cat-teal": {
+        name: "Teal",
+        dark: { primary: "#94e2d5", secondary: "#89dceb", primaryText: "#1e1e2e", primaryContainer: "#2e5e59", surfaceTint: "#94e2d5" },
+        light: { primary: "#179299", secondary: "#04a5e5", primaryText: "#ffffff", primaryContainer: "#daf3f1", surfaceTint: "#179299" }
+    },
+    "cat-sky": {
+        name: "Sky",
+        dark: { primary: "#89dceb", secondary: "#74c7ec", primaryText: "#1e1e2e", primaryContainer: "#24586a", surfaceTint: "#89dceb" },
+        light: { primary: "#04a5e5", secondary: "#209fb5", primaryText: "#ffffff", primaryContainer: "#dbf1fb", surfaceTint: "#04a5e5" }
+    },
+    "cat-sapphire": {
+        name: "Sapphire",
+        dark: { primary: "#74c7ec", secondary: "#89b4fa", primaryText: "#1e1e2e", primaryContainer: "#1f4d6f", surfaceTint: "#74c7ec" },
+        light: { primary: "#209fb5", secondary: "#1e66f5", primaryText: "#ffffff", primaryContainer: "#def3f8", surfaceTint: "#209fb5" }
+    },
+    "cat-blue": {
+        name: "Blue",
+        dark: { primary: "#89b4fa", secondary: "#b4befe", primaryText: "#1e1e2e", primaryContainer: "#243f75", surfaceTint: "#89b4fa" },
+        light: { primary: "#1e66f5", secondary: "#7287fd", primaryText: "#ffffff", primaryContainer: "#e0e9ff", surfaceTint: "#1e66f5" }
+    },
+    "cat-lavender": {
+        name: "Lavender",
+        dark: { primary: "#b4befe", secondary: "#cba6f7", primaryText: "#1e1e2e", primaryContainer: "#3f4481", surfaceTint: "#b4befe" },
+        light: { primary: "#7287fd", secondary: "#8839ef", primaryText: "#ffffff", primaryContainer: "#e5e8ff", surfaceTint: "#7287fd" }
+    }
+}
+
+function getCatppuccinTheme(variant, isLight = false) {
+    const variantData = CatppuccinVariants[variant]
+    if (!variantData) return null
+
+    const baseColors = isLight ? CatppuccinLatte : CatppuccinMocha
+    const accentColors = isLight ? variantData.light : variantData.dark
+
+    return Object.assign({
+        name: `${variantData.name}${isLight ? ' Light' : ''}`
+    }, baseColors, accentColors)
+}
+
+const StockThemes = {
+    DARK: {
+        blue: {
+            name: "Blue",
+            primary: "#42a5f5",
+            primaryText: "#000000",
+            primaryContainer: "#0d47a1",
+            secondary: "#8ab4f8",
+            surface: "#101418",
+            surfaceText: "#e0e2e8",
+            surfaceVariant: "#42474e",
+            surfaceVariantText: "#c2c7cf",
+            surfaceTint: "#8ab4f8",
+            background: "#101418",
+            backgroundText: "#e0e2e8",
+            outline: "#8c9199",
+            surfaceContainer: "#1d2024",
+            surfaceContainerHigh: "#272a2f",
+            surfaceContainerHighest: "#32353a"
+        },
+        purple: {
+            name: "Purple",
+            primary: "#D0BCFF",
+            primaryText: "#381E72",
+            primaryContainer: "#4F378B",
+            secondary: "#CCC2DC",
+            surface: "#141218",
+            surfaceText: "#e6e0e9",
+            surfaceVariant: "#49454e",
+            surfaceVariantText: "#cac4cf",
+            surfaceTint: "#D0BCFF",
+            background: "#141218",
+            backgroundText: "#e6e0e9",
+            outline: "#948f99",
+            surfaceContainer: "#211f24",
+            surfaceContainerHigh: "#2b292f",
+            surfaceContainerHighest: "#36343a"
+        },
+        green: {
+            name: "Green",
+            primary: "#4caf50",
+            primaryText: "#000000",
+            primaryContainer: "#1b5e20",
+            secondary: "#81c995",
+            surface: "#10140f",
+            surfaceText: "#e0e4db",
+            surfaceVariant: "#424940",
+            surfaceVariantText: "#c2c9bd",
+            surfaceTint: "#81c995",
+            background: "#10140f",
+            backgroundText: "#e0e4db",
+            outline: "#8c9388",
+            surfaceContainer: "#1d211b",
+            surfaceContainerHigh: "#272b25",
+            surfaceContainerHighest: "#323630"
+        },
+        orange: {
+            name: "Orange",
+            primary: "#ff6d00",
+            primaryText: "#000000",
+            primaryContainer: "#3e2723",
+            secondary: "#ffb74d",
+            surface: "#1a120e",
+            surfaceText: "#f0dfd8",
+            surfaceVariant: "#52443d",
+            surfaceVariantText: "#d7c2b9",
+            surfaceTint: "#ffb74d",
+            background: "#1a120e",
+            backgroundText: "#f0dfd8",
+            outline: "#a08d85",
+            surfaceContainer: "#271e1a",
+            surfaceContainerHigh: "#322824",
+            surfaceContainerHighest: "#3d332e"
+        },
+        red: {
+            name: "Red",
+            primary: "#f44336",
+            primaryText: "#000000",
+            primaryContainer: "#4a0e0e",
+            secondary: "#f28b82",
+            surface: "#1a1110",
+            surfaceText: "#f1dedc",
+            surfaceVariant: "#534341",
+            surfaceVariantText: "#d8c2be",
+            surfaceTint: "#f28b82",
+            background: "#1a1110",
+            backgroundText: "#f1dedc",
+            outline: "#a08c89",
+            surfaceContainer: "#271d1c",
+            surfaceContainerHigh: "#322826",
+            surfaceContainerHighest: "#3d3231"
+        },
+        cyan: {
+            name: "Cyan",
+            primary: "#00bcd4",
+            primaryText: "#000000",
+            primaryContainer: "#004d5c",
+            secondary: "#4dd0e1",
+            surface: "#0e1416",
+            surfaceText: "#dee3e5",
+            surfaceVariant: "#3f484a",
+            surfaceVariantText: "#bfc8ca",
+            surfaceTint: "#4dd0e1",
+            background: "#0e1416",
+            backgroundText: "#dee3e5",
+            outline: "#899295",
+            surfaceContainer: "#1b2122",
+            surfaceContainerHigh: "#252b2c",
+            surfaceContainerHighest: "#303637"
+        },
+        pink: {
+            name: "Pink",
+            primary: "#e91e63",
+            primaryText: "#000000",
+            primaryContainer: "#4a0e2f",
+            secondary: "#f8bbd9",
+            surface: "#191112",
+            surfaceText: "#f0dee0",
+            surfaceVariant: "#524345",
+            surfaceVariantText: "#d6c2c3",
+            surfaceTint: "#f8bbd9",
+            background: "#191112",
+            backgroundText: "#f0dee0",
+            outline: "#9f8c8e",
+            surfaceContainer: "#261d1e",
+            surfaceContainerHigh: "#312829",
+            surfaceContainerHighest: "#3c3233"
+        },
+        amber: {
+            name: "Amber",
+            primary: "#ffc107",
+            primaryText: "#000000",
+            primaryContainer: "#4a3c00",
+            secondary: "#ffd54f",
+            surface: "#17130b",
+            surfaceText: "#ebe1d4",
+            surfaceVariant: "#4d4639",
+            surfaceVariantText: "#d0c5b4",
+            surfaceTint: "#ffd54f",
+            background: "#17130b",
+            backgroundText: "#ebe1d4",
+            outline: "#998f80",
+            surfaceContainer: "#231f17",
+            surfaceContainerHigh: "#2e2921",
+            surfaceContainerHighest: "#39342b"
+        },
+        coral: {
+            name: "Coral",
+            primary: "#ffb4ab",
+            primaryText: "#000000",
+            primaryContainer: "#8c1d18",
+            secondary: "#f9dedc",
+            surface: "#1a1110",
+            surfaceText: "#f1dedc",
+            surfaceVariant: "#534341",
+            surfaceVariantText: "#d8c2bf",
+            surfaceTint: "#ffb4ab",
+            background: "#1a1110",
+            backgroundText: "#f1dedc",
+            outline: "#a08c8a",
+            surfaceContainer: "#271d1c",
+            surfaceContainerHigh: "#322826",
+            surfaceContainerHighest: "#3d3231"
+        },
+        monochrome: {
+            name: "Monochrome",
+            primary: "#ffffff",
+            primaryText: "#2b303c",
+            primaryContainer: "#424753",
+            secondary: "#c4c6d0",
+            surface: "#2a2a2a",
+            surfaceText: "#e4e2e3",
+            surfaceVariant: "#474648",
+            surfaceVariantText: "#c8c6c7",
+            surfaceTint: "#c2c6d6",
+            background: "#131315",
+            backgroundText: "#e4e2e3",
+            outline: "#929092",
+            surfaceContainer: "#353535",
+            surfaceContainerHigh: "#424242",
+            surfaceContainerHighest: "#505050",
+            error: "#ffb4ab",
+            warning: "#3f4759",
+            info: "#595e6c",
+            matugen_type: "scheme-monochrome"
+        }
+    },
+    LIGHT: {
+        blue: {
+            name: "Blue Light",
+            primary: "#1976d2",
+            primaryText: "#ffffff",
+            primaryContainer: "#e3f2fd",
+            secondary: "#42a5f5",
+            surface: "#f7f9ff",
+            surfaceText: "#181c20",
+            surfaceVariant: "#dee3eb",
+            surfaceVariantText: "#42474e",
+            surfaceTint: "#1976d2",
+            background: "#f7f9ff",
+            backgroundText: "#181c20",
+            outline: "#72777f",
+            surfaceContainer: "#eceef4",
+            surfaceContainerHigh: "#e6e8ee",
+            surfaceContainerHighest: "#e0e2e8"
+        },
+        purple: {
+            name: "Purple Light",
+            primary: "#6750A4",
+            primaryText: "#ffffff",
+            primaryContainer: "#EADDFF",
+            secondary: "#625B71",
+            surface: "#fef7ff",
+            surfaceText: "#1d1b20",
+            surfaceVariant: "#e7e0eb",
+            surfaceVariantText: "#49454e",
+            surfaceTint: "#6750A4",
+            background: "#fef7ff",
+            backgroundText: "#1d1b20",
+            outline: "#7a757f",
+            surfaceContainer: "#f2ecf4",
+            surfaceContainerHigh: "#ece6ee",
+            surfaceContainerHighest: "#e6e0e9"
+        },
+        green: {
+            name: "Green Light",
+            primary: "#2e7d32",
+            primaryText: "#ffffff",
+            primaryContainer: "#e8f5e8",
+            secondary: "#4caf50",
+            surface: "#f7fbf1",
+            surfaceText: "#191d17",
+            surfaceVariant: "#dee5d8",
+            surfaceVariantText: "#424940",
+            surfaceTint: "#2e7d32",
+            background: "#f7fbf1",
+            backgroundText: "#191d17",
+            outline: "#72796f",
+            surfaceContainer: "#ecefe6",
+            surfaceContainerHigh: "#e6e9e0",
+            surfaceContainerHighest: "#e0e4db"
+        },
+        orange: {
+            name: "Orange Light",
+            primary: "#e65100",
+            primaryText: "#ffffff",
+            primaryContainer: "#ffecb3",
+            secondary: "#ff9800",
+            surface: "#fff8f6",
+            surfaceText: "#221a16",
+            surfaceVariant: "#f4ded5",
+            surfaceVariantText: "#52443d",
+            surfaceTint: "#e65100",
+            background: "#fff8f6",
+            backgroundText: "#221a16",
+            outline: "#85736c",
+            surfaceContainer: "#fceae3",
+            surfaceContainerHigh: "#f6e5de",
+            surfaceContainerHighest: "#f0dfd8"
+        },
+        red: {
+            name: "Red Light",
+            primary: "#d32f2f",
+            primaryText: "#ffffff",
+            primaryContainer: "#ffebee",
+            secondary: "#f44336",
+            surface: "#fff8f7",
+            surfaceText: "#231918",
+            surfaceVariant: "#f5ddda",
+            surfaceVariantText: "#534341",
+            surfaceTint: "#d32f2f",
+            background: "#fff8f7",
+            backgroundText: "#231918",
+            outline: "#857370",
+            surfaceContainer: "#fceae7",
+            surfaceContainerHigh: "#f7e4e1",
+            surfaceContainerHighest: "#f1dedc"
+        },
+        cyan: {
+            name: "Cyan Light",
+            primary: "#0097a7",
+            primaryText: "#ffffff",
+            primaryContainer: "#e0f2f1",
+            secondary: "#00bcd4",
+            surface: "#f5fafc",
+            surfaceText: "#171d1e",
+            surfaceVariant: "#dbe4e6",
+            surfaceVariantText: "#3f484a",
+            surfaceTint: "#0097a7",
+            background: "#f5fafc",
+            backgroundText: "#171d1e",
+            outline: "#6f797b",
+            surfaceContainer: "#e9eff0",
+            surfaceContainerHigh: "#e3e9eb",
+            surfaceContainerHighest: "#dee3e5"
+        },
+        pink: {
+            name: "Pink Light",
+            primary: "#c2185b",
+            primaryText: "#ffffff",
+            primaryContainer: "#fce4ec",
+            secondary: "#e91e63",
+            surface: "#fff8f7",
+            surfaceText: "#22191a",
+            surfaceVariant: "#f3dddf",
+            surfaceVariantText: "#524345",
+            surfaceTint: "#c2185b",
+            background: "#fff8f7",
+            backgroundText: "#22191a",
+            outline: "#847375",
+            surfaceContainer: "#fbeaeb",
+            surfaceContainerHigh: "#f5e4e5",
+            surfaceContainerHighest: "#f0dee0"
+        },
+        amber: {
+            name: "Amber Light",
+            primary: "#ff8f00",
+            primaryText: "#000000",
+            primaryContainer: "#fff8e1",
+            secondary: "#ffc107",
+            surface: "#fff8f2",
+            surfaceText: "#1f1b13",
+            surfaceVariant: "#ede1cf",
+            surfaceVariantText: "#4d4639",
+            surfaceTint: "#ff8f00",
+            background: "#fff8f2",
+            backgroundText: "#1f1b13",
+            outline: "#7f7667",
+            surfaceContainer: "#f6ecdf",
+            surfaceContainerHigh: "#f1e7d9",
+            surfaceContainerHighest: "#ebe1d4"
+        },
+        coral: {
+            name: "Coral Light",
+            primary: "#8c1d18",
+            primaryText: "#ffffff",
+            primaryContainer: "#ffdad6",
+            secondary: "#ff5449",
+            surface: "#fff8f7",
+            surfaceText: "#231918",
+            surfaceVariant: "#f5ddda",
+            surfaceVariantText: "#534341",
+            surfaceTint: "#8c1d18",
+            background: "#fff8f7",
+            backgroundText: "#231918",
+            outline: "#857371",
+            surfaceContainer: "#fceae7",
+            surfaceContainerHigh: "#f6e4e2",
+            surfaceContainerHighest: "#f1dedc"
+        },
+        monochrome: {
+            name: "Monochrome Light",
+            primary: "#2b303c",
+            primaryText: "#ffffff",
+            primaryContainer: "#d6d7dc",
+            secondary: "#4a4d56",
+            surface: "#f5f5f6",
+            surfaceText: "#2a2a2a",
+            surfaceVariant: "#e0e0e2",
+            surfaceVariantText: "#424242",
+            surfaceTint: "#5a5f6e",
+            background: "#ffffff",
+            backgroundText: "#1a1a1a",
+            outline: "#757577",
+            surfaceContainer: "#e8e8ea",
+            surfaceContainerHigh: "#dcdcde",
+            surfaceContainerHighest: "#d0d0d2",
+            error: "#ba1a1a",
+            warning: "#f9e79f",
+            info: "#5d6475",
+            matugen_type: "scheme-monochrome"
+        }
+    }
+}
+
+const ThemeCategories = {
+    GENERIC: {
+        name: "Generic",
+        variants: ["blue", "purple", "green", "orange", "red", "cyan", "pink", "amber", "coral", "monochrome"]
+    },
+    CATPPUCCIN: {
+        name: "Catppuccin",
+        variants: Object.keys(CatppuccinVariants)
+    }
+}
+
+const ThemeNames = {
+    BLUE: "blue",
+    PURPLE: "purple",
+    GREEN: "green",
+    ORANGE: "orange",
+    RED: "red",
+    CYAN: "cyan",
+    PINK: "pink",
+    AMBER: "amber",
+    CORAL: "coral",
+    MONOCHROME: "monochrome",
+    DYNAMIC: "dynamic"
+}
+
+function isStockTheme(themeName) {
+    return Object.keys(StockThemes.DARK).includes(themeName)
+}
+
+function isCatppuccinVariant(themeName) {
+    return Object.keys(CatppuccinVariants).includes(themeName)
+}
+
+function getAvailableThemes(isLight = false) {
+    return isLight ? StockThemes.LIGHT : StockThemes.DARK
+}
+
+function getThemeByName(themeName, isLight = false) {
+    if (isCatppuccinVariant(themeName)) {
+        return getCatppuccinTheme(themeName, isLight)
+    }
+    const themes = getAvailableThemes(isLight)
+    return themes[themeName] || themes.blue
+}
+
+function getAllThemeNames() {
+    return Object.keys(StockThemes.DARK)
+}
+
+function getCatppuccinVariantNames() {
+    return Object.keys(CatppuccinVariants)
+}
+
+function getThemeCategories() {
+    return ThemeCategories
+}

Common/fuzzysort.js

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

DMSGreeter.qml

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

DMSShell.qml

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

DMSShellIPC.qml

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

Modals/Clipboard/ClipboardConstants.qml

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

Modals/Clipboard/ClipboardContent.qml

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

Modals/Clipboard/ClipboardEntry.qml

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

Modals/Clipboard/ClipboardHeader.qml

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

Modals/Clipboard/ClipboardHistoryModal.qml

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

Modals/Clipboard/ClipboardKeyboardController.qml

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

Modals/Clipboard/ClipboardKeyboardHints.qml

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

Modals/Clipboard/ClipboardProcesses.qml

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

Modals/Clipboard/ClipboardThumbnail.qml

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

Modals/ClipboardHistoryModal.qml

@@ -1,643 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
-import Quickshell
-import Quickshell.Io
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-DankModal {
-
-  id: clipboardHistoryModal
-
-  property int totalCount: 0
-  property var activeTheme: Theme
-  property bool showClearConfirmation: false
-  property var clipboardEntries: []
-  property string searchText: ""
-
-  function updateFilteredModel() {
-    filteredClipboardModel.clear()
-    for (var i = 0; i < clipboardModel.count; i++) {
-      const entry = clipboardModel.get(i).entry
-      if (searchText.trim().length === 0) {
-        filteredClipboardModel.append({
-                                        "entry": entry
-                                      })
-      } else {
-        const content = getEntryPreview(entry).toLowerCase()
-        if (content.includes(searchText.toLowerCase()))
-          filteredClipboardModel.append({
-                                          "entry": entry
-                                        })
-      }
-    }
-    clipboardHistoryModal.totalCount = filteredClipboardModel.count
-  }
-
-  function toggle() {
-    if (visible)
-      hide()
-    else
-      show()
-  }
-
-  function show() {
-    clipboardHistoryModal.visible = true
-    initializeThumbnailSystem()
-    refreshClipboard()
-    
-    Qt.callLater(function() {
-      if (contentLoader.item) {
-        const content = contentLoader.item
-        if (content.children && content.children.length > 1) {
-          const searchField = content.children[1]
-          if (searchField && searchField.forceActiveFocus) {
-            searchField.text = ""
-            searchField.forceActiveFocus()
-          }
-        }
-      }
-    })
-  }
-
-  function hide() {
-    clipboardHistoryModal.visible = false
-    clipboardHistoryModal.searchText = ""
-    cleanupTempFiles()
-  }
-
-  function initializeThumbnailSystem() {// No initialization needed - using direct image display
-  }
-
-  function cleanupTempFiles() {
-    Quickshell.execDetached(["sh", "-c", "rm -f /tmp/clipboard_*.png"])
-  }
-
-  function generateThumbnails() {// No thumbnail generation needed - using direct image display
-  }
-
-  function refreshClipboard() {
-    clipboardProcess.running = true
-  }
-
-  function copyEntry(entry) {
-    const entryId = entry.split('\t')[0]
-    Quickshell.execDetached(
-          ["sh", "-c", `cliphist decode ${entryId} | wl-copy`])
-
-    ToastService.showInfo("Copied to clipboard")
-    clipboardHistoryModal.hide()
-  }
-
-  function deleteEntry(entry) {
-
-    deleteProcess.command = ["sh", "-c", `echo '${entry.replace(
-                               /'/g, "'\\''")}' | cliphist delete`]
-    deleteProcess.running = true
-  }
-
-  function clearAll() {
-    clearProcess.running = true
-  }
-
-  function getEntryPreview(entry) {
-    let content = entry.replace(/^\s*\d+\s+/, "")
-    if (content.includes("image/") || content.includes("binary data")
-        || /\.(png|jpg|jpeg|gif|bmp|webp)/i.test(content)) {
-      const dimensionMatch = content.match(/(\d+)x(\d+)/)
-      if (dimensionMatch)
-        return `Image ${dimensionMatch[1]}×${dimensionMatch[2]}`
-
-      const typeMatch = content.match(/\b(png|jpg|jpeg|gif|bmp|webp)\b/i)
-      if (typeMatch)
-        return `Image (${typeMatch[1].toUpperCase()})`
-
-      return "Image"
-    }
-    if (content.length > 100)
-      return content.substring(0, 100) + "..."
-
-    return content
-  }
-
-  function getEntryType(entry) {
-    if (entry.includes("image/") || entry.includes("binary data")
-        || /\.(png|jpg|jpeg|gif|bmp|webp)/i.test(entry)
-        || /\b(png|jpg|jpeg|gif|bmp|webp)\b/i.test(entry))
-      return "image"
-
-    if (entry.length > 200)
-      return "long_text"
-
-    return "text"
-  }
-
-  visible: false
-  width: 650
-  height: 550
-  keyboardFocus: "ondemand"
-  backgroundColor: Theme.popupBackground()
-  cornerRadius: Theme.cornerRadius
-  borderColor: Theme.outlineMedium
-  borderWidth: 1
-  enableShadow: true
-  onBackgroundClicked: {
-    hide()
-  }
-
-  DankModal {
-    id: clearConfirmDialog
-
-    visible: showClearConfirmation
-    width: 350
-    height: 150
-    keyboardFocus: "ondemand"
-    onBackgroundClicked: {
-      showClearConfirmation = false
-    }
-
-    content: Component {
-      Item {
-        anchors.fill: parent
-
-        Column {
-          anchors.centerIn: parent
-          width: parent.width - Theme.spacingM * 2
-          spacing: Theme.spacingM
-
-          StyledText {
-            text: "Clear All History?"
-            font.pixelSize: Theme.fontSizeLarge
-            color: Theme.surfaceText
-            font.weight: Font.Medium
-            anchors.horizontalCenter: parent.horizontalCenter
-          }
-
-          StyledText {
-            text: "This will permanently delete all clipboard history."
-            font.pixelSize: Theme.fontSizeMedium
-            color: Theme.surfaceVariantText
-            anchors.horizontalCenter: parent.horizontalCenter
-            wrapMode: Text.WordWrap
-            width: parent.width
-            horizontalAlignment: Text.AlignHCenter
-          }
-
-          Row {
-            anchors.horizontalCenter: parent.horizontalCenter
-            spacing: Theme.spacingM
-
-            Rectangle {
-              width: 100
-              height: 40
-              radius: Theme.cornerRadius
-              color: cancelClearButton.containsMouse ? Theme.surfaceTextPressed : Theme.surfaceVariantAlpha
-
-              StyledText {
-                text: "Cancel"
-                font.pixelSize: Theme.fontSizeMedium
-                color: Theme.surfaceText
-                font.weight: Font.Medium
-                anchors.centerIn: parent
-              }
-
-              MouseArea {
-                id: cancelClearButton
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: showClearConfirmation = false
-              }
-            }
-
-            Rectangle {
-              width: 100
-              height: 40
-              radius: Theme.cornerRadius
-              color: confirmClearButton.containsMouse ? Theme.errorPressed : Theme.error
-
-              StyledText {
-                text: "Clear All"
-                font.pixelSize: Theme.fontSizeMedium
-                color: Theme.primaryText
-                font.weight: Font.Medium
-                anchors.centerIn: parent
-              }
-
-              MouseArea {
-                id: confirmClearButton
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                  clearAll()
-                  showClearConfirmation = false
-                  hide()
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  ListModel {
-    id: clipboardModel
-  }
-
-  ListModel {
-    id: filteredClipboardModel
-  }
-
-  Process {
-    id: clipboardProcess
-
-    command: ["cliphist", "list"]
-    running: false
-
-    stdout: StdioCollector {
-      onStreamFinished: {
-        clipboardModel.clear()
-        const lines = text.trim().split('\n')
-        for (const line of lines) {
-          if (line.trim().length > 0)
-            clipboardModel.append({
-                                    "entry": line
-                                  })
-        }
-        updateFilteredModel()
-      }
-    }
-  }
-
-  Process {
-    id: deleteProcess
-
-    running: false
-    onExited: exitCode => {
-                if (exitCode === 0)
-                refreshClipboard()
-                else
-                console.warn("Failed to delete clipboard entry")
-              }
-  }
-
-  Process {
-    id: clearProcess
-
-    command: ["cliphist", "wipe"]
-    running: false
-    onExited: exitCode => {
-                if (exitCode === 0) {
-                  clipboardModel.clear()
-                  filteredClipboardModel.clear()
-                  totalCount = 0
-                } else {
-
-                }
-              }
-  }
-
-  IpcHandler {
-    function open() {
-
-      clipboardHistoryModal.show()
-      return "CLIPBOARD_OPEN_SUCCESS"
-    }
-
-    function close() {
-
-      clipboardHistoryModal.hide()
-      return "CLIPBOARD_CLOSE_SUCCESS"
-    }
-
-    function toggle() {
-
-      clipboardHistoryModal.toggle()
-      return "CLIPBOARD_TOGGLE_SUCCESS"
-    }
-
-    target: "clipboard"
-  }
-
-  property Component clipboardContent: Component {
-    Column {
-      anchors.fill: parent
-      anchors.margins: Theme.spacingL
-      spacing: Theme.spacingL
-      focus: true
-      Keys.onPressed: function (event) {
-        if (event.key === Qt.Key_Escape) {
-          hide()
-          event.accepted = true
-        }
-      }
-
-      Item {
-        width: parent.width
-        height: 40
-
-        Row {
-          anchors.left: parent.left
-          anchors.verticalCenter: parent.verticalCenter
-          spacing: Theme.spacingM
-
-          DankIcon {
-            name: "content_paste"
-            size: Theme.iconSize
-            color: Theme.primary
-            anchors.verticalCenter: parent.verticalCenter
-          }
-
-          StyledText {
-            text: `Clipboard History (${totalCount})`
-            font.pixelSize: Theme.fontSizeLarge
-            color: Theme.surfaceText
-            font.weight: Font.Medium
-            anchors.verticalCenter: parent.verticalCenter
-          }
-        }
-
-        Row {
-          anchors.right: parent.right
-          anchors.verticalCenter: parent.verticalCenter
-          spacing: Theme.spacingS
-
-          DankActionButton {
-            iconName: "delete_sweep"
-            iconSize: Theme.iconSize
-            iconColor: Theme.error
-            hoverColor: Theme.errorHover
-            onClicked: {
-              showClearConfirmation = true
-            }
-          }
-
-          DankActionButton {
-            iconName: "close"
-            iconSize: Theme.iconSize - 4
-            iconColor: Theme.surfaceText
-            hoverColor: Theme.errorHover
-            onClicked: hide()
-          }
-        }
-      }
-
-      DankTextField {
-        id: searchField
-
-        width: parent.width
-        placeholderText: "Search clipboard history..."
-        leftIconName: "search"
-        showClearButton: true
-        onTextChanged: {
-          clipboardHistoryModal.searchText = text
-          updateFilteredModel()
-        }
-      }
-
-      Rectangle {
-        width: parent.width
-        height: parent.height - 110
-        radius: Theme.cornerRadius
-        color: Theme.surfaceLight
-        border.color: Theme.outlineLight
-        border.width: 1
-        clip: true
-
-        DankListView {
-          id: clipboardListView
-
-          anchors.fill: parent
-          anchors.margins: Theme.spacingS
-          clip: true
-          model: filteredClipboardModel
-          spacing: Theme.spacingXS
-
-          // Qt 6.9+ scrolling: flickDeceleration/maximumFlickVelocity only affect touch now
-          interactive: true
-          flickDeceleration: 1500 // Touch only in Qt 6.9+      // Lower = more momentum, longer scrolling
-          maximumFlickVelocity: 2000 // Touch only in Qt 6.9+   // Higher = faster maximum scroll speed
-          boundsBehavior: Flickable.DragAndOvershootBounds
-          boundsMovement: Flickable.FollowBoundsBehavior
-          pressDelay: 0
-          flickableDirection: Flickable.VerticalFlick
-
-          StyledText {
-            text: "No clipboard entries found"
-            anchors.centerIn: parent
-            font.pixelSize: Theme.fontSizeMedium
-            color: Theme.surfaceVariantText
-            visible: filteredClipboardModel.count === 0
-          }
-
-          ScrollBar.vertical: ScrollBar {
-            policy: ScrollBar.AsNeeded
-          }
-
-          ScrollBar.horizontal: ScrollBar {
-            policy: ScrollBar.AlwaysOff
-          }
-
-          delegate: Rectangle {
-            property string entryType: getEntryType(model.entry)
-            property string entryPreview: getEntryPreview(model.entry)
-            property int entryIndex: index + 1
-            property string entryData: model.entry
-            property alias thumbnailImageSource: thumbnailImageSource
-
-            width: clipboardListView.width
-            height: Math.max(entryType === "image" ? 72 : 60,
-                             contentText.contentHeight + Theme.spacingL)
-            radius: Theme.cornerRadius
-            color: mouseArea.containsMouse ? Theme.primaryHover : Theme.primaryBackground
-            border.color: Theme.outlineStrong
-            border.width: 1
-
-            Row {
-              anchors.fill: parent
-              anchors.margins: Theme.spacingM
-              anchors.rightMargin: Theme.spacingS // Reduced right margin
-              spacing: Theme.spacingL
-
-              Rectangle {
-                width: 24
-                height: 24
-                radius: 12
-                color: Theme.primarySelected
-                anchors.verticalCenter: parent.verticalCenter
-
-                StyledText {
-                  anchors.centerIn: parent
-                  text: entryIndex.toString()
-                  font.pixelSize: Theme.fontSizeSmall
-                  font.weight: Font.Bold
-                  color: Theme.primary
-                }
-              }
-
-              Row {
-                anchors.verticalCenter: parent.verticalCenter
-                width: parent.width - 68 // Account for index (24) + spacing (16) + delete button (32) - small margin
-                spacing: Theme.spacingM
-
-                Item {
-                  width: entryType === "image" ? 48 : Theme.iconSize
-                  height: entryType === "image" ? 48 : Theme.iconSize
-                  anchors.verticalCenter: parent.verticalCenter
-
-                  CachingImage {
-                    id: thumbnailImageSource
-                    anchors.fill: parent
-                    property string entryId: model.entry.split('\t')[0]
-                    source: entryType === "image"
-                            && imageLoader.imageData ? `data:image/png;base64,${imageLoader.imageData}` : ""
-                    fillMode: Image.PreserveAspectCrop
-                    smooth: true
-                    cache: true
-                    visible: false // Hide the original image
-                    asynchronous: true
-
-                    Process {
-                      id: imageLoader
-                      property string imageData: ""
-
-                      command: ["sh", "-c", `cliphist decode ${thumbnailImageSource.entryId} | base64 -w 0`]
-                      running: entryType === "image"
-
-                      stdout: StdioCollector {
-                        onStreamFinished: {
-                          imageLoader.imageData = text.trim()
-                        }
-                      }
-                    }
-                  }
-
-                  MultiEffect {
-                    anchors.fill: parent
-                    anchors.margins: 2
-                    source: thumbnailImageSource
-                    maskEnabled: true
-                    maskSource: clipboardCircularMask
-                    visible: entryType === "image"
-                             && thumbnailImageSource.status === Image.Ready
-                    maskThresholdMin: 0.5
-                    maskSpreadAtMin: 1
-                  }
-
-                  Item {
-                    id: clipboardCircularMask
-
-                    width: 48 - 4
-                    height: 48 - 4
-                    layer.enabled: true
-                    layer.smooth: true
-                    visible: false
-
-                    Rectangle {
-                      anchors.fill: parent
-                      radius: width / 2
-                      color: "black"
-                      antialiasing: true
-                    }
-                  }
-
-                  DankIcon {
-                    visible: !(entryType === "image"
-                               && thumbnailImageSource.status === Image.Ready)
-                    name: {
-                      if (entryType === "image")
-                        return "image"
-
-                      if (entryType === "long_text")
-                        return "subject"
-
-                      return "content_copy"
-                    }
-                    size: Theme.iconSize
-                    color: Theme.primary
-                    anchors.centerIn: parent
-                  }
-                }
-
-                Column {
-                  anchors.verticalCenter: parent.verticalCenter
-                  width: parent.width - (entryType === "image" ? 48 : Theme.iconSize)
-                         - Theme.spacingM
-                  spacing: Theme.spacingXS
-
-                  StyledText {
-                    text: {
-                      switch (entryType) {
-                      case "image":
-                        return "Image • " + entryPreview
-                      case "long_text":
-                        return "Long Text"
-                      default:
-                        return "Text"
-                      }
-                    }
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.primary
-                    font.weight: Font.Medium
-                    width: parent.width
-                    elide: Text.ElideRight
-                  }
-
-                  StyledText {
-                    id: contentText
-
-                    text: entryPreview
-                    font.pixelSize: Theme.fontSizeMedium
-                    color: Theme.surfaceText
-                    width: parent.width
-                    wrapMode: Text.WordWrap
-                    maximumLineCount: entryType === "long_text" ? 3 : 1
-                    elide: Text.ElideRight
-                  }
-                }
-              }
-            }
-
-            DankActionButton {
-              anchors.right: parent.right
-              anchors.rightMargin: Theme.spacingM
-              anchors.verticalCenter: parent.verticalCenter
-              iconName: "close"
-              iconSize: Theme.iconSize - 6
-              iconColor: Theme.error
-              hoverColor: Theme.errorHover
-              onClicked: {
-
-                deleteEntry(model.entry)
-              }
-            }
-
-            MouseArea {
-              id: mouseArea
-
-              anchors.fill: parent
-              anchors.rightMargin: 40 // Enough space to avoid delete button (32 + 8 margin)
-              hoverEnabled: true
-              cursorShape: Qt.PointingHandCursor
-              onClicked: copyEntry(model.entry)
-            }
-
-            Behavior on color {
-              ColorAnimation {
-                duration: Theme.shortDuration
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  content: clipboardContent
-}

Modals/Common/ConfirmModal.qml

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

Modals/Common/DankModal.qml

@@ -0,0 +1,250 @@
+import QtQuick
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Wayland
+import qs.Common
+import qs.Services
+
+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
+    readonly property real dpr: {
+        if (CompositorService.isNiri && screen) {
+            const niriScale = NiriService.displayScales[screen.name]
+            if (niriScale !== undefined) return niriScale
+        }
+        if (CompositorService.isHyprland && screen) {
+            const hyprlandMonitor = Hyprland.monitors.values.find(m => m.name === screen.name)
+            if (hyprlandMonitor?.scale !== undefined) return hyprlandMonitor.scale
+        }
+        return (screen?.devicePixelRatio) || 1
+    }
+    property bool showBackground: true
+    property real backgroundOpacity: 0.5
+    property string positioning: "center"
+    property point customPosition: Qt.point(0, 0)
+    property bool closeOnEscapeKey: true
+    property bool closeOnBackgroundClick: true
+    property string animationType: "scale"
+    property int animationDuration: Theme.shortDuration
+    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
+    property bool keepContentLoaded: false
+
+    signal opened
+    signal dialogClosed
+    signal backgroundClicked
+
+    function open() {
+        ModalManager.openModal(root)
+        closeTimer.stop()
+        shouldBeVisible = true
+        visible = true
+        focusScope.forceActiveFocus()
+    }
+
+    function close() {
+        shouldBeVisible = false
+        closeTimer.restart()
+    }
+
+    function toggle() {
+        if (shouldBeVisible) {
+            close()
+        } else {
+            open()
+        }
+    }
+
+    visible: shouldBeVisible
+    color: "transparent"
+    WlrLayershell.layer: WlrLayershell.Top // if set to overlay -> virtual keyboards can be stuck under modal
+    WlrLayershell.exclusiveZone: -1
+    WlrLayershell.keyboardFocus: shouldHaveFocus ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
+    onVisibleChanged: {
+        if (root.visible) {
+            opened()
+        } else {
+            if (Qt.inputMethod) {
+                Qt.inputMethod.hide()
+                Qt.inputMethod.reset()
+            }
+            dialogClosed()
+        }
+    }
+
+    Connections {
+        function onCloseAllModalsExcept(excludedModal) {
+            if (excludedModal !== root && !allowStacking && shouldBeVisible) {
+                close()
+            }
+        }
+
+        target: ModalManager
+    }
+
+    Timer {
+        id: closeTimer
+
+        interval: animationDuration + 100
+        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: Theme.px(root.width, dpr)
+        height: Theme.px(root.height, dpr)
+        anchors.centerIn: undefined
+        x: {
+            if (positioning === "center") {
+                return Theme.snap((root.screenWidth - width) / 2, dpr)
+            } else if (positioning === "top-right") {
+                return Theme.px(Math.max(Theme.spacingL, root.screenWidth - width - Theme.spacingL), dpr)
+            } else if (positioning === "custom") {
+                return Theme.snap(root.customPosition.x, dpr)
+            }
+            return 0
+        }
+        y: {
+            if (positioning === "center") {
+                return Theme.snap((root.screenHeight - height) / 2, dpr)
+            } else if (positioning === "top-right") {
+                return Theme.px(Theme.barHeight + Theme.spacingXS, dpr)
+            } else if (positioning === "custom") {
+                return Theme.snap(root.customPosition.y, dpr)
+            }
+            return 0
+        }
+        color: root.backgroundColor
+        radius: root.cornerRadius
+        border.color: root.borderColor
+        border.width: root.borderWidth
+        clip: false
+        layer.enabled: true
+        opacity: root.shouldBeVisible ? 1 : 0
+        transform: root.animationType === "slide" ? slideTransform : null
+
+        Translate {
+            id: slideTransform
+
+            readonly property real rawX: root.shouldBeVisible ? 0 : 15
+            readonly property real rawY: root.shouldBeVisible ? 0 : -30
+
+            x: Theme.snap(rawX, root.dpr)
+            y: Theme.snap(rawY, root.dpr)
+        }
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: animationDuration
+                easing.type: animationEasing
+            }
+        }
+
+        FocusScope {
+            anchors.fill: parent
+            focus: root.shouldBeVisible
+            clip: false
+
+            Loader {
+                id: contentLoader
+
+                anchors.fill: parent
+                active: root.keepContentLoaded || root.shouldBeVisible || root.visible
+                asynchronous: false
+                focus: true
+                clip: false
+
+                onLoaded: {
+                    if (item) {
+                        Qt.callLater(() => item.forceActiveFocus())
+                    }
+                }
+            }
+        }
+    }
+
+    FocusScope {
+        id: focusScope
+
+        objectName: "modalFocusScope"
+        anchors.fill: parent
+        visible: root.shouldBeVisible || root.visible
+        focus: root.shouldBeVisible
+        Keys.onEscapePressed: event => {
+                                  if (root.closeOnEscapeKey && shouldHaveFocus) {
+                                      root.close()
+                                      event.accepted = true
+                                  }
+                              }
+        onVisibleChanged: {
+            if (visible && shouldHaveFocus) {
+                Qt.callLater(() => focusScope.forceActiveFocus())
+            }
+        }
+
+        Connections {
+            function onShouldHaveFocusChanged() {
+                if (shouldHaveFocus && shouldBeVisible) {
+                    Qt.callLater(() => focusScope.forceActiveFocus())
+                }
+            }
+
+            target: root
+        }
+    }
+}

Modals/DankColorPickerModal.qml

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

Modals/DankModal.qml

@@ -1,211 +0,0 @@
-import QtQuick
-import QtQuick.Effects
-import Quickshell
-import Quickshell.Wayland
-import qs.Common
-
-PanelWindow {
-    id: root
-
-    property alias content: contentLoader.sourceComponent
-    property alias contentLoader: contentLoader
-    property real width: 400
-    property real height: 300
-    readonly property real screenWidth: screen ? screen.width : 1920
-    readonly property real screenHeight: screen ? screen.height : 1080
-    property bool showBackground: true
-    property real backgroundOpacity: 0.5
-    property string positioning: "center"
-    property point customPosition: Qt.point(0, 0)
-    property string keyboardFocus: "ondemand"
-    property bool closeOnEscapeKey: true
-    property bool closeOnBackgroundClick: true
-    property string animationType: "scale"
-    property int animationDuration: Theme.mediumDuration
-    property var animationEasing: Theme.emphasizedEasing
-    property color backgroundColor: Theme.surfaceContainer
-    property color borderColor: Theme.outlineMedium
-    property real borderWidth: 1
-    property real cornerRadius: Theme.cornerRadius
-    property bool enableShadow: false
-    // Expose the focusScope for external access
-    property alias modalFocusScope: focusScope
-
-    signal opened()
-    signal dialogClosed()
-    signal backgroundClicked()
-
-    function open() {
-        visible = true;
-    }
-
-    function close() {
-        visible = false;
-    }
-
-    function toggle() {
-        visible = !visible;
-    }
-
-    color: "transparent"
-    WlrLayershell.layer: WlrLayershell.Overlay
-    WlrLayershell.exclusiveZone: -1
-    WlrLayershell.keyboardFocus: {
-        switch (root.keyboardFocus) {
-        case "exclusive":
-            return WlrKeyboardFocus.Exclusive;
-        case "none":
-            return WlrKeyboardFocus.None;
-        default:
-            return WlrKeyboardFocus.OnDemand;
-        }
-    }
-    onVisibleChanged: {
-        if (root.visible) {
-            opened();
-        } else {
-            if (Qt.inputMethod) {
-                Qt.inputMethod.hide();
-                Qt.inputMethod.reset();
-            }
-            dialogClosed();
-        }
-    }
-
-    anchors {
-        top: true
-        left: true
-        right: true
-        bottom: true
-    }
-
-    Rectangle {
-        id: background
-
-        anchors.fill: parent
-        color: "black"
-        opacity: root.showBackground ? (root.visible ? root.backgroundOpacity : 0) : 0
-        visible: root.showBackground
-
-        MouseArea {
-            anchors.fill: parent
-            enabled: root.closeOnBackgroundClick
-            onClicked: (mouse) => {
-                var localPos = mapToItem(contentContainer, mouse.x, mouse.y);
-                if (localPos.x < 0 || localPos.x > contentContainer.width || localPos.y < 0 || localPos.y > contentContainer.height)
-                    root.backgroundClicked();
-
-            }
-        }
-
-        Behavior on opacity {
-            NumberAnimation {
-                duration: root.animationDuration
-                easing.type: root.animationEasing
-            }
-
-        }
-
-    }
-
-    Rectangle {
-        id: contentContainer
-
-        width: root.width
-        height: root.height
-        anchors.centerIn: positioning === "center" ? parent : undefined
-        x: {
-            if (positioning === "top-right")
-                return Math.max(Theme.spacingL, root.screenWidth - width - Theme.spacingL);
-            else if (positioning === "custom")
-                return root.customPosition.x;
-            return 0; // Will be overridden by anchors.centerIn when positioning === "center"
-        }
-        y: {
-            if (positioning === "top-right")
-                return Theme.barHeight + Theme.spacingXS;
-            else if (positioning === "custom")
-                return root.customPosition.y;
-            return 0; // Will be overridden by anchors.centerIn when positioning === "center"
-        }
-        color: root.backgroundColor
-        radius: root.cornerRadius
-        border.color: root.borderColor
-        border.width: root.borderWidth
-        layer.enabled: root.enableShadow
-        opacity: root.visible ? 1 : 0
-        scale: {
-            if (root.animationType === "scale")
-                return root.visible ? 1 : 0.9;
-
-            return 1;
-        }
-        transform: root.animationType === "slide" ? slideTransform : null
-
-        Translate {
-            id: slideTransform
-
-            x: root.visible ? 0 : 15
-            y: root.visible ? 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) {
-                root.visible = false;
-                event.accepted = true;
-            }
-        }
-        onVisibleChanged: {
-            if (visible)
-                Qt.callLater(function() {
-                focusScope.forceActiveFocus();
-            });
-
-        }
-    }
-
-}

Modals/FileBrowser/FileInfo.qml

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

Modals/FileBrowser/KeyboardHints.qml

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

Modals/FileBrowserModal.qml

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

Modals/NetworkInfoModal.qml

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

Modals/NotificationModal.qml

@@ -1,88 +1,99 @@
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
-import Quickshell
 import Quickshell.Io
-import Quickshell.Widgets
 import qs.Common
+import qs.Modals.Common
 import qs.Modules.Notifications.Center
 import qs.Services
 import qs.Widgets
 
 DankModal {
     id: notificationModal
-    
-    width: 500
-    height: 700
-    visible: false
-    keyboardFocus: "ondemand"
-    onBackgroundClicked: hide()
-    onDialogClosed: {
-        notificationModalOpen = false
-        modalKeyboardController.reset()
-    }
-    
-    modalFocusScope.Keys.onPressed: function(event) {
-        modalKeyboardController.handleKey(event)
-    }
-    
-    NotificationKeyboardController {
-        id: modalKeyboardController
-        listView: null
-        isOpen: notificationModal.notificationModalOpen
-        onClose: function() { notificationModal.hide() }
-    }
 
     property bool notificationModalOpen: false
     property var notificationListRef: null
 
-
-
     function show() {
         notificationModalOpen = true
-        visible = true
+        NotificationService.onOverlayOpen()
+        open()
         modalKeyboardController.reset()
-        
         if (modalKeyboardController && notificationListRef) {
             modalKeyboardController.listView = notificationListRef
             modalKeyboardController.rebuildFlatNavigation()
+            
+            Qt.callLater(() => {
+                modalKeyboardController.keyboardNavigationActive = true
+                modalKeyboardController.selectedFlatIndex = 0
+                modalKeyboardController.updateSelectedIdFromIndex()
+                if (notificationListRef) {
+                    notificationListRef.keyboardActive = true
+                    notificationListRef.currentIndex = 0
+                }
+                modalKeyboardController.selectionVersion++
+                modalKeyboardController.ensureVisible()
+            })
         }
     }
 
     function hide() {
         notificationModalOpen = false
-        visible = false
+        NotificationService.onOverlayClose()
+        close()
         modalKeyboardController.reset()
     }
 
     function toggle() {
-        if (notificationModalOpen)
+        if (shouldBeVisible) {
             hide()
-        else
+        } else {
             show()
+        }
     }
 
+    width: 500
+    height: 700
+    visible: false
+    onBackgroundClicked: hide()
+    onOpened: () => {
+        Qt.callLater(() => modalFocusScope.forceActiveFocus());
+    }
+    onShouldBeVisibleChanged: (shouldBeVisible) => {
+        if (!shouldBeVisible) {
+            notificationModalOpen = false
+            modalKeyboardController.reset()
+            NotificationService.onOverlayClose()
+        }
+    }
+    modalFocusScope.Keys.onPressed: (event) => modalKeyboardController.handleKey(event)
+
+    NotificationKeyboardController {
+        id: modalKeyboardController
+
+        listView: null
+        isOpen: notificationModal.notificationModalOpen
+        onClose: () => notificationModal.hide()
+    }
 
     IpcHandler {
-        function open() {
-            notificationModal.show()
-            return "NOTIFICATION_MODAL_OPEN_SUCCESS"
+        function open(): string {
+            notificationModal.show();
+            return "NOTIFICATION_MODAL_OPEN_SUCCESS";
         }
 
-        function close() {
-            notificationModal.hide()
-            return "NOTIFICATION_MODAL_CLOSE_SUCCESS"
+        function close(): string {
+            notificationModal.hide();
+            return "NOTIFICATION_MODAL_CLOSE_SUCCESS";
         }
 
-        function toggle() {
-            notificationModal.toggle()
-            return "NOTIFICATION_MODAL_TOGGLE_SUCCESS"
+        function toggle(): string {
+            notificationModal.toggle();
+            return "NOTIFICATION_MODAL_TOGGLE_SUCCESS";
         }
 
         target: "notifications"
     }
 
-    property Component notificationContent: Component {
+    content: Component {
         Item {
             id: notificationKeyHandler
 
@@ -95,21 +106,22 @@ DankModal {
 
                 NotificationHeader {
                     id: notificationHeader
+
                     keyboardController: modalKeyboardController
                 }
-                
+
                 NotificationSettings {
                     id: notificationSettings
+
                     expanded: notificationHeader.showSettings
                 }
 
                 KeyboardNavigatedNotificationList {
                     id: notificationList
-                    
+
                     width: parent.width
                     height: parent.height - y
                     keyboardController: modalKeyboardController
-                    
                     Component.onCompleted: {
                         notificationModal.notificationListRef = notificationList
                         if (modalKeyboardController) {
@@ -123,6 +135,7 @@ DankModal {
 
             NotificationKeyboardHints {
                 id: keyboardHints
+
                 anchors.bottom: parent.bottom
                 anchors.left: parent.left
                 anchors.right: parent.right
@@ -131,7 +144,7 @@ DankModal {
             }
 
         }
+
     }
 
-    content: notificationContent
-}
+}

Modals/PowerConfirmModal.qml

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

Modals/PowerMenuModal.qml

@@ -0,0 +1,454 @@
+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
+    property rect parentBounds: Qt.rect(0, 0, 0, 0)
+    property var parentScreen: null
+
+    signal powerActionRequested(string action, string title, string message)
+
+    function openCentered() {
+        parentBounds = Qt.rect(0, 0, 0, 0)
+        parentScreen = null
+        backgroundOpacity = 0.5
+        open()
+    }
+
+    function openFromControlCenter(bounds, targetScreen) {
+        parentBounds = bounds
+        parentScreen = targetScreen
+        backgroundOpacity = 0
+        open()
+    }
+
+    function selectOption(action) {
+        close();
+        const actions = {
+            "logout": {
+                "title": I18n.tr("Log Out"),
+                "message": I18n.tr("Are you sure you want to log out?")
+            },
+            "suspend": {
+                "title": I18n.tr("Suspend"),
+                "message": I18n.tr("Are you sure you want to suspend the system?")
+            },
+            "hibernate": {
+                "title": I18n.tr("Hibernate"),
+                "message": I18n.tr("Are you sure you want to hibernate the system?")
+            },
+            "reboot": {
+                "title": I18n.tr("Reboot"),
+                "message": I18n.tr("Are you sure you want to reboot the system?")
+            },
+            "poweroff": {
+                "title": I18n.tr("Power Off"),
+                "message": I18n.tr("Are you sure you want to power off the system?")
+            }
+        }
+        const selected = actions[action]
+        if (selected) {
+            root.powerActionRequested(action, selected.title, selected.message);
+        }
+
+    }
+
+    shouldBeVisible: false
+    width: 320
+    height: contentLoader.item ? contentLoader.item.implicitHeight : 300
+    enableShadow: true
+    screen: parentScreen
+    positioning: parentBounds.width > 0 ? "custom" : "center"
+    customPosition: {
+        if (parentBounds.width > 0) {
+            const centerX = parentBounds.x + (parentBounds.width - width) / 2
+            const centerY = parentBounds.y + (parentBounds.height - height) / 2
+            return Qt.point(centerX, centerY)
+        }
+        return Qt.point(0, 0)
+    }
+    onBackgroundClicked: () => {
+        return close();
+    }
+    onOpened: () => {
+        selectedIndex = 0;
+        Qt.callLater(() => modalFocusScope.forceActiveFocus());
+    }
+    modalFocusScope.Keys.onPressed: (event) => {
+        switch (event.key) {
+        case Qt.Key_Up:
+        case Qt.Key_Backtab:
+            selectedIndex = (selectedIndex - 1 + optionCount) % optionCount;
+            event.accepted = true;
+            break;
+        case Qt.Key_Down:
+        case Qt.Key_Tab:
+            selectedIndex = (selectedIndex + 1) % optionCount;
+            event.accepted = true;
+            break;
+        case Qt.Key_Return:
+        case Qt.Key_Enter:
+            const actions = ["logout", "suspend"];
+            if (SessionService.hibernateSupported) actions.push("hibernate");
+            actions.push("reboot", "poweroff");
+            if (selectedIndex < actions.length) {
+                selectOption(actions[selectedIndex]);
+            }
+            event.accepted = true;
+            break;
+        case Qt.Key_N:
+            if (event.modifiers & Qt.ControlModifier) {
+                selectedIndex = (selectedIndex + 1) % optionCount;
+                event.accepted = true;
+            }
+            break;
+        case Qt.Key_P:
+            if (event.modifiers & Qt.ControlModifier) {
+                selectedIndex = (selectedIndex - 1 + optionCount) % optionCount;
+                event.accepted = true;
+            }
+            break;
+        case Qt.Key_J:
+            if (event.modifiers & Qt.ControlModifier) {
+                selectedIndex = (selectedIndex + 1) % optionCount;
+                event.accepted = true;
+            }
+            break;
+        case Qt.Key_K:
+            if (event.modifiers & Qt.ControlModifier) {
+                selectedIndex = (selectedIndex - 1 + optionCount) % optionCount;
+                event.accepted = true;
+            }
+            break;
+        }
+    }
+
+    content: Component {
+        Item {
+            anchors.fill: parent
+            implicitHeight: mainColumn.implicitHeight + Theme.spacingL * 2
+
+            Column {
+                id: mainColumn
+                anchors.fill: parent
+                anchors.margins: Theme.spacingL
+                spacing: Theme.spacingM
+
+                Row {
+                    width: parent.width
+
+                    StyledText {
+                        text: I18n.tr("Power Options")
+                        font.pixelSize: Theme.fontSizeLarge
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    Item {
+                        width: parent.width - 150
+                        height: 1
+                    }
+
+                    DankActionButton {
+                        iconName: "close"
+                        iconSize: Theme.iconSize - 4
+                        iconColor: Theme.surfaceText
+                        onClicked: () => {
+                            return close();
+                        }
+                    }
+
+                }
+
+                Column {
+                    width: parent.width
+                    spacing: Theme.spacingS
+
+                    Rectangle {
+                        width: parent.width
+                        height: 50
+                        radius: Theme.cornerRadius
+                        color: {
+                            if (selectedIndex === 0) {
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
+                            } else if (logoutArea.containsMouse) {
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08);
+                            } else {
+                                return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08);
+                            }
+                        }
+                        border.color: selectedIndex === 0 ? Theme.primary : "transparent"
+                        border.width: selectedIndex === 0 ? 1 : 0
+
+                        Row {
+                            anchors.left: parent.left
+                            anchors.leftMargin: Theme.spacingM
+                            anchors.verticalCenter: parent.verticalCenter
+                            spacing: Theme.spacingM
+
+                            DankIcon {
+                                name: "logout"
+                                size: Theme.iconSize
+                                color: Theme.surfaceText
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                            StyledText {
+                                text: I18n.tr("Log Out")
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceText
+                                font.weight: Font.Medium
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                        }
+
+                        MouseArea {
+                            id: logoutArea
+
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: () => {
+                                selectedIndex = 0;
+                                selectOption("logout");
+                            }
+                        }
+
+                    }
+
+                    Rectangle {
+                        width: parent.width
+                        height: 50
+                        radius: Theme.cornerRadius
+                        color: {
+                            if (selectedIndex === 1) {
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
+                            } else if (suspendArea.containsMouse) {
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08);
+                            } else {
+                                return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08);
+                            }
+                        }
+                        border.color: selectedIndex === 1 ? Theme.primary : "transparent"
+                        border.width: selectedIndex === 1 ? 1 : 0
+
+                        Row {
+                            anchors.left: parent.left
+                            anchors.leftMargin: Theme.spacingM
+                            anchors.verticalCenter: parent.verticalCenter
+                            spacing: Theme.spacingM
+
+                            DankIcon {
+                                name: "bedtime"
+                                size: Theme.iconSize
+                                color: Theme.surfaceText
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                            StyledText {
+                                text: I18n.tr("Suspend")
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceText
+                                font.weight: Font.Medium
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                        }
+
+                        MouseArea {
+                            id: suspendArea
+
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: () => {
+                                selectedIndex = 1;
+                                selectOption("suspend");
+                            }
+                        }
+
+                    }
+
+                    Rectangle {
+                        width: parent.width
+                        height: 50
+                        radius: Theme.cornerRadius
+                        color: {
+                            if (selectedIndex === 2) {
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
+                            } else if (hibernateArea.containsMouse) {
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08);
+                            } else {
+                                return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08);
+                            }
+                        }
+                        border.color: selectedIndex === 2 ? Theme.primary : "transparent"
+                        border.width: selectedIndex === 2 ? 1 : 0
+                        visible: SessionService.hibernateSupported
+
+                        Row {
+                            anchors.left: parent.left
+                            anchors.leftMargin: Theme.spacingM
+                            anchors.verticalCenter: parent.verticalCenter
+                            spacing: Theme.spacingM
+
+                            DankIcon {
+                                name: "ac_unit"
+                                size: Theme.iconSize
+                                color: Theme.surfaceText
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                            StyledText {
+                                text: I18n.tr("Hibernate")
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceText
+                                font.weight: Font.Medium
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                        }
+
+                        MouseArea {
+                            id: hibernateArea
+
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: () => {
+                                selectedIndex = 2;
+                                selectOption("hibernate");
+                            }
+                        }
+
+                    }
+
+                    Rectangle {
+                        width: parent.width
+                        height: 50
+                        radius: Theme.cornerRadius
+                        color: {
+                            const rebootIndex = SessionService.hibernateSupported ? 3 : 2;
+                            if (selectedIndex === rebootIndex) {
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
+                            } else if (rebootArea.containsMouse) {
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08);
+                            } else {
+                                return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08);
+                            }
+                        }
+                        border.color: selectedIndex === (SessionService.hibernateSupported ? 3 : 2) ? Theme.primary : "transparent"
+                        border.width: selectedIndex === (SessionService.hibernateSupported ? 3 : 2) ? 1 : 0
+
+                        Row {
+                            anchors.left: parent.left
+                            anchors.leftMargin: Theme.spacingM
+                            anchors.verticalCenter: parent.verticalCenter
+                            spacing: Theme.spacingM
+
+                            DankIcon {
+                                name: "restart_alt"
+                                size: Theme.iconSize
+                                color: rebootArea.containsMouse ? Theme.warning : Theme.surfaceText
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                            StyledText {
+                                text: I18n.tr("Reboot")
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: rebootArea.containsMouse ? Theme.warning : Theme.surfaceText
+                                font.weight: Font.Medium
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                        }
+
+                        MouseArea {
+                            id: rebootArea
+
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: () => {
+                                selectedIndex = SessionService.hibernateSupported ? 3 : 2;
+                                selectOption("reboot");
+                            }
+                        }
+
+                    }
+
+                    Rectangle {
+                        width: parent.width
+                        height: 50
+                        radius: Theme.cornerRadius
+                        color: {
+                            const powerOffIndex = SessionService.hibernateSupported ? 4 : 3;
+                            if (selectedIndex === powerOffIndex) {
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
+                            } else if (powerOffArea.containsMouse) {
+                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08);
+                            } else {
+                                return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08);
+                            }
+                        }
+                        border.color: selectedIndex === (SessionService.hibernateSupported ? 4 : 3) ? Theme.primary : "transparent"
+                        border.width: selectedIndex === (SessionService.hibernateSupported ? 4 : 3) ? 1 : 0
+
+                        Row {
+                            anchors.left: parent.left
+                            anchors.leftMargin: Theme.spacingM
+                            anchors.verticalCenter: parent.verticalCenter
+                            spacing: Theme.spacingM
+
+                            DankIcon {
+                                name: "power_settings_new"
+                                size: Theme.iconSize
+                                color: powerOffArea.containsMouse ? Theme.error : Theme.surfaceText
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                            StyledText {
+                                text: I18n.tr("Power Off")
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: powerOffArea.containsMouse ? Theme.error : Theme.surfaceText
+                                font.weight: Font.Medium
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                        }
+
+                        MouseArea {
+                            id: powerOffArea
+
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: () => {
+                                selectedIndex = SessionService.hibernateSupported ? 4 : 3;
+                                selectOption("poweroff");
+                            }
+                        }
+
+                    }
+
+                }
+
+                Item {
+                    height: Theme.spacingS
+                }
+
+            }
+
+        }
+
+    }
+
+}

Modals/ProcessListModal.qml

@@ -1,335 +1,356 @@
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
 import QtQuick.Layouts
-import Quickshell
-import Quickshell.Io
-import Quickshell.Wayland
-import Quickshell.Widgets
 import qs.Common
+import qs.Modals.Common
 import qs.Modules.ProcessList
 import qs.Services
 import qs.Widgets
 
 DankModal {
-  id: processListModal
+    id: processListModal
 
-  property int currentTab: 0
-  property var tabNames: ["Processes", "Performance", "System"]
+    property int currentTab: 0
+    property var tabNames: ["Processes", "Performance", "System"]
 
-  function show() {
-    if (!DgopService.dgopAvailable) {
-      console.warn("ProcessListModal: dgop is not available")
-      return
-    }
-    processListModal.visible = true
-    UserInfoService.getUptime()
-  }
-
-  function hide() {
-    processListModal.visible = false
-    if (processContextMenu.visible)
-      processContextMenu.close()
-  }
-
-  function toggle() {
-    if (!DgopService.dgopAvailable) {
-      console.warn("ProcessListModal: dgop is not available")
-      return
-    }
-    if (processListModal.visible)
-      hide()
-    else
-      show()
-  }
-
-  width: 900
-  height: 680
-  visible: false
-  keyboardFocus: "exclusive"
-  backgroundColor: Theme.popupBackground()
-  cornerRadius: Theme.cornerRadius
-  enableShadow: true
-  onBackgroundClicked: 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: function (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
+    function show() {
+        if (!DgopService.dgopAvailable) {
+            console.warn("ProcessListModal: dgop is not available");
+            return ;
         }
-      }
+        open();
+        UserInfoService.getUptime();
+    }
 
-      // 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
-            hoverColor: Theme.errorHover
-            onClicked: processListModal.hide()
-            Layout.alignment: Qt.AlignVCenter
-          }
+    function hide() {
+        close();
+        if (processContextMenu.visible) {
+            processContextMenu.close();
         }
 
-        Rectangle {
-          Layout.fillWidth: true
-          height: 52
-          color: Theme.surfaceSelected
-          radius: Theme.cornerRadius
-          border.color: Theme.outlineLight
-          border.width: 1
+    }
 
-          Row {
+    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
-            anchors.margins: 4
-            spacing: 2
+            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;
+                }
+            }
 
-            Repeater {
-              model: tabNames
-
-              Rectangle {
-                width: (parent.width - (tabNames.length - 1) * 2) / tabNames.length
-                height: 44
+            // Show error message when dgop is not available
+            Rectangle {
+                anchors.centerIn: parent
+                width: 400
+                height: 200
                 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
+                color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.1)
+                border.color: Theme.error
+                border.width: 2
+                visible: !DgopService.dgopAvailable
 
-                Row {
-                  anchors.centerIn: parent
-                  spacing: Theme.spacingXS
+                Column {
+                    anchors.centerIn: parent
+                    spacing: Theme.spacingL
 
-                  DankIcon {
-                    name: {
-                      switch (index) {
-                      case 0:
-                        return "list_alt"
-                      case 1:
-                        return "analytics"
-                      case 2:
-                        return "settings"
-                      default:
-                        return "tab"
-                      }
+                    DankIcon {
+                        name: "error"
+                        size: 48
+                        color: Theme.error
+                        anchors.horizontalCenter: parent.horizontalCenter
                     }
-                    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: I18n.tr("System Monitor Unavailable")
+                        font.pixelSize: Theme.fontSizeLarge
+                        font.weight: Font.Bold
+                        color: Theme.error
+                        anchors.horizontalCenter: parent.horizontalCenter
                     }
-                  }
 
-                  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
-                      }
+                    StyledText {
+                        text: I18n.tr("The 'dgop' tool is required for system monitoring.\nPlease install dgop to use this feature.")
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: Theme.surfaceText
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        horizontalAlignment: Text.AlignHCenter
+                        wrapMode: Text.WordWrap
                     }
-                  }
+
                 }
 
-                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
-                  }
-                }
-              }
             }
-          }
+
+            ColumnLayout {
+                anchors.fill: parent
+                anchors.margins: Theme.spacingL
+                spacing: Theme.spacingL
+                visible: DgopService.dgopAvailable
+
+                RowLayout {
+                    Layout.fillWidth: true
+                    height: 40
+
+                    StyledText {
+                        text: I18n.tr("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
+                            }
+
+                        }
+
+                    }
+
+                }
+
+            }
+
         }
 
-        Rectangle {
-          Layout.fillWidth: true
-          Layout.fillHeight: true
-          radius: Theme.cornerRadius
-          color: Theme.surfaceLight
-          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,309 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: powerTab
+
+    DankFlickable {
+        anchors.fill: parent
+        anchors.topMargin: Theme.spacingL
+        clip: true
+        contentHeight: mainColumn.height
+        contentWidth: width
+
+        Column {
+            id: mainColumn
+            width: parent.width
+            spacing: Theme.spacingXL
+
+            StyledText {
+                text: I18n.tr("Battery not detected - only AC power settings available")
+                font.pixelSize: Theme.fontSizeMedium
+                color: Theme.surfaceVariantText
+                visible: !BatteryService.batteryAvailable
+            }
+
+            StyledRect {
+                width: parent.width
+                height: lockScreenSection.implicitHeight + Theme.spacingL * 2
+                radius: Theme.cornerRadius
+                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                border.width: 0
+
+                Column {
+                    id: lockScreenSection
+                    anchors.fill: parent
+                    anchors.margins: Theme.spacingL
+                    spacing: Theme.spacingM
+
+                    Row {
+                        width: parent.width
+                        spacing: Theme.spacingM
+
+                        DankIcon {
+                            name: "lock"
+                            size: Theme.iconSize
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: I18n.tr("Lock Screen")
+                            font.pixelSize: Theme.fontSizeLarge
+                            font.weight: Font.Medium
+                            color: Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+
+                    DankToggle {
+                        width: parent.width
+                        text: I18n.tr("Show Power Actions")
+                        description: "Show power, restart, and logout buttons on the lock screen"
+                        checked: SettingsData.lockScreenShowPowerActions
+                        onToggled: checked => SettingsData.setLockScreenShowPowerActions(checked)
+                    }
+
+                    StyledText {
+                        text: I18n.tr("loginctl not available - lock integration requires DMS socket connection")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.warning
+                        visible: !SessionService.loginctlAvailable
+                        width: parent.width
+                        wrapMode: Text.Wrap
+                    }
+
+                    DankToggle {
+                        width: parent.width
+                        text: I18n.tr("Enable loginctl lock integration")
+                        description: "Bind lock screen to dbus signals from loginctl. Disable if using an external lock screen."
+                        checked: SessionService.loginctlAvailable && SessionData.loginctlLockIntegration
+                        enabled: SessionService.loginctlAvailable
+                        onToggled: checked => {
+                            if (SessionService.loginctlAvailable) {
+                                SessionData.setLoginctlLockIntegration(checked)
+                            }
+                        }
+                    }
+
+                    DankToggle {
+                        width: parent.width
+                        text: I18n.tr("Lock before suspend")
+                        description: "Automatically lock the screen when the system prepares to suspend"
+                        checked: SessionData.lockBeforeSuspend
+                        visible: SessionService.loginctlAvailable && SessionData.loginctlLockIntegration
+                        onToggled: checked => SessionData.setLockBeforeSuspend(checked)
+                    }
+                }
+            }
+
+            StyledRect {
+                width: parent.width
+                height: timeoutSection.implicitHeight + Theme.spacingL * 2
+                radius: Theme.cornerRadius
+                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                border.width: 0
+
+                Column {
+                    id: timeoutSection
+                    anchors.fill: parent
+                    anchors.margins: Theme.spacingL
+                    spacing: Theme.spacingM
+
+                    Row {
+                        width: parent.width
+                        spacing: Theme.spacingM
+
+                        DankIcon {
+                            name: "schedule"
+                            size: Theme.iconSize
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: I18n.tr("Idle Settings")
+                            font.pixelSize: Theme.fontSizeLarge
+                            font.weight: Font.Medium
+                            color: Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        Item {
+                            width: Math.max(0, parent.width - parent.children[0].width - parent.children[1].width - powerCategory.width - Theme.spacingM * 3)
+                            height: parent.height
+                        }
+
+                        DankButtonGroup {
+                            id: powerCategory
+                            anchors.verticalCenter: parent.verticalCenter
+                            visible: BatteryService.batteryAvailable
+                            model: ["AC Power", "Battery"]
+                            currentIndex: 0
+                            selectionMode: "single"
+                            checkEnabled: false
+                        }
+                    }
+
+                    DankDropdown {
+                        id: lockDropdown
+                        property var timeoutOptions: ["Never", "1 minute", "2 minutes", "3 minutes", "5 minutes", "10 minutes", "15 minutes", "20 minutes", "30 minutes", "1 hour", "1 hour 30 minutes", "2 hours", "3 hours"]
+                        property var timeoutValues: [0, 60, 120, 180, 300, 600, 900, 1200, 1800, 3600, 5400, 7200, 10800]
+
+                        text: I18n.tr("Automatically lock after")
+                        options: timeoutOptions
+
+                        Connections {
+                            target: powerCategory
+                            function onCurrentIndexChanged() {
+                                const currentTimeout = powerCategory.currentIndex === 0 ? 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]
+
+                        text: I18n.tr("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]
+
+                        text: I18n.tr("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]
+
+                        text: I18n.tr("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)
+                                }
+                            }
+                        }
+                    }
+
+                    StyledText {
+                        text: I18n.tr("Idle monitoring not supported - requires newer Quickshell version")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.error
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        visible: !IdleService.idleMonitorAvailable
+                    }
+                }
+            }
+
+        }
+    }
+}

Modals/Settings/ProfileSection.qml

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

Modals/Settings/SettingsContent.qml

@@ -0,0 +1,174 @@
+import QtQuick
+import qs.Common
+import qs.Modules.Settings
+
+FocusScope {
+    id: root
+
+    property int currentIndex: 0
+    property var parentModal: null
+    focus: true
+
+    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: timeWeatherLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 1
+            visible: active
+            asynchronous: true
+
+            sourceComponent: TimeWeatherTab {
+            }
+
+        }
+
+        Loader {
+            id: topBarLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 2
+            visible: active
+            asynchronous: true
+
+            sourceComponent: DankBarTab {
+                parentModal: root.parentModal
+            }
+
+        }
+
+        Loader {
+            id: widgetsLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 3
+            visible: active
+            asynchronous: true
+
+            sourceComponent: WidgetTweaksTab {
+            }
+
+        }
+
+        Loader {
+            id: dockLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 4
+            visible: active
+            asynchronous: true
+
+            sourceComponent: Component {
+                DockTab {
+                }
+
+            }
+
+        }
+
+        Loader {
+            id: displaysLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 5
+            visible: active
+            asynchronous: true
+
+            sourceComponent: DisplaysTab {
+            }
+
+        }
+
+        Loader {
+            id: launcherLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 6
+            visible: active
+            asynchronous: true
+
+            sourceComponent: LauncherTab {
+            }
+
+        }
+
+        Loader {
+            id: themeColorsLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 7
+            visible: active
+            asynchronous: true
+
+            sourceComponent: ThemeColorsTab {
+            }
+
+        }
+
+        Loader {
+            id: powerLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 8
+            visible: active
+            asynchronous: true
+
+            sourceComponent: PowerSettings {
+            }
+
+        }
+
+        Loader {
+            id: pluginsLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 9
+            visible: active
+            asynchronous: true
+
+            sourceComponent: PluginsTab {
+                parentModal: root.parentModal
+            }
+
+        }
+
+        Loader {
+            id: aboutLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 10
+            visible: active
+            asynchronous: true
+
+            sourceComponent: AboutTab {
+            }
+
+        }
+
+    }
+
+}

Modals/Settings/SettingsModal.qml

@@ -0,0 +1,195 @@
+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: 800
+    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
+        parentModal: settingsModal
+        browserTitle: "Select Profile Image"
+        browserIcon: "person"
+        browserType: "profile"
+        fileExtensions: ["*.jpg", "*.jpeg", "*.png", "*.bmp", "*.gif", "*.webp"]
+        onFileSelected: (path) => {
+            PortalService.setProfileImage(path);
+            close();
+        }
+        onDialogClosed: () => {
+            allowStacking = true;
+        }
+    }
+
+    FileBrowserModal {
+        id: wallpaperBrowser
+
+        allowStacking: true
+        parentModal: settingsModal
+        browserTitle: "Select Wallpaper"
+        browserIcon: "wallpaper"
+        browserType: "wallpaper"
+        fileExtensions: ["*.jpg", "*.jpeg", "*.png", "*.bmp", "*.gif", "*.webp"]
+        onFileSelected: (path) => {
+            SessionData.setWallpaper(path);
+            close();
+        }
+        onDialogClosed: () => {
+            allowStacking = true;
+        }
+    }
+
+    settingsContent: Component {
+        FocusScope {
+            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: I18n.tr("Settings")
+                            font.pixelSize: Theme.fontSizeXLarge
+                            color: Theme.surfaceText
+                            font.weight: Font.Medium
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                    }
+
+                    DankActionButton {
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        circular: false
+                        iconName: "close"
+                        iconSize: Theme.iconSize - 4
+                        iconColor: Theme.surfaceText
+                        onClicked: () => {
+                            return settingsModal.hide();
+                        }
+                    }
+
+                }
+
+                Row {
+                    width: parent.width
+                    height: parent.height - 35
+                    spacing: 0
+
+                    SettingsSidebar {
+                        id: sidebar
+
+                        parentModal: settingsModal
+                        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": I18n.tr("Personalization"),
+        "icon": "person"
+    }, {
+        "text": I18n.tr("Time & Weather"),
+        "icon": "schedule"
+    }, {
+        "text": I18n.tr("Dank Bar"),
+        "icon": "toolbar"
+    }, {
+        "text": I18n.tr("Widgets"),
+        "icon": "widgets"
+    }, {
+        "text": I18n.tr("Dock"),
+        "icon": "dock_to_bottom"
+    }, {
+        "text": I18n.tr("Displays"),
+        "icon": "monitor"
+    }, {
+        "text": I18n.tr("Launcher"),
+        "icon": "apps"
+    }, {
+        "text": I18n.tr("Theme & Colors"),
+        "icon": "palette"
+    }, {
+        "text": I18n.tr("Idle & Lock Screen"),
+        "icon": "lock"
+    }, {
+        "text": I18n.tr("Plugins"),
+        "icon": "extension"
+    }, {
+        "text": I18n.tr("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.primary : tabMouseArea.containsMouse ? Theme.surfaceHover : "transparent"
+
+                Row {
+                    anchors.left: parent.left
+                    anchors.leftMargin: Theme.spacingM
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: Theme.spacingM
+
+                    DankIcon {
+                        name: modelData.icon || ""
+                        size: Theme.iconSize - 2
+                        color: parent.parent.isActive ? Theme.primaryText : Theme.surfaceText
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    StyledText {
+                        text: modelData.text || ""
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: parent.parent.isActive ? Theme.primaryText : Theme.surfaceText
+                        font.weight: parent.parent.isActive ? Font.Medium : Font.Normal
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                }
+
+                MouseArea {
+                    id: tabMouseArea
+
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: () => {
+                        sidebarContainer.currentIndex = index;
+                    }
+                }
+
+                Behavior on color {
+                    ColorAnimation {
+                        duration: Theme.shortDuration
+                        easing.type: Theme.standardEasing
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}

Modals/SettingsModal.qml

@@ -1,205 +0,0 @@
-pragma ComponentBehavior
-
-import Quickshell
-import Quickshell.Io
-import QtQuick
-import QtQuick.Controls
-import qs.Common
-import qs.Modules.Settings
-import qs.Widgets
-
-DankModal {
-  id: settingsModal
-
-  signal closingModal
-
-  function show() {
-    settingsModal.visible = true
-  }
-
-  function hide() {
-    settingsModal.visible = false
-  }
-
-  function toggle() {
-    if (settingsModal.visible)
-      hide()
-    else
-      show()
-  }
-
-  width: 750
-  height: 750
-  visible: false
-  keyboardFocus: "ondemand"
-  onBackgroundClicked: hide()
-
-  property Component settingsContent: Component {
-    Item {
-      anchors.fill: parent
-      focus: true
-      Keys.onPressed: function (event) {
-        if (event.key === Qt.Key_Escape) {
-          settingsModal.hide()
-          event.accepted = true
-        }
-      }
-
-      Column {
-        anchors.fill: parent
-        anchors.margins: Theme.spacingM
-        spacing: Theme.spacingS
-
-        Row {
-          width: parent.width
-          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
-          }
-
-          Item {
-            width: parent.width - 175 // Spacer to push close button to the right
-            height: 1
-          }
-
-          DankActionButton {
-            circular: false
-            iconName: "close"
-            iconSize: Theme.iconSize - 4
-            iconColor: Theme.surfaceText
-            hoverColor: Theme.errorHover
-            onClicked: settingsModal.hide()
-          }
-        }
-
-        Column {
-          width: parent.width
-          height: parent.height - 50
-          spacing: 0
-
-          DankTabBar {
-            id: settingsTabBar
-
-            width: parent.width
-
-            model: [{
-                "text": "Personalization",
-                "icon": "person"
-              }, {
-                "text": "Time & Weather",
-                "icon": "schedule"
-              }, {
-                "text": "Widgets",
-                "icon": "widgets"
-              }, {
-                "text": "Launcher",
-                "icon": "apps"
-              }, {
-                "text": "Appearance",
-                "icon": "palette"
-              }]
-          }
-
-          Item {
-            width: parent.width
-            height: parent.height - settingsTabBar.height
-
-            Rectangle {
-              anchors.fill: parent
-              anchors.margins: Theme.spacingL
-              color: "transparent"
-
-              Loader {
-                id: personalizationLoader
-                anchors.fill: parent
-                active: settingsTabBar.currentIndex === 0
-                visible: active
-                asynchronous: true
-                sourceComponent: Component {
-                  PersonalizationTab {}
-                }
-              }
-
-              Loader {
-                id: timeWeatherLoader
-                anchors.fill: parent
-                active: settingsTabBar.currentIndex === 1
-                visible: active
-                asynchronous: true
-                sourceComponent: Component {
-                  TimeWeatherTab {}
-                }
-              }
-
-              Loader {
-                id: widgetsLoader
-                anchors.fill: parent
-                active: settingsTabBar.currentIndex === 2
-                visible: active
-                asynchronous: true
-                sourceComponent: Component {
-                  WidgetsTab {}
-                }
-              }
-
-              Loader {
-                id: launcherLoader
-                anchors.fill: parent
-                active: settingsTabBar.currentIndex === 3
-                visible: active
-                asynchronous: true
-                sourceComponent: Component {
-                  LauncherTab {}
-                }
-              }
-
-              Loader {
-                id: appearanceLoader
-                anchors.fill: parent
-                active: settingsTabBar.currentIndex === 4
-                visible: active
-                asynchronous: true
-                sourceComponent: Component {
-                  AppearanceTab {}
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  content: settingsContent
-
-  IpcHandler {
-    function open() {
-      settingsModal.show()
-      return "SETTINGS_OPEN_SUCCESS"
-    }
-
-    function close() {
-      settingsModal.hide()
-      return "SETTINGS_CLOSE_SUCCESS"
-    }
-
-    function toggle() {
-      settingsModal.toggle()
-      return "SETTINGS_TOGGLE_SUCCESS"
-    }
-
-    target: "settings"
-  }
-}

Modals/Spotlight/SpotlightContent.qml

@@ -0,0 +1,244 @@
+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
+
+    function resetScroll() {
+        resultsView.resetScroll()
+    }
+
+    anchors.fill: parent
+    focus: true
+    clip: false
+    Keys.onPressed: event => {
+                        if (event.key === Qt.Key_Escape) {
+                            if (parentModal)
+                            parentModal.hide()
+
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Down) {
+                            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_J && event.modifiers & Qt.ControlModifier) {
+                            appLauncher.selectNext()
+                            event.accepted = true
+                        } else if (event.key == Qt.Key_K && event.modifiers & Qt.ControlModifier) {
+                            appLauncher.selectPrevious()
+                            event.accepted = true
+                        } else if (event.key == Qt.Key_L && event.modifiers & Qt.ControlModifier && appLauncher.viewMode === "grid") {
+                            appLauncher.selectNextInRow()
+                            event.accepted = true
+                        } else if (event.key == Qt.Key_H && event.modifiers & Qt.ControlModifier && appLauncher.viewMode === "grid") {
+                            appLauncher.selectPreviousInRow()
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Tab) {
+                            if (appLauncher.viewMode === "grid") {
+                                appLauncher.selectNextInRow()
+                            } else {
+                                appLauncher.selectNext()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Backtab) {
+                            if (appLauncher.viewMode === "grid") {
+                                appLauncher.selectPreviousInRow()
+                            } else {
+                                appLauncher.selectPrevious()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) {
+                            if (appLauncher.viewMode === "grid") {
+                                appLauncher.selectNextInRow()
+                            } else {
+                                appLauncher.selectNext()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_P && event.modifiers & Qt.ControlModifier) {
+                            if (appLauncher.viewMode === "grid") {
+                                appLauncher.selectPreviousInRow()
+                            } else {
+                                appLauncher.selectPrevious()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
+                            appLauncher.launchSelected()
+                            event.accepted = true
+                        }
+                    }
+
+    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.spacingM
+        spacing: Theme.spacingM
+        clip: false
+
+        Row {
+            width: parent.width
+            spacing: Theme.spacingM
+            leftPadding: Theme.spacingS
+
+            DankTextField {
+                id: searchField
+
+                width: parent.width - 80 - Theme.spacingL
+                height: 56
+                cornerRadius: Theme.cornerRadius
+                backgroundColor: Theme.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: appLauncher.viewMode !== "list"
+                ignoreTabKeys: 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_Tab || event.key === Qt.Key_Backtab || ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && text.length === 0)) {
+                                        event.accepted = false
+                                    }
+                                }
+            }
+
+            Row {
+                spacing: Theme.spacingXS
+                visible: appLauncher.model.count > 0
+                anchors.verticalCenter: parent.verticalCenter
+
+                Rectangle {
+                    width: 36
+                    height: 36
+                    radius: Theme.cornerRadius
+                    color: appLauncher.viewMode === "list" ? Theme.primaryHover : listViewArea.containsMouse ? Theme.surfaceHover : "transparent"
+
+                    DankIcon {
+                        anchors.centerIn: parent
+                        name: "view_list"
+                        size: 18
+                        color: appLauncher.viewMode === "list" ? Theme.primary : Theme.surfaceText
+                    }
+
+                    MouseArea {
+                        id: listViewArea
+
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: () => {
+                                       appLauncher.setViewMode("list")
+                                   }
+                    }
+                }
+
+                Rectangle {
+                    width: 36
+                    height: 36
+                    radius: Theme.cornerRadius
+                    color: appLauncher.viewMode === "grid" ? Theme.primaryHover : gridViewArea.containsMouse ? Theme.surfaceHover : "transparent"
+
+                    DankIcon {
+                        anchors.centerIn: parent
+                        name: "grid_view"
+                        size: 18
+                        color: appLauncher.viewMode === "grid" ? Theme.primary : Theme.surfaceText
+                    }
+
+                    MouseArea {
+                        id: gridViewArea
+
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: () => {
+                                       appLauncher.setViewMode("grid")
+                                   }
+                    }
+                }
+            }
+        }
+
+        SpotlightResults {
+            id: resultsView
+            appLauncher: spotlightKeyHandler.appLauncher
+            contextMenu: contextMenu
+        }
+    }
+
+    SpotlightContextMenu {
+        id: contextMenu
+
+        appLauncher: spotlightKeyHandler.appLauncher
+        parentHandler: spotlightKeyHandler
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        visible: contextMenu.visible
+        z: 999
+        onClicked: () => {
+                       contextMenu.hide()
+                   }
+
+        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,341 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Widgets
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Popup {
+    id: contextMenu
+
+    property var currentApp: null
+    property var appLauncher: null
+    property var parentHandler: null
+
+    function show(x, y, app) {
+        currentApp = app
+        contextMenu.x = x + 4
+        contextMenu.y = y + 4
+        contextMenu.open()
+    }
+
+    function hide() {
+        contextMenu.close()
+    }
+
+    width: Math.max(180, menuColumn.implicitWidth + Theme.spacingS * 2)
+    height: menuColumn.implicitHeight + Theme.spacingS * 2
+    padding: 0
+    closePolicy: Popup.CloseOnPressOutside
+    modal: false
+    dim: false
+
+    background: Rectangle {
+        radius: Theme.cornerRadius
+        color: Theme.popupBackground()
+        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+        border.width: 1
+
+        Rectangle {
+            anchors.fill: parent
+            anchors.topMargin: 4
+            anchors.leftMargin: 2
+            anchors.rightMargin: -2
+            anchors.bottomMargin: -4
+            radius: parent.radius
+            color: Qt.rgba(0, 0, 0, 0.15)
+            z: -1
+        }
+    }
+
+    enter: Transition {
+        NumberAnimation {
+            property: "opacity"
+            from: 0
+            to: 1
+            duration: Theme.shortDuration
+            easing.type: Theme.emphasizedEasing
+        }
+    }
+
+    exit: Transition {
+        NumberAnimation {
+            property: "opacity"
+            from: 1
+            to: 0
+            duration: Theme.shortDuration
+            easing.type: Theme.emphasizedEasing
+        }
+    }
+
+    Column {
+        id: menuColumn
+
+        anchors.fill: parent
+        anchors.margins: Theme.spacingS
+        spacing: 1
+
+        Rectangle {
+            implicitWidth: pinRow.implicitWidth + Theme.spacingS * 2
+            width: implicitWidth
+            height: 32
+            radius: Theme.cornerRadius
+            color: pinMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+            Row {
+                id: pinRow
+                anchors.left: parent.left
+                anchors.leftMargin: Theme.spacingS
+                anchors.verticalCenter: parent.verticalCenter
+                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 I18n.tr("Pin to Dock")
+
+                        const appId = contextMenu.currentApp.desktopEntry.id || contextMenu.currentApp.desktopEntry.execString || ""
+                        return SessionData.isPinnedApp(appId) ? I18n.tr("Unpin from Dock") : I18n.tr("Pin to Dock")
+                    }
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.surfaceText
+                    font.weight: Font.Normal
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
+
+            MouseArea {
+                id: pinMouseArea
+
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: () => {
+                               if (!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.hide()
+                           }
+            }
+        }
+
+        Rectangle {
+            width: parent.width - Theme.spacingS * 2
+            height: 5
+            anchors.horizontalCenter: parent.horizontalCenter
+            color: "transparent"
+
+            Rectangle {
+                anchors.centerIn: parent
+                width: parent.width
+                height: 1
+                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+            }
+        }
+
+        Repeater {
+            model: contextMenu.currentApp && contextMenu.currentApp.desktopEntry && contextMenu.currentApp.desktopEntry.actions ? contextMenu.currentApp.desktopEntry.actions : []
+
+            Rectangle {
+                implicitWidth: actionRow.implicitWidth + Theme.spacingS * 2
+                width: implicitWidth
+                height: 32
+                radius: Theme.cornerRadius
+                color: actionMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+                Row {
+                    id: actionRow
+                    anchors.left: parent.left
+                    anchors.leftMargin: Theme.spacingS
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: Theme.spacingS
+
+                    Item {
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: Theme.iconSize - 2
+                        height: Theme.iconSize - 2
+                        visible: modelData.icon && modelData.icon !== ""
+
+                        IconImage {
+                            anchors.fill: parent
+                            source: modelData.icon ? Quickshell.iconPath(modelData.icon, true) : ""
+                            smooth: true
+                            asynchronous: true
+                            visible: status === Image.Ready
+                        }
+                    }
+
+                    StyledText {
+                        text: modelData.name || ""
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceText
+                        font.weight: Font.Normal
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+                }
+
+                MouseArea {
+                    id: actionMouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        if (modelData && contextMenu.currentApp && contextMenu.currentApp.desktopEntry) {
+                            SessionService.launchDesktopAction(contextMenu.currentApp.desktopEntry, modelData)
+                            if (appLauncher) {
+                                appLauncher.appLaunched(contextMenu.currentApp)
+                            }
+                        }
+                        contextMenu.hide()
+                    }
+                }
+            }
+        }
+
+        Rectangle {
+            visible: contextMenu.currentApp && contextMenu.currentApp.desktopEntry && contextMenu.currentApp.desktopEntry.actions && contextMenu.currentApp.desktopEntry.actions.length > 0
+            width: parent.width - Theme.spacingS * 2
+            height: 5
+            anchors.horizontalCenter: parent.horizontalCenter
+            color: "transparent"
+
+            Rectangle {
+                anchors.centerIn: parent
+                width: parent.width
+                height: 1
+                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+            }
+        }
+
+        Rectangle {
+            implicitWidth: launchRow.implicitWidth + Theme.spacingS * 2
+            width: implicitWidth
+            height: 32
+            radius: Theme.cornerRadius
+            color: launchMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+            Row {
+                id: launchRow
+                anchors.left: parent.left
+                anchors.leftMargin: Theme.spacingS
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: Theme.spacingS
+
+                DankIcon {
+                    name: "launch"
+                    size: Theme.iconSize - 2
+                    color: Theme.surfaceText
+                    opacity: 0.7
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StyledText {
+                    text: I18n.tr("Launch")
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.surfaceText
+                    font.weight: Font.Normal
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
+
+            MouseArea {
+                id: launchMouseArea
+
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: () => {
+                               if (contextMenu.currentApp && appLauncher)
+                               appLauncher.launchApp(contextMenu.currentApp)
+
+                               contextMenu.hide()
+                           }
+            }
+        }
+
+        Rectangle {
+            visible: SessionService.hasPrimeRun
+            width: parent.width - Theme.spacingS * 2
+            height: 5
+            anchors.horizontalCenter: parent.horizontalCenter
+            color: "transparent"
+
+            Rectangle {
+                anchors.centerIn: parent
+                width: parent.width
+                height: 1
+                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+            }
+        }
+
+        Rectangle {
+            visible: SessionService.hasPrimeRun
+            implicitWidth: primeRunRow.implicitWidth + Theme.spacingS * 2
+            width: implicitWidth
+            height: 32
+            radius: Theme.cornerRadius
+            color: primeRunMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+            Row {
+                id: primeRunRow
+                anchors.left: parent.left
+                anchors.leftMargin: Theme.spacingS
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: Theme.spacingS
+
+                DankIcon {
+                    name: "memory"
+                    size: Theme.iconSize - 2
+                    color: Theme.surfaceText
+                    opacity: 0.7
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StyledText {
+                    text: I18n.tr("Launch on dGPU")
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.surfaceText
+                    font.weight: Font.Normal
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
+
+            MouseArea {
+                id: primeRunMouseArea
+
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: () => {
+                               if (contextMenu.currentApp && contextMenu.currentApp.desktopEntry) {
+                                   SessionService.launchDesktopEntry(contextMenu.currentApp.desktopEntry, true)
+                                   if (appLauncher) {
+                                       appLauncher.appLaunched(contextMenu.currentApp)
+                                   }
+                               }
+                               contextMenu.hide()
+                           }
+            }
+        }
+    }
+}

Modals/Spotlight/SpotlightModal.qml

@@ -0,0 +1,118 @@
+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()
+
+        Qt.callLater(() => {
+            if (contentLoader.item && contentLoader.item.searchField) {
+                contentLoader.item.searchField.forceActiveFocus()
+            }
+        })
+    }
+
+    function hide() {
+        spotlightOpen = false
+        close()
+    }
+
+    onDialogClosed: {
+        if (contentLoader.item) {
+            if (contentLoader.item.appLauncher) {
+                contentLoader.item.appLauncher.searchQuery = ""
+                contentLoader.item.appLauncher.selectedIndex = 0
+                contentLoader.item.appLauncher.setCategory(I18n.tr("All"))
+            }
+            if (contentLoader.item.resetScroll) {
+                contentLoader.item.resetScroll()
+            }
+            if (contentLoader.item.searchField) {
+                contentLoader.item.searchField.text = ""
+            }
+        }
+    }
+
+    function toggle() {
+        if (spotlightOpen) {
+            hide()
+        } else {
+            show()
+        }
+    }
+
+    shouldBeVisible: spotlightOpen
+    width: 550
+    height: 700
+    backgroundColor: Theme.popupBackground()
+    cornerRadius: Theme.cornerRadius
+    borderColor: Theme.outlineMedium
+    borderWidth: 1
+    enableShadow: true
+    keepContentLoaded: true
+    onVisibleChanged: () => {
+                          if (visible && !spotlightOpen) {
+                              show()
+                          }
+                          if (visible && contentLoader.item) {
+                              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,326 @@
+import QtQuick
+import Quickshell
+import Quickshell.Widgets
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: resultsContainer
+
+    property var appLauncher: null
+    property var contextMenu: null
+
+    function resetScroll() {
+        resultsList.contentY = 0
+        resultsGrid.contentY = 0
+    }
+
+    width: parent.width
+    height: parent.height - y
+    radius: Theme.cornerRadius
+    color: "transparent"
+    clip: true
+
+    DankListView {
+        id: resultsList
+
+        property int itemHeight: 60
+        property int iconSize: 40
+        property bool showDescription: true
+        property int itemSpacing: Theme.spacingS
+        property bool hoverUpdatesSelection: false
+        property bool keyboardNavigationActive: appLauncher ? appLauncher.keyboardNavigationActive : false
+
+        signal keyboardNavigationReset
+        signal itemClicked(int index, var modelData)
+        signal itemRightClicked(int index, var modelData, real mouseX, real mouseY)
+
+        function ensureVisible(index) {
+            if (index < 0 || index >= count)
+                return
+
+            const itemY = index * (itemHeight + itemSpacing)
+            const itemBottom = itemY + itemHeight
+            if (itemY < contentY)
+                contentY = itemY
+            else if (itemBottom > contentY + height)
+                contentY = itemBottom - height
+        }
+
+        anchors.fill: parent
+        anchors.margins: Theme.spacingS
+        visible: appLauncher && appLauncher.viewMode === "list"
+        model: appLauncher ? appLauncher.model : null
+        currentIndex: appLauncher ? appLauncher.selectedIndex : -1
+        clip: true
+        spacing: itemSpacing
+        focus: true
+        interactive: true
+        cacheBuffer: Math.max(0, Math.min(height * 2, 1000))
+        reuseItems: true
+        onCurrentIndexChanged: {
+            if (keyboardNavigationActive)
+                ensureVisible(currentIndex)
+        }
+        onItemClicked: (index, modelData) => {
+                           if (appLauncher)
+                           appLauncher.launchApp(modelData)
+                       }
+        onItemRightClicked: (index, modelData, mouseX, mouseY) => {
+                                if (contextMenu)
+                                contextMenu.show(mouseX, mouseY, modelData)
+                            }
+        onKeyboardNavigationReset: () => {
+                                       if (appLauncher)
+                                       appLauncher.keyboardNavigationActive = false
+                                   }
+
+        delegate: Rectangle {
+            width: ListView.view.width
+            height: resultsList.itemHeight
+            radius: Theme.cornerRadius
+            color: ListView.isCurrentItem ? Theme.primaryPressed : listMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceContainerHigh
+
+            Row {
+                anchors.fill: parent
+                anchors.margins: Theme.spacingM
+                spacing: Theme.spacingL
+
+                Item {
+                    width: resultsList.iconSize
+                    height: resultsList.iconSize
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    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 globalPos = mapToItem(null, mouse.x, mouse.y)
+                                   const modalPos = resultsContainer.parent.mapFromItem(null, globalPos.x, globalPos.y)
+                                   resultsList.itemRightClicked(index, model, modalPos.x, modalPos.y)
+                               }
+                           }
+            }
+        }
+    }
+
+    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 : Theme.surfaceContainerHigh
+
+            Column {
+                anchors.centerIn: parent
+                spacing: Theme.spacingS
+
+                Item {
+                    property int iconSize: Math.min(resultsGrid.maxIconSize, Math.max(resultsGrid.minIconSize, resultsGrid.cellWidth * resultsGrid.iconSizeRatio))
+
+                    width: iconSize
+                    height: iconSize
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    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 globalPos = mapToItem(null, mouse.x, mouse.y)
+                                   const modalPos = resultsContainer.parent.mapFromItem(null, globalPos.x, globalPos.y)
+                                   resultsGrid.itemRightClicked(index, model, modalPos.x, modalPos.y)
+                               }
+                           }
+            }
+        }
+    }
+}

Modals/SpotlightModal.qml

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

Modals/WifiPasswordModal.qml

@@ -1,270 +1,368 @@
 import QtQuick
-import QtQuick.Controls
 import qs.Common
+import qs.Modals.Common
 import qs.Services
 import qs.Widgets
 
 DankModal {
-  id: root
+    id: root
 
-  property bool wifiPasswordModalVisible: false
-  property string wifiPasswordSSID: ""
-  property string wifiPasswordInput: ""
+    property string wifiPasswordSSID: ""
+    property string wifiPasswordInput: ""
+    property string wifiUsernameInput: ""
+    property bool requiresEnterprise: false
 
-  visible: wifiPasswordModalVisible
-  width: 420
-  height: 230
-  keyboardFocus: "exclusive"
-  onVisibleChanged: {
-    if (!visible)
-      wifiPasswordInput = ""
-  }
-  onBackgroundClicked: {
-    wifiPasswordModalVisible = false
-    wifiPasswordInput = ""
-  }
-
-  Connections {
-    function onPasswordDialogShouldReopenChanged() {
-      if (NetworkService.passwordDialogShouldReopen
-          && NetworkService.connectingSSID !== "") {
-        wifiPasswordSSID = NetworkService.connectingSSID
+    function show(ssid) {
+        wifiPasswordSSID = ssid
         wifiPasswordInput = ""
-        wifiPasswordModalVisible = true
-        NetworkService.passwordDialogShouldReopen = false
-      }
+        wifiUsernameInput = ""
+
+        const network = NetworkService.wifiNetworks.find(n => n.ssid === ssid)
+        requiresEnterprise = network?.enterprise || false
+
+        open()
+        Qt.callLater(() => {
+                         if (contentLoader.item) {
+                             if (requiresEnterprise && contentLoader.item.usernameInput) {
+                                 contentLoader.item.usernameInput.forceActiveFocus()
+                             } else if (contentLoader.item.passwordInput) {
+                                 contentLoader.item.passwordInput.forceActiveFocus()
+                             }
+                         }
+                     })
     }
 
-    target: NetworkService
-  }
+    shouldBeVisible: false
+    width: 420
+    height: requiresEnterprise ? 310 : 230
+    onShouldBeVisibleChanged: () => {
+                                  if (!shouldBeVisible) {
+                                      wifiPasswordInput = ""
+                                      wifiUsernameInput = ""
+                                  }
+                              }
+    onOpened: {
+        Qt.callLater(() => {
+                         if (contentLoader.item) {
+                             if (requiresEnterprise && contentLoader.item.usernameInput) {
+                                 contentLoader.item.usernameInput.forceActiveFocus()
+                             } else if (contentLoader.item.passwordInput) {
+                                 contentLoader.item.passwordInput.forceActiveFocus()
+                             }
+                         }
+                     })
+    }
+    onBackgroundClicked: () => {
+                             close()
+                             wifiPasswordInput = ""
+                             wifiUsernameInput = ""
+                         }
 
-  content: Component {
-    FocusScope {
-      anchors.fill: parent
-      focus: true
+    Connections {
+        target: NetworkService
 
-      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
+        function onPasswordDialogShouldReopenChanged() {
+            if (NetworkService.passwordDialogShouldReopen && NetworkService.connectingSSID !== "") {
+                wifiPasswordSSID = NetworkService.connectingSSID
+                wifiPasswordInput = ""
+                open()
+                NetworkService.passwordDialogShouldReopen = false
             }
-
-            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
-            hoverColor: Theme.errorHover
-            onClicked: {
-              wifiPasswordModalVisible = false
-              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
+    content: Component {
+        FocusScope {
+            id: wifiContent
 
-          DankTextField {
-            id: passwordInput
+            property alias usernameInput: usernameInput
+            property alias passwordInput: passwordInput
 
             anchors.fill: parent
-            font.pixelSize: Theme.fontSizeMedium
-            textColor: Theme.surfaceText
-            text: wifiPasswordInput
-            echoMode: showPasswordCheckbox.checked ? TextInput.Normal : TextInput.Password
-            placeholderText: "Enter password"
-            backgroundColor: "transparent"
             focus: true
-            onTextEdited: {
-              wifiPasswordInput = text
-            }
-            onAccepted: {
-              NetworkService.connectToWifiWithPassword(wifiPasswordSSID,
-                                                       passwordInput.text)
-              wifiPasswordModalVisible = false
-              wifiPasswordInput = ""
-              passwordInput.text = ""
-            }
-
-            Timer {
-              id: focusTimer
-              interval: 50
-              onTriggered: passwordInput.forceActiveFocus()
-            }
-
-            Component.onCompleted: {
-              focusTimer.start()
-            }
-
-            Connections {
-              function onOpened() {
-                focusTimer.start()
-              }
-
-              function onVisibleChanged() {
-                if (root.visible) {
-                  focusTimer.start()
-                }
-              }
-
-              target: root
-            }
-          }
-        }
-
-        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
+            Keys.onEscapePressed: event => {
+                                      close()
+                                      wifiPasswordInput = ""
+                                      wifiUsernameInput = ""
+                                      event.accepted = true
+                                  }
 
+            Column {
                 anchors.centerIn: parent
-                text: "Cancel"
-                font.pixelSize: Theme.fontSizeMedium
-                color: Theme.surfaceText
-                font.weight: Font.Medium
-              }
+                width: parent.width - Theme.spacingM * 2
+                spacing: Theme.spacingM
 
-              MouseArea {
-                id: cancelArea
+                Row {
+                    width: parent.width
 
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                  wifiPasswordModalVisible = false
-                  wifiPasswordInput = ""
+                    Column {
+                        width: parent.width - 40
+                        spacing: Theme.spacingXS
+
+                        StyledText {
+                            text: I18n.tr("Connect to Wi-Fi")
+                            font.pixelSize: Theme.fontSizeLarge
+                            color: Theme.surfaceText
+                            font.weight: Font.Medium
+                        }
+
+                        StyledText {
+                            text: requiresEnterprise ? `Enter credentials for "${wifiPasswordSSID}"` : `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 = ""
+                                       wifiUsernameInput = ""
+                                   }
+                    }
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceHover
+                    border.color: usernameInput.activeFocus ? Theme.primary : Theme.outlineStrong
+                    border.width: usernameInput.activeFocus ? 2 : 1
+                    visible: requiresEnterprise
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: () => {
+                                       usernameInput.forceActiveFocus()
+                                   }
+                    }
+
+                    DankTextField {
+                        id: usernameInput
+
+                        anchors.fill: parent
+                        font.pixelSize: Theme.fontSizeMedium
+                        textColor: Theme.surfaceText
+                        text: wifiUsernameInput
+                        placeholderText: "Username"
+                        backgroundColor: "transparent"
+                        enabled: root.shouldBeVisible
+                        onTextEdited: () => {
+                                          wifiUsernameInput = text
+                                      }
+                        onAccepted: () => {
+                                        if (passwordInput) {
+                                            passwordInput.forceActiveFocus()
+                                        }
+                                    }
+                    }
+                }
+
+                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: requiresEnterprise ? "Password" : ""
+                        backgroundColor: "transparent"
+                        focus: !requiresEnterprise
+                        enabled: root.shouldBeVisible
+                        onTextEdited: () => {
+                                          wifiPasswordInput = text
+                                      }
+                        onAccepted: () => {
+                                        const username = requiresEnterprise ? usernameInput.text : ""
+                                        NetworkService.connectToWifi(wifiPasswordSSID, passwordInput.text, username)
+                                        close()
+                                        wifiPasswordInput = ""
+                                        wifiUsernameInput = ""
+                                        passwordInput.text = ""
+                                        if (requiresEnterprise) usernameInput.text = ""
+                                    }
+                        Component.onCompleted: () => {
+                                                   if (root.shouldBeVisible && !requiresEnterprise)
+                                                   focusDelayTimer.start()
+                                               }
+
+                        Timer {
+                            id: focusDelayTimer
+
+                            interval: 100
+                            repeat: false
+                            onTriggered: () => {
+                                             if (root.shouldBeVisible) {
+                                                 if (requiresEnterprise && usernameInput) {
+                                                     usernameInput.forceActiveFocus()
+                                                 } else {
+                                                     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: I18n.tr("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: I18n.tr("Cancel")
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceText
+                                font.weight: Font.Medium
+                            }
+
+                            MouseArea {
+                                id: cancelArea
+
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: () => {
+                                               close()
+                                               wifiPasswordInput = ""
+                                               wifiUsernameInput = ""
+                                           }
+                            }
+                        }
+
+                        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: requiresEnterprise ? (usernameInput.text.length > 0 && passwordInput.text.length > 0) : passwordInput.text.length > 0
+                            opacity: enabled ? 1 : 0.5
+
+                            StyledText {
+                                id: connectText
+
+                                anchors.centerIn: parent
+                                text: I18n.tr("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: () => {
+                                               const username = requiresEnterprise ? usernameInput.text : ""
+                                               NetworkService.connectToWifi(wifiPasswordSSID, passwordInput.text, username)
+                                               close()
+                                               wifiPasswordInput = ""
+                                               wifiUsernameInput = ""
+                                               passwordInput.text = ""
+                                               if (requiresEnterprise) usernameInput.text = ""
+                                           }
+                            }
+
+                            Behavior on color {
+                                ColorAnimation {
+                                    duration: Theme.shortDuration
+                                    easing.type: Theme.standardEasing
+                                }
+                            }
+                        }
+                    }
                 }
-              }
             }
-
-            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.connectToWifiWithPassword(wifiPasswordSSID,
-                                                           passwordInput.text)
-                  wifiPasswordModalVisible = false
-                  wifiPasswordInput = ""
-                  passwordInput.text = ""
-                }
-              }
-
-              Behavior on color {
-                ColorAnimation {
-                  duration: Theme.shortDuration
-                  easing.type: Theme.standardEasing
-                }
-              }
-            }
-          }
         }
-      }
     }
-  }
 }

Modules/AppDrawer/AppLauncher.qml

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

Modules/AppDrawer/CategorySelector.qml

@@ -1,148 +1,142 @@
 import QtQuick
 import QtQuick.Controls
 import qs.Common
+import qs.Services
 import qs.Widgets
 
 Item {
-  id: root
+    id: root
 
-  property var categories: []
-  property string selectedCategory: "All"
-  property bool compact: false // For different layout styles
+    property var categories: []
+    property string selectedCategory: I18n.tr("All")
+    property bool compact: false
 
-  signal categorySelected(string category)
+    signal categorySelected(string category)
 
-  height: compact ? 36 : (72 + Theme.spacingS) // Single row vs two rows
+    readonly property int maxCompactItems: 8
+    readonly property int itemHeight: 36
+    readonly property color selectedBorderColor: "transparent"
+    readonly property color unselectedBorderColor: "transparent"
 
-  Row {
-    visible: compact
-    width: parent.width
-    spacing: Theme.spacingS
-
-    Repeater {
-      model: categories.slice(0, Math.min(categories.length,
-                                          8)) // Limit for space
-
-      Rectangle {
-        height: 36
-        width: (parent.width - (Math.min(categories.length,
-                                         8) - 1) * Theme.spacingS) / Math.min(
-                 categories.length, 8)
-        radius: Theme.cornerRadius
-        color: selectedCategory === modelData ? Theme.primary : "transparent"
-        border.color: selectedCategory === modelData ? "transparent" : Qt.rgba(
-                                                         Theme.outline.r,
-                                                         Theme.outline.g,
-                                                         Theme.outline.b, 0.3)
-
-        StyledText {
-          anchors.centerIn: parent
-          text: modelData
-          color: selectedCategory === modelData ? Theme.surface : Theme.surfaceText
-          font.pixelSize: Theme.fontSizeMedium
-          font.weight: selectedCategory === modelData ? Font.Medium : Font.Normal
-          elide: Text.ElideRight
-        }
-
-        MouseArea {
-          anchors.fill: parent
-          hoverEnabled: true
-          cursorShape: Qt.PointingHandCursor
-          onClicked: {
-            selectedCategory = modelData
-            categorySelected(modelData)
-          }
-        }
-      }
+    function handleCategoryClick(category) {
+        categorySelected(category)
     }
-  }
 
-  Column {
-    visible: !compact
-    width: parent.width
-    spacing: Theme.spacingS
+    function getButtonWidth(itemCount, containerWidth) {
+        return itemCount > 0 ? (containerWidth - (itemCount - 1) * Theme.spacingS) / itemCount : 0
+    }
+
+    height: compact ? itemHeight : (itemHeight * 2 + Theme.spacingS)
 
     Row {
-      property var firstRowCategories: categories.slice(0, Math.min(4, categories.length))
-      
-      width: parent.width
-      spacing: Theme.spacingS
+        visible: compact
+        width: parent.width
+        spacing: Theme.spacingS
 
-      Repeater {
-        model: parent.firstRowCategories
+        Repeater {
+            model: categories ? categories.slice(0, Math.min(categories.length || 0, maxCompactItems)) : []
 
-        Rectangle {
-          height: 36
-          width: (parent.width - (parent.firstRowCategories.length - 1) * Theme.spacingS) / parent.firstRowCategories.length
-          radius: Theme.cornerRadius
-          color: selectedCategory === modelData ? Theme.primary : "transparent"
-          border.color: selectedCategory === modelData ? "transparent" : Qt.rgba(
-                                                           Theme.outline.r,
-                                                           Theme.outline.g,
-                                                           Theme.outline.b, 0.3)
+            Rectangle {
+                property int itemCount: Math.min(categories ? categories.length || 0 : 0, maxCompactItems)
 
-          StyledText {
-            anchors.centerIn: parent
-            text: modelData
-            color: selectedCategory === modelData ? Theme.surface : Theme.surfaceText
-            font.pixelSize: Theme.fontSizeMedium
-            font.weight: selectedCategory === modelData ? Font.Medium : Font.Normal
-            elide: Text.ElideRight
-          }
+                height: root.itemHeight
+                width: root.getButtonWidth(itemCount, parent.width)
+                radius: Theme.cornerRadius
+                color: selectedCategory === modelData ? Theme.primary : Theme.surfaceContainerHigh
 
-          MouseArea {
-            anchors.fill: parent
-            hoverEnabled: true
-            cursorShape: Qt.PointingHandCursor
-            onClicked: {
-              selectedCategory = modelData
-              categorySelected(modelData)
+                StyledText {
+                    anchors.centerIn: parent
+                    text: modelData
+                    color: selectedCategory === modelData ? Theme.surface : Theme.surfaceText
+                    font.pixelSize: Theme.fontSizeMedium
+                    font.weight: selectedCategory === modelData ? Font.Medium : Font.Normal
+                    elide: Text.ElideRight
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: root.handleCategoryClick(modelData)
+                }
             }
-          }
         }
-      }
     }
 
-    Row {
-      property var secondRowCategories: categories.slice(4, categories.length)
-      
-      width: parent.width
-      spacing: Theme.spacingS
-      visible: secondRowCategories.length > 0
+    Column {
+        visible: !compact
+        width: parent.width
+        spacing: Theme.spacingS
 
-      Repeater {
-        model: parent.secondRowCategories
+        Row {
+            width: parent.width
+            spacing: Theme.spacingS
 
-        Rectangle {
-          height: 36
-          width: (parent.width - (parent.secondRowCategories.length - 1) * Theme.spacingS) / parent.secondRowCategories.length
-          radius: Theme.cornerRadius
-          color: selectedCategory === modelData ? Theme.primary : "transparent"
-          border.color: selectedCategory === modelData ? "transparent" : Qt.rgba(
-                                                           Theme.outline.r,
-                                                           Theme.outline.g,
-                                                           Theme.outline.b, 0.3)
+            Repeater {
+                model: categories ? categories.slice(0, Math.min(4, categories.length || 0)) : []
 
-          StyledText {
-            anchors.centerIn: parent
-            text: modelData
-            color: selectedCategory === modelData ? Theme.surface : Theme.surfaceText
-            font.pixelSize: Theme.fontSizeMedium
-            font.weight: selectedCategory === modelData ? Font.Medium : Font.Normal
-            elide: Text.ElideRight
-          }
+                Rectangle {
+                    property int itemCount: Math.min(4, categories ? categories.length || 0 : 0)
 
-          MouseArea {
-            anchors.fill: parent
-            hoverEnabled: true
-            cursorShape: Qt.PointingHandCursor
-            onClicked: {
-              selectedCategory = modelData
-              categorySelected(modelData)
+                    height: root.itemHeight
+                    width: root.getButtonWidth(itemCount, parent.width)
+                    radius: Theme.cornerRadius
+                    color: selectedCategory === modelData ? Theme.primary : Theme.surfaceContainerHigh
+                    border.color: selectedCategory === modelData ? selectedBorderColor : unselectedBorderColor
+
+                    StyledText {
+                        anchors.centerIn: parent
+                        text: modelData
+                        color: selectedCategory === modelData ? Theme.surface : Theme.surfaceText
+                        font.pixelSize: Theme.fontSizeMedium
+                        font.weight: selectedCategory === modelData ? Font.Medium : Font.Normal
+                        elide: Text.ElideRight
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: root.handleCategoryClick(modelData)
+                    }
+                }
+            }
+        }
+
+        Row {
+            width: parent.width
+            spacing: Theme.spacingS
+            visible: categories && categories.length > 4
+
+            Repeater {
+                model: categories && categories.length > 4 ? categories.slice(4) : []
+
+                Rectangle {
+                    property int itemCount: categories && categories.length > 4 ? categories.length - 4 : 0
+
+                    height: root.itemHeight
+                    width: root.getButtonWidth(itemCount, parent.width)
+                    radius: Theme.cornerRadius
+                    color: selectedCategory === modelData ? Theme.primary : Theme.surfaceContainerHigh
+                    border.color: selectedCategory === modelData ? selectedBorderColor : unselectedBorderColor
+
+                    StyledText {
+                        anchors.centerIn: parent
+                        text: modelData
+                        color: selectedCategory === modelData ? Theme.surface : Theme.surfaceText
+                        font.pixelSize: Theme.fontSizeMedium
+                        font.weight: selectedCategory === modelData ? Font.Medium : Font.Normal
+                        elide: Text.ElideRight
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: root.handleCategoryClick(modelData)
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }

Modules/BrightnessPopup.qml

@@ -1,230 +0,0 @@
-import QtQuick
-import QtQuick.Effects
-import Quickshell
-import Quickshell.Wayland
-import Quickshell.Widgets
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-PanelWindow {
-  id: root
-
-  property var modelData
-  property bool brightnessPopupVisible: false
-  property var brightnessDebounceTimer
-
-  brightnessDebounceTimer: Timer {
-    property int pendingValue: 0
-
-    interval: BrightnessService.ddcAvailable ? 500 : 50
-    repeat: false
-    onTriggered: {
-      BrightnessService.setBrightnessInternal(pendingValue, BrightnessService.lastIpcDevice)
-    }
-  }
-
-  function show() {
-    root.brightnessPopupVisible = true
-    // Update slider to current device brightness when showing
-    if (BrightnessService.brightnessAvailable) {
-      brightnessSlider.value = BrightnessService.brightnessLevel
-    }
-    hideTimer.restart()
-  }
-
-  function resetHideTimer() {
-    if (root.brightnessPopupVisible)
-      hideTimer.restart()
-  }
-
-  screen: modelData
-  visible: brightnessPopupVisible
-  WlrLayershell.layer: WlrLayershell.Overlay
-  WlrLayershell.exclusiveZone: -1
-  WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
-  color: "transparent"
-
-  anchors {
-    top: true
-    left: true
-    right: true
-    bottom: true
-  }
-
-  Timer {
-    id: hideTimer
-
-    interval: 3000
-    repeat: false
-    onTriggered: {
-      if (!brightnessPopup.containsMouse)
-        root.brightnessPopupVisible = false
-      else
-        hideTimer.restart()
-    }
-  }
-
-  Connections {
-    function onBrightnessChanged() {
-      root.show()
-    }
-
-    target: BrightnessService
-  }
-
-  Rectangle {
-    id: brightnessPopup
-
-    property bool containsMouse: popupMouseArea.containsMouse
-
-    width: Math.min(260, Screen.width - Theme.spacingM * 2)
-    height: brightnessContent.height + Theme.spacingS * 2
-    anchors.horizontalCenter: parent.horizontalCenter
-    anchors.bottom: parent.bottom
-    anchors.bottomMargin: Theme.spacingM
-    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: root.brightnessPopupVisible ? 1 : 0
-    scale: root.brightnessPopupVisible ? 1 : 0.9
-    layer.enabled: true
-
-    Column {
-      id: brightnessContent
-
-      anchors.centerIn: parent
-      width: parent.width - Theme.spacingS * 2
-      spacing: Theme.spacingXS
-
-      Item {
-        property int gap: Theme.spacingS
-
-        width: parent.width
-        height: 40
-
-        Rectangle {
-          width: Theme.iconSize
-          height: Theme.iconSize
-          radius: Theme.iconSize / 2
-          color: "transparent"
-          x: parent.gap
-          anchors.verticalCenter: parent.verticalCenter
-
-          DankIcon {
-            anchors.centerIn: parent
-            name: {
-              const deviceInfo = BrightnessService.getCurrentDeviceInfo();
-              
-              if (!deviceInfo || deviceInfo.class === "backlight") {
-                // Display backlight
-                return "brightness_medium";
-              } else if (deviceInfo.name.includes("kbd")) {
-                // Keyboard brightness
-                return "keyboard";
-              } else {
-                // Other devices (LEDs, etc.)
-                return "lightbulb";
-              }
-            }
-            size: Theme.iconSize
-            color: Theme.primary
-          }
-        }
-
-        DankSlider {
-          id: brightnessSlider
-
-          width: parent.width - Theme.iconSize - parent.gap * 3
-          height: 40
-          x: parent.gap * 2 + Theme.iconSize
-          anchors.verticalCenter: parent.verticalCenter
-          minimum: 1
-          maximum: 100
-          enabled: BrightnessService.brightnessAvailable
-          showValue: true
-          unit: "%"
-          Component.onCompleted: {
-            if (BrightnessService.brightnessAvailable)
-              value = BrightnessService.brightnessLevel
-          }
-          onSliderValueChanged: function (newValue) {
-            if (BrightnessService.brightnessAvailable) {
-              brightnessDebounceTimer.pendingValue = newValue
-              brightnessDebounceTimer.restart()
-              root.resetHideTimer()
-            }
-          }
-          onSliderDragFinished: function (finalValue) {
-            if (BrightnessService.brightnessAvailable) {
-              brightnessDebounceTimer.stop()
-              BrightnessService.setBrightnessInternal(finalValue, BrightnessService.lastIpcDevice)
-            }
-          }
-
-          Connections {
-            function onBrightnessChanged() {
-              brightnessSlider.value = BrightnessService.brightnessLevel
-            }
-            
-            function onDeviceSwitched() {
-              brightnessSlider.value = BrightnessService.brightnessLevel
-            }
-
-            target: BrightnessService
-          }
-        }
-      }
-    }
-
-    MouseArea {
-      id: popupMouseArea
-
-      anchors.fill: parent
-      hoverEnabled: true
-      acceptedButtons: Qt.NoButton
-      propagateComposedEvents: true
-      z: -1
-    }
-
-    layer.effect: MultiEffect {
-      shadowEnabled: true
-      shadowHorizontalOffset: 0
-      shadowVerticalOffset: 4
-      shadowBlur: 0.8
-      shadowColor: Qt.rgba(0, 0, 0, 0.3)
-      shadowOpacity: 0.3
-    }
-
-    transform: Translate {
-      y: root.brightnessPopupVisible ? 0 : 20
-    }
-
-    Behavior on opacity {
-      NumberAnimation {
-        duration: Theme.mediumDuration
-        easing.type: Theme.emphasizedEasing
-      }
-    }
-
-    Behavior on scale {
-      NumberAnimation {
-        duration: Theme.mediumDuration
-        easing.type: Theme.emphasizedEasing
-      }
-    }
-
-    Behavior on transform {
-      PropertyAnimation {
-        duration: Theme.mediumDuration
-        easing.type: Theme.emphasizedEasing
-      }
-    }
-  }
-
-  mask: Region {
-    item: brightnessPopup
-  }
-}

Modules/CentcomCenter/CalendarGrid.qml

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

Modules/CentcomCenter/CentcomPopout.qml

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

Modules/CentcomCenter/Events.qml

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

Modules/CentcomCenter/MediaPlayer.qml

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

Modules/CentcomCenter/SystemInfo.qml

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

Modules/CentcomCenter/Weather.qml

@@ -1,190 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
-import qs.Common
-import qs.Services
-import qs.Widgets
-
-Rectangle {
-  id: weather
-
-  width: parent.width
-  height: parent.height
-  radius: Theme.cornerRadius
-  color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g,
-                 Theme.surfaceContainer.b, 0.4)
-  border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-  border.width: 1
-  layer.enabled: true
-
-  Ref {
-    service: WeatherService
-  }
-
-  Column {
-    anchors.centerIn: parent
-    spacing: Theme.spacingS
-    visible: !WeatherService.weather.available
-             || WeatherService.weather.temp === 0
-
-    DankIcon {
-      name: "cloud_off"
-      size: Theme.iconSize + 8
-      color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g,
-                     Theme.surfaceText.b, 0.5)
-      anchors.horizontalCenter: parent.horizontalCenter
-    }
-
-    StyledText {
-      text: "No Weather Data"
-      font.pixelSize: Theme.fontSizeMedium
-      color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g,
-                     Theme.surfaceText.b, 0.7)
-      anchors.horizontalCenter: parent.horizontalCenter
-    }
-  }
-
-  Column {
-    anchors.fill: parent
-    anchors.margins: Theme.spacingL
-    spacing: Theme.spacingS
-    visible: WeatherService.weather.available
-             && WeatherService.weather.temp !== 0
-
-    Item {
-      width: parent.width
-      height: 60
-
-      Row {
-        anchors.centerIn: parent
-        spacing: Theme.spacingL
-
-        DankIcon {
-          name: WeatherService.getWeatherIcon(WeatherService.weather.wCode)
-          size: Theme.iconSize + 8
-          color: Theme.primary
-          anchors.verticalCenter: parent.verticalCenter
-        }
-
-        Column {
-          spacing: Theme.spacingXS
-          anchors.verticalCenter: parent.verticalCenter
-
-          StyledText {
-            text: (SettingsData.useFahrenheit ? WeatherService.weather.tempF : WeatherService.weather.temp)
-                  + "°" + (SettingsData.useFahrenheit ? "F" : "C")
-            font.pixelSize: Theme.fontSizeXLarge
-            color: Theme.surfaceText
-            font.weight: Font.Light
-
-            MouseArea {
-              anchors.fill: parent
-              hoverEnabled: true
-              cursorShape: Qt.PointingHandCursor
-              onClicked: {
-                if (WeatherService.weather.available)
-                  SettingsData.setTemperatureUnit(!SettingsData.useFahrenheit)
-              }
-              enabled: WeatherService.weather.available
-            }
-          }
-
-          StyledText {
-            text: WeatherService.weather.city || ""
-            font.pixelSize: Theme.fontSizeMedium
-            color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g,
-                           Theme.surfaceText.b, 0.7)
-            visible: text.length > 0
-          }
-        }
-      }
-    }
-
-    Grid {
-      columns: 2
-      spacing: Theme.spacingM
-      anchors.horizontalCenter: parent.horizontalCenter
-
-      Row {
-        spacing: Theme.spacingXS
-
-        DankIcon {
-          name: "humidity_low"
-          size: Theme.fontSizeSmall
-          color: Theme.surfaceText
-          anchors.verticalCenter: parent.verticalCenter
-        }
-
-        StyledText {
-          text: WeatherService.weather.humidity ? WeatherService.weather.humidity + "%" : "--"
-          font.pixelSize: Theme.fontSizeSmall
-          color: Theme.surfaceText
-          anchors.verticalCenter: parent.verticalCenter
-        }
-      }
-
-      Row {
-        spacing: Theme.spacingXS
-
-        DankIcon {
-          name: "air"
-          size: Theme.fontSizeSmall
-          color: Theme.surfaceText
-          anchors.verticalCenter: parent.verticalCenter
-        }
-
-        StyledText {
-          text: WeatherService.weather.wind || "--"
-          font.pixelSize: Theme.fontSizeSmall
-          color: Theme.surfaceText
-          anchors.verticalCenter: parent.verticalCenter
-        }
-      }
-
-      Row {
-        spacing: Theme.spacingXS
-
-        DankIcon {
-          name: "wb_twilight"
-          size: Theme.fontSizeSmall
-          color: Theme.surfaceText
-          anchors.verticalCenter: parent.verticalCenter
-        }
-
-        StyledText {
-          text: WeatherService.weather.sunrise || "--"
-          font.pixelSize: Theme.fontSizeSmall
-          color: Theme.surfaceText
-          anchors.verticalCenter: parent.verticalCenter
-        }
-      }
-
-      Row {
-        spacing: Theme.spacingXS
-
-        DankIcon {
-          name: "bedtime"
-          size: Theme.fontSizeSmall
-          color: Theme.surfaceText
-          anchors.verticalCenter: parent.verticalCenter
-        }
-
-        StyledText {
-          text: WeatherService.weather.sunset || "--"
-          font.pixelSize: Theme.fontSizeSmall
-          color: Theme.surfaceText
-          anchors.verticalCenter: parent.verticalCenter
-        }
-      }
-    }
-  }
-
-  layer.effect: MultiEffect {
-    shadowEnabled: true
-    shadowHorizontalOffset: 0
-    shadowVerticalOffset: 2
-    shadowBlur: 0.5
-    shadowColor: Qt.rgba(0, 0, 0, 0.1)
-    shadowOpacity: 0.1
-  }
-}

Modules/ControlCenter/Audio/AudioDevicesList.qml

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

Modules/ControlCenter/Audio/AudioInputDevicesList.qml

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

Modules/ControlCenter/Audio/MicrophoneControl.qml

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

Modules/ControlCenter/Audio/VolumeControl.qml

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

Modules/ControlCenter/AudioTab.qml

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

Modules/ControlCenter/Bluetooth/AvailableDevicesList.qml

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

Modules/ControlCenter/Bluetooth/BluetoothContextMenu.qml

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

Modules/ControlCenter/Bluetooth/BluetoothToggle.qml

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

Modules/ControlCenter/Bluetooth/PairedDevicesList.qml

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

Modules/ControlCenter/BluetoothTab.qml

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

Modules/ControlCenter/BuiltinPlugins/VpnWidget.qml

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

Modules/ControlCenter/Components/ActionTile.qml

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

Modules/ControlCenter/Components/DetailHost.qml

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

Modules/ControlCenter/Components/DragDropDetailHost.qml

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

Modules/ControlCenter/Components/DragDropGrid.qml

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

Modules/ControlCenter/Components/DragDropWidgetWrapper.qml

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

Modules/ControlCenter/Components/EditControls.qml

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

Modules/ControlCenter/Components/HeaderPane.qml

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

Modules/ControlCenter/Components/PowerButton.qml

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

Modules/ControlCenter/Components/SizeControls.qml

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

Modules/ControlCenter/Components/Typography.qml

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

Modules/ControlCenter/ControlCenterPopout.qml

@@ -8,783 +8,223 @@ 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.DankBar
 import qs.Services
 import qs.Widgets
+import qs.Modules.ControlCenter.Components
+import qs.Modules.ControlCenter.Models
+import "./utils/state.js" as StateUtils
 
-PanelWindow {
-  id: root
+DankPopout {
+    id: root
 
-  property bool controlCenterVisible: false
-  property string currentTab: "network"
-  property bool powerOptionsExpanded: false
-  property var triggerScreen: null
-  property real triggerX: Screen.width - 600 - Theme.spacingL
-  property real triggerY: Theme.barHeight + Theme.spacingXS
-  property real triggerWidth: 80
-  property string triggerSection: "right"
+    property string expandedSection: ""
+    property var triggerScreen: null
+    property bool editMode: false
+    property int expandedWidgetIndex: -1
+    property var expandedWidgetData: null
 
-  function setTriggerPosition(x, y, width, section, screen) {
-    triggerX = x
-    triggerY = y
-    triggerWidth = width
-    triggerSection = section
-    triggerScreen = screen
-  }
+    signal lockRequested
 
-  signal powerActionRequested(string action, string title, string message)
-  signal lockRequested
-
-  visible: controlCenterVisible
-  screen: triggerScreen
-  onVisibleChanged: {
-    NetworkService.autoRefreshEnabled = visible && NetworkService.wifiEnabled
-    if (!visible && BluetoothService.adapter
-        && BluetoothService.adapter.discovering)
-      BluetoothService.adapter.discovering = false
-
-    if (visible && UserInfoService)
-      UserInfoService.getUptime()
-  }
-  implicitWidth: 600
-  implicitHeight: 500
-  WlrLayershell.layer: WlrLayershell.Overlay
-  WlrLayershell.exclusiveZone: -1
-  WlrLayershell.keyboardFocus: controlCenterVisible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
-  color: "transparent"
-
-  anchors {
-    top: true
-    left: true
-    right: true
-    bottom: true
-  }
-
-  Loader {
-    id: contentLoader
-
-    readonly property real screenWidth: root.screen ? root.screen.width : Screen.width
-    readonly property real screenHeight: root.screen ? root.screen.height : Screen.height
-    readonly property real targetWidth: Math.min(
-                                          600, screenWidth - Theme.spacingL * 2)
-
-    asynchronous: true
-    active: controlCenterVisible
-    width: targetWidth
-    height: root.powerOptionsExpanded ? 570 : 500
-    y: Theme.barHeight + Theme.spacingXS
-    x: {
-      var centerX = root.triggerX + (root.triggerWidth / 2) - (targetWidth / 2)
-
-      if (centerX >= Theme.spacingM
-          && centerX + targetWidth <= screenWidth - Theme.spacingM) {
-        return centerX
-      }
-
-      if (centerX < Theme.spacingM) {
-        return Theme.spacingM
-      }
-
-      if (centerX + targetWidth > screenWidth - Theme.spacingM) {
-        return screenWidth - targetWidth - Theme.spacingM
-      }
-
-      return centerX
-    }
-    opacity: controlCenterVisible ? 1 : 0
-    scale: controlCenterVisible ? 1 : 0.9
-
-    Behavior on opacity {
-      NumberAnimation {
-        duration: Anims.durMed
-        easing.type: Easing.BezierSpline
-        easing.bezierCurve: Anims.emphasized
-      }
+    function collapseAll() {
+        expandedSection = ""
+        expandedWidgetIndex = -1
+        expandedWidgetData = null
     }
 
-    Behavior on scale {
-      NumberAnimation {
-        duration: Anims.durMed
-        easing.type: Easing.BezierSpline
-        easing.bezierCurve: Anims.emphasized
-      }
-    }
-
-    sourceComponent: Rectangle {
-      color: Theme.popupBackground()
-      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
-      focus: true
-      Component.onCompleted: {
-        if (controlCenterVisible)
-          forceActiveFocus()
-      }
-      Keys.onPressed: function (event) {
-        if (event.key === Qt.Key_Escape) {
-          controlCenterVisible = false
-          event.accepted = true
-        } else {
-          event.accepted = false
+    onEditModeChanged: {
+        if (editMode) {
+            collapseAll()
         }
-      }
+    }
 
-      Connections {
-        function onControlCenterVisibleChanged() {
-          if (controlCenterVisible)
-            Qt.callLater(function () {
-              parent.forceActiveFocus()
+    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.dankBarSpacing
+    triggerWidth: 80
+    positioning: ""
+    screen: triggerScreen
+    shouldBeVisible: false
+    visible: shouldBeVisible
+
+    onShouldBeVisibleChanged: {
+        if (shouldBeVisible) {
+            Qt.callLater(() => {
+                if (NetworkService.activeService) {
+                    NetworkService.activeService.autoRefreshEnabled = NetworkService.wifiEnabled
+                }
+                if (UserInfoService)
+                    UserInfoService.getUptime()
+            })
+        } else {
+            Qt.callLater(() => {
+                if (NetworkService.activeService) {
+                    NetworkService.activeService.autoRefreshEnabled = false
+                }
+                if (BluetoothService.adapter && BluetoothService.adapter.discovering)
+                    BluetoothService.adapter.discovering = false
+                editMode = false
             })
         }
-        target: root
-      }
+    }
 
-      ColumnLayout {
-        anchors.fill: parent
-        anchors.margins: Theme.spacingL
-        spacing: Theme.spacingM
-
-        Column {
-          width: parent.width
-          spacing: Theme.spacingL
-
-          Rectangle {
-            width: parent.width
-            height: 90
-            radius: Theme.cornerRadius
-            color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
-                           Theme.surfaceVariant.b,
-                           Theme.getContentBackgroundAlpha() * 0.4)
-            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                                  Theme.outline.b, 0.08)
-            border.width: 1
-
-            Row {
-              anchors.left: parent.left
-              anchors.verticalCenter: parent.verticalCenter
-              anchors.leftMargin: Theme.spacingL
-              anchors.rightMargin: Theme.spacingL
-              spacing: Theme.spacingL
-
-              Item {
-                id: avatarContainer
-
-                property bool hasImage: profileImageLoader.status === Image.Ready
-
-                width: 64
-                height: 64
-
-                Rectangle {
-                  anchors.fill: parent
-                  radius: width / 2
-                  color: "transparent"
-                  border.color: Theme.primary
-                  border.width: 1 // The ring is 1px thick.
-                  visible: parent.hasImage
-                }
-
-                Image {
-                  id: profileImageLoader
-
-                  source: {
-                    if (PortalService.profileImage === "")
-                      return ""
-
-                    if (PortalService.profileImage.startsWith("/"))
-                      return "file://" + PortalService.profileImage
-
-                    return PortalService.profileImage
-                  }
-                  smooth: true
-                  asynchronous: true
-                  mipmap: true
-                  cache: true
-                  visible: false // This item is never shown directly.
-                }
-
-                MultiEffect {
-                  anchors.fill: parent
-                  anchors.margins: 5
-                  source: profileImageLoader
-                  maskEnabled: true
-                  maskSource: circularMask
-                  visible: avatarContainer.hasImage
-                  maskThresholdMin: 0.5
-                  maskSpreadAtMin: 1
-                }
-
-                Item {
-                  id: circularMask
-
-                  width: 64 - 10
-                  height: 64 - 10
-                  layer.enabled: true
-                  layer.smooth: true
-                  visible: false
-
-                  Rectangle {
-                    anchors.fill: parent
-                    radius: width / 2
-                    color: "black"
-                    antialiasing: true
-                  }
-                }
-
-                Rectangle {
-                  anchors.fill: parent
-                  radius: width / 2
-                  color: Theme.primary
-                  visible: !parent.hasImage
-
-                  DankIcon {
-                    anchors.centerIn: parent
-                    name: "person"
-                    size: Theme.iconSize + 8
-                    color: Theme.primaryText
-                  }
-                }
-
-                DankIcon {
-                  anchors.centerIn: parent
-                  name: "warning"
-                  size: Theme.iconSize + 8
-                  color: Theme.primaryText
-                  visible: PortalService.profileImage !== ""
-                           && profileImageLoader.status === Image.Error
-                }
-              }
-
-              Column {
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Theme.spacingXS
-
-                StyledText {
-                  text: UserInfoService.fullName
-                        || UserInfoService.username || "User"
-                  font.pixelSize: Theme.fontSizeLarge
-                  color: Theme.surfaceText
-                  font.weight: Font.Medium
-                }
-
-                StyledText {
-                  text: "Uptime: " + (UserInfoService.uptime || "Unknown")
-                  font.pixelSize: Theme.fontSizeSmall
-                  color: Theme.surfaceVariantText
-                  font.weight: Font.Normal
-                }
-              }
-            }
-
-            Row {
-              anchors.right: parent.right
-              anchors.verticalCenter: parent.verticalCenter
-              anchors.rightMargin: Theme.spacingL
-              spacing: Theme.spacingS
-
-              DankActionButton {
-                buttonSize: 40
-                iconName: "lock"
-                iconSize: Theme.iconSize - 2
-                iconColor: Theme.surfaceText
-                backgroundColor: Qt.rgba(Theme.surfaceVariant.r,
-                                         Theme.surfaceVariant.g,
-                                         Theme.surfaceVariant.b, 0.5)
-                hoverColor: Qt.rgba(Theme.primary.r, Theme.primary.g,
-                                    Theme.primary.b, 0.12)
-                onClicked: {
-                  controlCenterVisible = false
-                  root.lockRequested()
-                }
-              }
-
-              Rectangle {
-                width: 40
-                height: 40
-                radius: 20
-                color: powerButton.containsMouse
-                       || root.powerOptionsExpanded ? Qt.rgba(Theme.error.r,
-                                                              Theme.error.g,
-                                                              Theme.error.b,
-                                                              0.12) : Qt.rgba(
-                                                        Theme.surfaceVariant.r,
-                                                        Theme.surfaceVariant.g,
-                                                        Theme.surfaceVariant.b,
-                                                        0.5)
-
-                Rectangle {
-                  anchors.centerIn: parent
-                  width: parent.width
-                  height: parent.height
-                  radius: parent.radius
-                  color: "transparent"
-                  clip: true
-
-                  DankIcon {
-                    id: dankIcon
-
-                    anchors.centerIn: parent
-                    name: root.powerOptionsExpanded ? "expand_less" : "power_settings_new"
-                    size: Theme.iconSize - 2
-                    color: powerButton.containsMouse
-                           || root.powerOptionsExpanded ? Theme.error : Theme.surfaceText
-
-                    Behavior on name {
-                      SequentialAnimation {
-                        NumberAnimation {
-                          target: dankIcon
-                          property: "opacity"
-                          to: 0
-                          duration: Theme.shortDuration / 2
-                          easing.type: Theme.standardEasing
-                        }
-
-                        PropertyAction {
-                          target: dankIcon
-                          property: "name"
-                        }
-
-                        NumberAnimation {
-                          target: dankIcon
-                          property: "opacity"
-                          to: 1
-                          duration: Theme.shortDuration / 2
-                          easing.type: Theme.standardEasing
-                        }
-                      }
-                    }
-                  }
-                }
-
-                MouseArea {
-                  id: powerButton
-
-                  anchors.fill: parent
-                  hoverEnabled: true
-                  cursorShape: Qt.PointingHandCursor
-                  onClicked: {
-                    root.powerOptionsExpanded = !root.powerOptionsExpanded
-                  }
-                }
-
-                Behavior on color {
-                  ColorAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                  }
-                }
-              }
-
-              DankActionButton {
-                buttonSize: 40
-                iconName: "settings"
-                iconSize: Theme.iconSize - 2
-                iconColor: Theme.surfaceText
-                backgroundColor: Qt.rgba(Theme.surfaceVariant.r,
-                                         Theme.surfaceVariant.g,
-                                         Theme.surfaceVariant.b, 0.5)
-                hoverColor: Qt.rgba(Theme.primary.r, Theme.primary.g,
-                                    Theme.primary.b, 0.12)
-                onClicked: {
-                  controlCenterVisible = false
-                  settingsModal.show()
-                }
-              }
-            }
-          }
-
-          Rectangle {
-            width: parent.width
-            height: root.powerOptionsExpanded ? 60 : 0
-            radius: Theme.cornerRadius
-            color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
-                           Theme.surfaceVariant.b,
-                           Theme.getContentBackgroundAlpha() * 0.4)
-            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                                  Theme.outline.b, 0.08)
-            border.width: root.powerOptionsExpanded ? 1 : 0
-            opacity: root.powerOptionsExpanded ? 1 : 0
-            clip: true
-
-            Row {
-              anchors.centerIn: parent
-              spacing: Theme.spacingL
-              visible: root.powerOptionsExpanded
-
-              Rectangle {
-                width: 100
-                height: 34
-                radius: Theme.cornerRadius
-                color: logoutButton.containsMouse ? Qt.rgba(Theme.warning.r,
-                                                            Theme.warning.g,
-                                                            Theme.warning.b,
-                                                            0.12) : Qt.rgba(
-                                                      Theme.surfaceVariant.r,
-                                                      Theme.surfaceVariant.g,
-                                                      Theme.surfaceVariant.b,
-                                                      0.5)
-
-                Row {
-                  anchors.centerIn: parent
-                  spacing: Theme.spacingXS
-
-                  DankIcon {
-                    name: "logout"
-                    size: Theme.fontSizeSmall
-                    color: logoutButton.containsMouse ? Theme.warning : Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                  }
-
-                  StyledText {
-                    text: "Logout"
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: logoutButton.containsMouse ? Theme.warning : Theme.surfaceText
-                    font.weight: Font.Medium
-                    anchors.verticalCenter: parent.verticalCenter
-                  }
-                }
-
-                MouseArea {
-                  id: logoutButton
-
-                  anchors.fill: parent
-                  hoverEnabled: true
-                  cursorShape: Qt.PointingHandCursor
-                  onClicked: {
-                    root.powerOptionsExpanded = false
-                    root.powerActionRequested(
-                          "logout", "Logout",
-                          "Are you sure you want to logout?")
-                  }
-                }
-
-                Behavior on color {
-                  ColorAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                  }
-                }
-              }
-
-              Rectangle {
-                width: 100
-                height: 34
-                radius: Theme.cornerRadius
-                color: rebootButton.containsMouse ? Qt.rgba(Theme.warning.r,
-                                                            Theme.warning.g,
-                                                            Theme.warning.b,
-                                                            0.12) : Qt.rgba(
-                                                      Theme.surfaceVariant.r,
-                                                      Theme.surfaceVariant.g,
-                                                      Theme.surfaceVariant.b,
-                                                      0.5)
-
-                Row {
-                  anchors.centerIn: parent
-                  spacing: Theme.spacingXS
-
-                  DankIcon {
-                    name: "restart_alt"
-                    size: Theme.fontSizeSmall
-                    color: rebootButton.containsMouse ? Theme.warning : Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                  }
-
-                  StyledText {
-                    text: "Restart"
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: rebootButton.containsMouse ? Theme.warning : Theme.surfaceText
-                    font.weight: Font.Medium
-                    anchors.verticalCenter: parent.verticalCenter
-                  }
-                }
-
-                MouseArea {
-                  id: rebootButton
-
-                  anchors.fill: parent
-                  hoverEnabled: true
-                  cursorShape: Qt.PointingHandCursor
-                  onClicked: {
-                    root.powerOptionsExpanded = false
-                    root.powerActionRequested(
-                          "reboot", "Restart",
-                          "Are you sure you want to restart?")
-                  }
-                }
-
-                Behavior on color {
-                  ColorAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                  }
-                }
-              }
-
-              Rectangle {
-                width: 100
-                height: 34
-                radius: Theme.cornerRadius
-                color: suspendButton.containsMouse ? Qt.rgba(Theme.primary.r,
-                                                             Theme.primary.g,
-                                                             Theme.primary.b,
-                                                             0.12) : Qt.rgba(
-                                                       Theme.surfaceVariant.r,
-                                                       Theme.surfaceVariant.g,
-                                                       Theme.surfaceVariant.b,
-                                                       0.5)
-
-                Row {
-                  anchors.centerIn: parent
-                  spacing: Theme.spacingXS
-
-                  DankIcon {
-                    name: "bedtime"
-                    size: Theme.fontSizeSmall
-                    color: suspendButton.containsMouse ? Theme.primary : Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                  }
-
-                  StyledText {
-                    text: "Suspend"
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: suspendButton.containsMouse ? Theme.primary : Theme.surfaceText
-                    font.weight: Font.Medium
-                    anchors.verticalCenter: parent.verticalCenter
-                  }
-                }
-
-                MouseArea {
-                  id: suspendButton
-
-                  anchors.fill: parent
-                  hoverEnabled: true
-                  cursorShape: Qt.PointingHandCursor
-                  onClicked: {
-                    root.powerOptionsExpanded = false
-                    root.powerActionRequested(
-                          "suspend", "Suspend",
-                          "Are you sure you want to suspend?")
-                  }
-                }
-
-                Behavior on color {
-                  ColorAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                  }
-                }
-              }
-
-              Rectangle {
-                width: 100
-                height: 34
-                radius: Theme.cornerRadius
-                color: shutdownButton.containsMouse ? Qt.rgba(Theme.error.r,
-                                                              Theme.error.g,
-                                                              Theme.error.b,
-                                                              0.12) : Qt.rgba(
-                                                        Theme.surfaceVariant.r,
-                                                        Theme.surfaceVariant.g,
-                                                        Theme.surfaceVariant.b,
-                                                        0.5)
-
-                Row {
-                  anchors.centerIn: parent
-                  spacing: Theme.spacingXS
-
-                  DankIcon {
-                    name: "power_settings_new"
-                    size: Theme.fontSizeSmall
-                    color: shutdownButton.containsMouse ? Theme.error : Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                  }
-
-                  StyledText {
-                    text: "Shutdown"
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: shutdownButton.containsMouse ? Theme.error : Theme.surfaceText
-                    font.weight: Font.Medium
-                    anchors.verticalCenter: parent.verticalCenter
-                  }
-                }
-
-                MouseArea {
-                  id: shutdownButton
-
-                  anchors.fill: parent
-                  hoverEnabled: true
-                  cursorShape: Qt.PointingHandCursor
-                  onClicked: {
-                    root.powerOptionsExpanded = false
-                    root.powerActionRequested(
-                          "poweroff", "Shutdown",
-                          "Are you sure you want to shutdown?")
-                  }
-                }
-
-                Behavior on color {
-                  ColorAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                  }
-                }
-              }
-            }
-
-            Behavior on height {
-              NumberAnimation {
-                duration: Theme.shortDuration
-                easing.type: Theme.standardEasing
-              }
-            }
-
-            Behavior on opacity {
-              NumberAnimation {
-                duration: Theme.shortDuration
-                easing.type: Theme.standardEasing
-              }
-            }
-          }
-
-          Rectangle {
-            width: parent.width
-            height: tabBar.height + Theme.spacingM * 2
-            radius: Theme.cornerRadius
-            color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
-                           Theme.surfaceVariant.b, 0.15)
-            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                                  Theme.outline.b, 0.06)
-            border.width: 1
-
-            DankTabBar {
-              id: tabBar
-
-              anchors.centerIn: parent
-              width: parent.width - Theme.spacingM * 2
-              tabHeight: 40
-              currentIndex: {
-                let tabs = ["network", "audio"]
-                if (BluetoothService.available)
-                  tabs.push("bluetooth")
-
-                tabs.push("display")
-                return tabs.indexOf(root.currentTab)
-              }
-              model: {
-                let tabs = [{
-                              "text": "Network",
-                              "icon": "wifi",
-                              "id": "network"
-                            }]
-                tabs.push({
-                            "text": "Audio",
-                            "icon": "volume_up",
-                            "id": "audio"
-                          })
-                if (BluetoothService.available)
-                  tabs.push({
-                              "text": "Bluetooth",
-                              "icon": "bluetooth",
-                              "id": "bluetooth"
-                            })
-
-                tabs.push({
-                            "text": "Display",
-                            "icon": "brightness_6",
-                            "id": "display"
-                          })
-                return tabs
-              }
-              onTabClicked: function (index) {
-                let tabs = ["network", "audio"]
-                if (BluetoothService.available)
-                  tabs.push("bluetooth")
-
-                tabs.push("display")
-                root.currentTab = tabs[index]
-              }
-            }
-          }
-        }
+    WidgetModel {
+        id: widgetModel
+    }
 
+    content: Component {
         Rectangle {
-          width: parent.width
-          Layout.fillHeight: true
-          radius: Theme.cornerRadius
-          color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
-                         Theme.surfaceVariant.b, 0.1)
-          border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                                Theme.outline.b, 0.05)
-          border.width: 1
+            id: controlContent
 
-          Loader {
-            anchors.fill: parent
-            anchors.margins: Theme.spacingS
-            active: root.currentTab === "network"
-            asynchronous: true
-            sourceComponent: Component {
-              NetworkTab {}
-            }
-          }
+            implicitHeight: mainColumn.implicitHeight + Theme.spacingM
+            property alias bluetoothCodecSelector: bluetoothCodecSelector
 
-          Loader {
-            anchors.fill: parent
-            anchors.margins: Theme.spacingS
-            active: root.currentTab === "audio"
-            asynchronous: true
-            sourceComponent: Component {
-              AudioTab {}
+            color: {
+                const transparency = Theme.popupTransparency
+                const surface = Theme.surfaceContainer || Qt.rgba(0.1, 0.1, 0.1, 1)
+                return Qt.rgba(surface.r, surface.g, surface.b, transparency)
             }
-          }
+            radius: Theme.cornerRadius
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
+                                  Theme.outline.b, 0.08)
+            border.width: 0
+            antialiasing: true
+            smooth: true
 
-          Loader {
-            anchors.fill: parent
-            anchors.margins: Theme.spacingS
-            active: BluetoothService.available && root.currentTab === "bluetooth"
-            asynchronous: true
-            sourceComponent: Component {
-              BluetoothTab {}
-            }
-          }
+            Column {
+                id: mainColumn
+                width: parent.width - Theme.spacingL * 2
+                x: Theme.spacingL
+                y: Theme.spacingL
+                spacing: Theme.spacingS
 
-          Loader {
-            anchors.fill: parent
-            anchors.margins: Theme.spacingS
-            active: root.currentTab === "display"
-            asynchronous: true
-            sourceComponent: Component {
-              DisplayTab {}
-            }
-          }
+                HeaderPane {
+                    id: headerPane
+                    width: parent.width
+                    editMode: root.editMode
+                    onEditModeToggled: root.editMode = !root.editMode
+                    onPowerButtonClicked: {
+                        if (powerMenuModalLoader) {
+                            powerMenuModalLoader.active = true
+                            if (powerMenuModalLoader.item) {
+                                const popoutPos = controlContent.mapToItem(null, 0, 0)
+                                const bounds = Qt.rect(popoutPos.x, popoutPos.y, controlContent.width, controlContent.height)
+                                powerMenuModalLoader.item.openFromControlCenter(bounds, root.triggerScreen)
+                            }
+                        }
+                    }
+                    onLockRequested: {
+                        root.close()
+                        root.lockRequested()
+                    }
+                }
 
-          Behavior on height {
-            NumberAnimation {
-              duration: Theme.shortDuration
-              easing.type: Theme.standardEasing
+                DragDropGrid {
+                    id: widgetGrid
+                    width: parent.width
+                    editMode: root.editMode
+                    expandedSection: root.expandedSection
+                    expandedWidgetIndex: root.expandedWidgetIndex
+                    expandedWidgetData: root.expandedWidgetData
+                    model: widgetModel
+                    bluetoothCodecSelector: bluetoothCodecSelector
+                    colorPickerModal: root.colorPickerModal
+                    onExpandClicked: (widgetData, globalIndex) => {
+                        root.expandedWidgetIndex = globalIndex
+                        root.expandedWidgetData = widgetData
+                        if (widgetData.id === "diskUsage") {
+                            root.toggleSection("diskUsage_" + (widgetData.instanceId || "default"))
+                        } else {
+                            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
+                    popoutContent: controlContent
+                    availableWidgets: {
+                        if (!editMode) return []
+                        const existingIds = (SettingsData.controlCenterWidgets || []).map(w => w.id)
+                        const allWidgets = widgetModel.baseWidgetDefinitions.concat(widgetModel.getPluginWidgets())
+                        return allWidgets.filter(w => w.allowMultiple || !existingIds.includes(w.id))
+                    }
+                    onAddWidget: (widgetId) => widgetModel.addWidget(widgetId)
+                    onResetToDefault: () => widgetModel.resetToDefault()
+                    onClearAll: () => widgetModel.clearAll()
+                }
+            }
+
+            BluetoothCodecSelector {
+                id: bluetoothCodecSelector
+                anchors.fill: parent
+                z: 10000
             }
-          }
         }
-      }
+    }
 
-      Behavior on height {
-        NumberAnimation {
-          duration: Theme.shortDuration // Faster for height changes
-          easing.type: Theme.standardEasing
+    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)
+                    })
+                }
+            }
         }
-      }
     }
-  }
 
-  MouseArea {
-    anchors.fill: parent
-    z: -1
-    onClicked: function (mouse) {
-      var localPos = mapToItem(contentLoader, mouse.x, mouse.y)
-      if (localPos.x < 0 || localPos.x > contentLoader.width || localPos.y < 0
-          || localPos.y > contentLoader.height)
-        controlCenterVisible = false
+    Component {
+        id: audioOutputDetailComponent
+        AudioOutputDetail {}
     }
-  }
-}
+
+    Component {
+        id: audioInputDetailComponent
+        AudioInputDetail {}
+    }
+
+    Component {
+        id: batteryDetailComponent
+        BatteryDetail {}
+    }
+
+    property var colorPickerModal: null
+    property var powerMenuModalLoader: null
+}

Modules/ControlCenter/Details/AudioInputDetail.qml

@@ -0,0 +1,201 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Services.Pipewire
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    property bool hasInputVolumeSliderInCC: {
+        const widgets = SettingsData.controlCenterWidgets || []
+        return widgets.some(widget => widget.id === "inputVolumeSlider")
+    }
+
+    implicitHeight: headerRow.height + (hasInputVolumeSliderInCC ? 0 : volumeSlider.height) + audioContent.height + Theme.spacingM
+    radius: Theme.cornerRadius
+    color: Theme.surfaceContainerHigh
+    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.width: 0
+    
+    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: I18n.tr("Input 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: !hasInputVolumeSliderInCC
+
+        Rectangle {
+            width: Theme.iconSize + Theme.spacingS * 2
+            height: Theme.iconSize + Theme.spacingS * 2
+            anchors.verticalCenter: parent.verticalCenter
+            radius: (Theme.iconSize + Theme.spacingS * 2) / 2
+            color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+            MouseArea {
+                id: iconArea
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    if (AudioService.source && AudioService.source.audio) {
+                        AudioService.source.audio.muted = !AudioService.source.audio.muted
+                    }
+                }
+            }
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: {
+                    if (!AudioService.source || !AudioService.source.audio) return "mic_off"
+                    let muted = AudioService.source.audio.muted
+                    return muted ? "mic_off" : "mic"
+                }
+                size: Theme.iconSize
+                color: AudioService.source && AudioService.source.audio && !AudioService.source.audio.muted && AudioService.source.audio.volume > 0 ? Theme.primary : Theme.surfaceText
+            }
+        }
+
+        DankSlider {
+            readonly property real actualVolumePercent: AudioService.source && AudioService.source.audio ? Math.round(AudioService.source.audio.volume * 100) : 0
+
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width - (Theme.iconSize + Theme.spacingS * 2)
+            enabled: AudioService.source && AudioService.source.audio
+            minimum: 0
+            maximum: 100
+            value: AudioService.source && AudioService.source.audio ? Math.min(100, Math.round(AudioService.source.audio.volume * 100)) : 0
+            showValue: true
+            unit: "%"
+            valueOverride: actualVolumePercent
+            thumbOutlineColor: Theme.surfaceVariant
+
+            onSliderValueChanged: function(newValue) {
+                if (AudioService.source && AudioService.source.audio) {
+                    AudioService.source.audio.volume = newValue / 100
+                    if (newValue > 0 && AudioService.source.audio.muted) {
+                        AudioService.source.audio.muted = false
+                    }
+                }
+            }
+        }
+    }
+    
+    DankFlickable {
+        id: audioContent
+        anchors.top: hasInputVolumeSliderInCC ? headerRow.bottom : volumeSlider.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.margins: Theme.spacingM
+        anchors.topMargin: hasInputVolumeSliderInCC ? Theme.spacingM : Theme.spacingS
+        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.surfaceContainerHighest
+                    border.color: modelData === AudioService.source ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                    border.width: 0
+                    
+                    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("usb"))
+                                    return "headset"
+                                else
+                                    return "mic"
+                            }
+                            size: Theme.iconSize - 4
+                            color: modelData === AudioService.source ? 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.source ? Font.Medium : Font.Normal
+                                elide: Text.ElideRight
+                                width: parent.width
+                                wrapMode: Text.NoWrap
+                            }
+                            
+                            StyledText {
+                                text: modelData === AudioService.source ? "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.preferredDefaultAudioSource = modelData
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

Modules/ControlCenter/Details/AudioOutputDetail.qml

@@ -0,0 +1,208 @@
+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: 0
+    
+    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: I18n.tr("Audio Devices")
+            font.pixelSize: Theme.fontSizeLarge
+            color: Theme.surfaceText
+            font.weight: Font.Medium
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+
+    Row {
+        id: volumeSlider
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: headerRow.bottom
+        anchors.leftMargin: Theme.spacingM
+        anchors.rightMargin: Theme.spacingM
+        anchors.topMargin: Theme.spacingXS
+        height: 35
+        spacing: 0
+        visible: !hasVolumeSliderInCC
+
+        Rectangle {
+            width: Theme.iconSize + Theme.spacingS * 2
+            height: Theme.iconSize + Theme.spacingS * 2
+            anchors.verticalCenter: parent.verticalCenter
+            radius: (Theme.iconSize + Theme.spacingS * 2) / 2
+            color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+            MouseArea {
+                id: iconArea
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    if (AudioService.sink && AudioService.sink.audio) {
+                        AudioService.sink.audio.muted = !AudioService.sink.audio.muted
+                    }
+                }
+            }
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: {
+                    if (!AudioService.sink || !AudioService.sink.audio) return "volume_off"
+                    let muted = AudioService.sink.audio.muted
+                    let volume = AudioService.sink.audio.volume
+                    if (muted || volume === 0.0) return "volume_off"
+                    if (volume <= 0.33) return "volume_down"
+                    if (volume <= 0.66) return "volume_up"
+                    return "volume_up"
+                }
+                size: Theme.iconSize
+                color: AudioService.sink && AudioService.sink.audio && !AudioService.sink.audio.muted && AudioService.sink.audio.volume > 0 ? Theme.primary : Theme.surfaceText
+            }
+        }
+
+        DankSlider {
+            readonly property real actualVolumePercent: AudioService.sink && AudioService.sink.audio ? Math.round(AudioService.sink.audio.volume * 100) : 0
+
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width - (Theme.iconSize + Theme.spacingS * 2)
+            enabled: AudioService.sink && AudioService.sink.audio
+            minimum: 0
+            maximum: 100
+            value: AudioService.sink && AudioService.sink.audio ? Math.min(100, Math.round(AudioService.sink.audio.volume * 100)) : 0
+            showValue: true
+            unit: "%"
+            valueOverride: actualVolumePercent
+            thumbOutlineColor: Theme.surfaceVariant
+
+            onSliderValueChanged: function(newValue) {
+                if (AudioService.sink && AudioService.sink.audio) {
+                    AudioService.sink.audio.volume = newValue / 100
+                    if (newValue > 0 && AudioService.sink.audio.muted) {
+                        AudioService.sink.audio.muted = false
+                    }
+                    AudioService.volumeChanged()
+                }
+            }
+        }
+    }
+
+    DankFlickable {
+        id: audioContent
+        anchors.top: 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.surfaceContainerHighest
+                    border.color: modelData === AudioService.sink ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                    border.width: 0
+                    
+                    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
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

Modules/ControlCenter/Details/BatteryDetail.qml

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

Modules/ControlCenter/Details/BluetoothCodecSelector.qml

@@ -0,0 +1,301 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Io
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    property var device: null
+    property bool modalVisible: false
+    property var parentItem
+    property var availableCodecs: []
+    property string currentCodec: ""
+    property bool isLoading: false
+
+    signal codecSelected(string deviceAddress, string codecName)
+
+    function show(bluetoothDevice) {
+        device = bluetoothDevice;
+        isLoading = true;
+        availableCodecs = [];
+        currentCodec = "";
+        visible = true;
+        modalVisible = true;
+        queryCodecs();
+        Qt.callLater(() => {
+            focusScope.forceActiveFocus();
+        });
+    }
+
+    function hide() {
+        modalVisible = false;
+        Qt.callLater(() => {
+            visible = false;
+        });
+    }
+
+    function queryCodecs() {
+        if (!device)
+            return;
+
+        BluetoothService.getAvailableCodecs(device, function(codecs, current) {
+            availableCodecs = codecs;
+            currentCodec = current;
+            isLoading = false;
+        });
+    }
+
+    function selectCodec(profileName) {
+        if (!device || isLoading)
+            return;
+
+        let selectedCodec = availableCodecs.find(c => c.profile === profileName);
+        if (selectedCodec && device) {
+            BluetoothService.updateDeviceCodec(device.address, selectedCodec.name);
+            codecSelected(device.address, selectedCodec.name);
+        }
+
+        isLoading = true;
+        BluetoothService.switchCodec(device, profileName, function(success, message) {
+            isLoading = false;
+            if (success) {
+                ToastService.showToast(message, ToastService.levelInfo);
+                Qt.callLater(root.hide);
+            } else {
+                ToastService.showToast(message, ToastService.levelError);
+            }
+        });
+    }
+
+    visible: false
+    anchors.fill: parent
+    z: 2000
+
+    MouseArea {
+        id: modalBlocker
+        anchors.fill: parent
+        visible: modalVisible
+        enabled: modalVisible
+        hoverEnabled: true
+        preventStealing: true
+        propagateComposedEvents: false
+        
+        onClicked: root.hide()
+        onWheel: (wheel) => { wheel.accepted = true }
+        onPositionChanged: (mouse) => { mouse.accepted = true }
+    }
+    
+    Rectangle {
+        id: modalBackground
+        anchors.fill: parent
+        color: Qt.rgba(0, 0, 0, 0.5)
+        opacity: modalVisible ? 1 : 0
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: Theme.mediumDuration
+                easing.type: Theme.emphasizedEasing
+            }
+        }
+    }
+
+    FocusScope {
+        id: focusScope
+
+        anchors.fill: parent
+        focus: root.visible
+        enabled: root.visible
+
+        Keys.onEscapePressed: {
+            root.hide()
+            event.accepted = true
+        }
+    }
+
+    Rectangle {
+        id: modalContent
+        anchors.centerIn: parent
+        width: 320
+        height: contentColumn.implicitHeight + Theme.spacingL * 2
+        radius: Theme.cornerRadius
+        color: Theme.surfaceContainer
+        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+        border.width: 0
+        opacity: modalVisible ? 1 : 0
+        scale: modalVisible ? 1 : 0.9
+
+        MouseArea {
+            anchors.fill: parent
+            hoverEnabled: true
+            preventStealing: true
+            propagateComposedEvents: false
+            onClicked: (mouse) => { mouse.accepted = true }
+            onWheel: (wheel) => { wheel.accepted = true }
+            onPositionChanged: (mouse) => { mouse.accepted = true }
+        }
+
+        Column {
+            id: contentColumn
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.margins: Theme.spacingL
+            spacing: Theme.spacingM
+
+            Row {
+                width: parent.width
+                spacing: Theme.spacingM
+
+                DankIcon {
+                    name: device ? BluetoothService.getDeviceIcon(device) : "headset"
+                    size: Theme.iconSize + 4
+                    color: Theme.primary
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                Column {
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: 2
+
+                    StyledText {
+                        text: device ? (device.name || device.deviceName) : ""
+                        font.pixelSize: Theme.fontSizeLarge
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                    }
+
+                    StyledText {
+                        text: I18n.tr("Audio Codec Selection")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceTextMedium
+                    }
+
+                }
+
+            }
+
+            Rectangle {
+                width: parent.width
+                height: 1
+                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
+            }
+
+            StyledText {
+                text: isLoading ? "Loading codecs..." : `Current: ${currentCodec}`
+                font.pixelSize: Theme.fontSizeSmall
+                color: isLoading ? Theme.primary : Theme.surfaceTextMedium
+                font.weight: Font.Medium
+            }
+
+            Column {
+                width: parent.width
+                spacing: Theme.spacingXS
+                visible: !isLoading
+
+                Repeater {
+                    model: availableCodecs
+
+                    Rectangle {
+                        width: parent.width
+                        height: 48
+                        radius: Theme.cornerRadius
+                        color: {
+                            if (modelData.name === currentCodec)
+                                return Theme.surfaceContainerHighest;
+                            else if (codecMouseArea.containsMouse)
+                                return Theme.surfaceHover;
+                            else
+                                return "transparent";
+                        }
+                        border.color: "transparent"
+                        border.width: 0
+
+                        Row {
+                            anchors.left: parent.left
+                            anchors.leftMargin: Theme.spacingM
+                            anchors.verticalCenter: parent.verticalCenter
+                            spacing: Theme.spacingS
+
+                            Rectangle {
+                                width: 6
+                                height: 6
+                                radius: 3
+                                color: modelData.qualityColor
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                            Column {
+                                anchors.verticalCenter: parent.verticalCenter
+                                spacing: 2
+
+                                StyledText {
+                                    text: modelData.name
+                                    font.pixelSize: Theme.fontSizeMedium
+                                    color: modelData.name === currentCodec ? Theme.primary : Theme.surfaceText
+                                    font.weight: modelData.name === currentCodec ? Font.Medium : Font.Normal
+                                }
+
+                                StyledText {
+                                    text: modelData.description
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: Theme.surfaceTextMedium
+                                }
+
+                            }
+
+                        }
+
+                        DankIcon {
+                            name: "check"
+                            size: Theme.iconSize - 4
+                            color: Theme.primary
+                            anchors.right: parent.right
+                            anchors.rightMargin: Theme.spacingM
+                            anchors.verticalCenter: parent.verticalCenter
+                            visible: modelData.name === currentCodec
+                        }
+
+                        MouseArea {
+                            id: codecMouseArea
+
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            enabled: modelData.name !== currentCodec && !isLoading
+                            onClicked: {
+                                selectCodec(modelData.profile);
+                            }
+                        }
+
+
+                    }
+
+                }
+
+            }
+
+        }
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: Theme.mediumDuration
+                easing.type: Theme.emphasizedEasing
+            }
+
+        }
+
+        Behavior on scale {
+            NumberAnimation {
+                duration: Theme.mediumDuration
+                easing.type: Theme.emphasizedEasing
+            }
+
+        }
+
+    }
+}

Modules/ControlCenter/Details/BluetoothDetail.qml

@@ -0,0 +1,525 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Bluetooth
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    implicitHeight: BluetoothService.adapter && BluetoothService.adapter.enabled ? headerRow.height + bluetoothContent.height + Theme.spacingM : headerRow.height
+    radius: Theme.cornerRadius
+    color: Theme.surfaceContainerHigh
+    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.width: 0
+    
+    property var bluetoothCodecModalRef: null
+    
+    signal showCodecSelector(var device)
+    
+    function updateDeviceCodecDisplay(deviceAddress, codecName) {
+        for (let i = 0; i < pairedRepeater.count; i++) {
+            let item = pairedRepeater.itemAt(i)
+            if (item && item.modelData && item.modelData.address === deviceAddress) {
+                item.currentCodec = codecName
+                break
+            }
+        }
+    }
+    
+    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: I18n.tr("Bluetooth 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 - scanButton.width - Theme.spacingM)
+            height: parent.height
+        }
+        
+        Rectangle {
+            id: scanButton
+            width: 100
+            height: 36
+            radius: 18
+            color: {
+                if (!BluetoothService.adapter || !BluetoothService.adapter.enabled)
+                    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
+            visible: BluetoothService.adapter && BluetoothService.adapter.enabled
+            
+            Row {
+                anchors.centerIn: parent
+                spacing: Theme.spacingXS
+                
+                DankIcon {
+                    name: BluetoothService.adapter && BluetoothService.adapter.discovering ? "stop" : "bluetooth_searching"
+                    size: 18
+                    color: BluetoothService.adapter && BluetoothService.adapter.enabled ? Theme.primary : Theme.surfaceVariantText
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+                
+                StyledText {
+                    text: BluetoothService.adapter && BluetoothService.adapter.discovering ? "Scanning" : "Scan"
+                    color: BluetoothService.adapter && BluetoothService.adapter.enabled ? Theme.primary : Theme.surfaceVariantText
+                    font.pixelSize: Theme.fontSizeMedium
+                    font.weight: Font.Medium
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
+            
+            MouseArea {
+                id: scanMouseArea
+                anchors.fill: parent
+                hoverEnabled: true
+                enabled: BluetoothService.adapter && BluetoothService.adapter.enabled
+                cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+                onClicked: {
+                    if (BluetoothService.adapter)
+                        BluetoothService.adapter.discovering = !BluetoothService.adapter.discovering
+                }
+            }
+        }
+    }
+    
+    DankFlickable {
+        id: bluetoothContent
+        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: BluetoothService.adapter && BluetoothService.adapter.enabled
+        contentHeight: bluetoothColumn.height
+        clip: true
+        
+        Column {
+            id: bluetoothColumn
+            width: parent.width
+            spacing: Theme.spacingS
+            
+            
+            Repeater {
+                id: pairedRepeater
+                model: {
+                    if (!BluetoothService.adapter || !BluetoothService.adapter.devices)
+                        return []
+                    
+                    let devices = [...BluetoothService.adapter.devices.values.filter(dev => dev && (dev.paired || dev.trusted))]
+                    devices.sort((a, b) => {
+                        if (a.connected && !b.connected) return -1
+                        if (!a.connected && b.connected) return 1
+                        return (b.signalStrength || 0) - (a.signalStrength || 0)
+                    })
+                    return devices
+                }
+                
+                delegate: Rectangle {
+                    required property var modelData
+                    required property int index
+                    
+                    property string currentCodec: BluetoothService.deviceCodecs[modelData.address] || ""
+                    
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    
+                    Component.onCompleted: {
+                        if (modelData.connected && BluetoothService.isAudioDevice(modelData)) {
+                            BluetoothService.refreshDeviceCodec(modelData)
+                        }
+                    }
+                    color: {
+                        if (modelData.state === BluetoothDeviceState.Connecting)
+                            return Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.12)
+                        if (deviceMouseArea.containsMouse)
+                            return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
+                        return Theme.surfaceContainerHighest
+                    }
+                    border.color: {
+                        if (modelData.state === BluetoothDeviceState.Connecting)
+                            return Theme.warning
+                        if (modelData.connected)
+                            return Theme.primary
+                        return Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                    }
+                    border.width: 0
+                    
+                    Row {
+                        anchors.left: parent.left
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.leftMargin: Theme.spacingM
+                        spacing: Theme.spacingS
+                        
+                        DankIcon {
+                            name: BluetoothService.getDeviceIcon(modelData)
+                            size: Theme.iconSize - 4
+                            color: {
+                                if (modelData.state === BluetoothDeviceState.Connecting)
+                                    return Theme.warning
+                                if (modelData.connected)
+                                    return Theme.primary
+                                return Theme.surfaceText
+                            }
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                        
+                        Column {
+                            anchors.verticalCenter: parent.verticalCenter
+                            width: 200
+                            
+                            StyledText {
+                                text: modelData.name || modelData.deviceName || "Unknown Device"
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceText
+                                font.weight: modelData.connected ? Font.Medium : Font.Normal
+                                elide: Text.ElideRight
+                                width: parent.width
+                            }
+                            
+                            Row {
+                                spacing: Theme.spacingXS
+                                
+                                StyledText {
+                                    text: {
+                                        if (modelData.state === BluetoothDeviceState.Connecting)
+                                            return "Connecting..."
+                                        if (modelData.connected) {
+                                            let status = "Connected"
+                                            if (currentCodec) {
+                                                status += " • " + currentCodec
+                                            }
+                                            return status
+                                        }
+                                        return "Paired"
+                                    }
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: {
+                                        if (modelData.state === BluetoothDeviceState.Connecting)
+                                            return Theme.warning
+                                        return Theme.surfaceVariantText
+                                    }
+                                }
+                                
+                                StyledText {
+                                    text: {
+                                        if (modelData.batteryAvailable && modelData.battery > 0)
+                                            return "• " + Math.round(modelData.battery * 100) + "%"
+                                        
+                                        var btBattery = BatteryService.bluetoothDevices.find(dev => {
+                                            return dev.name === (modelData.name || modelData.deviceName) ||
+                                                   dev.name.toLowerCase().includes((modelData.name || modelData.deviceName).toLowerCase()) ||
+                                                   (modelData.name || modelData.deviceName).toLowerCase().includes(dev.name.toLowerCase())
+                                        })
+                                        return btBattery ? "• " + btBattery.percentage + "%" : ""
+                                    }
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: Theme.surfaceVariantText
+                                    visible: text.length > 0
+                                }
+                                
+                                StyledText {
+                                    text: modelData.signalStrength !== undefined && modelData.signalStrength > 0 ? "• " + modelData.signalStrength + "%" : ""
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: Theme.surfaceVariantText
+                                    visible: text.length > 0
+                                }
+                            }
+                        }
+                    }
+                    
+                    DankActionButton {
+                        id: pairedOptionsButton
+                        anchors.right: parent.right
+                        anchors.rightMargin: Theme.spacingS
+                        anchors.verticalCenter: parent.verticalCenter
+                        iconName: "more_horiz"
+                        buttonSize: 28
+                        onClicked: {
+                            if (bluetoothContextMenu.visible) {
+                                bluetoothContextMenu.close()
+                            } else {
+                                bluetoothContextMenu.currentDevice = modelData
+                                bluetoothContextMenu.popup(pairedOptionsButton, -bluetoothContextMenu.width + pairedOptionsButton.width, pairedOptionsButton.height + Theme.spacingXS)
+                            }
+                        }
+                    }
+                    
+                    MouseArea {
+                        id: deviceMouseArea
+                        anchors.fill: parent
+                        anchors.rightMargin: pairedOptionsButton.width + Theme.spacingS
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            if (modelData.connected) {
+                                modelData.disconnect()
+                            } else {
+                                BluetoothService.connectDeviceWithTrust(modelData)
+                            }
+                        }
+                    }
+                }
+            }
+            
+            Rectangle {
+                width: parent.width
+                height: 1
+                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                visible: pairedRepeater.count > 0 && availableRepeater.count > 0
+            }
+            
+            
+            Item {
+                width: parent.width
+                height: 80
+                visible: BluetoothService.adapter && BluetoothService.adapter.discovering && availableRepeater.count === 0
+                
+                DankIcon {
+                    anchors.centerIn: parent
+                    name: "sync"
+                    size: 24
+                    color: Qt.rgba(Theme.surfaceText.r || 0.8, Theme.surfaceText.g || 0.8, Theme.surfaceText.b || 0.8, 0.4)
+                    
+                    RotationAnimation on rotation {
+                        running: parent.visible && BluetoothService.adapter && BluetoothService.adapter.discovering && availableRepeater.count === 0
+                        loops: Animation.Infinite
+                        from: 0
+                        to: 360
+                        duration: 1500
+                    }
+                }
+            }
+            
+            Repeater {
+                id: availableRepeater
+                model: {
+                    if (!BluetoothService.adapter || !BluetoothService.adapter.discovering || !Bluetooth.devices)
+                        return []
+                    
+                    var filtered = Bluetooth.devices.values.filter(dev => {
+                        return dev && !dev.paired && !dev.pairing && !dev.blocked &&
+                               (dev.signalStrength === undefined || dev.signalStrength > 0)
+                    })
+                    return BluetoothService.sortDevices(filtered)
+                }
+                
+                delegate: Rectangle {
+                    required property var modelData
+                    required property int index
+                    
+                    property bool canConnect: BluetoothService.canConnect(modelData)
+                    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.surfaceContainerHighest
+                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                    border.width: 0
+                    opacity: canConnect ? 1 : 0.6
+                    
+                    Row {
+                        anchors.left: parent.left
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.leftMargin: Theme.spacingM
+                        spacing: Theme.spacingS
+                        
+                        DankIcon {
+                            name: BluetoothService.getDeviceIcon(modelData)
+                            size: Theme.iconSize - 4
+                            color: Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                        
+                        Column {
+                            anchors.verticalCenter: parent.verticalCenter
+                            width: 200
+                            
+                            StyledText {
+                                text: modelData.name || modelData.deviceName || "Unknown Device"
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceText
+                                elide: Text.ElideRight
+                                width: parent.width
+                            }
+                            
+                            Row {
+                                spacing: Theme.spacingXS
+                                
+                                StyledText {
+                                    text: {
+                                        if (modelData.pairing) return "Pairing..."
+                                        if (modelData.blocked) return "Blocked"
+                                        return BluetoothService.getSignalStrength(modelData)
+                                    }
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: Theme.surfaceVariantText
+                                }
+                                
+                                StyledText {
+                                    text: modelData.signalStrength !== undefined && modelData.signalStrength > 0 ? "• " + modelData.signalStrength + "%" : ""
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: Theme.surfaceVariantText
+                                    visible: text.length > 0 && !modelData.pairing && !modelData.blocked
+                                }
+                            }
+                        }
+                    }
+                    
+                    StyledText {
+                        anchors.right: parent.right
+                        anchors.rightMargin: Theme.spacingM
+                        anchors.verticalCenter: parent.verticalCenter
+                        text: {
+                            if (modelData.pairing) return "Pairing..."
+                            if (!canConnect) return "Cannot pair"
+                            return "Pair"
+                        }
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: canConnect ? Theme.primary : Theme.surfaceVariantText
+                        font.weight: Font.Medium
+                    }
+                    
+                    MouseArea {
+                        id: availableMouseArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: canConnect && !isBusy ? Qt.PointingHandCursor : Qt.ArrowCursor
+                        enabled: canConnect && !isBusy
+                        onClicked: {
+                            if (modelData) {
+                                BluetoothService.connectDeviceWithTrust(modelData)
+                            }
+                        }
+                    }
+                    
+                }
+            }
+            
+            Item {
+                width: parent.width
+                height: 60
+                visible: !BluetoothService.adapter
+                
+                StyledText {
+                    anchors.centerIn: parent
+                    text: I18n.tr("No Bluetooth adapter found")
+                    font.pixelSize: Theme.fontSizeMedium
+                    color: Theme.surfaceVariantText
+                }
+            }
+        }
+    }
+    
+    Menu {
+        id: bluetoothContextMenu
+        width: 150
+        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+        
+        property var currentDevice: null
+        
+        background: Rectangle {
+            color: Theme.popupBackground()
+            radius: Theme.cornerRadius
+            border.width: 0
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+        }
+        
+        MenuItem {
+            text: bluetoothContextMenu.currentDevice && bluetoothContextMenu.currentDevice.connected ? "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 (bluetoothContextMenu.currentDevice) {
+                    if (bluetoothContextMenu.currentDevice.connected) {
+                        bluetoothContextMenu.currentDevice.disconnect()
+                    } else {
+                        BluetoothService.connectDeviceWithTrust(bluetoothContextMenu.currentDevice)
+                    }
+                }
+            }
+        }
+        
+        MenuItem {
+            text: I18n.tr("Audio Codec")
+            height: bluetoothContextMenu.currentDevice && BluetoothService.isAudioDevice(bluetoothContextMenu.currentDevice) && bluetoothContextMenu.currentDevice.connected ? 32 : 0
+            visible: bluetoothContextMenu.currentDevice && BluetoothService.isAudioDevice(bluetoothContextMenu.currentDevice) && bluetoothContextMenu.currentDevice.connected
+            
+            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 (bluetoothContextMenu.currentDevice) {
+                    showCodecSelector(bluetoothContextMenu.currentDevice)
+                }
+            }
+        }
+        
+        MenuItem {
+            text: I18n.tr("Forget Device")
+            height: 32
+            
+            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: {
+                if (bluetoothContextMenu.currentDevice) {
+                    bluetoothContextMenu.currentDevice.forget()
+                }
+            }
+        }
+    }
+    
+}

Modules/ControlCenter/Details/DiskUsageDetail.qml

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