Feature: Added battery percentage/view

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

@@ -4,6 +4,10 @@ import QtQuick
 QtObject {
     readonly property string fontFamily: "CaskaydiaCove Nerd Font Mono"
     readonly property string iconFontFamily: "Material Symbols Outlined"
+    // Same glyph set, softer/rounded terminals — used where a module wants
+    // a visually distinct icon style from the rest of the bar (currently
+    // just BluetoothIndicator.qml) without switching every icon over.
+    readonly property string iconFontFamilyRounded: "Material Symbols Rounded"
     // 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
     // and makes some icons (e.g. "lock") look heavier/bigger than others when

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

@@ -52,6 +52,7 @@ PanelWindow {
         NetworkIndicator { barWindow: bar }
         BluetoothIndicator { barWindow: bar }
         Volume { barWindow: bar }
+        BatteryIndicator { barWindow: bar }
         PowerButton { barWindow: bar }
     }
 }

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

@@ -0,0 +1,422 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Services.UPower
+import "../../config"
+
+// Battery + power-profile panel, ported from omarchy's power panel
+// (github.com/basecamp/omarchy shell/plugins/panels/power/{Model.js,Panel.qml})
+// onto this project's own conventions: Quickshell's native UPower/PowerProfiles
+// bindings instead of omarchy's `omarchy-battery-status` /
+// `omarchy-powerprofiles-list` / `omarchy-powerprofiles-set` helper scripts
+// (which don't exist outside omarchy), and Material Symbols glyphs instead of
+// Nerd Font ones. The charge-threshold ("Holding"/limited-charge) concept from
+// the original is hardware-specific (vendor charge-limit sysfs knobs) and has
+// no equivalent in Quickshell's UPower binding, so it's dropped rather than
+// guessed at; "Battery health" (device.healthPercentage) is shown in its
+// place, using data UPower actually reports.
+Item {
+    id: root
+
+    readonly property var device: UPower.displayDevice
+    // isLaptopBattery (type === Battery && powerSupply === true) is the
+    // Quickshell-recommended check for "is this actually a battery" — more
+    // precise than isPresent, which the docs note is only meaningful once
+    // you already know the device is of Battery type.
+    readonly property bool batteryPresent: !!(root.device && root.device.ready && root.device.isLaptopBattery)
+
+    // Hidden entirely on a desktop with no battery — RowLayout skips
+    // invisible children for both sizing and spacing, so this just vanishes
+    // from the bar rather than leaving a gap.
+    visible: root.batteryPresent
+    implicitWidth: root.batteryPresent ? label.implicitWidth : 0
+    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 bool onBattery: UPower.onBattery
+    // Named deviceState, not "state" — Item already has a built-in `state`
+    // property (the property-based state-machine one) that this would
+    // otherwise collide with.
+    readonly property int deviceState: root.batteryPresent ? root.device.state : UPowerDeviceState.Unknown
+    readonly property bool fullyCharged: root.deviceState === UPowerDeviceState.FullyCharged
+    readonly property bool charging: root.batteryPresent && !root.onBattery && !root.fullyCharged
+    // device.percentage is a 0..1 fraction despite the name (same convention
+    // Volume.qml relies on for Pipewire's audio.volume).
+    readonly property real fraction: root.batteryPresent ? Math.max(0, Math.min(1, root.device.percentage)) : 0
+    readonly property bool low: root.batteryPresent && root.fraction <= 0.15 && !root.charging
+
+    function batteryIcon() {
+        if (!root.batteryPresent) return "battery_unknown"
+        if (root.fullyCharged) return "battery_full"
+        if (root.charging) return "battery_charging_full"
+        if (root.fraction <= 0.1) return "battery_alert"
+        const bars = ["battery_0_bar", "battery_1_bar", "battery_2_bar", "battery_3_bar", "battery_4_bar", "battery_5_bar", "battery_full"]
+        return bars[Math.max(0, Math.min(bars.length - 1, Math.round(root.fraction * (bars.length - 1))))]
+    }
+
+    function formatDuration(seconds) {
+        const s = Math.max(0, Math.round(seconds || 0))
+        if (s <= 0) return "—"
+        const h = Math.floor(s / 3600)
+        const m = Math.round((s % 3600) / 60)
+        return h > 0 ? (h + "h " + m + "m") : (m + "m")
+    }
+
+    readonly property string modeLabel: {
+        if (!root.batteryPresent) return ""
+        if (root.fullyCharged) return "Fully charged"
+        return root.onBattery ? "On battery" : "Charging"
+    }
+
+    // Cute rotating status phrases while current is actually flowing —
+    // ported as-is from omarchy's power panel, which pairs the same phrase
+    // sets with the same charging/on-battery states.
+    readonly property var chargingPhrases: [
+        "Pumping power", "Injecting electrons", "Pouring juice", "Amassing watts",
+        "Hoarding joules", "Sucking volts", "Topping reserves", "Soaking amps", "Inhaling kilowatts"
+    ]
+    readonly property var onBatteryPhrases: [
+        "Slurping power", "Spending joules", "Draining watts", "Burning electrons",
+        "Sipping juice", "Spending coulombs", "Bleeding amps", "Guzzling volts", "Munching reserves"
+    ]
+    readonly property var activePhrases: root.fullyCharged ? []
+        : (root.charging ? root.chargingPhrases : (root.onBattery ? root.onBatteryPhrases : []))
+    readonly property bool rotatingPhrases: root.activePhrases.length > 0
+    property int phraseIndex: 0
+    readonly property string heroStatusText: root.rotatingPhrases
+        ? root.activePhrases[root.phraseIndex % root.activePhrases.length]
+        : root.modeLabel
+
+    // Only rotates while the panel is open and actually charging/discharging.
+    Timer {
+        id: phraseTimer
+        interval: 2800
+        running: panel.visible && root.rotatingPhrases
+        repeat: true
+        triggeredOnStart: false
+        onTriggered: phraseSwap.restart()
+    }
+
+    SequentialAnimation {
+        id: phraseSwap
+        PropertyAnimation { target: heroStatus; property: "opacity"; to: 0.0; duration: 180; easing.type: Easing.OutQuad }
+        ScriptAction {
+            script: {
+                const n = root.activePhrases.length
+                if (n > 0) root.phraseIndex = (root.phraseIndex + 1) % n
+            }
+        }
+        PropertyAnimation { target: heroStatus; property: "opacity"; to: 1.0; duration: 260; easing.type: Easing.InQuad }
+    }
+
+    // If we leave a rotating state mid-swap (e.g. unplugged mid-fade),
+    // snap back to full opacity so the new state reads immediately.
+    Connections {
+        target: root
+        function onRotatingPhrasesChanged() {
+            if (!root.rotatingPhrases) {
+                phraseSwap.stop()
+                heroStatus.opacity = 1.0
+            }
+        }
+    }
+
+    // --- Power profile list ------------------------------------------------
+    // power-profiles-daemon only ever exposes these three fixed profiles;
+    // Performance is conditional on hasPerformanceProfile (e.g. absent on
+    // battery-only/thermally-limited hardware) — same gating omarchy's own
+    // Model.js applies via its profile-list script.
+    readonly property var profileEntries: {
+        const entries = [
+            { value: PowerProfile.PowerSaver, label: "Saver", icon: "eco" },
+            { value: PowerProfile.Balanced, label: "Balanced", icon: "balance" }
+        ]
+        if (PowerProfiles.hasPerformanceProfile)
+            entries.push({ value: PowerProfile.Performance, label: "Performance", icon: "bolt" })
+        return entries
+    }
+
+    Text {
+        id: label
+        anchors.centerIn: parent
+        font.family: Appearance.iconFontFamilyRounded
+        font.variableAxes: Appearance.iconFontAxes
+        font.pixelSize: 16
+        color: root.low ? Colors.urgent : Colors.foreground
+        text: root.batteryIcon()
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+            panel.visible = !panel.visible
+            grab.active = panel.visible
+        }
+    }
+
+    // --- Reusable pieces -----------------------------------------------
+
+    component ProfileButton: Rectangle {
+        id: profBtn
+        required property string label
+        required property string icon
+        required property bool active
+        signal activate()
+        width: parent ? parent.width : 0
+        radius: 0
+        implicitHeight: 44
+        color: mouse.containsMouse ? Colors.primary
+             : (profBtn.active ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) : "transparent")
+
+        // Hover-only outline, offset outside the button rather than drawn on
+        // its own edge — same treatment as this project's other selectable
+        // rows (e.g. Volume.qml's DeviceRow).
+        Rectangle {
+            anchors.fill: parent
+            anchors.margins: -3
+            radius: 0
+            color: "transparent"
+            border.color: Colors.foreground
+            border.width: mouse.containsMouse ? 1 : 0
+        }
+
+        Column {
+            anchors.centerIn: parent
+            spacing: 2
+            Text {
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: profBtn.icon
+                font.family: Appearance.iconFontFamilyRounded
+                font.variableAxes: Appearance.iconFontAxes
+                font.pixelSize: 18
+                color: mouse.containsMouse ? Colors.primaryText : Colors.foreground
+            }
+            Text {
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: profBtn.label
+                font.family: Appearance.fontFamily
+                font.pixelSize: Appearance.fontSizeSmall
+                font.bold: profBtn.active
+                color: mouse.containsMouse ? Colors.primaryText : Colors.foreground
+            }
+        }
+
+        MouseArea {
+            id: mouse
+            anchors.fill: parent
+            hoverEnabled: true
+            cursorShape: Qt.PointingHandCursor
+            onClicked: profBtn.activate()
+        }
+    }
+
+    component StatRow: RowLayout {
+        id: statRow
+        width: parent.width
+        property string label: ""
+        property string value: ""
+        Text {
+            Layout.fillWidth: true
+            text: statRow.label
+            font.family: Appearance.fontFamily
+            font.pixelSize: Appearance.fontSizeSmall
+            color: Colors.muted
+        }
+        Text {
+            text: statRow.value
+            font.family: Appearance.fontFamily
+            font.pixelSize: Appearance.fontSizeSmall
+            color: Colors.muted
+        }
+    }
+
+    // --- 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
+
+        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
+
+                // Hero: icon · title/status · percentage
+                RowLayout {
+                    width: parent.width
+                    spacing: 10
+
+                    Text {
+                        text: root.batteryIcon()
+                        font.family: Appearance.iconFontFamilyRounded
+                        font.variableAxes: Appearance.iconFontAxes
+                        font.pixelSize: 30
+                        color: root.low ? Colors.urgent : Colors.foreground
+                    }
+
+                    Column {
+                        Layout.fillWidth: true
+                        spacing: 2
+                        Text {
+                            width: parent.width
+                            text: "Battery"
+                            elide: Text.ElideRight
+                            font.family: Appearance.fontFamily
+                            font.pixelSize: 18
+                            font.bold: true
+                            color: Colors.foreground
+                        }
+                        Text {
+                            id: heroStatus
+                            width: parent.width
+                            text: root.heroStatusText
+                            elide: Text.ElideRight
+                            font.family: Appearance.fontFamily
+                            font.pixelSize: Appearance.fontSizeSmall
+                            color: Colors.muted
+                        }
+                    }
+
+                    Text {
+                        text: Math.round(root.fraction * 100) + "%"
+                        font.family: Appearance.fontFamily
+                        font.pixelSize: 20
+                        font.bold: true
+                        color: Colors.foreground
+                    }
+                }
+
+                // Charge level bar
+                Item {
+                    width: parent.width
+                    height: 4
+
+                    Rectangle {
+                        anchors.fill: parent
+                        radius: 0
+                        color: Colors.muted
+                        opacity: 0.35
+                    }
+                    Rectangle {
+                        anchors.left: parent.left
+                        anchors.top: parent.top
+                        anchors.bottom: parent.bottom
+                        radius: 0
+                        color: root.low ? Colors.urgent : Colors.primary
+                        width: Math.max(height, parent.width * root.fraction)
+                        Behavior on width { NumberAnimation { duration: 320; easing.type: Easing.OutCubic } }
+                    }
+                }
+
+                // Stats
+                RowLayout {
+                    width: parent.width
+                    spacing: 16
+
+                    Column {
+                        Layout.fillWidth: true
+                        spacing: 4
+                        StatRow { label: "STATE"; value: root.modeLabel }
+                        StatRow {
+                            label: "HEALTH"
+                            value: (root.batteryPresent && root.device.healthSupported)
+                                ? Math.round(root.device.healthPercentage) + "%" : "—"
+                        }
+                    }
+
+                    Column {
+                        Layout.fillWidth: true
+                        spacing: 4
+                        StatRow {
+                            label: root.onBattery ? "TIME LEFT" : "TIME TO FULL"
+                            value: root.batteryPresent
+                                ? root.formatDuration(root.onBattery ? root.device.timeToEmpty : root.device.timeToFull)
+                                : "—"
+                        }
+                        StatRow {
+                            label: "RATE"
+                            value: root.batteryPresent ? Math.abs(root.device.changeRate).toFixed(1) + " W" : "—"
+                        }
+                    }
+                }
+
+                // Power profile picker
+                Column {
+                    width: parent.width
+                    spacing: 6
+
+                    Text {
+                        text: "POWER PROFILE"
+                        font.family: Appearance.fontFamily
+                        font.pixelSize: Appearance.fontSizeSmall
+                        color: Colors.muted
+                    }
+
+                    Row {
+                        id: profileRow
+                        width: parent.width
+                        spacing: 6
+
+                        readonly property real cellWidth: root.profileEntries.length > 0
+                            ? (width - spacing * (root.profileEntries.length - 1)) / root.profileEntries.length
+                            : 0
+
+                        Repeater {
+                            model: root.profileEntries
+                            ProfileButton {
+                                required property var modelData
+                                width: profileRow.cellWidth
+                                label: modelData.label
+                                icon: modelData.icon
+                                active: PowerProfiles.profile === modelData.value
+                                onActivate: PowerProfiles.profile = modelData.value
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -7,7 +7,15 @@ import "../../config"
 
 Item {
     id: root
-    implicitWidth: label.implicitWidth + 4
+    // Independent left/right breathing room around the glyph. Material
+    // Symbols icons aren't monospaced — each one's font-reported advance
+    // width (label.implicitWidth) bakes in its own side bearings, so the
+    // same "+4, centered" math that every other bar icon uses can still
+    // look tighter/looser icon-to-icon. Tune these two by eye instead of
+    // the icon's own bounding box to even it out against its neighbours.
+    property real iconLeftPadding: 0
+    property real iconRightPadding: 0
+    implicitWidth: root.iconLeftPadding + label.implicitWidth + root.iconRightPadding
     implicitHeight: Appearance.barHeight
 
     // The bar's own PanelWindow — passed in from Bar.qml so this popup can
@@ -128,8 +136,10 @@ Item {
 
     Text {
         id: label
-        anchors.centerIn: parent
-        font.family: Appearance.iconFontFamily
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: root.iconLeftPadding
+        font.family: Appearance.iconFontFamilyRounded
         font.variableAxes: Appearance.iconFontAxes
         font.pixelSize: 16
         color: (root.adapter && root.adapter.enabled) ? Colors.foreground : Colors.muted
@@ -163,6 +173,18 @@ Item {
             color: toggleRoot.checked ? Colors.primary : Colors.muted
             opacity: toggleRoot.checked ? 1 : 0.35
         }
+        // Hover-only outline, offset outside the switch itself rather than
+        // drawn on its edge — the switch lags behind a click until the
+        // backend confirms it (e.g. the adapter's enabled state), so this
+        // is just a "you can click this" cue, not click feedback.
+        Rectangle {
+            anchors.fill: parent
+            anchors.margins: -4
+            radius: 0
+            color: "transparent"
+            border.color: Colors.foreground
+            border.width: toggleMouse.containsMouse ? 1 : 0
+        }
         Rectangle {
             width: parent.height - 4
             height: parent.height - 4
@@ -173,7 +195,9 @@ Item {
             Behavior on x { NumberAnimation { duration: Appearance.animationDuration } }
         }
         MouseArea {
+            id: toggleMouse
             anchors.fill: parent
+            hoverEnabled: true
             cursorShape: Qt.PointingHandCursor
             onClicked: toggleRoot.toggled()
         }
@@ -189,9 +213,26 @@ Item {
         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")
+        // Hover checked first (same ordering as Volume.qml's DeviceRow):
+        // hovering always shows a solid Colors.primary fill, even for an
+        // already-connected row, so the primaryText used below never has to
+        // sit on top of the dimmer translucent tint instead.
+        color: rowMouse.containsMouse ? Colors.primary
+            : (devRow.dev.connected ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) : "transparent")
+
+        // Hover-only outline, offset outside the row rather than drawn on
+        // its own edge — same treatment as NetworkIndicator.qml's NetworkRow.
+        // The lists this feeds are inset by 3px (see deviceListColumn and
+        // the Connected section below) so this has room without being
+        // cropped by deviceListFlick's clip.
+        Rectangle {
+            anchors.fill: parent
+            anchors.margins: -3
+            radius: 0
+            color: "transparent"
+            border.color: Colors.foreground
+            border.width: rowMouse.containsMouse ? 1 : 0
+        }
 
         RowLayout {
             id: rowContent
@@ -207,7 +248,7 @@ Item {
                 Layout.maximumWidth: 20
                 horizontalAlignment: Text.AlignLeft
                 text: devRow.dev.icon
-                font.family: Appearance.iconFontFamily
+                font.family: Appearance.iconFontFamilyRounded
                 font.variableAxes: Appearance.iconFontAxes
                 font.pixelSize: 14
                 color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
@@ -246,7 +287,7 @@ Item {
                 id: forgetIcon
                 visible: devRow.showForget
                 text: "close"
-                font.family: Appearance.iconFontFamily
+                font.family: Appearance.iconFontFamilyRounded
                 font.variableAxes: Appearance.iconFontAxes
                 font.pixelSize: 14
                 color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted
@@ -335,9 +376,9 @@ Item {
 
                     Text {
                         text: label.text
-                        font.family: Appearance.iconFontFamily
+                        font.family: Appearance.iconFontFamilyRounded
                         font.variableAxes: Appearance.iconFontAxes
-                        font.pixelSize: 30
+                        font.pixelSize: 21
                         color: Colors.foreground
                     }
 
@@ -350,6 +391,29 @@ Item {
                         color: Colors.foreground
                     }
 
+                    // Spins continuously while root.adapter.discovering is
+                    // true — a persistent "still searching" cue independent
+                    // of the list itself, unlike the "Scanning for devices…"
+                    // text below (which only shows while the device list is
+                    // still empty).
+                    Text {
+                        id: scanSpinner
+                        visible: root.adapter !== null && root.adapter.discovering
+                        text: "progress_activity"
+                        font.family: Appearance.iconFontFamilyRounded
+                        font.variableAxes: Appearance.iconFontAxes
+                        font.pixelSize: 16
+                        color: Colors.muted
+
+                        RotationAnimation on rotation {
+                            running: scanSpinner.visible
+                            loops: Animation.Infinite
+                            from: 0
+                            to: 360
+                            duration: 900
+                        }
+                    }
+
                     ToggleSwitch {
                         visible: root.adapter !== null
                         checked: root.adapter !== null && root.adapter.enabled
@@ -389,7 +453,10 @@ Item {
                         color: Colors.muted
                     }
                     Column {
-                        width: parent.width
+                        // Inset 3px on each side to match deviceListColumn
+                        // below, so DeviceRow's hover halo has room here too.
+                        x: 3
+                        width: parent.width - 6
                         spacing: 2
                         Repeater {
                             model: root.connectedRows
@@ -427,7 +494,17 @@ Item {
 
                     Column {
                         id: deviceListColumn
-                        width: deviceListFlick.width
+                        // Inset 3px on every side so DeviceRow's hover halo
+                        // has room without being cropped by deviceListFlick's
+                        // clip. Left/right needs the manual x/width shift
+                        // (children bind width: parent.width, which ignores
+                        // Column's own padding); top/bottom just needs
+                        // padding, since that's along Column's own layout
+                        // axis and Flickable's contentHeight tracks it.
+                        x: 3
+                        width: deviceListFlick.width - 6
+                        topPadding: 3
+                        bottomPadding: 3
                         spacing: 6
 
                         Column {

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

@@ -44,7 +44,13 @@ Item {
         return null
     }
 
-    // Only scan for networks while the panel is actually open.
+    // Only scan for networks while the panel is actually open. Deliberately
+    // NOT paused while a password prompt is up: scannerEnabled: false stops
+    // NetworkManager from refreshing its AP cache at all, so the existing
+    // list quietly ages out with nothing to replace it — the fix for typing
+    // being interrupted by scan-driven refreshes lives below instead (the
+    // password field itself is pulled out of the repeated row so refreshes
+    // can't touch it), not here.
     Binding {
         target: root.wifiDevice
         property: "scannerEnabled"
@@ -84,6 +90,24 @@ Item {
         ? sortWifiRows(root.wifiDevice.networks.values.map(root.wifiRow).filter(function(r) { return r && r.ssid }))
         : []
 
+    // Quickshell's WifiDevice has no "a scan is in flight" signal — only
+    // scannerEnabled, the on/off request, which stays true for as long as
+    // the panel is open rather than pulsing per scan. wifiRows re-deriving
+    // to a new array (as it does on every actual network-list change — see
+    // the comment on wifiRow() above) is the closest available proxy for
+    // "a scan just landed", so pulse briefly off that instead.
+    property bool wifiJustScanned: false
+    onWifiRowsChanged: {
+        root.wifiJustScanned = true
+        wifiScanPulseTimer.restart()
+    }
+
+    Timer {
+        id: wifiScanPulseTimer
+        interval: 1200
+        onTriggered: root.wifiJustScanned = false
+    }
+
     // Split for the "Known Networks" / "Other Networks" sections. wifiRows
     // is already sorted connected-first then by signal, so filtering
     // preserves that order within each group.
@@ -135,8 +159,17 @@ Item {
         }
     }
 
-    // SSID of the row currently showing its inline password field, if any.
+    // SSID awaiting a password, if any. The input itself lives in a single
+    // persistent widget below the network list (see passwordEntryInput),
+    // not inside the per-row NetworkRow delegate — wifiRows is rebuilt from
+    // scratch on every scan result, and a Repeater over a plain array has no
+    // way to diff that, so it destroys and recreates every delegate each
+    // time. Keeping the field outside that churn is what lets typing survive
+    // a scan landing mid-keystroke.
     property string passwordSsid: ""
+    // Cleared whenever the target SSID changes so stale text from a
+    // cancelled/previous prompt never carries over to the next one.
+    onPasswordSsidChanged: passwordEntryInput.text = ""
 
     // Wired connections don't have a user-facing "name" on the device or
     // Network object — those just expose the interface name (e.g. "eth0").
@@ -161,6 +194,14 @@ Item {
         return (row && row.ssid) || "Network"
     }
 
+    // Signal strength of the currently-connected WiFi network, if any — lets
+    // the bar icon show the same wifi-fan glyph (via wifiIcon()) as the
+    // connected row inside the popup, instead of a generic "wifi" icon.
+    readonly property int connectedWifiSignal: {
+        const row = root.wifiRows.find(function(r) { return r.connected })
+        return row ? row.signal : 0
+    }
+
     function activateNetwork(net) {
         if (net.connected) return
         if (net.known || !root.requiresCredentials(net.security)) {
@@ -171,6 +212,16 @@ Item {
         }
     }
 
+    function submitPassword() {
+        const n = root.networkForSsid(root.passwordSsid)
+        if (n && passwordEntryInput.text.length > 0) n.connectWithPsk(passwordEntryInput.text)
+        root.passwordSsid = ""
+    }
+
+    function cancelPassword() {
+        root.passwordSsid = ""
+    }
+
     // --- Live stats --------------------------------------------------
     // None of this comes from Quickshell's Networking API — it only knows
     // about devices/networks, not throughput, ping, or routing. So this
@@ -517,14 +568,30 @@ Item {
     Text {
         id: label
         anchors.centerIn: parent
-        font.family: Appearance.iconFontFamily
+        font.family: Appearance.iconFontFamilyRounded
         font.variableAxes: Appearance.iconFontAxes
         font.pixelSize: 16
         color: root.connectedDevice ? Colors.foreground : Colors.muted
+        // Only Wired renders its own distinct glyph; disconnected uses
+        // "signal_wifi_off" — the actual off companion to the
+        // network_wifi/signal_wifi fan family used below (not "wifi_off",
+        // which belongs to a visually different, newer glyph family and
+        // looked inconsistent next to the connected bars) — so it needs the
+        // same vertical-stretch correction as the rest of that family.
+        readonly property bool isWifiFan: root.connectedDevice === null || root.connectedDevice.type !== DeviceType.Wired
         text: {
             if (!root.connectedDevice)
-                return "wifi_off"
-            return root.connectedDevice.type === DeviceType.Wired ? "settings_ethernet" : "wifi"
+                return "signal_wifi_off"
+            if (root.connectedDevice.type === DeviceType.Wired)
+                return "settings_ethernet"
+            return root.wifiIcon(root.connectedWifiSignal)
+        }
+        // Same correction as the matching glyph inside the popup's
+        // NetworkRow — the wifi-fan family is inherently flat/wide.
+        transform: Scale {
+            origin.x: label.width / 2
+            origin.y: label.height / 2
+            yScale: label.isWifiFan ? 1.2 : 1.0
         }
     }
 
@@ -552,6 +619,18 @@ Item {
             color: toggleRoot.checked ? Colors.primary : Colors.muted
             opacity: toggleRoot.checked ? 1 : 0.35
         }
+        // Hover-only outline, offset outside the switch itself rather than
+        // drawn on its edge — the switch lags behind a click until the
+        // backend confirms it (e.g. Networking.wifiEnabled), so this is just
+        // a "you can click this" cue, not click feedback.
+        Rectangle {
+            anchors.fill: parent
+            anchors.margins: -4
+            radius: 0
+            color: "transparent"
+            border.color: Colors.foreground
+            border.width: toggleMouse.containsMouse ? 1 : 0
+        }
         Rectangle {
             width: parent.height - 4
             height: parent.height - 4
@@ -562,7 +641,9 @@ Item {
             Behavior on x { NumberAnimation { duration: Appearance.animationDuration } }
         }
         MouseArea {
+            id: toggleMouse
             anchors.fill: parent
+            hoverEnabled: true
             cursorShape: Qt.PointingHandCursor
             onClicked: toggleRoot.toggled()
         }
@@ -572,18 +653,32 @@ Item {
         id: netRow
         required property var net
         signal activate()
+        // Still tracked for the highlight below — the actual input lives
+        // outside this (repeatedly rebuilt) delegate, in the persistent
+        // password entry widget under the network list.
         readonly property bool passwordOpen: root.passwordSsid === netRow.net.ssid
         width: parent ? parent.width : 0
         radius: 0
-        implicitHeight: rowContent.implicitHeight + 12 + (passwordOpen ? passwordRow.implicitHeight + 6 : 0)
-        color: netRow.net.connected
-            ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18)
-            : (rowMouse.containsMouse ? Colors.primary : "transparent")
+        implicitHeight: rowContent.implicitHeight + 12
+        // Hover checked first (same ordering as Volume.qml's DeviceRow):
+        // hovering always shows a solid Colors.primary fill, even for an
+        // already-active row, so the primaryText used below never has to
+        // sit on top of the dimmer translucent tint instead.
+        color: rowMouse.containsMouse ? Colors.primary
+            : ((netRow.net.connected || netRow.passwordOpen) ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) : "transparent")
 
-        function submit() {
-            const n = root.networkForSsid(netRow.net.ssid)
-            if (n && passwordInput.text.length > 0) n.connectWithPsk(passwordInput.text)
-            root.passwordSsid = ""
+        // Hover-only outline, offset outside the row rather than drawn on
+        // its own edge — same treatment as ToggleSwitch's halo and the DNS
+        // pills. networkListColumn insets its rows by 3px on each side
+        // specifically to give this room without getting cropped by the
+        // Flickable's clip.
+        Rectangle {
+            anchors.fill: parent
+            anchors.margins: -3
+            radius: 0
+            color: "transparent"
+            border.color: Colors.foreground
+            border.width: rowMouse.containsMouse ? 1 : 0
         }
 
         Column {
@@ -600,11 +695,12 @@ Item {
                     Layout.preferredWidth: 20
                     Layout.minimumWidth: 20
                     Layout.maximumWidth: 20
+                    Layout.alignment: Qt.AlignVCenter
                     horizontalAlignment: Text.AlignLeft
                     text: root.wifiIcon(netRow.net.signal)
-                    font.family: Appearance.iconFontFamily
+                    font.family: Appearance.iconFontFamilyRounded
                     font.variableAxes: Appearance.iconFontAxes
-                    font.pixelSize: 14
+                    font.pixelSize: 16
                     color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
                     // The wifi-fan glyph itself is flat/wide — stretch it
                     // vertically to read taller while keeping its width (and
@@ -639,7 +735,7 @@ Item {
                 Text {
                     visible: root.requiresCredentials(netRow.net.security)
                     text: "lock"
-                    font.family: Appearance.iconFontFamily
+                    font.family: Appearance.iconFontFamilyRounded
                     font.variableAxes: Appearance.iconFontAxes
                     font.pixelSize: 13
                     color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted
@@ -648,59 +744,12 @@ Item {
                     id: forgetIcon
                     visible: netRow.net.known
                     text: "close"
-                    font.family: Appearance.iconFontFamily
+                    font.family: Appearance.iconFontFamilyRounded
                     font.variableAxes: Appearance.iconFontAxes
                     font.pixelSize: 14
                     color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted
                 }
             }
-
-            RowLayout {
-                id: passwordRow
-                visible: netRow.passwordOpen
-                width: parent.width
-                spacing: 6
-
-                Rectangle {
-                    Layout.fillWidth: true
-                    implicitHeight: 24
-                    radius: 0
-                    color: Colors.background
-                    border.color: Colors.muted
-                    border.width: 1
-
-                    TextInput {
-                        id: passwordInput
-                        anchors.fill: parent
-                        anchors.margins: 6
-                        echoMode: TextInput.Password
-                        color: Colors.foreground
-                        font.family: Appearance.fontFamily
-                        font.pixelSize: Appearance.fontSizeSmall
-                        clip: true
-                        focus: netRow.passwordOpen
-                        onAccepted: netRow.submit()
-                        // Explicit fallback alongside onAccepted, which only
-                        // fires when acceptableInput is true — covers both
-                        // the main Return key and numpad Enter directly.
-                        Keys.onReturnPressed: netRow.submit()
-                        Keys.onEnterPressed: netRow.submit()
-                    }
-                }
-
-                Text {
-                    text: "check"
-                    font.family: Appearance.iconFontFamily
-                    font.variableAxes: Appearance.iconFontAxes
-                    font.pixelSize: 16
-                    color: Colors.primary
-                    MouseArea {
-                        anchors.fill: parent
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: netRow.submit()
-                    }
-                }
-            }
         }
 
         MouseArea {
@@ -786,16 +835,25 @@ Item {
                     spacing: 8
 
                     Text {
+                        id: headerIcon
                         text: label.text
-                        font.family: Appearance.iconFontFamily
+                        font.family: Appearance.iconFontFamilyRounded
                         font.variableAxes: Appearance.iconFontAxes
                         font.pixelSize: 30
                         color: Colors.foreground
+                        // Mirrors the bar icon's own correction — see label's
+                        // isWifiFan/transform above — since this just
+                        // displays the same text at a larger size.
+                        transform: Scale {
+                            origin.x: headerIcon.width / 2
+                            origin.y: headerIcon.height / 2
+                            yScale: label.isWifiFan ? 1.2 : 1.0
+                        }
                     }
 
                     Text {
                         Layout.fillWidth: true
-                        text: root.connectedNetworkName
+                        text: "Network"
                         elide: Text.ElideRight
                         font.family: Appearance.fontFamily
                         font.pixelSize: 18
@@ -804,6 +862,34 @@ Item {
                     }
                 }
 
+                // Row rather than RowLayout — RowLayout is built for
+                // constraint-based stretching (Layout.fillWidth etc.), and
+                // without either Text opting into that, its sizing pass can
+                // still leave more room between them than spacing:0 implies.
+                // Row has no such stretch logic: spacing is exactly the gap
+                // you get, so these two sit flush (plus one small gap) no
+                // matter what width is bound above them.
+                Row {
+                    width: parent.width
+                    spacing: 4
+
+                    Text {
+                        text: "Connected Interface:"
+                        font.family: Appearance.fontFamily
+                        font.pixelSize: Appearance.fontSizeSmall
+                        color: Colors.muted
+                    }
+
+                    Text {
+                        text: root.connectedNetworkName
+                        font.family: Appearance.fontFamily
+                        font.pixelSize: Appearance.fontSizeSmall
+                        color: Colors.foreground
+                        font.bold: true
+                    }
+
+                }
+
                 // Live stats — ping/loss/throughput/IP/gateway for whichever
                 // device is currently connected.
                 GridLayout {
@@ -863,6 +949,18 @@ Item {
                                 border.width: 1
                                 opacity: root.dnsBusy ? 0.6 : 1
 
+                                // Hover-only outline, offset outside the pill
+                                // itself rather than drawn on its own border —
+                                // same treatment as ToggleSwitch's halo.
+                                Rectangle {
+                                    anchors.fill: parent
+                                    anchors.margins: -3
+                                    radius: 0
+                                    color: "transparent"
+                                    border.color: Colors.foreground
+                                    border.width: dnsMouse.containsMouse ? 1 : 0
+                                }
+
                                 Text {
                                     anchors.centerIn: parent
                                     text: dnsPill.modelData
@@ -936,7 +1034,7 @@ Item {
 
                         Text {
                             text: "check"
-                            font.family: Appearance.iconFontFamily
+                            font.family: Appearance.iconFontFamilyRounded
                             font.variableAxes: Appearance.iconFontAxes
                             font.pixelSize: 16
                             color: Colors.primary
@@ -974,7 +1072,7 @@ Item {
                         spacing: 8
                         Text {
                             text: "settings_ethernet"
-                            font.family: Appearance.iconFontFamily
+                            font.family: Appearance.iconFontFamilyRounded
                             font.variableAxes: Appearance.iconFontAxes
                             font.pixelSize: 14
                             color: Colors.foreground
@@ -1025,6 +1123,32 @@ Item {
                             font.pixelSize: Appearance.fontSize
                             color: Colors.foreground
                         }
+
+                        // Spins briefly each time a scan actually lands —
+                        // same "still searching" cue as
+                        // BluetoothIndicator.qml's spinner, but pulsed via
+                        // wifiJustScanned (see above) rather than staying on
+                        // for the whole time the panel is open, since
+                        // WifiDevice has no per-scan signal of its own to
+                        // key off.
+                        Text {
+                            id: wifiScanSpinner
+                            visible: root.wifiDevice !== null && root.wifiDevice.scannerEnabled && root.wifiJustScanned
+                            text: "progress_activity"
+                            font.family: Appearance.iconFontFamilyRounded
+                            font.variableAxes: Appearance.iconFontAxes
+                            font.pixelSize: 16
+                            color: Colors.muted
+
+                            RotationAnimation on rotation {
+                                running: wifiScanSpinner.visible
+                                loops: Animation.Infinite
+                                from: 0
+                                to: 360
+                                duration: 900
+                            }
+                        }
+
                         ToggleSwitch {
                             checked: Networking.wifiEnabled
                             onToggled: Networking.wifiEnabled = !Networking.wifiEnabled
@@ -1049,6 +1173,97 @@ Item {
                         color: Colors.muted
                     }
 
+                    // Password entry — a single persistent widget rather
+                    // than living inside the NetworkRow delegate for
+                    // root.passwordSsid, so a wifi scan landing mid-keystroke
+                    // (which rebuilds the whole Known/Other Networks list
+                    // below) can't destroy the focused TextInput and wipe
+                    // out what's been typed. See passwordSsid's own comment.
+                    Rectangle {
+                        width: parent.width
+                        visible: root.passwordSsid !== ""
+                        radius: 0
+                        color: Colors.background
+                        border.color: Colors.muted
+                        border.width: 1
+                        implicitHeight: passwordEntryColumn.implicitHeight + 12
+
+                        Column {
+                            id: passwordEntryColumn
+                            anchors.fill: parent
+                            anchors.margins: 6
+                            spacing: 6
+
+                            Text {
+                                width: parent.width
+                                text: "Password for “" + root.passwordSsid + "”"
+                                elide: Text.ElideRight
+                                font.family: Appearance.fontFamily
+                                font.pixelSize: Appearance.fontSizeSmall
+                                color: Colors.muted
+                            }
+
+                            RowLayout {
+                                width: parent.width
+                                spacing: 6
+
+                                Rectangle {
+                                    Layout.fillWidth: true
+                                    implicitHeight: 24
+                                    radius: 0
+                                    color: Colors.surface
+                                    border.color: Colors.muted
+                                    border.width: 1
+
+                                    TextInput {
+                                        id: passwordEntryInput
+                                        anchors.fill: parent
+                                        anchors.margins: 6
+                                        echoMode: TextInput.Password
+                                        color: Colors.foreground
+                                        font.family: Appearance.fontFamily
+                                        font.pixelSize: Appearance.fontSizeSmall
+                                        clip: true
+                                        focus: root.passwordSsid !== ""
+                                        onAccepted: root.submitPassword()
+                                        // Explicit fallback alongside onAccepted, which only
+                                        // fires when acceptableInput is true — covers both
+                                        // the main Return key and numpad Enter directly.
+                                        Keys.onReturnPressed: root.submitPassword()
+                                        Keys.onEnterPressed: root.submitPassword()
+                                        Keys.onEscapePressed: root.cancelPassword()
+                                    }
+                                }
+
+                                Text {
+                                    text: "check"
+                                    font.family: Appearance.iconFontFamilyRounded
+                                    font.variableAxes: Appearance.iconFontAxes
+                                    font.pixelSize: 16
+                                    color: Colors.primary
+                                    MouseArea {
+                                        anchors.fill: parent
+                                        cursorShape: Qt.PointingHandCursor
+                                        onClicked: root.submitPassword()
+                                    }
+                                }
+
+                                Text {
+                                    text: "close"
+                                    font.family: Appearance.iconFontFamilyRounded
+                                    font.variableAxes: Appearance.iconFontAxes
+                                    font.pixelSize: 16
+                                    color: Colors.muted
+                                    MouseArea {
+                                        anchors.fill: parent
+                                        cursorShape: Qt.PointingHandCursor
+                                        onClicked: root.cancelPassword()
+                                    }
+                                }
+                            }
+                        }
+                    }
+
                     // Known/Other Networks — capped height, scrolls once
                     // there are more networks than fit rather than growing
                     // the popup indefinitely.
@@ -1064,7 +1279,19 @@ Item {
 
                         Column {
                             id: networkListColumn
-                            width: networkListFlick.width
+                            // Inset 3px on every side (rather than flush with
+                            // the Flickable) so NetworkRow's hover halo below
+                            // has room to sit outside the row without being
+                            // cropped by the Flickable's own clip. Left/right
+                            // needs the manual x/width shift (children bind
+                            // width: parent.width, which ignores Column's own
+                            // padding); top/bottom just needs padding, since
+                            // that's along Column's own layout axis and the
+                            // Flickable's contentHeight tracks it.
+                            x: 3
+                            width: networkListFlick.width - 6
+                            topPadding: 3
+                            bottomPadding: 3
                             spacing: 6
 
                             Column {

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

@@ -7,7 +7,7 @@ import "../../config"
 
 Item {
     id: root
-    implicitWidth: label.implicitWidth + 4
+    implicitWidth: label.implicitWidth + 2
     implicitHeight: Appearance.barHeight
 
     // The bar's own PanelWindow — passed in from Bar.qml so this popup can
@@ -19,11 +19,11 @@ Item {
     Text {
         id: label
         anchors.centerIn: parent
-        font.family: Appearance.iconFontFamily
+        font.family: Appearance.iconFontFamilyRounded
         font.variableAxes: Appearance.iconFontAxes
         font.pixelSize: 16
         color: Colors.foreground
-        text: "power_settings_new"
+        text: "settings_power"
     }
 
     MouseArea {
@@ -41,10 +41,12 @@ Item {
         id: menu
         visible: false
         color: "transparent"
-        implicitWidth: 210
-        // Same padding as Volume.qml's panel.
+        // Same contentWidth/contentPadding split as the other panels
+        // (Volume.qml, NetworkIndicator.qml, etc.) rather than a single
+        // magic implicitWidth.
+        readonly property int contentWidth: 178
         readonly property int contentPadding: 16
-        readonly property int labelOffset: -135
+        implicitWidth: contentWidth + contentPadding * 2
         implicitHeight: mainColumn.implicitHeight + contentPadding * 2
 
         anchor {
@@ -91,9 +93,9 @@ Item {
 
                     Text {
                         text: label.text
-                        font.family: Appearance.iconFontFamily
+                        font.family: Appearance.iconFontFamilyRounded
                         font.variableAxes: Appearance.iconFontAxes
-                        font.pixelSize: 30
+                        font.pixelSize: 23
                         color: Colors.foreground
                     }
 
@@ -122,36 +124,55 @@ Item {
                             { label: "Shut down", icon: "power_settings_new", cmd: ["systemctl", "poweroff"] }
                         ]
 
+                        // Same shape as this project's other selectable rows
+                        // (e.g. VpnIndicator.qml's ProviderRow,
+                        // TailscaleIndicator.qml's ExitNodeRow): radius 0, a
+                        // fixed-width icon column followed by a fillWidth
+                        // label, and an offset hover halo rather than one
+                        // drawn on the row's own edge.
                         delegate: Rectangle {
                             id: entry
                             required property var modelData
                             width: parent ? parent.width : 0
-                            height: 40
-                            radius: Appearance.radiusSmall
+                            radius: 0
+                            implicitHeight: entryContent.implicitHeight + 12
                             color: (!entry.modelData.disabled && entryMouse.containsMouse) ? Colors.primary : "transparent"
 
-                            RowLayout {
+                            Rectangle {
                                 anchors.fill: parent
-                                anchors.leftMargin: 8
+                                anchors.margins: -3
+                                radius: 0
+                                color: "transparent"
+                                border.color: Colors.foreground
+                                border.width: entryMouse.containsMouse ? 1 : 0
+                            }
+
+                            RowLayout {
+                                id: entryContent
+                                anchors.left: parent.left
+                                anchors.right: parent.right
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.margins: 6
                                 spacing: 8
+
                                 Text {
-                                    Layout.preferredWidth: 25
-                                    Layout.minimumWidth: 25
-                                    Layout.maximumWidth: 25
+                                    Layout.preferredWidth: 20
+                                    Layout.minimumWidth: 20
+                                    Layout.maximumWidth: 20
                                     horizontalAlignment: Text.AlignLeft
                                     text: entry.modelData.icon
-                                    font.family: Appearance.iconFontFamily
+                                    font.family: Appearance.iconFontFamilyRounded
                                     font.variableAxes: Appearance.iconFontAxes
-                                    font.pixelSize: entry.modelData.iconSize || 15
+                                    font.pixelSize: 14
                                     opacity: entry.modelData.disabled ? 0.4 : 1
                                     color: entryMouse.containsMouse ? Colors.primaryText : Colors.foreground
                                 }
                                 Text {
-                                    Layout.leftMargin: menu.labelOffset + (entry.modelData.textOffset || 0)
+                                    Layout.fillWidth: true
                                     text: entry.modelData.label
-                                    horizontalAlignment: Text.AlignLeft
+                                    elide: Text.ElideRight
                                     font.family: Appearance.fontFamily
-                                    font.pixelSize: 16
+                                    font.pixelSize: Appearance.fontSize
                                     opacity: entry.modelData.disabled ? 0.4 : 1
                                     color: entryMouse.containsMouse ? Colors.primaryText : Colors.foreground
                                 }

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

@@ -7,7 +7,7 @@ import "../../config"
 
 Item {
     id: root
-    implicitWidth: label.implicitWidth + 4
+    implicitWidth: label.implicitWidth
     implicitHeight: Appearance.barHeight
 
     // The bar's own PanelWindow — passed in from Bar.qml so this popup can
@@ -432,8 +432,8 @@ Item {
                 model: [0, 0, 0, 1, 1, 1, 0, 1, 0]
                 Rectangle {
                     required property int modelData
-                    width: logo.dotSize
-                    height: logo.dotSize
+                    width: logo.dotSize - 1
+                    height: logo.dotSize - 1
                     radius: width / 2
                     color: modelData ? '#c9f0f0f0' : logo.dimColor
                 }
@@ -505,6 +505,18 @@ Item {
             color: toggleRoot.checked ? Colors.primary : Colors.muted
             opacity: toggleRoot.checked ? 1 : 0.35
         }
+        // Hover-only outline, offset outside the switch itself rather than
+        // drawn on its edge — the switch lags behind a click until the
+        // backend confirms it (e.g. root.active), so this is just a "you
+        // can click this" cue, not click feedback.
+        Rectangle {
+            anchors.fill: parent
+            anchors.margins: -4
+            radius: 0
+            color: "transparent"
+            border.color: Colors.foreground
+            border.width: toggleMouse.containsMouse ? 1 : 0
+        }
         Rectangle {
             width: parent.height - 4
             height: parent.height - 4
@@ -515,7 +527,9 @@ Item {
             Behavior on x { NumberAnimation { duration: Appearance.animationDuration } }
         }
         MouseArea {
+            id: toggleMouse
             anchors.fill: parent
+            hoverEnabled: true
             cursorShape: Qt.PointingHandCursor
             onClicked: toggleRoot.toggled()
         }
@@ -533,9 +547,25 @@ Item {
         width: parent ? parent.width : 0
         radius: 0
         implicitHeight: rowContent.implicitHeight + 12
-        color: exitRow.active
-            ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18)
-            : (rowMouse.containsMouse ? Colors.primary : "transparent")
+        // Hover checked first (same ordering as Volume.qml's DeviceRow):
+        // hovering always shows a solid Colors.primary fill, even for an
+        // already-active row, so the primaryText used below never has to
+        // sit on top of the dimmer translucent tint instead.
+        color: rowMouse.containsMouse ? Colors.primary
+            : (exitRow.active ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) : "transparent")
+
+        // Hover-only outline, offset outside the row rather than drawn on
+        // its own edge — same treatment as NetworkIndicator.qml's NetworkRow.
+        // listColumn below is inset by 3px to give this room without being
+        // cropped by listFlick's clip.
+        Rectangle {
+            anchors.fill: parent
+            anchors.margins: -3
+            radius: 0
+            color: "transparent"
+            border.color: Colors.foreground
+            border.width: rowMouse.containsMouse ? 1 : 0
+        }
 
         RowLayout {
             id: rowContent
@@ -551,7 +581,7 @@ Item {
                 Layout.maximumWidth: 20
                 horizontalAlignment: Text.AlignLeft
                 text: exitRow.subIcon
-                font.family: Appearance.iconFontFamily
+                font.family: Appearance.iconFontFamilyRounded
                 font.variableAxes: Appearance.iconFontAxes
                 font.pixelSize: 14
                 color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
@@ -568,7 +598,7 @@ Item {
             Text {
                 visible: exitRow.active
                 text: "check_circle"
-                font.family: Appearance.iconFontFamily
+                font.family: Appearance.iconFontFamilyRounded
                 font.variableAxes: Appearance.iconFontAxes
                 font.pixelSize: 14
                 color: rowMouse.containsMouse ? Colors.primaryText : Colors.primary
@@ -595,9 +625,25 @@ Item {
         width: parent ? parent.width : 0
         radius: 0
         implicitHeight: accountContent.implicitHeight + 12
-        color: accountRow.selected
-            ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18)
-            : (accountMouse.containsMouse ? Colors.primary : "transparent")
+        // Hover checked first (same ordering as Volume.qml's DeviceRow):
+        // hovering always shows a solid Colors.primary fill, even for an
+        // already-selected row, so the primaryText the texts below already
+        // assume on hover is always correct (this row had the same
+        // active-first ordering bug as ExitNodeRow, just never reported).
+        color: accountMouse.containsMouse ? Colors.primary
+            : (accountRow.selected ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) : "transparent")
+
+        // Hover-only outline, offset outside the row — same treatment as
+        // ExitNodeRow/NetworkRow. Not inside a clipped Flickable, so no
+        // inset needed on its container.
+        Rectangle {
+            anchors.fill: parent
+            anchors.margins: -3
+            radius: 0
+            color: "transparent"
+            border.color: Colors.foreground
+            border.width: accountMouse.containsMouse ? 1 : 0
+        }
 
         RowLayout {
             id: accountContent
@@ -613,7 +659,7 @@ Item {
                 Layout.maximumWidth: 20
                 horizontalAlignment: Text.AlignLeft
                 text: "person"
-                font.family: Appearance.iconFontFamily
+                font.family: Appearance.iconFontFamilyRounded
                 font.variableAxes: Appearance.iconFontAxes
                 font.pixelSize: 14
                 color: accountMouse.containsMouse ? Colors.primaryText : Colors.foreground
@@ -638,7 +684,7 @@ Item {
             Text {
                 visible: accountRow.selected
                 text: "check_circle"
-                font.family: Appearance.iconFontFamily
+                font.family: Appearance.iconFontFamilyRounded
                 font.variableAxes: Appearance.iconFontAxes
                 font.pixelSize: 14
                 color: accountMouse.containsMouse ? Colors.primaryText : Colors.primary
@@ -680,6 +726,18 @@ Item {
                  : (peerRow.expanded ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) : "transparent")
             implicitHeight: peerContent.implicitHeight + 12
 
+            // Hover-only outline, offset outside the row — same treatment as
+            // ExitNodeRow/NetworkRow. listColumn is inset by 3px to give this
+            // room without being cropped by listFlick's clip.
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: -3
+                radius: 0
+                color: "transparent"
+                border.color: Colors.foreground
+                border.width: summaryMouse.containsMouse ? 1 : 0
+            }
+
             RowLayout {
                 id: peerContent
                 anchors.left: parent.left
@@ -694,7 +752,7 @@ Item {
                     Layout.maximumWidth: 20
                     horizontalAlignment: Text.AlignLeft
                     text: root.osIcon(peerRow.peer.os)
-                    font.family: Appearance.iconFontFamily
+                    font.family: Appearance.iconFontFamilyRounded
                     font.variableAxes: Appearance.iconFontAxes
                     font.pixelSize: 14
                     color: summaryMouse.containsMouse ? Colors.primaryText : Colors.foreground
@@ -709,7 +767,7 @@ Item {
                 }
                 Text {
                     text: peerRow.expanded ? "expand_less" : "content_copy"
-                    font.family: Appearance.iconFontFamily
+                    font.family: Appearance.iconFontFamilyRounded
                     font.variableAxes: Appearance.iconFontAxes
                     font.pixelSize: 14
                     color: summaryMouse.containsMouse ? Colors.primaryText : Colors.muted
@@ -739,6 +797,17 @@ Item {
                     color: optionMouse.containsMouse ? Colors.primary : "transparent"
                     implicitHeight: optionRow.implicitHeight + 8
 
+                    // Hover-only outline, offset outside the row — same
+                    // treatment as the rest of this file's selectable rows.
+                    Rectangle {
+                        anchors.fill: parent
+                        anchors.margins: -3
+                        radius: 0
+                        color: "transparent"
+                        border.color: Colors.foreground
+                        border.width: optionMouse.containsMouse ? 1 : 0
+                    }
+
                     RowLayout {
                         id: optionRow
                         anchors.left: parent.left
@@ -838,7 +907,7 @@ Item {
                     spacing: 8
 
                     TailscaleLogo {
-                        size: 30
+                        size: 25
                         color: label.color
                         crossed: label.crossed
                         warning: label.warning
@@ -915,7 +984,7 @@ Item {
                         spacing: 8
                         Text {
                             text: "open_in_new"
-                            font.family: Appearance.iconFontFamily
+                            font.family: Appearance.iconFontFamilyRounded
                             font.variableAxes: Appearance.iconFontAxes
                             font.pixelSize: 14
                             color: signInMouse.containsMouse ? Colors.primaryText : Colors.foreground
@@ -986,7 +1055,7 @@ Item {
                         Text {
                             visible: root.status.selfIp !== ""
                             text: "content_copy"
-                            font.family: Appearance.iconFontFamily
+                            font.family: Appearance.iconFontFamilyRounded
                             font.variableAxes: Appearance.iconFontAxes
                             font.pixelSize: 12
                             color: copyMouse.containsMouse ? Colors.primary : Colors.muted
@@ -1026,7 +1095,18 @@ Item {
 
                     Column {
                         id: listColumn
-                        width: listFlick.width
+                        // Inset 3px on every side so ExitNodeRow/PeerRow's
+                        // hover halo has room without being cropped by
+                        // listFlick's clip. Left/right needs the manual
+                        // x/width shift (children bind width: parent.width,
+                        // which ignores Column's own padding); top/bottom
+                        // just needs padding, since that's along Column's
+                        // own layout axis and Flickable's contentHeight
+                        // tracks it.
+                        x: 3
+                        width: listFlick.width - 6
+                        topPadding: 3
+                        bottomPadding: 3
                         spacing: 6
 
                         Column {

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

@@ -7,7 +7,7 @@ import "../../config"
 
 Item {
     id: root
-    implicitWidth: label.implicitWidth + 4
+    implicitWidth: label.implicitWidth
     implicitHeight: Appearance.barHeight
 
     // The bar's own PanelWindow — passed in from Bar.qml so this popup can
@@ -40,6 +40,12 @@ Item {
         enabled: panel.visible
     }
 
+    PwNodePeakMonitor {
+        id: outputPeak
+        node: root.sink
+        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.
@@ -67,27 +73,52 @@ Item {
                 p["device.icon-name"] || "", p["device.product.name"] || ""].join(" ").toLowerCase()
     }
 
+    // Quickshell's Pipewire API only exposes a node's own properties, not
+    // its parent Device — so device.api (unlike device.form-factor or the
+    // richer device.icon-name, which only live on the Device object) is the
+    // one reliable Bluetooth signal actually present here: it's set on
+    // every node PipeWire hands off to a bluez5-backed sink/source. Checking
+    // it directly beats sniffing the word "bluetooth" out of node names,
+    // which usually just say "bluez_output..." and never match.
+    function isBluetoothNode(node) {
+        var p = (node && node.properties) || {}
+        return p["device.api"] === "bluez5"
+    }
+
+    // PipeWire's own device.form-factor (which would call ACCENTUM a
+    // "headset" outright) isn't reachable from here for the same reason —
+    // it lives on the Device object, not the node. And some devices (a
+    // generic USB DAC like an EKSA headset) have no form-factor anywhere in
+    // PipeWire at all, headset or not, so no property-based check can catch
+    // them. This override list is the deliberate manual escape hatch for
+    // exactly that case — add a distinctive substring from the product name
+    // (device.product.name/description, matched case-insensitively via
+    // deviceBlob) whenever a new no-metadata device shows up misclassified.
+    readonly property var headphoneNameOverrides: ["e900plus"]
+
     function isHeadphoneNode(node) {
         var blob = deviceBlob(node)
-        return blob.indexOf("headphone") !== -1 || blob.indexOf("headset") !== -1
+        if (blob.indexOf("headphone") !== -1 || blob.indexOf("headset") !== -1
             || blob.indexOf("earbud") !== -1 || blob.indexOf("earphone") !== -1
-            || blob.indexOf("airpod") !== -1
+            || blob.indexOf("airpod") !== -1)
+            return true
+        return root.headphoneNameOverrides.some(function(needle) { return blob.indexOf(needle) !== -1 })
     }
 
     function sinkIcon(node) {
         if (!node) return "speaker"
         if (isHeadphoneNode(node)) return "headphones"
+        if (isBluetoothNode(node)) return "bluetooth_audio"
         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"
+        if (isHeadphoneNode(node)) return "headphones"
+        if (isBluetoothNode(node)) return "bluetooth_audio"
         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"
     }
@@ -95,9 +126,9 @@ Item {
     Text {
         id: label
         anchors.centerIn: parent
-        font.family: Appearance.iconFontFamily
+        font.family: Appearance.iconFontFamilyRounded
         font.variableAxes: Appearance.iconFontAxes
-        font.pixelSize: 16
+        font.pixelSize: 18
         color: Colors.foreground
         text: (root.outputMuted || root.outputVolume <= 0) ? "volume_off"
             : (root.outputVolume < 0.5 ? "volume_down" : "volume_up")
@@ -234,6 +265,19 @@ Item {
         color: rowMouse.containsMouse ? Colors.primary
              : (deviceRow.active ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) : "transparent")
 
+        // Hover-only outline, offset outside the row rather than drawn on
+        // its own edge — same treatment as the other bar widgets' selectable
+        // rows (e.g. NetworkIndicator.qml's NetworkRow). Not inside a
+        // clipped Flickable here, so no inset needed on its container.
+        Rectangle {
+            anchors.fill: parent
+            anchors.margins: -3
+            radius: 0
+            color: "transparent"
+            border.color: Colors.foreground
+            border.width: rowMouse.containsMouse ? 1 : 0
+        }
+
         RowLayout {
             anchors.fill: parent
             anchors.leftMargin: 8
@@ -245,7 +289,7 @@ Item {
                 Layout.maximumWidth: 18
                 horizontalAlignment: Text.AlignHCenter
                 text: deviceRow.icon
-                font.family: Appearance.iconFontFamily
+                font.family: Appearance.iconFontFamilyRounded
                 font.variableAxes: Appearance.iconFontAxes
                 font.pixelSize: 14
                 color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
@@ -315,7 +359,7 @@ Item {
             Column {
                 id: mainColumn
                 anchors.fill: parent
-                anchors.margins: panel.contentPadding
+                anchors.margins: panel.contentPadding - 2
                 spacing: 10
 
                 // Header
@@ -325,9 +369,9 @@ Item {
 
                     Text {
                         text: label.text
-                        font.family: Appearance.iconFontFamily
+                        font.family: Appearance.iconFontFamilyRounded
                         font.variableAxes: Appearance.iconFontAxes
-                        font.pixelSize: 40
+                        font.pixelSize: 30
                         color: Colors.foreground
                     }
 
@@ -375,9 +419,14 @@ Item {
                         onMoved: (v) => { if (root.sink && root.sink.audio) root.sink.audio.volume = v }
                     }
 
+                    LevelMeter {
+                        width: parent.width
+                        level: outputPeak.peak
+                    }
+
                     Column {
                         width: parent.width
-                        spacing: 2
+                        spacing: 4
                         Repeater {
                             model: root.candidateSinks
                             DeviceRow {
@@ -425,9 +474,10 @@ Item {
                         level: inputPeak.peak
                     }
 
+
                     Column {
                         width: parent.width
-                        spacing: 2
+                        spacing: 4
                         Repeater {
                             model: root.candidateSources
                             DeviceRow {

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

@@ -313,16 +313,40 @@ Item {
 
     // --- Bar icon ------------------------------------------------------------
 
+    // A fixed, wallpaper-independent green rather than Colors.primary — the
+    // glyph itself doesn't change shape between states (unlike Tailscale's
+    // crossed-out logo), so "connected" needs to read as a shape cue (a
+    // badge appearing) rather than rely on a color swap that can end up
+    // low-contrast depending on the current pywal palette.
+    readonly property color connectedBadgeColor: "#3ddc84"
+
     Text {
         id: label
         anchors.centerIn: parent
-        font.family: Appearance.iconFontFamily
+        font.family: Appearance.iconFontFamilyRounded
         font.variableAxes: Appearance.iconFontAxes
         font.pixelSize: Appearance.iconSize
         color: root.anyConnected ? Colors.primary : Colors.muted
         text: "vpn_lock"
     }
 
+    // Small solid dot badge, bottom-right of the glyph, shown only while a
+    // tunnel is actually up — a shape appearing/disappearing reads at a
+    // glance even when the icon tint alone wouldn't stand out.
+    Rectangle {
+        visible: root.anyConnected
+        width: 6
+        height: 6
+        radius: 3
+        color: root.connectedBadgeColor
+        border.color: Colors.background
+        border.width: 1
+        anchors.right: label.right
+        anchors.bottom: label.bottom
+        anchors.rightMargin: 0
+        anchors.bottomMargin: 1
+    }
+
     MouseArea {
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
@@ -349,6 +373,20 @@ Item {
             color: toggleRoot.checked ? Colors.primary : Colors.muted
             opacity: (toggleRoot.checked ? 1 : 0.35) * (toggleRoot.busy ? 0.6 : 1)
         }
+        // Hover-only outline, offset outside the switch itself rather than
+        // drawn on its edge — the switch lags behind a click until the
+        // connect/disconnect process actually finishes, so this is just a
+        // "you can click this" cue, not click feedback. toggleMouse.containsMouse
+        // is already false while busy, since a disabled MouseArea doesn't
+        // track hover.
+        Rectangle {
+            anchors.fill: parent
+            anchors.margins: -4
+            radius: 0
+            color: "transparent"
+            border.color: Colors.foreground
+            border.width: toggleMouse.containsMouse ? 1 : 0
+        }
         Rectangle {
             width: parent.height - 4
             height: parent.height - 4
@@ -359,8 +397,10 @@ Item {
             Behavior on x { NumberAnimation { duration: Appearance.animationDuration } }
         }
         MouseArea {
+            id: toggleMouse
             anchors.fill: parent
             enabled: !toggleRoot.busy
+            hoverEnabled: true
             cursorShape: toggleRoot.busy ? Qt.ArrowCursor : Qt.PointingHandCursor
             onClicked: toggleRoot.toggled()
         }
@@ -398,7 +438,7 @@ Item {
                 Layout.maximumWidth: 20
                 horizontalAlignment: Text.AlignHCenter
                 text: provRow.subIcon
-                font.family: Appearance.iconFontFamily
+                font.family: Appearance.iconFontFamilyRounded
                 font.variableAxes: Appearance.iconFontAxes
                 font.pixelSize: 14
                 color: provRow.state === "connected" ? Colors.primary : Colors.foreground
@@ -493,7 +533,7 @@ Item {
 
                     Text {
                         text: "vpn_lock"
-                        font.family: Appearance.iconFontFamily
+                        font.family: Appearance.iconFontFamilyRounded
                         font.variableAxes: Appearance.iconFontAxes
                         font.pixelSize: 22
                         color: root.anyConnected ? Colors.primary : Colors.foreground
@@ -524,7 +564,7 @@ Item {
 
                     ProviderRow {
                         label: "Mullvad"
-                        subIcon: "shield"
+                        subIcon: "gpp_good"
                         state: root.mullvadState
                         detailText: root.mullvadDetail
                         installed: root.mullvadInstalled

dotfiles/.config/quickshell/modules/osd/VolumeOsd.qml

@@ -53,7 +53,7 @@ PanelWindow {
             spacing: 12
 
             Text {
-                font.family: Appearance.iconFontFamily
+                font.family: Appearance.iconFontFamilyRounded
                 font.variableAxes: Appearance.iconFontAxes
                 font.pixelSize: 18
                 color: Colors.foreground