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

@@ -551,6 +551,28 @@ Item {
             ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18)
             : (rowMouse.containsMouse ? Colors.primary : "transparent")
 
+        // Colors.primaryText (used below whenever hovered) assumes a solid
+        // Colors.primary fill behind it — true for a hovered *inactive* row,
+        // but an *active* row's background stays the translucent tint above
+        // even while hovered, so primaryText (dark, meant for a bright solid
+        // fill) reads poorly against it. This hardcoded near-white (same one
+        // used for TailscaleLogo's bright dots, for the same "needs to be
+        // reliably visible" reason) is used instead for that one case.
+        readonly property color activeHoverColor: "#c9f0f0f0"
+
+        // 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
             anchors.left: parent.left
@@ -568,7 +590,7 @@ Item {
                 font.family: Appearance.iconFontFamilyRounded
                 font.variableAxes: Appearance.iconFontAxes
                 font.pixelSize: 14
-                color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
+                color: rowMouse.containsMouse ? (exitRow.active ? exitRow.activeHoverColor : Colors.primaryText) : Colors.foreground
             }
             Text {
                 Layout.fillWidth: true
@@ -577,7 +599,7 @@ Item {
                 font.family: Appearance.fontFamily
                 font.pixelSize: Appearance.fontSize
                 font.bold: exitRow.active
-                color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
+                color: rowMouse.containsMouse ? (exitRow.active ? exitRow.activeHoverColor : Colors.primaryText) : Colors.foreground
             }
             Text {
                 visible: exitRow.active
@@ -585,7 +607,7 @@ Item {
                 font.family: Appearance.iconFontFamilyRounded
                 font.variableAxes: Appearance.iconFontAxes
                 font.pixelSize: 14
-                color: rowMouse.containsMouse ? Colors.primaryText : Colors.primary
+                color: rowMouse.containsMouse ? exitRow.activeHoverColor : Colors.primary
             }
         }
 
@@ -613,6 +635,18 @@ Item {
             ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18)
             : (accountMouse.containsMouse ? Colors.primary : "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
             anchors.left: parent.left
@@ -694,6 +728,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
@@ -753,6 +799,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
@@ -1040,7 +1097,11 @@ Item {
 
                     Column {
                         id: listColumn
-                        width: listFlick.width
+                        // Inset 3px on each side so ExitNodeRow/PeerRow's
+                        // hover halo has room without being cropped by
+                        // listFlick's clip.
+                        x: 3
+                        width: listFlick.width - 6
                         spacing: 6
 
                         Column {