style(webui): highlight selected conversations

This commit is contained in:
Xubin Ren
2026-07-30 01:13:37 +08:00
parent cad9b07deb
commit 7561d846fa
2 changed files with 28 additions and 2 deletions
+3 -2
View File
@@ -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", "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", compact ? "min-h-7" : "min-h-8",
active active
? "bg-sidebar-accent/70 text-sidebar-accent-foreground shadow-[inset_0_0_0_1px_hsl(var(--sidebar-border)/0.16)]" ? "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/50 hover:text-sidebar-foreground", : "text-sidebar-foreground/82 hover:bg-sidebar-accent/75 hover:text-sidebar-foreground",
)} )}
> >
<button <button
type="button" type="button"
onClick={() => onSelect(s.key)} onClick={() => onSelect(s.key)}
aria-current={active ? "page" : undefined}
title={tooltipTitle} title={tooltipTitle}
className={cn( className={cn(
"min-w-0 flex-1 overflow-hidden text-left", "min-w-0 flex-1 overflow-hidden text-left",
+25
View File
@@ -192,6 +192,31 @@ describe("ChatList", () => {
expect(within(chatsSection).queryByText("Project chat")).not.toBeInTheDocument(); 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 () => { it("can collapse a project group and keeps project rename separate from chat titles", async () => {
const onToggleGroup = vi.fn(); const onToggleGroup = vi.fn();
const onRequestRenameProject = vi.fn(); const onRequestRenameProject = vi.fn();