From 7561d846fad2d90d3d34802d948988169492fec6 Mon Sep 17 00:00:00 2001
From: Xubin Ren <52506698+Re-bin@users.noreply.github.com>
Date: Mon, 27 Jul 2026 21:44:19 +0800
Subject: [PATCH] style(webui): highlight selected conversations

---
 webui/src/components/ChatList.tsx  |  5 +++--
 webui/src/tests/chat-list.test.tsx | 25 +++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/webui/src/components/ChatList.tsx b/webui/src/components/ChatList.tsx
index 142808052..12c36297b 100644
--- a/webui/src/components/ChatList.tsx
+++ b/webui/src/components/ChatList.tsx
@@ -255,13 +255,14 @@ export const ChatList = memo(function ChatList({
                             "group flex min-w-0 max-w-full items-center gap-2 rounded-xl px-2 text-[13px] transition-colors",
                             compact ? "min-h-7" : "min-h-8",
                             active
-                              ? "bg-sidebar-accent/70 text-sidebar-accent-foreground shadow-[inset_0_0_0_1px_hsl(var(--sidebar-border)/0.16)]"
-                              : "text-sidebar-foreground/82 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground",
+                              ? "bg-sidebar-accent text-sidebar-accent-foreground shadow-[inset_0_0_0_1px_hsl(var(--sidebar-border)/0.55)]"
+                              : "text-sidebar-foreground/82 hover:bg-sidebar-accent/75 hover:text-sidebar-foreground",
                           )}
                         >
                           <button
                             type="button"
                             onClick={() => onSelect(s.key)}
+                            aria-current={active ? "page" : undefined}
                             title={tooltipTitle}
                             className={cn(
                               "min-w-0 flex-1 overflow-hidden text-left",
diff --git a/webui/src/tests/chat-list.test.tsx b/webui/src/tests/chat-list.test.tsx
index b8f333269..6b04ba4c4 100644
--- a/webui/src/tests/chat-list.test.tsx
+++ b/webui/src/tests/chat-list.test.tsx
@@ -192,6 +192,31 @@ describe("ChatList", () => {
     expect(within(chatsSection).queryByText("Project chat")).not.toBeInTheDocument();
   });
 
+  it("visually distinguishes the selected topic", () => {
+    render(
+      <ChatList
+        sessions={[
+          session({ chatId: "active", title: "Active topic" }),
+          session({ chatId: "inactive", title: "Inactive topic" }),
+        ]}
+        activeKey="websocket:active"
+        onSelect={vi.fn()}
+        onRequestDelete={vi.fn()}
+        onTogglePin={vi.fn()}
+        onRequestRename={vi.fn()}
+        onToggleArchive={vi.fn()}
+      />,
+    );
+
+    const activeButton = screen.getByTitle("Active topic");
+    expect(activeButton).toHaveAttribute("aria-current", "page");
+    expect(activeButton.parentElement).toHaveClass(
+      "bg-sidebar-accent",
+      "shadow-[inset_0_0_0_1px_hsl(var(--sidebar-border)/0.55)]",
+    );
+    expect(screen.getByTitle("Inactive topic")).not.toHaveAttribute("aria-current");
+  });
+
   it("can collapse a project group and keeps project rename separate from chat titles", async () => {
     const onToggleGroup = vi.fn();
     const onRequestRenameProject = vi.fn();