refactor(bar): modularize bar widgets and layout

modules/bar/BatteryIndicator.qml

@@ -0,0 +1,11 @@
+pragma ComponentBehavior: Bound
+
+import qs.ui
+import qs.services
+
+BarButton {
+  hoverHighlight: false
+  pointerCursor: false
+  label: `${Battery.percentage}% ${Battery.energyRate}W`
+  iconSource: Battery.icon
+}

modules/bar/CavaVisualizer.qml

@@ -0,0 +1,51 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import qs.config
+import qs.services
+
+Rectangle {
+  id: root
+
+  property int barCount: 14
+  property real maxValue: 100
+  readonly property bool shouldVisualize: barCount > 0 && Cava.values.some(v => v >= 0.001)
+
+  implicitWidth: 96
+  implicitHeight: 32
+  radius: Appearance.radius
+  color: Appearance.colors.inActive
+  visible: shouldVisualize
+
+  Row {
+    id: barRow
+
+    anchors.fill: parent
+    anchors.margins: 8
+    spacing: 3
+
+    Repeater {
+      model: root.barCount
+
+      Rectangle {
+        id: bar
+
+        required property int index
+        readonly property real value: Cava.values[index] ?? 0
+
+        width: (barRow.width - barRow.spacing * (root.barCount - 1)) / root.barCount
+        height: Math.max(2, (bar.value / root.maxValue) * barRow.height)
+        anchors.bottom: parent.bottom
+        radius: bar.width / 2
+        color: Appearance.colors.accent
+        antialiasing: true
+
+        Behavior on height {
+          NumberAnimation {
+            duration: Appearance.duration
+          }
+        }
+      }
+    }
+  }
+}

modules/bar/ClockWidget.qml

@@ -0,0 +1,10 @@
+pragma ComponentBehavior: Bound
+
+import qs.ui
+import qs.services
+
+BarButton {
+  hoverHighlight: false
+  pointerCursor: false
+  label: Time.time
+}

modules/bar/GhostButton.qml

@@ -0,0 +1,9 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import qs.ui
+
+BarButton {
+  iconOnly: true
+  iconSource: `${Quickshell.shellPath("assets")}/icons/ghost.svg`
+}

modules/bar/LauncherButton.qml

@@ -0,0 +1,10 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import qs.ui
+
+BarButton {
+  iconOnly: true
+  iconSource: `${Quickshell.shellPath("assets")}/icons/nix.svg`
+  onClicked: Quickshell.execDetached(["vicinae", "toggle"])
+}

modules/bar/SystemTrayWidget.qml

@@ -0,0 +1,36 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell.Services.SystemTray
+import qs.config
+
+Rectangle {
+  id: root
+
+  property int iconSize: 16
+
+  implicitWidth: trayRow.implicitWidth + 10
+  implicitHeight: 34
+  radius: Appearance.radius
+  color: Appearance.colors.inActive
+  visible: SystemTray.items.values.length > 0
+
+  Row {
+    id: trayRow
+
+    anchors.centerIn: parent
+    spacing: Appearance.spacing
+
+    Repeater {
+      model: SystemTray.items.values
+
+      Image {
+        required property var modelData
+
+        source: modelData.icon
+        width: root.iconSize
+        height: root.iconSize
+      }
+    }
+  }
+}

modules/bar/Workspaces.qml

@@ -0,0 +1,60 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell.Hyprland
+import qs.config
+
+Row {
+  id: root
+
+  property int count: 7
+
+  spacing: Appearance.spacing
+
+  Repeater {
+    model: root.count
+
+    Rectangle {
+      id: pill
+
+      required property int index
+      property var ws: Hyprland.workspaces.values.find(w => w.id === pill.index + 1)
+      property bool isActive: Hyprland.focusedWorkspace?.id === (pill.index + 1)
+
+      radius: 1000
+      implicitHeight: 15
+      implicitWidth: pill.isActive ? pill.implicitHeight * 2.3 : pill.implicitHeight
+      color: {
+        if (handler.hovered)
+          return Appearance.colors.accent;
+        if (pill.isActive || pill.ws)
+          return Appearance.colors.accent;
+        return Appearance.colors.inActive;
+      }
+
+      MouseArea {
+        hoverEnabled: true
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onClicked: Hyprland.dispatch("workspace " + (pill.index + 1))
+      }
+
+      HoverHandler {
+        id: handler
+      }
+
+      Behavior on color {
+        ColorAnimation {
+          duration: Appearance.duration
+        }
+      }
+
+      Behavior on implicitWidth {
+        NumberAnimation {
+          duration: Appearance.duration
+          easing.type: Easing.OutQuad
+        }
+      }
+    }
+  }
+}