From cd9601530d1cbcfc8662b6ff5b7af602178ca357 Mon Sep 17 00:00:00 2001
From: Benjamin Strasser <bp.strasser@gmail.com>
Date: Fri, 31 May 2024 22:49:56 +0200
Subject: [PATCH 01/10] added sidebar

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>
---
 src/routes/(authenticated)/+layout.svelte     | 47 +++++++++++++++++++
 .../(authenticated)/projects/+page.svelte     | 16 +++++++
 .../projects/[id]/+layout.svelte              | 41 ++++++++++++++++
 .../projects/[id]/keys/+page.svelte           |  1 +
 .../projects/[id]/languages/+page.svelte      |  1 +
 .../projects/[id]/settings/+page.svelte       |  1 +
 .../projects/[id]/translations/+page.svelte   |  1 +
 src/routes/(authenticated)/sidebar-context.ts | 12 +++++
 src/routes/guarded/+page.svelte               |  1 -
 9 files changed, 120 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/(authenticated)/+layout.svelte
 create mode 100644 src/routes/(authenticated)/projects/+page.svelte
 create mode 100644 src/routes/(authenticated)/projects/[id]/+layout.svelte
 create mode 100644 src/routes/(authenticated)/projects/[id]/keys/+page.svelte
 create mode 100644 src/routes/(authenticated)/projects/[id]/languages/+page.svelte
 create mode 100644 src/routes/(authenticated)/projects/[id]/settings/+page.svelte
 create mode 100644 src/routes/(authenticated)/projects/[id]/translations/+page.svelte
 create mode 100644 src/routes/(authenticated)/sidebar-context.ts
 delete mode 100644 src/routes/guarded/+page.svelte

diff --git a/src/routes/(authenticated)/+layout.svelte b/src/routes/(authenticated)/+layout.svelte
new file mode 100644
index 00000000..51e90332
--- /dev/null
+++ b/src/routes/(authenticated)/+layout.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { setContext } from 'svelte'
+	import { type Writable, writable } from 'svelte/store'
+	import type { NavigationElement } from './sidebar-context'
+	import { page } from '$app/stores'
+	import { ThemeSelector } from '$components/ui/theme-selector'
+
+	const sidebarElements: Writable<NavigationElement[]> = writable([])
+
+	setContext('sidebar', sidebarElements)
+</script>
+
+<div class="flex h-full">
+	<div class="flex h-full w-80 flex-none flex-col bg-secondary text-secondary-foreground">
+		<!-- Top Section -->
+		<div class="m-8 mb-6 text-2xl">
+			<span>⌘ Tiny-TMS</span>
+		</div>
+
+		<div class="mx-4 flex-grow">
+			{#each $sidebarElements as element}
+				<a
+					href={element.route}
+					class="flex cursor-pointer rounded-lg border border-transparent p-4 transition duration-100 ease-in-out hover:border-primary"
+					class:selected={$page.url.pathname.endsWith(element.route)}
+				>
+					<svelte:component this={element.icon} class="mr-2"></svelte:component>
+					<div>{element.name}</div>
+				</a>
+			{/each}
+		</div>
+
+		<div class="m-4 mt-auto flex items-center">
+			<div class="mr-2.5 h-10 w-10 rounded-full bg-yellow-300"></div>
+			<div class="mr-auto">My Account</div>
+			<ThemeSelector />
+		</div>
+	</div>
+
+	<slot></slot>
+</div>
+
+<style>
+	.selected {
+		@apply bg-primary-foreground;
+	}
+</style>
diff --git a/src/routes/(authenticated)/projects/+page.svelte b/src/routes/(authenticated)/projects/+page.svelte
new file mode 100644
index 00000000..97e2df73
--- /dev/null
+++ b/src/routes/(authenticated)/projects/+page.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { getSidebarElements } from '../sidebar-context'
+	import List from 'lucide-svelte/icons/list'
+
+	const sidebarElements = getSidebarElements()
+
+	$sidebarElements = [
+		{
+			name: 'My Projects',
+			route: '/projects',
+			icon: List
+		}
+	]
+</script>
+
+Projects
diff --git a/src/routes/(authenticated)/projects/[id]/+layout.svelte b/src/routes/(authenticated)/projects/[id]/+layout.svelte
new file mode 100644
index 00000000..d8c97e39
--- /dev/null
+++ b/src/routes/(authenticated)/projects/[id]/+layout.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import ArrowBigLeft from 'lucide-svelte/icons/arrow-big-left'
+	import ClipboardType from 'lucide-svelte/icons/clipboard-type'
+	import FileKey from 'lucide-svelte/icons/file-key'
+	import Languages from 'lucide-svelte/icons/languages'
+	import Settings from 'lucide-svelte/icons/settings'
+
+	import { getSidebarElements } from '../../sidebar-context'
+
+	const sidebarElements = getSidebarElements()
+
+	$sidebarElements = [
+		{
+			name: 'My Projects',
+			route: '/projects',
+			icon: ArrowBigLeft
+		},
+		{
+			name: 'Translations',
+			route: 'translations',
+			icon: ClipboardType
+		},
+		{
+			name: 'Keys',
+			route: 'keys',
+			icon: FileKey
+		},
+		{
+			name: 'Languages',
+			route: 'languages',
+			icon: Languages
+		},
+		{
+			name: 'Settings',
+			route: 'settings',
+			icon: Settings
+		}
+	]
+</script>
+
+<slot></slot>
diff --git a/src/routes/(authenticated)/projects/[id]/keys/+page.svelte b/src/routes/(authenticated)/projects/[id]/keys/+page.svelte
new file mode 100644
index 00000000..0bdfd492
--- /dev/null
+++ b/src/routes/(authenticated)/projects/[id]/keys/+page.svelte
@@ -0,0 +1 @@
+keys
diff --git a/src/routes/(authenticated)/projects/[id]/languages/+page.svelte b/src/routes/(authenticated)/projects/[id]/languages/+page.svelte
new file mode 100644
index 00000000..eab42fea
--- /dev/null
+++ b/src/routes/(authenticated)/projects/[id]/languages/+page.svelte
@@ -0,0 +1 @@
+languages
diff --git a/src/routes/(authenticated)/projects/[id]/settings/+page.svelte b/src/routes/(authenticated)/projects/[id]/settings/+page.svelte
new file mode 100644
index 00000000..a01c11a4
--- /dev/null
+++ b/src/routes/(authenticated)/projects/[id]/settings/+page.svelte
@@ -0,0 +1 @@
+settings
diff --git a/src/routes/(authenticated)/projects/[id]/translations/+page.svelte b/src/routes/(authenticated)/projects/[id]/translations/+page.svelte
new file mode 100644
index 00000000..a9d988f7
--- /dev/null
+++ b/src/routes/(authenticated)/projects/[id]/translations/+page.svelte
@@ -0,0 +1 @@
+Translation
diff --git a/src/routes/(authenticated)/sidebar-context.ts b/src/routes/(authenticated)/sidebar-context.ts
new file mode 100644
index 00000000..bef27293
--- /dev/null
+++ b/src/routes/(authenticated)/sidebar-context.ts
@@ -0,0 +1,12 @@
+import { type Writable } from 'svelte/store'
+import { getContext } from 'svelte'
+
+export type NavigationElement = {
+	name: string
+	icon: ConstructorOfATypedSvelteComponent
+	route: string
+}
+
+export function getSidebarElements(): Writable<NavigationElement[]> {
+	return getContext<Writable<NavigationElement[]>>('sidebar')
+}
diff --git a/src/routes/guarded/+page.svelte b/src/routes/guarded/+page.svelte
deleted file mode 100644
index e16ce2db..00000000
--- a/src/routes/guarded/+page.svelte
+++ /dev/null
@@ -1 +0,0 @@
-Hello Guarded Page

From f3b246197264ce36f8519a5926534adcd96e0ef2 Mon Sep 17 00:00:00 2001
From: Benjamin Strasser <bp.strasser@gmail.com>
Date: Sat, 1 Jun 2024 09:20:45 +0200
Subject: [PATCH 02/10] Sidebar is collapsable

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>
---
 src/routes/(authenticated)/+layout.svelte | 59 ++++++++++++++++++-----
 1 file changed, 48 insertions(+), 11 deletions(-)

diff --git a/src/routes/(authenticated)/+layout.svelte b/src/routes/(authenticated)/+layout.svelte
index 51e90332..a70635eb 100644
--- a/src/routes/(authenticated)/+layout.svelte
+++ b/src/routes/(authenticated)/+layout.svelte
@@ -1,39 +1,69 @@
 <script lang="ts">
 	import { setContext } from 'svelte'
-	import { type Writable, writable } from 'svelte/store'
+	import { writable } from 'svelte/store'
 	import type { NavigationElement } from './sidebar-context'
 	import { page } from '$app/stores'
 	import { ThemeSelector } from '$components/ui/theme-selector'
 
-	const sidebarElements: Writable<NavigationElement[]> = writable([])
+	import ChevronLeft from 'lucide-svelte/icons/chevron-left'
+	import ChevronRight from 'lucide-svelte/icons/chevron-right'
 
+	const sidebarElements = writable<NavigationElement[]>([])
 	setContext('sidebar', sidebarElements)
+
+	let collapsedSidebar = false
 </script>
 
 <div class="flex h-full">
-	<div class="flex h-full w-80 flex-none flex-col bg-secondary text-secondary-foreground">
+	<div
+		class:collapsedSidebar
+		class="sidebar duration-400 flex h-full w-80 flex-none flex-col bg-secondary text-secondary-foreground transition-all ease-in-out"
+	>
 		<!-- Top Section -->
-		<div class="m-8 mb-6 text-2xl">
-			<span>⌘ Tiny-TMS</span>
+		<div class="m-8 mb-6 mr-0 flex items-center text-2xl">
+			<div>⌘</div>
+			<div class="ml-2 overflow-hidden whitespace-nowrap" class:collapsedSidebar>Tiny-TMS</div>
+			<button
+				on:click={() => (collapsedSidebar = !collapsedSidebar)}
+				class="ml-auto mr-2 cursor-pointer rounded-full hover:bg-primary-foreground"
+			>
+				{#if collapsedSidebar}
+					<ChevronRight />
+				{:else}
+					<ChevronLeft />
+				{/if}
+			</button>
 		</div>
 
 		<div class="mx-4 flex-grow">
 			{#each $sidebarElements as element}
 				<a
 					href={element.route}
-					class="flex cursor-pointer rounded-lg border border-transparent p-4 transition duration-100 ease-in-out hover:border-primary"
+					class="flex cursor-pointer rounded-lg border border-transparent p-4 hover:border-primary"
 					class:selected={$page.url.pathname.endsWith(element.route)}
 				>
-					<svelte:component this={element.icon} class="mr-2"></svelte:component>
-					<div>{element.name}</div>
+					<svelte:component this={element.icon} class="min-h-6 min-w-6"></svelte:component>
+					<div
+						class="ml-2 overflow-hidden whitespace-nowrap"
+						class:collapsedElement={collapsedSidebar}
+					>
+						{element.name}
+					</div>
 				</a>
 			{/each}
 		</div>
 
 		<div class="m-4 mt-auto flex items-center">
-			<div class="mr-2.5 h-10 w-10 rounded-full bg-yellow-300"></div>
-			<div class="mr-auto">My Account</div>
-			<ThemeSelector />
+			<div class="ml-4 mr-2.5 min-h-8 min-w-8 rounded-full bg-yellow-300"></div>
+			<div
+				class:collapsedElement={collapsedSidebar}
+				class="mr-auto overflow-hidden whitespace-nowrap"
+			>
+				My Account
+			</div>
+			<div class:collapsedElement={collapsedSidebar} class="overflow-hidden">
+				<ThemeSelector />
+			</div>
 		</div>
 	</div>
 
@@ -41,6 +71,13 @@
 </div>
 
 <style>
+	.collapsedElement {
+		display: none;
+	}
+
+	.collapsedSidebar {
+		@apply w-[90px];
+	}
 	.selected {
 		@apply bg-primary-foreground;
 	}

From e3cb4eae38922363be686189afc6de38b1be367e Mon Sep 17 00:00:00 2001
From: Benjamin Strasser <bp.strasser@gmail.com>
Date: Sat, 1 Jun 2024 10:57:05 +0200
Subject: [PATCH 03/10] Sidebar state is now synced with localstorage

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>
---
 src/routes/(authenticated)/+layout.svelte | 28 ++++++++++++++++-------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/routes/(authenticated)/+layout.svelte b/src/routes/(authenticated)/+layout.svelte
index a70635eb..5fb61bad 100644
--- a/src/routes/(authenticated)/+layout.svelte
+++ b/src/routes/(authenticated)/+layout.svelte
@@ -7,27 +7,39 @@
 
 	import ChevronLeft from 'lucide-svelte/icons/chevron-left'
 	import ChevronRight from 'lucide-svelte/icons/chevron-right'
+	import { browser } from '$app/environment'
 
 	const sidebarElements = writable<NavigationElement[]>([])
 	setContext('sidebar', sidebarElements)
 
-	let collapsedSidebar = false
+	let collapsedSidebar = writable(false)
+	if (browser) {
+		$collapsedSidebar = localStorage.getItem('collapsedSidebar') === 'true'
+		collapsedSidebar.subscribe((value) => {
+			localStorage.setItem('collapsedSidebar', value.toString())
+		})
+	}
 </script>
 
 <div class="flex h-full">
 	<div
-		class:collapsedSidebar
+		class:collapsedSidebar={$collapsedSidebar}
 		class="sidebar duration-400 flex h-full w-80 flex-none flex-col bg-secondary text-secondary-foreground transition-all ease-in-out"
 	>
 		<!-- Top Section -->
 		<div class="m-8 mb-6 mr-0 flex items-center text-2xl">
 			<div>⌘</div>
-			<div class="ml-2 overflow-hidden whitespace-nowrap" class:collapsedSidebar>Tiny-TMS</div>
+			<div
+				class="ml-2 overflow-hidden whitespace-nowrap"
+				class:collapsedElement={$collapsedSidebar}
+			>
+				Tiny-TMS
+			</div>
 			<button
-				on:click={() => (collapsedSidebar = !collapsedSidebar)}
+				on:click={() => ($collapsedSidebar = !$collapsedSidebar)}
 				class="ml-auto mr-2 cursor-pointer rounded-full hover:bg-primary-foreground"
 			>
-				{#if collapsedSidebar}
+				{#if $collapsedSidebar}
 					<ChevronRight />
 				{:else}
 					<ChevronLeft />
@@ -45,7 +57,7 @@
 					<svelte:component this={element.icon} class="min-h-6 min-w-6"></svelte:component>
 					<div
 						class="ml-2 overflow-hidden whitespace-nowrap"
-						class:collapsedElement={collapsedSidebar}
+						class:collapsedElement={$collapsedSidebar}
 					>
 						{element.name}
 					</div>
@@ -56,12 +68,12 @@
 		<div class="m-4 mt-auto flex items-center">
 			<div class="ml-4 mr-2.5 min-h-8 min-w-8 rounded-full bg-yellow-300"></div>
 			<div
-				class:collapsedElement={collapsedSidebar}
+				class:collapsedElement={$collapsedSidebar}
 				class="mr-auto overflow-hidden whitespace-nowrap"
 			>
 				My Account
 			</div>
-			<div class:collapsedElement={collapsedSidebar} class="overflow-hidden">
+			<div class:collapsedElement={$collapsedSidebar} class="overflow-hidden">
 				<ThemeSelector />
 			</div>
 		</div>

From d4a588459046e33674dcb884ce0c0717cb82e63f Mon Sep 17 00:00:00 2001
From: Benjamin Strasser <bp.strasser@gmail.com>
Date: Sun, 2 Jun 2024 16:49:34 +0200
Subject: [PATCH 04/10] Changed sidebar communciation to use load functions

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>
---
 src/routes/(authenticated)/+layout.svelte     |  8 ++--
 .../(authenticated)/projects/+page.svelte     | 15 -------
 src/routes/(authenticated)/projects/+page.ts  | 16 ++++++++
 .../projects/[id]/+layout.svelte              | 41 -------------------
 .../(authenticated)/projects/[id]/+layout.ts  | 40 ++++++++++++++++++
 src/routes/(authenticated)/sidebar-context.ts | 12 ------
 src/routes/(authenticated)/sidebar.ts         |  5 +++
 7 files changed, 66 insertions(+), 71 deletions(-)
 create mode 100644 src/routes/(authenticated)/projects/+page.ts
 delete mode 100644 src/routes/(authenticated)/projects/[id]/+layout.svelte
 create mode 100644 src/routes/(authenticated)/projects/[id]/+layout.ts
 delete mode 100644 src/routes/(authenticated)/sidebar-context.ts
 create mode 100644 src/routes/(authenticated)/sidebar.ts

diff --git a/src/routes/(authenticated)/+layout.svelte b/src/routes/(authenticated)/+layout.svelte
index 5fb61bad..82431226 100644
--- a/src/routes/(authenticated)/+layout.svelte
+++ b/src/routes/(authenticated)/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { setContext } from 'svelte'
 	import { writable } from 'svelte/store'
-	import type { NavigationElement } from './sidebar-context'
+	import type { NavigationElement } from './sidebar'
 	import { page } from '$app/stores'
 	import { ThemeSelector } from '$components/ui/theme-selector'
 
@@ -9,7 +9,9 @@
 	import ChevronRight from 'lucide-svelte/icons/chevron-right'
 	import { browser } from '$app/environment'
 
-	const sidebarElements = writable<NavigationElement[]>([])
+	let sidebarElements: NavigationElement[] = []
+	$: sidebarElements = $page.data.sidebarElements
+
 	setContext('sidebar', sidebarElements)
 
 	let collapsedSidebar = writable(false)
@@ -48,7 +50,7 @@
 		</div>
 
 		<div class="mx-4 flex-grow">
-			{#each $sidebarElements as element}
+			{#each sidebarElements as element}
 				<a
 					href={element.route}
 					class="flex cursor-pointer rounded-lg border border-transparent p-4 hover:border-primary"
diff --git a/src/routes/(authenticated)/projects/+page.svelte b/src/routes/(authenticated)/projects/+page.svelte
index 97e2df73..c07db15a 100644
--- a/src/routes/(authenticated)/projects/+page.svelte
+++ b/src/routes/(authenticated)/projects/+page.svelte
@@ -1,16 +1 @@
-<script lang="ts">
-	import { getSidebarElements } from '../sidebar-context'
-	import List from 'lucide-svelte/icons/list'
-
-	const sidebarElements = getSidebarElements()
-
-	$sidebarElements = [
-		{
-			name: 'My Projects',
-			route: '/projects',
-			icon: List
-		}
-	]
-</script>
-
 Projects
diff --git a/src/routes/(authenticated)/projects/+page.ts b/src/routes/(authenticated)/projects/+page.ts
new file mode 100644
index 00000000..a562a8da
--- /dev/null
+++ b/src/routes/(authenticated)/projects/+page.ts
@@ -0,0 +1,16 @@
+import List from 'lucide-svelte/icons/list'
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = () => {
+	const sidebarElements = [
+		{
+			name: 'My Projects',
+			route: '/projects',
+			icon: List
+		}
+	]
+
+	return {
+		sidebarElements
+	}
+}
diff --git a/src/routes/(authenticated)/projects/[id]/+layout.svelte b/src/routes/(authenticated)/projects/[id]/+layout.svelte
deleted file mode 100644
index d8c97e39..00000000
--- a/src/routes/(authenticated)/projects/[id]/+layout.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-	import ArrowBigLeft from 'lucide-svelte/icons/arrow-big-left'
-	import ClipboardType from 'lucide-svelte/icons/clipboard-type'
-	import FileKey from 'lucide-svelte/icons/file-key'
-	import Languages from 'lucide-svelte/icons/languages'
-	import Settings from 'lucide-svelte/icons/settings'
-
-	import { getSidebarElements } from '../../sidebar-context'
-
-	const sidebarElements = getSidebarElements()
-
-	$sidebarElements = [
-		{
-			name: 'My Projects',
-			route: '/projects',
-			icon: ArrowBigLeft
-		},
-		{
-			name: 'Translations',
-			route: 'translations',
-			icon: ClipboardType
-		},
-		{
-			name: 'Keys',
-			route: 'keys',
-			icon: FileKey
-		},
-		{
-			name: 'Languages',
-			route: 'languages',
-			icon: Languages
-		},
-		{
-			name: 'Settings',
-			route: 'settings',
-			icon: Settings
-		}
-	]
-</script>
-
-<slot></slot>
diff --git a/src/routes/(authenticated)/projects/[id]/+layout.ts b/src/routes/(authenticated)/projects/[id]/+layout.ts
new file mode 100644
index 00000000..8c2e6c5b
--- /dev/null
+++ b/src/routes/(authenticated)/projects/[id]/+layout.ts
@@ -0,0 +1,40 @@
+import ArrowBigLeft from 'lucide-svelte/icons/arrow-big-left'
+import ClipboardType from 'lucide-svelte/icons/clipboard-type'
+import FileKey from 'lucide-svelte/icons/file-key'
+import Languages from 'lucide-svelte/icons/languages'
+import Settings from 'lucide-svelte/icons/settings'
+import type { LayoutLoad } from './$types'
+
+export const load: LayoutLoad = () => {
+	const sidebarElements = [
+		{
+			name: 'My Projects',
+			route: '/projects',
+			icon: ArrowBigLeft
+		},
+		{
+			name: 'Translations',
+			route: 'translations',
+			icon: ClipboardType
+		},
+		{
+			name: 'Keys',
+			route: 'keys',
+			icon: FileKey
+		},
+		{
+			name: 'Languages',
+			route: 'languages',
+			icon: Languages
+		},
+		{
+			name: 'Settings',
+			route: 'settings',
+			icon: Settings
+		}
+	]
+
+	return {
+		sidebarElements
+	}
+}
diff --git a/src/routes/(authenticated)/sidebar-context.ts b/src/routes/(authenticated)/sidebar-context.ts
deleted file mode 100644
index bef27293..00000000
--- a/src/routes/(authenticated)/sidebar-context.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { type Writable } from 'svelte/store'
-import { getContext } from 'svelte'
-
-export type NavigationElement = {
-	name: string
-	icon: ConstructorOfATypedSvelteComponent
-	route: string
-}
-
-export function getSidebarElements(): Writable<NavigationElement[]> {
-	return getContext<Writable<NavigationElement[]>>('sidebar')
-}
diff --git a/src/routes/(authenticated)/sidebar.ts b/src/routes/(authenticated)/sidebar.ts
new file mode 100644
index 00000000..edeb9414
--- /dev/null
+++ b/src/routes/(authenticated)/sidebar.ts
@@ -0,0 +1,5 @@
+export type NavigationElement = {
+	name: string
+	icon: ConstructorOfATypedSvelteComponent
+	route: string
+}

From 66564afe3edd6b658746425a0f18a9b5410405d5 Mon Sep 17 00:00:00 2001
From: Benjamin Strasser <bp.strasser@gmail.com>
Date: Mon, 3 Jun 2024 17:14:20 +0200
Subject: [PATCH 05/10] Moved Sidebar into component

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>
---
 .../sidebar/index.ts}                         |  4 +
 src/components/sidebar/sidebar.svelte         | 87 +++++++++++++++++
 src/routes/(authenticated)/+layout.svelte     | 93 +------------------
 3 files changed, 93 insertions(+), 91 deletions(-)
 rename src/{routes/(authenticated)/sidebar.ts => components/sidebar/index.ts} (64%)
 create mode 100644 src/components/sidebar/sidebar.svelte

diff --git a/src/routes/(authenticated)/sidebar.ts b/src/components/sidebar/index.ts
similarity index 64%
rename from src/routes/(authenticated)/sidebar.ts
rename to src/components/sidebar/index.ts
index edeb9414..29ff27db 100644
--- a/src/routes/(authenticated)/sidebar.ts
+++ b/src/components/sidebar/index.ts
@@ -1,5 +1,9 @@
+import Sidebar from './sidebar.svelte'
+
 export type NavigationElement = {
 	name: string
 	icon: ConstructorOfATypedSvelteComponent
 	route: string
 }
+
+export { Sidebar }
diff --git a/src/components/sidebar/sidebar.svelte b/src/components/sidebar/sidebar.svelte
new file mode 100644
index 00000000..366b37d6
--- /dev/null
+++ b/src/components/sidebar/sidebar.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { writable } from 'svelte/store'
+	import type { NavigationElement } from '.'
+	import { page } from '$app/stores'
+	import { ThemeSelector } from '$components/ui/theme-selector'
+
+	import ChevronLeft from 'lucide-svelte/icons/chevron-left'
+	import ChevronRight from 'lucide-svelte/icons/chevron-right'
+	import { browser } from '$app/environment'
+
+	export let sidebarElements: NavigationElement[] = []
+
+	let collapsedSidebar = writable(false)
+	if (browser) {
+		$collapsedSidebar = localStorage.getItem('collapsedSidebar') === 'true'
+		collapsedSidebar.subscribe((value) => {
+			localStorage.setItem('collapsedSidebar', value.toString())
+		})
+	}
+</script>
+
+<div
+	class:collapsedSidebar={$collapsedSidebar}
+	class="duration-400 flex h-full w-80 flex-none flex-col bg-secondary text-secondary-foreground transition-all ease-in-out"
+>
+	<!-- Top Section -->
+	<div class="m-8 mb-6 mr-0 flex items-center text-2xl">
+		<div>⌘</div>
+		<div class="ml-2 overflow-hidden whitespace-nowrap" class:collapsedElement={$collapsedSidebar}>
+			Tiny-TMS
+		</div>
+		<button
+			on:click={() => ($collapsedSidebar = !$collapsedSidebar)}
+			class="ml-auto mr-2 cursor-pointer rounded-full hover:bg-primary-foreground"
+		>
+			{#if $collapsedSidebar}
+				<ChevronRight />
+			{:else}
+				<ChevronLeft />
+			{/if}
+		</button>
+	</div>
+
+	<div class="mx-4 flex-grow">
+		{#each sidebarElements as element}
+			<a
+				href={element.route}
+				class="flex cursor-pointer rounded-lg border border-transparent p-4 hover:border-primary"
+				class:selected={$page.url.pathname.endsWith(element.route)}
+			>
+				<svelte:component this={element.icon} class="min-h-6 min-w-6"></svelte:component>
+				<div
+					class="ml-2 overflow-hidden whitespace-nowrap"
+					class:collapsedElement={$collapsedSidebar}
+				>
+					{element.name}
+				</div>
+			</a>
+		{/each}
+	</div>
+
+	<div class="m-4 mt-auto flex items-center">
+		<div class="ml-4 mr-2.5 min-h-8 min-w-8 rounded-full bg-yellow-300"></div>
+		<div
+			class:collapsedElement={$collapsedSidebar}
+			class="mr-auto overflow-hidden whitespace-nowrap"
+		>
+			My Account
+		</div>
+		<div class:collapsedElement={$collapsedSidebar} class="overflow-hidden">
+			<ThemeSelector />
+		</div>
+	</div>
+</div>
+
+<style>
+	.collapsedElement {
+		display: none;
+	}
+
+	.collapsedSidebar {
+		@apply w-[90px];
+	}
+	.selected {
+		@apply bg-primary-foreground;
+	}
+</style>
diff --git a/src/routes/(authenticated)/+layout.svelte b/src/routes/(authenticated)/+layout.svelte
index 82431226..40732f4d 100644
--- a/src/routes/(authenticated)/+layout.svelte
+++ b/src/routes/(authenticated)/+layout.svelte
@@ -1,98 +1,9 @@
 <script lang="ts">
-	import { setContext } from 'svelte'
-	import { writable } from 'svelte/store'
-	import type { NavigationElement } from './sidebar'
+	import { Sidebar } from '$components/sidebar'
 	import { page } from '$app/stores'
-	import { ThemeSelector } from '$components/ui/theme-selector'
-
-	import ChevronLeft from 'lucide-svelte/icons/chevron-left'
-	import ChevronRight from 'lucide-svelte/icons/chevron-right'
-	import { browser } from '$app/environment'
-
-	let sidebarElements: NavigationElement[] = []
-	$: sidebarElements = $page.data.sidebarElements
-
-	setContext('sidebar', sidebarElements)
-
-	let collapsedSidebar = writable(false)
-	if (browser) {
-		$collapsedSidebar = localStorage.getItem('collapsedSidebar') === 'true'
-		collapsedSidebar.subscribe((value) => {
-			localStorage.setItem('collapsedSidebar', value.toString())
-		})
-	}
 </script>
 
 <div class="flex h-full">
-	<div
-		class:collapsedSidebar={$collapsedSidebar}
-		class="sidebar duration-400 flex h-full w-80 flex-none flex-col bg-secondary text-secondary-foreground transition-all ease-in-out"
-	>
-		<!-- Top Section -->
-		<div class="m-8 mb-6 mr-0 flex items-center text-2xl">
-			<div>⌘</div>
-			<div
-				class="ml-2 overflow-hidden whitespace-nowrap"
-				class:collapsedElement={$collapsedSidebar}
-			>
-				Tiny-TMS
-			</div>
-			<button
-				on:click={() => ($collapsedSidebar = !$collapsedSidebar)}
-				class="ml-auto mr-2 cursor-pointer rounded-full hover:bg-primary-foreground"
-			>
-				{#if $collapsedSidebar}
-					<ChevronRight />
-				{:else}
-					<ChevronLeft />
-				{/if}
-			</button>
-		</div>
-
-		<div class="mx-4 flex-grow">
-			{#each sidebarElements as element}
-				<a
-					href={element.route}
-					class="flex cursor-pointer rounded-lg border border-transparent p-4 hover:border-primary"
-					class:selected={$page.url.pathname.endsWith(element.route)}
-				>
-					<svelte:component this={element.icon} class="min-h-6 min-w-6"></svelte:component>
-					<div
-						class="ml-2 overflow-hidden whitespace-nowrap"
-						class:collapsedElement={$collapsedSidebar}
-					>
-						{element.name}
-					</div>
-				</a>
-			{/each}
-		</div>
-
-		<div class="m-4 mt-auto flex items-center">
-			<div class="ml-4 mr-2.5 min-h-8 min-w-8 rounded-full bg-yellow-300"></div>
-			<div
-				class:collapsedElement={$collapsedSidebar}
-				class="mr-auto overflow-hidden whitespace-nowrap"
-			>
-				My Account
-			</div>
-			<div class:collapsedElement={$collapsedSidebar} class="overflow-hidden">
-				<ThemeSelector />
-			</div>
-		</div>
-	</div>
-
+	<Sidebar sidebarElements={$page.data.sidebarElements} />
 	<slot></slot>
 </div>
-
-<style>
-	.collapsedElement {
-		display: none;
-	}
-
-	.collapsedSidebar {
-		@apply w-[90px];
-	}
-	.selected {
-		@apply bg-primary-foreground;
-	}
-</style>

From 8ed583e4ea03a634cbf6ddabc1bc2db99081849c Mon Sep 17 00:00:00 2001
From: Benjamin Strasser <bp.strasser@gmail.com>
Date: Mon, 3 Jun 2024 21:27:13 +0200
Subject: [PATCH 06/10] Added profile page

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>
---
 src/components/sidebar/sidebar.svelte                        | 4 ++--
 src/routes/(auth)/+layout.svelte                             | 4 +++-
 src/routes/(authenticated)/+layout.svelte                    | 2 +-
 src/routes/(authenticated)/{projects/+page.ts => +layout.ts} | 4 ++--
 src/routes/(authenticated)/profile/+page.svelte              | 1 +
 src/routes/+layout.svelte                                    | 2 +-
 6 files changed, 10 insertions(+), 7 deletions(-)
 rename src/routes/(authenticated)/{projects/+page.ts => +layout.ts} (68%)
 create mode 100644 src/routes/(authenticated)/profile/+page.svelte

diff --git a/src/components/sidebar/sidebar.svelte b/src/components/sidebar/sidebar.svelte
index 366b37d6..028cb112 100644
--- a/src/components/sidebar/sidebar.svelte
+++ b/src/components/sidebar/sidebar.svelte
@@ -59,7 +59,7 @@
 		{/each}
 	</div>
 
-	<div class="m-4 mt-auto flex items-center">
+	<a href="/profile" class="m-4 mt-auto flex items-center">
 		<div class="ml-4 mr-2.5 min-h-8 min-w-8 rounded-full bg-yellow-300"></div>
 		<div
 			class:collapsedElement={$collapsedSidebar}
@@ -70,7 +70,7 @@
 		<div class:collapsedElement={$collapsedSidebar} class="overflow-hidden">
 			<ThemeSelector />
 		</div>
-	</div>
+	</a>
 </div>
 
 <style>
diff --git a/src/routes/(auth)/+layout.svelte b/src/routes/(auth)/+layout.svelte
index 27927f05..52167afb 100644
--- a/src/routes/(auth)/+layout.svelte
+++ b/src/routes/(auth)/+layout.svelte
@@ -48,5 +48,7 @@
 		</div>
 	</div>
 
-	<div class="my-auto w-1/2"><slot></slot></div>
+	<div class="my-auto w-1/2">
+		<slot />
+	</div>
 </div>
diff --git a/src/routes/(authenticated)/+layout.svelte b/src/routes/(authenticated)/+layout.svelte
index 40732f4d..5ec61eb2 100644
--- a/src/routes/(authenticated)/+layout.svelte
+++ b/src/routes/(authenticated)/+layout.svelte
@@ -5,5 +5,5 @@
 
 <div class="flex h-full">
 	<Sidebar sidebarElements={$page.data.sidebarElements} />
-	<slot></slot>
+	<slot />
 </div>
diff --git a/src/routes/(authenticated)/projects/+page.ts b/src/routes/(authenticated)/+layout.ts
similarity index 68%
rename from src/routes/(authenticated)/projects/+page.ts
rename to src/routes/(authenticated)/+layout.ts
index a562a8da..06ddd5c1 100644
--- a/src/routes/(authenticated)/projects/+page.ts
+++ b/src/routes/(authenticated)/+layout.ts
@@ -1,7 +1,7 @@
 import List from 'lucide-svelte/icons/list'
-import type { PageLoad } from './$types'
+import type { LayoutLoad } from './$types'
 
-export const load: PageLoad = () => {
+export const load: LayoutLoad = () => {
 	const sidebarElements = [
 		{
 			name: 'My Projects',
diff --git a/src/routes/(authenticated)/profile/+page.svelte b/src/routes/(authenticated)/profile/+page.svelte
new file mode 100644
index 00000000..99455ed3
--- /dev/null
+++ b/src/routes/(authenticated)/profile/+page.svelte
@@ -0,0 +1 @@
+Profile
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 443f5841..ef0555e3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <main class="h-screen w-screen">
-	<slot></slot>
+	<slot />
 
 	<Toaster />
 </main>

From d9e4ba0ed293b5e413d7c110ed279f140a733656 Mon Sep 17 00:00:00 2001
From: Benjamin Strasser <bp.strasser@gmail.com>
Date: Mon, 3 Jun 2024 21:34:25 +0200
Subject: [PATCH 07/10] redirect signed in users to /projects + after sign in

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>
---
 src/routes/(auth)/login/+page.server.ts   | 2 +-
 src/routes/(auth)/login/login-form.svelte | 4 ++--
 src/routes/(auth)/signup/+page.server.ts  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/(auth)/login/+page.server.ts b/src/routes/(auth)/login/+page.server.ts
index e0d0b76b..6b96a5f2 100644
--- a/src/routes/(auth)/login/+page.server.ts
+++ b/src/routes/(auth)/login/+page.server.ts
@@ -9,7 +9,7 @@ import { dev } from '$app/environment'
 
 export const load: PageServerLoad = async ({ locals: { user } }) => {
 	if (user) {
-		throw redirect(302, '/')
+		throw redirect(302, '/projects')
 	}
 
 	return {
diff --git a/src/routes/(auth)/login/login-form.svelte b/src/routes/(auth)/login/login-form.svelte
index c6ab5caf..cf3641c4 100644
--- a/src/routes/(auth)/login/login-form.svelte
+++ b/src/routes/(auth)/login/login-form.svelte
@@ -14,13 +14,13 @@
 
 	const form = superForm(data, {
 		validators: zodClient(loginSchema),
-		async onUpdated({ form }) {
+		async onUpdate({ form }) {
 			if (form.message) {
 				if ($page.status >= 400) {
 					toast.error(form.message)
 				} else {
 					toast.success(form.message)
-					await goto('/guarded')
+					await goto('/projects')
 				}
 			}
 		}
diff --git a/src/routes/(auth)/signup/+page.server.ts b/src/routes/(auth)/signup/+page.server.ts
index 6044d738..02792565 100644
--- a/src/routes/(auth)/signup/+page.server.ts
+++ b/src/routes/(auth)/signup/+page.server.ts
@@ -7,7 +7,7 @@ import { redirect } from '@sveltejs/kit'
 
 export const load: PageServerLoad = async (event) => {
 	if (event.locals.user) {
-		throw redirect(302, '/')
+		throw redirect(302, '/projects')
 	}
 
 	return {

From 58fa35e3a7d795e1b3224a5b50b85cc3f053bd86 Mon Sep 17 00:00:00 2001
From: Benjamin Strasser <bp.strasser@gmail.com>
Date: Tue, 4 Jun 2024 11:28:02 +0200
Subject: [PATCH 08/10] added lang postcss to style stags using @apply

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>
---
 src/components/sidebar/sidebar.svelte                  | 2 +-
 src/components/ui/theme-selector/theme-selector.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/sidebar.svelte b/src/components/sidebar/sidebar.svelte
index 028cb112..a2d01ed9 100644
--- a/src/components/sidebar/sidebar.svelte
+++ b/src/components/sidebar/sidebar.svelte
@@ -73,7 +73,7 @@
 	</a>
 </div>
 
-<style>
+<style lang="postcss">
 	.collapsedElement {
 		display: none;
 	}
diff --git a/src/components/ui/theme-selector/theme-selector.svelte b/src/components/ui/theme-selector/theme-selector.svelte
index 0e79ce85..5f1d04c4 100644
--- a/src/components/ui/theme-selector/theme-selector.svelte
+++ b/src/components/ui/theme-selector/theme-selector.svelte
@@ -51,7 +51,7 @@
 	</label>
 </div>
 
-<style lang="css">
+<style lang="postcss">
 	input[type='radio']:checked + label {
 		@apply border border-primary;
 	}

From b1cf7404425d1c261ab9287b63cd1f4aabad99c1 Mon Sep 17 00:00:00 2001
From: Benjamin Strasser <bp.strasser@gmail.com>
Date: Tue, 4 Jun 2024 18:43:41 +0200
Subject: [PATCH 09/10] added localStorageWritable to sidebar

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>
---
 src/components/sidebar/sidebar.svelte | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/components/sidebar/sidebar.svelte b/src/components/sidebar/sidebar.svelte
index a2d01ed9..44eaf2e2 100644
--- a/src/components/sidebar/sidebar.svelte
+++ b/src/components/sidebar/sidebar.svelte
@@ -1,22 +1,15 @@
 <script lang="ts">
-	import { writable } from 'svelte/store'
 	import type { NavigationElement } from '.'
 	import { page } from '$app/stores'
 	import { ThemeSelector } from '$components/ui/theme-selector'
 
 	import ChevronLeft from 'lucide-svelte/icons/chevron-left'
 	import ChevronRight from 'lucide-svelte/icons/chevron-right'
-	import { browser } from '$app/environment'
+	import { localStorageWritable } from '$lib/utils/localstorage-writable'
 
 	export let sidebarElements: NavigationElement[] = []
 
-	let collapsedSidebar = writable(false)
-	if (browser) {
-		$collapsedSidebar = localStorage.getItem('collapsedSidebar') === 'true'
-		collapsedSidebar.subscribe((value) => {
-			localStorage.setItem('collapsedSidebar', value.toString())
-		})
-	}
+	const collapsedSidebar = localStorageWritable('collapsedSidebar', false)
 </script>
 
 <div

From c1fc0c6c77301ec4f841a7d2513f761470032c97 Mon Sep 17 00:00:00 2001
From: Benjamin Strasser <bp.strasser@gmail.com>
Date: Wed, 5 Jun 2024 18:05:45 +0200
Subject: [PATCH 10/10] fixed bug where themeselector navigated to profile page

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>
---
 src/components/sidebar/sidebar.svelte | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/sidebar/sidebar.svelte b/src/components/sidebar/sidebar.svelte
index 44eaf2e2..09ce2786 100644
--- a/src/components/sidebar/sidebar.svelte
+++ b/src/components/sidebar/sidebar.svelte
@@ -52,18 +52,17 @@
 		{/each}
 	</div>
 
-	<a href="/profile" class="m-4 mt-auto flex items-center">
-		<div class="ml-4 mr-2.5 min-h-8 min-w-8 rounded-full bg-yellow-300"></div>
-		<div
-			class:collapsedElement={$collapsedSidebar}
-			class="mr-auto overflow-hidden whitespace-nowrap"
-		>
-			My Account
-		</div>
+	<div class="m-4 mt-auto flex items-center justify-between">
+		<a class="flex items-center" href="/profile">
+			<div class="ml-4 mr-2.5 min-h-8 min-w-8 rounded-full bg-yellow-300"></div>
+			<div class:collapsedElement={$collapsedSidebar} class="overflow-hidden whitespace-nowrap">
+				My Account
+			</div>
+		</a>
 		<div class:collapsedElement={$collapsedSidebar} class="overflow-hidden">
 			<ThemeSelector />
 		</div>
-	</a>
+	</div>
 </div>
 
 <style lang="postcss">