feat: bar workspace groups

config/BarConfig.qml

@@ -19,6 +19,6 @@ Singleton {
     component Workspaces: QtObject {
         readonly property int shown: 10
         readonly property string style: ""
-        readonly property bool occupiedBg: false
+        readonly property bool occupiedBg: true
     }
 }

modules/bar/components/workspaces/ActiveIndicator.qml

@@ -12,8 +12,9 @@ Rectangle {
     required property Item mask
     required property real maskWidth
     required property real maskHeight
+    required property int groupOffset
 
-    property int currentIdx: (Hyprland.activeWorkspace?.id ?? 1) - 1
+    property int currentIdx: (Hyprland.activeWorkspace?.id ?? 1) - 1 - groupOffset
     property int lastIdx: currentIdx
     property real leading: workspaces[currentIdx][vertical ? "y" : "x"]
     property real trailing: workspaces[lastIdx][vertical ? "y" : "x"]

modules/bar/components/workspaces/OccupiedBg.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import "root:/widgets"
 import "root:/config"
 import QtQuick
@@ -9,8 +11,10 @@ BoxLayout {
     required property bool vertical
     required property list<Workspace> workspaces
     required property var occupied
+    required property int groupOffset
 
     anchors.centerIn: parent
+    opacity: BarConfig.workspaces.occupiedBg ? 1 : 0
     spacing: 0
     z: -1
 
@@ -19,11 +23,13 @@ BoxLayout {
 
         Rectangle {
             required property int index
-            readonly property int roundLeft: index === 0 || !root.occupied[index] ? Appearance.rounding.full : 0
-            readonly property int roundRight: index === BarConfig.workspaces.shown - 1 || !root.occupied[index + 2] ? Appearance.rounding.full : 0
+            readonly property int roundLeft: index === 0 || !root.occupied[ws - 1] ? Appearance.rounding.full : 0
+            readonly property int roundRight: index === BarConfig.workspaces.shown - 1 || !root.occupied[ws + 1] ? Appearance.rounding.full : 0
+
+            property int ws: root.groupOffset + index + 1
 
             color: Appearance.alpha(Appearance.colours.surface2, true)
-            opacity: root.occupied[index + 1] ? 1 : 0
+            opacity: root.occupied[ws] ? 1 : 0
             topLeftRadius: roundLeft
             bottomLeftRadius: roundLeft
             topRightRadius: roundRight
@@ -42,4 +48,12 @@ BoxLayout {
             }
         }
     }
+
+    Behavior on opacity {
+        NumberAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
 }

modules/bar/components/workspaces/Workspace.qml

@@ -8,11 +8,14 @@ StyledText {
     required property bool vertical
     required property bool homogenous
     required property var occupied
+    required property int groupOffset
 
     readonly property bool isWorkspace: true // Flag for finding workspace children
 
-    text: index + 1
-    color: BarConfig.workspaces.occupiedBg || occupied[index + 1] ? Appearance.colours.text : Appearance.colours.subtext0
+    property int ws: groupOffset + index + 1
+
+    text: ws
+    color: BarConfig.workspaces.occupiedBg || occupied[ws] ? Appearance.colours.text : Appearance.colours.subtext0
     horizontalAlignment: StyledText.AlignHCenter
 
     Layout.preferredWidth: homogenous && !vertical ? BarConfig.sizes.innerHeight : -1

modules/bar/components/workspaces/Workspaces.qml

@@ -8,15 +8,13 @@ Item {
 
     property alias vertical: layout.vertical
     readonly property color colour: Appearance.colours.mauve
-    property int shown: 10
-    property bool occupiedBg: false
-    property bool showWindows: false
 
     readonly property list<Workspace> workspaces: layout.children.filter(c => c.isWorkspace)
     readonly property var occupied: Hyprland.workspaces.values.reduce((acc, curr) => {
         acc[curr.id] = curr.lastIpcObject.windows > 0;
         return acc;
     }, {})
+    readonly property int groupOffset: Math.floor(((Hyprland.activeWorkspace?.id ?? 1) - 1) / BarConfig.workspaces.shown) * BarConfig.workspaces.shown
 
     implicitWidth: layout.implicitWidth
     implicitHeight: layout.implicitHeight
@@ -24,7 +22,6 @@ Item {
     BoxLayout {
         id: layout
 
-        anchors.fill: parent
         homogenous: true
         spacing: 0
 
@@ -33,25 +30,18 @@ Item {
 
             Workspace {
                 vertical: root.vertical
-                homogenous: true
+                homogenous: layout.homogenous
                 occupied: root.occupied
+                groupOffset: root.groupOffset
             }
         }
     }
 
     OccupiedBg {
-        opacity: BarConfig.workspaces.occupiedBg ? 1 : 0
         vertical: root.vertical
         workspaces: root.workspaces
         occupied: root.occupied
-
-        Behavior on opacity {
-            NumberAnimation {
-                duration: Appearance.anim.durations.normal
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Appearance.anim.curves.standard
-            }
-        }
+        groupOffset: root.groupOffset
     }
 
     ActiveIndicator {
@@ -60,12 +50,13 @@ Item {
         mask: layout
         maskWidth: root.width
         maskHeight: root.height
+        groupOffset: root.groupOffset
     }
 
     MouseArea {
         anchors.fill: parent
 
-        onPressed: event => Hyprland.dispatch(`workspace ${layout.childAt(event.x, event.y).index + 1}`)
+        onPressed: event => Hyprland.dispatch(`workspace ${layout.childAt(event.x, event.y).index + root.groupOffset + 1}`)
         onWheel: event => {
             if (event.angleDelta.y < 0)
                 Hyprland.dispatch(`workspace r+1`);