yuta/twitter-lite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: make Research tabs closable and preserve workspace navigation

Browse Source
This commit is contained in:
yuta
2026-10-07 22:44:00 +09:00
parent 71df9fb421
commit aabeb33f41
9 changed files with 287 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/research/research-panel.test.tsx
+72 -1
View File
@@ -6,7 +6,7 @@ import type { ResearchHistoryEntry, ResearchRun } from "./model";
import { ResearchPanel } from "./research-panel";
const navigation = vi.hoisted(() => ({
search: {} as { run?: string; deck?: string; citation?: string },
search: {} as { run?: string; deck?: string; citation?: string; closedRuns?: string[] },
set: vi.fn<(patch: { run?: string; deck?: string; citation?: string }) => void>(),
}));
vi.mock("../navigation/use-url-state", async () => {
@@ -835,3 +835,74 @@ it("submits with Enter while preserving Shift+Enter and IME composition", async
data: expect.objectContaining({ topic: "Compare browser automation tools" }),
});
});
it("closes an inactive tab without changing the current conversation", async () => {
navigation.search = { run: running.id, citation: "twitter:123" };
current = {
configured: true,
run: running,
history: [
{ id: running.id, title: "Current chat", status: "running", updatedAt: 1000 },
{ id: "other", title: "Other chat", status: "complete", updatedAt: 500 },
],
};
show();
fireEvent.click(await screen.findByRole("button", { name: "Close Other chat" }));
expect(screen.queryByRole("button", { name: "Other chat" })).not.toBeInTheDocument();
expect(screen.getByRole("button", { name: "Current chat" })).toHaveAttribute(
"aria-current",
"page",
);
expect(navigation.set).toHaveBeenLastCalledWith({ closedRuns: ["other"] });
expect(actions.cancel).not.toHaveBeenCalled();
});
it("selects the adjacent chat when closing the active tab without stopping its running turn", async () => {
navigation.search = { run: running.id };
current = {
configured: true,
run: running,
history: [
{ id: running.id, title: "Current chat", status: "running", updatedAt: 1000 },
{ id: "next", title: "Next chat", status: "complete", updatedAt: 500 },
],
};
show();
fireEvent.click(await screen.findByRole("button", { name: "Close Current chat" }));
expect(navigation.set).toHaveBeenLastCalledWith({
closedRuns: [running.id],
run: "next",
citation: undefined,
});
await waitFor(() =>
expect(screen.getByRole("button", { name: "Next chat" })).toHaveAttribute(
"aria-current",
"page",
),
);
expect(screen.queryByRole("button", { name: "Current chat" })).not.toBeInTheDocument();
expect(actions.cancel).not.toHaveBeenCalled();
});
it("shows a new chat after closing the last tab and keeps the saved chat in history", async () => {
navigation.search = { run: running.id };
current = {
configured: true,
run: running,
history: [{ id: running.id, title: "Last chat", status: "running", updatedAt: 1000 }],
};
show();
fireEvent.click(await screen.findByRole("button", { name: "Close Last chat" }));
expect(navigation.set).toHaveBeenLastCalledWith({
closedRuns: [running.id],
run: "new",
citation: undefined,
});
await waitFor(() =>
expect(screen.getByRole("button", { name: "Open chat history" })).toBeEnabled(),
);
expect(screen.queryByRole("button", { name: "Last chat" })).not.toBeInTheDocument();
expect(screen.getByText("New chat")).toBeVisible();
expect(actions.start).not.toHaveBeenCalled();
expect(actions.cancel).not.toHaveBeenCalled();
});
src/features/research/research-panel.tsx
+90 -19
View File
@@ -1,9 +1,15 @@
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";
import { ArrowUpIcon, PlusIcon, SquareIcon } from "lucide-react";
import { ArrowUpIcon, HistoryIcon, PlusIcon, SquareIcon, XIcon } from "lucide-react";
import { type ReactNode, useCallback, useEffect, useId, useRef, useState } from "react";
import { Bubble, BubbleContent } from "#/components/ui/bubble";
import { Button } from "#/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "#/components/ui/dropdown-menu";
import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "#/components/ui/empty";
import { Checkbox } from "#/components/ui/checkbox";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "#/components/ui/collapsible";
@@ -85,6 +91,11 @@ export function ResearchPanel({
});
const run = status.data?.run ?? null;
const runId = run?.id ?? null;
const closedRuns = search.closedRuns ?? [];
const history = status.data?.history ?? [];
const openChats = history.filter(
(entry) => entry.id === selectedId || !closedRuns.includes(entry.id),
);
const [draft, setDraft] = useState<ResearchDraft>({
runId,
topic: "",
@@ -276,7 +287,21 @@ export function ResearchPanel({
function selectChat(id: string) {
if (!id || id === run?.id) return;
setSearch({ run: id, citation: undefined });
const remaining = closedRuns.filter((closed) => closed !== id);
setSearch({
run: id,
citation: undefined,
closedRuns: remaining.length ? remaining : undefined,
});
}
function closeChat(id: string) {
const index = openChats.findIndex((entry) => entry.id === id);
const next = openChats[index + 1] ?? openChats[index - 1];
setSearch({
closedRuns: [...closedRuns.filter((closed) => closed !== id), id],
...(id === selectedId ? { run: next?.id ?? "new", citation: undefined } : {}),
});
}
async function openDeck(deck: Deck) {
@@ -297,23 +322,38 @@ export function ResearchPanel({
data-testid="research-history"
className="flex h-12 min-w-0 shrink-0 items-stretch border-b bg-sidebar"
>
<div className="flex min-w-0 flex-1 items-end gap-1 overflow-x-auto px-2 pt-2">
{status.data?.history?.map((entry) => (
<Button
key={entry.id}
type="button"
variant="tab"
size="tab"
aria-current={entry.id === selectedId ? "page" : undefined}
title={entry.title}
disabled={busy}
onClick={() => {
selectChat(entry.id);
onSelect?.();
}}
>
<span className="truncate">{entry.title}</span>
</Button>
<div className="flex min-w-0 flex-1 items-end gap-1 overflow-x-auto px-2 pt-1">
{openChats.map((entry) => (
<div key={entry.id} className="relative shrink-0">
<Button
type="button"
variant="tab"
motion="none"
size="tab"
aria-current={entry.id === selectedId ? "page" : undefined}
title={entry.title}
disabled={busy}
onClick={() => {
selectChat(entry.id);
onSelect?.();
}}
>
<span className="truncate">{entry.title}</span>
</Button>
<Button
type="button"
variant="ghost"
motion="none"
size="icon-xs"
className="absolute top-2 right-1"
aria-label={`Close ${entry.title}`}
title="Close tab"
disabled={busy}
onClick={() => closeChat(entry.id)}
>
<XIcon />
</Button>
</div>
))}
{!selectedId && (
<span
@@ -329,6 +369,7 @@ export function ResearchPanel({
size="icon"
type="button"
className="mx-2 self-center"
motion="none"
aria-label="New chat"
title="New chat"
disabled={busy || !run}
@@ -339,6 +380,36 @@ export function ResearchPanel({
>
<PlusIcon />
</Button>
<DropdownMenu>
<DropdownMenuTrigger
render={
<Button
variant="ghost"
motion="none"
size="icon"
className="mr-2 self-center"
aria-label="Open chat history"
title="Chat history"
disabled={busy || history.length === 0}
/>
}
>
<HistoryIcon />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-64">
{history.map((entry) => (
<DropdownMenuItem
key={entry.id}
onClick={() => {
selectChat(entry.id);
onSelect?.();
}}
>
<span className="truncate">{entry.title}</span>
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</nav>
);