feat(sway): working workspace indicator

Indicator is buggy when workspace is focused & hovered at the same time

src/Bar.qml

@@ -4,6 +4,7 @@ import Quickshell.Io // for process
 import "windows"
 import QtQuick.Layouts
 import "systray"
+import "widgets/workspaces"
 
 Scope {
     Variants {
@@ -36,6 +37,8 @@ Scope {
 
                 SysTray {}
 
+                Workspaces {}
+
                 Item {
                     Layout.fillHeight: true
                 }

src/widgets/workspaces/WorkspaceElem.qml

@@ -0,0 +1,51 @@
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+
+Rectangle {
+    id: elem
+    required property int workspaceNum
+    required property int activeWorkspaceNum
+    property bool focused: active
+    property bool active: workspaceNum == activeWorkspaceNum
+    property int focusedMargin: 3
+    property int margin: (focused || active) ? focusedMargin : 5
+
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+    Layout.rightMargin: margin
+    Layout.leftMargin: margin
+
+    color: "black"
+    radius: 10
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+
+        onEntered: () => {
+            elem.focused = true;
+        }
+
+        onExited: () => {
+            elem.focused = active ?? false;
+        }
+    }
+
+    states: State {
+        name: "focused"
+        when: focused || active
+        PropertyChanges {
+            target: elem
+            Layout.rightMargin: focusedMargin
+            Layout.leftMargin: focusedMargin
+        }
+    }
+
+    transitions: Transition {
+        NumberAnimation {
+            easing.type: Easing.InOutQuad
+            duration: 50
+        }
+    }
+}

src/widgets/workspaces/Workspaces.qml

@@ -0,0 +1,54 @@
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Io // for Process
+
+Rectangle {
+    id: workspaces
+    property int workspaceN: 10
+    width: parent.width
+    height: 100 + col.spacing * (workspaceN - 1)
+    anchors.bottomMargin: 5
+    anchors.topMargin: 5
+    border.color: "black"
+
+    border.width: 2
+    radius: 5
+
+    ColumnLayout {
+        id: col
+        anchors.fill: parent
+        anchors.topMargin: 5
+        anchors.bottomMargin: 5
+        Layout.alignment: Qt.AlignHCenter
+        spacing: 1
+
+        Process {
+            id: getwork
+            command: ["swaymsg", "-mtsubscribe", "[\"workspace\"]"]
+            running: true
+
+            stdout: SplitParser {
+                splitMarker: "\n"
+                onRead: data => {
+                    const parsed = JSON.parse(data);
+                    if (parsed.change == "focus") {
+                        col.work = parsed.current.num;
+                    }
+                }
+            }
+        }
+
+        property int work: 1
+
+        Repeater {
+            model: workspaceN
+
+            WorkspaceElem {
+                required property int modelData
+                workspaceNum: modelData + 1
+                activeWorkspaceNum: col.work
+            }
+        }
+    }
+}