chore: restructure src and move rectangle style to a dedicated file

src/AudioOutput.qml

@@ -3,22 +3,17 @@ import QtQuick.Layouts
 import QtQuick.Controls
 import Quickshell
 import Quickshell.Services.Pipewire
-import "windows"
+import "windows/audioman"
+import "base"
 
 // TODO: on click open detailed sink options:
 // - select default sink
 // - adjust sink & source volume
 // - mute sinks & sources
 
-Rectangle {
+BRectangle {
     id: aoutput
-    width: parent.width
     height: (icon.height + slider.height) * 1.5
-    anchors.bottomMargin: 5
-    anchors.topMargin: 5
-    border.color: "black"
-    border.width: 2
-    radius: 5
 
     property PwNode sink: Pipewire.defaultAudioSink
 

src/Bar.qml

@@ -3,7 +3,7 @@ import QtQuick // for Text
 import Quickshell.Io // for process
 import "windows"
 import QtQuick.Layouts
-import "systray"
+import "widgets/systray"
 import "widgets/workspaces"
 
 Scope {

src/ClockWidget.qml

@@ -1,15 +1,10 @@
 import QtQuick
 import QtQuick.Layouts
 import "provider"
+import "base"
 
-Rectangle {
-    width: parent.width
+BRectangle {
     height: clock.height * 1.5
-    anchors.bottomMargin: 5
-    anchors.topMargin: 5
-    border.color: "black"
-    border.width: 2
-    radius: 5
 
     Rectangle {
         id: clock

src/base/BRectangle.qml

@@ -0,0 +1,11 @@
+import QtQuick
+
+Rectangle {
+    width: parent.width
+    height: parent.height
+    anchors.bottomMargin: 5
+    anchors.topMargin: 5
+    border.color: "black"
+    border.width: 2
+    radius: 5
+}

src/widgets/systray/SysTray.qml

@@ -3,15 +3,10 @@ import QtQuick.Layouts
 import QtQuick.Controls
 import Quickshell
 import Quickshell.Services.SystemTray
+import "root:base"
 
-Rectangle {
-    width: parent.width
+BRectangle {
     height: 100
-    anchors.bottomMargin: 5
-    anchors.topMargin: 5
-    border.color: "black"
-    border.width: 2
-    radius: 5
 
     ScrollView {
         anchors.fill: parent

src/widgets/workspaces/WorkspaceElem.qml

@@ -1,20 +1,23 @@
 import Quickshell
+import Quickshell.Io
 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
+
+    required property bool focused
+    required property int wnum
+
+    property bool hovered: false
+    property bool active: focused || hovered
+    property int activeMargin: 3
+    property int inactiveMargin: 5
 
     Layout.fillHeight: true
     Layout.fillWidth: true
-    Layout.rightMargin: margin
-    Layout.leftMargin: margin
+    Layout.rightMargin: inactiveMargin
+    Layout.leftMargin: inactiveMargin
 
     color: "black"
     radius: 10
@@ -24,21 +27,29 @@ Rectangle {
         hoverEnabled: true
 
         onEntered: () => {
-            elem.focused = true;
+            elem.hovered = true;
         }
 
         onExited: () => {
-            elem.focused = active ?? false;
+            elem.hovered = false;
         }
+        onClicked: () => {
+            switcher.running = true;
+        }
+    }
+
+    Process {
+        id: switcher
+        command: ["swaymsg", "workspace", `${wnum}`]
     }
 
     states: State {
         name: "focused"
-        when: focused || active
+        when: active
         PropertyChanges {
             target: elem
-            Layout.rightMargin: focusedMargin
-            Layout.leftMargin: focusedMargin
+            Layout.rightMargin: activeMargin
+            Layout.leftMargin: activeMargin
         }
     }
 

src/widgets/workspaces/Workspaces.qml

@@ -2,18 +2,13 @@ import Quickshell
 import QtQuick
 import QtQuick.Layouts
 import Quickshell.Io // for Process
+import "root:base"
 
-Rectangle {
+BRectangle {
     id: workspaces
     property int workspaceN: 10
-    width: parent.width
+    property int activeN: 1
     height: 100 + col.spacing * (workspaceN - 1)
-    anchors.bottomMargin: 5
-    anchors.topMargin: 5
-    border.color: "black"
-
-    border.width: 2
-    radius: 5
 
     ColumnLayout {
         id: col
@@ -33,21 +28,19 @@ Rectangle {
                 onRead: data => {
                     const parsed = JSON.parse(data);
                     if (parsed.change == "focus") {
-                        col.work = parsed.current.num;
+                        workspaces.activeN = parsed.current.num;
                     }
                 }
             }
         }
 
-        property int work: 1
-
         Repeater {
             model: workspaceN
 
             WorkspaceElem {
                 required property int modelData
-                workspaceNum: modelData + 1
-                activeWorkspaceNum: col.work
+                wnum: modelData + 1
+                focused: activeN === (modelData + 1)
             }
         }
     }