fix(frontend): Fix hub navigation (#2151)

* fix(frontend): Fix hub navigation

* fix(frontend): Fix hub navigation

frontend/src/lib/components/home/ItemsList.svelte

@@ -18,6 +18,7 @@
 	import { Code2, LayoutDashboard } from 'lucide-svelte'
 
 	export let filter = ''
+	export let subtab: 'flow' | 'script' | 'app' = 'script'
 
 	import AppRow from '$lib/components/common/table/AppRow.svelte'
 	import FlowRow from '$lib/components/common/table/FlowRow.svelte'
@@ -290,6 +291,9 @@
 			<ToggleButtonGroup
 				bind:selected={itemKind}
 				on:selected={() => {
+					if (itemKind != 'all') {
+						subtab = itemKind
+					}
 					setQuery($page.url, 'kind', itemKind)
 				}}
 				class="h-10"

frontend/src/lib/navigation.ts

@@ -1,10 +1,20 @@
 import { goto } from '$app/navigation'
 
-export async function setQuery(url: URL, key: string, value: string | undefined): Promise<void> {
-	if (value != undefined) {
+export async function setQuery(
+	url: URL,
+	key: string,
+	value: string | undefined,
+	currentHash: string | undefined = undefined
+): Promise<void> {
+	if (value !== undefined) {
 		url.searchParams.set(key, value)
 	} else {
 		url.searchParams.delete(key)
 	}
-	await goto(`?${url.searchParams.toString()}`)
+
+	await goto(
+		currentHash
+			? `?${url.searchParams.toString()}${currentHash}`
+			: `?${url.searchParams.toString()}`
+	)
 }

frontend/src/routes/(root)/(logged)/+page.svelte

@@ -21,6 +21,8 @@
 	import { writable } from 'svelte/store'
 	import type { EditorBreakpoint } from '$lib/components/apps/types'
 	import { HOME_SHOW_HUB, HOME_SHOW_CREATE_FLOW, HOME_SHOW_CREATE_APP } from '$lib/consts'
+	import { setQuery } from '$lib/navigation'
+	import { page } from '$app/stores'
 
 	type Tab = 'hub' | 'workspace'
 
@@ -29,7 +31,7 @@
 			? (window.location.hash?.replace('#', '') as Tab)
 			: 'workspace'
 
-	let subtab: 'flows' | 'scripts' | 'apps' = 'apps'
+	let subtab: 'flow' | 'script' | 'app' = 'app'
 
 	let filter: string = ''
 
@@ -224,46 +226,47 @@
 		<div class="flex flex-col gap-y-16">
 			<div class="flex flex-col">
 				{#if tab == 'hub'}
-					<Tabs bind:selected={subtab}>
-						<Tab size="md" value="scripts">
+					<Tabs
+						bind:selected={subtab}
+						on:selected={() => {
+							setQuery($page.url, 'kind', subtab, window.location.hash)
+						}}
+					>
+						<Tab size="md" value="script">
 							<div class="flex gap-2 items-center my-1"> Scripts </div>
 						</Tab>
-						<Tab size="md" value="flows">
+						<Tab size="md" value="flow">
 							<div class="flex gap-2 items-center my-1"> Flows </div>
 						</Tab>
-						<Tab size="md" value="apps">
+						<Tab size="md" value="app">
 							<div class="flex gap-2 items-center my-1"> Apps </div>
 						</Tab>
 					</Tabs>
 					<div class="my-2" />
 
-					{#if subtab == 'scripts'}
-						<PickHubScript syncQuery bind:filter on:pick={(e) => viewCode(e.detail)}
-							><Button
+					{#if subtab == 'script'}
+						<PickHubScript syncQuery bind:filter on:pick={(e) => viewCode(e.detail)}>
+							<Button
 								target="_blank"
 								href="https://hub.windmill.dev"
 								variant="border"
-								color="light">Go to Hub</Button
-							></PickHubScript
-						>
-					{:else if subtab == 'flows'}
-						<PickHubFlow syncQuery bind:filter on:pick={(e) => viewFlow(e.detail)}
-							><Button
-								target="_blank"
-								href="https://hub.windmill.dev"
-								variant="border"
-								color="light">Go to Hub</Button
-							></PickHubFlow
-						>
-					{:else if subtab == 'apps'}
-						<PickHubApp syncQuery bind:filter on:pick={(e) => viewApp(e.detail)}
-							><Button
-								target="_blank"
-								href="https://hub.windmill.dev"
-								variant="border"
-								color="light">Go to Hub</Button
-							></PickHubApp
-						>
+								color="light"
+							>
+								Go to Hub
+							</Button>
+						</PickHubScript>
+					{:else if subtab == 'flow'}
+						<PickHubFlow syncQuery bind:filter on:pick={(e) => viewFlow(e.detail)}>
+							<Button target="_blank" href="https://hub.windmill.dev" variant="border" color="light"
+								>Go to Hub
+							</Button>
+						</PickHubFlow>
+					{:else if subtab == 'app'}
+						<PickHubApp syncQuery bind:filter on:pick={(e) => viewApp(e.detail)}>
+							<Button target="_blank" href="https://hub.windmill.dev" variant="border" color="light"
+								>Go to Hub</Button
+							>
+						</PickHubApp>
 					{/if}
 				{/if}
 			</div>
@@ -272,5 +275,5 @@
 </div>
 
 {#if tab == 'workspace'}
-	<ItemsList bind:filter />
+	<ItemsList bind:filter bind:subtab />
 {/if}