Add basic tabs to the V3 workspace page

apps/desktop/src/components/StackTabs.svelte

@@ -0,0 +1,54 @@
+<script module>
+</script>
+
+<script lang="ts">
+	import { StackService } from '$lib/stacks/stackService.svelte';
+	import { getContext } from '@gitbutler/shared/context';
+	import type { Tab } from '$lib/tabs/tab';
+
+	type Props = {
+		projectId: string;
+		selectedId: string | undefined;
+		tabs: Tab[];
+	};
+	const { projectId, selectedId, tabs }: Props = $props();
+	const stackService = getContext(StackService);
+</script>
+
+<div class="tabs">
+	{#each tabs as tab, i (tab.name)}
+		{@const first = i === 0}
+		{@const last = i === tabs.length - 1}
+		<div class="tab" class:first class:last class:selected={tab.id === selectedId}>
+			{tab.name}
+		</div>
+	{/each}
+	<button type="button" class="new-stack" onclick={() => stackService.new(projectId)}>+</button>
+</div>
+
+<style lang="postcss">
+	.tabs {
+		display: flex;
+	}
+
+	.tab {
+		padding: 12px 14px;
+		background: var(--clr-stack-tab-inactive);
+		border: 1px solid var(--clr-border-2);
+		border-right: none;
+		&.first {
+			border-radius: 10px 0 0 0;
+		}
+	}
+
+	.new-stack {
+		border: 1px solid var(--clr-border-2);
+		border-radius: 0 10px 0 0;
+		padding: 14px 20px;
+	}
+
+	.selected {
+		background-color: cadetblue;
+		background: var(--clr-stack-tab-active);
+	}
+</style>

apps/desktop/src/components/StackView.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import StackTabs from './StackTabs.svelte';
+	import { DesktopRedux } from '$lib/redux/store.svelte';
+	import { stacksToTabs } from '$lib/tabs/mapping';
+	import { getContext } from '@gitbutler/shared/context';
+	import { StackService } from '$lib/stacks/stackService.svelte';
+
+	const { projectId, stackId }: { projectId: string; stackId?: string } = $props();
+
+	const stackService = getContext(StackService);
+	const desktopState = getContext(DesktopRedux);
+	const rootState = $derived(desktopState.rootState$);
+
+	stackService.poll(projectId);
+
+	const { data: stacks } = $derived(stackService.select(projectId)(rootState));
+	const tabs = $derived(stacksToTabs(stacks));
+	$inspect(rootState);
+</script>
+
+<StackTabs {projectId} {tabs} selectedId={stackId} />

apps/desktop/src/lib/tabs/mapping.ts

@@ -0,0 +1,15 @@
+import type { Stack } from '$lib/stacks/stack';
+import type { Tab } from './tab';
+
+export function stacksToTabs(stacks: Stack[] | undefined): Tab[] {
+	if (!stacks) {
+		return [];
+	}
+	return stacks.map((stack) => {
+		return {
+			id: stack.id,
+			name: stack.branchNames[0] || 'new branch',
+			anchors: stack.branchNames.slice(1)
+		};
+	});
+}

apps/desktop/src/lib/tabs/tab.ts

@@ -0,0 +1,5 @@
+export type Tab = {
+	id: string;
+	name: string;
+	anchors: string[];
+};

apps/desktop/src/routes/+layout.svelte

@@ -65,6 +65,7 @@
 	import { goto } from '$app/navigation';
 	import { beforeNavigate, afterNavigate } from '$app/navigation';
 	import { env } from '$env/dynamic/public';
+	import { StackService } from '$lib/stacks/stackService.svelte';
 
 	const { data, children }: { data: LayoutData; children: Snippet } = $props();
 
@@ -73,6 +74,7 @@
 
 	const appState = new AppState();
 	const desktopState = new DesktopRedux(data.tauri);
+	const stackService = new StackService(desktopState);
 	const feedService = new FeedService(data.cloud, appState.appDispatch);
 	const organizationService = new OrganizationService(data.cloud, appState.appDispatch);
 	const cloudUserService = new CloudUserService(data.cloud, appState.appDispatch);
@@ -119,6 +121,7 @@
 	setContext(StackingLineManagerFactory, data.stackingLineManagerFactory);
 	setContext(AppSettings, data.appSettings);
 	setContext(GitHubAuthenticationService, data.githubAuthenticationService);
+	setContext(StackService, stackService);
 
 	setNameNormalizationServiceContext(new IpcNameNormalizationService(invoke));
 

apps/desktop/src/routes/[projectId]/workspace/[[branchId]]/+page.svelte → apps/desktop/src/routes/[projectId]/workspace/[[stackId]]/+page.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
+	import StackView from '$components/StackView.svelte';
 	import { SettingsService } from '$lib/config/appSettingsV2';
 	import { getContext } from '@gitbutler/shared/context';
-	import type { LayoutData } from '../../$types';
+	import type { PageData } from './$types';
 	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
 
 	const settingsService = getContext(SettingsService);
 	const settingsStore = settingsService.appSettings;
 
-	const { data }: { data: LayoutData } = $props();
+	const { data }: { data: PageData } = $props();
 
 	// Redirect to board if we have switched away from V3 feature.
 	$effect(() => {
@@ -17,4 +19,4 @@
 	});
 </script>
 
-<div>Workspace Page</div>
+<StackView projectId={data.projectId} stackId={page.params.stackId} />