From a974a3484bc1985fe36f336d9f47fab1cc3e0765 Mon Sep 17 00:00:00 2001
From: maxid <97409287+maxdorninger@users.noreply.github.com>
Date: Sun, 21 Dec 2025 17:03:01 +0100
Subject: [PATCH] refactor: data handling with derived

---
 .../dashboard/movies/requests/+page.svelte    |  2 +-
 .../routes/dashboard/settings/+page.svelte    |  1 -
 .../dashboard/tv/[showId=uuid]/+layout.svelte |  2 --
 .../[SeasonId=uuid]/+page.svelte              | 27 +++++++++----------
 web/src/routes/login/+layout.svelte           |  3 ---
 web/src/routes/login/+page.svelte             |  6 ++---
 web/src/routes/login/signup/+page.svelte      |  6 ++---
 7 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/web/src/routes/dashboard/movies/requests/+page.svelte b/web/src/routes/dashboard/movies/requests/+page.svelte
index 453db74..47f96ec 100644
--- a/web/src/routes/dashboard/movies/requests/+page.svelte
+++ b/web/src/routes/dashboard/movies/requests/+page.svelte
@@ -6,7 +6,7 @@
 	import RequestsTable from '$lib/components/season-requests-table.svelte';
 	import { resolve } from '$app/paths';
 
-	let requests = page.data.requestsData;
+	let requests = $derived(page.data.requestsData);
 </script>
 
 <svelte:head>
diff --git a/web/src/routes/dashboard/settings/+page.svelte b/web/src/routes/dashboard/settings/+page.svelte
index 8265b5c..804ef05 100644
--- a/web/src/routes/dashboard/settings/+page.svelte
+++ b/web/src/routes/dashboard/settings/+page.svelte
@@ -16,7 +16,6 @@
 			(user: components['schemas']['UserRead']) => user.id !== currentUser().id
 		)
 	);
-	console.log('Current user:', currentUser());
 </script>
 
 <svelte:head>
diff --git a/web/src/routes/dashboard/tv/[showId=uuid]/+layout.svelte b/web/src/routes/dashboard/tv/[showId=uuid]/+layout.svelte
index 3cbecae..f18261c 100644
--- a/web/src/routes/dashboard/tv/[showId=uuid]/+layout.svelte
+++ b/web/src/routes/dashboard/tv/[showId=uuid]/+layout.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-	import { setContext } from 'svelte';
 	import type { LayoutProps } from './$types';
 
 	let { data, children }: LayoutProps = $props();
 
 	const showData = $derived(data.showData);
-	setContext('show', () => showData);
 	const fetchError = $derived((data as { error?: string }).error || null);
 </script>
 
diff --git a/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.svelte b/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.svelte
index 17a0016..d61b7d4 100644
--- a/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.svelte
+++ b/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.svelte
@@ -4,7 +4,6 @@
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
 	import * as Table from '$lib/components/ui/table/index.js';
-	import { getContext } from 'svelte';
 	import type { components } from '$lib/api/api';
 	import CheckmarkX from '$lib/components/checkmark-x.svelte';
 	import { getFullyQualifiedMediaName, getTorrentQualityString } from '$lib/utils';
@@ -12,18 +11,16 @@
 	import { resolve } from '$app/paths';
 	import * as Card from '$lib/components/ui/card/index.js';
 
-	let seasonFiles: components['schemas']['PublicSeasonFile'][] = $state(page.data.files);
-	let season: components['schemas']['Season'] = $state(page.data.season);
-	let show: () => components['schemas']['Show'] = getContext('show');
-
-	console.log('loaded files', seasonFiles);
+	let seasonFiles: components['schemas']['PublicSeasonFile'][] = $derived(page.data.files);
+	let season: components['schemas']['Season'] = $derived(page.data.season);
+	let show: components['schemas']['Show'] = $derived(page.data.showData);
 </script>
 
 <svelte:head>
-	<title>{getFullyQualifiedMediaName(show())} - Season {season.number} - MediaManager</title>
+	<title>{getFullyQualifiedMediaName(show)} - Season {season.number} - MediaManager</title>
 	<meta
 		content="View episodes and manage downloads for {getFullyQualifiedMediaName(
-			show()
+			show
 		)} Season {season.number} in MediaManager"
 		name="description"
 	/>
@@ -48,9 +45,9 @@
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href={resolve('/dashboard/tv/[showId]', { showId: show().id! })}>
-						{show().name}
-						{show().year == null ? '' : '(' + show().year + ')'}
+					<Breadcrumb.Link href={resolve('/dashboard/tv/[showId]', { showId: show.id! })}>
+						{show.name}
+						{show.year == null ? '' : '(' + show.year + ')'}
 					</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
@@ -62,12 +59,12 @@
 	</div>
 </header>
 <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
-	{getFullyQualifiedMediaName(show())} Season {season.number}
+	{getFullyQualifiedMediaName(show)} Season {season.number}
 </h1>
 <main class="mx-auto flex w-full flex-1 flex-col gap-4 p-4 md:max-w-[80em]">
 	<div class="flex flex-col gap-4 md:flex-row md:items-stretch">
 		<div class="w-full overflow-hidden rounded-xl bg-muted/50 md:w-1/3 md:max-w-sm">
-			<MediaPicture media={show()} />
+			<MediaPicture media={show} />
 		</div>
 		<div class="h-full w-full flex-auto rounded-xl md:w-1/4">
 			<Card.Root class="h-full w-full">
@@ -76,7 +73,7 @@
 				</Card.Header>
 				<Card.Content>
 					<p class="leading-7 not-first:mt-6">
-						{show().overview}
+						{show.overview}
 					</p>
 				</Card.Content>
 			</Card.Root>
@@ -130,7 +127,7 @@
 			<Card.Header>
 				<Card.Title>Episodes</Card.Title>
 				<Card.Description
-					>A list of all episodes for {getFullyQualifiedMediaName(show())} Season {season.number}
+					>A list of all episodes for {getFullyQualifiedMediaName(show)} Season {season.number}
 					.
 				</Card.Description>
 			</Card.Header>
diff --git a/web/src/routes/login/+layout.svelte b/web/src/routes/login/+layout.svelte
index b117229..a69a2e0 100644
--- a/web/src/routes/login/+layout.svelte
+++ b/web/src/routes/login/+layout.svelte
@@ -5,10 +5,7 @@
 	import background from '$lib/images/pawel-czerwinski-NTYYL9Eb9y8-unsplash.jpg?enhanced';
 	import { PUBLIC_VERSION } from '$env/static/public';
 	import { resolve } from '$app/paths';
-	import { page } from '$app/state';
-	import { setContext } from 'svelte';
 
-	setContext('oauthProviders', () => page.data.oauthProviders.oauth_providers);
 	let { children } = $props();
 </script>
 
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index 9e794a2..22c65fc 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import LoginCard from '$lib/components/login-card.svelte';
-	import { getContext } from 'svelte';
+	import { page } from '$app/state';
 
-	let oauthProvider: () => string[] = getContext('oauthProviders');
+	let oauthProviders: string[] = $derived(page.data.oauthProviders);
 </script>
 
 <svelte:head>
@@ -14,5 +14,5 @@
 </svelte:head>
 
 <main>
-	<LoginCard oauthProviderNames={oauthProvider()} />
+	<LoginCard oauthProviderNames={oauthProviders} />
 </main>
diff --git a/web/src/routes/login/signup/+page.svelte b/web/src/routes/login/signup/+page.svelte
index 14e0464..0e89a52 100644
--- a/web/src/routes/login/signup/+page.svelte
+++ b/web/src/routes/login/signup/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import SignupCard from '$lib/components/signup-card.svelte';
-	import { getContext } from 'svelte';
+	import { page } from '$app/state';
 
-	let oauthProvider: () => string[] = getContext('oauthProviders');
+	let oauthProviders: string[] = $derived(page.data.oauthProviders);
 </script>
 
 <svelte:head>
@@ -10,4 +10,4 @@
 	<meta content="Signup - MediaManager" name="description" />
 </svelte:head>
 
-<SignupCard oauthProviderNames={oauthProvider()} />
+<SignupCard oauthProviderNames={oauthProviders} />