From 7099a5fda1eb64f266c6e81e39ef48afc6a7bd35 Mon Sep 17 00:00:00 2001
From: Mattias Granlund <mtsgrd@gmail.com>
Date: Wed, 22 Jan 2025 16:20:30 +0100
Subject: [PATCH] Add basic tabs to the V3 workspace page

---
 apps/desktop/src/components/StackTabs.svelte  | 60 +++++++++++++++++++
 apps/desktop/src/lib/routes/routes.svelte.ts  |  2 +-
 apps/desktop/src/lib/tabs/mapping.ts          | 15 +++++
 apps/desktop/src/lib/tabs/tab.ts              |  5 ++
 apps/desktop/src/routes/+layout.svelte        |  3 +
 .../+page.svelte                              | 47 ++++++++-------
 6 files changed, 111 insertions(+), 21 deletions(-)
 create mode 100644 apps/desktop/src/components/StackTabs.svelte
 create mode 100644 apps/desktop/src/lib/tabs/mapping.ts
 create mode 100644 apps/desktop/src/lib/tabs/tab.ts
 rename apps/desktop/src/routes/[projectId]/workspace/{[[branchId]] => [[stackId]]}/+page.svelte (84%)

diff --git a/apps/desktop/src/components/StackTabs.svelte b/apps/desktop/src/components/StackTabs.svelte
new file mode 100644
index 0000000000..7224f5cdc0
--- /dev/null
+++ b/apps/desktop/src/components/StackTabs.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { DesktopRedux } from '$lib/redux/store.svelte';
+	import { StackService } from '$lib/stacks/stackService.svelte';
+	import { stacksToTabs } from '$lib/tabs/mapping';
+	import { getContext } from '@gitbutler/shared/context';
+
+	type Props = {
+		projectId: string;
+		selectedId: string | undefined;
+	};
+	const { projectId, selectedId }: Props = $props();
+
+	const stackService = getContext(StackService);
+	const redux = getContext(DesktopRedux);
+
+	const { data: stacks } = $derived(stackService.select(projectId)(redux.rootState$));
+	const tabs = $derived(stacksToTabs(stacks));
+
+	stackService.poll(projectId);
+</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;
+		border-bottom: none;
+		&.first {
+			border-radius: 10px 0 0 0;
+		}
+	}
+
+	.new-stack {
+		border: 1px solid var(--clr-border-2);
+		border-bottom: none;
+		border-radius: 0 10px 0 0;
+		padding: 14px 20px;
+	}
+
+	.selected {
+		background-color: cadetblue;
+		background: var(--clr-stack-tab-active);
+	}
+</style>
diff --git a/apps/desktop/src/lib/routes/routes.svelte.ts b/apps/desktop/src/lib/routes/routes.svelte.ts
index 51d7c79107..b12b66f98e 100644
--- a/apps/desktop/src/lib/routes/routes.svelte.ts
+++ b/apps/desktop/src/lib/routes/routes.svelte.ts
@@ -22,7 +22,7 @@ export class DesktopRoutesService {
 		return `/${projectId}/workspace`;
 	}
 	isWorkspacePath = $derived(
-		isUrl<{ projectId: string; branchId?: string }>('/[projectId]/workspace/[[branchId]]')
+		isUrl<{ projectId: string; branchId?: string }>('/[projectId]/workspace/[[stackId]]')
 	);
 
 	branchesPath(projectId: string) {
diff --git a/apps/desktop/src/lib/tabs/mapping.ts b/apps/desktop/src/lib/tabs/mapping.ts
new file mode 100644
index 0000000000..c8b78ae711
--- /dev/null
+++ b/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)
+		};
+	});
+}
diff --git a/apps/desktop/src/lib/tabs/tab.ts b/apps/desktop/src/lib/tabs/tab.ts
new file mode 100644
index 0000000000..46cf8c7a15
--- /dev/null
+++ b/apps/desktop/src/lib/tabs/tab.ts
@@ -0,0 +1,5 @@
+export type Tab = {
+	id: string;
+	name: string;
+	anchors: string[];
+};
diff --git a/apps/desktop/src/routes/+layout.svelte b/apps/desktop/src/routes/+layout.svelte
index 38350cb191..e70722b95f 100644
--- a/apps/desktop/src/routes/+layout.svelte
+++ b/apps/desktop/src/routes/+layout.svelte
@@ -38,6 +38,7 @@
 	import { DesktopRoutesService } from '$lib/routes/routes.svelte';
 	import { setSecretsService } from '$lib/secrets/secretsService';
 	import { SETTINGS, loadUserSettings } from '$lib/settings/userSettings';
+	import { StackService } from '$lib/stacks/stackService.svelte';
 	import { UpdaterService } from '$lib/updater/updater';
 	import { User } from '$lib/user/user';
 	import { UserService } from '$lib/user/userService';
@@ -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));
 
diff --git a/apps/desktop/src/routes/[projectId]/workspace/[[branchId]]/+page.svelte b/apps/desktop/src/routes/[projectId]/workspace/[[stackId]]/+page.svelte
similarity index 84%
rename from apps/desktop/src/routes/[projectId]/workspace/[[branchId]]/+page.svelte
rename to apps/desktop/src/routes/[projectId]/workspace/[[stackId]]/+page.svelte
index 87fb97b953..a0098e3e79 100644
--- a/apps/desktop/src/routes/[projectId]/workspace/[[branchId]]/+page.svelte
+++ b/apps/desktop/src/routes/[projectId]/workspace/[[stackId]]/+page.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
+	import StackTabs from '$components/StackTabs.svelte';
 	import { SettingsService } from '$lib/config/appSettingsV2';
 	import { getContext } from '@gitbutler/shared/context';
 	import Button from '@gitbutler/ui/Button.svelte';
-	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();
+	const projectId = $derived(data.projectId);
+	const stackId = $derived(page.params.stackId);
 
 	// Redirect to board if we have switched away from V3 feature.
 	$effect(() => {
@@ -18,14 +22,14 @@
 	});
 </script>
 
-<section>
-	<div class="sidebar">
-		<div class="sidebar-header">
+<div class="workspace">
+	<div class="left">
+		<div class="left-header">
 			<div class="text-14 text-semibold">Uncommitted changes</div>
 			<Button kind="ghost" icon="sidebar-unfold" />
 		</div>
 
-		<div class="sidebar-body">
+		<div class="left-body">
 			<svg
 				width="120"
 				height="100"
@@ -72,11 +76,14 @@
 			</div>
 		</div>
 	</div>
-	<div class="content">Tab Area</div>
-</section>
+	<div class="right">
+		<StackTabs {projectId} selectedId={stackId} />
+		<div class="branch"></div>
+	</div>
+</div>
 
 <style>
-	section {
+	.workspace {
 		display: flex;
 		flex: 1;
 		align-items: stretch;
@@ -86,7 +93,7 @@
 		gap: 14px;
 	}
 
-	.sidebar {
+	.left {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -97,7 +104,7 @@
 		border: 1px solid var(--clr-border-2);
 	}
 
-	.sidebar-header {
+	.left-header {
 		width: 100%;
 		display: flex;
 		align-items: center;
@@ -105,7 +112,7 @@
 		padding: 10px 8px 10px 14px;
 	}
 
-	.sidebar-body {
+	.left-body {
 		flex: 1;
 		display: flex;
 		flex-direction: column;
@@ -113,16 +120,16 @@
 		justify-content: center;
 	}
 
-	.content {
+	.right {
+		display: flex;
 		flex: 1;
-		padding: 8px;
-		border: 1px solid var(--clr-border-2);
-		border-radius: var(--radius-ml);
+		flex-direction: column;
+	}
 
-		background-color: #f3f3f2;
-		opacity: 0.4;
-		background-image: radial-gradient(#867e79 0.35000000000000003px, #f3f3f2 0.35000000000000003px);
-		background-size: 7px 7px;
+	.branch {
+		border: 1px solid var(--clr-border-2);
+		flex: 1;
+		border-radius: 0 var(--radius-ml) var(--radius-ml);
 	}
 
 	.helper-text {