hefty: bar: special ws indication

dots/.config/quickshell/ii/modules/common/Appearance.qml

@@ -282,6 +282,20 @@ Singleton {
             }
         }
 
+        property QtObject elementMoveSmall: QtObject {
+            property int duration: animationCurves.expressiveFastSpatialDuration
+            property int type: Easing.BezierSpline
+            property list<real> bezierCurve: animationCurves.expressiveFastSpatial
+            property int velocity: 650
+            property Component numberAnimation: Component {
+                NumberAnimation {
+                    duration: root.animation.elementMoveSmall.duration
+                    easing.type: root.animation.elementMoveSmall.type
+                    easing.bezierCurve: root.animation.elementMoveSmall.bezierCurve
+                }
+            }
+        }
+
         property QtObject elementMoveEnter: QtObject {
             property int duration: 400
             property int type: Easing.BezierSpline

dots/.config/quickshell/ii/modules/common/models/WorkspaceModel.qml

@@ -8,12 +8,16 @@ NestableObject {
     id: root
 
     required property HyprlandMonitor monitor
+    readonly property var liveMonitorData: HyprlandData.monitors.find(m => m.id === monitor.id)
     readonly property Toplevel activeWindow: ToplevelManager.activeToplevel
     readonly property int activeWorkspace: monitor?.activeWorkspace?.id
     readonly property bool currentWorkspaceNotFake: activeWindow?.activated ?? false // Active empty workspace = fake. At least, that's how I like to call it.
     readonly property int fakeWorkspace: currentWorkspaceNotFake ? -9999 : activeWorkspace
     readonly property int shownCount: C.Config.options.bar.workspaces.shown
     readonly property int group: Math.floor((activeWorkspace - 1) / shownCount)
+    readonly property var specialWorkspace: liveMonitorData?.specialWorkspace
+    readonly property string specialWorkspaceName: specialWorkspace.name.replace("special:", "")
+    readonly property bool specialWorkspaceActive: specialWorkspaceName !== ""
 
     property list<bool> occupied: []
     property list<var> biggestWindow: occupied.map((_, index) => {

dots/.config/quickshell/ii/modules/common/widgets/Pill.qml

@@ -0,0 +1,5 @@
+import QtQuick
+
+Rectangle {
+    radius: Math.min(width, height) / 2
+}

dots/.config/quickshell/ii/modules/hefty/topLayer/bar/widgets/HWorkspaces.qml

@@ -31,6 +31,7 @@ Item {
     property real workspaceIconOpacityShrinked: 1
     property real workspaceIconMarginShrinked: -4
     property int workspaceIndexInGroup: (monitor?.activeWorkspace?.id - 1) % wsModel.shownCount
+    property real specialTextSize: workspaceButtonWidth * 0.5
 
     Layout.alignment: vertical ? Qt.AlignHCenter : Qt.AlignVCenter
     Layout.fillWidth: vertical
@@ -38,6 +39,25 @@ Item {
     implicitWidth: vertical ? Appearance.sizes.verticalBarWidth : occupiedIndicators.implicitWidth
     implicitHeight: vertical ? occupiedIndicators.implicitHeight : Appearance.sizes.barHeight
 
+    property real specialBlur: wsModel.specialWorkspaceActive ? 1 : 0
+    Behavior on specialBlur {
+        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
+
+    Item {
+        id: regularWorkspaces
+        anchors.fill: parent
+
+        scale: 1 - 0.08 * root.specialBlur
+        layer.smooth: true
+        layer.enabled: root.specialBlur > 0
+        layer.effect: MultiEffect {
+            brightness: -0.1 * root.specialBlur
+            blurEnabled: true
+            blur: root.specialBlur
+            blurMax: 32
+        }
+
         /////////////////// Occupied indicators ///////////////////
         StyledRectangle {
             id: occupiedIndicatorsBg
@@ -51,11 +71,6 @@ Item {
             id: occupiedIndicators
             anchors.centerIn: parent
 
-        // rowSpacing: 0
-        // columnSpacing: 0
-        // columns: root.vertical ? 1 : -1
-        // rows: root.vertical ? -1 : 1
-
             layer.enabled: true
             visible: false
 
@@ -73,11 +88,10 @@ Item {
 
                     // The idea: over-stretch to occupied sides, animate this for a smooth transition.
                     //           masking already prevents weird overlaps
-                Circle {
+                    Pill {
                         property real undirectionalWidth: root.workspaceButtonWidth * wsBg.currentOccupied
                         property real undirectionalLength: root.workspaceButtonWidth * (1 + 0.5 * wsBg.previousOccupied + 0.5 * wsBg.nextOccupied) * currentOccupied
                         property real undirectionalOffset: (!wsBg.currentOccupied ? 0.5 : -0.5 * wsBg.previousOccupied) * root.workspaceButtonWidth
-                    radius: undirectionalWidth / 2
                         anchors.verticalCenter: root.vertical ? undefined : parent.verticalCenter
                         anchors.horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
                         x: root.vertical ? 0 : undirectionalOffset
@@ -86,13 +100,13 @@ Item {
                         implicitHeight: root.vertical ? undirectionalLength : undirectionalWidth
 
                         Behavior on undirectionalWidth {
-                        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                            animation: Appearance.animation.elementMoveSmall.numberAnimation.createObject(this)
                         }
                         Behavior on undirectionalLength {
-                        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                            animation: Appearance.animation.elementMoveSmall.numberAnimation.createObject(this)
                         }
                         Behavior on undirectionalOffset {
-                        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                            animation: Appearance.animation.elementMoveSmall.numberAnimation.createObject(this)
                         }
                     }
                 }
@@ -116,7 +130,6 @@ Item {
             z: 2
 
             index: root.workspaceIndexInGroup
-        layer.enabled: true // For the masking
         }
 
         /////////////////// Hover ///////////////////
@@ -131,6 +144,12 @@ Item {
             }
 
             onPressed: Hyprland.dispatch(`workspace ${wsModel.getWorkspaceIdAt(hoverIndex)}`)
+            onWheel: (event) => {
+                if (event.angleDelta.y < 0)
+                    Hyprland.dispatch(`workspace r+1`);
+                else if (event.angleDelta.y > 0)
+                    Hyprland.dispatch(`workspace r-1`);
+            }
 
             TrailingIndicator {
                 id: interactionIndicator
@@ -155,40 +174,7 @@ Item {
 
             Repeater {
                 model: wsModel.shownCount
-            delegate: WorkspaceItem {
+                delegate: NumberWorkspaceItem {}
-                id: wsNum
-                property bool hasBiggestWindow: !!wsModel.biggestWindow[index]
-                property color contentColor: wsModel.occupied[wsNum.index] ? Appearance.colors.colOnSecondaryContainer : Appearance.colors.colOnLayer1Inactive
-
-                FadeLoader {
-                    shown: !(Config.options?.bar.workspaces.alwaysShowNumbers
-                        || root.superPressAndHeld
-                        || (Config.options?.bar.workspaces.showAppIcons && wsNum.hasBiggestWindow)
-                    )
-                    anchors.centerIn: parent
-                    Circle {
-                        anchors.centerIn: parent
-                        diameter: root.workspaceButtonWidth * 0.18
-                        color: wsNum.contentColor
-                    }
-                }
-                FadeLoader {
-                    shown: root.superPressAndHeld
-                        || ((Config.options?.bar.workspaces.alwaysShowNumbers && (!Config.options?.bar.workspaces.showAppIcons || !wsNum.hasBiggestWindow || root.showNumbers))
-                        || (root.superPressAndHeld && !Config.options?.bar.workspaces.showAppIcons)
-                    )
-                    anchors.centerIn: parent
-                    StyledText {
-                        anchors.centerIn: parent
-                        font {
-                            pixelSize: Appearance.font.pixelSize.small - ((text.length - 1) * (text !== "10") * 2)
-                            family: Config.options?.bar.workspaces.useNerdFont ? Appearance.font.family.iconNerd : defaultFont
-                        }
-                        color: wsNum.contentColor
-                        text: wsNum.wsId
-                    }
-                }
-            }
             }
         }
         Colorizer {
@@ -256,8 +242,8 @@ Item {
                         anchors.fill: appIcon
                         implicitWidth: appIcon.implicitWidth
                         implicitHeight: appIcon.implicitHeight
-                    colorizationColor: Appearance.colors.colOnSecondaryContainer
+                        colorizationColor: Appearance.m3colors.darkmode ? Appearance.colors.colOnSecondaryContainer : Appearance.colors.colOnPrimary
-                    colorization: Config.options.bar.workspaces.monochromeIcons * 0.7
+                        colorization: Config.options.bar.workspaces.monochromeIcons ? 0.8 : 0.5
                         brightness: 0
                         source: appIcon
 
@@ -278,6 +264,42 @@ Item {
                 }
             }
         }
+    }
+
+    FadeLoader {
+        anchors.centerIn: parent
+        shown: wsModel.specialWorkspaceActive
+
+        scale: 0.8 + 0.2 * root.specialBlur
+        // layer.enabled: true
+        // layer.smooth: true
+
+        Pill {
+            anchors.centerIn: parent
+            property real undirectionalWidth: root.activeWorkspaceSize
+            property real undirectionalLength: {
+                const base = root.workspaceButtonWidth * Math.min(1.35, wsModel.shownCount) // Who tf only configures only 2 workspaces shown anyway?
+                if (root.vertical) return base;
+                return specialWsText.implicitWidth + undirectionalWidth
+            }
+            color: Appearance.colors.colPrimary
+
+            implicitWidth: root.vertical ? undirectionalWidth : undirectionalLength
+            implicitHeight: root.vertical ? undirectionalLength : undirectionalWidth
+
+            StyledText {
+                id: specialWsText
+                anchors.centerIn: parent
+                text: (!root.vertical ? wsModel.specialWorkspaceName : "S")
+                color: Appearance.colors.colOnPrimary
+                font.pixelSize: root.specialTextSize
+            }
+
+            Behavior on undirectionalLength {
+                animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(this)
+            }
+        }
+    }
 
     /////////////////// Components ///////////////////
     component WorkspaceLayout: Grid {
@@ -301,6 +323,41 @@ Item {
         implicitHeight: root.vertical ? root.workspaceButtonWidth : Appearance.sizes.barHeight
     }
 
+    component NumberWorkspaceItem: WorkspaceItem {
+        id: wsNum
+        property bool hasBiggestWindow: !!wsModel.biggestWindow[index]
+        property color contentColor: wsModel.occupied[wsNum.index] ? Appearance.colors.colOnSecondaryContainer : Appearance.colors.colOnLayer1Inactive
+
+        FadeLoader {
+            shown: !(Config.options?.bar.workspaces.alwaysShowNumbers
+                || root.superPressAndHeld
+                || (Config.options?.bar.workspaces.showAppIcons && wsNum.hasBiggestWindow)
+            )
+            anchors.centerIn: parent
+            Circle {
+                anchors.centerIn: parent
+                diameter: root.workspaceButtonWidth * 0.18
+                color: wsNum.contentColor
+            }
+        }
+        FadeLoader {
+            shown: root.superPressAndHeld
+                || ((Config.options?.bar.workspaces.alwaysShowNumbers && (!Config.options?.bar.workspaces.showAppIcons || !wsNum.hasBiggestWindow || root.showNumbers))
+                || (root.superPressAndHeld && !Config.options?.bar.workspaces.showAppIcons)
+            )
+            anchors.centerIn: parent
+            StyledText {
+                anchors.centerIn: parent
+                font {
+                    pixelSize: Appearance.font.pixelSize.small - ((text.length - 1) * (text !== "10") * 2)
+                    family: Config.options?.bar.workspaces.useNerdFont ? Appearance.font.family.iconNerd : defaultFont
+                }
+                color: wsNum.contentColor
+                text: wsNum.wsId
+            }
+        }
+    }
+
     component TrailingIndicator: Item {
         id: trailingIndicator
         anchors.fill: parent
@@ -308,6 +365,11 @@ Item {
         property alias indicatorRectangle: indicatorRect
         property alias color: indicatorRect.color
 
+        property var indexPair: AnimatedTabIndexPair {
+            id: idxPair
+            index: trailingIndicator.index
+        }
+
         StyledRectangle {
             id: indicatorRect
             anchors {
@@ -315,11 +377,6 @@ Item {
                 horizontalCenter: vertical ? parent.horizontalCenter : undefined
             }
 
-            AnimatedTabIndexPair {
-                id: idxPair
-                index: trailingIndicator.index
-            }
-
             property real indicatorPosition: Math.min(idxPair.idx1, idxPair.idx2) * root.workspaceButtonWidth + root.activeWorkspaceMargin
             property real indicatorLength: Math.abs(idxPair.idx1 - idxPair.idx2) * root.workspaceButtonWidth + root.activeWorkspaceSize
             property real indicatorThickness: root.activeWorkspaceSize