History

feat: show full thread title in a tooltip when hovering sidebar thread names (#1994)

Utkarsh Patil committed 7 months ago

Commit ccbb9d71 parent dd1480a2 files · +45 −2Browse files

Unified · Split

2 files
  1. apps/web/src/components/ChatView.browser.tsx +30 −1
  2. apps/web/src/components/Sidebar.tsx +15 −1
apps/web/src/components/ChatView.browser.tsx+30−1
@@ -57,6 +57,7 @@ vi.mock("../lib/gitStatusState", () => ({ · 56 unmodified lines
5757 }));
5858
5959 const THREAD_ID = "thread-browser-test" as ThreadId;
60+const THREAD_TITLE = "Browser test thread";
6061 const ARCHIVED_SECONDARY_THREAD_ID = "thread-secondary-project-archived" as ThreadId;
6162 const PROJECT_ID = "project-1" as ProjectId;
6263 const SECOND_PROJECT_ID = "project-2" as ProjectId;
@@ -288,7 +289,7 @@ function createSnapshotForTargetUser(options: { · 225 unmodified lines
288289 {
289290 id: THREAD_ID,
290291 projectId: PROJECT_ID,
291− title: "Browser test thread",
292+ title: THREAD_TITLE,
292293 modelSelection: {
293294 provider: "codex",
294295 model: "gpt-5",
@@ -3413,6 +3414,34 @@ describe("ChatView timeline estimator parity (full app)", () => { · 3118 unmodified lines
34133414 }
34143415 });
34153416
3417+ it("exposes the full thread title on the sidebar row tooltip", async () => {
3418+ const mounted = await mountChatView({
3419+ viewport: DEFAULT_VIEWPORT,
3420+ snapshot: createSnapshotForTargetUser({
3421+ targetMessageId: "msg-user-thread-tooltip-target" as MessageId,
3422+ targetText: "thread tooltip target",
3423+ }),
3424+ });
3425+
3426+ try {
3427+ const threadTitle = page.getByTestId(`thread-title-${THREAD_ID}`);
3428+
3429+ await expect.element(threadTitle).toBeInTheDocument();
3430+ await threadTitle.hover();
3431+
3432+ await vi.waitFor(
3433+ () => {
3434+ const tooltip = document.querySelector<HTMLElement>('[data-slot="tooltip-popup"]');
3435+ expect(tooltip).not.toBeNull();
3436+ expect(tooltip?.textContent).toContain(THREAD_TITLE);
3437+ },
3438+ { timeout: 8_000, interval: 16 },
3439+ );
3440+ } finally {
3441+ await mounted.cleanup();
3442+ }
3443+ });
3444+
34163445 it("shows the confirm archive action after clicking the archive button", async () => {
34173446 localStorage.setItem(
34183447 "t3code:client-settings:v1",
apps/web/src/components/Sidebar.tsx+15−1
@@ -647,7 +647,21 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP · 646 unmodified lines
647647 onClick={handleRenameInputClick}
648648 />
649649 ) : (
650− <span className="min-w-0 flex-1 truncate text-xs">{thread.title}</span>
650+ <Tooltip>
651+ <TooltipTrigger
652+ render={
653+ <span
654+ className="min-w-0 flex-1 truncate text-xs"
655+ data-testid={`thread-title-${thread.id}`}
656+ >
657+ {thread.title}
658+ </span>
659+ }
660+ />
661+ <TooltipPopup side="top" className="max-w-80 whitespace-normal leading-tight">
662+ {thread.title}
663+ </TooltipPopup>
664+ </Tooltip>
651665 )}
652666 </div>
653667 <div className="ml-auto flex shrink-0 items-center gap-1.5">