modules/bar/components/Caffeine.qml

@@ -1,10 +1,11 @@
 import qs.config
 import qs.constants
+import qs.styled
 import qs.widgets
 import Quickshell.Io
 
 StyledButton {
-    id: root
+    id: clickable
 
     border.color: process.running ? Theme.palette.secondary : 'transparent'
     border.width: 2
@@ -26,7 +27,7 @@ StyledButton {
         font.bold: true
         text: Icons.coffee
 
-        color: root.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
+        color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
     }
 
     Process {

modules/bar/components/Pipewire.qml

@@ -1,34 +1,53 @@
 import qs.config
-import qs.services
 import qs.widgets
 import QtQuick
+import Quickshell.Services.Pipewire
 
 StyledButton {
-    id: root
+    id: clickable
+
+    property var sink: Pipewire.defaultAudioSink
+
+    PwObjectTracker {
+        id: bound
+        objects: [clickable.sink]
+    }
 
     onClicked: mouse => {
-        if (mouse.button == Qt.LeftButton) {
+        if (!sink) {
-            Pipewire.toggleMute();
+            return;
-        } else if (mouse.button == Qt.RightButton) {
-            popup.opened = !popup.opened;
         }
+        if (mouse.button == Qt.LeftButton) {
+            sink.audio.muted = !sink?.audio.muted;
+        } else if (mouse.button == Qt.RightButton)
+        // show menu
+        {}
     }
 
     onWheel: event => {
         if (event.angleDelta.y > 0) {
-            Pipewire.incrementVolume();
+            sink.audio.volume = Math.min(sink.audio.volume + 0.02, 1.0);
         } else if (event.angleDelta.y < 0) {
-            Pipewire.decrementVolume();
+            sink.audio.volume -= 0.02;
         }
     }
 
     states: [
         State {
             name: "muted"
-            when: Pipewire.muted
+            when: clickable.sink?.audio.muted ?? false
             PropertyChanges {
-                root {
+                text {
-                    color: Theme.palette.error
+                    icon: " "
+                }
+            }
+        },
+        State {
+            name: "off"
+            when: clickable.sink?.audio.volume <= 0
+            PropertyChanges {
+                text {
+                    icon: " "
                 }
             }
         }
@@ -36,9 +55,9 @@ StyledButton {
 
     content: StyledText {
         id: text
-        property string icon: Pipewire.muted ? " " : Pipewire.volume <= 0 ? " " : " "
+        property string icon: " "
-        text: `${icon} ${(Pipewire.volume * 100).toFixed()}%`
+        text: `${icon} ${(clickable.sink?.audio.volume * 100).toFixed()}%`
         font.pixelSize: Dimensions.pipewire.fontSize
-        color: root.containsMouse || Pipewire.muted ? Theme.palette.base300 : Theme.palette.basecontent
+        color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
     }
 }

modules/bar/components/bluetooth/Bluetooth.qml

@@ -5,7 +5,9 @@ import qs.widgets
 StyledButton {
     id: root
 
-    onClicked: popup.toggle()
+    onClicked: {
+        popup.opened = !popup.opened;
+    }
 
     content: StyledText {
         id: text

modules/bar/components/bluetooth/DeviceList.qml

@@ -0,0 +1,46 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.styled
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Bluetooth
+
+ColumnLayout {
+    id: root
+    required property var devices
+    signal deviceActivated(device: BluetoothDevice)
+
+    Repeater {
+        model: root.devices
+        delegate: Clickable {
+            id: device
+            required property var modelData
+
+            implicitWidth: row.width
+            implicitHeight: row.height
+            Layout.fillWidth: true
+            onClicked: {
+                root.deviceActivated(modelData);
+            }
+
+            RowLayout {
+                id: row
+
+                StyledText {
+                    topPadding: 8
+                    bottomPadding: 8
+                    leftPadding: 8
+                    rightPadding: 8
+                    text: device.modelData.deviceName
+                    color: device.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
+                    Behavior on color {
+                        ColorAnimation {
+                            duration: 200
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

modules/bar/components/tray/TrayItem.qml

@@ -1,42 +1,54 @@
-pragma ComponentBehavior: Bound
-
-import qs.widgets
 import QtQuick
+import QtQuick.Layouts
 import Quickshell
 import Quickshell.Services.SystemTray
 import Quickshell.Widgets
+import "../../../../config/"
+import "../../../../styled/"
 import "menu/"
 
-StyledButton {
+Clickable {
     id: root
 
     property SystemTrayItem trayItem
+    property bool menuOpened: false
 
-    onClicked: menu.toggle()
+    implicitWidth: Dimensions.tray.width
+    implicitHeight: Dimensions.tray.height
 
-    content: IconImage {
+    onClicked: toggleMenu()
+
+    function toggleMenu() {
+        menuOpened = !menuOpened;
+    }
+
+    IconImage {
         id: icon
+        anchors.margins: 6
+        anchors.fill: parent
         asynchronous: true
-        implicitSize: 18
         source: {
-            let icon = root.trayItem.icon;
+            let icon = modelData.icon;
             if (icon.includes("?path=")) {
                 const [name, path] = icon.split("?path=");
                 icon = `file://${path}/${name.slice(name.lastIndexOf("/") + 1)}`;
             }
             return icon;
         }
+        anchors.centerIn: parent
     }
 
     Menu {
         id: menu
 
+        opened: root.menuOpened
+
         anchor.item: root
         anchor.rect.x: root.width / 2 - width / 2
         anchor.rect.y: root.height + 8
 
         menuOpener: QsMenuOpener {
-            menu: root.trayItem.menu
+            menu: trayItem.menu
         }
     }
 }

modules/bar/components/tray/menu/Menu.qml

@@ -20,7 +20,6 @@ StyledPopupWindow {
         Repeater {
             model: window.menuOpener.children
             delegate: Loader {
-                id: loader
                 required property QsMenuEntry modelData
 
                 active: true
@@ -35,7 +34,7 @@ StyledPopupWindow {
                     color: Theme.palette.base100
                 }
                 property Component menuItem: MenuItem {
-                    menuEntry: loader.modelData
+                    menuEntry: modelData
                 }
             }
         }

services/Pipewire.qml

@@ -1,48 +0,0 @@
-pragma Singleton
-
-import QtQuick
-import Quickshell
-import Quickshell.Services.Pipewire
-
-Singleton {
-    id: root
-
-    readonly property PwNode sink: Pipewire.defaultAudioSink
-    readonly property PwNode source: Pipewire.defaultAudioSource
-
-    readonly property bool muted: sink?.audio?.muted ?? false
-    readonly property real volume: sink?.audio?.volume ?? 0
-
-    function setVolume(volume: real): void {
-        if (sink?.ready && sink?.audio) {
-            sink.audio.muted = false;
-            sink.audio.volume = volume;
-        }
-    }
-
-    function incrementVolume() {
-        if (!sink?.ready || !sink?.audio) {
-            return;
-        }
-        sink.audio.muted = false;
-        sink.audio.volume = Math.min(sink.audio.volume + 0.02, 1.0);
-    }
-
-    function decrementVolume() {
-        if (!sink?.ready || !sink?.audio) {
-            return;
-        }
-        sink.audio.volume -= 0.02;
-    }
-
-    function toggleMute() {
-        if (!sink?.ready || !sink?.audio) {
-            return;
-        }
-        sink.audio.muted = !sink.audio.muted;
-    }
-
-    PwObjectTracker {
-        objects: [Pipewire.defaultAudioSink, Pipewire.defaultAudioSource]
-    }
-}

services/Visibility.qml

@@ -1,16 +0,0 @@
-pragma Singleton
-
-import qs.widgets
-import Quickshell
-
-Singleton {
-    property StyledPopupWindow activePopup
-
-    function togglePopup(popup: StyledPopupWindow) {
-        if (activePopup && popup != activePopup) {
-            activePopup.state = "";
-        }
-        popup.state = popup.state == "opened" ? "" : "opened";
-        activePopup = popup;
-    }
-}

styled/Clickable.qml

@@ -0,0 +1,26 @@
+import QtQuick
+import "../config/"
+
+MouseArea {
+    id: mouseArea
+
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+    property alias color: rectangle.color
+    property alias border: rectangle.border
+
+    Rectangle {
+        id: rectangle
+        anchors.fill: parent
+
+        radius: Dimensions.radius
+        color: mouseArea.containsMouse ? Theme.palette.primary : Theme.palette.base100
+        Behavior on color {
+            ColorAnimation {
+                properties: "color"
+                duration: 200
+                easing.type: Easing.InOutQuad
+            }
+        }
+    }
+}

styled/Icon.qml

@@ -0,0 +1,21 @@
+import QtQuick
+import QtQuick.Effects
+import "../config/"
+
+Image {
+    id: root
+
+    property int size: 18
+    property color color: Theme.palette.basecontent
+
+    width: size
+    height: size
+
+    MultiEffect {
+        id: effect
+        source: root
+        anchors.fill: root
+        colorization: 1.0
+        colorizationColor: color
+    }
+}

styled/StyledLabel.qml

@@ -0,0 +1,8 @@
+import QtQuick
+import "../config/"
+
+Rectangle {
+    color: Theme.palette.base100
+
+    radius: Dimensions.radius
+}

styled/StyledText.qml

@@ -0,0 +1,7 @@
+import QtQuick
+import "root:config"
+
+Text {
+    color: Theme.palette.basecontent
+    font.family: Theme.fontFamily
+}

widgets/StyledPopupWindow.qml

@@ -1,4 +1,3 @@
-import qs.services
 import QtQuick
 import Quickshell
 import Quickshell.Widgets
@@ -10,15 +9,10 @@ PopupWindow {
     property alias margins: background.margin
     property alias backgroundColor: background.color
     property alias radius: background.radius
-    property alias state: background.state
     required property Component content
 
     color: "transparent"
 
-    function toggle() {
-        Visibility.togglePopup(this);
-    }
-
     implicitWidth: background.width
     Behavior on implicitWidth {
         NumberAnimation {