Add bluetooth icon

quickshell/ui/BluetoothIcon.qml

@@ -0,0 +1,49 @@
+import Quickshell.Io
+import QtQuick
+
+import "../constants"
+import "../services"
+
+Text {
+	id: root
+
+	// Nerd Font Bluetooth icon (nf-fa-bluetooth)
+	property string iconGlyph: "\udb80\udcaf"
+	property string connectedIconGlyph: "\udb80\udcb1"
+	property string disconnectedIconGlyph: "\udb80\udcaf"
+
+	property BluetoothService bluetoothService: BluetoothService {
+		onDevicesFound: function(devices) {
+			if (devices.length > 0) {
+				root.iconGlyph = root.connectedIconGlyph;
+				root.color = Colors.md3.on_primary_fixed;
+			} else {
+				root.iconGlyph = root.disconnectedIconGlyph;
+				root.color = Colors.md3.primary;
+			}
+		}
+	}
+
+	text: iconGlyph
+	color: Colors.md3.on_primary_fixed
+
+	font {
+		family: Constants.fontFamily
+		pixelSize: Constants.fontSize
+		bold: true
+	}
+
+	Process {
+		id: bluemanManagerProcess
+		command: ["blueman-manager"]
+	}
+
+	MouseArea {
+		anchors.fill: parent
+		hoverEnabled: true
+
+		onClicked: {
+			bluemanManagerProcess.running = true;
+		}
+	}
+}

quickshell/ui/MixerEntry.qml

@@ -0,0 +1,51 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import Quickshell.Services.Pipewire
+
+ColumnLayout {
+	required property PwNode node;
+
+	// bind the node so we can read its properties
+	PwObjectTracker { objects: [ node ] }
+
+	RowLayout {
+		Image {
+			visible: source != ""
+			source: {
+				const icon = node.properties["application.icon-name"] ?? "audio-volume-high-symbolic";
+				return `image://icon/${icon}`;
+			}
+
+			sourceSize.width: 20
+			sourceSize.height: 20
+		}
+
+		Label {
+			text: {
+				// application.name -> description -> name
+				const app = node.properties["application.name"] ?? (node.description != "" ? node.description : node.name);
+				const media = node.properties["media.name"];
+				return media != undefined ? `${app} - ${media}` : app;
+			}
+		}
+
+		Button {
+			text: node.audio.muted ? "unmute" : "mute"
+			onClicked: node.audio.muted = !node.audio.muted
+		}
+	}
+
+	RowLayout {
+		Label {
+			Layout.preferredWidth: 50
+			text: `${Math.floor(node.audio.volume * 100)}%`
+		}
+
+		Slider {
+			Layout.fillWidth: true
+			value: node.audio.volume
+			onValueChanged: node.audio.volume = value
+		}
+	}
+}

quickshell/ui/TopBar.qml

@@ -66,12 +66,17 @@ Item {
             Layout.fillWidth: true
         }
 
+        
         // =====================
         // RIGHT: System info
         // =====================
         RowLayout {
             spacing: 10
 
+            LineSeparator {}
+
+            BluetoothIcon {}
+
             LineSeparator {}
             
             BarText {
@@ -93,6 +98,9 @@ Item {
                 value: gpuUsage
             }
 
+            LineSeparator {}
+
+
             LineSeparator {}
 
             Clock {}