WorkspaceWindowAddMenu.svelte

<script lang="ts">
	import MessagesSquare from '@lucide/svelte/icons/messages-square';
	import Plus from '@lucide/svelte/icons/plus';
	import {
		DropdownMenu,
		DropdownMenuContent,
		DropdownMenuItem,
		DropdownMenuLabel,
		DropdownMenuSeparator,
		DropdownMenuTrigger,
		DropdownMenuSub,
		DropdownMenuSubContent,
		DropdownMenuSubTrigger,
	} from '$lib/components/ui/dropdown-menu';
	import { getNotifications, getTerminalRegistry, getWorkspaceCoordinator } from '$lib/context';
	import {
		PORTABLE_SINGLETON_KINDS,
		singletonSurfaceId,
		terminalSurfaceId,
		type PortableSingletonKind,
		type WorkspaceWindowId,
		type WorkspaceWindowTabState,
	} from '$lib/workspace/surface-types.js';
	import WorkspaceSurfaceIcon from './WorkspaceSurfaceIcon.svelte';
	import type { WorkspaceWindowTabMeasure } from './workspace-window-add-layout.js';
	import { WorkspaceWindowAddMenuState } from './workspace-window-add-menu-state.svelte.js';
	import {
		DEFAULT_WORKSPACE_WINDOW_TITLEBAR_METRICS,
		type WorkspaceWindowTitlebarMetrics,
	} from './workspace-window-chrome.js';
	import * as m from '$lib/paraglide/messages.js';
	import TerminalCreateAction from '$lib/components/terminal/TerminalCreateAction.svelte';

	let {
		windowId,
		tabs,
		measure,
		titlebarMetrics = DEFAULT_WORKSPACE_WINDOW_TITLEBAR_METRICS,
	}: {
		windowId: WorkspaceWindowId;
		tabs: WorkspaceWindowTabState;
		measure: WorkspaceWindowTabMeasure | null;
		titlebarMetrics?: WorkspaceWindowTitlebarMetrics;
	} = $props();

	interface WorkspaceWindowAddCommand {
		readonly id: string;
		readonly kind: PortableSingletonKind;
		readonly label: string;
		readonly onclick: () => void;
	}
	type TerminalAddAction = { readonly id: 'new-terminal'; readonly kind: 'terminal' };
	type WorkspaceWindowAddAction =
		| WorkspaceWindowAddCommand
		| TerminalAddAction
		| {
				readonly id: 'chat-views';
				readonly kind: 'chat-views';
				readonly label: string;
		  };
	const CHAT_VIEW_KINDS: readonly PortableSingletonKind[] = [
		'chat-map',
		'chat-canvas',
		'chat-board',
	];

	const ADD_ACTION_CONTROL_CLASS =
		'flex shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 disabled:pointer-events-none disabled:opacity-50';

	const workspace = getWorkspaceCoordinator();
	const terminals = getTerminalRegistry();
	const notifications = getNotifications();
	let creatingTerminal = $state(false);
	let menuChoosesTerminalHost = $state(false);
	const creationExecutorId = $derived(workspace.terminalCreationExecutorIdFor(windowId));
	const unplacedTerminalSessions = $derived(
		terminals.orderedSessions.filter(
			(session) => !workspace.layout.surface(terminalSurfaceId(session.metadata.terminalId)),
		),
	);
	const availableSingletonKinds = $derived(
		PORTABLE_SINGLETON_KINDS.filter((kind) => !tabs.order.includes(singletonSurfaceId(kind))),
	);
	const singletonLabels: Record<PortableSingletonKind, () => string> = {
		git: m.workspace_surface_git_workbench,
		'git-history': m.workspace_surface_git_history,
		'git-compare': m.workspace_surface_git_compare,
		'pull-requests': m.workspace_surface_pull_requests,
		files: m.workspace_surface_files,
		commit: m.workspace_surface_commit,
		'chat-map': m.workspace_surface_chat_map,
		'chat-canvas': m.workspace_surface_chat_canvas,
		'chat-board': m.workspace_surface_chat_board,
		tickets: m.tickets_title,
	};
	const chatViewActions = $derived(
		availableSingletonKinds.filter((kind) => CHAT_VIEW_KINDS.includes(kind)).map(singletonAction),
	);
	const eligibleActions = $derived.by((): readonly WorkspaceWindowAddAction[] => [
		...availableSingletonKinds
			.filter((kind) => !CHAT_VIEW_KINDS.includes(kind))
			.map(singletonAction),
		...(chatViewActions.length > 0
			? [{ id: 'chat-views', kind: 'chat-views', label: m.workspace_chat_views() } as const]
			: []),
		{ id: 'new-terminal', kind: 'terminal' },
	]);
	const hasUnplacedTerminalSessions = $derived(unplacedTerminalSessions.length > 0);
	const menuState = new WorkspaceWindowAddMenuState({
		get windowId() {
			return windowId;
		},
		get measure() {
			return measure;
		},
		get actionIds() {
			return eligibleActions.map((action) => action.id);
		},
		get hasUnplacedTerminalSessions() {
			return hasUnplacedTerminalSessions;
		},
		get controlWidthPx() {
			return titlebarMetrics.controlSizePx;
		},
	});
	const inlineActions = $derived(eligibleActions.slice(0, menuState.inlineActionCount));
	const menuActions = $derived(eligibleActions.slice(menuState.inlineActionCount));
	const showOverflowMenu = $derived(menuActions.length > 0);

	function singletonAction(kind: PortableSingletonKind): WorkspaceWindowAddCommand {
		return {
			id: `singleton:${kind}`,
			kind,
			label: openSingletonLabel(kind),
			onclick: () => openSingleton(kind),
		};
	}

	function notifyFailure(error: unknown): void {
		notifications.error(error instanceof Error ? error.message : m.workspace_open_failed());
	}

	function addControlStyle(): string {
		return `height: ${titlebarMetrics.controlSizePx}px; width: ${titlebarMetrics.controlSizePx}px;`;
	}

	function openSingleton(kind: PortableSingletonKind): void {
		void workspace.openSingletonAsTab(kind, windowId).catch(notifyFailure);
	}

	function openSingletonLabel(kind: PortableSingletonKind): string {
		if (kind === 'git-history') return m.workspace_open_git_history();
		if (kind === 'git-compare') return m.workspace_open_git_compare();
		if (kind === 'chat-map') return m.workspace_open_chat_map();
		if (kind === 'chat-canvas') return m.workspace_open_chat_canvas();
		if (kind === 'chat-board') return m.workspace_open_chat_board();
		return m.workspace_open_surface({ surface: singletonLabels[kind]() });
	}

	async function createTerminal(executorId?: string): Promise<void> {
		if (creatingTerminal) return;
		creatingTerminal = true;
		try {
			await workspace.createTerminal(windowId, `workspace-window:${windowId}`, executorId);
		} catch (error) {
			notifications.error(error instanceof Error ? error.message : m.terminal_create_failed());
		} finally {
			creatingTerminal = false;
		}
	}

	function captureTerminalMenu(open: boolean): void {
		if (open) menuChoosesTerminalHost = terminals.hasRemoteHosts;
	}
</script>

{#snippet addActionMenuItem(action: WorkspaceWindowAddCommand | TerminalAddAction, group?: string)}
	{#if action.kind === 'terminal'}
		<TerminalCreateAction
			{terminals}
			mode="menu"
			menuChoosesHost={menuChoosesTerminalHost}
			busy={creatingTerminal}
			defaultExecutorId={creationExecutorId}
			oncreate={(executorId) => void createTerminal(executorId)}
		/>
	{:else}
		<DropdownMenuItem
			data-workspace-window-add-action={action.id}
			data-workspace-window-add-group={group}
			onSelect={action.onclick}
		>
			<WorkspaceSurfaceIcon kind={action.kind} />
			{action.label}
		</DropdownMenuItem>
	{/if}
{/snippet}

{#snippet chatViewMenuItems()}
	{#each chatViewActions as action (action.id)}
		{@render addActionMenuItem(action, 'chat-views')}
	{/each}
{/snippet}

{#snippet unplacedTerminalMenuItems()}
	<DropdownMenuLabel>{m.workspace_open_terminals()}</DropdownMenuLabel>
	{#each unplacedTerminalSessions as session (session.metadata.terminalId)}
		<DropdownMenuItem
			onSelect={() => void workspace.openTerminalSession(session.metadata.terminalId, windowId)}
		>
			<WorkspaceSurfaceIcon kind="terminal" />
			{terminals.displayName(session.metadata)}
		</DropdownMenuItem>
	{/each}
{/snippet}

<div
	bind:this={menuState.controlsElement}
	class="flex shrink-0 items-center gap-[2px]"
	data-workspace-window-add-controls={windowId}
>
	{#each inlineActions as action (action.id)}
		{#if action.kind === 'chat-views'}
			<DropdownMenu>
				<DropdownMenuTrigger
					class={ADD_ACTION_CONTROL_CLASS}
					style={addControlStyle()}
					aria-label={action.label}
					title={action.label}
					data-workspace-window-add-action={action.id}
					data-workspace-window-add-inline={action.id}
					data-workspace-window-add-chat-views-trigger={windowId}
				>
					<MessagesSquare size={titlebarMetrics.iconSizePx} />
				</DropdownMenuTrigger>
				<DropdownMenuContent
					align="end"
					class="w-64"
					data-workspace-window-add-menu={windowId}
					data-workspace-window-chat-views-menu={windowId}
					onCloseAutoFocus={(event) => menuState.handleCloseAutoFocus(event)}
				>
					{@render chatViewMenuItems()}
				</DropdownMenuContent>
			</DropdownMenu>
		{:else if action.kind === 'terminal' && hasUnplacedTerminalSessions}
			<DropdownMenu onOpenChange={captureTerminalMenu}>
				<DropdownMenuTrigger
					class={ADD_ACTION_CONTROL_CLASS}
					style={addControlStyle()}
					aria-label={m.workspace_terminal_actions()}
					title={m.workspace_terminal_actions()}
					data-workspace-window-add-action={action.id}
					data-workspace-window-add-terminal-trigger={windowId}
				>
					<WorkspaceSurfaceIcon kind="terminal" size={titlebarMetrics.iconSizePx} />
				</DropdownMenuTrigger>
				<DropdownMenuContent
					align="end"
					class="w-64"
					data-workspace-window-add-menu={windowId}
					data-workspace-window-add-terminal-menu={windowId}
					onCloseAutoFocus={(event) => menuState.handleCloseAutoFocus(event)}
				>
					{@render addActionMenuItem(action)}
					<DropdownMenuSeparator />
					{@render unplacedTerminalMenuItems()}
				</DropdownMenuContent>
			</DropdownMenu>
		{:else if action.kind === 'terminal'}
			<TerminalCreateAction
				{terminals}
				{windowId}
				busy={creatingTerminal}
				defaultExecutorId={creationExecutorId}
				controlClass={ADD_ACTION_CONTROL_CLASS}
				controlStyle={addControlStyle()}
				oncreate={(executorId) => void createTerminal(executorId)}
			/>
		{:else}
			<button
				type="button"
				class={ADD_ACTION_CONTROL_CLASS}
				style={addControlStyle()}
				aria-label={action.label}
				title={action.label}
				data-workspace-window-add-action={action.id}
				data-workspace-window-add-inline={action.id}
				onclick={action.onclick}
			>
				<WorkspaceSurfaceIcon kind={action.kind} size={titlebarMetrics.iconSizePx} />
			</button>
		{/if}
	{/each}
	{#if showOverflowMenu}
		<DropdownMenu bind:open={menuState.overflowMenuOpen} onOpenChange={captureTerminalMenu}>
			<DropdownMenuTrigger
				class={ADD_ACTION_CONTROL_CLASS}
				style={addControlStyle()}
				aria-label={m.workspace_add_to_window()}
				title={m.workspace_add_to_window()}
				data-workspace-window-add-trigger={windowId}
			>
				<Plus size={titlebarMetrics.iconSizePx} />
			</DropdownMenuTrigger>
			<DropdownMenuContent
				bind:ref={menuState.overflowMenuContent}
				align="end"
				class="w-64"
				data-workspace-window-add-menu={windowId}
				onOpenAutoFocus={(event) => menuState.handleOpenAutoFocus(event)}
				onCloseAutoFocus={(event) => menuState.handleCloseAutoFocus(event)}
			>
				{#each menuActions as action (action.id)}
					{#if action.kind === 'chat-views'}
						<DropdownMenuSub>
							<DropdownMenuSubTrigger data-workspace-window-add-action={action.id}>
								<MessagesSquare />
								{action.label}
							</DropdownMenuSubTrigger>
							<DropdownMenuSubContent
								class="w-64"
								data-workspace-window-add-menu={windowId}
								data-workspace-window-chat-views-menu={windowId}
							>
								{@render chatViewMenuItems()}
							</DropdownMenuSubContent>
						</DropdownMenuSub>
					{:else}
						{@render addActionMenuItem(action)}
					{/if}
				{/each}
				{#if hasUnplacedTerminalSessions}
					<DropdownMenuSeparator />
					{@render unplacedTerminalMenuItems()}
				{/if}
			</DropdownMenuContent>
		</DropdownMenu>
	{/if}
</div>