Merge branch 'end-4:main' into parallax

2026-01-02 15:47:43 +01:00
parent 6ad8717a47 d5b599da3d
commit ce6d5969e0
49 changed files with 977 additions and 676 deletions
@@ -28,7 +28,7 @@ Singleton {
    property real autoBackgroundTransparency: { // y = 0.5768x^2 - 0.759x + 0.2896
        let x = wallpaperVibrancy
        let y = 0.5768 * (x * x) - 0.759 * (x) + 0.2896
-        return Math.max(0, Math.min(0.22, y))
+        return Math.max(0, Math.min(0.22, y)) - 0.12 * (m3colors.darkmode ? 0 : 1)
    }
    property real autoContentTransparency: 0.9
    property real backgroundTransparency: Config?.options.appearance.transparency.enable ? Config?.options.appearance.transparency.automatic ? autoBackgroundTransparency : Config?.options.appearance.transparency.backgroundTransparency : 0
@@ -78,10 +78,7 @@ Singleton {
        JsonAdapter {
            id: configOptionsJsonAdapter

-            property list<string> enabledPanels: [
-                "iiBar", "iiBackground", "iiCheatsheet", "iiDock", "iiLock", "iiMediaControls", "iiNotificationPopup", "iiOnScreenDisplay", "iiOnScreenKeyboard", "iiOverlay", "iiOverview", "iiPolkit", "iiRegionSelector", "iiReloadPopup", "iiScreenCorners", "iiSessionScreen", "iiSidebarLeft", "iiSidebarRight", "iiVerticalBar", "iiWallpaperSelector"
-            ]
-            property string panelFamily: "ii" // "ii", "w"
+            property string panelFamily: "ii" // "ii", "waffle"

            property JsonObject policies: JsonObject {
                property int ai: 1 // 0: No | 1: Yes | 2: Local
@@ -189,7 +186,17 @@ Singleton {
                            property bool useSineCookie: false
                        }
                        property JsonObject digital: JsonObject {
+                            property bool adaptiveAlignment: true
+                            property bool showDate: true
                            property bool animateChange: true
+                            property bool vertical: false
+                            property JsonObject font: JsonObject {
+                                property string family: "Google Sans Flex"
+                                property real weight: 350
+                                property real width: 100
+                                property real size: 90
+                                property real roundness: 0
+                            }
                        }
                        property JsonObject quote: JsonObject {
                            property bool enable: false
@@ -59,7 +59,7 @@ Singleton {
            property string hyprlandInstanceSignature: ""

            property JsonObject ai: JsonObject {
-                property string model
+                property string model: "gemini-2.5-flash"
                property real temperature: 0.5
            }

@@ -0,0 +1,47 @@
+import qs.modules.common.widgets
+import qs.modules.common
+import QtQuick
+import QtQuick.Layouts
+import qs.services
+
+RowLayout {
+    id: root
+    spacing: 10
+    Layout.leftMargin: 8
+    Layout.rightMargin: 8
+
+    property string text: ""
+    property string buttonIcon: ""
+    property alias value: slider.value
+    property alias stopIndicatorValues: slider.stopIndicatorValues
+    property bool usePercentTooltip: true
+    property real from: slider.from
+    property real to: slider.to
+    property real textWidth: 120
+
+    RowLayout {
+        id: row
+        spacing: 10
+
+        OptionalMaterialSymbol {
+            id: iconWidget
+            icon: root.buttonIcon
+            iconSize: Appearance.font.pixelSize.larger
+        }
+        StyledText {
+            id: labelWidget
+            Layout.preferredWidth: root.textWidth
+            text: root.text
+            color: Appearance.colors.colOnSecondaryContainer
+        }
+    }
+    
+    StyledSlider {
+        id: slider
+        configuration: StyledSlider.Configuration.XS
+        usePercentTooltip: root.usePercentTooltip
+        value: root.value
+        from: root.from
+        to: root.to
+    }
+}
@@ -32,7 +32,7 @@ Item {

    Rectangle { // The dialog
        id: dialog
-        color: Appearance.colors.colSurfaceContainerHigh
+        color: Appearance.m3colors.m3surfaceContainerHigh
        radius: Appearance.rounding.normal
        anchors.fill: parent
        anchors.margins: dialogMargin
@@ -192,7 +192,7 @@ ComboBox {
                id: popupBackground
                anchors.fill: parent
                radius: Appearance.rounding.normal
-                color: Appearance.colors.colSurfaceContainerHigh
+                color: Appearance.m3colors.m3surfaceContainerHigh
            }
        }

@@ -46,7 +46,8 @@ Slider {
    property real handleWidth: root.pressed ? handlePressedWidth : handleDefaultWidth
    property real handleMargins: 4
    property real trackDotSize: 3
-    property string tooltipContent: `${Math.round(value * 100)}%`
+    property bool usePercentTooltip: true
+    property string tooltipContent: usePercentTooltip ? `${Math.round(((value - from) / (to - from)) * 100)}%` : `${Math.round(value)}`
    property bool wavy: configuration === StyledSlider.Configuration.Wavy // If true, the progress bar will have a wavy fill effect
    property bool animateWave: true
    property real waveAmplitudeMultiplier: wavy ? 0.5 : 0
@@ -59,7 +59,8 @@ AbstractWidget {
        function onReadyChanged() { refreshPlacementIfNeeded() }
    }
    function refreshPlacementIfNeeded() {
-        if (!Config.ready || (root.placementStrategy === "free" && root.needsColText)) return;
+        if (!Config.ready) return;
+        if (root.placementStrategy === "free" && !root.needsColText) return;
        leastBusyRegionProc.wallpaperPath = root.wallpaperPath;
        leastBusyRegionProc.running = false;
        leastBusyRegionProc.running = true;
@@ -0,0 +1,19 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+
+StyledText {
+    Layout.fillWidth: true
+    font {
+        family: Appearance.font.family.expressive
+        pixelSize: 20
+        weight: 350
+        // Set empty to prevent conflicts, not meaningless
+        styleName: ""
+        variableAxes: ({})
+    }
+    style: Text.Raised
+    styleColor: Appearance.colors.colShadow
+    animateChange: Config.options.background.widgets.clock.digital.animateChange
+}
@@ -26,7 +26,7 @@ AbstractBackgroundWidget {
    visibleWhenLocked: true

    property var textHorizontalAlignment: {
-        if (root.forceCenter)
+        if (!Config.options.background.widgets.clock.digital.adaptiveAlignment || root.forceCenter || Config.options.background.widgets.clock.digital.vertical) 
            return Text.AlignHCenter;
        if (root.x < root.scaledScreenWidth / 3)
            return Text.AlignLeft;
@@ -63,32 +63,9 @@ AbstractBackgroundWidget {
            anchors.horizontalCenter: parent.horizontalCenter
            shown: root.clockStyle === "digital" && (root.shouldShow)
            fade: false
-            sourceComponent: ColumnLayout {
-                id: clockColumn
-                spacing: 6
-
-                ClockText {
-                    font.pixelSize: 90
-                    text: DateTime.time
-                }
-                ClockText {
-                    Layout.topMargin: -5
-                    text: DateTime.longDate
-                }
-                StyledText {
-                    // Somehow gets fucked up if made a ClockText???
-                    visible: Config.options.background.widgets.clock.quote.enable && Config.options.background.widgets.clock.quote.text.length > 0
-                    Layout.fillWidth: true
-                    horizontalAlignment: root.textHorizontalAlignment
-                    font {
-                        pixelSize: Appearance.font.pixelSize.normal
-                        weight: 350
-                    }
-                    color: root.colText
-                    style: Text.Raised
-                    styleColor: Appearance.colors.colShadow
-                    text: Config.options.background.widgets.clock.quote.text
-                }
+            sourceComponent: DigitalClock {
+                colText: root.colText
+                textHorizontalAlignment: root.textHorizontalAlignment
            }
        }
        StatusRow {
@@ -154,19 +131,6 @@ AbstractBackgroundWidget {
        }
    }

-    component ClockText: StyledText {
-        Layout.fillWidth: true
-        horizontalAlignment: root.textHorizontalAlignment
-        font {
-            family: Appearance.font.family.expressive
-            pixelSize: 20
-            weight: Font.DemiBold
-        }
-        color: root.colText
-        style: Text.Raised
-        styleColor: Appearance.colors.colShadow
-        animateChange: Config.options.background.widgets.clock.digital.animateChange
-    }
    component ClockStatusText: Row {
        id: statusTextRow
        property alias statusIcon: statusIconWidget.text
@@ -190,6 +154,7 @@ AbstractBackgroundWidget {
        ClockText {
            id: statusTextWidget
            color: statusTextRow.textColor
+            horizontalAlignment: root.textHorizontalAlignment
            anchors.verticalCenter: statusTextRow.verticalCenter
            font {
                pixelSize: Appearance.font.pixelSize.large
@@ -0,0 +1,71 @@
+pragma ComponentBehavior: Bound
+
+import qs.services
+import qs.modules.common
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: clockColumn
+    spacing: 4
+
+    property bool isVertical: Config.options.background.widgets.clock.digital.vertical
+    property color colText: Appearance.colors.colOnSecondaryContainer
+    property var textHorizontalAlignment: Text.AlignHCenter
+
+    // Time
+    ClockText {
+        id: timeTextTop
+        text: clockColumn.isVertical ? DateTime.time.split(":")[0].padStart(2, "0") : DateTime.time
+        color: clockColumn.colText
+        horizontalAlignment: Text.AlignHCenter
+        font {
+            pixelSize: Config.options.background.widgets.clock.digital.font.size
+            weight: Config.options.background.widgets.clock.digital.font.weight
+            family: Config.options.background.widgets.clock.digital.font.family
+            variableAxes: ({
+                    "wdth": Config.options.background.widgets.clock.digital.font.width,
+                    "ROND": Config.options.background.widgets.clock.digital.font.roundness
+                })
+        }
+    }
+
+    Loader {
+        Layout.topMargin: -40
+        Layout.fillWidth: true
+        active: clockColumn.isVertical
+        visible: active
+        sourceComponent: ClockText {
+            id: timeTextBottom
+            text: DateTime.time.split(":")[1].split(" ")[0].padStart(2, "0")
+            color: clockColumn.colText
+            horizontalAlignment: clockColumn.textHorizontalAlignment
+            font {
+                pixelSize: timeTextTop.font.pixelSize
+                weight: timeTextTop.font.weight
+                family: timeTextTop.font.family
+                variableAxes: timeTextTop.font.variableAxes
+            }
+        }
+    }
+
+    // Date
+    ClockText {
+        visible: Config.options.background.widgets.clock.digital.showDate
+        Layout.topMargin: -20
+        Layout.fillWidth: true
+        text: DateTime.longDate
+        color: clockColumn.colText
+        horizontalAlignment: clockColumn.textHorizontalAlignment
+    }
+
+    // Quote
+    ClockText {
+        visible: Config.options.background.widgets.clock.quote.enable && Config.options.background.widgets.clock.quote.text.length > 0
+        font.pixelSize: Appearance.font.pixelSize.normal
+        text: Config.options.background.widgets.clock.quote.text
+        animateChange: false
+        color: clockColumn.colText
+        horizontalAlignment: clockColumn.textHorizontalAlignment
+    }
+}
@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import Quickshell
 import Quickshell.Io
@@ -60,6 +62,7 @@ Scope {
                }
                color: "transparent"

+                // Positioning
                anchors {
                    top: !Config.options.bar.bottom
                    bottom: Config.options.bar.bottom
@@ -72,6 +75,14 @@ Scope {
                    bottom: (Config.options.interactions.deadPixelWorkaround.enable && barRoot.anchors.bottom) * -1
                }

+                // Include in focus grab
+                Component.onCompleted: {
+                    GlobalFocusGrab.addPersistent(barRoot);
+                }
+                Component.onDestruction: {
+                    GlobalFocusGrab.removePersistent(barRoot);
+                }
+
                MouseArea  {
                    id: hoverRegion
                    hoverEnabled: true
@@ -54,13 +54,16 @@ Scope { // Scope
                item: cheatsheetBackground
            }

-            HyprlandFocusGrab { // Click outside to close
-                id: grab
-                windows: [cheatsheetRoot]
-                active: cheatsheetRoot.visible
-                onCleared: () => {
-                    if (!active)
-                        cheatsheetRoot.hide();
+            Component.onCompleted: {
+                GlobalFocusGrab.addDismissable(cheatsheetRoot);
+            }
+            Component.onDestruction: {
+                GlobalFocusGrab.removeDismissable(cheatsheetRoot);
+            }
+            Connections {
+                target: GlobalFocusGrab
+                function onDismissed() {
+                    cheatsheetRoot.hide();
                }
            }

@@ -6,8 +6,6 @@ import qs.modules.common.functions
 import qs.modules.common.panels.lock
 import QtQuick
 import Quickshell
-import Quickshell.Io
-import Quickshell.Wayland
 import Quickshell.Hyprland

 LockScreen {
@@ -18,24 +16,7 @@ LockScreen {
    }

    // Push everything down
-    property var windowData: []
-    function saveWindowPositionAndTile() {
-        Quickshell.execDetached(["hyprctl", "keyword", "dwindle:pseudotile", "true"]);
-        root.windowData = HyprlandData.windowList.filter(w => (w.floating && w.workspace.id === HyprlandData.activeWorkspace.id));
-        root.windowData.forEach(w => {
-            Hyprland.dispatch(`pseudo address:${w.address}`);
-            Hyprland.dispatch(`settiled address:${w.address}`);
-            Hyprland.dispatch(`movetoworkspacesilent ${w.workspace.id},address:${w.address}`);
-        });
-    }
-    function restoreWindowPositionAndTile() {
-        root.windowData.forEach(w => {
-            Hyprland.dispatch(`setfloating address:${w.address}`);
-            Hyprland.dispatch(`movewindowpixel exact ${w.at[0]} ${w.at[1]}, address:${w.address}`);
-            Hyprland.dispatch(`pseudo address:${w.address}`);
-        });
-        Quickshell.execDetached(["hyprctl", "keyword", "dwindle:pseudotile", "false"]);
-    }
+    property var lastWorkspaceId: 1
    Variants {
        model: Quickshell.screens
        delegate: Scope {
@@ -46,11 +27,11 @@ LockScreen {
            property int horizontalSqueeze: modelData.width * 0.2
            onShouldPushChanged: {
                if (shouldPush) {
-                    root.saveWindowPositionAndTile();
-                    Quickshell.execDetached(["bash", "-c", `hyprctl keyword monitor ${targetMonitorName}, addreserved, ${verticalMovementDistance}, ${-verticalMovementDistance}, ${horizontalSqueeze}, ${horizontalSqueeze}`]);
+                    root.lastWorkspaceId = HyprlandData.activeWorkspace.id;
+                    // Set anim to vertical and move to very very big workspace for a sliding up effect
+                    Quickshell.execDetached(["hyprctl", "--batch", "keyword animation workspaces,1,7,menu_decel,slidevert; dispatch workspace 2147483647"]);
                } else {
-                    Quickshell.execDetached(["bash", "-c", `hyprctl keyword monitor ${targetMonitorName}, addreserved, 0, 0, 0, 0`]);
-                    root.restoreWindowPositionAndTile();
+                    Quickshell.execDetached(["hyprctl", "--batch", `dispatch workspace ${root.lastWorkspaceId}; reload`]);
                }
            }
        }
@@ -81,7 +81,7 @@ Scope {
        }

        sourceComponent: PanelWindow {
-            id: mediaControlsRoot
+            id: panelWindow
            visible: true

            exclusionMode: ExclusionMode.Ignore
@@ -98,9 +98,9 @@ Scope {
                right: Config.options.bar.vertical && Config.options.bar.bottom
            }
            margins {
-                top: Config.options.bar.vertical ? ((mediaControlsRoot.screen.height / 2) - widgetHeight * 1.5) : Appearance.sizes.barHeight
+                top: Config.options.bar.vertical ? ((panelWindow.screen.height / 2) - widgetHeight * 1.5) : Appearance.sizes.barHeight
                bottom: Appearance.sizes.barHeight
-                left: Config.options.bar.vertical ? Appearance.sizes.barHeight : ((mediaControlsRoot.screen.width / 2) - (osdWidth / 2) - widgetWidth)
+                left: Config.options.bar.vertical ? Appearance.sizes.barHeight : ((panelWindow.screen.width / 2) - (osdWidth / 2) - widgetWidth)
                right: Appearance.sizes.barHeight
            }

@@ -108,13 +108,16 @@ Scope {
                item: playerColumnLayout
            }

-            HyprlandFocusGrab {
-                windows: [mediaControlsRoot]
-                active: mediaControlsLoader.active
-                onCleared: () => {
-                    if (!active) {
-                        GlobalStates.mediaControlsOpen = false;
-                    }
+            Component.onCompleted: {
+                GlobalFocusGrab.addDismissable(panelWindow);
+            }
+            Component.onDestruction: {
+                GlobalFocusGrab.removeDismissable(panelWindow);
+            }
+            Connections {
+                target: GlobalFocusGrab
+                function onDismissed() {
+                    GlobalStates.mediaControlsOpen = false;
                }
            }

@@ -137,10 +140,13 @@ Scope {
                    }
                }

-                Item { // No player placeholder
+                Item {
+                    // No player placeholder
                    Layout.alignment: {
-                        if (mediaControlsRoot.anchors.left) return Qt.AlignLeft;
-                        if (mediaControlsRoot.anchors.right) return Qt.AlignRight;
+                        if (panelWindow.anchors.left)
+                            return Qt.AlignLeft;
+                        if (panelWindow.anchors.right)
+                            return Qt.AlignRight;
                        return Qt.AlignHCenter;
                    }
                    Layout.leftMargin: Appearance.sizes.hyprlandGapsOut
@@ -153,7 +159,7 @@ Scope {
                        target: placeholderBackground
                    }

-                    Rectangle { 
+                    Rectangle {
                        id: placeholderBackground
                        anchors.centerIn: parent
                        color: Appearance.colors.colLayer0
@@ -57,6 +57,13 @@ Scope { // Scope
                item: oskBackground
            }

+            // Make it usable with other panels
+            Component.onCompleted: {
+                GlobalFocusGrab.addPersistent(oskRoot);
+            }
+            Component.onDestruction: {
+                GlobalFocusGrab.removePersistent(oskRoot);
+            }

            // Background
            StyledRectangularShadow {
@@ -14,116 +14,96 @@ import Quickshell.Hyprland
 Scope {
    id: overviewScope
    property bool dontAutoCancelSearch: false
-    Variants {
-        id: overviewVariants
-        model: Quickshell.screens
-        PanelWindow {
-            id: root
-            required property var modelData
-            property string searchingText: ""
-            readonly property HyprlandMonitor monitor: Hyprland.monitorFor(root.screen)
-            property bool monitorIsFocused: (Hyprland.focusedMonitor?.id == monitor?.id)
-            screen: modelData
+
+    PanelWindow {
+        id: panelWindow
+        property string searchingText: ""
+        readonly property HyprlandMonitor monitor: Hyprland.monitorFor(panelWindow.screen)
+        property bool monitorIsFocused: (Hyprland.focusedMonitor?.id == monitor?.id)
+        visible: GlobalStates.overviewOpen
+
+        WlrLayershell.namespace: "quickshell:overview"
+        WlrLayershell.layer: WlrLayer.Top
+        // WlrLayershell.keyboardFocus: GlobalStates.overviewOpen ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
+        color: "transparent"
+
+        mask: Region {
+            item: GlobalStates.overviewOpen ? columnLayout : null
+        }
+
+        anchors {
+            top: true
+            bottom: true
+            left: true
+            right: true
+        }
+
+        Connections {
+            target: GlobalStates
+            function onOverviewOpenChanged() {
+                if (!GlobalStates.overviewOpen) {
+                    searchWidget.disableExpandAnimation();
+                    overviewScope.dontAutoCancelSearch = false;
+                    GlobalFocusGrab.dismiss();
+                } else {
+                    if (!overviewScope.dontAutoCancelSearch) {
+                        searchWidget.cancelSearch();
+                    }
+                    GlobalFocusGrab.addDismissable(panelWindow);
+                }
+            }
+        }
+
+        Connections {
+            target: GlobalFocusGrab
+            function onDismissed() {
+                GlobalStates.overviewOpen = false;
+            }
+        }
+        implicitWidth: columnLayout.implicitWidth
+        implicitHeight: columnLayout.implicitHeight
+
+        function setSearchingText(text) {
+            searchWidget.setSearchingText(text);
+            searchWidget.focusFirstItem();
+        }
+
+        Column {
+            id: columnLayout
            visible: GlobalStates.overviewOpen
-
-            WlrLayershell.namespace: "quickshell:overview"
-            WlrLayershell.layer: WlrLayer.Overlay
-            // WlrLayershell.keyboardFocus: GlobalStates.overviewOpen ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
-            color: "transparent"
-
-            mask: Region {
-                item: GlobalStates.overviewOpen ? columnLayout : null
-            }
-
            anchors {
-                top: true
-                bottom: true
-                left: true
-                right: true
+                horizontalCenter: parent.horizontalCenter
+                top: parent.top
            }
+            spacing: -8

-            HyprlandFocusGrab {
-                id: grab
-                windows: [root]
-                property bool canBeActive: root.monitorIsFocused
-                active: false
-                onCleared: () => {
-                    if (!active)
-                        GlobalStates.overviewOpen = false;
+            Keys.onPressed: event => {
+                if (event.key === Qt.Key_Escape) {
+                    GlobalStates.overviewOpen = false;
+                } else if (event.key === Qt.Key_Left) {
+                    if (!panelWindow.searchingText)
+                        Hyprland.dispatch("workspace r-1");
+                } else if (event.key === Qt.Key_Right) {
+                    if (!panelWindow.searchingText)
+                        Hyprland.dispatch("workspace r+1");
                }
            }

-            Connections {
-                target: GlobalStates
-                function onOverviewOpenChanged() {
-                    if (!GlobalStates.overviewOpen) {
-                        searchWidget.disableExpandAnimation();
-                        overviewScope.dontAutoCancelSearch = false;
-                    } else {
-                        if (!overviewScope.dontAutoCancelSearch) {
-                            searchWidget.cancelSearch();
-                        }
-                        delayedGrabTimer.start();
-                    }
+            SearchWidget {
+                id: searchWidget
+                anchors.horizontalCenter: parent.horizontalCenter
+                Synchronizer on searchingText {
+                    property alias source: panelWindow.searchingText
                }
            }

-            Timer {
-                id: delayedGrabTimer
-                interval: Config.options.hacks.arbitraryRaceConditionDelay
-                repeat: false
-                onTriggered: {
-                    if (!grab.canBeActive)
-                        return;
-                    grab.active = GlobalStates.overviewOpen;
-                }
-            }
-
-            implicitWidth: columnLayout.implicitWidth
-            implicitHeight: columnLayout.implicitHeight
-
-            function setSearchingText(text) {
-                searchWidget.setSearchingText(text);
-                searchWidget.focusFirstItem();
-            }
-
-            Column {
-                id: columnLayout
-                visible: GlobalStates.overviewOpen
-                anchors {
-                    horizontalCenter: parent.horizontalCenter
-                    top: parent.top
-                }
-                spacing: -8
-
-                Keys.onPressed: event => {
-                    if (event.key === Qt.Key_Escape) {
-                        GlobalStates.overviewOpen = false;
-                    } else if (event.key === Qt.Key_Left) {
-                        if (!root.searchingText)
-                            Hyprland.dispatch("workspace r-1");
-                    } else if (event.key === Qt.Key_Right) {
-                        if (!root.searchingText)
-                            Hyprland.dispatch("workspace r+1");
-                    }
-                }
-
-                SearchWidget {
-                    id: searchWidget
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    Synchronizer on searchingText {
-                        property alias source: root.searchingText
-                    }
-                }
-
-                Loader {
-                    id: overviewLoader
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    active: GlobalStates.overviewOpen && (Config?.options.overview.enable ?? true)
-                    sourceComponent: OverviewWidget {
-                        panelWindow: root
-                        visible: (root.searchingText == "")
-                    }
+            Loader {
+                id: overviewLoader
+                anchors.horizontalCenter: parent.horizontalCenter
+                active: GlobalStates.overviewOpen && (Config?.options.overview.enable ?? true)
+                sourceComponent: OverviewWidget {
+                    screen: panelWindow.screen
+                    visible: (panelWindow.searchingText == "")
                }
            }
        }
@@ -134,15 +114,9 @@ Scope {
            GlobalStates.overviewOpen = false;
            return;
        }
-        for (let i = 0; i < overviewVariants.instances.length; i++) {
-            let panelWindow = overviewVariants.instances[i];
-            if (panelWindow.modelData.name == Hyprland.focusedMonitor.name) {
-                overviewScope.dontAutoCancelSearch = true;
-                panelWindow.setSearchingText(Config.options.search.prefix.clipboard);
-                GlobalStates.overviewOpen = true;
-                return;
-            }
-        }
+        overviewScope.dontAutoCancelSearch = true;
+        panelWindow.setSearchingText(Config.options.search.prefix.clipboard);
+        GlobalStates.overviewOpen = true;
    }

    function toggleEmojis() {
@@ -150,15 +124,9 @@ Scope {
            GlobalStates.overviewOpen = false;
            return;
        }
-        for (let i = 0; i < overviewVariants.instances.length; i++) {
-            let panelWindow = overviewVariants.instances[i];
-            if (panelWindow.modelData.name == Hyprland.focusedMonitor.name) {
-                overviewScope.dontAutoCancelSearch = true;
-                panelWindow.setSearchingText(Config.options.search.prefix.emojis);
-                GlobalStates.overviewOpen = true;
-                return;
-            }
-        }
+        overviewScope.dontAutoCancelSearch = true;
+        panelWindow.setSearchingText(Config.options.search.prefix.emojis);
+        GlobalStates.overviewOpen = true;
    }

    IpcHandler {
@@ -13,8 +13,8 @@ import Quickshell.Hyprland

 Item {
    id: root
-    required property var panelWindow
-    readonly property HyprlandMonitor monitor: Hyprland.monitorFor(panelWindow.screen)
+    required property var screen
+    readonly property HyprlandMonitor monitor: Hyprland.monitorFor(screen)
    readonly property var toplevels: ToplevelManager.toplevels
    readonly property int workspacesShown: Config.options.overview.rows * Config.options.overview.columns
    readonly property int workspaceGroup: Math.floor((monitor.activeWorkspace?.id - 1) / workspacesShown)
@@ -13,11 +13,15 @@ import Quickshell.Io

 Item { // Wrapper
    id: root
+
    readonly property string xdgConfigHome: Directories.config
+    readonly property int typingDebounceInterval: 200
+    readonly property int typingResultLimit: 15 // Should be enough to cover the whole view
+
    property string searchingText: LauncherSearch.query
    property bool showResults: searchingText != ""
    implicitWidth: searchWidgetContent.implicitWidth + Appearance.sizes.elevationMargin * 2
-    implicitHeight: searchBar.implicitHeight + searchBar.verticalPadding * 2 + Appearance.sizes.elevationMargin * 2
+    implicitHeight: searchWidgetContent.implicitHeight + searchBar.verticalPadding * 2 + Appearance.sizes.elevationMargin * 2

    function focusFirstItem() {
        appResults.currentIndex = 0;
@@ -178,30 +182,35 @@ Item { // Wrapper
                    }
                }

-                model: ScriptModel {
-                    id: model
-                    objectProp: "key"
-                    values: LauncherSearch.results
-                    onValuesChanged: {
-                        root.focusFirstItem();
+                Timer {
+                    id: debounceTimer
+                    interval: root.typingDebounceInterval
+                    onTriggered: {
+                        resultModel.values = LauncherSearch.results ?? [];
                    }
                }

+                Connections {
+                    target: LauncherSearch
+                    function onResultsChanged() {
+                        resultModel.values = LauncherSearch.results.slice(0, root.typingResultLimit);
+                        root.focusFirstItem();
+                        debounceTimer.restart();
+                    }
+                }
+
+                model: ScriptModel {
+                    id: resultModel
+                    objectProp: "key"
+                }
+
                delegate: SearchItem {
                    // The selectable item for each search result
                    required property var modelData
                    anchors.left: parent?.left
                    anchors.right: parent?.right
                    entry: modelData
-                    query: StringUtils.cleanOnePrefix(root.searchingText, [
-                        Config.options.search.prefix.action,
-                        Config.options.search.prefix.app,
-                        Config.options.search.prefix.clipboard,
-                        Config.options.search.prefix.emojis,
-                        Config.options.search.prefix.math,
-                        Config.options.search.prefix.shellCommand,
-                        Config.options.search.prefix.webSearch
-                    ])
+                    query: StringUtils.cleanOnePrefix(root.searchingText, [Config.options.search.prefix.action, Config.options.search.prefix.app, Config.options.search.prefix.clipboard, Config.options.search.prefix.emojis, Config.options.search.prefix.math, Config.options.search.prefix.shellCommand, Config.options.search.prefix.webSearch])
                }
            }
        }
@@ -84,11 +84,11 @@ Scope { // Scope
        active: true
        
        sourceComponent: PanelWindow { // Window
-            id: sidebarRoot
+            id: panelWindow
            visible: GlobalStates.sidebarLeftOpen
            
            property bool extend: false
-            property real sidebarWidth: sidebarRoot.extend ? Appearance.sizes.sidebarWidthExtended : Appearance.sizes.sidebarWidth
+            property real sidebarWidth: panelWindow.extend ? Appearance.sizes.sidebarWidthExtended : Appearance.sizes.sidebarWidth
            property var contentParent: sidebarLeftBackground

            function hide() {
@@ -113,15 +113,17 @@ Scope { // Scope
                item: sidebarLeftBackground
            }

-            HyprlandFocusGrab { // Click outside to close
-                id: grab
-                windows: [ sidebarRoot ]
-                active: sidebarRoot.visible && !root.pin
-                onActiveChanged: { // Focus the selected tab
-                    if (active) sidebarLeftBackground.children[0].focusActiveItem()
+            onVisibleChanged: {
+                if (visible) {
+                    GlobalFocusGrab.addDismissable(panelWindow);
+                } else {
+                    GlobalFocusGrab.removeDismissable(panelWindow);
                }
-                onCleared: () => {
-                    if (!active) sidebarRoot.hide()
+            }
+            Connections {
+                target: GlobalFocusGrab
+                function onDismissed() {
+                    panelWindow.hide();
                }
            }

@@ -136,7 +138,7 @@ Scope { // Scope
                anchors.left: parent.left
                anchors.topMargin: Appearance.sizes.hyprlandGapsOut
                anchors.leftMargin: Appearance.sizes.hyprlandGapsOut
-                width: sidebarRoot.sidebarWidth - Appearance.sizes.hyprlandGapsOut - Appearance.sizes.elevationMargin
+                width: panelWindow.sidebarWidth - Appearance.sizes.hyprlandGapsOut - Appearance.sizes.elevationMargin
                height: parent.height - Appearance.sizes.hyprlandGapsOut * 2
                color: Appearance.colors.colLayer0
                border.width: 1
@@ -149,11 +151,11 @@ Scope { // Scope

                Keys.onPressed: (event) => {
                    if (event.key === Qt.Key_Escape) {
-                        sidebarRoot.hide();
+                        panelWindow.hide();
                    }
                    if (event.modifiers === Qt.ControlModifier) {
                        if (event.key === Qt.Key_O) {
-                            sidebarRoot.extend = !sidebarRoot.extend;
+                            panelWindow.extend = !panelWindow.extend;
                        } else if (event.key === Qt.Key_D) {
                            root.toggleDetach();
                        } else if (event.key === Qt.Key_P) {
@@ -126,7 +126,7 @@ Button {
                    opacity: root.showActions ? 1 : 0
                    visible: opacity > 0
                    radius: Appearance.rounding.small
-                    color: Appearance.colors.colSurfaceContainer
+                    color: Appearance.m3colors.m3surfaceContainer
                    implicitHeight: contextMenuColumnLayout.implicitHeight + radius * 2
                    implicitWidth: contextMenuColumnLayout.implicitWidth

@@ -12,11 +12,11 @@ Scope {
    property int sidebarWidth: Appearance.sizes.sidebarWidth

    PanelWindow {
-        id: sidebarRoot
+        id: panelWindow
        visible: GlobalStates.sidebarRightOpen

        function hide() {
-            GlobalStates.sidebarRightOpen = false
+            GlobalStates.sidebarRightOpen = false;
        }

        exclusiveZone: 0
@@ -32,12 +32,17 @@ Scope {
            bottom: true
        }

-        HyprlandFocusGrab {
-            id: grab
-            windows: [ sidebarRoot ]
-            active: GlobalStates.sidebarRightOpen
-            onCleared: () => {
-                if (!active) sidebarRoot.hide()
+        onVisibleChanged: {
+            if (visible) {
+                GlobalFocusGrab.addDismissable(panelWindow);
+            } else {
+                GlobalFocusGrab.removeDismissable(panelWindow);
+            }
+        }
+        Connections {
+            target: GlobalFocusGrab
+            function onDismissed() {
+                panelWindow.hide();
            }
        }

@@ -53,16 +58,14 @@ Scope {
            height: parent.height - Appearance.sizes.hyprlandGapsOut * 2

            focus: GlobalStates.sidebarRightOpen
-            Keys.onPressed: (event) => {
+            Keys.onPressed: event => {
                if (event.key === Qt.Key_Escape) {
-                    sidebarRoot.hide();
+                    panelWindow.hide();
                }
            }

            sourceComponent: SidebarRightContent {}
        }
-
-
    }

    IpcHandler {
@@ -105,5 +108,4 @@ Scope {
            GlobalStates.sidebarRightOpen = false;
        }
    }
-
 }
@@ -139,7 +139,7 @@ Item {
            anchors.margins: root.dialogMargins
            implicitHeight: dialogColumnLayout.implicitHeight

-            color: Appearance.colors.colSurfaceContainerHigh
+            color: Appearance.m3colors.m3surfaceContainerHigh
            radius: Appearance.rounding.normal

            function addTask() {
@@ -66,6 +66,7 @@ Scope {
                }
                color: "transparent"

+                // Positioning
                anchors {
                    left: !Config.options.bar.bottom
                    right: Config.options.bar.bottom
@@ -73,6 +74,14 @@ Scope {
                    bottom: true
                }

+                // Include in focus grab
+                Component.onCompleted: {
+                    GlobalFocusGrab.addPersistent(barRoot);
+                }
+                Component.onDestruction: {
+                    GlobalFocusGrab.removePersistent(barRoot);
+                }
+
                MouseArea  {
                    id: hoverRegion
                    hoverEnabled: true
@@ -39,12 +39,16 @@ Scope {
            implicitHeight: Appearance.sizes.wallpaperSelectorHeight
            implicitWidth: Appearance.sizes.wallpaperSelectorWidth

-            HyprlandFocusGrab { // Click outside to close
-                id: grab
-                windows: [ panelWindow ]
-                active: wallpaperSelectorLoader.active
-                onCleared: () => {
-                    if (!active) GlobalStates.wallpaperSelectorOpen = false;
+            Component.onCompleted: {
+                GlobalFocusGrab.addDismissable(panelWindow);
+            }
+            Component.onDestruction: {
+                GlobalFocusGrab.removeDismissable(panelWindow);
+            }
+            Connections {
+                target: GlobalFocusGrab
+                function onDismissed() {
+                    GlobalStates.wallpaperSelectorOpen = false;
                }
            }

@@ -53,9 +53,9 @@ ContentPage {
    }

    ContentSection {
+        id: settingsClock
        icon: "clock_loader_40"
        title: Translation.tr("Widget: Clock")
-        id: settingsClock

        function stylePresent(styleName) {
            if (!Config.options.background.widgets.clock.showOnlyWhenLocked && Config.options.background.widgets.clock.style === styleName) {
@@ -120,61 +120,161 @@ ContentPage {
            }
        }

-        ContentSubsection {
-            visible: !Config.options.background.widgets.clock.showOnlyWhenLocked
-            title: Translation.tr("Clock style")
-            ConfigSelectionArray {
-                currentValue: Config.options.background.widgets.clock.style
-                onSelected: newValue => {
-                    Config.options.background.widgets.clock.style = newValue;
-                }
-                options: [
-                    {
-                        displayName: Translation.tr("Digital"),
-                        icon: "timer_10",
-                        value: "digital"
-                    },
-                    {
-                        displayName: Translation.tr("Cookie"),
-                        icon: "cookie",
-                        value: "cookie"
+        ConfigRow {
+            ContentSubsection {
+                visible: !Config.options.background.widgets.clock.showOnlyWhenLocked
+                title: Translation.tr("Clock style")
+                Layout.fillWidth: true
+                ConfigSelectionArray {
+                    currentValue: Config.options.background.widgets.clock.style
+                    onSelected: newValue => {
+                        Config.options.background.widgets.clock.style = newValue;
                    }
-                ]
+                    options: [
+                        {
+                            displayName: Translation.tr("Digital"),
+                            icon: "timer_10",
+                            value: "digital"
+                        },
+                        {
+                            displayName: Translation.tr("Cookie"),
+                            icon: "cookie",
+                            value: "cookie"
+                        }
+                    ]
+                }
            }
-        }

-        ContentSubsection {
-            title: Translation.tr("Clock style (locked)")
-            ConfigSelectionArray {
-                currentValue: Config.options.background.widgets.clock.styleLocked
-                onSelected: newValue => {
-                    Config.options.background.widgets.clock.styleLocked = newValue;
-                }
-                options: [
-                    {
-                        displayName: Translation.tr("Digital"),
-                        icon: "timer_10",
-                        value: "digital"
-                    },
-                    {
-                        displayName: Translation.tr("Cookie"),
-                        icon: "cookie",
-                        value: "cookie"
+            ContentSubsection {
+                title: Translation.tr("Clock style (locked)")
+                Layout.fillWidth: false
+                ConfigSelectionArray {
+                    currentValue: Config.options.background.widgets.clock.styleLocked
+                    onSelected: newValue => {
+                        Config.options.background.widgets.clock.styleLocked = newValue;
                    }
-                ]
+                    options: [
+                        {
+                            displayName: Translation.tr("Digital"),
+                            icon: "timer_10",
+                            value: "digital"
+                        },
+                        {
+                            displayName: Translation.tr("Cookie"),
+                            icon: "cookie",
+                            value: "cookie"
+                        }
+                    ]
+                }
            }
        }

        ContentSubsection {
            visible: settingsClock.digitalPresent
            title: Translation.tr("Digital clock settings")
+            tooltip: Translation.tr("Font width and roundness settings are only available for some fonts like Google Sans Flex")

-            ConfigSwitch {
-                buttonIcon: "animation"
-                text: Translation.tr("Animate time change")
-                checked: Config.options.background.widgets.clock.digital.animateChange
-                onCheckedChanged: {
-                    Config.options.background.widgets.clock.digital.animateChange = checked;
+            ConfigRow {
+                uniform: true
+                ConfigSwitch {
+                    buttonIcon: "vertical_distribute"
+                    text: Translation.tr("Vertical")
+                    checked: Config.options.background.widgets.clock.digital.vertical
+                    onCheckedChanged: {
+                        Config.options.background.widgets.clock.digital.vertical = checked;
+                    }
+                }
+                ConfigSwitch {
+                    buttonIcon: "animation"
+                    text: Translation.tr("Animate time change")
+                    checked: Config.options.background.widgets.clock.digital.animateChange
+                    onCheckedChanged: {
+                        Config.options.background.widgets.clock.digital.animateChange = checked;
+                    }
+                }
+            }
+
+            ConfigRow {
+                uniform: true
+
+                ConfigSwitch {
+                    buttonIcon: "date_range"
+                    text: Translation.tr("Show date")
+                    checked: Config.options.background.widgets.clock.digital.showDate
+                    onCheckedChanged: {
+                        Config.options.background.widgets.clock.digital.showDate = checked;
+                    }
+                }
+                ConfigSwitch {
+                    buttonIcon: "activity_zone"
+                    text: Translation.tr("Use adaptive alignment")
+                    checked: Config.options.background.widgets.clock.digital.adaptiveAlignment
+                    onCheckedChanged: {
+                        Config.options.background.widgets.clock.digital.adaptiveAlignment = checked;
+                    }
+                    StyledToolTip {
+                        text: Translation.tr("Aligns the date and quote to left, center or right depending on its position on the screen.")
+                    }
+                }
+            }
+
+            MaterialTextArea {
+                Layout.fillWidth: true
+                placeholderText: Translation.tr("Font family")
+                text: Config.options.background.widgets.clock.digital.font.family
+                wrapMode: TextEdit.Wrap
+                onTextChanged: {
+                    Config.options.background.widgets.clock.digital.font.family = text;
+                }
+            }
+
+            ConfigSlider {
+                text: Translation.tr("Font weight")
+                value: Config.options.background.widgets.clock.digital.font.weight
+                usePercentTooltip: false
+                buttonIcon: "format_bold"
+                from: 1
+                to: 1000
+                stopIndicatorValues: [350]
+                onValueChanged: {
+                    Config.options.background.widgets.clock.digital.font.weight = value;
+                }
+            }
+
+            ConfigSlider {
+                text: Translation.tr("Font size")
+                value: Config.options.background.widgets.clock.digital.font.size
+                usePercentTooltip: false
+                buttonIcon: "format_size"
+                from: 70
+                to: 150
+                stopIndicatorValues: [90]
+                onValueChanged: {
+                    Config.options.background.widgets.clock.digital.font.size = value;
+                }
+            }
+
+            ConfigSlider {
+                text: Translation.tr("Font width")
+                value: Config.options.background.widgets.clock.digital.font.width
+                usePercentTooltip: false
+                buttonIcon: "fit_width"
+                from: 25
+                to: 125
+                stopIndicatorValues: [100]
+                onValueChanged: {
+                    Config.options.background.widgets.clock.digital.font.width = value;
+                }
+            }
+            ConfigSlider {
+                text: Translation.tr("Font roundness")
+                value: Config.options.background.widgets.clock.digital.font.roundness
+                usePercentTooltip: false
+                buttonIcon: "line_curve"
+                from: 0
+                to: 100
+                onValueChanged: {
+                    Config.options.background.widgets.clock.digital.font.roundness = value;
                }
            }
        }
@@ -225,9 +225,6 @@ ContentPage {
            onCheckedChanged: {
                Config.options.appearance.transparency.enable = checked;
            }
-            StyledToolTip {
-                text: Translation.tr("Might look ass. Unsupported.")
-            }
        }
    }

@@ -89,10 +89,11 @@ Singleton {
        // Special
        property color shadow: ColorUtils.transparentize('#161616', 0.62)
        property color ambientShadow: ColorUtils.transparentize("#000000", 0.75)
-        property color bgPanelFooterBase: ColorUtils.transparentize(root.dark ? root.darkColors.bg0 : root.lightColors.bg0, root.panelBackgroundTransparency)
-        property color bgPanelFooter: ColorUtils.transparentize(bgPanelFooterBase, root.panelLayerTransparency)
+        property color bgPanelFooterBase: root.dark ? root.darkColors.bg0 : root.lightColors.bg0
+        property color bgPanelFooterBackground: ColorUtils.transparentize(root.dark ? root.darkColors.bg0 : root.lightColors.bg0, root.panelBackgroundTransparency)
+        property color bgPanelFooter: ColorUtils.transparentize(bgPanelFooterBackground, root.panelLayerTransparency)
        property color bgPanelBodyBase: root.dark ? root.darkColors.bgPanelBody : root.lightColors.bgPanelBody
-        property color bgPanelBody: ColorUtils.solveOverlayColor(bgPanelFooterBase,bgPanelBodyBase, 1 - root.panelLayerTransparency)
+        property color bgPanelBody: ColorUtils.solveOverlayColor(bgPanelFooterBackground,bgPanelBodyBase, 1 - root.panelLayerTransparency)
        property color bgPanelSeparator: ColorUtils.solveOverlayColor(bgPanelBodyBase, root.dark ? root.darkColors.bgPanelSeparator : root.lightColors.bgPanelSeparator, 1 - root.panelBackgroundTransparency)
        // Layer 0
        property color bg0Base: root.dark ? root.darkColors.bg0 : root.lightColors.bg0
@@ -12,6 +12,7 @@ Item {
    id: root
    property Item contentItem
    property real radius: Looks.radius.large
+    property alias color: contentRect.color
    property alias border: borderRect
    property alias borderColor: borderRect.border.color
    property alias borderWidth: borderRect.border.width
@@ -42,7 +43,7 @@ Item {
        anchors.centerIn: parent
        z: 0
        
-        color: Looks.colors.bgPanelFooterBase
+        color: Looks.colors.bgPanelFooterBackground
        implicitWidth: contentItem.implicitWidth
        implicitHeight: contentItem.implicitHeight
        layer.enabled: true
@@ -135,7 +135,7 @@ Rectangle {
            }
            BodyRectangle {
                implicitHeight: 80
-                color: Looks.colors.bgPanelFooterBase
+                color: Looks.colors.bgPanelFooterBackground
                RowLayout {
                    anchors.fill: parent
                    anchors.margins: 24
@@ -18,7 +18,7 @@ Item {
    Component.onCompleted: overlayColor = ColorUtils.transparentize("#000000", 0.4)
    Behavior on overlayColor {
        ColorAnimation {
-            duration: 250
+            duration: 150
            easing.type: Easing.InOutQuad
        }
    }
@@ -231,7 +231,7 @@ Rectangle {
            anchors.fill: parent
            anchors.margins: wsBorder.border.width
            radius: wsBorder.radius - wsBorder.border.width
-            color: Looks.colors.bgPanelFooterBase
+            color: Looks.colors.bgPanelFooterBackground

            implicitHeight: 174

@@ -25,7 +25,7 @@ WMouseAreaButton {

    property string iconName: AppSearch.guessIcon(hyprlandClient?.class)

-    color: drag.active ? ColorUtils.transparentize(Looks.colors.bg1Base) : (containsMouse ? Looks.colors.bg1Base : Looks.colors.bgPanelFooterBase)
+    color: drag.active ? ColorUtils.transparentize(Looks.colors.bg1Base) : (containsMouse ? Looks.colors.bg1Base : Looks.colors.bgPanelFooterBackground)
    borderColor: ColorUtils.transparentize(Looks.colors.bg2Border, drag.active ? 1 : 0)
    radius: Looks.radius.xLarge