From 2e80404e5e53b21aa6608ca748bc9d206f33645a Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 8 Apr 2023 13:20:46 +0200
Subject: [PATCH] allow back navigation for home tabs

---
 .../src/lib/components/common/tabs/Tab.svelte | 10 +++++++--
 .../lib/components/common/tabs/Tabs.svelte    | 22 ++++++++++++++++++-
 .../src/routes/(root)/(logged)/+page.svelte   |  4 ++--
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/common/tabs/Tab.svelte b/frontend/src/lib/components/common/tabs/Tab.svelte
index 16d1cdc869..900cddd0dd 100644
--- a/frontend/src/lib/components/common/tabs/Tab.svelte
+++ b/frontend/src/lib/components/common/tabs/Tab.svelte
@@ -19,7 +19,7 @@
 		xl: 'text-xl'
 	}
 
-	const { selected, update } = getContext<TabsContext>('Tabs')
+	const { selected, update, hashNavigation } = getContext<TabsContext>('Tabs')
 </script>
 
 <button
@@ -33,7 +33,13 @@
 		$selected?.startsWith(value) ? selectedClass : ''
 	)}
 	style={`${style} ${$selected?.startsWith(value) ? selectedStyle : ''}`}
-	on:click={() => update(value)}
+	on:click={() => {
+		if (hashNavigation) {
+			window.location.hash = value
+		} else {
+			update(value)
+		}
+	}}
 	on:pointerdown|stopPropagation
 >
 	<slot />
diff --git a/frontend/src/lib/components/common/tabs/Tabs.svelte b/frontend/src/lib/components/common/tabs/Tabs.svelte
index 95a4427817..228b6c2c7b 100644
--- a/frontend/src/lib/components/common/tabs/Tabs.svelte
+++ b/frontend/src/lib/components/common/tabs/Tabs.svelte
@@ -2,6 +2,7 @@
 	export type TabsContext = {
 		selected: Writable<string>
 		update: (value: string) => void
+		hashNavigation: boolean
 	}
 </script>
 
@@ -18,6 +19,8 @@
 	export { c as class }
 	export let wrapperClass = ''
 	export let style = ''
+	export let hashNavigation = false
+	export let dflt: string | undefined = undefined
 
 	$: selected && updateSelected()
 
@@ -30,14 +33,31 @@
 		update: (value: string) => {
 			selectedStore.set(value)
 			selected = value
-		}
+		},
+		hashNavigation
 	})
 
 	function updateSelected() {
 		selectedStore.set(selected)
 	}
+
+	function hashChange() {
+		if (hashNavigation) {
+			const hash = window.location.hash
+			if (hash) {
+				const id = hash.replace('#', '')
+				selectedStore.set(id)
+				selected = id
+			} else if (dflt) {
+				selectedStore.set(dflt)
+				selected = dflt
+			}
+		}
+	}
 </script>
 
+<svelte:window on:hashchange={hashChange} />
+
 <div class="overflow-x-auto {wrapperClass}">
 	<div
 		class={twMerge('border-b border-gray-200 flex flex-row whitespace-nowrap  scrollbar-hidden', c)}
diff --git a/frontend/src/routes/(root)/(logged)/+page.svelte b/frontend/src/routes/(root)/(logged)/+page.svelte
index 2ea23310b8..1e30ab8a07 100644
--- a/frontend/src/routes/(root)/(logged)/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/+page.svelte
@@ -161,7 +161,7 @@
 					isEditor={false}
 					context={{
 						username: $userStore?.username ?? 'anonymous',
-						email: $userStore?.email ?? 'anonymous',
+						email: $userStore?.email ?? 'anonymous'
 					}}
 					summary={appViewerApp?.app.summary ?? ''}
 					noBackend
@@ -194,7 +194,7 @@
 
 		{#if !$userStore?.operator}
 			<div class="w-full overflow-auto scrollbar-hidden">
-				<Tabs bind:selected={tab}>
+				<Tabs dflt="workspace" hashNavigation bind:selected={tab}>
 					<Tab size="md" value="workspace">
 						<div class="flex gap-2 items-center my-1">
 							<Building size={18} />