Improve hover behaviour, make font configurable, adjust overview

Panes/Battery.qml

@@ -42,6 +42,7 @@ Column {
                 Text {
                     parent: profile
                     anchors.centerIn: parent
+                    font.family: root.font
                     text: PowerProfile.toString(powerProfile)
                     color: PowerProfiles.profile === powerProfile ? "black" : "white"
                     Behavior on color { ColorAnimation {duration: 50}}
@@ -96,6 +97,7 @@ Column {
                 Text {
                     anchors.centerIn: parent
                     font.pixelSize: 20
+                    font.family: root.font
                     color: "white"
                     text: Math.round(modelData.percentage * 100) + "%"
                 }
@@ -107,6 +109,7 @@ Column {
                     x: 4
                     text: UPowerDeviceType.toString(modelData.type)
                     font.pixelSize: 20
+                    font.family: root.font
                     color: "white"
                 }
                 Row {
@@ -126,6 +129,7 @@ Column {
                                 anchors.horizontalCenter: parent.horizontalCenter
                                 color: "white"
                                 font.pixelSize: 16
+                                font.family: root.font
                                 text: card.data
                             }
                             Text {
@@ -133,6 +137,7 @@ Column {
                                 color: "#aaa"
                                 text: card.label
                                 font.pixelSize: 12
+                                font.family: root.font
                             }
                         }
                     }

Panes/Brightness.qml

@@ -41,6 +41,7 @@ Column {
                 leftMargin: 6
             }
             font.pixelSize: 16
+            font.family: root.font
             color: "white"
             text: "Display brightness"
         }
@@ -75,6 +76,7 @@ Column {
             }
             height: 24
             font.pixelSize: 14
+            font.family: root.font
             color: "white"
             text: toggleButton.text
         }

Panes/Launcher.qml

@@ -47,6 +47,7 @@ Item {
             Behavior on x {NumberAnimation {duration: 300; easing.type: Easing.OutQuint}}
             focus: true
             font.pixelSize: 20
+            font.family: root.font
             color: "white"
             cursorDelegate: Item {}
             onCursorPositionChanged: cursorPosition = text.length
@@ -156,6 +157,7 @@ Item {
                 Text {
                     anchors.horizontalCenter: parent.horizontalCenter
                     font.pixelSize: 64
+                    font.family: root.font
                     text: modelData.emoji ?? ""
                     color: "white"
                 }
@@ -168,6 +170,7 @@ Item {
                     text: modelData.name
                     color: "white"
                     font.pixelSize: 16
+                    font.family: root.font
                     horizontalAlignment: Text.AlignHCenter
                     elide: Text.ElideRight
                 }

Panes/NotificationCenter.qml

@@ -39,6 +39,7 @@ Item {
                     anchors.horizontalCenter: parent.horizontalCenter
                     color: "#888"
                     text: "No notifications"
+                    font.family: root.font
                 }
             }
             ListView {
@@ -94,6 +95,7 @@ Item {
                     anchors.horizontalCenter: parent.horizontalCenter
                     color: "#888"
                     text: "Nothing playing"
+                    font.family: root.font
                 }
             }
             Column {
@@ -177,6 +179,7 @@ Item {
                     color: "white"
                     text: player.modelData?.trackTitle ?? ""
                     font.pixelSize: 16
+                    font.family: root.font
                 }
                 Text {
                     anchors {
@@ -188,6 +191,7 @@ Item {
                     color: "white"
                     text: player.modelData?.trackArtist ?? ""
                     font.pixelSize: 12
+                    font.family: root.font
                 }
                 Item {width: 1; height: 8}
                 Row {

Panes/Overview.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Effects
 import Quickshell
 import Quickshell.Hyprland
 import Quickshell.Widgets
@@ -16,7 +17,7 @@ Grid {
     horizontalItemAlignment: Grid.AlignHCenter
     verticalItemAlignment: Grid.AlignVCenter
     onVisibleChanged: {
-        if (!visible) return
+        if (!visible) return;
         Hyprland.refreshToplevels()
     }
     component WorkspaceView: ClippingRectangle {
@@ -52,20 +53,56 @@ Grid {
         }
         Repeater {
             model: Hyprland.toplevels.values.filter(tl => tl.workspace?.id == modelData + 1)
-            delegate: ClippingRectangle {
+            delegate: Item {
-                x: modelData.lastIpcObject.at[0] * workspaceView.widthRatio - 2
+                x: modelData.lastIpcObject.at?.[0] * workspaceView.widthRatio - 2
-                y: modelData.lastIpcObject.at[1] * workspaceView.widthRatio - 2
+                y: modelData.lastIpcObject.at?.[1] * workspaceView.widthRatio - 2
-                width: modelData.lastIpcObject.size[0] * workspaceView.widthRatio 
+                width: modelData.lastIpcObject.size?.[0] * workspaceView.widthRatio
-                height: modelData.lastIpcObject.size[1] * workspaceView.widthRatio
+                height: modelData.lastIpcObject.size?.[1] * workspaceView.widthRatio
                 ScreencopyView {
                     anchors.fill: parent
                     captureSource: modelData.wayland
                     live: overview.visible
+                    layer.enabled: true
+                    layer.effect: MultiEffect {
+                        blurEnabled: true
+                        blurMax: 8
+                        blur: 1
+                        autoPaddingEnabled: false
+                    }
+                }
+                Image {
+                    id: appicon
+                    anchors.centerIn: parent
+                    width: 36
+                    height: width
+                    sourceSize.width: width
+                    sourceSize.height: height
+                    source: {
+                        const appId = modelData.wayland?.appId
+                        const iconName = DesktopEntries.applications.values.find(
+                            app => app.startupClass === appId || app.id === appId
+                        )?.icon;
+                        return Quickshell.iconPath(iconName)
+                    }
+                    layer.enabled: true
+                    visible: false
+                }
+                MultiEffect {
+                    anchors.fill: appicon
+                    source: appicon
+                    blurMax: 12
+                    shadowEnabled: true
+                }
+                MultiEffect {
+                    anchors.fill: appicon
+                    source: appicon
+                    blurMax: 12
+                    shadowEnabled: true
                 }
             }
         }
         TapHandler { onTapped: {
-            if (modelData < 0) return
+            if (modelData < 0) return;
             Hyprland.dispatch(`hl.dsp.focus({workspace = ${modelData + 1}})`)
             root.close()
         }}
@@ -80,7 +117,7 @@ Grid {
         bottomRightRadius: 12
         TapHandler {
             onTapped: {
-                Hyprland.dispatch(`hl.dsp.workspace.toggle_special()`)
+                Hyprland.dispatch('hl.dsp.workspace.toggle_special()')
                 root.close()
             }
         }

Panes/Volume.qml

@@ -86,6 +86,7 @@ Row {
                         }
                         color: "white"
                         font.pixelSize: 16
+                        font.family: root.font
                     }
                     Widgets.Slider {
                         value: modelData.audio.volume

TopBar.qml

@@ -16,7 +16,6 @@ PanelWindow {
         left: true
         right: true
     }
-    property var font: {family: "0xProto Nerd Font"}
     
     implicitHeight: 400
     WlrLayershell.keyboardFocus: (up && !background.exit.running && !shortcut.pressed && background.index <= 1) ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
@@ -24,6 +23,7 @@ PanelWindow {
     exclusionMode: ExclusionMode.Ignore
     color: "transparent"
     visible: false
+    readonly property string font: 'Rubik'
     property bool up: false
 
     IpcHandler {
@@ -87,7 +87,7 @@ PanelWindow {
                 easing.type: Easing.OutQuint
             }
         }
-        DefaultTransition on width { }
+        DefaultTransition on width { id: transition }
         DefaultTransition on height { }
         property int index: 0
         onIndexChanged: {
@@ -192,7 +192,10 @@ PanelWindow {
         }
         HoverHandler {
             id: hover
-            onHoveredChanged: { if (!hovered && background.index === 0) root.close() }
+            onHoveredChanged: {
+                if (!hovered && (background.index === 1 || !transition.animation?.running))
+                    root.close() 
+            }
         }
     }
 }

Widgets/Battery.qml

@@ -52,6 +52,7 @@ Item {
             anchors.verticalCenter: parent.verticalCenter
             x: 10
             color: "white"
+            font.family: Config.font
             text: `${Math.round(UPower.displayDevice.percentage * 100)}% · ${UPower.displayDevice.changeRate.toPrecision(2)}W`
         }
     }

Widgets/Notification.qml

@@ -49,7 +49,7 @@ Rectangle {
                 right: parent.right
             }
             color: "white"
-            font.family: "Comfortaa"
+            font.family: root.font
             font.pixelSize: 16
             text: modelData?.summary ?? text
             elide: Text.ElideRight
@@ -62,7 +62,7 @@ Rectangle {
                 right: parent.right
             }
             color: "white"
-            font.family: "Comfortaa"
+            font.family: root.font
             font.pixelSize: 12
             text: modelData?.body ?? text
             elide: Text.ElideRight

Widgets/PercentIndicator.qml

@@ -4,7 +4,7 @@ import Quickshell.Services.Pipewire
 import QtQuick
 
 Shape {
-    id: root
+    id: percentIndicator
     preferredRendererType: Shape.CurveRenderer
     property var percent
     ShapePath {
@@ -14,10 +14,10 @@ Shape {
         strokeWidth: 2
         PathAngleArc {
             moveToStart: true
-            centerX: root.width/2
+            centerX: percentIndicator.width/2
-            centerY: root.height/2
+            centerY: percentIndicator.height/2
-            radiusX: root.width/2
+            radiusX: percentIndicator.width/2
-            radiusY: root.height/2
+            radiusY: percentIndicator.height/2
             startAngle: 90 + 40
             sweepAngle: 360 - 80
         }
@@ -29,12 +29,12 @@ Shape {
         strokeWidth: 2
         PathAngleArc {
             moveToStart: true
-            centerX: root.width/2
+            centerX: percentIndicator.width/2
-            centerY: root.height/2
+            centerY: percentIndicator.height/2
-            radiusX: root.width/2 - 1
+            radiusX: percentIndicator.width/2 - 1
-            radiusY: root.height/2 - 1
+            radiusY: percentIndicator.height/2 - 1
             startAngle: 90 + 40
-            sweepAngle: root.percent * (360 - 80)
+            sweepAngle: percentIndicator.percent * (360 - 80)
         }
     }
 }

Widgets/Time.qml

@@ -4,13 +4,13 @@ import Quickshell.Widgets
 import Quickshell.Services.Mpris
 
 Item {
-    id: root
+    id: time
     property var player: Mpris.players.values[0]
     anchors {
         top: parent.top
         bottom: parent.bottom
     }
-    width: children[1].width + 24
+    width: children[1].width + 18
     Rectangle {
         anchors.fill: parent
         anchors.margins: 4
@@ -20,20 +20,20 @@ Item {
         Behavior on color {ColorAnimation {duration: 150}}
     }
     Row {
-        spacing: 12
+        spacing: 8
         anchors.verticalCenter: parent.verticalCenter
-        x: 12
+        x: 8
         ClippingRectangle {
-            visible: !!root.player
+            visible: !!time.player
             anchors.verticalCenter: parent.verticalCenter
             width: 24
             height: width
             radius: 6
             Image {
                 anchors.fill: parent
-                source: root.player?.trackArtUrl ?? source
+                source: time.player?.trackArtUrl ?? source
             }
-            opacity: root.player?.isPlaying ? 1 : 0.5
+            opacity: time.player?.isPlaying ? 1 : 0.5
             Behavior  on opacity {NumberAnimation {duration: 150}}
         }
         Text {
@@ -41,6 +41,7 @@ Item {
             property var clock: SystemClock {}
             color: "white"
             text: Qt.formatDateTime(clock.date, "ddd MMM dd · hh:mm")
+            font.family: root.font
         }
     }
     HoverHandler {id: hover}

Widgets/Workspaces.qml

@@ -27,7 +27,13 @@ Item {
                 property var icon: {
                     let appId
                     if (workspace) {
-                        let toplevel = Array.from(workspace.toplevels.values).reduce((prev, curr) => (prev.lastIpcObject.focusHistoryID < curr.lastIpcObject.focusHistoryID) ? prev : curr)
+                        // Find most recently focused toplevel on workspace
+                        let toplevel = Array.from(workspace.toplevels.values).reduce(
+                            (prev, curr) => (
+                                prev.lastIpcObject.focusHistoryID <
+                                curr.lastIpcObject.focusHistoryID
+                            ) ? prev : curr
+                        );
                         appId = toplevel.wayland?.appId
                     }
                     return DesktopEntries.applications.values.find(

shell.qml

@@ -27,7 +27,7 @@ ShellRoot {
         color: "transparent"
         exclusionMode: ExclusionMode.Ignore
         implicitHeight: 1
-        implicitWidth: 800
+        implicitWidth: 1000
         HoverHandler {onHoveredChanged: {if (hovered) bar.open() }}
     }
     Shell.Corners { }