From e39ec7afce13d89b959be871e5c780bdda7b277a Mon Sep 17 00:00:00 2001
From: Jokul <wangshengshan011@163.com>
Date: Sun, 12 Jul 2026 10:46:34 +0800
Subject: [PATCH] fix: add visual selected state for active key in key tree

The active/selected classes were already applied via :class binding
but had no CSS styles defined. Add:
- .active: indigo background tint + 3px left accent border (box-shadow
  inset to avoid layout shift) + bold accent-colored key name
- .selected: subtle indigo background for multi-select checked items
---
 src/renderer/src/components/key/KeyList.vue | 25 +++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/renderer/src/components/key/KeyList.vue b/src/renderer/src/components/key/KeyList.vue
index f5120a1..ad002f5 100644
--- a/src/renderer/src/components/key/KeyList.vue
+++ b/src/renderer/src/components/key/KeyList.vue
@@ -792,6 +792,31 @@ onUnmounted(() => {
   color: var(--text-primary);
 }
 
+/* Selected key (value shown in detail panel) */
+.leaf-item.active {
+  background: var(--bg-card-active);
+  box-shadow: inset 3px 0 0 var(--accent);
+  color: var(--accent-light);
+}
+
+.leaf-item.active .tree-name {
+  color: var(--accent-light);
+  font-weight: 600;
+}
+
+.leaf-item.active:hover {
+  background: var(--bg-card-active);
+}
+
+/* Multi-select checked */
+.leaf-item.selected {
+  background: rgba(99, 102, 241, 0.06);
+}
+
+.leaf-item.selected:hover {
+  background: rgba(99, 102, 241, 0.1);
+}
+
 .folder-item {
   font-weight: 600;
   color: var(--text-primary);