feat: add terminal toggle button to chat header (#633)

ANTI committed 7 months ago

Commit be1abc81 parent 384f3502 files · +41 −1Browse files

Unified · Split

2 files

apps/web/src/components/ChatView.tsx +8 −0
apps/web/src/components/chat/ChatHeader.tsx +33 −1

apps/web/src/components/ChatView.tsx+8−0

@@ -1119,6 +1119,10 @@ export default function ChatView({ threadId }: ChatViewProps) { · 1118 unmodified lines
1119	1119	}, [activeProjectCwd, activeThreadWorktreePath]);
1120	1120	// Default true while loading to avoid toolbar flicker.
1121	1121	const isGitRepo = branchesQuery.data?.isRepo ?? true;
	1122	+ const terminalToggleShortcutLabel = useMemo(
	1123	+ () => shortcutLabelForCommand(keybindings, "terminal.toggle"),
	1124	+ [keybindings],
	1125	+ );
1122	1126	const splitTerminalShortcutLabel = useMemo(
1123	1127	() => shortcutLabelForCommand(keybindings, "terminal.split"),
1124	1128	[keybindings],
@@ -3474,6 +3478,9 @@ export default function ChatView({ threadId }: ChatViewProps) { · 2349 unmodified lines
3474	3478	}
3475	3479	keybindings={keybindings}
3476	3480	availableEditors={availableEditors}
	3481	+ terminalAvailable={activeProject !== undefined}
	3482	+ terminalOpen={terminalState.terminalOpen}
	3483	+ terminalToggleShortcutLabel={terminalToggleShortcutLabel}
3477	3484	diffToggleShortcutLabel={diffPanelShortcutLabel}
3478	3485	gitCwd={gitCwd}
3479	3486	diffOpen={diffOpen}
@@ -3483,6 +3490,7 @@ export default function ChatView({ threadId }: ChatViewProps) { · 3 unmodified lines
3483	3490	onAddProjectScript={saveProjectScript}
3484	3491	onUpdateProjectScript={updateProjectScript}
3485	3492	onDeleteProjectScript={deleteProjectScript}
	3493	+ onToggleTerminal={toggleTerminalVisibility}
3486	3494	onToggleDiff={onToggleDiff}
3487	3495	/>
3488	3496	</header>

apps/web/src/components/chat/ChatHeader.tsx+33−1

@@ -6,7 +6,7 @@ import { · 5 unmodified lines
6	6	} from "@t3tools/contracts";
7	7	import { memo } from "react";
8	8	import GitActionsControl from "../GitActionsControl";
9		−import { DiffIcon } from "lucide-react";
	9	+import { DiffIcon, TerminalSquareIcon } from "lucide-react";
10	10	import { Badge } from "../ui/badge";
11	11	import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
12	12	import ProjectScriptsControl, { type NewProjectScriptInput } from "../ProjectScriptsControl";
@@ -24,6 +24,9 @@ interface ChatHeaderProps { · 11 unmodified lines
24	24	preferredScriptId: string \| null;
25	25	keybindings: ResolvedKeybindingsConfig;
26	26	availableEditors: ReadonlyArray<EditorId>;
	27	+ terminalAvailable: boolean;
	28	+ terminalOpen: boolean;
	29	+ terminalToggleShortcutLabel: string \| null;
27	30	diffToggleShortcutLabel: string \| null;
28	31	gitCwd: string \| null;
29	32	diffOpen: boolean;
@@ -31,6 +34,7 @@ interface ChatHeaderProps { · 1 unmodified line
31	34	onAddProjectScript: (input: NewProjectScriptInput) => Promise<void>;
32	35	onUpdateProjectScript: (scriptId: string, input: NewProjectScriptInput) => Promise<void>;
33	36	onDeleteProjectScript: (scriptId: string) => Promise<void>;
	37	+ onToggleTerminal: () => void;
34	38	onToggleDiff: () => void;
35	39	}
36	40
@@ -44,6 +48,9 @@ export const ChatHeader = memo(function ChatHeader({ · 7 unmodified lines
44	48	preferredScriptId,
45	49	keybindings,
46	50	availableEditors,
	51	+ terminalAvailable,
	52	+ terminalOpen,
	53	+ terminalToggleShortcutLabel,
47	54	diffToggleShortcutLabel,
48	55	gitCwd,
49	56	diffOpen,
@@ -51,6 +58,7 @@ export const ChatHeader = memo(function ChatHeader({ · 1 unmodified line
51	58	onAddProjectScript,
52	59	onUpdateProjectScript,
53	60	onDeleteProjectScript,
	61	+ onToggleTerminal,
54	62	onToggleDiff,
55	63	}: ChatHeaderProps) {
56	64	return (
@@ -94,6 +102,30 @@ export const ChatHeader = memo(function ChatHeader({ · 37 unmodified lines
94	102	/>
95	103	)}
96	104	{activeProjectName && <GitActionsControl gitCwd={gitCwd} activeThreadId={activeThreadId} />}
	105	+ <Tooltip>
	106	+ <TooltipTrigger
	107	+ render={
	108	+ <Toggle
	109	+ className="shrink-0"
	110	+ pressed={terminalOpen}
	111	+ onPressedChange={onToggleTerminal}
	112	+ aria-label="Toggle terminal drawer"
	113	+ variant="outline"
	114	+ size="xs"
	115	+ disabled={!terminalAvailable}
	116	+ >
	117	+ <TerminalSquareIcon className="size-3" />
	118	+ </Toggle>
	119	+ }
	120	+ />
	121	+ <TooltipPopup side="bottom">
	122	+ {!terminalAvailable
	123	+ ? "Terminal is unavailable until this thread has an active project."
	124	+ : terminalToggleShortcutLabel
	125	+ ? `Toggle terminal drawer (${terminalToggleShortcutLabel})`
	126	+ : "Toggle terminal drawer"}
	127	+ </TooltipPopup>
	128	+ </Tooltip>
97	129	<Tooltip>
98	130	<TooltipTrigger
99	131	render={