From 697d241adf47d848473622e5c4c4befd001844d9 Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Wed, 5 Nov 2025 21:40:33 +1030
Subject: [PATCH] feat(tabs): enhance tab navigation with back button support
 and layout adjustments

---
 src/lib/client/ui/navigation/tabs/Tabs.svelte | 51 +++++++++++++------
 1 file changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/lib/client/ui/navigation/tabs/Tabs.svelte b/src/lib/client/ui/navigation/tabs/Tabs.svelte
index ef5aab3..4fa0fd5 100644
--- a/src/lib/client/ui/navigation/tabs/Tabs.svelte
+++ b/src/lib/client/ui/navigation/tabs/Tabs.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { ComponentType } from 'svelte';
+	import { ArrowLeft } from 'lucide-svelte';
 
 	interface Tab {
 		label: string;
@@ -8,26 +9,44 @@
 		icon?: ComponentType;
 	}
 
+	interface BackButton {
+		label: string;
+		href: string;
+	}
+
 	export let tabs: Tab[] = [];
+	export let backButton: BackButton | undefined = undefined;
 </script>
 
 <div class="border-b border-neutral-200 dark:border-neutral-800">
-	<nav class="-mb-px flex gap-2" aria-label="Tabs">
-		{#each tabs as tab (tab.href)}
-			<a
-				href={tab.href}
-				class="flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium transition-colors {tab.active
-					? 'border-blue-600 text-blue-600 dark:border-blue-500 dark:text-blue-500'
-					: 'border-transparent text-neutral-600 hover:border-neutral-300 hover:text-neutral-900 dark:text-neutral-400 dark:hover:border-neutral-700 dark:hover:text-neutral-50'}"
-			>
-				{#if tab.icon}
-					<svelte:component this={tab.icon} size={16} />
-				{/if}
-				{tab.label}
-			</a>
-		{/each}
+	<nav class="-mb-px flex items-center justify-between gap-2" aria-label="Tabs">
+		<div class="flex gap-2">
+			{#each tabs as tab (tab.href)}
+				<a
+					href={tab.href}
+					class="flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium transition-colors {tab.active
+						? 'border-blue-600 text-blue-600 dark:border-blue-500 dark:text-blue-500'
+						: 'border-transparent text-neutral-600 hover:border-neutral-300 hover:text-neutral-900 dark:text-neutral-400 dark:hover:border-neutral-700 dark:hover:text-neutral-50'}"
+				>
+					{#if tab.icon}
+						<svelte:component this={tab.icon} size={16} />
+					{/if}
+					{tab.label}
+				</a>
+			{/each}
 
-		<!-- Actions slot for custom action tabs (like Add Instance) -->
-		<slot name="actions" />
+			<!-- Actions slot for custom action tabs (like Add Instance) -->
+			<slot name="actions" />
+		</div>
+
+		{#if backButton}
+			<a
+				href={backButton.href}
+				class="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
+			>
+				<ArrowLeft size={14} />
+				{backButton.label}
+			</a>
+		{/if}
 	</nav>
 </div>