Add draft mechanism for codegen

Extend the StackDraft component to also handle draft codegen sessions, 
using the message queue in order to facilitate sending the first 
message.

Author: mtsgrd

apps/desktop/src/components/ChromeHeader.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import CreateBranchModal from '$components/CreateBranchModal.svelte';
 	import IntegrateUpstreamModal from '$components/IntegrateUpstreamModal.svelte';
 	import SyncButton from '$components/SyncButton.svelte';
 	import { BACKEND } from '$lib/backend';
@@ -11,9 +12,13 @@
 	import { handleAddProjectOutcome } from '$lib/project/project';
 	import { PROJECTS_SERVICE } from '$lib/project/projectsService';
 	import { ircPath, projectPath } from '$lib/routes/routes.svelte';
+	import { UI_STATE } from '$lib/state/uiState.svelte';
 	import { inject } from '@gitbutler/core/context';
 	import {
 		Button,
+		ContextMenu,
+		ContextMenuItem,
+		ContextMenuSection,
 		Icon,
 		NotificationButton,
 		OptionsGroup,
@@ -36,6 +41,7 @@
 	const baseBranchService = inject(BASE_BRANCH_SERVICE);
 	const ircService = inject(IRC_SERVICE);
 	const settingsService = inject(SETTINGS_SERVICE);
+	const uiState = inject(UI_STATE);
 	const modeService = inject(MODE_SERVICE);
 	const baseReponse = $derived(projectId ? baseBranchService.baseBranch(projectId) : undefined);
 	const base = $derived(baseReponse?.response);
@@ -75,6 +81,8 @@
 	const isHasUpstreamCommits = $derived(upstreamCommits > 0);
 
 	let modal = $state<ReturnType<typeof IntegrateUpstreamModal>>();
+	let createNewContextMenu = $state<ContextMenu>();
+	let createNewTrigger = $state<HTMLButtonElement>();
 
 	const projects = $derived(projectsService.projects());
 
@@ -93,6 +101,8 @@
 	function openModal() {
 		modal?.show();
 	}
+
+	let createBranchModal = $state<CreateBranchModal>();
 </script>
 
 {#if projectId}
@@ -243,9 +253,38 @@
 				}}
 			/>
 		{/if}
+		<Button
+			bind:el={createNewTrigger}
+			kind="ghost"
+			icon="plus-small"
+			onclick={() => createNewContextMenu?.toggle()}
+		>
+			Create new
+		</Button>
 	</div>
 </div>
 
+<ContextMenu bind:this={createNewContextMenu} leftClickTrigger={createNewTrigger}>
+	<ContextMenuSection>
+		<ContextMenuItem
+			label="Branch"
+			onclick={() => {
+				createBranchModal?.show();
+				createNewContextMenu?.close();
+			}}
+		/>
+		<ContextMenuItem
+			label="Codegen session"
+			onclick={() => {
+				uiState.project(projectId).exclusiveAction.set({ type: 'codegen' });
+				createNewContextMenu?.close();
+			}}
+		/>
+	</ContextMenuSection>
+</ContextMenu>
+
+<CreateBranchModal bind:this={createBranchModal} {projectId} />
+
 <style>
 	.chrome-header {
 		display: flex;

apps/desktop/src/components/CodegenRow.svelte

@@ -63,9 +63,9 @@
 	}
 
 	const handlers = $derived([
-		new CodegenCommitDropHandler(stackId, branchName, addAttachment),
+		new CodegenCommitDropHandler(stackId, addAttachment),
 		new CodegenFileDropHandler(stackId, branchName, addAttachment),
-		new CodegenHunkDropHandler(stackId, branchName, addAttachment)
+		new CodegenHunkDropHandler(stackId, addAttachment)
 	]);
 
 	function toggleSelection() {

apps/desktop/src/components/MultiStackView.svelte

@@ -61,9 +61,9 @@
 
 	const projectState = $derived(uiState.project(projectId));
 	const exclusiveAction = $derived(projectState.exclusiveAction.current);
-	const isCommitting = $derived(exclusiveAction?.type === 'commit');
 	const isDraftStackVisible = $derived(
-		isCommitting && exclusiveAction?.type === 'commit' && exclusiveAction?.stackId === undefined
+		(exclusiveAction?.type === 'commit' && exclusiveAction.stackId === undefined) ||
+			exclusiveAction?.type === 'codegen'
 	);
 
 	const SHOW_PAGINATION_THRESHOLD = 1;
@@ -174,7 +174,11 @@
 	}}
 >
 	<div class="lanes-scrollable">
-		<StackDraft {projectId} visible={isDraftStackVisible} />
+		<StackDraft
+			{projectId}
+			visible={isDraftStackVisible}
+			mode={exclusiveAction?.type === 'codegen' ? 'codegen' : 'commit'}
+		/>
 
 		<!--
 	Ideally we wouldn't key on stack id, but the opacity change is done on the

apps/desktop/src/components/ReduxResult.svelte

@@ -24,6 +24,7 @@
 		result: Result<A> | undefined;
 		children: Snippet<[A, Env<B, C>]>;
 		loading?: Snippet<[A | undefined]>;
+		hideError?: boolean;
 		error?: Snippet<[unknown]>;
 		empty?: Snippet<[]>;
 		onerror?: (err: unknown) => void;
@@ -94,16 +95,16 @@
 {/snippet}
 
 {#if display.result?.error}
-	{@const error = display.result.error}
-	{@render errorComponent(error)}
+	{#if !props.hideError}
+		{@const error = display.result.error}
+		{@render errorComponent(error)}
+	{/if}
 {:else if display.result?.data !== undefined}
 	{@render props.children(display.result.data, display.env)}
 {:else if display.result?.status === 'pending' || display.result?.status === 'uninitialized'}
 	{@render loadingComponent(display.result.data, display.result.status)}
 {:else if display.result?.status === 'fulfilled'}
 	{@render props.empty?.()}
-{:else}
-	what
 {/if}
 
 <style>