hefty: bar: time: popout

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

@@ -4,10 +4,10 @@ import Quickshell.Io
 
 JsonObject {
     property JsonObject bar: JsonObject {
-        property list<var> leftWidgets: [["HWindowInfo"]]
+        property list<var> leftWidgets: ["HWindowInfo"]
-        property list<var> centerLeftWidgets: [["HTime"]]
+        property list<var> centerLeftWidgets: ["HTime"]
-        property list<var> centerWidgets: [["HWorkspaces"]]
+        property list<var> centerWidgets: ["HWorkspaces"]
-        property list<var> centerRightWidgets: [["HBattery"]]
+        property list<var> centerRightWidgets: ["HBattery"]
         property list<var> rightWidgets: []
         property bool m3ExpressiveGrouping: true
     }

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

@@ -4,7 +4,7 @@ import QtQuick
 // The former animates faster than the latter, see the NumberAnimations below
 QtObject {
     id: root
-    required property int index
+    property int index
 
     property real idx1: index
     property real idx2: index

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

@@ -2,8 +2,6 @@ pragma ComponentBehavior: Bound
 import QtQuick
 
 StyledRectangle {
-    id: root
-    
     property bool vertical: false
     property real startRadius
     property real endRadius

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

@@ -0,0 +1,12 @@
+import QtQuick
+
+RectangularContainerShape {
+    property bool vertical: false
+    property real startRadius
+    property real endRadius
+
+    topLeftRadius: startRadius
+    topRightRadius: vertical ? startRadius : endRadius
+    bottomLeftRadius: vertical ? endRadius : startRadius
+    bottomRightRadius: endRadius
+}

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

@@ -0,0 +1,91 @@
+import QtQuick
+import qs.modules.common.models as M
+import "shapes/material-shapes.js" as MaterialShapes
+import "shapes/shapes/corner-rounding.js" as CornerRounding
+import "shapes/geometry/offset.js" as Offset
+
+// For returning the points 
+M.NestableObject {
+    id: root
+
+    required property real width
+    required property real height
+    property real radius: 0
+    property real topLeftRadius: radius
+    property real topRightRadius: radius
+    property real bottomLeftRadius: radius
+    property real bottomRightRadius: radius
+    property real xOffset: 0
+    property real yOffset: 0
+
+    readonly property real radiusLimit: Math.min(width, height) / 2
+    readonly property real effectiveTopLeftRadius: Math.min(topLeftRadius, radiusLimit)
+    readonly property real effectiveTopRightRadius: Math.min(topRightRadius, radiusLimit)
+    readonly property real effectiveBottomLeftRadius: Math.min(bottomLeftRadius, radiusLimit)
+    readonly property real effectiveBottomRightRadius: Math.min(bottomRightRadius, radiusLimit)
+
+    // Clockwise starting from bottom
+    property list<var> bottomPoints: [
+        new MaterialShapes.PointNRound(new Offset.Offset(xOffset + width - effectiveBottomRightRadius, yOffset + height), new CornerRounding.CornerRounding(0)),
+        new MaterialShapes.PointNRound(new Offset.Offset(xOffset + width / 2, yOffset + height), new CornerRounding.CornerRounding(0)),
+        new MaterialShapes.PointNRound(new Offset.Offset(xOffset + effectiveBottomLeftRadius, yOffset + height), new CornerRounding.CornerRounding(0)),
+    ]
+    property list<var> leftPoints: [
+        new MaterialShapes.PointNRound(new Offset.Offset(xOffset + 0, yOffset + height - effectiveBottomLeftRadius), new CornerRounding.CornerRounding(0)),
+        new MaterialShapes.PointNRound(new Offset.Offset(xOffset + 0, yOffset + height / 2), new CornerRounding.CornerRounding(0)),
+        new MaterialShapes.PointNRound(new Offset.Offset(xOffset + 0, yOffset + effectiveTopLeftRadius), new CornerRounding.CornerRounding(0)),
+    ]
+    property list<var> topPoints: [
+        new MaterialShapes.PointNRound(new Offset.Offset(xOffset + effectiveTopLeftRadius, yOffset + 0), new CornerRounding.CornerRounding(0)),
+        new MaterialShapes.PointNRound(new Offset.Offset(xOffset + width / 2, yOffset + 0), new CornerRounding.CornerRounding(0)),
+        new MaterialShapes.PointNRound(new Offset.Offset(xOffset + width - effectiveTopRightRadius, yOffset + 0), new CornerRounding.CornerRounding(0)),
+    ]
+    property list<var> rightPoints: [
+        new MaterialShapes.PointNRound(new Offset.Offset(xOffset + width, yOffset + effectiveTopRightRadius), new CornerRounding.CornerRounding(0)),
+        new MaterialShapes.PointNRound(new Offset.Offset(xOffset + width, yOffset + height / 2), new CornerRounding.CornerRounding(0)),
+        new MaterialShapes.PointNRound(new Offset.Offset(xOffset + width, yOffset + height - effectiveBottomRightRadius), new CornerRounding.CornerRounding(0)),
+    ]
+
+    function getFirstBottomPoints() {
+        return bottomPoints.slice(Math.floor(bottomPoints.length / 2))
+    }
+
+    function getLastBottomPoints() {
+        return bottomPoints.slice(0, Math.floor(bottomPoints.length / 2))
+    }
+
+    function getBottomLeftPoint(extraXOffset = 0, extraYOffset = 0, radius = undefined) {
+        if (radius === undefined) radius = effectiveBottomLeftRadius;
+        return new MaterialShapes.PointNRound(new Offset.Offset(xOffset + extraXOffset + 0, yOffset + extraYOffset + height), new CornerRounding.CornerRounding(radius))
+    }
+
+    function getTopLeftPoint(extraXOffset = 0, extraYOffset = 0, radius = undefined) {
+        if (radius === undefined) radius = effectiveTopLeftRadius;
+        return new MaterialShapes.PointNRound(new Offset.Offset(xOffset + extraXOffset + 0, yOffset + extraYOffset + 0), new CornerRounding.CornerRounding(radius))
+    }
+
+    function getTopRightPoint(extraXOffset = 0, extraYOffset = 0, radius = undefined) {
+        if (radius === undefined) radius = effectiveTopRightRadius;
+        return new MaterialShapes.PointNRound(new Offset.Offset(xOffset + extraXOffset + width, yOffset + extraYOffset + 0), new CornerRounding.CornerRounding(radius))
+    }
+
+    function getBottomRightPoint(extraXOffset = 0, extraYOffset = 0, radius = undefined) {
+        if (radius === undefined) radius = effectiveBottomRightRadius;
+        return new MaterialShapes.PointNRound(new Offset.Offset(xOffset + extraXOffset + width, yOffset + extraYOffset + height), new CornerRounding.CornerRounding(radius))
+    }
+
+    function getFullShape() {
+        const points = [
+            ...getFirstBottomPoints(),
+            getBottomLeftPoint(),
+            ...leftPoints,
+            getTopLeftPoint(),
+            ...topPoints,
+            getTopRightPoint(),
+            ...rightPoints,
+            getBottomRightPoint(),
+            ...getLastBottomPoints(),
+        ]
+        return MaterialShapes.customPolygon(points);
+    }
+}

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

@@ -6,6 +6,7 @@ import qs.modules.common as C
 // - osk.sh
 // - 3d
 // i hope i actually get to this and not shrimply forget
+// aaaaa i realized for this to work i would have to make this for shapes in general not just rects
 Rectangle {
     enum ContentLayer { Background, Pane, Group, Subgroup, Control }
     property var contentLayer: StyledRectangle.ContentLayer.Pane // To appropriately add effects like shadows/3d-ization

dots/.config/quickshell/ii/modules/hefty/topLayer/HAbstractMorphedPanel.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import Quickshell
+import qs.services as S
 
 /**
  * Abstract morphed panel to be used in TopLayerPanel.
@@ -21,6 +22,7 @@ Item {
     // Signals & loading
     signal requestFocus()
     signal dismissed()
+    signal focusGrabDismissed()
     property bool load: true
     property bool shown: true
 
@@ -32,7 +34,40 @@ Item {
 
     // Main stuff
     property var backgroundPolygon
+    property list<Item> baseMaskItems: [root]
+    property list<Item> attachedMaskItems: []
+    property list<Item> maskItems: [...baseMaskItems, ...attachedMaskItems]
     property Region maskRegion: Region {
-        item: root
+        regions: root.maskItems.map(item => regionComp.createObject(this, { "item": item }))
+    }
+
+    function addAttachedMaskItem(item) {
+        if (root.attachedMaskItems.includes(item)) return;
+        root.attachedMaskItems.push(item);
+    }
+
+    function removeAttachedMaskItem(item) {
+        root.attachedMaskItems = root.attachedMaskItems.filter(i => i !== item);
+    }
+
+    onAttachedMaskItemsChanged: {
+        if (attachedMaskItems.length > 0) {
+            S.GlobalFocusGrab.addDismissable(root.QsWindow.window);
+        } else {
+            S.GlobalFocusGrab.removeDismissable(root.QsWindow.window);
+        }
+    }
+
+    Connections {
+        target: S.GlobalFocusGrab
+        function onDismissed() {
+            root.attachedMaskItems = [];
+            root.focusGrabDismissed();
+        }
+    }
+
+    Component {
+        id: regionComp
+        Region {}
     }
 }

dots/.config/quickshell/ii/modules/hefty/topLayer/HTopLayerPanel.qml

@@ -29,9 +29,7 @@ PanelWindow {
         bottom: true
     }
 
-    mask: Region {
+    mask: root.currentPanel.maskRegion
-        item: root.currentPanel
-    }
     // HyprlandWindow.visibleMask: mask // TODO: use this later to optimize hyprland's rendering
 
     ///////////////// Content //////////////////

dots/.config/quickshell/ii/modules/hefty/topLayer/bar/HBarGroupContainer.qml

@@ -28,30 +28,32 @@ Item {
     property alias topRightRadius: bg.topRightRadius
     property alias bottomLeftRadius: bg.bottomLeftRadius
     property alias bottomRightRadius: bg.bottomRightRadius
-
+    property real backgroundWidth: root.vertical ? root.backgroundUndirectionalWidth : root.width
-    W.AxisRectangle {
+    property real backgroundHeight: root.vertical ? root.height : root.backgroundUndirectionalWidth
-        id: bg
+    property real fullBackgroundRadius: Math.min(backgroundWidth, backgroundHeight) / 2
-        anchors.centerIn: parent
+    function getBackgroundRadius(atSide) {
-        contentLayer: W.StyledRectangle.ContentLayer.Group
-
-        width: root.vertical ? root.backgroundUndirectionalWidth : root.width
-        height: root.vertical ? root.height : root.backgroundUndirectionalWidth
-
-        property real fullRadius: Math.min(width, height) / 2
-        function getRadius(atSide) {
         if (root.m3eRadius) {
-                if (atSide) return fullRadius;
+            if (atSide) return fullBackgroundRadius;
             else return C.Appearance.rounding.unsharpenmore;
         } else {
             return 12;
         }
     }
+
+    property Item background: W.AxisRectangle {
+        id: bg
+        anchors.centerIn: parent
+        contentLayer: W.StyledRectangle.ContentLayer.Group
+
+        width: root.backgroundWidth
+        height: root.backgroundHeight
+
         vertical: root.vertical
-        startRadius: getRadius(root.startSide)
+        startRadius: root.getBackgroundRadius(root.startSide)
-        endRadius: getRadius(root.endSide)
+        endRadius: root.getBackgroundRadius(root.endSide)
     }
 
-    GridLayout {
+    property Item contentItem: GridLayout {
         id: layout
         columns: C.Config.options.bar.vertical ? 1 : -1
         anchors.centerIn: parent
@@ -59,4 +61,9 @@ Item {
         columnSpacing: spacing
         rowSpacing: spacing
     }
+
+    children: [
+        background,
+        contentItem
+    ]
 }

dots/.config/quickshell/ii/modules/hefty/topLayer/bar/HBarPopout.qml

@@ -0,0 +1,42 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import qs.modules.common as C   
+import qs.modules.common.widgets as W
+
+W.StyledRectangle {
+    id: root
+    contentLayer: W.StyledRectangle.ContentLayer.Pane
+
+    color: C.Appearance.colors.colLayer2Base
+
+    transitions: Transition {
+        AnchorAnimation {
+            duration: C.Appearance.animation.elementMove.duration
+            easing.type: C.Appearance.animation.elementMove.type
+            easing.bezierCurve: C.Appearance.animation.elementMove.bezierCurve
+        }
+        ColorAnimation {
+            duration: C.Appearance.animation.elementMoveFast.duration
+            easing.type: C.Appearance.animation.elementMoveFast.type
+            easing.bezierCurve: C.Appearance.animation.elementMoveFast.bezierCurve
+        }
+        PropertyAnimation {
+            properties: "topLeftRadius,topRightRadius,bottomLeftRadius,bottomRightRadius,intendedWidth,intendedHeight"
+            duration: C.Appearance.animation.elementMove.duration
+            easing.type: C.Appearance.animation.elementMove.type
+            easing.bezierCurve: C.Appearance.animation.elementMove.bezierCurve
+        }
+        PropertyAnimation {
+            properties: "opacity"
+            duration: C.Appearance.animation.elementMoveFast.duration
+            easing.type: C.Appearance.animation.elementMoveFast.type
+            easing.bezierCurve: C.Appearance.animation.elementMoveFast.bezierCurve
+        }
+    }
+
+    W.StyledRectangularShadow {
+        target: root
+        z: -1
+        radius: root.topLeftRadius
+    }
+}

dots/.config/quickshell/ii/modules/hefty/topLayer/bar/HBarUserFallbackComponentRepeater.qml

@@ -23,9 +23,9 @@ Repeater {
         });
         for (var i = 0;i < m.length; i++) {
             const item = m[i];
-            if (item.type === "container") {
+            if (item.type === "container" || item.type === "component") {
-                item.startSide = (i === 0) || (m[i - 1].type === "component");
+                item.startSide = (i === 0) || (m[i - 1].type !== m[i].type);
-                item.endSide = (i + 1 >= m.length) || (m[i + 1].type === "component");
+                item.endSide = (i + 1 >= m.length) || (m[i + 1].type !== m[i].type);
             }
         }
         // print(JSON.stringify(m, null, 2));
@@ -43,8 +43,11 @@ Repeater {
             roleValue: "component"
             delegate: W.UserFallbackLoader {
                 required property var modelData
+                required property int index
                 componentName: modelData.value
                 context: root.context
+                property bool startSide: index === 0
+                property bool endSide: index === root.model.length - 1
             }
         }
 
@@ -57,11 +60,15 @@ Repeater {
                 endSide: modelData.endSide
                 
                 Repeater {
+                    id: containerRepeater
                     model: group.modelData.value
                     delegate: W.UserFallbackLoader {
                         required property var modelData
+                        required property int index
                         componentName: modelData
                         context: root.context
+                        property bool startSide: index === 0
+                        property bool endSide: index === group.modelData.value.length - 1
                     }
                 }
             }

dots/.config/quickshell/ii/modules/hefty/topLayer/bar/HBarWidgetContainer.qml

@@ -0,0 +1,9 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common as C
+import qs.modules.common.widgets as W
+
+HBarGroupContainer {
+    startSide: parent.startSide ?? true
+    endSide: parent.endSide ?? true
+}

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

@@ -1,16 +1,141 @@
 pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
+import Quickshell
 
 import qs.modules.common as C
 import qs.modules.common.functions as F
 import qs.services as S
 import qs.modules.common.widgets as W
+import qs.modules.common.widgets.shapes as Shapes
+import ".."
+import "../../../../common/widgets/shapes/material-shapes.js" as MaterialShapes
+import "../../../../common/widgets/shapes/shapes/corner-rounding.js" as CornerRounding
+import "../../../../common/widgets/shapes/geometry/offset.js" as Offset
 
+HBarWidgetContainer {
+    id: containerRoot
+
+    // Interactions
+    property var morphedPanelParent: F.ObjectUtils.findParentWithProperty(root, "maskItems")
+    Connections {
+        target: root
+        function onShowPopupChanged() {
+            if (root.showPopup) {
+                morphedPanelParent.addAttachedMaskItem(bgShape);
+            } else {
+                morphedPanelParent.removeAttachedMaskItem(bgShape);
+            }
+        }
+    }
+    Connections {
+        target: morphedPanelParent
+        function onFocusGrabDismissed() {
+            root.showPopup = false;
+        }
+    }
+
+    // Background container shape
+    background: Shapes.ShapeCanvas {
+        id: bgShape
+        property real baseTopMargin: (parent.height - containerShape.height) / 2
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            top: parent.top
+            topMargin: {
+                if (!root.atBottom || !root.showPopup) return baseTopMargin;
+                else return baseTopMargin - popupShape.height - bgShape.spacing;
+            }
+        }
+        width: root.showPopup ? Math.max(containerShape.width, popupShape.width) : containerShape.width
+        height: root.showPopup ? (containerShape.height + popupShape.height + bgShape.spacing) : containerShape.height
+        color: root.showPopup || progress < 1 ? C.Appearance.colors.colLayer3Base : C.Appearance.colors.colLayer1
+        // color: "green"
+        // debug: true
+        xOffset: (width - containerShape.width) / 2
+        yOffset: root.atBottom ? (height - containerShape.height) : 0
+        animation: Anim {}
+
+        Behavior on width {
+            Anim {}
+        }
+        Behavior on height {
+            Anim {}
+        }
+        Behavior on anchors.topMargin {
+            Anim {}
+        }
+
+        // Rectangle {
+        //     anchors.fill: parent
+        // }
+
+        polygonIsNormalized: false
+        property real spacing: baseTopMargin * 2
+        W.AxisRectangularContainerShape {
+            id: containerShape
+            width: containerRoot.backgroundWidth
+            height: containerRoot.backgroundHeight
+            startRadius: containerRoot.getBackgroundRadius(containerRoot.startSide)
+            endRadius: containerRoot.getBackgroundRadius(containerRoot.endSide)
+        }
+        W.RectangularContainerShape {
+            id: popupShape
+            width: 400 // TODO
+            height: 500 // TODO
+            radius: C.Appearance.rounding.large
+            xOffset: -(width - containerShape.width) / 2
+            yOffset: root.atBottom ? -(popupShape.height + bgShape.spacing) : (containerShape.height + bgShape.spacing)
+        }
+
+        
+        roundedPolygon: {
+            if (!root.showPopup) return containerShape.getFullShape()
+            // return popupShape.getFullShape(); // debug
+            const points = [
+                ...(root.atBottom ? containerShape.getFirstBottomPoints() : [
+                    ...popupShape.getFirstBottomPoints(),
+                    popupShape.getBottomLeftPoint(),
+                    ...popupShape.leftPoints,
+                    popupShape.getTopLeftPoint(),
+                ]),
+                containerShape.getBottomLeftPoint(0, bgShape.spacing * (!root.atBottom ? 1 : 0), containerShape.radiusLimit),
+                // ...containerShape.leftPoints,
+                containerShape.getTopLeftPoint(0, bgShape.spacing * (root.atBottom ? -1 : 0), containerShape.radiusLimit),
+                ...(!root.atBottom ? containerShape.topPoints : [
+                    popupShape.getBottomLeftPoint(),
+                    ...popupShape.leftPoints,
+                    popupShape.getTopLeftPoint(),
+                    ...popupShape.topPoints,
+                    popupShape.getTopRightPoint(),
+                    ...popupShape.rightPoints,
+                    popupShape.getBottomRightPoint(),
+                ]),
+                containerShape.getTopRightPoint(0, bgShape.spacing * (root.atBottom ? -1 : 0), containerShape.radiusLimit),
+                // ...containerShape.rightPoints,
+                containerShape.getBottomRightPoint(0, bgShape.spacing * (!root.atBottom ? 1 : 0), containerShape.radiusLimit),
+                ...(root.atBottom ? containerShape.getLastBottomPoints() : [
+                    popupShape.getTopRightPoint(),
+                    ...popupShape.rightPoints,
+                    popupShape.getBottomRightPoint(),
+                    ...popupShape.getLastBottomPoints(),
+                ]),
+            ];
+            return MaterialShapes.customPolygon(points);
+        }
+
+        component Anim: SpringAnimation {
+            spring: 3.5
+            damping: 0.35
+        }
+    }
+
+    // The button on the bar
     W.ButtonMouseArea {
         id: root
 
         property bool vertical: C.Config.options.bar.vertical
+        property bool atBottom: C.Config.options.bar.bottom
         property bool showPopup: false
 
         property var layoutParent: F.ObjectUtils.findParentWithProperty(root, "startSide")
@@ -56,7 +181,14 @@ W.ButtonMouseArea {
             id: horizontalContent
             anchors.fill: parent
             shown: !root.vertical
-        sourceComponent: RowLayout {
+
+            sourceComponent: Item {
+                anchors.fill: parent
+                implicitWidth: contentLayout.implicitWidth
+                implicitHeight: contentLayout.implicitHeight
+
+                RowLayout {
+                    id: contentLayout
                     anchors.fill: parent
 
                     W.VisuallyCenteredStyledText {
@@ -82,6 +214,8 @@ W.ButtonMouseArea {
                         text: S.DateTime.longDate
                     }
                 }
+
+            }
         }
 
         W.FadeLoader {
@@ -89,3 +223,4 @@ W.ButtonMouseArea {
             anchors.fill: parent
         }
     }
+}

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

@@ -10,7 +10,9 @@ import QtQuick.Effects
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Hyprland
+import ".."
 
+HBarWidgetContainer {
     Item {
         id: root
 
@@ -145,8 +147,11 @@ Item {
                     return Math.floor(position / root.workspaceButtonWidth);
                 }
 
-            onPressed: Hyprland.dispatch(`workspace ${wsModel.getWorkspaceIdAt(hoverIndex)}`)
+                function switchWorkspaceToHovered() {
-            onWheel: (event) => {
+                    Hyprland.dispatch(`workspace ${wsModel.getWorkspaceIdAt(hoverIndex)}`)
+                }
+                onPressed: switchWorkspaceToHovered()
+                onWheel: event => {
                     if (event.angleDelta.y < 0)
                         Hyprland.dispatch(`workspace r+1`);
                     else if (event.angleDelta.y > 0)
@@ -208,8 +213,7 @@ Item {
 
                         AppIcon {
                             id: appIcon
-                        property real cornerMargin: (!root.superPressAndHeld && Config.options?.bar.workspaces.showAppIcons && wsApp.biggestWindow) ? 
+                            property real cornerMargin: (!root.superPressAndHeld && Config.options?.bar.workspaces.showAppIcons && wsApp.biggestWindow) ? (root.workspaceButtonWidth - root.workspaceIconSize) / 2 : root.workspaceIconMarginShrinked
-                            (root.workspaceButtonWidth - root.workspaceIconSize) / 2 : root.workspaceIconMarginShrinked
                             anchors {
                                 bottom: parent.bottom
                                 right: parent.right
@@ -247,9 +251,7 @@ Item {
                             brightness: 0
                             source: appIcon
 
-                        opacity: !Config.options?.bar.workspaces.showAppIcons ? 0 :
+                            opacity: !Config.options?.bar.workspaces.showAppIcons ? 0 : (wsApp.biggestWindow && !root.superPressAndHeld && Config.options?.bar.workspaces.showAppIcons) ? 1 : wsApp.biggestWindow ? root.workspaceIconOpacityShrinked : 0
-                            (wsApp.biggestWindow && !root.superPressAndHeld && Config.options?.bar.workspaces.showAppIcons) ? 
-                            1 : wsApp.biggestWindow ? root.workspaceIconOpacityShrinked : 0
                             visible: opacity > 0
                             scale: ((!root.superPressAndHeld && Config.options?.bar.workspaces.showAppIcons) ? root.workspaceIconSize : root.workspaceIconSizeShrinked) / root.workspaceIconSize
 
@@ -282,9 +284,10 @@ Item {
                 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?
+                    const base = root.workspaceButtonWidth * Math.min(1.35, wsModel.shownCount); // Who tf only configures only 2 workspaces shown anyway?
-                if (root.vertical) return base;
+                    if (root.vertical)
-                return specialWsText.implicitWidth + undirectionalWidth
+                        return base;
+                    return specialWsText.implicitWidth + undirectionalWidth;
                 }
                 color: Appearance.colors.colPrimary
 
@@ -305,6 +308,33 @@ Item {
             }
         }
 
+        /////////////////// Super key press handling ///////////////////
+        Timer {
+            id: superPressAndHeldTimer
+            interval: (Config?.options.bar.autoHide.showWhenPressingSuper.delay ?? 100)
+            repeat: false
+            onTriggered: {
+                root.superPressAndHeld = true;
+            }
+        }
+        Connections {
+            target: GlobalStates
+            function onSuperDownChanged() {
+                if (!Config?.options.bar.autoHide.showWhenPressingSuper.enable)
+                    return;
+                if (GlobalStates.superDown)
+                    superPressAndHeldTimer.restart();
+                else {
+                    superPressAndHeldTimer.stop();
+                    root.superPressAndHeld = false;
+                }
+            }
+            function onSuperReleaseMightTriggerChanged() {
+                superPressAndHeldTimer.stop();
+            }
+        }
+    }
+
     /////////////////// Components ///////////////////
     component WorkspaceLayout: Grid {
         anchors {
@@ -334,10 +364,7 @@ Item {
         property color contentColor: (wsModel.occupied[wsNum.index] && wsId !== wsModel.fakeWorkspace) ? Appearance.colors.colOnSecondaryContainer : Appearance.colors.colOnLayer1Inactive
 
         FadeLoader {
-            shown: !(Config.options?.bar.workspaces.alwaysShowNumbers
+            shown: !(Config.options?.bar.workspaces.alwaysShowNumbers || root.superPressAndHeld || (Config.options?.bar.workspaces.showAppIcons && wsNum.hasBiggestWindow))
-                || root.superPressAndHeld
-                || (Config.options?.bar.workspaces.showAppIcons && wsNum.hasBiggestWindow)
-            )
             anchors.centerIn: parent
             Circle {
                 anchors.centerIn: parent
@@ -346,10 +373,7 @@ Item {
             }
         }
         FadeLoader {
-            shown: root.superPressAndHeld
+            shown: root.superPressAndHeld || ((Config.options?.bar.workspaces.alwaysShowNumbers && (!Config.options?.bar.workspaces.showAppIcons || !wsNum.hasBiggestWindow || root.showNumbers)) || (root.superPressAndHeld && !Config.options?.bar.workspaces.showAppIcons))
-                || ((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
@@ -397,30 +421,4 @@ Item {
             implicitHeight: root.vertical ? indicatorLength : indicatorThickness
         }
     }
-
-    /////////////////// Super key press handling ///////////////////
-    Timer {
-        id: superPressAndHeldTimer
-        interval: (Config?.options.bar.autoHide.showWhenPressingSuper.delay ?? 100)
-        repeat: false
-        onTriggered: {
-            root.superPressAndHeld = true;
-        }
-    }
-    Connections {
-        target: GlobalStates
-        function onSuperDownChanged() {
-            if (!Config?.options.bar.autoHide.showWhenPressingSuper.enable)
-                return;
-            if (GlobalStates.superDown)
-                superPressAndHeldTimer.restart();
-            else {
-                superPressAndHeldTimer.stop();
-                root.superPressAndHeld = false;
-            }
-        }
-        function onSuperReleaseMightTriggerChanged() {
-            superPressAndHeldTimer.stop();
-        }
-    }
 }