From e4a239bb2c90fba51754608e72b0a6b039c459d2 Mon Sep 17 00:00:00 2001
From: Eli Kogan-Wang <elikowa@gmail.com>
Date: Fri, 19 Jul 2024 18:09:48 +0200
Subject: [PATCH] refactor

---
 frontend/src/lib/Config.svelte                |   0
 frontend/src/lib/EditStringModal.svelte       |  28 ----
 frontend/src/lib/History.svelte               |   0
 frontend/src/lib/Logo.svelte                  |  12 --
 frontend/src/lib/ModuleCard.svelte            |  30 ----
 frontend/src/lib/Modules.svelte               |   0
 .../lib/{ => components}/DeployActions.svelte |   5 +-
 .../lib/{ => components}/DeployModal.svelte   |   2 +-
 .../{ => components}/TableBodyEditCell.svelte |   0
 frontend/src/lib/config/ModuleList.svelte     |  87 ++++++-----
 frontend/src/lib/deviceSelectHelper.ts        |  89 -----------
 frontend/src/lib/modules.ts                   |  48 ------
 .../lib/{ => navbar}/LanguageSelect.svelte    |   0
 .../src/{routes => lib/navbar}/Navbar.svelte  |   7 +-
 frontend/src/lib/{ => navbar}/UserMenu.svelte |   0
 frontend/src/lib/searchParamHelpers.ts        |  51 +++++++
 frontend/src/lib/{ => sever}/native.ts        |   0
 .../src/lib/{ => sidebar}/BuildStatus.svelte  |   2 +-
 .../GlobalNavSelect.svelte}                   |  22 ++-
 .../{routes => lib/sidebar}/Sidebar.svelte    |  24 +--
 frontend/src/lib/state.ts                     |  63 ++++++--
 frontend/src/routes/+layout.svelte            |  29 +++-
 frontend/src/routes/+layout.ts                |   2 +-
 .../src/routes/config-overview/+page.svelte   | 100 ------------
 frontend/src/routes/config/+page.svelte       | 142 ++++++++++--------
 frontend/src/routes/devices/+page.svelte      |  19 ++-
 .../devices}/CreateDeviceModal.svelte         |   8 +-
 .../devices}/EditTagModal.svelte              |   0
 .../devices}/InstallationStepper.svelte       |   4 +-
 frontend/src/routes/overview/+page.svelte     |   5 +-
 frontend/src/routes/settings/+page.svelte     |  29 ++--
 frontend/src/routes/vnc/+page.svelte          |   6 +-
 32 files changed, 330 insertions(+), 484 deletions(-)
 delete mode 100644 frontend/src/lib/Config.svelte
 delete mode 100644 frontend/src/lib/EditStringModal.svelte
 delete mode 100644 frontend/src/lib/History.svelte
 delete mode 100644 frontend/src/lib/Logo.svelte
 delete mode 100644 frontend/src/lib/ModuleCard.svelte
 delete mode 100644 frontend/src/lib/Modules.svelte
 rename frontend/src/lib/{ => components}/DeployActions.svelte (89%)
 rename frontend/src/lib/{ => components}/DeployModal.svelte (92%)
 rename frontend/src/lib/{ => components}/TableBodyEditCell.svelte (100%)
 delete mode 100644 frontend/src/lib/deviceSelectHelper.ts
 delete mode 100644 frontend/src/lib/modules.ts
 rename frontend/src/lib/{ => navbar}/LanguageSelect.svelte (100%)
 rename frontend/src/{routes => lib/navbar}/Navbar.svelte (84%)
 rename frontend/src/lib/{ => navbar}/UserMenu.svelte (100%)
 create mode 100644 frontend/src/lib/searchParamHelpers.ts
 rename frontend/src/lib/{ => sever}/native.ts (100%)
 rename frontend/src/lib/{ => sidebar}/BuildStatus.svelte (98%)
 rename frontend/src/lib/{DeviceSelect.svelte => sidebar/GlobalNavSelect.svelte} (70%)
 rename frontend/src/{routes => lib/sidebar}/Sidebar.svelte (90%)
 delete mode 100644 frontend/src/routes/config-overview/+page.svelte
 rename frontend/src/{lib => routes/devices}/CreateDeviceModal.svelte (65%)
 rename frontend/src/{lib => routes/devices}/EditTagModal.svelte (100%)
 rename frontend/src/{lib => routes/devices}/InstallationStepper.svelte (98%)

diff --git a/frontend/src/lib/Config.svelte b/frontend/src/lib/Config.svelte
deleted file mode 100644
index e69de29b..00000000
diff --git a/frontend/src/lib/EditStringModal.svelte b/frontend/src/lib/EditStringModal.svelte
deleted file mode 100644
index 90d85e83..00000000
--- a/frontend/src/lib/EditStringModal.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { t } from 'svelte-i18n';
-	import { Button, Modal, Label, Input, type SizeType } from 'flowbite-svelte';
-
-	export let title: string | undefined = '';
-	export let size: SizeType | undefined = 'md';
-	export let label: string | undefined = '';
-	export let value: string | undefined;
-	export let open: boolean;
-	export let onClose: (() => void) | undefined = undefined;
-	export let onSave: ((value: string) => void) | undefined = undefined;
-</script>
-
-<Modal bind:title bind:open outsideclose {size} on:close={() => onClose?.()}>
-	<Label>{label}</Label>
-	<Input bind:value />
-	<div class="flex justify-end gap-2">
-		<Button color="alternative" on:click={() => onClose?.()}>{$t('common.cancel')}</Button>
-		<Button
-			on:click={() => {
-				onSave?.(value ?? '');
-				onClose?.();
-			}}
-		>
-			{$t('common.save')}
-		</Button>
-	</div>
-</Modal>
diff --git a/frontend/src/lib/History.svelte b/frontend/src/lib/History.svelte
deleted file mode 100644
index e69de29b..00000000
diff --git a/frontend/src/lib/Logo.svelte b/frontend/src/lib/Logo.svelte
deleted file mode 100644
index 3c485187..00000000
--- a/frontend/src/lib/Logo.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-	import thymis from '$lib/assets/thymis.svg';
-</script>
-
-<img src={thymis} alt="Thymis Logo" />
-
-<style>
-	img {
-		width: 40px;
-		height: 40px;
-	}
-</style>
diff --git a/frontend/src/lib/ModuleCard.svelte b/frontend/src/lib/ModuleCard.svelte
deleted file mode 100644
index 0778145d..00000000
--- a/frontend/src/lib/ModuleCard.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-	import { t } from 'svelte-i18n';
-	import { Card, Button, P } from 'flowbite-svelte';
-	import type { ModuleSettings, Module } from './state';
-	import { page } from '$app/stores';
-
-	export let module: Module;
-	export let installed: boolean;
-	export let addModule: (module: ModuleSettings | Module) => void;
-
-	const configUrl = (searchParams: string, module: Module) => {
-		const params = new URLSearchParams(searchParams);
-		params.set('module', module.type);
-		return params.toString();
-	};
-</script>
-
-<Card class="w-48 h-48 !p-2 flex justify-between items-center">
-	<P class="font-bold">{module.displayName}</P>
-	<img class="h-20 w-20 object-scale-down" src={module.icon ?? '/favicon.png'} alt="icon" />
-	{#if installed}
-		<Button size="xs" class="!w-28" href="/config?{configUrl($page.url.search, module)}">
-			{$t('config.configure')}
-		</Button>
-	{:else}
-		<Button size="xs" class="!w-28" on:click={() => addModule(module)}>
-			{$t('config.install')}
-		</Button>
-	{/if}
-</Card>
diff --git a/frontend/src/lib/Modules.svelte b/frontend/src/lib/Modules.svelte
deleted file mode 100644
index e69de29b..00000000
diff --git a/frontend/src/lib/DeployActions.svelte b/frontend/src/lib/components/DeployActions.svelte
similarity index 89%
rename from frontend/src/lib/DeployActions.svelte
rename to frontend/src/lib/components/DeployActions.svelte
index c87dc946..7d206085 100644
--- a/frontend/src/lib/DeployActions.svelte
+++ b/frontend/src/lib/components/DeployActions.svelte
@@ -4,9 +4,8 @@
 	import GearsSolid from 'svelte-awesome-icons/GearsSolid.svelte';
 	import ArrowsRotateSolid from 'svelte-awesome-icons/ArrowsRotateSolid.svelte';
 	import PlaySolid from 'svelte-awesome-icons/PlaySolid.svelte';
-	import '../app.postcss';
-	import { controllerHost, controllerProtocol } from './api';
-	import DeployModal from '$lib/DeployModal.svelte';
+	import { controllerHost, controllerProtocol } from '../api';
+	import DeployModal from '$lib/components/DeployModal.svelte';
 
 	const build = async () => {
 		await fetch(`${controllerProtocol}://${controllerHost}/action/build`, { method: 'POST' });
diff --git a/frontend/src/lib/DeployModal.svelte b/frontend/src/lib/components/DeployModal.svelte
similarity index 92%
rename from frontend/src/lib/DeployModal.svelte
rename to frontend/src/lib/components/DeployModal.svelte
index 18948f89..bc0e49fe 100644
--- a/frontend/src/lib/DeployModal.svelte
+++ b/frontend/src/lib/components/DeployModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { t } from 'svelte-i18n';
-	import { controllerHost, controllerProtocol } from './api';
+	import { controllerHost, controllerProtocol } from '../api';
 	import { Button, Modal, Label, Input } from 'flowbite-svelte';
 
 	export let open = false;
diff --git a/frontend/src/lib/TableBodyEditCell.svelte b/frontend/src/lib/components/TableBodyEditCell.svelte
similarity index 100%
rename from frontend/src/lib/TableBodyEditCell.svelte
rename to frontend/src/lib/components/TableBodyEditCell.svelte
diff --git a/frontend/src/lib/config/ModuleList.svelte b/frontend/src/lib/config/ModuleList.svelte
index 156fb1c5..ea8dd183 100644
--- a/frontend/src/lib/config/ModuleList.svelte
+++ b/frontend/src/lib/config/ModuleList.svelte
@@ -1,28 +1,39 @@
 <script lang="ts">
 	import { t } from 'svelte-i18n';
-	import type { Device, Module, Tag } from '$lib/state';
+	import {
+		globalNavSelectedTarget,
+		saveState,
+		type Device,
+		type Module,
+		type ModuleSettings,
+		type Tag,
+		globalNavSelectedTargetType
+	} from '$lib/state';
 	import { Modal, P, ToolbarButton } from 'flowbite-svelte';
 	import { page } from '$app/stores';
-	import {
-		deviceUrl,
-		deviceConfigUrl,
-		selectedTarget,
-		selectedConfigTarget,
-		selectedConfigContext,
-		selectedConfigModule,
-		selectedContext
-	} from '$lib/deviceSelectHelper';
 	import Pen from 'lucide-svelte/icons/pen';
 	import Plus from 'lucide-svelte/icons/plus';
 	import Minus from 'lucide-svelte/icons/minus';
+	import { buildConfigSelectModuleSearchParam } from '$lib/searchParamHelpers';
+
+	export let contextType: string | null;
+	export let context: Tag | Device | undefined;
 
-	export let context: string | null;
-	export let target: Tag | Device | undefined;
 	export let selfModules: Module[];
 	export let canChangeModules: boolean = false;
 	export let availableModules: Module[] = [];
-	export let addModule: (target: Tag | Device | undefined, module: Module) => void = () => {};
-	export let removeModule: (target: Tag | Device | undefined, module: Module) => void = () => {};
+	export let configSelectedModule: Module | undefined;
+	export let configSelectedModuleContextType: string | null;
+	export let configSelectedModuleContext: Tag | Device | undefined;
+
+	const addModule = (target: Tag | Device | undefined, module: ModuleSettings | Module) => {
+		if (target && !target.modules.find((m) => m.type === module.type)) {
+			target.modules = [...target.modules, { type: module.type, settings: {} }];
+			saveState();
+		}
+	};
+
+	export let removeModule: (target: Tag | Device | undefined, module: Module) => void;
 
 	let addModuleModalOpen = false;
 
@@ -33,26 +44,26 @@
 		selectedConfigTarget: Tag | Device | undefined
 	) =>
 		module.type === selectedConfigModule?.type &&
-		context === selectedConfigContext &&
-		target?.identifier === selectedConfigTarget?.identifier;
+		contextType === selectedConfigContext &&
+		context?.identifier === selectedConfigTarget?.identifier;
 
-	$: console.log(target?.displayName, context);
+	$: console.log(context?.displayName, contextType);
 </script>
 
 <div class="flex justify-between mb-2 ml-2">
 	<div class="flex gap-2 inline-block items-center">
 		<slot name="icon" />
-		<P>{target?.displayName}</P>
+		<P>{context?.displayName}</P>
 	</div>
-	{#if $selectedTarget?.identifier !== target?.identifier}
+	{#if $globalNavSelectedTarget?.identifier !== context?.identifier}
 		<ToolbarButton
-			href="/config?{deviceConfigUrl(
+			href="/config?{buildConfigSelectModuleSearchParam(
 				$page.url.search,
-				$selectedConfigModule,
-				context,
-				target?.identifier,
-				context,
-				target?.identifier
+				contextType,
+				context?.identifier,
+				contextType,
+				context?.identifier,
+				configSelectedModule
 			)}"
 		>
 			<Pen />
@@ -60,25 +71,31 @@
 	{/if}
 </div>
 <div class="mb-6 ml-4">
-	{#if target && context}
+	{#if context && contextType}
 		{#each selfModules as module}
 			<div
 				class={`flex justify-between gap-1 rounded ${
-					isSelected(module, $selectedConfigModule, $selectedConfigContext, $selectedConfigTarget)
+					isSelected(
+						module,
+						configSelectedModule,
+						configSelectedModuleContextType,
+						configSelectedModuleContext
+					)
 						? 'bg-gray-300 dark:bg-gray-600'
 						: 'hover:bg-gray-200 dark:hover:bg-gray-700'
 				}`}
 			>
 				<a
-					href="/config?{deviceConfigUrl(
+					href="/config?{buildConfigSelectModuleSearchParam(
 						$page.url.search,
-						module,
-						$selectedContext,
-						$selectedTarget?.identifier,
-						context,
-						target.identifier
+						$globalNavSelectedTargetType,
+						$globalNavSelectedTarget?.identifier,
+						contextType,
+						context.identifier,
+						module
 					)}"
 					class={`block p-2 w-full flex gap-2`}
+					data-sveltekit-noscroll
 				>
 					<img src={module.icon ?? '/favicon.png'} alt={module.displayName} class="w-6 h-6" />
 					<P>{module.displayName}</P>
@@ -86,7 +103,7 @@
 				{#if canChangeModules}
 					<button
 						class="m-1 p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-500"
-						on:click={() => removeModule(target, module)}
+						on:click={() => removeModule(context, module)}
 					>
 						<Minus />
 					</button>
@@ -106,7 +123,7 @@
 				{#each availableModules as module}
 					<button
 						class="btn m-0 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 flex items-center gap-2"
-						on:click={() => addModule(target, module)}
+						on:click={() => addModule(context, module)}
 					>
 						<img src={module.icon ?? '/favicon.png'} alt={module.displayName} class="w-6 h-6" />
 						<P>{module.displayName}</P>
diff --git a/frontend/src/lib/deviceSelectHelper.ts b/frontend/src/lib/deviceSelectHelper.ts
deleted file mode 100644
index f7fe612a..00000000
--- a/frontend/src/lib/deviceSelectHelper.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import type { Module, State } from './state';
-import { page } from '$app/stores';
-import { queryParam } from 'sveltekit-search-params';
-import { derived } from 'svelte/store';
-
-export const deviceUrl = (
-	search: string,
-	context: string | null | undefined,
-	identifier: string | null | undefined
-) => {
-	const params = new URLSearchParams(search);
-	context ? params.set('id-context', context) : params.delete('id-context');
-	identifier ? params.set('id', identifier) : params.delete('id');
-	params.delete('config-id');
-	params.delete('config-id-context');
-	params.delete('module');
-	return params.toString();
-};
-
-export const deviceConfigUrl = (
-	search: string,
-	module: Module | null | undefined,
-	context: string | null | undefined,
-	identifier: string | null | undefined,
-	configContext: string | null | undefined,
-	configIdentifier: string | null | undefined
-) => {
-	const params = new URLSearchParams(search);
-	context ? params.set('id-context', context) : params.delete('id-context');
-	identifier ? params.set('id', identifier) : params.delete('id');
-	configContext
-		? params.set('config-id-context', configContext)
-		: params.delete('config-id-context');
-	configIdentifier ? params.set('config-id', configIdentifier) : params.delete('config-id');
-	module ? params.set('module', module.type) : params.delete('module');
-	return params.toString();
-};
-
-export const selectedTag = derived(
-	[page, queryParam('id-context'), queryParam('id')],
-	([$page, $context, $identifier]) => {
-		let state = $page.data.state as State;
-
-		if ($context === 'tag') {
-			return state.tags.find((tag) => tag.identifier === $identifier);
-		}
-	}
-);
-
-export const selectedDevice = derived(
-	[page, queryParam('id-context'), queryParam('id')],
-	([$page, $context, $identifier]) => {
-		let state = $page.data.state as State;
-
-		if ($context === 'device') {
-			return state.devices.find((device) => device.identifier === $identifier);
-		}
-	}
-);
-
-export const selectedTarget = derived(
-	[selectedDevice, selectedTag],
-	([$device, $tag]) => $device || $tag
-);
-
-export const selectedContext = derived(queryParam('id-context'), ($context) => $context);
-
-export const selectedConfigTarget = derived(
-	[page, queryParam('config-id-context'), queryParam('config-id')],
-	([$page, $context, $identifier]) => {
-		let state = $page.data.state as State;
-
-		if ($context === 'tag') {
-			return state.tags.find((tag) => tag.identifier === $identifier);
-		} else if ($context === 'device') {
-			return state.devices.find((device) => device.identifier === $identifier);
-		}
-	}
-);
-
-export const selectedConfigContext = derived(
-	queryParam('config-id-context'),
-	($context) => $context
-);
-
-export const selectedConfigModule = derived([page, queryParam('module')], ([$page, $module]) => {
-	let availableModules = $page.data.availableModules as Module[];
-	return availableModules.find((module) => module.type === $module);
-});
diff --git a/frontend/src/lib/modules.ts b/frontend/src/lib/modules.ts
deleted file mode 100644
index 9a411e56..00000000
--- a/frontend/src/lib/modules.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-export const modules = [
-	{
-		name: 'Module 1',
-		shortDescription:
-			'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At',
-		icon: 'data:image/png;base64,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'
-	},
-	{
-		name: 'Module 2',
-		shortDescription: 'Lorem ipsum dolor sit amet',
-		icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAQqUlEQVR4Xu2du45cRRRF72SWk0HOnJoRKT8ACQn8gYGIAJAgIEI4QUIigw+AyA6BgA+AhARCf8Lg0I6wILGcDa4et6enX7eq7qmq81iTYHvqcc46e+/uvmOZk4cPH17cunVrunHjxsQXBCAQg8Dz58+np0+fTiePHj26SL84OzubTk9PY3RPlxAITOC///6bzs/Pp/TCf/L48eOLmzdvrv6AEAisCloPQWBt/uT1Z8+eXQbA7du3p81v8E4ghBZoMhiBbY8/efLkKgASC0IgmCJoNwyBfd7eCQBCIIweaDQQgUMv7HsDgBAIpAxadU/g2Lv6gwFACLjXBQ0GIDD3kf5oABACARRCi24JzJk/NT4bAISAW33QmGMCOebPDgBCwLFSaM0dgVzzFwUAIeBOJzTkkECJ+YsDgBBwqBhackOg1PxVAUAIuNELjTgiUGP+6gAgBBwph1bME6g1/6IAIATM64YGHBBYYv7FAUAIOFAQLZglsNT8IgFACJjVD4UbJiBhfrEAIAQMK4nSzRGQMr9oABAC5nREwQYJSJpfPAAIAYOKomQzBKTN3yQACAEzeqJQQwRamL9ZABAChpRFqeoJtDJ/0wAgBNTrigINEGhp/uYBQAgYUBglqiXQ2vxdAoAQUKsvClNMoIf5uwUAIaBYaZSmjkAv83cNAEJAnc4oSCGBnubvHgCEgELFUZIaAr3NPyQACAE1eqMQRQRGmH9YABACipRHKcMJjDL/0AAgBIbrjgIUEBhp/uEBQAgoUCAlDCMw2vwqAoAQGKY/Lh5IQIP51QQAITBQiVzdnYAW86sKAEKguw65cAABTeZXFwCEwABFcmU3AtrMrzIACIFueuSijgQ0ml9tABACHZXJVc0JaDW/6gAgBJrrkgs6ENBsfvUBQAh0UChXNCOg3fwmAoAQaKZPDm5IwIL5zQQAIdBQqRwtTsCK+U0FACEgrlMObEDAkvnNBQAh0ECxHClGwJr5TQYAISCmVw4SJGDR/GYDgBAQVC5HLSZg1fymA4AQWKxbDhAgYNn85gOAEBBQMEdUE7BufhcBQAhU65eNCwh4ML+bACAEFiiZrcUEvJjfVQAQAsU6ZkMFAU/mdxcAhECFotmSTcCb+V0GACGQrWcWFhDwaH63AUAIFCibpbMEvJrfdQAQArO6ZkEGAc/mdx8AhECGwllykIB384cIAEIAh9cQiGD+MAFACNRYIO6eKOYPFQCEQFxDl3QeyfzhAoAQKLFCvLXRzB8yAAiBeMbO6Tii+cMGACGQY4k4a6KaP3QAEAJxDH6s08jmDx8AhEDsEIhufgLgpf4RQrwgYOaXM3/y5Ml08vjx44vbt2/HU8FGxwgizviZ9dWsCQBCII7zX3SK+a+PmwDYkj8C8ZsHzHZ3tgTAHr0jFH8hwEz3z5QAOKB1BOMnBJjl4VkSAEd0jnDshwAzPD5DAmBG4wjIbggwu/nZEQDzjHhynMFI2xLMnzcRAiCPEyGQyUnDMsyfPwUCIJ8VIVDAatRSzF9GngAo40UIFPLquRzzl9MmAMqZEQIVzFpvwfx1hAmAOm6EQCW3Ftswfz1VAqCeHSGwgJ3UVsy/jCQBsIwfIbCQ35LtmH8Jvcu9BMByhoSAAMPSIzB/KbH96wkAGY6EgBDHnGMwfw6lvDUEQB6nrFUIMwvTokUwXoRvZzMBIMuTdwLCPDePw/zycAkAeaaEAEwbEGhzJAHQhishIMiVV35BmFtHEQDt2BICAmwxvwDEI0cQAG35EgIL+GL+BfAytxIAmaCWLEPI5fRgVs6sZgcBUEOtYg+CzocGq3xWS1cSAEsJFuxH2POwYDTPSHIFASBJM+MsBH4YEmwyBCS8hAAQBppzHELfpQSTHOXIryEA5JlmnYjgrzDBIksyTRYRAE2w5h2K8Pl/9eUppd0qAqAd26yTI4dA5N6zxNFhEQHQAfLcFRGNELHnOR2M+D4BMIL6njsjGSJSr0rkdbAMAkDRhCIYI0KPiiQ1WwoBMIuo7wLPBvHcW1+VyN1GAMixFDvJo1E89iQ28IEHEQAD4R+72pNhPPWiVC7VZREA1ejab/RgHA89tJ/0uBsIgHHss262bCDLtWcNx8EiAsDAEC0ayWLNBqQgXiIBII60zYGWDGWp1jbTsnMqAWBnVib+eTHMb0hQL0olAGzNS3UIYH5jYiIA7A0sVazRaBprsjndvlXzDqAvb7HbNBlOUy1igIMcRAAYHrQG42mowfAIh5dOAAwfwbICRhpw5N3LqLF7TYAAcKCFEUYccaeDUalrgQBQN5K6gnoasudddTTYlUuAAMglZWBdD2P2uMMAajclEgBuRnnZSEuDtjzb2RjMtEMAmBlVfqEtjNrizPyOWNmKAAHQiuzgcyUNK3nWYCxcv0WAAHAsCQnjSpzhGLH51ggA8yM83sASAy/Z6xyrm/YIADejPNxIjZFr9gRA6a5FAsDdSPc3VGLokrVB8LltkwBwO9rdxnKMnbMmEDL3rRIA7kd8vcFjBsf8wcTwol0CIN7M9/5lIcwfUAgEQMyhp643DZ9+f35+Pp2dnU2np6dxoQTsnHcAAYe+bnkdAun3mD+mEAiAmHNfdU0ABB7+y9YJgKAa4CNA0MFvtU0ABNTBvgd+PAQMKAQeAsYbOj8GjDfzYx3zDiCQHnJe5XPWBELmvlUCwP2ILxssMXbJ2iD43LZJALgd7VVjNYau2RMApbsWCQB3I73e0BIjL9nrHKub9ggAN6PcbUTCwBJnOEZsvjUCwPwI9zcgaVzJs5ziNtsWAWB2dIcLb2HYFmc6RG+uJQLA3MiOF9zSqC3PdjYGM+0QAGZGNV9oD4P2uGO+U1ZIESAApEgOPqenMXveNRir++sJAAcjHmHIEXc6GJW6FggAdSMpK2ikEUfeXUaJ1YcIEACGtaHBgBpqMDzC4aUTAMNHUFeAJuNpqqWOZtxdBIDB2Ws0nMaaDI62e8kEQHfkyy7UbDTNtS2j7nc3AWBothYMZqFGQyNvXioB0ByxzAWWjGWpVpnp2D2FADAwO4uGslizASmIl0gAiCOVPdCykSzXLjtFvacRAHpnU/TPeGltgxDQOpnLuggApfPxZBxPvSiVS3VZBEA1unYbPRrGY0/tFNDvZAKgH+usmzwbxXNvWcNVuIgAUDSUCAaJ0KMiSc2WQgDMIuqzIJIxIvXaRz31txAA9ezEdkY0RMSexQQjeBABIAiz5qjIRojce41WWuwhAFpQzTwTA5T9L8sysbKsgAABUABLcinmv6IJC0lllZ1FAJTxElmN4HcxwkREWsWHEADFyJZtQOiH+cFmmbZqdhMANdQq9yDweXAwmmckuYIAkKR55CyEnQ8aVvmslq4kAJYSzNiPoDMgbS2BWTmzmh0EQA21gj0IuQAWIVAPq3InAVAJLmcb5s+hdHwNDJczPHYCAdCIL8KVAwtLOZbbJxEADdgiWHmoMJVnmk4kAIS5IlRhoBvHwVaeLQEgyBSBCsI8cBSMZRkTAEI8EaYQyIxjYJ0BKXMJAZAJ6tgyBCkAsfAImBcCO7CcAFjIESEuBLhgO+wXwHu5lQBYwBABLoAntJUZLANJAFTyQ3iV4BpsYxb1UAmACnYIrgJa4y3MpA4wAVDIDaEVAuu4nNmUwyYACpghsAJYg5YyozLwBEAmL4SVCUrBMmaVPwQCIIMVgsqApGwJM8sbCAEwwwkh5QlJ4ypmNz8VAuAIIwQ0LyDtK5jh8QkRAAf4IBzt1s6vj1keZkUA7GGDYPLNZWUlM90/KQJgiwtCsWLp8jqZ7S4zAmCDCQIpN5W1Hcz4+sQIgJc8EIY1K9fXy6yv2BEAL1ggiHozWd3JzC8nFz4AEIJVCy+vm9kHDwAEsNxE1k+IroGw7wCiD966cSXrj6yFkAEQeeCSxvF0VlRNhAuAqIP2ZNZWvUTURqgAiDjgVmbxem40jYQJgGiD9WrQHn1F0kqIAIg00B4GiXBHFM24D4Aog4xgyt49RtCO6wCIMMDepoh2n3cNuQ0A74OLZsSR/XrWkssA8DywkUaIfLdXTbkLAK+Dimw+Lb171JarAPA4IC3ip45LAt405iYAvA0Gw+kl4ElrLgLA00D0yp7KNgl40Zz5APAyCOxlj4AH7ZkOAA8DsCd7Kvb0TsBsAGB+jKiFgGUtmgwAy8C1iJY6ZAlY1aS5ALAKWlZunKaRgEVtmgoAi4A1CpWa2hGwplEzAWANbDuJcbJ2Apa0aiIALAHVLk7q60PAimbVB4AVkH1kxS2WCFjQruoAsADQkiCptT8B7RpWGwDawfWXEjdaJaBZyyoDQDMwqyKk7rEEtGpaXQBoBTVWPtzugYBGbasKAI2APAiPHvQQ0KZxNQGgDYweyVCJNwKatK4iADQB8SY2+tFJQIvmhweAFhA6ZUJVnglo0P7QANAAwLPA6E0/gdEeGBYAoxvXLw0qjEJgpBeGBMDIhqOIij5tERjlie4BMKpRW3Kg2ogERnijawCMaDCikOjZLoHeHukWAL0bsysBKo9OoKdXugRAz4aii4f+fRDo5ZnmAdCrER9jpwsIXBHo4Z2mAdCjAQQDAc8EWnuoWQC0Ltzz0OkNApsEWnqpSQC0LBhpQCAigVaeEg+AVoVGHDo9Q6D1OwHRAMD8CBYCbQlIe0wsAKQLa4uR0yFgl4Ck10QCQLIgu2Ohcgj0IyDlucUBIFVIP3TcBAEfBCS8tygAJArwMQq6gMAYAks9WB0ASy8eg4tbIeCPwBIvVgXAkgv94acjCIwnUOvJ4gCovWg8IiqAgG8CNd4sCoCaC3wjp7vIBL7//vvp3r17rxD8+eef01tvvbX6/S+//DJ98MEH1/D8/fff0507d1Z/9t57702///776tefffbZ9MMPP8yibHFfdgBg/tn5sCAQgWTwr7/+ejo/P79m+LXJk1n/+OOP6bffftuh8vnnn0+PHj169b2Tk5Pp559/nt5///2DBEvu2/bqsfuyAgDzB1I2rVYT2DRyMl362vfKntZtvluovfDYfZuefe211w7eNxsAmL92POyLRmDT2Okt/kcffbTzqv7XX39Nb7/99nRxcbH3ncGPP/746nvrjxGHwmLuvuTdX3/9dfr444/33pcKOBoAmD+ahOm3lsD68/na2Mmcr7/++pQ+EqSv7777bvrqq69WzwbSR4dPP/301fOD9ffWzwbSc4Ivv/xytf/QR4Pc+x48eDB988030yeffLL672YtRwMA89dKgX3RCKxf1dev1Onz/aZ5199PZk5f6eHg2vTba9P3U3ikr0MPB2vu++KLL6Zvv/12+ueff67VtvcdAOaPJmH6rSWwbcZD56SPBOmV/cMPP9z5CLD+3vp5wfar++aZtff9+++/qweWZ2dn0927d1e1pPt2AgDz10qBfdEI5Jpx31v7zWcAmwGwfkeQ3kEks27+FGHpfWtvpx9dvvHGG7sBgPmjSZh+awmsjbrvAd3aqOsfCW4bNxn+nXfeWT0T2P5eMn16PpC+t/mUX+q+9HcP0v0pWN59992rdwA3b9589Rbh9PS0lgv7IBCCQPoxX3piv/21+bBv8y8CbQdFMvr6AeH6QV/6s/S1/XcL0t6ffvpJ7L779+9Pb7755uodxrNnz6aTF+ly8fTp09UfYP4Q+qXJ4ATW7/Zv3bo1nTx8+PAi/eLGjRvBsdA+BOIQeP78+ZRe+P8HjVYCYWAPLE4AAAAASUVORK5CYII='
-	},
-	{
-		name: 'Module 3',
-		shortDescription:
-			'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod',
-		icon: 'data:image/png;base64,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'
-	},
-	{
-		name: 'Module 4',
-		shortDescription: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',
-		icon: 'data:image/png;base64,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'
-	},
-	{
-		name: 'Module 5',
-		shortDescription:
-			'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo',
-		icon: 'data:image/png;base64,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'
-	},
-	{
-		name: 'Module 6',
-		shortDescription:
-			'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo',
-		icon: 'data:image/png;base64,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'
-	},
-	{
-		name: 'Module 7',
-		shortDescription:
-			'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo',
-		icon: 'data:image/png;base64,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'
-	},
-	{
-		name: 'Module 8',
-		shortDescription:
-			'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo',
-		icon: 'data:image/png;base64,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'
-	}
-];
diff --git a/frontend/src/lib/LanguageSelect.svelte b/frontend/src/lib/navbar/LanguageSelect.svelte
similarity index 100%
rename from frontend/src/lib/LanguageSelect.svelte
rename to frontend/src/lib/navbar/LanguageSelect.svelte
diff --git a/frontend/src/routes/Navbar.svelte b/frontend/src/lib/navbar/Navbar.svelte
similarity index 84%
rename from frontend/src/routes/Navbar.svelte
rename to frontend/src/lib/navbar/Navbar.svelte
index bdd327ac..82ae1b68 100644
--- a/frontend/src/routes/Navbar.svelte
+++ b/frontend/src/lib/navbar/Navbar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { t } from 'svelte-i18n';
-	import UserMenu from '$lib/UserMenu.svelte';
+	import UserMenu from './UserMenu.svelte';
 	import {
 		DarkMode,
 		NavBrand,
@@ -11,10 +11,7 @@
 		ToolbarButton
 	} from 'flowbite-svelte';
 	import GithubSolid from 'flowbite-svelte-icons/GithubSolid.svelte';
-	import '../app.postcss';
-	import { locale } from 'svelte-i18n';
-	import { browser } from '$app/environment';
-	import LanguageSelect from '$lib/LanguageSelect.svelte';
+	import LanguageSelect from './LanguageSelect.svelte';
 
 	export let fluid = true;
 
diff --git a/frontend/src/lib/UserMenu.svelte b/frontend/src/lib/navbar/UserMenu.svelte
similarity index 100%
rename from frontend/src/lib/UserMenu.svelte
rename to frontend/src/lib/navbar/UserMenu.svelte
diff --git a/frontend/src/lib/searchParamHelpers.ts b/frontend/src/lib/searchParamHelpers.ts
new file mode 100644
index 00000000..8fadac6a
--- /dev/null
+++ b/frontend/src/lib/searchParamHelpers.ts
@@ -0,0 +1,51 @@
+import { type Module } from './state';
+
+export const setSearchParam = (search: string, key: string, value: string | null | undefined) => {
+	const params = new URLSearchParams(search);
+	value ? params.set(key, value) : params.delete(key);
+	return params.toString();
+};
+
+export const buildGlobalNavSearchParam = (
+	search: string,
+	targetType: string | null | undefined,
+	target: string | null | undefined
+) => {
+	const params = new URLSearchParams(search);
+	targetType
+		? params.set('global-nav-target-type', targetType)
+		: params.delete('global-nav-target-type');
+	target ? params.set('global-nav-target', target) : params.delete('global-nav-target');
+	return params.toString();
+};
+
+export const buildConfigSelectModuleSearchParam = (
+	search: string,
+	targetType: string | null | undefined,
+	target: string | null | undefined,
+	contextType: string | null | undefined,
+	contextIdentifier: string | null | undefined,
+	module: Module | null | undefined
+) => {
+	console.log('search', search);
+	console.log('targetType', targetType);
+	console.log('target', target);
+	console.log('contextType', contextType);
+	console.log('contextIdentifier', contextIdentifier);
+	console.log('module', module);
+	const params = new URLSearchParams(search);
+	targetType
+		? params.set('global-nav-target-type', targetType)
+		: params.delete('global-nav-target-type');
+	target ? params.set('global-nav-target', target) : params.delete('global-nav-target');
+	contextType
+		? params.set('config-selected-module-context-type', contextType)
+		: params.delete('config-selected-module-context-type');
+	contextIdentifier
+		? params.set('config-selected-module-context-identifier', contextIdentifier)
+		: params.delete('config-selected-module-context-identifier');
+	module
+		? params.set('config-selected-module', module.type)
+		: params.delete('config-selected-module');
+	return params.toString();
+};
diff --git a/frontend/src/lib/native.ts b/frontend/src/lib/sever/native.ts
similarity index 100%
rename from frontend/src/lib/native.ts
rename to frontend/src/lib/sever/native.ts
diff --git a/frontend/src/lib/BuildStatus.svelte b/frontend/src/lib/sidebar/BuildStatus.svelte
similarity index 98%
rename from frontend/src/lib/BuildStatus.svelte
rename to frontend/src/lib/sidebar/BuildStatus.svelte
index 9bdaff09..42e9d06c 100644
--- a/frontend/src/lib/BuildStatus.svelte
+++ b/frontend/src/lib/sidebar/BuildStatus.svelte
@@ -4,7 +4,7 @@
 	import { Button, Modal } from 'flowbite-svelte';
 	import CircleExclamationSolid from 'svelte-awesome-icons/CircleExclamationSolid.svelte';
 	import TriangleExclamationSolid from 'svelte-awesome-icons/TriangleExclamationSolid.svelte';
-	import { taskStatus } from './taskstatus';
+	import { taskStatus } from '../taskstatus';
 
 	let stdoutModalOpen = false;
 	let stderrModalOpen = false;
diff --git a/frontend/src/lib/DeviceSelect.svelte b/frontend/src/lib/sidebar/GlobalNavSelect.svelte
similarity index 70%
rename from frontend/src/lib/DeviceSelect.svelte
rename to frontend/src/lib/sidebar/GlobalNavSelect.svelte
index 584f120d..bed1e3c3 100644
--- a/frontend/src/lib/DeviceSelect.svelte
+++ b/frontend/src/lib/sidebar/GlobalNavSelect.svelte
@@ -3,12 +3,10 @@
 	import TagIcon from 'lucide-svelte/icons/tag';
 	import HardDrive from 'lucide-svelte/icons/hard-drive';
 	import { Button, Dropdown, DropdownItem, Search } from 'flowbite-svelte';
-	import { selectedTag, selectedDevice, deviceUrl } from './deviceSelectHelper';
 	import ChevronDownSolid from 'flowbite-svelte-icons/ChevronDownSolid.svelte';
 	import { page } from '$app/stores';
-	import type { State } from './state';
-
-	export let state: State;
+	import { globalNavSelectedDevice, globalNavSelectedTag, state, type State } from '../state';
+	import { buildGlobalNavSearchParam } from '$lib/searchParamHelpers';
 
 	let search = '';
 
@@ -24,10 +22,10 @@
 
 <Button class="w-full flex justify-between">
 	<div class="flex gap-2">
-		{#if $selectedTag}
-			<TagIcon size={20} /> {$selectedTag?.displayName}
-		{:else if $selectedDevice}
-			<HardDrive size={20} /> {$selectedDevice?.displayName}
+		{#if $globalNavSelectedTag}
+			<TagIcon size={20} /> {$globalNavSelectedTag?.displayName}
+		{:else if $globalNavSelectedDevice}
+			<HardDrive size={20} /> {$globalNavSelectedDevice?.displayName}
 		{:else}
 			{$t('common.no-tag-or-device-selected')}
 		{/if}
@@ -38,10 +36,10 @@
 	<div slot="header" class="p-3">
 		<Search size="md" bind:value={search} placeholder={$t('common.search')} />
 	</div>
-	{#each state.tags as tag}
+	{#each $state.tags as tag}
 		{#if isSearched(search, tag.displayName)}
 			<DropdownItem
-				href={`?${deviceUrl($page.url.search, 'tag', tag.identifier)}`}
+				href={`?${buildGlobalNavSearchParam($page.url.search, 'tag', tag.identifier)}`}
 				class={'flex gap-2 my-1 p-1 hover:bg-primary-500'}
 			>
 				<TagIcon />
@@ -49,10 +47,10 @@
 			</DropdownItem>
 		{/if}
 	{/each}
-	{#each state.devices as device}
+	{#each $state.devices as device}
 		{#if isSearched(search, device.displayName)}
 			<DropdownItem
-				href={`?${deviceUrl($page.url.search, 'device', device.identifier)}`}
+				href={`?${buildGlobalNavSearchParam($page.url.search, 'device', device.identifier)}`}
 				class={'flex gap-2 my-1 p-1 hover:bg-primary-500'}
 			>
 				<HardDrive />
diff --git a/frontend/src/routes/Sidebar.svelte b/frontend/src/lib/sidebar/Sidebar.svelte
similarity index 90%
rename from frontend/src/routes/Sidebar.svelte
rename to frontend/src/lib/sidebar/Sidebar.svelte
index eec6b070..310d1929 100644
--- a/frontend/src/routes/Sidebar.svelte
+++ b/frontend/src/lib/sidebar/Sidebar.svelte
@@ -19,12 +19,14 @@
 	import ChartSimpleSolid from 'svelte-awesome-icons/ChartSimpleSolid.svelte';
 	import GearSolid from 'svelte-awesome-icons/GearSolid.svelte';
 	import ScreenShare from 'lucide-svelte/icons/screen-share';
-	import DeviceSelect from '$lib/DeviceSelect.svelte';
-	import type { Device, ModuleSettings, State } from '$lib/state';
-	import BuildStatus from '$lib/BuildStatus.svelte';
-	import { selectedTag, selectedDevice, selectedTarget } from '$lib/deviceSelectHelper';
-
-	export let state: State;
+	import {
+		globalNavSelectedDevice,
+		globalNavSelectedTarget,
+		state,
+		type ModuleSettings
+	} from '$lib/state';
+	import BuildStatus from '$lib/sidebar/BuildStatus.svelte';
+	import GlobalNavSelect from '$lib/sidebar/GlobalNavSelect.svelte';
 
 	export let drawerHidden: boolean;
 
@@ -67,8 +69,8 @@
 	const isVNCModule = (module: ModuleSettings) => module.type.toLowerCase().includes('vnc');
 
 	$: hasVNCModule =
-		state.devices.some((device) => device.modules.some(isVNCModule)) ||
-		state.tags.some((tag) => tag.modules.some(isVNCModule));
+		$state.devices.some((device) => device.modules.some(isVNCModule)) ||
+		$state.tags.some((tag) => tag.modules.some(isVNCModule));
 
 	let navItems: NavItem[] = [];
 	$: navItems = [
@@ -81,7 +83,7 @@
 			name: $t('nav.orchestrate'),
 			icon: SlidersSolid,
 			href: '/config',
-			hidden: !$selectedTarget
+			hidden: !$globalNavSelectedTarget
 		},
 		{
 			name: $t('nav.devices'),
@@ -103,7 +105,7 @@
 			name: $t('nav.terminal'),
 			icon: TerminalSolid,
 			href: '/terminal',
-			hidden: !$selectedDevice
+			hidden: !$globalNavSelectedDevice
 		},
 		{
 			name: $t('nav.settings'),
@@ -127,7 +129,7 @@
 	>
 		<nav class="divide-y text-base font-medium">
 			<SidebarGroup ulClass="list-unstyled fw-normal small mb-4 space-y-2">
-				<DeviceSelect bind:state />
+				<GlobalNavSelect />
 				{#each navItems as { name, icon, children, href, hidden } (name)}
 					{#if children}
 						<SidebarDropdownWrapper
diff --git a/frontend/src/lib/state.ts b/frontend/src/lib/state.ts
index 7201dc94..5e3917ff 100644
--- a/frontend/src/lib/state.ts
+++ b/frontend/src/lib/state.ts
@@ -1,7 +1,7 @@
-import { goto, invalidate, invalidateAll } from '$app/navigation';
+import { invalidate } from '$app/navigation';
 import { controllerHost, controllerProtocol } from './api';
-import { browser } from '$app/environment';
-import { writable } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
+import { queryParam } from 'sveltekit-search-params';
 
 export type ModuleSettings = {
 	type: string;
@@ -69,18 +69,61 @@ export type State = {
 	tags: Tag[];
 };
 
-export const build = async () => {
-	await fetch(`${controllerProtocol}://${controllerHost}/action/build`, { method: 'POST' });
-};
+export const state = writable<State>();
+
+let currentState: State;
+
+state.subscribe((value) => {
+	currentState = value;
+});
 
-export async function saveState(state: State) {
+export const saveState = async () => {
+	state.set(currentState);
 	await fetch(`${controllerProtocol}://${controllerHost}/state`, {
 		method: 'PATCH',
 		headers: {
 			'content-type': 'application/json'
 		},
-		body: JSON.stringify(state)
+		body: JSON.stringify(currentState)
 	});
-	await invalidateAll();
+	await invalidate((url) => url.pathname === '/state' || url.pathname === '/available_modules');
 	await build();
-}
+};
+
+export const build = async () => {
+	await fetch(`${controllerProtocol}://${controllerHost}/action/build`, { method: 'POST' });
+};
+
+export const getTagByIdentifier = (state: State, identifier: string) => {
+	return state.tags.find((tag) => tag.identifier === identifier);
+};
+
+export const getDeviceByIdentifier = (state: State, identifier: string) => {
+	return state.devices.find((device) => device.identifier === identifier);
+};
+
+export const globalNavSelectedTag = derived(
+	[state, queryParam('global-nav-target-type'), queryParam('global-nav-target')],
+	([$state, $context, $identifier]) => {
+		if ($context === 'tag') {
+			return getTagByIdentifier($state, $identifier);
+		}
+	}
+);
+
+export const globalNavSelectedDevice = derived(
+	[state, queryParam('global-nav-target-type'), queryParam('global-nav-target')],
+	([$state, $context, $identifier]) => {
+		if ($context === 'device') {
+			return getDeviceByIdentifier($state, $identifier);
+		}
+	}
+);
+
+export const globalNavSelectedTarget = derived(
+	[globalNavSelectedDevice, globalNavSelectedTag],
+	([$globalNavSelectedDevice, $globalNavSelectedTag]) =>
+		$globalNavSelectedDevice || $globalNavSelectedTag
+);
+
+export const globalNavSelectedTargetType = queryParam('global-nav-target-type');
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index c6e63c14..38cf222a 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,11 +1,34 @@
 <script lang="ts">
 	import '../app.postcss';
-	import Navbar from './Navbar.svelte';
-	import Sidebar from './Sidebar.svelte';
+	import Navbar from '../lib/navbar/Navbar.svelte';
+	import Sidebar from '../lib/sidebar/Sidebar.svelte';
 	import type { LayoutData } from '../routes/$types';
+	import { saveState } from '$lib/state';
+	import { state } from '$lib/state';
 
 	export let data: LayoutData;
 
+	$state = data.state;
+	let lastDataState = data.state;
+	let lastState = data.state;
+
+	$: {
+		// check which state changed
+		if (lastDataState !== data.state && lastState !== $state) {
+			// unexpected state change
+			console.error('Unexpected state change');
+			console.log(lastDataState, lastState, data.state);
+		} else if (lastDataState !== data.state) {
+			// server state changed
+			$state = data.state; // update local state store
+		} else if (lastState !== $state) {
+			// local state changed
+			saveState(); // save local state to server
+		}
+		lastDataState = data.state;
+		lastState = $state;
+	}
+
 	let drawerHidden = true;
 </script>
 
@@ -15,7 +38,7 @@
 	<Navbar bind:drawerHidden />
 </header>
 <div class="overflow-hidden lg:flex">
-	<Sidebar bind:drawerHidden bind:state={data.state} />
+	<Sidebar bind:drawerHidden />
 	<div class="relative h-full w-full overflow-y-auto lg:ml-64 p-4">
 		<slot />
 	</div>
diff --git a/frontend/src/routes/+layout.ts b/frontend/src/routes/+layout.ts
index 6c2e2367..76427260 100644
--- a/frontend/src/routes/+layout.ts
+++ b/frontend/src/routes/+layout.ts
@@ -3,7 +3,7 @@ import '$lib/i18n'; // Import to initialize. Important :)
 import { locale, waitLocale } from 'svelte-i18n';
 import type { LayoutLoad } from './$types';
 import { controllerHost, controllerProtocol } from '$lib/api';
-import type { State, ModuleSettings, Module } from '$lib/state';
+import type { State, Module } from '$lib/state';
 import { error } from '@sveltejs/kit';
 
 export const load = (async ({ fetch }) => {
diff --git a/frontend/src/routes/config-overview/+page.svelte b/frontend/src/routes/config-overview/+page.svelte
deleted file mode 100644
index 1a8bab70..00000000
--- a/frontend/src/routes/config-overview/+page.svelte
+++ /dev/null
@@ -1,100 +0,0 @@
-<script lang="ts">
-	import { t } from 'svelte-i18n';
-	import { P } from 'flowbite-svelte';
-	import type { Tag, Device, ModuleSettings, Module } from '$lib/state';
-	import { saveState } from '$lib/state';
-
-	import DeployActions from '$lib/DeployActions.svelte';
-	import ModuleCard from '$lib/ModuleCard.svelte';
-	import type { PageData } from './$types';
-	import { selectedTag, selectedDevice } from '$lib/deviceSelectHelper';
-
-	export let data: PageData;
-
-	$: modules = getModules($selectedTag, $selectedDevice);
-	$: modulesAnywhere = getModulesInstalledAnywhere();
-
-	const getOrigin = (target: Tag | Device) => {
-		return target.displayName;
-	};
-
-	const getModuleSettings = (tag: Tag | undefined, device: Device | undefined) => {
-		if (tag) {
-			return tag.modules.map((m) => ({ origin: getOrigin(tag), ...m }));
-		}
-
-		if (device) {
-			let usedTags = device.tags.flatMap(
-				(t) => data.state.tags.find((tag) => tag.identifier === t) ?? []
-			);
-			return [
-				...device.modules.map((m) => ({ origin: getOrigin(device), ...m })),
-				...usedTags.flatMap((t) => t.modules.map((m) => ({ origin: getOrigin(t), ...m })))
-			];
-		}
-	};
-
-	const getModules = (tag: Tag | undefined, device: Device | undefined) => {
-		let settings = getModuleSettings(tag, device);
-		return data.availableModules.filter((m) => settings?.find((s) => s.type === m.type)) ?? [];
-	};
-
-	const getModulesInstalledAnywhere = () => {
-		const tagModules = data.state.tags.flatMap((tag) => getModules(tag, undefined));
-		const deviceModules = data.state.devices.flatMap((device) => getModules(undefined, device));
-		return [...new Set(tagModules.concat(deviceModules))];
-	};
-
-	const addModule = (module: ModuleSettings | Module) => {
-		if ($selectedTag && !$selectedTag.modules.find((m) => m.type === module.type)) {
-			$selectedTag.modules = [...$selectedTag.modules, { type: module.type, settings: {} }];
-		}
-
-		if ($selectedDevice && !$selectedDevice.modules.find((m) => m.type === module.type)) {
-			$selectedDevice.modules = [...$selectedDevice.modules, { type: module.type, settings: {} }];
-		}
-
-		saveState(data.state);
-	};
-</script>
-
-<div class="flex justify-between mb-4">
-	<h1 class="text-3xl font-bold dark:text-white">
-		{#if $selectedTag}
-			{$t('config.header.tag-overview', { values: { tag: $selectedTag.displayName } })}
-		{:else if $selectedDevice}
-			{$t('config.header.device-overview', { values: { device: $selectedDevice.displayName } })}
-		{:else}
-			{$t('config.header.overview')}
-		{/if}
-	</h1>
-	<DeployActions />
-</div>
-<div>
-	<P class="mb-2">{$t('config.section.installed')}</P>
-	<div class="flex flex-wrap gap-2">
-		{#each modules as module}
-			<ModuleCard {module} installed={true} {addModule} />
-		{/each}
-	</div>
-</div>
-<div class="mt-8">
-	<P class="mb-2">{$t('config.section.installed-elsewhere')}</P>
-	<div class="flex flex-wrap gap-2">
-		{#each modulesAnywhere as module}
-			{#if !modules.find((m) => m.type === module.type)}
-				<ModuleCard {module} installed={false} {addModule} />
-			{/if}
-		{/each}
-	</div>
-</div>
-<div class="mt-8">
-	<P class="mb-2">{$t('config.section.available')}</P>
-	<div class="flex flex-wrap gap-2">
-		{#each data.availableModules as module}
-			{#if !modules.find((m) => m.type === module.type) && !modulesAnywhere.find((m) => m.type === module.type)}
-				<ModuleCard {module} installed={false} {addModule} />
-			{/if}
-		{/each}
-	</div>
-</div>
diff --git a/frontend/src/routes/config/+page.svelte b/frontend/src/routes/config/+page.svelte
index 29657aec..418132ce 100644
--- a/frontend/src/routes/config/+page.svelte
+++ b/frontend/src/routes/config/+page.svelte
@@ -2,32 +2,57 @@
 	import { t } from 'svelte-i18n';
 	import { Card, Toggle, Listgroup, ListgroupItem, Tooltip, P, Button } from 'flowbite-svelte';
 	import ModuleList from '$lib/config/ModuleList.svelte';
-	import { saveState } from '$lib/state';
-	import type {
-		ModuleSettings,
-		ModuleSettingsWithOrigin,
-		Tag,
-		Device,
-		Module,
-		Origin
+	import {
+		getDeviceByIdentifier,
+		getTagByIdentifier,
+		globalNavSelectedTargetType,
+		saveState
 	} from '$lib/state';
 	import {
-		selectedDevice,
-		selectedTag,
-		selectedTarget,
-		selectedContext,
-		selectedConfigTarget,
-		selectedConfigModule
-	} from '$lib/deviceSelectHelper';
-	import DeployActions from '$lib/DeployActions.svelte';
+		type ModuleSettings,
+		type ModuleSettingsWithOrigin,
+		type Tag,
+		type Device,
+		type Module,
+		type Origin,
+		globalNavSelectedTarget,
+		state,
+		globalNavSelectedTag,
+		globalNavSelectedDevice
+	} from '$lib/state';
+	import DeployActions from '$lib/components/DeployActions.svelte';
 	import type { PageData } from './$types';
 	import ConfigModuleCard from '$lib/config/ConfigModuleCard.svelte';
 	import HardDrive from 'lucide-svelte/icons/hard-drive';
 	import TagIcon from 'lucide-svelte/icons/tag';
+	import { queryParam } from 'sveltekit-search-params';
+	import { derived } from 'svelte/store';
+	import { page } from '$app/stores';
 
 	export let data: PageData;
 
-	$: modules = getModules($selectedTarget);
+	const configSelectedModule = derived(
+		[page, queryParam('config-selected-module')],
+		([$page, m]) => {
+			let availableModules = $page.data.availableModules as Module[];
+			return availableModules.find((module) => module.type === m);
+		}
+	);
+	const configSelectedModuleContextType = queryParam('config-selected-module-context-type');
+	const configSelectedModuleContext = derived(
+		[
+			configSelectedModuleContextType,
+			queryParam('config-selected-module-context-identifier'),
+			state
+		],
+		([$contextType, $contextIdentifier, s]) => {
+			if ($contextType === 'tag') {
+				return getTagByIdentifier(s, $contextIdentifier);
+			} else if ($contextType === 'device') {
+				return getDeviceByIdentifier(s, $contextIdentifier);
+			}
+		}
+	);
 
 	const getOrigin = (target: Tag | Device): Origin => {
 		return {
@@ -46,9 +71,7 @@
 		let tagModules: ModuleSettingsWithOrigin[] = [];
 
 		if ('tags' in target) {
-			let usedTags = target.tags.flatMap(
-				(t) => data.state.tags.find((tag) => tag.identifier === t) ?? []
-			);
+			let usedTags = target.tags.flatMap((t) => getTagByIdentifier($state, t) ?? []);
 
 			tagModules = usedTags.flatMap((t) =>
 				t.modules.map((m) => ({ ...getOrigin(t), priority: t.priority, ...m }))
@@ -71,24 +94,11 @@
 		return getModuleSettings(target)?.filter((s) => s.type === module?.type);
 	};
 
-	const getModules = (target: Tag | Device | undefined) => {
-		let settings = getModuleSettings(target);
-		return data.availableModules.filter((m) => settings?.find((s) => s.type === m.type)) ?? [];
-	};
-
-	const addModule = (target: Tag | Device | undefined, module: ModuleSettings | Module) => {
-		if (target && !target.modules.find((m) => m.type === module.type)) {
-			target.modules = [...target.modules, { type: module.type, settings: {} }];
-			saveState(data.state);
-		}
-	};
-
 	const removeModule = (target: Tag | Device | undefined, module: ModuleSettings | Module) => {
 		if (target) {
 			target.modules = target.modules.filter((m) => m.type !== module.type);
 		}
-
-		saveState(data.state);
+		saveState();
 	};
 
 	const getSettings = (
@@ -120,8 +130,6 @@
 		settingKey: string,
 		value: any
 	) => {
-		addModule(target, module);
-
 		let targetModule = target?.modules.find((m) => m.type === module.type);
 
 		if (target && targetModule) {
@@ -132,22 +140,28 @@
 			}
 		}
 
-		saveState(data.state);
+		saveState();
 	};
 </script>
 
 <div class="flex justify-between mb-4">
 	<h1 class="text-3xl font-bold dark:text-white">
-		{#if $selectedTag}
+		{#if $globalNavSelectedTag}
 			{$t('config.header.tag-module', {
-				values: { module: $selectedConfigModule?.displayName, tag: $selectedTag.displayName }
+				values: {
+					module: $configSelectedModule?.displayName,
+					tag: $globalNavSelectedTag.displayName
+				}
 			})}
-		{:else if $selectedDevice}
+		{:else if $globalNavSelectedDevice}
 			{$t('config.header.device-module', {
-				values: { module: $selectedConfigModule?.displayName, device: $selectedDevice.displayName }
+				values: {
+					module: $configSelectedModule?.displayName,
+					device: $globalNavSelectedDevice.displayName
+				}
 			})}
 		{:else}
-			{$t('config.header.module', { values: { module: $selectedConfigModule?.displayName } })}
+			{$t('config.header.module', { values: { module: $configSelectedModule?.displayName } })}
 		{/if}
 	</h1>
 	<DeployActions />
@@ -155,40 +169,50 @@
 <div class="grid grid-flow-row grid-cols-5 gap-4">
 	<Card class="col-span-1 max-w-none">
 		<ModuleList
-			target={$selectedTarget}
-			selfModules={getSelfModules($selectedTarget)}
-			context={$selectedContext}
+			contextType={$globalNavSelectedTargetType}
+			context={$globalNavSelectedTarget}
+			selfModules={getSelfModules($globalNavSelectedTarget)}
 			canChangeModules={true}
 			availableModules={data.availableModules}
-			{addModule}
+			configSelectedModule={$configSelectedModule}
+			configSelectedModuleContext={$configSelectedModuleContext}
+			configSelectedModuleContextType={$configSelectedModuleContextType}
 			{removeModule}
 		>
 			<slot slot="icon">
-				{#if $selectedTag}
+				{#if $globalNavSelectedTag}
 					<TagIcon />
-				{:else if $selectedDevice}
+				{:else if $globalNavSelectedDevice}
 					<HardDrive />
 				{/if}
 			</slot>
 		</ModuleList>
-		{#each $selectedDevice?.tags ?? [] as tagIdentifier}
-			{@const usedTag = data.state.tags.find((t) => t.identifier === tagIdentifier)}
-			<ModuleList target={usedTag} selfModules={getSelfModules(usedTag)} context="tag">
+		{#each $globalNavSelectedDevice?.tags ?? [] as tagIdentifier}
+			{@const usedTag = getTagByIdentifier($state, tagIdentifier)}
+			<ModuleList
+				contextType="tag"
+				context={usedTag}
+				selfModules={getSelfModules(usedTag)}
+				configSelectedModule={$configSelectedModule}
+				configSelectedModuleContext={$configSelectedModuleContext}
+				configSelectedModuleContextType={$configSelectedModuleContextType}
+			>
 				<TagIcon slot="icon" />
 			</ModuleList>
 		{/each}
 	</Card>
-	{#if $selectedConfigModule && $selectedConfigTarget?.modules.find((m) => m.type === $selectedConfigModule.type)}
+	{#if $configSelectedModule && $configSelectedModuleContext?.modules.find((m) => m.type === $configSelectedModule.type)}
 		<div class="col-span-4">
 			<ConfigModuleCard
-				module={$selectedConfigModule}
-				settings={getOwnModuleSettings($selectedConfigTarget).find(
-					(s) => s.type === $selectedConfigModule?.type
+				module={$configSelectedModule}
+				settings={getOwnModuleSettings($configSelectedModuleContext).find(
+					(s) => s.type === $configSelectedModule?.type
 				)}
-				otherSettings={getOtherSettings($selectedTarget, $selectedConfigModule)}
-				setSetting={(module, key, value) => setSetting($selectedConfigTarget, module, key, value)}
-				showRouting={$selectedContext === 'device'}
-				canEdit={$selectedTarget === $selectedConfigTarget}
+				otherSettings={getOtherSettings($globalNavSelectedTarget, $configSelectedModule)}
+				setSetting={(module, key, value) =>
+					setSetting($configSelectedModuleContext, module, key, value)}
+				showRouting={$configSelectedModuleContextType === 'device'}
+				canEdit={$globalNavSelectedTarget === $configSelectedModuleContext}
 			/>
 		</div>
 	{/if}
diff --git a/frontend/src/routes/devices/+page.svelte b/frontend/src/routes/devices/+page.svelte
index f9b08e1b..a0d5603e 100644
--- a/frontend/src/routes/devices/+page.svelte
+++ b/frontend/src/routes/devices/+page.svelte
@@ -15,14 +15,14 @@
 	import TagIcon from 'lucide-svelte/icons/tag';
 	import GripVertical from 'lucide-svelte/icons/grip-vertical';
 	import { controllerHost, controllerProtocol } from '$lib/api';
-	import DeployActions from '$lib/DeployActions.svelte';
-	import CreateDeviceModal from '$lib/CreateDeviceModal.svelte';
-	import EditTagModal from '$lib/EditTagModal.svelte';
-	import TableBodyEditCell from '$lib/TableBodyEditCell.svelte';
-	import { deviceUrl } from '$lib/deviceSelectHelper';
+	import DeployActions from '$lib/components/DeployActions.svelte';
+	import CreateDeviceModal from './CreateDeviceModal.svelte';
+	import EditTagModal from './EditTagModal.svelte';
+	import TableBodyEditCell from '$lib/components/TableBodyEditCell.svelte';
 	import type { PageData } from './$types';
 	import { dndzone, SOURCES, TRIGGERS } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
+	import { buildGlobalNavSearchParam } from '$lib/searchParamHelpers';
 
 	const flipDurationMs = 200;
 	let dragDisabled = true;
@@ -142,7 +142,6 @@
 	<DeployActions />
 </div>
 <CreateDeviceModal
-	state={data.state}
 	open={openModal === ModalType.CreateDevice}
 	onClose={closeCreateDeviceModal}
 	thymisDevice={data.availableModules.find(
@@ -203,7 +202,7 @@
 									pill
 									size="sm"
 									class="p-3 py-1.5"
-									href={`/config?${deviceUrl($page.url.search, 'tag', tag)}`}
+									href={`/config?${buildGlobalNavSearchParam($page.url.search, 'tag', tag)}`}
 								>
 									<TagIcon size={20} class="mr-2" />
 									<!-- <span
@@ -223,7 +222,11 @@
 					<div class="flex gap-2">
 						<Button
 							color="alternative"
-							href={`/config?${deviceUrl($page.url.search, 'device', device.data.identifier)}`}
+							href={`/config?${buildGlobalNavSearchParam(
+								$page.url.search,
+								'device',
+								device.data.identifier
+							)}`}
 						>
 							{$t('devices.actions.edit')}
 						</Button>
diff --git a/frontend/src/lib/CreateDeviceModal.svelte b/frontend/src/routes/devices/CreateDeviceModal.svelte
similarity index 65%
rename from frontend/src/lib/CreateDeviceModal.svelte
rename to frontend/src/routes/devices/CreateDeviceModal.svelte
index b6fd8ead..a7973de2 100644
--- a/frontend/src/lib/CreateDeviceModal.svelte
+++ b/frontend/src/routes/devices/CreateDeviceModal.svelte
@@ -1,17 +1,15 @@
 <script lang="ts">
 	import { t } from 'svelte-i18n';
-	import InstallationStepper from '$lib/InstallationStepper.svelte';
+	import InstallationStepper from './InstallationStepper.svelte';
 	import { Modal } from 'flowbite-svelte';
-	import { saveState, type Device, type State, type Module } from './state';
+	import { saveState, type Device, type State, type Module, state } from '../../lib/state';
 
-	export let state: State;
 	export let open = false;
 	export let onClose: (() => void) | undefined = undefined;
 	export let thymisDevice: Module | undefined = undefined;
 
 	function onSubmit(submitData: Device): void {
-		state.devices = [...state.devices, { ...submitData }];
-		saveState(state);
+		$state.devices = [...$state.devices, { ...submitData }];
 	}
 </script>
 
diff --git a/frontend/src/lib/EditTagModal.svelte b/frontend/src/routes/devices/EditTagModal.svelte
similarity index 100%
rename from frontend/src/lib/EditTagModal.svelte
rename to frontend/src/routes/devices/EditTagModal.svelte
diff --git a/frontend/src/lib/InstallationStepper.svelte b/frontend/src/routes/devices/InstallationStepper.svelte
similarity index 98%
rename from frontend/src/lib/InstallationStepper.svelte
rename to frontend/src/routes/devices/InstallationStepper.svelte
index b2e6a9c4..e3771433 100644
--- a/frontend/src/lib/InstallationStepper.svelte
+++ b/frontend/src/routes/devices/InstallationStepper.svelte
@@ -19,8 +19,8 @@
 	import Apple from 'lucide-svelte/icons/apple';
 	import AppWindow from 'lucide-svelte/icons/app-window';
 	import Wrench from 'lucide-svelte/icons/wrench';
-	import type { Device, Module } from './state';
-	import ConfigSelectOne from './config/ConfigSelectOne.svelte';
+	import type { Device, Module } from '../../lib/state';
+	import ConfigSelectOne from '../../lib/config/ConfigSelectOne.svelte';
 
 	export let onSubmit: null | ((data: Device) => void) = null;
 	export let thymisDevice: Module | undefined = undefined;
diff --git a/frontend/src/routes/overview/+page.svelte b/frontend/src/routes/overview/+page.svelte
index b3bb9dd1..46e23469 100644
--- a/frontend/src/routes/overview/+page.svelte
+++ b/frontend/src/routes/overview/+page.svelte
@@ -2,6 +2,7 @@
 	import { t } from 'svelte-i18n';
 	import type { PageData } from './$types';
 	import { Card, P } from 'flowbite-svelte';
+	import { state } from '$lib/state';
 
 	export let data: PageData;
 </script>
@@ -17,7 +18,7 @@
 		<div class="flex items-center justify-around">
 			<div class="flex items-center justify-center bg-primary-400 rounded-full p-5 w-full">
 				<P weight="bold" size="2xl" color="text-white dark:text-gray-900">
-					{$t('overview.devices', { values: { count: data.state.devices.length } })}
+					{$t('overview.devices', { values: { count: $state.devices.length } })}
 				</P>
 			</div>
 		</div>
@@ -27,7 +28,7 @@
 		<div class="flex items-center justify-around">
 			<div class="flex items-center justify-center bg-primary-400 rounded-full p-5 w-full">
 				<P weight="bold" size="2xl" color="text-white dark:text-gray-900">
-					{$t('overview.tags', { values: { count: data.state.tags.length } })}
+					{$t('overview.tags', { values: { count: $state.tags.length } })}
 				</P>
 			</div>
 		</div>
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index e666e85e..a465e74e 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { t } from 'svelte-i18n';
 	import type { PageData } from './$types';
-	import { saveState } from '$lib/state';
-	import TableBodyEditCell from '$lib/TableBodyEditCell.svelte';
+	import { saveState, state } from '$lib/state';
+	import TableBodyEditCell from '$lib/components/TableBodyEditCell.svelte';
 	import {
 		Button,
 		Heading,
@@ -24,7 +24,7 @@
 		do {
 			key = `new-repo-${num}`;
 			num++;
-		} while (data.state.repositories[key]);
+		} while ($state.repositories[key]);
 
 		return key;
 	};
@@ -32,31 +32,28 @@
 	const addRepo = () => {
 		let key = generateUniqueKey();
 
-		data.state.repositories = {
-			...data.state.repositories,
+		$state.repositories = {
+			...$state.repositories,
 			[key]: {
 				url: 'git+https://github.com/Thymis-io/thymis.git'
 			}
 		};
-
-		saveState(data.state);
 	};
 
 	const deleteRepo = (name: string) => {
-		delete data.state.repositories[name];
-		saveState(data.state);
+		$state.repositories = Object.fromEntries(
+			Object.entries($state.repositories).filter(([key, value]) => key !== name)
+		);
 	};
 
 	const changeRepoName = (oldName: string, newName: string) => {
-		if (!data.state.repositories[newName]) {
-			data.state.repositories = Object.fromEntries(
-				Object.entries(data.state.repositories).map(([key, value]) =>
+		if (!$state.repositories[newName]) {
+			$state.repositories = Object.fromEntries(
+				Object.entries($state.repositories).map(([key, value]) =>
 					key === oldName ? [newName, value] : [key, value]
 				)
 			);
 		}
-
-		saveState(data.state);
 	};
 </script>
 
@@ -69,10 +66,10 @@
 		<TableHeadCell>{$t('settings.repo.actions')}</TableHeadCell>
 	</TableHead>
 	<TableBody>
-		{#each Object.entries(data.state.repositories) as [name, repo]}
+		{#each Object.entries($state.repositories) as [name, repo]}
 			<TableBodyRow>
 				<TableBodyEditCell bind:value={name} onEnter={(newName) => changeRepoName(name, newName)} />
-				<TableBodyEditCell bind:value={repo.url} onEnter={() => saveState(data.state)} />
+				<TableBodyEditCell bind:value={repo.url} />
 				<TableBodyCell>
 					<div class="flex gap-1">
 						<Button on:click={() => deleteRepo(name)}>
diff --git a/frontend/src/routes/vnc/+page.svelte b/frontend/src/routes/vnc/+page.svelte
index a967c5d0..2e2defc2 100644
--- a/frontend/src/routes/vnc/+page.svelte
+++ b/frontend/src/routes/vnc/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { t } from 'svelte-i18n';
 	import type { PageData } from './$types';
 	import { P, Card } from 'flowbite-svelte';
-	import DeployActions from '$lib/DeployActions.svelte';
+	import DeployActions from '$lib/components/DeployActions.svelte';
+	import { state } from '$lib/state';
 
 	export let data: PageData;
 </script>
@@ -12,7 +12,7 @@
 	<DeployActions />
 </div>
 <div class="grid grid-cols-3 gap-4">
-	{#each data.state.devices as device}
+	{#each $state.devices as device}
 		<div>
 			<P class="mb-2 text-center">{device.displayName}</P>
 			<Card class="w-full max-w-none">