added initial bluetooth widget

dotfiles/.config/quickshell/config/Appearance.qml

@@ -2,7 +2,7 @@ pragma Singleton
 import QtQuick
 
 QtObject {
-    readonly property string fontFamily: "Noto Sans"
+    readonly property string fontFamily: "CaskaydiaCove Nerd Font Mono"
     readonly property string iconFontFamily: "Material Symbols Outlined"
     // Material Symbols is a variable font. Left unset, glyphs fall back to the
     // font's default optical size (24px), which is tuned for larger rendering

dotfiles/.config/quickshell/config/Colors.qml

@@ -36,7 +36,10 @@ QtObject {
     // identifier as a signal handler slot, not a regular property.
     readonly property color primaryText: background
     readonly property color urgent: paletteColor(1)
-    readonly property color muted: paletteColor(8)
+    // paletteColor(8) alone renders quite dark/low-contrast for text (it's
+    // meant as a muted *background* tone in most wal palettes) — lighten it
+    // so muted labels stay legible against the bar's dark background.
+    readonly property color muted: Qt.lighter(paletteColor(8), 2.2)
     readonly property color surface: Qt.lighter(background, 1.35)
 
     // QtObject has no default property, so the FileView is attached via a

dotfiles/.config/quickshell/modules/bar/Bar.qml

@@ -47,9 +47,9 @@ PanelWindow {
         }
         spacing: Appearance.spacing
         Tray {}
-        NetworkIndicator {}
+        NetworkIndicator { barWindow: bar }
-        BluetoothIndicator {}
+        BluetoothIndicator { barWindow: bar }
-        Volume {}
+        Volume { barWindow: bar }
-        PowerButton {}
+        PowerButton { barWindow: bar }
     }
 }

dotfiles/.config/quickshell/modules/bar/BluetoothIndicator.qml

@@ -1,4 +1,7 @@
 import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Hyprland
 import Quickshell.Bluetooth
 import "../../config"
 
@@ -7,16 +10,122 @@ Item {
     implicitWidth: label.implicitWidth + 4
     implicitHeight: Appearance.barHeight
 
+    // The bar's own PanelWindow — passed in from Bar.qml so this popup can
+    // anchor to the bar itself rather than to this icon, keeping it a fixed
+    // distance from the bar and the screen edge regardless of where this
+    // icon sits in the row.
+    required property var barWindow
+
     readonly property var adapter: Bluetooth.defaultAdapter
-    readonly property bool anyConnected: {
+
-        if (!adapter) return false
+    // Scan only while the panel is open — same convention as the WiFi
-        const devices = adapter.devices.values
+    // scannerEnabled binding in NetworkIndicator.qml.
-        for (let i = 0; i < devices.length; i++) {
+    Binding {
-            if (devices[i].connected) return true
+        target: root.adapter
+        property: "discovering"
+        value: panel.visible && root.adapter.enabled
+        when: root.adapter !== null
     }
-        return false
+
+    // --- Device row helpers ----------------------------------------------
+    // Rows are plain objects rather than the live BluetoothDevice QObject —
+    // BlueZ churn (pairing timeouts, a device dropping out of range mid-scan)
+    // can destroy the object while a delegate still holds it, the same
+    // crash risk noted for WiFi networks in NetworkIndicator.qml. The actual
+    // object is re-resolved by address only when an action needs it, via
+    // deviceForAddress().
+    function deviceLabel(d) {
+        return (d.deviceName || d.name || d.address || "").trim()
     }
 
+    // BlueZ's Icon property is a freedesktop icon-theme name (verified
+    // against a real paired device on this machine: "audio-headset") — map
+    // the common categories to a Material Symbols glyph, falling back to a
+    // generic "devices_other" for anything unrecognized.
+    function deviceIcon(icon) {
+        const i = icon || ""
+        if (i.indexOf("headset") !== -1 || i.indexOf("headphone") !== -1) return "headphones"
+        if (i.indexOf("mouse") !== -1) return "mouse"
+        if (i.indexOf("keyboard") !== -1) return "keyboard"
+        if (i.indexOf("gaming") !== -1 || i.indexOf("joystick") !== -1) return "sports_esports"
+        if (i.indexOf("tablet") !== -1) return "tablet"
+        if (i.indexOf("camera") !== -1) return "videocam"
+        if (i.indexOf("printer") !== -1) return "print"
+        if (i.indexOf("watch") !== -1) return "watch"
+        if (i.indexOf("tv") !== -1) return "tv"
+        if (i.indexOf("computer") !== -1) return "computer"
+        if (i.indexOf("card") !== -1) return "speaker"
+        return "devices_other"
+    }
+
+    function deviceRow(d) {
+        if (!d) return null
+        const label = root.deviceLabel(d)
+        if (!label) return null
+        return {
+            address: d.address || "",
+            label: label,
+            icon: root.deviceIcon(d.icon),
+            connected: !!d.connected,
+            paired: !!d.paired,
+            bonded: !!d.bonded,
+            trusted: !!d.trusted,
+            pairing: !!d.pairing,
+            batteryAvailable: !!d.batteryAvailable,
+            battery: d.battery || 0
+        }
+    }
+
+    readonly property var deviceRows: root.adapter
+        ? root.adapter.devices.values.map(root.deviceRow).filter(function(r) { return r !== null })
+        : []
+
+    readonly property var connectedRows: root.deviceRows.filter(function(r) { return r.connected })
+    readonly property var knownRows: root.deviceRows.filter(function(r) {
+        return !r.connected && (r.paired || r.bonded || r.trusted)
+    })
+    readonly property var discoveredRows: root.deviceRows.filter(function(r) {
+        return !r.connected && !r.paired && !r.bonded && !r.trusted
+    })
+
+    function deviceForAddress(address) {
+        if (!root.adapter) return null
+        const devs = root.adapter.devices.values
+        for (let i = 0; i < devs.length; i++) {
+            if (devs[i].address === address) return devs[i]
+        }
+        return null
+    }
+
+    function connectDevice(row) {
+        const d = root.deviceForAddress(row.address)
+        if (!d) return
+        // Already-paired devices just reconnect; a fresh discovery result
+        // has to pair first (BlueZ's own agent handles the SSP/passkey
+        // handshake — there's no PIN-entry surface exposed by this API).
+        if (row.paired || row.bonded || row.trusted) d.connect()
+        else d.pair()
+    }
+
+    function disconnectDevice(row) {
+        const d = root.deviceForAddress(row.address)
+        if (d) d.disconnect()
+    }
+
+    function forgetDevice(row) {
+        const d = root.deviceForAddress(row.address)
+        if (!d) return
+        if (d.connected) d.disconnect()
+        d.forget()
+    }
+
+    readonly property bool anyConnected: root.connectedRows.length > 0
+
+    // Caps how tall the Paired/Available list gets before it scrolls
+    // instead of continuing to grow the popup — same convention as
+    // NetworkIndicator.qml's Known/Other Networks list.
+    readonly property int maxDeviceListHeight: 260
+
     Text {
         id: label
         anchors.centerIn: parent
@@ -33,6 +142,348 @@ Item {
     MouseArea {
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
-        onClicked: if (root.adapter) root.adapter.enabled = !root.adapter.enabled
+        onClicked: {
+            panel.visible = !panel.visible
+            grab.active = panel.visible
+        }
+    }
+
+    // --- Reusable pieces ---------------------------------------------------
+
+    component ToggleSwitch: Item {
+        id: toggleRoot
+        property bool checked: false
+        signal toggled()
+        implicitWidth: 34
+        implicitHeight: 18
+
+        Rectangle {
+            anchors.fill: parent
+            radius: 0
+            color: toggleRoot.checked ? Colors.primary : Colors.muted
+            opacity: toggleRoot.checked ? 1 : 0.35
+        }
+        Rectangle {
+            width: parent.height - 4
+            height: parent.height - 4
+            radius: 0
+            color: Colors.background
+            anchors.verticalCenter: parent.verticalCenter
+            x: toggleRoot.checked ? parent.width - width - 2 : 2
+            Behavior on x { NumberAnimation { duration: Appearance.animationDuration } }
+        }
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: toggleRoot.toggled()
+        }
+    }
+
+    // One device row. `showForget` hides the forget (x) button for
+    // discovered-but-unpaired devices, which have nothing to forget yet.
+    component DeviceRow: Rectangle {
+        id: devRow
+        required property var dev
+        property bool showForget: true
+        signal activate()
+        width: parent ? parent.width : 0
+        radius: 0
+        implicitHeight: rowContent.implicitHeight + 12
+        color: devRow.dev.connected
+            ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18)
+            : (rowMouse.containsMouse ? Colors.primary : "transparent")
+
+        RowLayout {
+            id: rowContent
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.margins: 6
+            spacing: 8
+
+            Text {
+                Layout.preferredWidth: 20
+                Layout.minimumWidth: 20
+                Layout.maximumWidth: 20
+                horizontalAlignment: Text.AlignLeft
+                text: devRow.dev.icon
+                font.family: Appearance.iconFontFamily
+                font.variableAxes: Appearance.iconFontAxes
+                font.pixelSize: 14
+                color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
+            }
+
+            ColumnLayout {
+                Layout.fillWidth: true
+                spacing: 0
+
+                Text {
+                    Layout.fillWidth: true
+                    text: devRow.dev.label
+                    elide: Text.ElideRight
+                    font.family: Appearance.fontFamily
+                    font.pixelSize: Appearance.fontSize
+                    font.bold: devRow.dev.connected
+                    color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
+                }
+                Text {
+                    readonly property string statusText: {
+                        if (devRow.dev.pairing) return "Pairing…"
+                        if (devRow.dev.connected && devRow.dev.batteryAvailable)
+                            return Math.round(devRow.dev.battery * 100) + "%"
+                        if (devRow.dev.connected) return "Connected"
+                        return ""
+                    }
+                    visible: statusText !== ""
+                    text: statusText
+                    font.family: Appearance.fontFamily
+                    font.pixelSize: Appearance.fontSizeSmall
+                    color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted
+                }
+            }
+
+            Text {
+                id: forgetIcon
+                visible: devRow.showForget
+                text: "close"
+                font.family: Appearance.iconFontFamily
+                font.variableAxes: Appearance.iconFontAxes
+                font.pixelSize: 14
+                color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted
+            }
+        }
+
+        MouseArea {
+            id: rowMouse
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            height: rowContent.height + 12
+            hoverEnabled: true
+            cursorShape: Qt.PointingHandCursor
+            // forgetIcon has no MouseArea of its own — nested inside
+            // rowContent, which sits underneath this full-row area in
+            // stacking order, so a separate MouseArea there would just be
+            // shadowed (see the identical fix in NetworkIndicator.qml's
+            // NetworkRow). Dispatch by click position against this single
+            // area instead.
+            onClicked: (mouse) => {
+                if (devRow.showForget && forgetIcon.visible) {
+                    const forgetLeft = devRow.mapFromItem(forgetIcon, 0, 0).x
+                    if (mouse.x >= forgetLeft - 8) {
+                        root.forgetDevice(devRow.dev)
+                        return
+                    }
+                }
+                devRow.activate()
+            }
+        }
+    }
+
+    // --- Panel -------------------------------------------------------------
+
+    PopupWindow {
+        id: panel
+        visible: false
+        color: "transparent"
+        readonly property int contentWidth: 244
+        readonly property int contentPadding: 16
+        implicitWidth: contentWidth + contentPadding * 2
+        implicitHeight: mainColumn.implicitHeight + contentPadding * 2
+        // Connected/paired/discovered devices come and go while the panel
+        // is open — animate the resize instead of snapping, same as the
+        // network panel's WiFi list.
+        Behavior on implicitHeight {
+            NumberAnimation { duration: Appearance.animationDuration; easing.type: Easing.OutCubic }
+        }
+
+        anchor {
+            window: root.barWindow
+            rect.x: 0
+            rect.y: 0
+            rect.width: root.barWindow.width
+            rect.height: root.barWindow.height
+            edges: Edges.Bottom | Edges.Right
+            gravity: Edges.Bottom | Edges.Left
+            margins.bottom: -4
+            margins.right: 0
+        }
+
+        HyprlandFocusGrab {
+            id: grab
+            windows: [panel]
+            onCleared: panel.visible = false
+        }
+
+        Rectangle {
+            anchors.fill: parent
+            radius: 0
+            color: Colors.surface
+            border.color: Colors.muted
+            border.width: 3
+
+            Column {
+                id: mainColumn
+                anchors.fill: parent
+                anchors.margins: panel.contentPadding
+                spacing: 10
+
+                // Header
+                RowLayout {
+                    width: parent.width
+                    spacing: 8
+
+                    Text {
+                        text: label.text
+                        font.family: Appearance.iconFontFamily
+                        font.variableAxes: Appearance.iconFontAxes
+                        font.pixelSize: 30
+                        color: Colors.foreground
+                    }
+
+                    Text {
+                        Layout.fillWidth: true
+                        text: "Bluetooth"
+                        font.family: Appearance.fontFamily
+                        font.pixelSize: 18
+                        font.bold: true
+                        color: Colors.foreground
+                    }
+
+                    ToggleSwitch {
+                        visible: root.adapter !== null
+                        checked: root.adapter !== null && root.adapter.enabled
+                        onToggled: root.adapter.enabled = !root.adapter.enabled
+                    }
+                }
+
+                Text {
+                    width: parent.width
+                    visible: root.adapter === null
+                    text: "No Bluetooth adapter"
+                    font.family: Appearance.fontFamily
+                    font.pixelSize: Appearance.fontSizeSmall
+                    color: Colors.muted
+                }
+
+                Text {
+                    width: parent.width
+                    visible: root.adapter !== null && !root.adapter.enabled
+                    text: "Turn Bluetooth on to see devices"
+                    font.family: Appearance.fontFamily
+                    font.pixelSize: Appearance.fontSizeSmall
+                    color: Colors.muted
+                }
+
+                // Connected — always shown in full above the scrollable
+                // list, mirroring the network panel's layout.
+                Column {
+                    width: parent.width
+                    spacing: 4
+                    visible: root.connectedRows.length > 0
+
+                    Text {
+                        text: "Connected"
+                        font.family: Appearance.fontFamily
+                        font.pixelSize: Appearance.fontSizeSmall
+                        color: Colors.muted
+                    }
+                    Column {
+                        width: parent.width
+                        spacing: 2
+                        Repeater {
+                            model: root.connectedRows
+                            DeviceRow {
+                                required property var modelData
+                                dev: modelData
+                                showForget: true
+                                onActivate: root.disconnectDevice(dev)
+                            }
+                        }
+                    }
+                }
+
+                Text {
+                    width: parent.width
+                    visible: root.adapter !== null && root.adapter.enabled && root.deviceRows.length === 0
+                    text: (root.adapter && root.adapter.discovering) ? "Scanning for devices…" : "No devices found"
+                    font.family: Appearance.fontFamily
+                    font.pixelSize: Appearance.fontSizeSmall
+                    color: Colors.muted
+                }
+
+                // Paired/Available — capped height, scrolls once there are
+                // more devices than fit rather than growing the popup
+                // indefinitely.
+                Flickable {
+                    id: deviceListFlick
+                    width: parent.width
+                    height: Math.min(deviceListColumn.implicitHeight, root.maxDeviceListHeight)
+                    contentWidth: width
+                    contentHeight: deviceListColumn.implicitHeight
+                    clip: true
+                    boundsBehavior: Flickable.StopAtBounds
+                    visible: deviceListColumn.implicitHeight > 0
+
+                    Column {
+                        id: deviceListColumn
+                        width: deviceListFlick.width
+                        spacing: 6
+
+                        Column {
+                            width: parent.width
+                            spacing: 4
+                            visible: root.knownRows.length > 0
+
+                            Text {
+                                text: "Paired Devices"
+                                font.family: Appearance.fontFamily
+                                font.pixelSize: Appearance.fontSizeSmall
+                                color: Colors.muted
+                            }
+                            Column {
+                                width: parent.width
+                                spacing: 2
+                                Repeater {
+                                    model: root.knownRows
+                                    DeviceRow {
+                                        required property var modelData
+                                        dev: modelData
+                                        showForget: true
+                                        onActivate: root.connectDevice(dev)
+                                    }
+                                }
+                            }
+                        }
+
+                        Column {
+                            width: parent.width
+                            spacing: 4
+                            visible: root.adapter !== null && root.adapter.discovering && root.discoveredRows.length > 0
+
+                            Text {
+                                text: "Available Devices"
+                                font.family: Appearance.fontFamily
+                                font.pixelSize: Appearance.fontSizeSmall
+                                color: Colors.muted
+                            }
+                            Column {
+                                width: parent.width
+                                spacing: 2
+                                Repeater {
+                                    model: root.discoveredRows
+                                    DeviceRow {
+                                        required property var modelData
+                                        dev: modelData
+                                        showForget: false
+                                        onActivate: root.connectDevice(dev)
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
     }
 }

dotfiles/.config/quickshell/modules/bar/PowerButton.qml

@@ -2,6 +2,7 @@ import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Io
+import Quickshell.Hyprland
 import "../../config"
 
 Item {
@@ -9,6 +10,12 @@ Item {
     implicitWidth: label.implicitWidth + 4
     implicitHeight: Appearance.barHeight
 
+    // The bar's own PanelWindow — passed in from Bar.qml so this popup can
+    // anchor to the bar itself rather than to this icon, keeping it a fixed
+    // distance from the bar and the screen edge regardless of where this
+    // icon sits in the row.
+    required property var barWindow
+
     Text {
         id: label
         anchors.centerIn: parent
@@ -22,7 +29,10 @@ Item {
     MouseArea {
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
-        onClicked: menu.visible = !menu.visible
+        onClicked: {
+            menu.visible = !menu.visible
+            grab.active = menu.visible
+        }
     }
 
     Process { id: proc }
@@ -31,36 +41,82 @@ Item {
         id: menu
         visible: false
         color: "transparent"
-        implicitWidth: 170
+        implicitWidth: 210
-        implicitHeight: list.model.length * 32 + (list.model.length - 1) * 2 + 16
+        // Same padding as Volume.qml's panel.
+        readonly property int contentPadding: 16
+        readonly property int labelOffset: -135
+        implicitHeight: mainColumn.implicitHeight + contentPadding * 2
 
         anchor {
-            item: root
+            window: root.barWindow
+            // Unlike anchor.item, anchor.window doesn't default rect to the
+            // window's own bounds — set it explicitly so edges/gravity below
+            // resolve against the full bar (and thus the true screen edges)
+            // instead of a near-zero rect at the window's origin.
+            rect.x: 0
+            rect.y: 0
+            rect.width: root.barWindow.width
+            rect.height: root.barWindow.height
             edges: Edges.Bottom | Edges.Right
             gravity: Edges.Bottom | Edges.Left
-            margins.top: 4
+            margins.bottom: -4
+            margins.right: 0
+        }
+
+        HyprlandFocusGrab {
+            id: grab
+            windows: [menu]
+            onCleared: menu.visible = false
         }
 
         Rectangle {
             anchors.fill: parent
-            radius: Appearance.radius
+            radius: 0
             color: Colors.surface
             border.color: Colors.muted
-            border.width: 1
+            border.width: 3
 
             Column {
+                id: mainColumn
                 anchors.fill: parent
-                anchors.margins: 8
+                anchors.margins: menu.contentPadding
+                spacing: 10
+
+                // Header — same title layout as Volume.qml's panel: the bar
+                // icon large, plus a bold title.
+                RowLayout {
+                    id: header
+                    width: parent.width
+                    spacing: 8
+
+                    Text {
+                        text: label.text
+                        font.family: Appearance.iconFontFamily
+                        font.variableAxes: Appearance.iconFontAxes
+                        font.pixelSize: 30
+                        color: Colors.foreground
+                    }
+
+                    Text {
+                        Layout.fillWidth: true
+                        text: "Power"
+                        font.family: Appearance.fontFamily
+                        font.pixelSize: 18
+                        font.bold: true
+                        color: Colors.foreground
+                    }
+                }
+
+                Column {
+                    width: parent.width
                     spacing: 2
 
                     Repeater {
                         id: list
                         model: [
-                        // "iconSize" is optional — omit it to use the 15px default below.
+                            { label: "Lock", icon: "lock", cmd: ["hyprlock"] },
-                        // Material Symbols glyphs aren't all the same visual weight at a
+                            { label: "Suspend", icon: "bedtime", cmd: ["systemctl", "suspend"] },
-                        // given size (a padlock silhouette reads bulkier than a thin arrow),
+                            { label: "Hibernate", icon: "ac_unit", cmd: ["systemctl", "hibernate"] },
-                        // so nudge individual icons here to balance them by eye.
-                        { label: "Lock", icon: "lock", iconSize: 13, cmd: ["hyprlock"] },
                             { label: "Log out", icon: "logout", cmd: ["hyprctl", "dispatch", "exit"] },
                             { label: "Reboot", icon: "restart_alt", cmd: ["systemctl", "reboot"] },
                             { label: "Shut down", icon: "power_settings_new", cmd: ["systemctl", "poweroff"] }
@@ -70,27 +126,33 @@ Item {
                             id: entry
                             required property var modelData
                             width: parent ? parent.width : 0
-                        height: 32
+                            height: 40
                             radius: Appearance.radiusSmall
-                        color: entryMouse.containsMouse ? Colors.primary : "transparent"
+                            color: (!entry.modelData.disabled && entryMouse.containsMouse) ? Colors.primary : "transparent"
 
                             RowLayout {
                                 anchors.fill: parent
                                 anchors.leftMargin: 8
                                 spacing: 8
                                 Text {
-                                Layout.preferredWidth: 20
+                                    Layout.preferredWidth: 25
-                                horizontalAlignment: Text.AlignHCenter
+                                    Layout.minimumWidth: 25
+                                    Layout.maximumWidth: 25
+                                    horizontalAlignment: Text.AlignLeft
                                     text: entry.modelData.icon
                                     font.family: Appearance.iconFontFamily
                                     font.variableAxes: Appearance.iconFontAxes
                                     font.pixelSize: entry.modelData.iconSize || 15
+                                    opacity: entry.modelData.disabled ? 0.4 : 1
                                     color: entryMouse.containsMouse ? Colors.primaryText : Colors.foreground
                                 }
                                 Text {
+                                    Layout.leftMargin: menu.labelOffset + (entry.modelData.textOffset || 0)
                                     text: entry.modelData.label
+                                    horizontalAlignment: Text.AlignLeft
                                     font.family: Appearance.fontFamily
-                                font.pixelSize: Appearance.fontSize
+                                    font.pixelSize: 16
+                                    opacity: entry.modelData.disabled ? 0.4 : 1
                                     color: entryMouse.containsMouse ? Colors.primaryText : Colors.foreground
                                 }
                             }
@@ -98,12 +160,15 @@ Item {
                             MouseArea {
                                 id: entryMouse
                                 anchors.fill: parent
+                                enabled: !entry.modelData.disabled
                                 hoverEnabled: true
                                 cursorShape: Qt.PointingHandCursor
                                 onClicked: {
                                     proc.command = entry.modelData.cmd
                                     proc.running = true
                                     menu.visible = false
+                                    grab.active = false
+                                }
                             }
                         }
                     }

dotfiles/.config/quickshell/modules/bar/Volume.qml

@@ -1,4 +1,7 @@
 import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Hyprland
 import Quickshell.Services.Pipewire
 import "../../config"
 
@@ -7,11 +10,87 @@ Item {
     implicitWidth: label.implicitWidth + 4
     implicitHeight: Appearance.barHeight
 
-    readonly property var sink: Pipewire.defaultAudioSink
+    // The bar's own PanelWindow — passed in from Bar.qml so this popup can
-    readonly property real vol: (sink && sink.audio) ? sink.audio.volume : 0
+    // anchor to the bar itself rather than to this icon, keeping it a fixed
-    readonly property bool muted: (sink && sink.audio) ? sink.audio.muted : false
+    // distance from the bar and the screen edge regardless of where this
+    // icon sits in the row.
+    required property var barWindow
 
-    PwObjectTracker { objects: root.sink ? [root.sink] : [] }
+    readonly property var sink: Pipewire.defaultAudioSink
+    readonly property var source: Pipewire.defaultAudioSource
+    readonly property var nodes: Pipewire.nodes ? Pipewire.nodes.values : []
+
+    readonly property real outputVolume: (root.sink && root.sink.audio) ? root.sink.audio.volume : 0
+    readonly property bool outputMuted: (root.sink && root.sink.audio) ? root.sink.audio.muted : false
+    readonly property real inputVolume: (root.source && root.source.audio) ? root.source.audio.volume : 0
+    readonly property bool inputMuted: (root.source && root.source.audio) ? root.source.audio.muted : false
+
+    readonly property var candidateSinks: root.nodes.filter(function(n) { return n && n.isSink && !n.isStream })
+    readonly property var candidateSources: root.nodes.filter(function(n) { return n && !n.isSink && !n.isStream && n.audio })
+
+    PwObjectTracker { objects: root.candidateSinks }
+    PwObjectTracker { objects: root.candidateSources }
+
+    // Live mic level for the input gauge below — separate from inputVolume
+    // (the configured gain), this tracks the actual incoming signal.
+    // Only runs while the panel is open, to skip metering when unused.
+    PwNodePeakMonitor {
+        id: inputPeak
+        node: root.source
+        enabled: panel.visible
+    }
+
+    // --- Device label/icon heuristics, ported from omarchy's audio panel
+    // Model.js (github.com/basecamp/omarchy shell/plugins/panels/audio/Model.js),
+    // adapted to this project's Material Symbols icon set instead of Nerd Font.
+    function friendlyDeviceLabel(text) {
+        var out = String(text || "").trim()
+        out = out.replace(/^sof-soundwire\s+/i, "")
+        out = out.replace(/^built-?in audio\s+/i, "")
+        out = out.replace(/\s+Output$/i, "")
+        out = out.replace(/\s+Input$/i, "")
+        out = out.replace(/Microphones/gi, "Microphone")
+        return out
+    }
+
+    function deviceLabel(node) {
+        if (!node) return "Unknown"
+        var nick = friendlyDeviceLabel(node.nickname || "")
+        if (nick) return nick
+        return friendlyDeviceLabel(node.description || node.name || "Unknown")
+    }
+
+    function deviceBlob(node) {
+        if (!node) return ""
+        var p = node.properties || {}
+        return [node.name, node.description, node.nickname,
+                p["device.icon-name"] || "", p["device.product.name"] || ""].join(" ").toLowerCase()
+    }
+
+    function isHeadphoneNode(node) {
+        var blob = deviceBlob(node)
+        return blob.indexOf("headphone") !== -1 || blob.indexOf("headset") !== -1
+            || blob.indexOf("earbud") !== -1 || blob.indexOf("earphone") !== -1
+            || blob.indexOf("airpod") !== -1
+    }
+
+    function sinkIcon(node) {
+        if (!node) return "speaker"
+        if (isHeadphoneNode(node)) return "headphones"
+        var blob = deviceBlob(node)
+        if (blob.indexOf("bluetooth") !== -1) return "bluetooth_audio"
+        if (blob.indexOf("hdmi") !== -1 || blob.indexOf("display") !== -1) return "tv"
+        return "speaker"
+    }
+
+    function sourceIcon(node) {
+        if (!node) return "mic"
+        var blob = deviceBlob(node)
+        if (blob.indexOf("headset") !== -1) return "headphones"
+        if (blob.indexOf("bluetooth") !== -1) return "bluetooth_audio"
+        if (blob.indexOf("webcam") !== -1 || blob.indexOf("camera") !== -1) return "videocam"
+        return "mic"
+    }
 
     Text {
         id: label
@@ -20,19 +99,17 @@ Item {
         font.variableAxes: Appearance.iconFontAxes
         font.pixelSize: 16
         color: Colors.foreground
-        text: {
+        text: (root.outputMuted || root.outputVolume <= 0) ? "volume_off"
-            if (root.muted || root.vol <= 0) return "volume_off"
+            : (root.outputVolume < 0.5 ? "volume_down" : "volume_up")
-            if (root.vol < 0.5) return "volume_down"
-            return "volume_up"
-        }
     }
 
     MouseArea {
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
-        acceptedButtons: Qt.LeftButton
+        onClicked: {
-        onClicked: if (root.sink && root.sink.audio) root.sink.audio.muted = !root.sink.audio.muted
+            panel.visible = !panel.visible
-
+            grab.active = panel.visible
+        }
         onWheel: (wheel) => {
             if (!root.sink || !root.sink.audio) return
             const step = 0.05
@@ -40,4 +117,330 @@ Item {
             root.sink.audio.volume = Math.max(0, Math.min(1, root.sink.audio.volume + delta))
         }
     }
+
+    // --- Reusable pieces -----------------------------------------------
+
+    component VolumeSlider: Item {
+        id: sliderRoot
+        property real value: 0
+        property bool enabled: true
+        signal moved(real newValue)
+        implicitHeight: 16
+
+        Rectangle {
+            id: track
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width
+            height: 4
+            radius: 0
+            color: Colors.muted
+            opacity: 0.35
+        }
+        Rectangle {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            width: track.width * Math.max(0, Math.min(1, sliderRoot.value))
+            height: 4
+            radius: 0
+            color: Colors.primary
+            opacity: sliderRoot.enabled ? 1 : 0.4
+        }
+        Rectangle {
+            width: 12
+            height: 12
+            radius: 6
+            color: Colors.primary
+            opacity: sliderRoot.enabled ? 1 : 0.4
+            anchors.verticalCenter: parent.verticalCenter
+            x: Math.max(0, Math.min(track.width - width, track.width * sliderRoot.value - width / 2))
+        }
+        MouseArea {
+            anchors.fill: parent
+            enabled: sliderRoot.enabled
+            cursorShape: Qt.PointingHandCursor
+            function updateFromX(mx) {
+                sliderRoot.moved(Math.max(0, Math.min(1, mx / track.width)))
+            }
+            onPressed: (mouse) => updateFromX(mouse.x)
+            onPositionChanged: (mouse) => { if (pressed) updateFromX(mouse.x) }
+        }
+    }
+
+    // Read-only live level gauge — same track styling as VolumeSlider but no
+    // handle/interaction, filled from an actual signal level instead of a
+    // configured value.
+    component LevelMeter: Item {
+        id: meterRoot
+        property real level: 0
+        implicitHeight: 4
+
+        Rectangle {
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width
+            height: 4
+            radius: 0
+            color: Colors.muted
+            opacity: 0.25
+        }
+        Rectangle {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            height: 4
+            radius: 0
+            color: Colors.paletteColor(2)
+            width: parent.width * Math.max(0, Math.min(1, meterRoot.level))
+            Behavior on width { NumberAnimation { duration: 80 } }
+        }
+    }
+
+    component ToggleSwitch: Item {
+        id: toggleRoot
+        property bool checked: false
+        signal toggled()
+        implicitWidth: 34
+        implicitHeight: 18
+
+        Rectangle {
+            anchors.fill: parent
+            radius: 0
+            color: toggleRoot.checked ? Colors.primary : Colors.muted
+            opacity: toggleRoot.checked ? 1 : 0.35
+        }
+        Rectangle {
+            width: parent.height - 4
+            height: parent.height - 4
+            radius: 0
+            color: Colors.background
+            anchors.verticalCenter: parent.verticalCenter
+            x: toggleRoot.checked ? parent.width - width - 2 : 2
+            Behavior on x { NumberAnimation { duration: Appearance.animationDuration } }
+        }
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: toggleRoot.toggled()
+        }
+    }
+
+    component DeviceRow: Rectangle {
+        id: deviceRow
+        required property var node
+        required property string icon
+        required property bool active
+        signal activate()
+        width: parent ? parent.width : 0
+        height: 30
+        radius: 0
+        color: rowMouse.containsMouse ? Colors.primary
+             : (deviceRow.active ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) : "transparent")
+
+        RowLayout {
+            anchors.fill: parent
+            anchors.leftMargin: 8
+            anchors.rightMargin: 8
+            spacing: 8
+            Text {
+                Layout.preferredWidth: 18
+                Layout.minimumWidth: 18
+                Layout.maximumWidth: 18
+                horizontalAlignment: Text.AlignHCenter
+                text: deviceRow.icon
+                font.family: Appearance.iconFontFamily
+                font.variableAxes: Appearance.iconFontAxes
+                font.pixelSize: 14
+                color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
+            }
+            Text {
+                Layout.fillWidth: true
+                text: root.deviceLabel(deviceRow.node)
+                elide: Text.ElideRight
+                font.family: Appearance.fontFamily
+                font.pixelSize: Appearance.fontSize
+                font.bold: deviceRow.active
+                color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
+            }
+        }
+        MouseArea {
+            id: rowMouse
+            anchors.fill: parent
+            hoverEnabled: true
+            cursorShape: Qt.PointingHandCursor
+            onClicked: deviceRow.activate()
+        }
+    }
+
+    // --- Panel -----------------------------------------------------------
+
+    PopupWindow {
+        id: panel
+        visible: false
+        color: "transparent"
+        // Padding between the panel's border and its content. implicitWidth
+        // is contentWidth + padding on both sides, so the content area
+        // itself stays a fixed size regardless of how much padding surrounds it.
+        readonly property int contentWidth: 244
+        readonly property int contentPadding: 16
+        implicitWidth: contentWidth + contentPadding * 2
+        implicitHeight: mainColumn.implicitHeight + contentPadding * 2
+
+        anchor {
+            window: root.barWindow
+            // Unlike anchor.item, anchor.window doesn't default rect to the
+            // window's own bounds — set it explicitly so edges/gravity below
+            // resolve against the full bar (and thus the true screen edges)
+            // instead of a near-zero rect at the window's origin.
+            rect.x: 0
+            rect.y: 0
+            rect.width: root.barWindow.width
+            rect.height: root.barWindow.height
+            edges: Edges.Bottom | Edges.Right
+            gravity: Edges.Bottom | Edges.Left
+            margins.bottom: -4
+            margins.right: 0
+        }
+
+        HyprlandFocusGrab {
+            id: grab
+            windows: [panel]
+            onCleared: panel.visible = false
+        }
+
+        Rectangle {
+            anchors.fill: parent
+            radius: 0
+            color: Colors.surface
+            border.color: Colors.muted
+            border.width: 3
+
+            Column {
+                id: mainColumn
+                anchors.fill: parent
+                anchors.margins: panel.contentPadding
+                spacing: 10
+
+                // Header
+                RowLayout {
+                    width: parent.width
+                    spacing: 8
+
+                    Text {
+                        text: label.text
+                        font.family: Appearance.iconFontFamily
+                        font.variableAxes: Appearance.iconFontAxes
+                        font.pixelSize: 40
+                        color: Colors.foreground
+                    }
+
+                    Text {
+                        Layout.fillWidth: true
+                        text: "Audio"
+                        font.family: Appearance.fontFamily
+                        font.pixelSize: 18
+                        font.bold: true
+                        color: Colors.foreground
+                    }
+
+                    ToggleSwitch {
+                        checked: !root.outputMuted
+                        onToggled: if (root.sink && root.sink.audio) root.sink.audio.muted = !root.sink.audio.muted
+                    }
+                }
+
+                // Output
+                Column {
+                    width: parent.width
+                    spacing: 6
+
+                    RowLayout {
+                        width: parent.width
+                        Text {
+                            Layout.fillWidth: true
+                            text: "OUTPUT"
+                            font.family: Appearance.fontFamily
+                            font.pixelSize: Appearance.fontSizeSmall
+                            color: Colors.muted
+                        }
+                        Text {
+                            text: Math.round(root.outputVolume * 100) + "%"
+                            font.family: Appearance.fontFamily
+                            font.pixelSize: Appearance.fontSizeSmall
+                            color: Colors.muted
+                        }
+                    }
+
+                    VolumeSlider {
+                        width: parent.width
+                        value: root.outputVolume
+                        enabled: !!root.sink
+                        onMoved: (v) => { if (root.sink && root.sink.audio) root.sink.audio.volume = v }
+                    }
+
+                    Column {
+                        width: parent.width
+                        spacing: 2
+                        Repeater {
+                            model: root.candidateSinks
+                            DeviceRow {
+                                required property var modelData
+                                node: modelData
+                                icon: root.sinkIcon(modelData)
+                                active: !!(root.sink && modelData && root.sink.id === modelData.id)
+                                onActivate: Pipewire.preferredDefaultAudioSink = modelData
+                            }
+                        }
+                    }
+                }
+
+                // Input
+                Column {
+                    width: parent.width
+                    spacing: 6
+
+                    RowLayout {
+                        width: parent.width
+                        Text {
+                            Layout.fillWidth: true
+                            text: "INPUT"
+                            font.family: Appearance.fontFamily
+                            font.pixelSize: Appearance.fontSizeSmall
+                            color: Colors.muted
+                        }
+                        Text {
+                            text: Math.round(root.inputVolume * 100) + "%"
+                            font.family: Appearance.fontFamily
+                            font.pixelSize: Appearance.fontSizeSmall
+                            color: Colors.muted
+                        }
+                    }
+
+                    VolumeSlider {
+                        width: parent.width
+                        value: root.inputVolume
+                        enabled: !!root.source
+                        onMoved: (v) => { if (root.source && root.source.audio) root.source.audio.volume = v }
+                    }
+
+                    LevelMeter {
+                        width: parent.width
+                        level: inputPeak.peak
+                    }
+
+                    Column {
+                        width: parent.width
+                        spacing: 2
+                        Repeater {
+                            model: root.candidateSources
+                            DeviceRow {
+                                required property var modelData
+                                node: modelData
+                                icon: root.sourceIcon(modelData)
+                                active: !!(root.source && modelData && root.source.id === modelData.id)
+                                onActivate: Pipewire.preferredDefaultAudioSource = modelData
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }