switch hto monorepo structure

quickshell/Modals/BluetoothPairingModal.qml

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

quickshell/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
+}

quickshell/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
+    }
+}

quickshell/Modals/Clipboard/ClipboardEntry.qml

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

quickshell/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()
+        }
+    }
+}

quickshell/Modals/Clipboard/ClipboardHistoryModal.qml

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

quickshell/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
+        }
+    }
+}

quickshell/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
+        }
+    }
+}

quickshell/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
+    }
+}

quickshell/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
+    }
+}

quickshell/Modals/Common/ConfirmModal.qml

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

quickshell/Modals/Common/DankModal.qml

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

quickshell/Modals/DankColorPickerModal.qml

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

quickshell/Modals/DisplayConfirmationModal.qml

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

quickshell/Modals/FileBrowser/FileBrowserGridDelegate.qml

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

quickshell/Modals/FileBrowser/FileBrowserListDelegate.qml

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

quickshell/Modals/FileBrowser/FileBrowserModal.qml

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

quickshell/Modals/FileBrowser/FileBrowserNavigation.qml

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

quickshell/Modals/FileBrowser/FileBrowserOverwriteDialog.qml

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

quickshell/Modals/FileBrowser/FileBrowserSaveRow.qml

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

quickshell/Modals/FileBrowser/FileBrowserSidebar.qml

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

quickshell/Modals/FileBrowser/FileBrowserSortMenu.qml

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

quickshell/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
+        }
+    }
+}

quickshell/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
+        }
+    }
+}

quickshell/Modals/KeybindsModal.qml

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

quickshell/Modals/NetworkInfoModal.qml

@@ -0,0 +1,164 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Modals.Common
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: root
+
+    layerNamespace: "dms:network-info"
+
+    property bool networkInfoModalVisible: false
+    property string networkSSID: ""
+    property var networkData: null
+
+    function showNetworkInfo(ssid, data) {
+        networkSSID = ssid
+        networkData = data
+        networkInfoModalVisible = true
+        open()
+        NetworkService.fetchNetworkInfo(ssid)
+    }
+
+    function hideDialog() {
+        networkInfoModalVisible = false
+        close()
+        networkSSID = ""
+        networkData = null
+    }
+
+    visible: networkInfoModalVisible
+    width: 600
+    height: 500
+    enableShadow: true
+    onBackgroundClicked: hideDialog()
+    onVisibleChanged: {
+        if (!visible) {
+            networkSSID = ""
+            networkData = null
+        }
+    }
+
+    content: Component {
+        Item {
+            anchors.fill: parent
+
+            Column {
+                anchors.fill: parent
+                anchors.margins: Theme.spacingL
+                spacing: Theme.spacingL
+
+                Row {
+                    width: parent.width
+
+                    Column {
+                        width: parent.width - 40
+                        spacing: Theme.spacingXS
+
+                        StyledText {
+                            text: I18n.tr("Network Information")
+                            font.pixelSize: Theme.fontSizeLarge
+                            color: Theme.surfaceText
+                            font.weight: Font.Medium
+                        }
+
+                        StyledText {
+                            text: `Details for "${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
+                            }
+
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}

quickshell/Modals/NetworkWiredInfoModal.qml

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

quickshell/Modals/NotificationModal.qml

@@ -0,0 +1,152 @@
+import QtQuick
+import Quickshell.Io
+import qs.Common
+import qs.Modals.Common
+import qs.Modules.Notifications.Center
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: notificationModal
+
+    layerNamespace: "dms:notification-center-modal"
+
+    property bool notificationModalOpen: false
+    property var notificationListRef: null
+
+    function show() {
+        notificationModalOpen = 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
+        NotificationService.onOverlayClose()
+        close()
+        modalKeyboardController.reset()
+    }
+
+    function toggle() {
+        if (shouldBeVisible) {
+            hide()
+        } 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(): string {
+            notificationModal.show();
+            return "NOTIFICATION_MODAL_OPEN_SUCCESS";
+        }
+
+        function close(): string {
+            notificationModal.hide();
+            return "NOTIFICATION_MODAL_CLOSE_SUCCESS";
+        }
+
+        function toggle(): string {
+            notificationModal.toggle();
+            return "NOTIFICATION_MODAL_TOGGLE_SUCCESS";
+        }
+
+        target: "notifications"
+    }
+
+    content: Component {
+        Item {
+            id: notificationKeyHandler
+
+            anchors.fill: parent
+
+            Column {
+                anchors.fill: parent
+                anchors.margins: Theme.spacingL
+                spacing: Theme.spacingM
+
+                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) {
+                            modalKeyboardController.listView = notificationList
+                            modalKeyboardController.rebuildFlatNavigation()
+                        }
+                    }
+                }
+
+            }
+
+            NotificationKeyboardHints {
+                id: keyboardHints
+
+                anchors.bottom: parent.bottom
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.margins: Theme.spacingL
+                showHints: modalKeyboardController.showKeyboardHints
+            }
+
+        }
+
+    }
+
+}

quickshell/Modals/PolkitAuthModal.qml

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

quickshell/Modals/PowerMenuModal.qml

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

quickshell/Modals/ProcessListModal.qml

@@ -0,0 +1,358 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Common
+import qs.Modals.Common
+import qs.Modules.ProcessList
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: processListModal
+
+    layerNamespace: "dms:process-list-modal"
+
+    property int currentTab: 0
+    property var tabNames: ["Processes", "Performance", "System"]
+
+    function show() {
+        if (!DgopService.dgopAvailable) {
+            console.warn("ProcessListModal: dgop is not available");
+            return ;
+        }
+        open();
+        UserInfoService.getUptime();
+    }
+
+    function hide() {
+        close();
+        if (processContextMenu.visible) {
+            processContextMenu.close();
+        }
+
+    }
+
+    function toggle() {
+        if (!DgopService.dgopAvailable) {
+            console.warn("ProcessListModal: dgop is not available");
+            return ;
+        }
+        if (shouldBeVisible) {
+            hide();
+        } else {
+            show();
+        }
+    }
+
+    width: 900
+    height: 680
+    visible: false
+    backgroundColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    cornerRadius: Theme.cornerRadius
+    enableShadow: true
+    onBackgroundClicked: () => {
+        return hide();
+    }
+
+    Component {
+        id: processesTabComponent
+
+        ProcessesTab {
+            contextMenu: processContextMenu
+        }
+
+    }
+
+    Component {
+        id: performanceTabComponent
+
+        PerformanceTab {
+        }
+
+    }
+
+    Component {
+        id: systemTabComponent
+
+        SystemTab {
+        }
+
+    }
+
+    ProcessContextMenu {
+        id: processContextMenu
+    }
+
+    content: Component {
+        Item {
+            anchors.fill: parent
+            focus: true
+            Keys.onPressed: (event) => {
+                if (event.key === Qt.Key_Escape) {
+                    processListModal.hide();
+                    event.accepted = true;
+                } else if (event.key === Qt.Key_1) {
+                    currentTab = 0;
+                    event.accepted = true;
+                } else if (event.key === Qt.Key_2) {
+                    currentTab = 1;
+                    event.accepted = true;
+                } else if (event.key === Qt.Key_3) {
+                    currentTab = 2;
+                    event.accepted = true;
+                }
+            }
+
+            // Show error message when dgop is not available
+            Rectangle {
+                anchors.centerIn: parent
+                width: 400
+                height: 200
+                radius: Theme.cornerRadius
+                color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.1)
+                border.color: Theme.error
+                border.width: 2
+                visible: !DgopService.dgopAvailable
+
+                Column {
+                    anchors.centerIn: parent
+                    spacing: Theme.spacingL
+
+                    DankIcon {
+                        name: "error"
+                        size: 48
+                        color: Theme.error
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+
+                    StyledText {
+                        text: I18n.tr("System Monitor Unavailable")
+                        font.pixelSize: Theme.fontSizeLarge
+                        font.weight: Font.Bold
+                        color: Theme.error
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+
+                    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
+                    }
+
+                }
+
+            }
+
+            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.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                    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.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                    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
+                            }
+
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}

quickshell/Modals/Settings/PowerSettings.qml

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

quickshell/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
+            }
+
+        }
+
+    }
+
+}

quickshell/Modals/Settings/SettingsContent.qml

@@ -0,0 +1,241 @@
+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
+            focus: active
+
+            sourceComponent: Component {
+                PersonalizationTab {
+                    parentModal: root.parentModal
+                }
+
+            }
+
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
+        }
+
+        Loader {
+            id: timeWeatherLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 1
+            visible: active
+            focus: active
+
+            sourceComponent: TimeWeatherTab {
+            }
+
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
+        }
+
+        Loader {
+            id: topBarLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 2
+            visible: active
+            focus: active
+
+            sourceComponent: DankBarTab {
+                parentModal: root.parentModal
+            }
+
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
+        }
+
+        Loader {
+            id: widgetsLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 3
+            visible: active
+            focus: active
+
+            sourceComponent: WidgetTweaksTab {
+            }
+
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
+        }
+
+        Loader {
+            id: dockLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 4
+            visible: active
+            focus: active
+
+            sourceComponent: Component {
+                DockTab {
+                }
+
+            }
+
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
+        }
+
+        Loader {
+            id: displaysLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 5
+            visible: active
+            focus: active
+
+            sourceComponent: DisplaysTab {
+            }
+
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
+        }
+
+        Loader {
+            id: launcherLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 6
+            visible: active
+            focus: active
+
+            sourceComponent: LauncherTab {
+            }
+
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
+        }
+
+        Loader {
+            id: themeColorsLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 7
+            visible: active
+            focus: active
+
+            sourceComponent: ThemeColorsTab {
+            }
+
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
+        }
+
+        Loader {
+            id: powerLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 8
+            visible: active
+            focus: active
+
+            sourceComponent: PowerSettings {
+            }
+
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
+        }
+
+        Loader {
+            id: pluginsLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 9
+            visible: active
+            focus: active
+
+            sourceComponent: PluginsTab {
+                parentModal: root.parentModal
+            }
+
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
+        }
+
+        Loader {
+            id: aboutLoader
+
+            anchors.fill: parent
+            active: root.currentIndex === 10
+            visible: active
+            focus: active
+
+            sourceComponent: AboutTab {
+            }
+
+            onActiveChanged: {
+                if (active && item) {
+                    Qt.callLater(() => item.forceActiveFocus())
+                }
+            }
+
+        }
+
+    }
+
+}

quickshell/Modals/Settings/SettingsModal.qml

@@ -0,0 +1,260 @@
+import QtQuick
+import QtQuick.Effects
+import Quickshell.Io
+import qs.Common
+import qs.Modals.Common
+import qs.Modals.FileBrowser
+import qs.Modules.Settings
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: settingsModal
+
+    layerNamespace: "dms:settings"
+
+    property Component settingsContent
+    property alias profileBrowser: profileBrowser
+    property int currentTabIndex: 0
+
+    signal closingModal()
+
+    function show() {
+        open();
+    }
+
+    function hide() {
+        close();
+    }
+
+    function toggle() {
+        if (shouldBeVisible) {
+            hide();
+        } else {
+            show();
+        }
+    }
+
+    objectName: "settingsModal"
+    width: Math.min(800, screenWidth * 0.9)
+    height: Math.min(800, screenHeight * 0.85)
+    backgroundColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    visible: false
+    onBackgroundClicked: () => {
+        return hide();
+    }
+    content: settingsContent
+    onOpened: () => {
+        Qt.callLater(() => {
+            modalFocusScope.forceActiveFocus()
+            if (contentLoader.item) {
+                contentLoader.item.forceActiveFocus()
+            }
+        })
+    }
+
+    onVisibleChanged: {
+        if (visible && shouldBeVisible) {
+            Qt.callLater(() => {
+                modalFocusScope.forceActiveFocus()
+                if (contentLoader.item) {
+                    contentLoader.item.forceActiveFocus()
+                }
+            })
+        }
+    }
+    modalFocusScope.Keys.onPressed: event => {
+        const tabCount = 11
+        if (event.key === Qt.Key_Down) {
+            currentTabIndex = (currentTabIndex + 1) % tabCount
+            event.accepted = true
+        } else if (event.key === Qt.Key_Up) {
+            currentTabIndex = (currentTabIndex - 1 + tabCount) % tabCount
+            event.accepted = true
+        } else if (event.key === Qt.Key_Tab && !event.modifiers) {
+            currentTabIndex = (currentTabIndex + 1) % tabCount
+            event.accepted = true
+        } else if (event.key === Qt.Key_Backtab || (event.key === Qt.Key_Tab && event.modifiers & Qt.ShiftModifier)) {
+            currentTabIndex = (currentTabIndex - 1 + tabCount) % tabCount
+            event.accepted = true
+        }
+    }
+
+    IpcHandler {
+        function open(): string {
+            settingsModal.show();
+            return "SETTINGS_OPEN_SUCCESS";
+        }
+
+        function close(): string {
+            settingsModal.hide();
+            return "SETTINGS_CLOSE_SUCCESS";
+        }
+
+        function toggle(): string {
+            settingsModal.toggle();
+            return "SETTINGS_TOGGLE_SUCCESS";
+        }
+
+        target: "settings"
+    }
+
+    IpcHandler {
+        function browse(type: string) {
+            if (type === "wallpaper") {
+                wallpaperBrowser.allowStacking = false;
+                wallpaperBrowser.open();
+            } else if (type === "profile") {
+                profileBrowser.allowStacking = false;
+                profileBrowser.open();
+            }
+        }
+
+        target: "file"
+    }
+
+    FileBrowserModal {
+        id: profileBrowser
+
+        allowStacking: true
+        parentModal: settingsModal
+        browserTitle: "Select Profile Image"
+        browserIcon: "person"
+        browserType: "profile"
+        showHiddenFiles: true
+        fileExtensions: ["*.jpg", "*.jpeg", "*.png", "*.bmp", "*.gif", "*.webp"]
+        onFileSelected: (path) => {
+            PortalService.setProfileImage(path);
+            close();
+        }
+        onDialogClosed: () => {
+            allowStacking = true;
+            if (settingsModal.shouldBeVisible) {
+                Qt.callLater(() => {
+                    settingsModal.modalFocusScope.forceActiveFocus()
+                    if (settingsModal.contentLoader.item) {
+                        settingsModal.contentLoader.item.forceActiveFocus()
+                    }
+                })
+            }
+        }
+    }
+
+    FileBrowserModal {
+        id: wallpaperBrowser
+
+        allowStacking: true
+        parentModal: settingsModal
+        browserTitle: "Select Wallpaper"
+        browserIcon: "wallpaper"
+        browserType: "wallpaper"
+        showHiddenFiles: true
+        fileExtensions: ["*.jpg", "*.jpeg", "*.png", "*.bmp", "*.gif", "*.webp"]
+        onFileSelected: (path) => {
+            SessionData.setWallpaper(path);
+            close();
+        }
+        onDialogClosed: () => {
+            allowStacking = true;
+            if (settingsModal.shouldBeVisible) {
+                Qt.callLater(() => {
+                    settingsModal.modalFocusScope.forceActiveFocus()
+                    if (settingsModal.contentLoader.item) {
+                        settingsModal.contentLoader.item.forceActiveFocus()
+                    }
+                })
+            }
+        }
+    }
+
+    settingsContent: Component {
+        Item {
+            id: rootScope
+            anchors.fill: parent
+
+            Keys.onEscapePressed: event => {
+                settingsModal.hide()
+                event.accepted = 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
+                        currentIndex: settingsModal.currentTabIndex
+                        onCurrentIndexChanged: {
+                            settingsModal.currentTabIndex = currentIndex
+                        }
+                    }
+
+                    SettingsContent {
+                        id: content
+
+                        width: parent.width - sidebar.width
+                        height: parent.height
+                        parentModal: settingsModal
+                        currentIndex: settingsModal.currentTabIndex
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}

quickshell/Modals/Settings/SettingsSidebar.qml

@@ -0,0 +1,158 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import qs.Common
+import qs.Modals.Settings
+import qs.Widgets
+
+Rectangle {
+    id: sidebarContainer
+
+    property int currentIndex: 0
+    property var parentModal: null
+    readonly property var sidebarItems: [{
+        "text": I18n.tr("Personalization"),
+        "icon": "person"
+    }, {
+        "text": I18n.tr("Time & Weather"),
+        "icon": "schedule"
+    }, {
+        "text": I18n.tr("Dank Bar"),
+        "icon": "toolbar"
+    }, {
+        "text": I18n.tr("Widgets"),
+        "icon": "widgets"
+    }, {
+        "text": I18n.tr("Dock"),
+        "icon": "dock_to_bottom"
+    }, {
+        "text": I18n.tr("Displays"),
+        "icon": "monitor"
+    }, {
+        "text": I18n.tr("Launcher"),
+        "icon": "apps"
+    }, {
+        "text": I18n.tr("Theme & Colors"),
+        "icon": "palette"
+    }, {
+        "text": I18n.tr("Power & Security"),
+        "icon": "power"
+    }, {
+        "text": I18n.tr("Plugins"),
+        "icon": "extension"
+    }, {
+        "text": I18n.tr("About"),
+        "icon": "info"
+    }]
+
+    function navigateNext() {
+        currentIndex = (currentIndex + 1) % sidebarItems.length
+    }
+
+    function navigatePrevious() {
+        currentIndex = (currentIndex - 1 + sidebarItems.length) % sidebarItems.length
+    }
+
+    width: 270
+    height: parent.height
+    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    radius: Theme.cornerRadius
+
+    DankFlickable {
+        anchors.fill: parent
+        clip: true
+        contentHeight: sidebarColumn.implicitHeight
+
+        Column {
+            id: sidebarColumn
+
+            width: parent.width
+            anchors.leftMargin: Theme.spacingS
+            anchors.rightMargin: Theme.spacingS
+            anchors.bottomMargin: Theme.spacingS
+            anchors.topMargin: Theme.spacingM + 2
+            spacing: Theme.spacingXS
+
+            ProfileSection {
+                parentModal: sidebarContainer.parentModal
+            }
+
+            Rectangle {
+                width: parent.width - Theme.spacingS * 2
+                height: 1
+                color: Theme.outline
+                opacity: 0.2
+            }
+
+            Item {
+                width: parent.width
+                height: Theme.spacingL
+            }
+
+            Repeater {
+                id: sidebarRepeater
+
+                model: sidebarContainer.sidebarItems
+
+                delegate: Rectangle {
+                    required property int index
+                    required property var modelData
+
+                    property bool isActive: sidebarContainer.currentIndex === index
+
+                    width: sidebarColumn.width - Theme.spacingS * 2
+                    height: 44
+                    radius: Theme.cornerRadius
+                    color: isActive ? Theme.primary : tabMouseArea.containsMouse ? Theme.surfaceHover : "transparent"
+
+                    Row {
+                        anchors.left: parent.left
+                        anchors.leftMargin: Theme.spacingM
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingM
+
+                        DankIcon {
+                            name: modelData.icon || ""
+                            size: Theme.iconSize - 2
+                            color: parent.parent.isActive ? Theme.primaryText : Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: modelData.text || ""
+                            font.pixelSize: Theme.fontSizeMedium
+                            color: parent.parent.isActive ? Theme.primaryText : Theme.surfaceText
+                            font.weight: parent.parent.isActive ? Font.Medium : Font.Normal
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                    }
+
+                    MouseArea {
+                        id: tabMouseArea
+
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: () => {
+                            sidebarContainer.currentIndex = index;
+                        }
+                    }
+
+                    Behavior on color {
+                        ColorAnimation {
+                            duration: Theme.shortDuration
+                            easing.type: Theme.standardEasing
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}

quickshell/Modals/Spotlight/FileSearchController.qml

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

quickshell/Modals/Spotlight/FileSearchEntry.qml

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

quickshell/Modals/Spotlight/FileSearchResults.qml

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

quickshell/Modals/Spotlight/SpotlightContent.qml

@@ -0,0 +1,447 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Common
+import qs.Modals.Spotlight
+import qs.Modules.AppDrawer
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: spotlightKeyHandler
+
+    property alias appLauncher: appLauncher
+    property alias searchField: searchField
+    property alias fileSearchController: fileSearchController
+    property var parentModal: null
+    property string searchMode: "apps"
+
+    function resetScroll() {
+        if (searchMode === "apps") {
+            resultsView.resetScroll()
+        } else {
+            fileSearchResults.resetScroll()
+        }
+    }
+
+    function updateSearchMode() {
+        if (searchField.text.startsWith("/")) {
+            if (searchMode !== "files") {
+                searchMode = "files"
+            }
+            const query = searchField.text.substring(1)
+            fileSearchController.searchQuery = query
+        } else {
+            if (searchMode !== "apps") {
+                searchMode = "apps"
+                fileSearchController.reset()
+                appLauncher.searchQuery = searchField.text
+            }
+        }
+    }
+
+    onSearchModeChanged: {
+        if (searchMode === "files") {
+            appLauncher.keyboardNavigationActive = false
+        } else {
+            fileSearchController.keyboardNavigationActive = false
+        }
+    }
+
+    anchors.fill: parent
+    focus: true
+    clip: false
+    Keys.onPressed: event => {
+                        if (event.key === Qt.Key_Escape) {
+                            if (parentModal)
+                            parentModal.hide()
+
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Down) {
+                            if (searchMode === "apps") {
+                                appLauncher.selectNext()
+                            } else {
+                                fileSearchController.selectNext()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Up) {
+                            if (searchMode === "apps") {
+                                appLauncher.selectPrevious()
+                            } else {
+                                fileSearchController.selectPrevious()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Right && searchMode === "apps" && appLauncher.viewMode === "grid") {
+                            appLauncher.selectNextInRow()
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Left && searchMode === "apps" && appLauncher.viewMode === "grid") {
+                            appLauncher.selectPreviousInRow()
+                            event.accepted = true
+                        } else if (event.key == Qt.Key_J && event.modifiers & Qt.ControlModifier) {
+                            if (searchMode === "apps") {
+                                appLauncher.selectNext()
+                            } else {
+                                fileSearchController.selectNext()
+                            }
+                            event.accepted = true
+                        } else if (event.key == Qt.Key_K && event.modifiers & Qt.ControlModifier) {
+                            if (searchMode === "apps") {
+                                appLauncher.selectPrevious()
+                            } else {
+                                fileSearchController.selectPrevious()
+                            }
+                            event.accepted = true
+                        } else if (event.key == Qt.Key_L && event.modifiers & Qt.ControlModifier && searchMode === "apps" && appLauncher.viewMode === "grid") {
+                            appLauncher.selectNextInRow()
+                            event.accepted = true
+                        } else if (event.key == Qt.Key_H && event.modifiers & Qt.ControlModifier && searchMode === "apps" && appLauncher.viewMode === "grid") {
+                            appLauncher.selectPreviousInRow()
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Tab) {
+                            if (searchMode === "apps") {
+                                if (appLauncher.viewMode === "grid") {
+                                    appLauncher.selectNextInRow()
+                                } else {
+                                    appLauncher.selectNext()
+                                }
+                            } else {
+                                fileSearchController.selectNext()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Backtab) {
+                            if (searchMode === "apps") {
+                                if (appLauncher.viewMode === "grid") {
+                                    appLauncher.selectPreviousInRow()
+                                } else {
+                                    appLauncher.selectPrevious()
+                                }
+                            } else {
+                                fileSearchController.selectPrevious()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) {
+                            if (searchMode === "apps") {
+                                if (appLauncher.viewMode === "grid") {
+                                    appLauncher.selectNextInRow()
+                                } else {
+                                    appLauncher.selectNext()
+                                }
+                            } else {
+                                fileSearchController.selectNext()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_P && event.modifiers & Qt.ControlModifier) {
+                            if (searchMode === "apps") {
+                                if (appLauncher.viewMode === "grid") {
+                                    appLauncher.selectPreviousInRow()
+                                } else {
+                                    appLauncher.selectPrevious()
+                                }
+                            } else {
+                                fileSearchController.selectPrevious()
+                            }
+                            event.accepted = true
+                        } else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
+                            if (searchMode === "apps") {
+                                appLauncher.launchSelected()
+                            } else if (searchMode === "files") {
+                                fileSearchController.openSelected()
+                            }
+                            event.accepted = true
+                        }
+                    }
+
+    AppLauncher {
+        id: appLauncher
+
+        viewMode: SettingsData.spotlightModalViewMode
+        gridColumns: 4
+        onAppLaunched: () => {
+                           if (parentModal)
+                           parentModal.hide()
+                       }
+        onViewModeSelected: mode => {
+                                SettingsData.set("spotlightModalViewMode", mode)
+                            }
+    }
+
+    FileSearchController {
+        id: fileSearchController
+
+        onFileOpened: () => {
+                          if (parentModal)
+                          parentModal.hide()
+                      }
+    }
+
+    Column {
+        anchors.fill: parent
+        anchors.margins: Theme.spacingM
+        spacing: Theme.spacingM
+        clip: false
+
+        Row {
+            width: parent.width
+            spacing: Theme.spacingM
+            leftPadding: Theme.spacingS
+            topPadding: Theme.spacingS
+
+            DankTextField {
+                id: searchField
+
+                width: parent.width - 80 - Theme.spacingL
+                height: 56
+                cornerRadius: Theme.cornerRadius
+                backgroundColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                normalBorderColor: Theme.outlineMedium
+                focusedBorderColor: Theme.primary
+                leftIconName: searchMode === "files" ? "folder" : "search"
+                leftIconSize: Theme.iconSize
+                leftIconColor: Theme.surfaceVariantText
+                leftIconFocusedColor: Theme.primary
+                showClearButton: true
+                textColor: Theme.surfaceText
+                font.pixelSize: Theme.fontSizeLarge
+                enabled: parentModal ? parentModal.spotlightOpen : true
+                placeholderText: ""
+                ignoreLeftRightKeys: appLauncher.viewMode !== "list"
+                ignoreTabKeys: true
+                keyForwardTargets: [spotlightKeyHandler]
+                onTextChanged: {
+                    if (searchMode === "apps") {
+                        appLauncher.searchQuery = text
+                    }
+                }
+                onTextEdited: {
+                    updateSearchMode()
+                }
+                Keys.onPressed: event => {
+                                    if (event.key === Qt.Key_Escape) {
+                                        if (parentModal)
+                                        parentModal.hide()
+
+                                        event.accepted = true
+                                    } else if ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && text.length > 0) {
+                                        if (searchMode === "apps") {
+                                            if (appLauncher.keyboardNavigationActive && appLauncher.model.count > 0)
+                                            appLauncher.launchSelected()
+                                            else if (appLauncher.model.count > 0)
+                                            appLauncher.launchApp(appLauncher.model.get(0))
+                                        } else if (searchMode === "files") {
+                                            if (fileSearchController.model.count > 0)
+                                            fileSearchController.openSelected()
+                                        }
+                                        event.accepted = true
+                                    } else if (event.key === Qt.Key_Down || event.key === Qt.Key_Up || event.key === Qt.Key_Left || event.key === Qt.Key_Right || event.key === Qt.Key_Tab || event.key
+                                               === Qt.Key_Backtab || ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && text.length === 0)) {
+                                        event.accepted = false
+                                    }
+                                }
+            }
+
+            Row {
+                spacing: Theme.spacingXS
+                visible: searchMode === "apps" && appLauncher.model.count > 0
+                anchors.verticalCenter: parent.verticalCenter
+
+                Rectangle {
+                    width: 36
+                    height: 36
+                    radius: Theme.cornerRadius
+                    color: appLauncher.viewMode === "list" ? Theme.primaryHover : listViewArea.containsMouse ? Theme.surfaceHover : "transparent"
+
+                    DankIcon {
+                        anchors.centerIn: parent
+                        name: "view_list"
+                        size: 18
+                        color: appLauncher.viewMode === "list" ? Theme.primary : Theme.surfaceText
+                    }
+
+                    MouseArea {
+                        id: listViewArea
+
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: () => {
+                                       appLauncher.setViewMode("list")
+                                   }
+                    }
+                }
+
+                Rectangle {
+                    width: 36
+                    height: 36
+                    radius: Theme.cornerRadius
+                    color: appLauncher.viewMode === "grid" ? Theme.primaryHover : gridViewArea.containsMouse ? Theme.surfaceHover : "transparent"
+
+                    DankIcon {
+                        anchors.centerIn: parent
+                        name: "grid_view"
+                        size: 18
+                        color: appLauncher.viewMode === "grid" ? Theme.primary : Theme.surfaceText
+                    }
+
+                    MouseArea {
+                        id: gridViewArea
+
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: () => {
+                                       appLauncher.setViewMode("grid")
+                                   }
+                    }
+                }
+            }
+
+            Row {
+                spacing: Theme.spacingXS
+                visible: searchMode === "files"
+                anchors.verticalCenter: parent.verticalCenter
+
+                Rectangle {
+                    id: filenameFilterButton
+
+                    width: 36
+                    height: 36
+                    radius: Theme.cornerRadius
+                    color: fileSearchController.searchField === "filename" ? Theme.primaryHover : filenameFilterArea.containsMouse ? Theme.surfaceHover : "transparent"
+
+                    DankIcon {
+                        anchors.centerIn: parent
+                        name: "title"
+                        size: 18
+                        color: fileSearchController.searchField === "filename" ? Theme.primary : Theme.surfaceText
+                    }
+
+                    MouseArea {
+                        id: filenameFilterArea
+
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: () => {
+                                       fileSearchController.searchField = "filename"
+                                   }
+                        onEntered: {
+                            filenameTooltipLoader.active = true
+                            Qt.callLater(() => {
+                                             if (filenameTooltipLoader.item) {
+                                                 const p = mapToItem(null, width / 2, height + Theme.spacingXS)
+                                                 filenameTooltipLoader.item.show(I18n.tr("Search filenames"), p.x, p.y, null)
+                                             }
+                                         })
+                        }
+                        onExited: {
+                            if (filenameTooltipLoader.item)
+                                filenameTooltipLoader.item.hide()
+
+                            filenameTooltipLoader.active = false
+                        }
+                    }
+                }
+
+                Rectangle {
+                    id: contentFilterButton
+
+                    width: 36
+                    height: 36
+                    radius: Theme.cornerRadius
+                    color: fileSearchController.searchField === "body" ? Theme.primaryHover : contentFilterArea.containsMouse ? Theme.surfaceHover : "transparent"
+
+                    DankIcon {
+                        anchors.centerIn: parent
+                        name: "description"
+                        size: 18
+                        color: fileSearchController.searchField === "body" ? Theme.primary : Theme.surfaceText
+                    }
+
+                    MouseArea {
+                        id: contentFilterArea
+
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: () => {
+                                       fileSearchController.searchField = "body"
+                                   }
+                        onEntered: {
+                            contentTooltipLoader.active = true
+                            Qt.callLater(() => {
+                                             if (contentTooltipLoader.item) {
+                                                 const p = mapToItem(null, width / 2, height + Theme.spacingXS)
+                                                 contentTooltipLoader.item.show(I18n.tr("Search file contents"), p.x, p.y, null)
+                                             }
+                                         })
+                        }
+                        onExited: {
+                            if (contentTooltipLoader.item)
+                                contentTooltipLoader.item.hide()
+
+                            contentTooltipLoader.active = false
+                        }
+                    }
+                }
+            }
+        }
+
+        Item {
+            width: parent.width
+            height: parent.height - y
+
+            SpotlightResults {
+                id: resultsView
+                anchors.fill: parent
+                appLauncher: spotlightKeyHandler.appLauncher
+                contextMenu: contextMenu
+                visible: searchMode === "apps"
+            }
+
+            FileSearchResults {
+                id: fileSearchResults
+                anchors.fill: parent
+                fileSearchController: spotlightKeyHandler.fileSearchController
+                visible: searchMode === "files"
+            }
+        }
+    }
+
+    SpotlightContextMenu {
+        id: contextMenu
+
+        appLauncher: spotlightKeyHandler.appLauncher
+        parentHandler: spotlightKeyHandler
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        visible: contextMenu.visible
+        z: 999
+        onClicked: () => {
+                       contextMenu.hide()
+                   }
+
+        MouseArea {
+
+            x: contextMenu.x
+            y: contextMenu.y
+            width: contextMenu.width
+            height: contextMenu.height
+            onClicked: () => {}
+        }
+    }
+
+    Loader {
+        id: filenameTooltipLoader
+
+        active: false
+        sourceComponent: DankTooltip {}
+    }
+
+    Loader {
+        id: contentTooltipLoader
+
+        active: false
+        sourceComponent: DankTooltip {}
+    }
+}

quickshell/Modals/Spotlight/SpotlightContextMenu.qml

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

quickshell/Modals/Spotlight/SpotlightModal.qml

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

quickshell/Modals/Spotlight/SpotlightResults.qml

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

quickshell/Modals/WifiPasswordModal.qml

@@ -0,0 +1,594 @@
+import QtQuick
+import qs.Common
+import qs.Modals.Common
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: root
+
+    layerNamespace: "dms:wifi-password"
+
+    property string wifiPasswordSSID: ""
+    property string wifiPasswordInput: ""
+    property string wifiUsernameInput: ""
+    property bool requiresEnterprise: false
+
+    property string wifiAnonymousIdentityInput: ""
+    property string wifiDomainInput: ""
+
+    property bool isPromptMode: false
+    property string promptToken: ""
+    property string promptReason: ""
+    property var promptFields: []
+    property string promptSetting: ""
+
+    property bool isVpnPrompt: false
+    property string connectionName: ""
+    property string vpnServiceType: ""
+    property string connectionType: ""
+
+    function show(ssid) {
+        wifiPasswordSSID = ssid
+        wifiPasswordInput = ""
+        wifiUsernameInput = ""
+        wifiAnonymousIdentityInput = ""
+        wifiDomainInput = ""
+        isPromptMode = false
+        promptToken = ""
+        promptReason = ""
+        promptFields = []
+        promptSetting = ""
+        isVpnPrompt = false
+        connectionName = ""
+        vpnServiceType = ""
+        connectionType = ""
+
+        const network = NetworkService.wifiNetworks.find(n => n.ssid === ssid)
+        requiresEnterprise = network?.enterprise || false
+
+        open()
+        Qt.callLater(() => {
+                         if (contentLoader.item) {
+                             if (requiresEnterprise && contentLoader.item.usernameInput) {
+                                 contentLoader.item.usernameInput.forceActiveFocus()
+                             } else if (contentLoader.item.passwordInput) {
+                                 contentLoader.item.passwordInput.forceActiveFocus()
+                             }
+                         }
+                     })
+    }
+
+    function showFromPrompt(token, ssid, setting, fields, hints, reason, connType, connName, vpnService) {
+        isPromptMode = true
+        promptToken = token
+        promptReason = reason
+        promptFields = fields || []
+        promptSetting = setting || "802-11-wireless-security"
+        connectionType = connType || "802-11-wireless"
+        connectionName = connName || ssid || ""
+        vpnServiceType = vpnService || ""
+
+        isVpnPrompt = (connectionType === "vpn" || connectionType === "wireguard")
+        wifiPasswordSSID = isVpnPrompt ? connectionName : ssid
+
+        requiresEnterprise = setting === "802-1x"
+
+        if (reason === "wrong-password") {
+            wifiPasswordInput = ""
+            wifiUsernameInput = ""
+        } else {
+            wifiPasswordInput = ""
+            wifiUsernameInput = ""
+            wifiAnonymousIdentityInput = ""
+            wifiDomainInput = ""
+        }
+
+        open()
+        Qt.callLater(() => {
+                         if (contentLoader.item) {
+                             if (reason === "wrong-password" && contentLoader.item.passwordInput) {
+                                 contentLoader.item.passwordInput.text = ""
+                                 contentLoader.item.passwordInput.forceActiveFocus()
+                             } else if (requiresEnterprise && contentLoader.item.usernameInput) {
+                                 contentLoader.item.usernameInput.forceActiveFocus()
+                             } else if (contentLoader.item.passwordInput) {
+                                 contentLoader.item.passwordInput.forceActiveFocus()
+                             }
+                         }
+                     })
+    }
+
+    shouldBeVisible: false
+    width: 420
+    height: requiresEnterprise ? 430 : 230
+    onShouldBeVisibleChanged: () => {
+                                  if (!shouldBeVisible) {
+                                      wifiPasswordInput = ""
+                                      wifiUsernameInput = ""
+                                      wifiAnonymousIdentityInput = ""
+                                      wifiDomainInput = ""
+                                  }
+                              }
+    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: () => {
+                             if (isPromptMode) {
+                                 NetworkService.cancelCredentials(promptToken)
+                             }
+                             close()
+                             wifiPasswordInput = ""
+                             wifiUsernameInput = ""
+                             wifiAnonymousIdentityInput = ""
+                             wifiDomainInput = ""
+                         }
+
+    Connections {
+        target: NetworkService
+
+        function onPasswordDialogShouldReopenChanged() {
+            if (NetworkService.passwordDialogShouldReopen && NetworkService.connectingSSID !== "") {
+                wifiPasswordSSID = NetworkService.connectingSSID
+                wifiPasswordInput = ""
+                open()
+                NetworkService.passwordDialogShouldReopen = false
+            }
+        }
+    }
+
+    content: Component {
+        FocusScope {
+            id: wifiContent
+
+            property alias usernameInput: usernameInput
+            property alias passwordInput: passwordInput
+
+            anchors.fill: parent
+            focus: true
+            Keys.onEscapePressed: event => {
+                                      if (isPromptMode) {
+                                          NetworkService.cancelCredentials(promptToken)
+                                      }
+                                      close()
+                                      wifiPasswordInput = ""
+                                      wifiUsernameInput = ""
+                                      wifiAnonymousIdentityInput = ""
+                                      wifiDomainInput = ""
+                                      event.accepted = true
+                                  }
+
+            Column {
+                anchors.centerIn: parent
+                width: parent.width - Theme.spacingM * 2
+                spacing: Theme.spacingM
+
+                Row {
+                    width: parent.width
+
+                    Column {
+                        width: parent.width - 40
+                        spacing: Theme.spacingXS
+
+                        StyledText {
+                            text: {
+                                if (isVpnPrompt) {
+                                    return I18n.tr("Connect to VPN")
+                                }
+                                return I18n.tr("Connect to Wi-Fi")
+                            }
+                            font.pixelSize: Theme.fontSizeLarge
+                            color: Theme.surfaceText
+                            font.weight: Font.Medium
+                        }
+
+                        Column {
+                            width: parent.width
+                            spacing: Theme.spacingXS
+
+                            StyledText {
+                                text: {
+                                    if (isVpnPrompt) {
+                                        return I18n.tr("Enter password for ") + wifiPasswordSSID
+                                    }
+                                    const prefix = requiresEnterprise ? I18n.tr("Enter credentials for ") : I18n.tr("Enter password for ")
+                                    return prefix + wifiPasswordSSID
+                                }
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceTextMedium
+                                width: parent.width
+                                elide: Text.ElideRight
+                            }
+
+                            StyledText {
+                                visible: isPromptMode && promptReason === "wrong-password"
+                                text: I18n.tr("Incorrect password")
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.error
+                                width: parent.width
+                            }
+                        }
+                    }
+
+                    DankActionButton {
+                        iconName: "close"
+                        iconSize: Theme.iconSize - 4
+                        iconColor: Theme.surfaceText
+                        onClicked: () => {
+                                       if (isPromptMode) {
+                                           NetworkService.cancelCredentials(promptToken)
+                                       }
+                                       close()
+                                       wifiPasswordInput = ""
+                                       wifiUsernameInput = ""
+                                       wifiAnonymousIdentityInput = ""
+                                       wifiDomainInput = ""
+                                   }
+                    }
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceHover
+                    border.color: usernameInput.activeFocus ? Theme.primary : Theme.outlineStrong
+                    border.width: usernameInput.activeFocus ? 2 : 1
+                    visible: requiresEnterprise && !isVpnPrompt
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: () => {
+                                       usernameInput.forceActiveFocus()
+                                   }
+                    }
+
+                    DankTextField {
+                        id: usernameInput
+
+                        anchors.fill: parent
+                        font.pixelSize: Theme.fontSizeMedium
+                        textColor: Theme.surfaceText
+                        text: wifiUsernameInput
+                        placeholderText: I18n.tr("Username")
+                        backgroundColor: "transparent"
+                        enabled: root.shouldBeVisible
+                        onTextEdited: () => {
+                                          wifiUsernameInput = text
+                                      }
+                        onAccepted: () => {
+                                        if (passwordInput) {
+                                            passwordInput.forceActiveFocus()
+                                        }
+                                    }
+                    }
+                }
+
+                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 && !isVpnPrompt) ? I18n.tr("Password") : ""
+                        backgroundColor: "transparent"
+                        focus: !requiresEnterprise
+                        enabled: root.shouldBeVisible
+                        onTextEdited: () => {
+                                          wifiPasswordInput = text
+                                      }
+                        onAccepted: () => {
+                                        if (isPromptMode) {
+                                            const secrets = {}
+                                            if (isVpnPrompt) {
+                                                if (passwordInput.text) secrets["password"] = passwordInput.text
+                                            } else if (promptSetting === "802-11-wireless-security") {
+                                                secrets["psk"] = passwordInput.text
+                                            } else if (promptSetting === "802-1x") {
+                                                if (usernameInput.text) secrets["identity"] = usernameInput.text
+                                                if (passwordInput.text) secrets["password"] = passwordInput.text
+                                                if (wifiAnonymousIdentityInput) secrets["anonymous-identity"] = wifiAnonymousIdentityInput
+                                            }
+                                            NetworkService.submitCredentials(promptToken, secrets, true)
+                                        } else {
+                                            const username = requiresEnterprise ? usernameInput.text : ""
+                                            NetworkService.connectToWifi(
+                                                wifiPasswordSSID,
+                                                passwordInput.text,
+                                                username,
+                                                wifiAnonymousIdentityInput,
+                                                wifiDomainInput
+                                            )
+                                        }
+                                        close()
+                                        wifiPasswordInput = ""
+                                        wifiUsernameInput = ""
+                                        wifiAnonymousIdentityInput = ""
+                                        wifiDomainInput = ""
+                                        passwordInput.text = ""
+                                        if (requiresEnterprise) usernameInput.text = ""
+                                    }
+                        Component.onCompleted: () => {
+                                                   if (root.shouldBeVisible && !requiresEnterprise)
+                                                   focusDelayTimer.start()
+                                               }
+
+                        Timer {
+                            id: focusDelayTimer
+
+                            interval: 100
+                            repeat: false
+                            onTriggered: () => {
+                                             if (root.shouldBeVisible) {
+                                                 if (requiresEnterprise && usernameInput) {
+                                                     usernameInput.forceActiveFocus()
+                                                 } else {
+                                                     passwordInput.forceActiveFocus()
+                                                 }
+                                             }
+                                         }
+                        }
+
+                        Connections {
+                            target: root
+
+                            function onShouldBeVisibleChanged() {
+                                if (root.shouldBeVisible)
+                                    focusDelayTimer.start()
+                            }
+                        }
+                    }
+                }
+
+                Rectangle {
+                    visible: requiresEnterprise && !isVpnPrompt
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceHover
+                    border.color: anonInput.activeFocus ? Theme.primary : Theme.outlineStrong
+                    border.width: anonInput.activeFocus ? 2 : 1
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: () => {
+                                       anonInput.forceActiveFocus()
+                                   }
+                    }
+
+                    DankTextField {
+                        id: anonInput
+
+                        anchors.fill: parent
+                        font.pixelSize: Theme.fontSizeMedium
+                        textColor: Theme.surfaceText
+                        text: wifiAnonymousIdentityInput
+                        placeholderText: I18n.tr("Anonymous Identity (optional)")
+                        backgroundColor: "transparent"
+                        enabled: root.shouldBeVisible
+                        onTextEdited: () => {
+                                          wifiAnonymousIdentityInput = text
+                                      }
+                    }
+                }
+
+                Rectangle {
+                    visible: requiresEnterprise && !isVpnPrompt
+                    width: parent.width
+                    height: 50
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceHover
+                    border.color: domainMatchInput.activeFocus ? Theme.primary : Theme.outlineStrong
+                    border.width: domainMatchInput.activeFocus ? 2 : 1
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: () => {
+                                       domainMatchInput.forceActiveFocus()
+                                   }
+                    }
+
+                    DankTextField {
+                        id: domainMatchInput
+
+                        anchors.fill: parent
+                        font.pixelSize: Theme.fontSizeMedium
+                        textColor: Theme.surfaceText
+                        text: wifiDomainInput
+                        placeholderText: I18n.tr("Domain (optional)")
+                        backgroundColor: "transparent"
+                        enabled: root.shouldBeVisible
+                        onTextEdited: () => {
+                                          wifiDomainInput = text
+                                      }
+                    }
+                }
+
+                Row {
+                    spacing: Theme.spacingS
+
+                    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: () => {
+                                               if (isPromptMode) {
+                                                   NetworkService.cancelCredentials(promptToken)
+                                               }
+                                               close()
+                                               wifiPasswordInput = ""
+                                               wifiUsernameInput = ""
+                                               wifiAnonymousIdentityInput = ""
+                                               wifiDomainInput = ""
+                                           }
+                            }
+                        }
+
+                        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: {
+                                if (isVpnPrompt) {
+                                    return passwordInput.text.length > 0
+                                }
+                                return requiresEnterprise ? (usernameInput.text.length > 0 && passwordInput.text.length > 0) : passwordInput.text.length > 0
+                            }
+                            opacity: enabled ? 1 : 0.5
+
+                            StyledText {
+                                id: connectText
+
+                                anchors.centerIn: parent
+                                text: 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: () => {
+                                               if (isPromptMode) {
+                                                   const secrets = {}
+                                                   if (isVpnPrompt) {
+                                                       if (passwordInput.text) secrets["password"] = passwordInput.text
+                                                   } else if (promptSetting === "802-11-wireless-security") {
+                                                       secrets["psk"] = passwordInput.text
+                                                   } else if (promptSetting === "802-1x") {
+                                                       if (usernameInput.text) secrets["identity"] = usernameInput.text
+                                                       if (passwordInput.text) secrets["password"] = passwordInput.text
+                                                       if (wifiAnonymousIdentityInput) secrets["anonymous-identity"] = wifiAnonymousIdentityInput
+                                                   }
+                                                   NetworkService.submitCredentials(promptToken, secrets, true)
+                                               } else {
+                                                   const username = requiresEnterprise ? usernameInput.text : ""
+                                                   NetworkService.connectToWifi(
+                                                       wifiPasswordSSID,
+                                                       passwordInput.text,
+                                                       username,
+                                                       wifiAnonymousIdentityInput,
+                                                       wifiDomainInput
+                                                   )
+                                               }
+                                               close()
+                                               wifiPasswordInput = ""
+                                               wifiUsernameInput = ""
+                                               wifiAnonymousIdentityInput = ""
+                                               wifiDomainInput = ""
+                                               passwordInput.text = ""
+                                               if (requiresEnterprise) usernameInput.text = ""
+                                           }
+                            }
+
+                            Behavior on color {
+                                ColorAnimation {
+                                    duration: Theme.shortDuration
+                                    easing.type: Theme.standardEasing
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}