format frontend code

web/package.json

@@ -17,10 +17,10 @@
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
 		"@fontsource/fira-mono": "^5.0.0",
-      "@lucide/svelte": "^0.482.0",
+		"@lucide/svelte": "^0.482.0",
 		"@neoconfetti/svelte": "^2.0.0",
 		"@sveltejs/adapter-static": "^3.0.8",
-      "@sveltejs/enhanced-img": "^0.6.0",
+		"@sveltejs/enhanced-img": "^0.6.0",
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@tailwindcss/container-queries": "^0.1.1",

web/src/lib/components/add-show-card.svelte

@@ -7,7 +7,7 @@
 	import {base} from '$app/paths';
 	import type {MetaDataProviderShowSearchResult} from '$lib/types.js';
 
-	const apiUrl = env.PUBLIC_API_URL
+	const apiUrl = env.PUBLIC_API_URL;
 	let loading = $state(false);
 	let errorMessage = $state(null);
 	let {result}: { result: MetaDataProviderShowSearchResult } = $props();
@@ -33,7 +33,7 @@
 	}
 </script>
 
-<Card.Root class="h-full overflow-x-hidden col-span-full sm:col-span-1">
+<Card.Root class="col-span-full h-full overflow-x-hidden sm:col-span-1">
 	<Card.Header>
 		<Card.Title class="flex h-12 items-center leading-tight">
 			{result.name}

web/src/lib/components/app-sidebar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
-	import {Home, Info, LifeBuoy, Send, Settings, TvIcon} from 'lucide-svelte';
+    import {Home, Info, LifeBuoy, Send, Settings, TvIcon} from 'lucide-svelte';
-	import {PUBLIC_VERSION} from '$env/static/public';
+    import {PUBLIC_VERSION} from '$env/static/public';
 
 	const data = {
 		navMain: [
@@ -62,11 +62,11 @@
 	import NavSecondary from '$lib/components/nav-secondary.svelte';
 	import NavUser from '$lib/components/nav-user.svelte';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
-	import type {ComponentProps} from 'svelte';
+    import type {ComponentProps} from 'svelte';
 	import logo from '$lib/images/logo.svg';
-	import {base} from '$app/paths';
+    import {base} from '$app/paths';
 
-	let {ref = $bindable(null), ...restProps}: ComponentProps<typeof Sidebar.Root> = $props();
+    let {ref = $bindable(null), ...restProps}: ComponentProps<typeof Sidebar.Root> = $props();
 </script>
 
 <Sidebar.Root {...restProps} bind:ref variant="inset">
@@ -74,9 +74,9 @@
 		<Sidebar.Menu>
 			<Sidebar.MenuItem>
 				<Sidebar.MenuButton size="lg">
-					{#snippet child({props})}
+                    {#snippet child({props})}
 						<a href="{base}/dashboard" {...props}>
-							<img class="size-12" src={logo} alt="Media Manager Logo"/>
+                            <img class="size-12" src={logo} alt="Media Manager Logo"/>
 							<div class="grid flex-1 text-left text-sm leading-tight">
 								<span class="truncate font-semibold">Media Manager</span>
 								<span class="truncate text-xs">v{PUBLIC_VERSION}</span>
@@ -88,11 +88,11 @@
 		</Sidebar.Menu>
 	</Sidebar.Header>
 	<Sidebar.Content>
-		<NavMain items={data.navMain}/>
+        <NavMain items={data.navMain}/>
 		<!--  <NavProjects projects={data.projects}/> -->
-		<NavSecondary class="mt-auto" items={data.navSecondary}/>
+        <NavSecondary class="mt-auto" items={data.navSecondary}/>
 	</Sidebar.Content>
 	<Sidebar.Footer>
-		<NavUser/>
+        <NavUser/>
 	</Sidebar.Footer>
 </Sidebar.Root>

web/src/lib/components/download-season-dialog.svelte

@@ -13,7 +13,7 @@
 	import * as Select from '$lib/components/ui/select/index.js';
 	import * as Table from '$lib/components/ui/table/index.js';
 
-	const apiUrl = env.PUBLIC_API_URL
+    const apiUrl = env.PUBLIC_API_URL;
     let {show} = $props();
 	let dialogueState = $state(false);
 	let selectedSeasonNumber: number = $state(1);

web/src/lib/components/login-form.svelte

@@ -1,267 +1,265 @@
 <script lang="ts">
-    import {Button} from '$lib/components/ui/button/index.js';
+	import {Button} from '$lib/components/ui/button/index.js';
-    import * as Card from '$lib/components/ui/card/index.js';
+	import * as Card from '$lib/components/ui/card/index.js';
-    import {Input} from '$lib/components/ui/input/index.js';
+	import {Input} from '$lib/components/ui/input/index.js';
-    import {Label} from '$lib/components/ui/label/index.js';
+	import {Label} from '$lib/components/ui/label/index.js';
-    import {goto} from '$app/navigation';
+	import {goto} from '$app/navigation';
-    import {env} from '$env/dynamic/public';
+	import {env} from '$env/dynamic/public';
-    import * as Tabs from '$lib/components/ui/tabs/index.js';
+	import * as Tabs from '$lib/components/ui/tabs/index.js';
-    import {toast} from 'svelte-sonner';
+	import {toast} from 'svelte-sonner';
-    import LoadingBar from '$lib/components/loading-bar.svelte';
+	import LoadingBar from '$lib/components/loading-bar.svelte';
-    import {browser} from "$app/environment";
 
-    const apiUrl = env.PUBLIC_API_URL
+	const apiUrl = env.PUBLIC_API_URL;
 
-    let {oauthProvider} = $props();
+	let {oauthProvider} = $props();
-    let oauthProviderName = $derived(oauthProvider.oauth_name);
+	let oauthProviderName = $derived(oauthProvider.oauth_name);
 
-    let email = $state('');
+	let email = $state('');
-    let password = $state('');
+	let password = $state('');
-    let errorMessage = $state('');
+	let errorMessage = $state('');
-    let isLoading = $state(false);
+	let isLoading = $state(false);
-    let tabValue = $state('login');
+	let tabValue = $state('login');
 
-    async function handleLogin(event: Event) {
+	async function handleLogin(event: Event) {
-        event.preventDefault();
+		event.preventDefault();
 
-        isLoading = true;
+		isLoading = true;
-        errorMessage = '';
+		errorMessage = '';
 
-        const formData = new URLSearchParams();
+		const formData = new URLSearchParams();
-        formData.append('username', email);
+		formData.append('username', email);
-        formData.append('password', password);
+		formData.append('password', password);
-        try {
+		try {
-            const response = await fetch(apiUrl + '/auth/cookie/login', {
+			const response = await fetch(apiUrl + '/auth/cookie/login', {
-                method: 'POST',
+				method: 'POST',
-                headers: {
+				headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded'
+					'Content-Type': 'application/x-www-form-urlencoded'
-                },
+				},
-                body: formData.toString(),
+				body: formData.toString(),
-                credentials: 'include'
+				credentials: 'include'
-            });
+			});
 
-            if (response.ok) {
+			if (response.ok) {
-                console.log('Login successful!');
+				console.log('Login successful!');
-                console.log('Received User Data: ', response);
+				console.log('Received User Data: ', response);
-                errorMessage = 'Login successful! Redirecting...';
+				errorMessage = 'Login successful! Redirecting...';
-                toast.success(errorMessage);
+				toast.success(errorMessage);
-                goto('/dashboard');
+				goto('/dashboard');
-            } else {
+			} else {
-                let errorText = await response.text();
+				let errorText = await response.text();
-                try {
+				try {
-                    const errorData = JSON.parse(errorText);
+					const errorData = JSON.parse(errorText);
-                    errorMessage = errorData.message || 'Login failed. Please check your credentials.';
+					errorMessage = errorData.message || 'Login failed. Please check your credentials.';
-                } catch {
+				} catch {
-                    errorMessage = errorText || 'Login failed. Please check your credentials.';
+					errorMessage = errorText || 'Login failed. Please check your credentials.';
-                }
+				}
-                toast.error(errorMessage);
+				toast.error(errorMessage);
-                console.error('Login failed:', response.status, errorText);
+				console.error('Login failed:', response.status, errorText);
-            }
+			}
-        } catch (error) {
+		} catch (error) {
-            console.error('Login request failed:', error);
+			console.error('Login request failed:', error);
-            errorMessage = 'An error occurred during the login request.';
+			errorMessage = 'An error occurred during the login request.';
-            toast.error(errorMessage);
+			toast.error(errorMessage);
-        } finally {
+		} finally {
-            isLoading = false;
+			isLoading = false;
-        }
+		}
-    }
+	}
 
-    async function handleSignup(event: Event) {
+	async function handleSignup(event: Event) {
-        event.preventDefault();
+		event.preventDefault();
 
-        isLoading = true;
+		isLoading = true;
-        errorMessage = '';
+		errorMessage = '';
 
-        try {
+		try {
-            const response = await fetch(apiUrl + '/auth/register', {
+			const response = await fetch(apiUrl + '/auth/register', {
-                method: 'POST',
+				method: 'POST',
-                headers: {
+				headers: {
-                    'Content-Type': 'application/json'
+					'Content-Type': 'application/json'
-                },
+				},
-                body: JSON.stringify({
+				body: JSON.stringify({
-                    email: email,
+					email: email,
-                    password: password
+					password: password
-                }),
+				}),
-                credentials: 'include'
+				credentials: 'include'
-            });
+			});
 
-            if (response.ok) {
+			if (response.ok) {
-                console.log('Registration successful!');
+				console.log('Registration successful!');
-                console.log('Received User Data: ', response);
+				console.log('Received User Data: ', response);
-                tabValue = 'login'; // Switch to login tab after successful registration
+				tabValue = 'login'; // Switch to login tab after successful registration
-                errorMessage = 'Registration successful! Please login.';
+				errorMessage = 'Registration successful! Please login.';
-                toast.success(errorMessage);
+				toast.success(errorMessage);
-            } else {
+			} else {
-                let errorText = await response.text();
+				let errorText = await response.text();
-                try {
+				try {
-                    const errorData = JSON.parse(errorText);
+					const errorData = JSON.parse(errorText);
-                    errorMessage = errorData.message || 'Registration failed. Please check your credentials.';
+					errorMessage = errorData.message || 'Registration failed. Please check your credentials.';
-                } catch {
+				} catch {
-                    errorMessage = errorText || 'Registration failed. Please check your credentials.';
+					errorMessage = errorText || 'Registration failed. Please check your credentials.';
-                }
+				}
-                toast.error(errorMessage);
+				toast.error(errorMessage);
-                console.error('Registration failed:', response.status, errorText);
+				console.error('Registration failed:', response.status, errorText);
-            }
+			}
-        } catch (error) {
+		} catch (error) {
-            console.error('Registration request failed:', error);
+			console.error('Registration request failed:', error);
-            errorMessage = 'An error occurred during the Registration request.';
+			errorMessage = 'An error occurred during the Registration request.';
-            toast.error(errorMessage);
+			toast.error(errorMessage);
-        } finally {
+		} finally {
-            isLoading = false;
+			isLoading = false;
-        }
+		}
-    }
+	}
 
-    async function handleOauth() {
+	async function handleOauth() {
-        try {
+		try {
-            const response = await fetch(
+			const response = await fetch(
-                apiUrl + '/auth/cookie/' + oauthProviderName + '/authorize?scopes=email',
+					apiUrl + '/auth/cookie/' + oauthProviderName + '/authorize?scopes=email',
-                {
+					{
-                    method: 'GET',
+						method: 'GET',
-                    headers: {
+						headers: {
-                        'Content-Type': 'application/json'
+							'Content-Type': 'application/json'
-                    }
+						}
-                }
+					}
-            );
+			);
-            if (response.ok) {
+			if (response.ok) {
-                let result = await response.json();
+				let result = await response.json();
-                console.log(
+				console.log(
-                    'Redirecting to OAuth provider:',
+						'Redirecting to OAuth provider:',
-                    oauthProviderName,
+						oauthProviderName,
-                    'url: ',
+						'url: ',
-                    result.authorization_url
+						result.authorization_url
-                );
+				);
-                toast.success('Redirecting to ' + oauthProviderName + ' for authentication...');
+				toast.success('Redirecting to ' + oauthProviderName + ' for authentication...');
-                window.location = result.authorization_url;
+				window.location = result.authorization_url;
-            } else {
+			} else {
-                let errorText = await response.text();
+				let errorText = await response.text();
-                toast.error(errorMessage);
+				toast.error(errorMessage);
-                console.error('Login failed:', response.status, errorText);
+				console.error('Login failed:', response.status, errorText);
-            }
+			}
-        } catch (error) {
+		} catch (error) {
-            console.error('Login request failed:', error);
+			console.error('Login request failed:', error);
-            errorMessage = 'An error occurred during the login request.';
+			errorMessage = 'An error occurred during the login request.';
-            toast.error(errorMessage);
+			toast.error(errorMessage);
-        }
+		}
-    }
+	}
 </script>
 
 {#snippet oauthLogin()}
-
+	{#await oauthProvider}
-    {#await oauthProvider}
+		<LoadingBar/>
-        <LoadingBar/>
+	{:then result}
-    {:then result}
+		{#if result.oauth_name != null}
-        {#if result.oauth_name != null}
+			<div
-            <div
+					class="relative mt-2 text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border"
-                    class="after:border-border relative mt-2 text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t"
+			>
-            >
+				<span class="relative z-10 bg-background px-2 text-muted-foreground">
-			<span class="bg-background text-muted-foreground relative z-10 px-2">
+					Or continue with
-				Or continue with
+				</span>
-			</span>
+			</div>
-            </div>
+			<Button class="mt-2 w-full" onclick={() => handleOauth()} variant="outline"
-            <Button class="mt-2 w-full" onclick={() => handleOauth()} variant="outline"
+			>Login with {result.oauth_name}</Button
-            >Login with {result.oauth_name}</Button
+			>
-            >
+		{/if}
-        {/if}
+	{/await}
-    {/await}
 {/snippet}
 <Tabs.Root value={tabValue}>
-    <Tabs.Content value="login">
+	<Tabs.Content value="login">
-        <Card.Root class="mx-auto max-w-sm">
+		<Card.Root class="mx-auto max-w-sm">
-            <Card.Header>
+			<Card.Header>
-                <Card.Title class="text-2xl">Login</Card.Title>
+				<Card.Title class="text-2xl">Login</Card.Title>
-                <Card.Description>Enter your email below to login to your account</Card.Description>
+				<Card.Description>Enter your email below to login to your account</Card.Description>
-            </Card.Header>
+			</Card.Header>
-            <Card.Content>
+			<Card.Content>
-                <form class="grid gap-4" onsubmit={handleLogin}>
+				<form class="grid gap-4" onsubmit={handleLogin}>
-                    <div class="grid gap-2">
+					<div class="grid gap-2">
-                        <Label for="email">Email</Label>
+						<Label for="email">Email</Label>
-                        <Input
+						<Input
-                                bind:value={email}
+								bind:value={email}
-                                id="email"
+								id="email"
-                                placeholder="m@example.com"
+								placeholder="m@example.com"
-                                required
+								required
-                                type="email"
+								type="email"
-                        />
+						/>
-                    </div>
+					</div>
-                    <div class="grid gap-2">
+					<div class="grid gap-2">
-                        <div class="flex items-center">
+						<div class="flex items-center">
-                            <Label for="password">Password</Label>
+							<Label for="password">Password</Label>
-                            <!-- TODO: add link to relevant documentation -->
+							<!-- TODO: add link to relevant documentation -->
-                            <a class="ml-auto inline-block text-sm underline" href="##">
+							<a class="ml-auto inline-block text-sm underline" href="##">
-                                Forgot your password?
+								Forgot your password?
-                            </a>
+							</a>
-                        </div>
+						</div>
-                        <Input bind:value={password} id="password" required type="password"/>
+						<Input bind:value={password} id="password" required type="password"/>
-                    </div>
+					</div>
 
-                    {#if errorMessage}
+					{#if errorMessage}
-                        <p class="text-sm text-red-500">{errorMessage}</p>
+						<p class="text-sm text-red-500">{errorMessage}</p>
-                    {/if}
+					{/if}
 
-                    <Button class="w-full" disabled={isLoading} type="submit">
+					<Button class="w-full" disabled={isLoading} type="submit">
-                        {#if isLoading}
+						{#if isLoading}
-                            Logging in...
+							Logging in...
-                        {:else}
+						{:else}
-                            Login
+							Login
-                        {/if}
+						{/if}
-                    </Button>
+					</Button>
-                </form>
+				</form>
 
-                {@render oauthLogin()}
+				{@render oauthLogin()}
 
-                <div class="mt-4 text-center text-sm">
+				<div class="mt-4 text-center text-sm">
-                    <Button onclick={() => (tabValue = 'register')} variant="link">
+					<Button onclick={() => (tabValue = 'register')} variant="link">
-                        Don't have an account? Sign up
+						Don't have an account? Sign up
-                    </Button>
+					</Button>
-                </div>
+				</div>
-            </Card.Content>
+			</Card.Content>
-        </Card.Root>
+		</Card.Root>
-    </Tabs.Content>
+	</Tabs.Content>
-    <Tabs.Content value="register">
+	<Tabs.Content value="register">
-        <Card.Root class="mx-auto max-w-sm">
+		<Card.Root class="mx-auto max-w-sm">
-            <Card.Header>
+			<Card.Header>
-                <Card.Title class="text-2xl">Sign up</Card.Title>
+				<Card.Title class="text-2xl">Sign up</Card.Title>
-                <Card.Description>Enter your email and password below to sign up.</Card.Description>
+				<Card.Description>Enter your email and password below to sign up.</Card.Description>
-            </Card.Header>
+			</Card.Header>
-            <Card.Content>
+			<Card.Content>
-                <form class="grid gap-4" onsubmit={handleSignup}>
+				<form class="grid gap-4" onsubmit={handleSignup}>
-                    <div class="grid gap-2">
+					<div class="grid gap-2">
-                        <Label for="email2">Email</Label>
+						<Label for="email2">Email</Label>
-                        <Input
+						<Input
-                                bind:value={email}
+								bind:value={email}
-                                id="email2"
+								id="email2"
-                                placeholder="m@example.com"
+								placeholder="m@example.com"
-                                required
+								required
-                                type="email"
+								type="email"
-                        />
+						/>
-                    </div>
+					</div>
-                    <div class="grid gap-2">
+					<div class="grid gap-2">
-                        <div class="flex items-center">
+						<div class="flex items-center">
-                            <Label for="password2">Password</Label>
+							<Label for="password2">Password</Label>
-                        </div>
+						</div>
-                        <Input bind:value={password} id="password2" required type="password"/>
+						<Input bind:value={password} id="password2" required type="password"/>
-                    </div>
+					</div>
 
-                    {#if errorMessage}
+					{#if errorMessage}
-                        <p class="text-sm text-red-500">{errorMessage}</p>
+						<p class="text-sm text-red-500">{errorMessage}</p>
-                    {/if}
+					{/if}
 
-                    <Button class="w-full" disabled={isLoading} type="submit">
+					<Button class="w-full" disabled={isLoading} type="submit">
-                        {#if isLoading}
+						{#if isLoading}
-                            Signing up...
+							Signing up...
-                        {:else}
+						{:else}
-                            Sign up
+							Sign up
-                        {/if}
+						{/if}
-                    </Button>
+					</Button>
-                </form>
+				</form>
-                {@render oauthLogin()}
+				{@render oauthLogin()}
 
-                <div class="mt-4 text-center text-sm">
+				<div class="mt-4 text-center text-sm">
-                    <Button onclick={() => (tabValue = 'login')} variant="link"
+					<Button onclick={() => (tabValue = 'login')} variant="link"
-                    >Already have an account? Login
+					>Already have an account? Login
-                    </Button>
+					</Button>
-                </div>
+				</div>
-            </Card.Content>
+			</Card.Content>
-        </Card.Root>
+		</Card.Root>
-    </Tabs.Content>
+	</Tabs.Content>
 </Tabs.Root>

web/src/lib/components/nav-main.svelte

@@ -26,24 +26,24 @@
 	<Sidebar.Menu>
 		{#each items as mainItem (mainItem.title)}
 			<Collapsible.Root open={mainItem.isActive}>
-				{#snippet child({props})}
+                {#snippet child({props})}
 					<Sidebar.MenuItem {...props}>
 						<Sidebar.MenuButton>
 							{#snippet tooltipContent()}
 								{mainItem.title}
 							{/snippet}
-							{#snippet child({props})}
+                            {#snippet child({props})}
 								<a href={mainItem.url} {...props}>
-									<mainItem.icon/>
+                                    <mainItem.icon/>
 									<span>{mainItem.title}</span>
 								</a>
 							{/snippet}
 						</Sidebar.MenuButton>
 						{#if mainItem.items?.length}
 							<Collapsible.Trigger>
-								{#snippet child({props})}
+                                {#snippet child({props})}
 									<Sidebar.MenuAction {...props} class="data-[state=open]:rotate-90">
-										<ChevronRight/>
+                                        <ChevronRight/>
 										<span class="sr-only">Toggle</span>
 									</Sidebar.MenuAction>
 								{/snippet}

web/src/lib/components/nav-projects.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
-	import {useSidebar} from '$lib/components/ui/sidebar/index.js';
+    import {useSidebar} from '$lib/components/ui/sidebar/index.js';
 	import Ellipsis from '@lucide/svelte/icons/ellipsis';
 	import Folder from '@lucide/svelte/icons/folder';
 	import Share from '@lucide/svelte/icons/share';
@@ -28,38 +28,38 @@
 		{#each projects as item (item.name)}
 			<Sidebar.MenuItem>
 				<Sidebar.MenuButton>
-					{#snippet child({props})}
+                    {#snippet child({props})}
 						<a href={item.url} {...props}>
-							<item.icon/>
+                            <item.icon/>
 							<span>{item.name}</span>
 						</a>
 					{/snippet}
 				</Sidebar.MenuButton>
 				<DropdownMenu.Root>
 					<DropdownMenu.Trigger>
-						{#snippet child({props})}
+                        {#snippet child({props})}
 							<Sidebar.MenuAction showOnHover {...props}>
-								<Ellipsis/>
+                                <Ellipsis/>
 								<span class="sr-only">More</span>
 							</Sidebar.MenuAction>
 						{/snippet}
 					</DropdownMenu.Trigger>
 					<DropdownMenu.Content
-							class="w-48"
+                            class="w-48"
-							side={sidebar.isMobile ? 'bottom' : 'right'}
+                            side={sidebar.isMobile ? 'bottom' : 'right'}
-							align={sidebar.isMobile ? 'end' : 'start'}
+                            align={sidebar.isMobile ? 'end' : 'start'}
 					>
 						<DropdownMenu.Item>
-							<Folder class="text-muted-foreground"/>
+                            <Folder class="text-muted-foreground"/>
 							<span>View Project</span>
 						</DropdownMenu.Item>
 						<DropdownMenu.Item>
-							<Share class="text-muted-foreground"/>
+                            <Share class="text-muted-foreground"/>
 							<span>Share Project</span>
 						</DropdownMenu.Item>
-						<DropdownMenu.Separator/>
+                        <DropdownMenu.Separator/>
 						<DropdownMenu.Item>
-							<Trash2 class="text-muted-foreground"/>
+                            <Trash2 class="text-muted-foreground"/>
 							<span>Delete Project</span>
 						</DropdownMenu.Item>
 					</DropdownMenu.Content>

web/src/lib/components/nav-user.svelte

@@ -5,12 +5,12 @@
 	import * as Avatar from '$lib/components/ui/avatar/index.js';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
-	import {useSidebar} from '$lib/components/ui/sidebar/index.js';
+    import {useSidebar} from '$lib/components/ui/sidebar/index.js';
 	import UserDetails from './user-details.svelte';
 	import UserRound from '@lucide/svelte/icons/user-round';
-	import {handleLogout} from '$lib/utils.ts';
+    import {handleLogout} from '$lib/utils.ts';
-	import {goto} from '$app/navigation';
+    import {goto} from '$app/navigation';
-	import {base} from '$app/paths';
+    import {base} from '$app/paths';
 	const sidebar = useSidebar();
 </script>
 
@@ -18,51 +18,51 @@
 	<Sidebar.MenuItem>
 		<DropdownMenu.Root>
 			<DropdownMenu.Trigger>
-				{#snippet child({props})}
+                {#snippet child({props})}
 					<Sidebar.MenuButton
-							{...props}
+                            {...props}
-							size="lg"
+                            size="lg"
-							class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
 					>
 						<Avatar.Root class="h-8 w-8 rounded-lg">
 							<!--<Avatar.Image src={user.avatar} alt={user.name} />-->
 							<Avatar.Fallback class="rounded-lg">
-								<UserRound/>
+                                <UserRound/>
 							</Avatar.Fallback>
 						</Avatar.Root>
 						<div class="grid flex-1 text-left text-sm leading-tight">
-							<UserDetails/>
+                            <UserDetails/>
 						</div>
-						<ChevronsUpDown class="ml-auto size-4"/>
+                        <ChevronsUpDown class="ml-auto size-4"/>
 					</Sidebar.MenuButton>
 				{/snippet}
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
-					align="end"
+                    align="end"
-					class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
+                    class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
-					side={sidebar.isMobile ? 'bottom' : 'right'}
+                    side={sidebar.isMobile ? 'bottom' : 'right'}
-					sideOffset={4}
+                    sideOffset={4}
 			>
 				<DropdownMenu.Label class="p-0 font-normal">
 					<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
 						<Avatar.Root class="h-8 w-8 rounded-lg">
 							<!--<Avatar.Image src={user.avatar} alt={user.name} />-->
 							<Avatar.Fallback class="rounded-lg">
-								<UserRound/>
+                                <UserRound/>
 							</Avatar.Fallback>
 						</Avatar.Root>
 						<div class="grid flex-1 text-left text-sm leading-tight">
-							<UserDetails/>
+                            <UserDetails/>
 						</div>
 					</div>
 				</DropdownMenu.Label>
-				<DropdownMenu.Separator/>
+                <DropdownMenu.Separator/>
 				<DropdownMenu.Item onclick={() => goto(base + '/dashboard/settings#me')}>
 					My Account
 				</DropdownMenu.Item>
-				<DropdownMenu.Separator/>
+                <DropdownMenu.Separator/>
 				<DropdownMenu.Item onclick={() => handleLogout()}>
-					<LogOut/>
+                    <LogOut/>
 					Log out
 				</DropdownMenu.Item>
 			</DropdownMenu.Content>

web/src/lib/components/request-season-dialog.svelte

@@ -8,9 +8,8 @@
     import type {CreateSeasonRequest, PublicShow, Quality} from '$lib/types.js';
     import {getFullyQualifiedShowName, getTorrentQualityString} from '$lib/utils.js';
     import {toast} from 'svelte-sonner';
-    import {browser} from "$app/environment";
 
-    const apiUrl = env.PUBLIC_API_URL
+    const apiUrl = env.PUBLIC_API_URL;
     let {show}: { show: PublicShow } = $props();
 
     let dialogOpen = $state(false);

web/src/lib/components/season-requests-table.svelte

@@ -10,7 +10,7 @@
     import {goto} from '$app/navigation';
     import {base} from '$app/paths';
 
-    const apiUrl = env.PUBLIC_API_URL
+    const apiUrl = env.PUBLIC_API_URL;
     let {
         requests,
         filter = () => {
@@ -124,7 +124,7 @@
                         {request.authorized_by?.email ?? 'N/A'}
                     </Table.Cell>
                     <!-- TODO: ADD DIALOGUE TO MODIFY REQUEST -->
-                    <Table.Cell class="flex flex-col max-w-[150px] gap-1">
+                    <Table.Cell class="flex max-w-[150px] flex-col gap-1">
                         {#if user().is_superuser}
                             <Button
                                     class=""
@@ -150,11 +150,9 @@
                     </Table.Cell>
                 </Table.Row>
             {/if}
-        {:else }
+        {:else}
             <Table.Row>
-                <Table.Cell colspan="8" class="text-center">
+                <Table.Cell colspan="8" class="text-center">There are currently no requests.</Table.Cell>
-                    There are currently no requests.
-                </Table.Cell>
             </Table.Row>
         {/each}
     </Table.Body>

web/src/lib/components/show-picture.svelte

@@ -1,24 +1,17 @@
 <script>
-    import {getFullyQualifiedShowName} from "$lib/utils.js";
+    import {getFullyQualifiedShowName} from '$lib/utils.js';
-    import logo from "$lib/images/svelte-logo.svg";
+    import {env} from '$env/dynamic/public';
-    import {env} from "$env/dynamic/public";
 
     const apiUrl = env.PUBLIC_API_URL;
     let {show} = $props();
 </script>
 
 <picture>
-    <source
+    <source srcset="{apiUrl}/static/image/{show.id}.avif" type="image/avif"/>
-            srcset="{apiUrl}/static/image/{show.id}.avif"
+    <source srcset="{apiUrl}/static/image/{show.id}.webp" type="image/webp"/>
-            type="image/avif"
-    />
-    <source
-            srcset="{apiUrl}/static/image/{show.id}.webp"
-            type="image/webp"
-    />
     <img
             alt="{getFullyQualifiedShowName(show)}'s Poster Image"
             class="aspect-9/16 center h-auto w-full rounded-lg object-cover"
             src="{apiUrl}/static/image/{show.id}.jpeg"
     />
-</picture>
+</picture>

web/src/lib/components/ui/button/button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-	import type {WithElementRef} from 'bits-ui';
+    import type {WithElementRef} from 'bits-ui';
-	import type {HTMLAnchorAttributes, HTMLButtonAttributes} from 'svelte/elements';
+    import type {HTMLAnchorAttributes, HTMLButtonAttributes} from 'svelte/elements';
-	import {type VariantProps, tv} from 'tailwind-variants';
+    import {type VariantProps, tv} from 'tailwind-variants';
 
 	export const buttonVariants = tv({
 		base: 'focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
@@ -10,7 +10,7 @@
 				default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
 				destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
 				outline:
-						'border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm',
+                    'border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm',
 				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
 				ghost: 'hover:bg-accent hover:text-accent-foreground',
 				link: 'text-primary underline-offset-4 hover:underline'
@@ -32,14 +32,14 @@
 	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
 
 	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-			WithElementRef<HTMLAnchorAttributes> & {
+        WithElementRef<HTMLAnchorAttributes> & {
-		variant?: ButtonVariant;
+        variant?: ButtonVariant;
-		size?: ButtonSize;
+        size?: ButtonSize;
-	};
+    };
 </script>
 
 <script lang="ts">
-	import {cn} from '$lib/utils.js';
+    import {cn} from '$lib/utils.js';
 
 	let {
 		class: className,
@@ -59,10 +59,10 @@
 	</a>
 {:else}
 	<button
-			bind:this={ref}
+            bind:this={ref}
-			class={cn(buttonVariants({ variant, size }), className)}
+            class={cn(buttonVariants({ variant, size }), className)}
-			{type}
+            {type}
-			{...restProps}
+            {...restProps}
 	>
 		{@render children?.()}
 	</button>

web/src/lib/components/ui/checkbox/checkbox.svelte

@@ -1,35 +1,35 @@
 <script lang="ts">
-    import {Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild} from "bits-ui";
+	import {Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild} from 'bits-ui';
-    import Check from "@lucide/svelte/icons/check";
+	import Check from '@lucide/svelte/icons/check';
-    import Minus from "@lucide/svelte/icons/minus";
+	import Minus from '@lucide/svelte/icons/minus';
-    import {cn} from "$lib/utils.js";
+	import {cn} from '$lib/utils.js';
 
-    let {
+	let {
-        ref = $bindable(null),
+		ref = $bindable(null),
-        class: className,
+		class: className,
-        checked = $bindable(false),
+		checked = $bindable(false),
-        indeterminate = $bindable(false),
+		indeterminate = $bindable(false),
-        ...restProps
+		...restProps
-    }: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
 </script>
 
 <CheckboxPrimitive.Root
-        {...restProps}
+		{...restProps}
-        bind:checked
+		bind:checked
-        bind:indeterminate
+		bind:indeterminate
-        bind:ref
+		bind:ref
-        class={cn(
+		class={cn(
-		"border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		'peer box-content size-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50',
 		className
 	)}
 >
-    {#snippet children({checked, indeterminate})}
+	{#snippet children({checked, indeterminate})}
 		<span class="flex items-center justify-center text-current">
 			{#if indeterminate}
 				<Minus class="size-4"/>
 			{:else}
-				<Check class={cn("size-4", !checked && "text-transparent")}/>
+				<Check class={cn('size-4', !checked && 'text-transparent')}/>
 			{/if}
 		</span>
-    {/snippet}
+	{/snippet}
 </CheckboxPrimitive.Root>

web/src/lib/components/ui/checkbox/index.ts

@@ -1,7 +1,7 @@
-import Root from "./checkbox.svelte";
+import Root from './checkbox.svelte';
 
 export {
     Root,
     //
-    Root as Checkbox,
+    Root as Checkbox
 };

web/src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import {Tooltip as TooltipPrimitive} from 'bits-ui';
+    import {Tooltip as TooltipPrimitive} from 'bits-ui';
-	import {cn} from '$lib/utils.js';
+    import {cn} from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -11,11 +11,11 @@
 </script>
 
 <TooltipPrimitive.Content
-		{...restProps}
+        {...restProps}
-		bind:ref
+        bind:ref
-		class={cn(
+        class={cn(
 		'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
 		className
 	)}
-		{sideOffset}
+        {sideOffset}
 />

web/src/lib/components/user-data-table.svelte

@@ -9,9 +9,8 @@
     import {Label} from '$lib/components/ui/label/index.js';
     import * as RadioGroup from '$lib/components/ui/radio-group/index.js';
     import {Input} from '$lib/components/ui/input/index.js';
-    import {browser} from "$app/environment";
 
-    const apiUrl = env.PUBLIC_API_URL
+    const apiUrl = env.PUBLIC_API_URL;
     let {users}: { users: User[] } = $props();
     let sortedUsers = $derived(users.sort((a, b) => a.email.localeCompare(b.email)));
     let selectedUser: User | null = $state(null);

web/src/lib/components/user-details.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import {getContext} from 'svelte';
+    import {getContext} from 'svelte';
-	import type {User} from '$lib/types';
+    import type {User} from '$lib/types';
 
 	const user: () => User = getContext('user');
 </script>

web/src/lib/components/user-settings.svelte

@@ -5,9 +5,8 @@
 	import * as Dialog from '$lib/components/ui/dialog/index.js';
 	import {Label} from '$lib/components/ui/label/index.js';
 	import {Input} from '$lib/components/ui/input/index.js';
-	import {browser} from "$app/environment";
 
-	const apiUrl = env.PUBLIC_API_URL
+	const apiUrl = env.PUBLIC_API_URL;
 	let newPassword: string = $state('');
 	let newEmail: string = $state('');
 	let dialogOpen = $state(false);

web/src/lib/types.ts

@@ -105,7 +105,6 @@ export interface Show {
 	id: string; // type: string, format: uuid
 	continuous_download: boolean;
 	ended: boolean;
-
 }
 
 export interface PublicShow {
@@ -118,7 +117,6 @@ export interface PublicShow {
 	id: string; // type: string, format: uuid
 	continuous_download: boolean;
 	ended: boolean;
-
 }
 
 export interface Torrent {

web/src/lib/utils.ts

@@ -4,7 +4,6 @@ import {env} from '$env/dynamic/public';
 import {goto} from '$app/navigation';
 import {base} from '$app/paths';
 import {toast} from 'svelte-sonner';
-import {browser} from "$app/environment";
 
 const apiUrl = env.PUBLIC_API_URL;
 

web/src/routes/+layout.ts

@@ -1 +1 @@
-export const ssr = false;
+export const ssr = false;

web/src/routes/+page.svelte

@@ -1,19 +1,15 @@
 <script lang="ts">
-	import {goto} from '$app/navigation';
+    import {goto} from '$app/navigation';
-	import {base} from '$app/paths';
+    import {base} from '$app/paths';
-	import {onMount} from 'svelte';
+    import {browser} from '$app/environment';
-	import {browser} from "$app/environment";
+    import {redirect} from '@sveltejs/kit';
-	import {redirect} from "@sveltejs/kit";
-
-	if (browser)
-		goto(base + '/dashboard');
-	else
-		throw redirect(307, '/login');
 
+    if (browser) goto(base + '/dashboard');
+    else throw redirect(307, '/login');
 </script>
 
 <svelte:head>
 	<title>Home</title>
-	<meta content="Svelte demo app" name="description"/>
+    <meta content="Svelte demo app" name="description"/>
 </svelte:head>
 <h1>Servas</h1>

web/src/routes/dashboard/+layout.ts

@@ -2,7 +2,7 @@ import {env} from '$env/dynamic/public';
 import type {LayoutLoad} from './$types';
 import {redirect} from '@sveltejs/kit';
 import {base} from '$app/paths';
-import {browser} from "$app/environment";
+import {browser} from '$app/environment';
 import {goto} from '$app/navigation';
 
 const apiUrl = env.PUBLIC_API_URL;
@@ -23,5 +23,5 @@ export const load: LayoutLoad = async ({fetch}) => {
 			throw redirect(303, base + '/login');
 		}
 	}
-	return {user: await response.json()};
+    return {user: await response.json()};
 };

web/src/routes/dashboard/+page.svelte

@@ -1,26 +1,26 @@
 <script lang="ts">
-	import {Separator} from '$lib/components/ui/separator/index.js';
+    import {Separator} from '$lib/components/ui/separator/index.js';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
 	import RecommendedShowsCarousel from '$lib/components/recommended-shows-carousel.svelte';
 	import LoadingBar from '$lib/components/loading-bar.svelte';
-	import {base} from '$app/paths';
+    import {base} from '$app/paths';
-	import {page} from '$app/state';
+    import {page} from '$app/state';
-	import type {MetaDataProviderShowSearchResult} from '$lib/types';
+    import type {MetaDataProviderShowSearchResult} from '$lib/types';
 
 	let recommendedShows: Promise<MetaDataProviderShowSearchResult[]> = page.data.tvRecommendations;
 </script>
 
 <header class="flex h-16 shrink-0 items-center gap-2">
 	<div class="flex items-center gap-2 px-4">
-		<Sidebar.Trigger class="-ml-1"/>
+        <Sidebar.Trigger class="-ml-1"/>
-		<Separator class="mr-2 h-4" orientation="vertical"/>
+        <Separator class="mr-2 h-4" orientation="vertical"/>
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
 					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
-				<Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Separator class="hidden md:block"/>
 				<Breadcrumb.Item>
 					<Breadcrumb.Page>Home</Breadcrumb.Page>
 				</Breadcrumb.Item>
@@ -33,14 +33,16 @@
 		Dashboard
 	</h1>
 	<div class="min-h-[100vh] flex-1 items-center justify-center rounded-xl p-4 md:min-h-min">
-		<div class="mx-auto max-w-[80vw] sm:max-w-[200px] md:max-w-[500px] lg:max-w-[750px] xl:max-w-[1200px]">
+        <div
+                class="mx-auto max-w-[80vw] sm:max-w-[200px] md:max-w-[500px] lg:max-w-[750px] xl:max-w-[1200px]"
+        >
 			<h3 class="my-4 scroll-m-20 text-center text-2xl font-semibold tracking-tight">
 				Trending Shows
 			</h3>
 			{#await recommendedShows}
-				<LoadingBar/>
+                <LoadingBar/>
 			{:then recommendations}
-				<RecommendedShowsCarousel shows={recommendations}/>
+                <RecommendedShowsCarousel shows={recommendations}/>
 			{/await}
 		</div>
 	</div>

web/src/routes/dashboard/+page.ts

@@ -1,6 +1,5 @@
 import {env} from '$env/dynamic/public';
 import type {PageLoad} from './$types';
-import {browser} from "$app/environment";
 
 const apiUrl = env.PUBLIC_API_URL;
 
@@ -13,5 +12,5 @@ export const load: PageLoad = async ({fetch}) => {
 		credentials: 'include'
 	});
 
-	return {tvRecommendations: await response.json()};
+    return {tvRecommendations: await response.json()};
 };

web/src/routes/dashboard/about/+page.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-	import {Separator} from '$lib/components/ui/separator/index.js';
+    import {Separator} from '$lib/components/ui/separator/index.js';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
-	import {base} from '$app/paths';
+    import {base} from '$app/paths';
 	import logo from '$lib/images/logo.svg';
-	import {PUBLIC_VERSION} from '$env/static/public';
+    import {PUBLIC_VERSION} from '$env/static/public';
 </script>
 
 <header class="flex h-16 shrink-0 items-center gap-2">
 	<div class="flex items-center gap-2 px-4">
-		<Sidebar.Trigger class="-ml-1"/>
+        <Sidebar.Trigger class="-ml-1"/>
-		<Separator class="mr-2 h-4" orientation="vertical"/>
+        <Separator class="mr-2 h-4" orientation="vertical"/>
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
 					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
-				<Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Separator class="hidden md:block"/>
 				<Breadcrumb.Item>
 					<Breadcrumb.Page>About</Breadcrumb.Page>
 				</Breadcrumb.Item>
@@ -26,7 +26,7 @@
 </header>
 
 <div class="flex w-full flex-col items-center justify-center px-4 py-12">
-	<img alt="Media Manager Logo" class="mb-4 h-24 w-24" src={logo}/>
+    <img alt="Media Manager Logo" class="mb-4 h-24 w-24" src={logo}/>
 	<h1 class="mb-2 text-4xl font-bold">About Media Manager</h1>
 	<p class="mb-6 max-w-2xl text-center text-lg">
 		<strong>Media Manager</strong> is an all-in-one solution for organizing and building your media library.
@@ -39,24 +39,24 @@
 	<div class="my-6 mb-6 flex items-center gap-2 text-sm text-muted-foreground sm:w-1/2 lg:w-1/3">
 		<a class="flex items-center gap-2" href="https://www.themoviedb.org/" target="_blank">
 			<img
-					alt="TMDB Logo"
+                    alt="TMDB Logo"
-					class="h-auto w-20"
+                    class="h-auto w-20"
-					src="https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg"
+                    src="https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg"
 			/>
 			<span
-			>Metadata provided by TMDB. Please consider adding missing information or subscribing.</span
+            >Metadata provided by TMDB. Please consider adding missing information or subscribing.</span
 			>
 		</a>
 	</div>
 	<div class="my-6 mb-6 flex items-center gap-2 text-sm text-muted-foreground sm:w-1/2 lg:w-1/3">
 		<a class="flex items-center gap-2" href="https://thetvdb.com/subscribe" target="_blank">
 			<img
-					alt="TheTVDB Logo"
+                    alt="TheTVDB Logo"
-					class="h-auto w-20"
+                    class="h-auto w-20"
-					src="https://www.thetvdb.com/images/attribution/logo2.png"
+                    src="https://www.thetvdb.com/images/attribution/logo2.png"
 			/>
 			<span
-			>Metadata provided by TheTVDB. Please consider adding missing information or subscribing.</span
+            >Metadata provided by TheTVDB. Please consider adding missing information or subscribing.</span
 			>
 		</a>
 	</div>

web/src/routes/dashboard/settings/+page.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import UserTable from '$lib/components/user-data-table.svelte';
-	import {page} from '$app/state';
+    import {page} from '$app/state';
 	import * as Card from '$lib/components/ui/card/index.js';
-	import {getContext} from 'svelte';
+    import {getContext} from 'svelte';
 	import UserSettings from '$lib/components/user-settings.svelte';
-	import {Separator} from '$lib/components/ui/separator';
+    import {Separator} from '$lib/components/ui/separator';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
-	import {base} from '$app/paths';
+    import {base} from '$app/paths';
 
 	let currentUser = getContext('user');
 	let users = page.data.users;
@@ -15,14 +15,14 @@
 
 <header class="flex h-16 shrink-0 items-center gap-2">
 	<div class="flex items-center gap-2 px-4">
-		<Sidebar.Trigger class="-ml-1"/>
+        <Sidebar.Trigger class="-ml-1"/>
-		<Separator class="mr-2 h-4" orientation="vertical"/>
+        <Separator class="mr-2 h-4" orientation="vertical"/>
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
 					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
-				<Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Separator class="hidden md:block"/>
 				<Breadcrumb.Item>
 					<Breadcrumb.Page>Settings</Breadcrumb.Page>
 				</Breadcrumb.Item>
@@ -41,7 +41,7 @@
 			<Card.Description>Change your email or password</Card.Description>
 		</Card.Header>
 		<Card.Content>
-			<UserSettings/>
+            <UserSettings/>
 		</Card.Content>
 	</Card.Root>
 	{#if currentUser().is_superuser}
@@ -51,7 +51,7 @@
 				<Card.Description>Edit or delete users</Card.Description>
 			</Card.Header>
 			<Card.Content>
-				<UserTable bind:users/>
+                <UserTable bind:users/>
 			</Card.Content>
 		</Card.Root>
 	{/if}

web/src/routes/dashboard/settings/+page.ts

@@ -1,6 +1,5 @@
 import {env} from '$env/dynamic/public';
 import type {PageLoad} from './$types';
-import {browser} from "$app/environment";
 
 const apiUrl = env.PUBLIC_API_URL;
 export const load: PageLoad = async ({fetch}) => {

web/src/routes/dashboard/tv/+page.svelte

@@ -1,16 +1,13 @@
 <script lang="ts">
 	import {page} from '$app/state';
 	import * as Card from '$lib/components/ui/card/index.js';
-	import {env} from '$env/dynamic/public';
 	import {Separator} from '$lib/components/ui/separator/index.js';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
 	import {getFullyQualifiedShowName} from '$lib/utils';
-	import logo from '$lib/images/svelte-logo.svg';
 	import LoadingBar from '$lib/components/loading-bar.svelte';
-	import ShowPicture from "$lib/components/show-picture.svelte";
+	import ShowPicture from '$lib/components/show-picture.svelte';
 
-	const apiUrl = env.PUBLIC_API_URL
 	let tvShowsPromise = page.data.tvShows;
 </script>
 
@@ -63,15 +60,12 @@
 								<Card.Description class="truncate">{show.overview}</Card.Description>
 							</Card.Header>
 							<Card.Content>
-								<ShowPicture show={show}/>
+								<ShowPicture {show}/>
 							</Card.Content>
 						</Card.Root>
 					</a>
-
 				{:else}
-					<div class="col-span-full text-center text-muted-foreground">
+					<div class="col-span-full text-center text-muted-foreground">No TV shows added yet.</div>
-						No TV shows added yet.
-					</div>
 				{/each}
 			{/await}
 		{/await}

web/src/routes/dashboard/tv/+page.ts

@@ -12,5 +12,5 @@ export const load: PageLoad = async ({fetch}) => {
 		credentials: 'include'
 	});
 
-	return {tvShows: response};
+    return {tvShows: response};
 };

web/src/routes/dashboard/tv/[showId=uuid]/+layout.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import {setContext} from 'svelte';
+	import {setContext} from 'svelte';
-    import type {LayoutProps} from './$types';
+	import type {LayoutProps} from './$types';
 
-    let {data, children}: LayoutProps = $props();
+	let {data, children}: LayoutProps = $props();
 
 	const showData = $derived(data.showData);
 	setContext('show', () => showData);

web/src/routes/dashboard/tv/[showId=uuid]/+layout.ts

@@ -1,6 +1,5 @@
 import {env} from '$env/dynamic/public';
 import type {LayoutLoad} from './$types';
-import {browser} from "$app/environment";
 
 const apiUrl = env.PUBLIC_API_URL;
 export const load: LayoutLoad = async ({params, fetch}) => {

web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte

@@ -1,159 +1,159 @@
 <script lang="ts">
-    import {env} from '$env/dynamic/public';
+	import {env} from '$env/dynamic/public';
-    import {Separator} from '$lib/components/ui/separator/index.js';
+	import {Separator} from '$lib/components/ui/separator/index.js';
-    import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
-    import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
+	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
-    import {goto} from '$app/navigation';
+	import {goto} from '$app/navigation';
-    import {ImageOff} from 'lucide-svelte';
+	import {ImageOff} from 'lucide-svelte';
-    import * as Table from '$lib/components/ui/table/index.js';
+	import * as Table from '$lib/components/ui/table/index.js';
-    import {getContext} from 'svelte';
+	import {getContext} from 'svelte';
-    import type {RichShowTorrent, Show, User} from '$lib/types.js';
+	import type {RichShowTorrent, Show, User} from '$lib/types.js';
-    import {getFullyQualifiedShowName} from '$lib/utils';
+	import {getFullyQualifiedShowName} from '$lib/utils';
-    import DownloadSeasonDialog from '$lib/components/download-season-dialog.svelte';
+	import DownloadSeasonDialog from '$lib/components/download-season-dialog.svelte';
-    import CheckmarkX from '$lib/components/checkmark-x.svelte';
+	import CheckmarkX from '$lib/components/checkmark-x.svelte';
-    import {page} from '$app/state';
+	import {page} from '$app/state';
-    import TorrentTable from '$lib/components/torrent-table.svelte';
+	import TorrentTable from '$lib/components/torrent-table.svelte';
-    import RequestSeasonDialog from '$lib/components/request-season-dialog.svelte';
+	import RequestSeasonDialog from '$lib/components/request-season-dialog.svelte';
-    import {browser} from "$app/environment";
+	import ShowPicture from '$lib/components/show-picture.svelte';
-    import ShowPicture from "$lib/components/show-picture.svelte";
+	import {Checkbox} from '$lib/components/ui/checkbox/index.js';
-    import {Checkbox} from "$lib/components/ui/checkbox/index.js";
+	import {toast} from 'svelte-sonner';
-    import {toast} from 'svelte-sonner';
+	import {Label} from '$lib/components/ui/label';
-    import {Label} from "$lib/components/ui/label";
 
-    const apiUrl = env.PUBLIC_API_URL
+	const apiUrl = env.PUBLIC_API_URL;
-    let show: () => Show = getContext('show');
+	let show: () => Show = getContext('show');
-    let user: () => User = getContext('user');
+	let user: () => User = getContext('user');
-    let torrents: RichShowTorrent = page.data.torrentsData;
+	let torrents: RichShowTorrent = page.data.torrentsData;
 
-    async function toggle_continuous_download() {
+	async function toggle_continuous_download() {
-        let url = new URL(apiUrl + "/tv/shows/" + show().id + "/continuousDownload");
+		let url = new URL(apiUrl + '/tv/shows/' + show().id + '/continuousDownload');
-        url.searchParams.append('continuous_download', !show().continuous_download);
+		url.searchParams.append('continuous_download', !show().continuous_download);
-        console.log("Toggling continuous download for show", show().name, "to", !show().continuous_download);
+		console.log(
-        const response = await fetch(url, {
+				'Toggling continuous download for show',
-            method: 'POST',
+				show().name,
-            credentials: 'include'
+				'to',
-        });
+				!show().continuous_download
-        if (!response.ok) {
+		);
-            const errorText = await response.text();
+		const response = await fetch(url, {
-            toast.error("Failed to toggle continuous download: " + errorText);
+			method: 'POST',
-        } else {
+			credentials: 'include'
-            show().continuous_download = !show().continuous_download;
+		});
-            toast.success("Continuous download toggled successfully.");
+		if (!response.ok) {
-        }
+			const errorText = await response.text();
-    }
+			toast.error('Failed to toggle continuous download: ' + errorText);
-    
+		} else {
+			show().continuous_download = !show().continuous_download;
+			toast.success('Continuous download toggled successfully.');
+		}
+	}
 </script>
 
 <header class="flex h-16 shrink-0 items-center gap-2">
-    <div class="flex items-center gap-2 px-4">
+	<div class="flex items-center gap-2 px-4">
-        <Sidebar.Trigger class="-ml-1"/>
+		<Sidebar.Trigger class="-ml-1"/>
-        <Separator class="mr-2 h-4" orientation="vertical"/>
+		<Separator class="mr-2 h-4" orientation="vertical"/>
-        <Breadcrumb.Root>
+		<Breadcrumb.Root>
-            <Breadcrumb.List>
+			<Breadcrumb.List>
-                <Breadcrumb.Item class="hidden md:block">
+				<Breadcrumb.Item class="hidden md:block">
-                    <Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
-                </Breadcrumb.Item>
+				</Breadcrumb.Item>
-                <Breadcrumb.Separator class="hidden md:block"/>
+				<Breadcrumb.Separator class="hidden md:block"/>
-                <Breadcrumb.Item>
+				<Breadcrumb.Item>
-                    <Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
-                </Breadcrumb.Item>
+				</Breadcrumb.Item>
-                <Breadcrumb.Separator class="hidden md:block"/>
+				<Breadcrumb.Separator class="hidden md:block"/>
-                <Breadcrumb.Item>
+				<Breadcrumb.Item>
-                    <Breadcrumb.Link href="/dashboard/tv">Shows</Breadcrumb.Link>
+					<Breadcrumb.Link href="/dashboard/tv">Shows</Breadcrumb.Link>
-                </Breadcrumb.Item>
+				</Breadcrumb.Item>
-                <Breadcrumb.Separator class="hidden md:block"/>
+				<Breadcrumb.Separator class="hidden md:block"/>
-                <Breadcrumb.Item>
+				<Breadcrumb.Item>
-                    <Breadcrumb.Page>{getFullyQualifiedShowName(show())}</Breadcrumb.Page>
+					<Breadcrumb.Page>{getFullyQualifiedShowName(show())}</Breadcrumb.Page>
-                </Breadcrumb.Item>
+				</Breadcrumb.Item>
-            </Breadcrumb.List>
+			</Breadcrumb.List>
-        </Breadcrumb.Root>
+		</Breadcrumb.Root>
-    </div>
+	</div>
 </header>
 <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
-    {getFullyQualifiedShowName(show())}
+	{getFullyQualifiedShowName(show())}
 </h1>
-<div class="flex flex-1 w-full flex-col gap-4 p-4">
+<div class="flex w-full flex-1 flex-col gap-4 p-4">
-    <div class="flex flex-col md:flex-row md:items-stretch gap-4">
+	<div class="flex flex-col gap-4 md:flex-row md:items-stretch">
-        <div class="w-full md:w-1/3 md:max-w-sm rounded-xl bg-muted/50 overflow-hidden">
+		<div class="w-full overflow-hidden rounded-xl bg-muted/50 md:w-1/3 md:max-w-sm">
-            {#if show().id}
+			{#if show().id}
-                <ShowPicture show={show()}/>
+				<ShowPicture show={show()}/>
-            {:else}
+			{:else}
-                <div
+				<div
-                        class="aspect-9/16 flex h-auto w-full items-center justify-center rounded-lg bg-gray-200 text-gray-500"
+						class="aspect-9/16 flex h-auto w-full items-center justify-center rounded-lg bg-gray-200 text-gray-500"
-                >
+				>
-                    <ImageOff size={48}/>
+					<ImageOff size={48}/>
-                </div>
+				</div>
-            {/if}
+			{/if}
-        </div>
+		</div>
-        <div class="w-full md:w-1/4 flex-auto rounded-xl bg-muted/50 p-4">
+		<div class="w-full flex-auto rounded-xl bg-muted/50 p-4 md:w-1/4">
-            <p class="leading-7 [&:not(:first-child)]:mt-6">
+			<p class="leading-7 [&:not(:first-child)]:mt-6">
-                {show().overview}
+				{show().overview}
-            </p>
+			</p>
-        </div>
+		</div>
-        <div
+		<div class="w-full flex-auto rounded-xl bg-muted/50 p-4 md:w-1/3">
-                class="w-full md:w-1/3 flex-auto rounded-xl bg-muted/50 p-4"
+			{#if user().is_superuser}
-        >
+				{#if !show().ended}
-            {#if user().is_superuser}
+					<div class="mx-1 my-2 block">
-                {#if !show().ended}
+						<Checkbox
-                    <div class="my-2 mx-1 block">
+								checked={show().continuous_download}
-                        <Checkbox
+								onCheckedChange={() => {
-                                checked={show().continuous_download}
+								toggle_continuous_download();
-                                onCheckedChange={() => {
+							}}
-                                toggle_continuous_download()
+								id="continuous-download-checkbox"
-                            }}
+						/>
-                                id="continuous-download-checkbox"
+						<Label for="continuous-download-checkbox">
-
+							Enable automatic download of future seasons
-                        />
+						</Label>
-                        <Label for="continuous-download-checkbox">
+						<hr/>
-                            Enable automatic download of future seasons
+					</div>
-                        </Label>
+				{/if}
-                        <hr>
+				<DownloadSeasonDialog show={show()}/>
-                    </div>
+			{/if}
-                {/if}
+			<RequestSeasonDialog show={show()}/>
-                <DownloadSeasonDialog show={show()}/>
+		</div>
-            {/if}
+	</div>
-            <RequestSeasonDialog show={show()}/>
+	<div class="flex-1 rounded-xl bg-muted/50 p-4">
-        </div>
+		<div class="w-full overflow-x-auto">
-    </div>
+			<Table.Root>
-    <div class="flex-1 rounded-xl bg-muted/50 p-4">
+				<Table.Caption>A list of all seasons.</Table.Caption>
-        <div class="w-full overflow-x-auto">
+				<Table.Header>
-            <Table.Root>
+					<Table.Row>
-                <Table.Caption>A list of all seasons.</Table.Caption>
+						<Table.Head>Number</Table.Head>
-                <Table.Header>
+						<Table.Head>Exists on file</Table.Head>
-                    <Table.Row>
+						<Table.Head>Title</Table.Head>
-                        <Table.Head>Number</Table.Head>
+						<Table.Head>Overview</Table.Head>
-                        <Table.Head>Exists on file</Table.Head>
+					</Table.Row>
-                        <Table.Head>Title</Table.Head>
+				</Table.Header>
-                        <Table.Head>Overview</Table.Head>
+				<Table.Body>
-                    </Table.Row>
+					{#if show().seasons.length > 0}
-                </Table.Header>
+						{#each show().seasons as season (season.id)}
-                <Table.Body>
+							<Table.Row
-                    {#if show().seasons.length > 0}
+									link={true}
-                        {#each show().seasons as season (season.id)}
+									onclick={() => goto('/dashboard/tv/' + show().id + '/' + season.id)}
-                            <Table.Row
+							>
-                                    link={true}
+								<Table.Cell class="min-w-[10px] font-medium">{season.number}</Table.Cell>
-                                    onclick={() => goto('/dashboard/tv/' + show().id + '/' + season.id)}
+								<Table.Cell class="min-w-[10px] font-medium">
-                            >
+									<CheckmarkX state={season.downloaded}/>
-                                <Table.Cell class="min-w-[10px] font-medium">{season.number}</Table.Cell>
+								</Table.Cell>
-                                <Table.Cell class="min-w-[10px] font-medium">
+								<Table.Cell class="min-w-[50px]">{season.name}</Table.Cell>
-                                    <CheckmarkX state={season.downloaded}/>
+								<Table.Cell class="max-w-[300px] truncate">{season.overview}</Table.Cell>
-                                </Table.Cell>
+							</Table.Row>
-                                <Table.Cell class="min-w-[50px]">{season.name}</Table.Cell>
+						{/each}
-                                <Table.Cell class="max-w-[300px] truncate">{season.overview}</Table.Cell>
+					{:else}
-                            </Table.Row>
+						<Table.Row>
-                        {/each}
+							<Table.Cell colspan="3" class="text-center">No season data available.</Table.Cell>
-                    {:else}
+						</Table.Row>
-                        <Table.Row>
+					{/if}
-                            <Table.Cell colspan="3" class="text-center">No season data available.</Table.Cell>
+				</Table.Body>
-                        </Table.Row>
+			</Table.Root>
-                    {/if}
+		</div>
-                </Table.Body>
+	</div>
-            </Table.Root>
+	<div class="flex-1 rounded-xl bg-muted/50 p-4">
-        </div>
+		<div class="w-full overflow-x-auto">
-    </div>
+			<TorrentTable torrents={torrents.torrents}/>
-    <div class="flex-1 rounded-xl bg-muted/50 p-4">
+		</div>
-        <div class="w-full overflow-x-auto">
+	</div>
-            <TorrentTable torrents={torrents.torrents}/>
-        </div>
-    </div>
 </div>

web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.svelte

@@ -8,10 +8,8 @@
 	import type {PublicSeasonFile, Season, Show} from '$lib/types';
 	import CheckmarkX from '$lib/components/checkmark-x.svelte';
 	import {getFullyQualifiedShowName, getTorrentQualityString} from '$lib/utils';
-	import {env} from "$env/dynamic/public";
+	import ShowPicture from '$lib/components/show-picture.svelte';
-	import ShowPicture from "$lib/components/show-picture.svelte";
 
-	const apiUrl = env.PUBLIC_API_URL
 	let seasonFiles: PublicSeasonFile[] = $state(page.data.files);
 	let season: Season = $state(page.data.season);
 	let show: Show = getContext('show');
@@ -55,16 +53,16 @@
 	{getFullyQualifiedShowName(show())} Season {season.number}
 </h1>
 <div class="flex flex-1 flex-col gap-4 p-4">
-	<div class="flex flex-col md:flex-row md:items-stretch gap-4">
+	<div class="flex flex-col gap-4 md:flex-row md:items-stretch">
-		<div class="w-full md:w-1/3 md:max-w-sm rounded-xl bg-muted/50 overflow-hidden">
+		<div class="w-full overflow-hidden rounded-xl bg-muted/50 md:w-1/3 md:max-w-sm">
 			<ShowPicture show={show()}/>
 		</div>
-		<div class="w-full md:w-1/4 flex-auto rounded-xl bg-muted/50 p-4">
+		<div class="w-full flex-auto rounded-xl bg-muted/50 p-4 md:w-1/4">
 			<p class="leading-7 [&:not(:first-child)]:mt-6">
 				{show().overview}
 			</p>
 		</div>
-		<div class="w-full md:w-1/3 flex-auto rounded-xl bg-muted/50 p-4">
+		<div class="w-full flex-auto rounded-xl bg-muted/50 p-4 md:w-1/3">
 			<Table.Root>
 				<Table.Caption>A list of all downloaded/downloading versions of this season.</Table.Caption>
 				<Table.Header>

web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.ts

@@ -1,6 +1,5 @@
 import {env} from '$env/dynamic/public';
 import type {PageLoad} from './$types';
-import {browser} from "$app/environment";
 
 const apiUrl = env.PUBLIC_API_URL;
 
@@ -8,7 +7,6 @@ export const load: PageLoad = async ({fetch, params}) => {
 	const url = `${apiUrl}/tv/seasons/${params.SeasonId}/files`;
 	const url2 = `${apiUrl}/tv/seasons/${params.SeasonId}`;
 
-
 	try {
 		console.log(`Fetching data from: ${url} and ${url2}`);
 		const response = await fetch(url, {
@@ -30,7 +28,6 @@ export const load: PageLoad = async ({fetch, params}) => {
 			console.error(`API request failed with status ${response.status}: ${errorText}`);
 		}
 
-
 		const filesData = await response.json();
 		const seasonData = await response2.json();
 		console.log('received season_files data: ', filesData);

web/src/routes/dashboard/tv/add-show/+page.svelte

@@ -12,9 +12,8 @@
 	import * as RadioGroup from '$lib/components/ui/radio-group/index.js';
 	import AddShowCard from '$lib/components/add-show-card.svelte';
 	import {toast} from 'svelte-sonner';
-	import {browser} from "$app/environment";
 
-	const apiUrl = env.PUBLIC_API_URL
+	const apiUrl = env.PUBLIC_API_URL;
 	let searchTerm: string = $state('');
 	let metadataProvider: string = $state('tmdb');
 	let results: MetaDataProviderShowSearchResult[] | null = $state(null);
@@ -80,7 +79,7 @@
 	</div>
 </header>
 
-<div class="flex w-full flex-1 max-w-[90vw] flex-col items-center gap-4 p-4 pt-0">
+<div class="flex w-full max-w-[90vw] flex-1 flex-col items-center gap-4 p-4 pt-0">
 	<div class="grid w-full max-w-sm items-center gap-12">
 		<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
 			Add a show

web/src/routes/dashboard/tv/requests/+layout.ts

@@ -1,6 +1,5 @@
 import {env} from '$env/dynamic/public';
 import type {LayoutLoad} from './$types';
-import {browser} from "$app/environment";
 
 const apiUrl = env.PUBLIC_API_URL;
 export const load: LayoutLoad = async ({fetch}) => {

web/src/routes/dashboard/tv/torrents/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import {page} from '$app/state';
+    import {page} from '$app/state';
-	import {Separator} from '$lib/components/ui/separator/index.js';
+    import {Separator} from '$lib/components/ui/separator/index.js';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
-	import type {RichShowTorrent} from '$lib/types';
+    import type {RichShowTorrent} from '$lib/types';
-	import {getFullyQualifiedShowName} from '$lib/utils';
+    import {getFullyQualifiedShowName} from '$lib/utils';
 	import * as Accordion from '$lib/components/ui/accordion/index.js';
 	import * as Card from '$lib/components/ui/card/index.js';
 	import TorrentTable from '$lib/components/torrent-table.svelte';
@@ -14,22 +14,22 @@
 
 <header class="flex h-16 shrink-0 items-center gap-2">
 	<div class="flex items-center gap-2 px-4">
-		<Sidebar.Trigger class="-ml-1"/>
+        <Sidebar.Trigger class="-ml-1"/>
-		<Separator class="mr-2 h-4" orientation="vertical"/>
+        <Separator class="mr-2 h-4" orientation="vertical"/>
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
 					<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
-				<Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Separator class="hidden md:block"/>
 				<Breadcrumb.Item>
 					<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
-				<Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Separator class="hidden md:block"/>
 				<Breadcrumb.Item>
 					<Breadcrumb.Link href="/dashboard/tv">Shows</Breadcrumb.Link>
 				</Breadcrumb.Item>
-				<Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Separator class="hidden md:block"/>
 				<Breadcrumb.Item>
 					<Breadcrumb.Page>TV Torrents</Breadcrumb.Page>
 				</Breadcrumb.Item>
@@ -55,14 +55,12 @@
 							</Card.Title>
 						</Card.Header>
 						<Card.Content>
-							<TorrentTable torrents={show.torrents}/>
+                            <TorrentTable torrents={show.torrents}/>
 						</Card.Content>
 					</Card.Root>
 				</div>
 			{:else}
-				<div class="col-span-full text-center text-muted-foreground">
+                <div class="col-span-full text-center text-muted-foreground">No Torrents added yet.</div>
-					No Torrents added yet.
-				</div>
 			{/each}
 		</Accordion.Root>
 	{/await}

web/src/routes/dashboard/tv/torrents/+page.ts

@@ -1,6 +1,5 @@
 import {env} from '$env/dynamic/public';
 import type {PageLoad} from './$types';
-import {browser} from "$app/environment";
 
 const apiUrl = env.PUBLIC_API_URL;
 
@@ -9,5 +8,5 @@ export const load: PageLoad = async ({fetch}) => {
 		method: 'GET',
 		credentials: 'include'
 	});
-	return {shows: response.json()};
+    return {shows: response.json()};
 };

web/src/routes/login/+page.ts

@@ -1,6 +1,5 @@
 import {env} from '$env/dynamic/public';
 import type {PageLoad} from './$types';
-import {browser} from "$app/environment";
 
 const apiUrl = env.PUBLIC_API_URL;
 

web/vite.config.ts

@@ -2,7 +2,6 @@ import {sveltekit} from '@sveltejs/kit/vite';
 import {defineConfig} from 'vite';
 import {enhancedImages} from '@sveltejs/enhanced-img';
 
-
 export default defineConfig({
     plugins: [enhancedImages(), sveltekit()]
 });