From 6bade43d382e636405d404cd97e27febb7bbe0a0 Mon Sep 17 00:00:00 2001
From: maxDorninger <97409287+maxDorninger@users.noreply.github.com>
Date: Sat, 28 Jun 2025 23:06:23 +0200
Subject: [PATCH] edit frontend code to pass ci/cd checks

---
 web/.prettierrc                               |   8 +-
 web/package.json                              |   2 +-
 web/src/lib/components/add-media-card.svelte  |  36 ++---
 web/src/lib/components/app-sidebar.svelte     |  20 +--
 .../components/download-season-dialog.svelte  |  66 ++++----
 web/src/lib/components/login-form.svelte      |  68 ++++-----
 web/src/lib/components/nav-main.svelte        |  10 +-
 web/src/lib/components/nav-projects.svelte    |  24 +--
 web/src/lib/components/nav-user.svelte        |  40 ++---
 .../recommended-media-carousel.svelte         |   4 +-
 .../ui/breadcrumb/breadcrumb-ellipsis.svelte  |  16 +-
 .../ui/breadcrumb/breadcrumb-page.svelte      |  18 +--
 .../lib/components/ui/button/button.svelte    |  26 ++--
 .../components/ui/checkbox/checkbox.svelte    |  16 +-
 .../dropdown-menu-checkbox-item.svelte        |  18 +--
 .../dropdown-menu-radio-item.svelte           |  28 ++--
 .../dropdown-menu-shortcut.svelte             |  12 +-
 .../ui/menubar/menubar-checkbox-item.svelte   |  46 +++---
 .../ui/menubar/menubar-radio-item.svelte      |  30 ++--
 .../ui/menubar/menubar-shortcut.svelte        |  24 +--
 web/src/lib/components/ui/tooltip/index.ts    |   2 +-
 web/src/lib/components/user-details.svelte    |   4 +-
 web/src/lib/components/user-settings.svelte   |  36 ++---
 web/src/lib/types.ts                          |  12 +-
 web/src/routes/dashboard/+layout.svelte       |  14 +-
 web/src/routes/dashboard/+layout.ts           |   2 +-
 web/src/routes/dashboard/+page.svelte         |  45 +++---
 web/src/routes/dashboard/about/+page.svelte   |  30 ++--
 .../movies/[movieId=uuid]/+page.svelte        | 142 +++++++++---------
 .../dashboard/movies/add-movie/+page.svelte   |   4 +-
 .../routes/dashboard/movies/torrents/+page.ts |   7 -
 .../routes/dashboard/settings/+page.svelte    |  18 +--
 web/src/routes/dashboard/tv/+page.svelte      |  42 +++---
 web/src/routes/dashboard/tv/+page.ts          |   2 +-
 .../dashboard/tv/[showId=uuid]/+layout.svelte |   6 +-
 .../dashboard/tv/[showId=uuid]/+page.svelte   |  66 ++++----
 .../[SeasonId=uuid]/+page.svelte              |  26 ++--
 .../routes/dashboard/tv/add-show/+page.svelte |  58 +++----
 .../routes/dashboard/tv/torrents/+page.svelte |  24 +--
 web/src/routes/dashboard/tv/torrents/+page.ts |   2 +-
 web/src/routes/login/+page.ts                 |   2 +-
 web/tsconfig.json                             |  14 +-
 42 files changed, 531 insertions(+), 539 deletions(-)
 delete mode 100644 web/src/routes/dashboard/movies/torrents/+page.ts

diff --git a/web/.prettierrc b/web/.prettierrc
index c5382df..b19073e 100644
--- a/web/.prettierrc
+++ b/web/.prettierrc
@@ -3,10 +3,10 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-  "plugins": [
-    "prettier-plugin-svelte",
-    "prettier-plugin-tailwindcss"
-  ],
+	"plugins": [
+		"prettier-plugin-svelte",
+		"prettier-plugin-tailwindcss"
+	],
 	"overrides": [
 		{
 			"files": "*.svelte",
diff --git a/web/package.json b/web/package.json
index aa04992..ce6a865 100644
--- a/web/package.json
+++ b/web/package.json
@@ -41,7 +41,7 @@
 		"svelte-check": "^4.0.0",
 		"svelte-sonner": "^0.3.28",
 		"tailwind-merge": "^3.2.0",
-      "tailwind-variants": "^0.2.1",
+		"tailwind-variants": "^0.2.1",
 		"tailwindcss": "^3.4.17",
 		"tailwindcss-animate": "^1.0.7",
 		"typescript": "^5.0.0",
diff --git a/web/src/lib/components/add-media-card.svelte b/web/src/lib/components/add-media-card.svelte
index d813849..63eee4b 100644
--- a/web/src/lib/components/add-media-card.svelte
+++ b/web/src/lib/components/add-media-card.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-    import {Button} from '$lib/components/ui/button/index.js';
-    import {env} from '$env/dynamic/public';
+	import {Button} from '$lib/components/ui/button/index.js';
+	import {env} from '$env/dynamic/public';
 	import * as Card from '$lib/components/ui/card/index.js';
-    import {ImageOff} from 'lucide-svelte';
-    import {goto} from '$app/navigation';
-    import {base} from '$app/paths';
-    import type {MetaDataProviderShowSearchResult} from '$lib/types.js';
+	import {ImageOff} from 'lucide-svelte';
+	import {goto} from '$app/navigation';
+	import {base} from '$app/paths';
+	import type {MetaDataProviderSearchResult} from '$lib/types.js';
 
 	const apiUrl = env.PUBLIC_API_URL;
 	let loading = $state(false);
 	let errorMessage = $state(null);
-    let {result, isShow = true}: { result: MetaDataProviderShowSearchResult; isShow: boolean } =
-        $props();
+	let {result, isShow = true}: { result: MetaDataProviderSearchResult; isShow: boolean } =
+			$props();
 	console.log('Add Show Card Result: ', result);
 
 	async function addMedia() {
@@ -43,27 +43,27 @@
 			{/if}
 		</Card.Title>
 		<Card.Description class="truncate"
-        >{result.overview !== '' ? result.overview : 'No overview available'}</Card.Description
+		>{result.overview !== '' ? result.overview : 'No overview available'}</Card.Description
 		>
 	</Card.Header>
 	<Card.Content class="flex flex-1 items-center justify-center">
 		{#if result.poster_path != null}
 			<img
-                    class="h-full w-full rounded-lg object-contain"
-                    src={result.poster_path}
-                    alt="{result.name}'s Poster Image"
+					class="h-full w-full rounded-lg object-contain"
+					src={result.poster_path}
+					alt="{result.name}'s Poster Image"
 			/>
 		{:else}
 			<div class="flex h-full w-full items-center justify-center">
-                <ImageOff class="h-12 w-12 text-gray-400"/>
+				<ImageOff class="h-12 w-12 text-gray-400"/>
 			</div>
 		{/if}
 	</Card.Content>
 	<Card.Footer class="flex flex-col items-start gap-2 rounded-b-lg border-t bg-card p-4">
 		<Button
-                class="w-full font-semibold"
-                disabled={result.added || loading}
-                onclick={() => addMedia(result)}
+				class="w-full font-semibold"
+				disabled={result.added || loading}
+				onclick={() => addMedia(result)}
 		>
 			{#if loading}
 				<span class="animate-pulse">Loading...</span>
@@ -75,9 +75,9 @@
 			{#if result.vote_average != null}
 				<span class="flex items-center text-sm font-medium text-yellow-600">
 					<svg class="mr-1 h-4 w-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"
-                    ><path
+					><path
 							d="M10 15l-5.878 3.09 1.122-6.545L.488 6.91l6.561-.955L10 0l2.951 5.955 6.561.955-4.756 4.635 1.122 6.545z"
-                    /></svg
+					/></svg
 					>
 					Rating: {Math.round(result.vote_average)}/10
 				</span>
diff --git a/web/src/lib/components/app-sidebar.svelte b/web/src/lib/components/app-sidebar.svelte
index 42f0f92..f83a82d 100644
--- a/web/src/lib/components/app-sidebar.svelte
+++ b/web/src/lib/components/app-sidebar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts" module>
-    import {Clapperboard, Home, Info, LifeBuoy, Send, Settings, TvIcon} from 'lucide-svelte';
-    import {PUBLIC_VERSION} from '$env/static/public';
+	import {Clapperboard, Home, Info, LifeBuoy, Send, Settings, TvIcon} from 'lucide-svelte';
+	import {PUBLIC_VERSION} from '$env/static/public';
 
 	const data = {
 		navMain: [
@@ -82,11 +82,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">
@@ -94,9 +94,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>
@@ -108,11 +108,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>
diff --git a/web/src/lib/components/download-season-dialog.svelte b/web/src/lib/components/download-season-dialog.svelte
index 247c73e..504669a 100644
--- a/web/src/lib/components/download-season-dialog.svelte
+++ b/web/src/lib/components/download-season-dialog.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-    import {env} from '$env/dynamic/public';
-    import {Button, buttonVariants} from '$lib/components/ui/button/index.js';
-    import {Input} from '$lib/components/ui/input';
-    import {Label} from '$lib/components/ui/label';
-    import {toast} from 'svelte-sonner';
+	import {env} from '$env/dynamic/public';
+	import {Button, buttonVariants} from '$lib/components/ui/button/index.js';
+	import {Input} from '$lib/components/ui/input';
+	import {Label} from '$lib/components/ui/label';
+	import {toast} from 'svelte-sonner';
 
-    import type {PublicIndexerQueryResult} from '$lib/types.js';
-    import {convertTorrentSeasonRangeToIntegerRange, getFullyQualifiedMediaName} from '$lib/utils';
-    import {LoaderCircle} from 'lucide-svelte';
+	import type {PublicIndexerQueryResult} from '$lib/types.js';
+	import {convertTorrentSeasonRangeToIntegerRange, getFullyQualifiedMediaName} from '$lib/utils';
+	import {LoaderCircle} from 'lucide-svelte';
 	import * as Dialog from '$lib/components/ui/dialog/index.js';
 	import * as Tabs from '$lib/components/ui/tabs/index.js';
 	import * as Select from '$lib/components/ui/select/index.js';
 	import * as Table from '$lib/components/ui/table/index.js';
-    import {Badge} from '$lib/components/ui/badge';
+	import {Badge} from '$lib/components/ui/badge';
 
-    const apiUrl = env.PUBLIC_API_URL;
-    let {show} = $props();
+	const apiUrl = env.PUBLIC_API_URL;
+	let {show} = $props();
 	let dialogueState = $state(false);
 	let selectedSeasonNumber: number = $state(1);
 	let torrents: PublicIndexerQueryResult[] = $state([]);
@@ -62,8 +62,8 @@
 	}
 
 	async function getTorrents(
-        season_number: number,
-        override: boolean = false
+			season_number: number,
+			override: boolean = false
 	): Promise<PublicIndexerQueryResult[]> {
 		isLoadingTorrents = true;
 		torrentsError = null;
@@ -152,14 +152,14 @@
 				<div class="grid w-full items-center gap-1.5">
 					{#if show?.seasons?.length > 0}
 						<Label for="season-number"
-                        >Enter a season number from 1 to {show.seasons.at(-1).number}</Label
+						>Enter a season number from 1 to {show.seasons.at(-1).number}</Label
 						>
 						<Input
-                                type="number"
-                                class="max-w-sm"
-                                id="season-number"
-                                bind:value={selectedSeasonNumber}
-                                max={show.seasons.at(-1).number}
+								type="number"
+								class="max-w-sm"
+								id="season-number"
+								bind:value={selectedSeasonNumber}
+								max={show.seasons.at(-1).number}
 						/>
 						<p class="text-sm text-muted-foreground">
 							Enter the season's number you want to search for. The first, usually 1, or the last
@@ -183,7 +183,7 @@
 							example a 1080p and a 4K version of a season.
 						</p>
 						<Label for="file-suffix-display"
-                        >The files will be saved in the following directory:</Label
+						>The files will be saved in the following directory:</Label
 						>
 						<p class="text-sm text-muted-foreground" id="file-suffix-display">
 							{@render saveDirectoryPreview(show, filePathSuffix)}
@@ -200,10 +200,10 @@
 					{#if show?.seasons?.length > 0}
 						<Label for="query-override">Enter a custom query</Label>
 						<div class="flex w-full max-w-sm items-center space-x-2">
-                            <Input type="text" id="query-override" bind:value={queryOverride}/>
+							<Input type="text" id="query-override" bind:value={queryOverride}/>
 							<Button
-                                    variant="secondary"
-                                    onclick={async () => {
+									variant="secondary"
+									onclick={async () => {
 									isLoadingTorrents = true;
 									torrentsError = null;
 									torrents = [];
@@ -225,11 +225,11 @@
 						</p>
 						<Label for="file-suffix">Filepath suffix</Label>
 						<Input
-                                type="text"
-                                class="max-w-sm"
-                                id="file-suffix"
-                                bind:value={filePathSuffix}
-                                placeholder="1080P"
+								type="text"
+								class="max-w-sm"
+								id="file-suffix"
+								bind:value={filePathSuffix}
+								placeholder="1080P"
 						/>
 						<p class="text-sm text-muted-foreground">
 							This is necessary to differentiate between versions of the same season/show, for
@@ -237,7 +237,7 @@
 						</p>
 
 						<Label for="file-suffix-display"
-                        >The files will be saved in the following directory:</Label
+						>The files will be saved in the following directory:</Label
 						>
 						<p class="text-sm text-muted-foreground" id="file-suffix-display">
 							{@render saveDirectoryPreview(show, filePathSuffix)}
@@ -253,7 +253,7 @@
 		<div class="mt-4 items-center">
 			{#if isLoadingTorrents}
 				<div class="flex w-full max-w-sm items-center space-x-2">
-                    <LoaderCircle class="animate-spin"/>
+					<LoaderCircle class="animate-spin"/>
 					<p>Loading torrents...</p>
 				</div>
 			{:else if torrentsError}
@@ -289,9 +289,9 @@
 									</Table.Cell>
 									<Table.Cell class="text-right">
 										<Button
-                                                size="sm"
-                                                variant="outline"
-                                                onclick={() => {
+												size="sm"
+												variant="outline"
+												onclick={() => {
 												downloadTorrent(torrent.id);
 											}}
 										>
diff --git a/web/src/lib/components/login-form.svelte b/web/src/lib/components/login-form.svelte
index d6f27e9..2b08a3e 100644
--- a/web/src/lib/components/login-form.svelte
+++ b/web/src/lib/components/login-form.svelte
@@ -1,17 +1,17 @@
 <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 {Input} from '$lib/components/ui/input/index.js';
-    import {Label} from '$lib/components/ui/label/index.js';
-    import {goto} from '$app/navigation';
-    import {env} from '$env/dynamic/public';
+	import {Input} from '$lib/components/ui/input/index.js';
+	import {Label} from '$lib/components/ui/label/index.js';
+	import {goto} from '$app/navigation';
+	import {env} from '$env/dynamic/public';
 	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';
 
 	const apiUrl = env.PUBLIC_API_URL;
 
-    let {oauthProvider} = $props();
+	let {oauthProvider} = $props();
 	let oauthProviderName = $derived(oauthProvider.oauth_name);
 
 	let email = $state('');
@@ -113,21 +113,21 @@
 	async function handleOauth() {
 		try {
 			const response = await fetch(
-                apiUrl + '/auth/cookie/' + oauthProviderName + '/authorize?scopes=email',
-                {
-                    method: 'GET',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    }
-                }
+					apiUrl + '/auth/cookie/' + oauthProviderName + '/authorize?scopes=email',
+					{
+						method: 'GET',
+						headers: {
+							'Content-Type': 'application/json'
+						}
+					}
 			);
 			if (response.ok) {
 				let result = await response.json();
 				console.log(
-                    'Redirecting to OAuth provider:',
-                    oauthProviderName,
-                    'url: ',
-                    result.authorization_url
+						'Redirecting to OAuth provider:',
+						oauthProviderName,
+						'url: ',
+						result.authorization_url
 				);
 				toast.success('Redirecting to ' + oauthProviderName + ' for authentication...');
 				window.location = result.authorization_url;
@@ -146,18 +146,18 @@
 
 {#snippet oauthLogin()}
 	{#await oauthProvider}
-        <LoadingBar/>
+		<LoadingBar/>
 	{:then result}
 		{#if result.oauth_name != null}
 			<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="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"
 			>
 				<span class="relative z-10 bg-background px-2 text-muted-foreground">
 					Or continue with
 				</span>
 			</div>
 			<Button class="mt-2 w-full" onclick={() => handleOauth()} variant="outline"
-            >Login with {result.oauth_name}</Button
+			>Login with {result.oauth_name}</Button
 			>
 		{/if}
 	{/await}
@@ -174,11 +174,11 @@
 					<div class="grid gap-2">
 						<Label for="email">Email</Label>
 						<Input
-                                bind:value={email}
-                                id="email"
-                                placeholder="m@example.com"
-                                required
-                                type="email"
+								bind:value={email}
+								id="email"
+								placeholder="m@example.com"
+								required
+								type="email"
 						/>
 					</div>
 					<div class="grid gap-2">
@@ -189,7 +189,7 @@
 								Forgot your password?
 							</a>
 						</div>
-                        <Input bind:value={password} id="password" required type="password"/>
+						<Input bind:value={password} id="password" required type="password"/>
 					</div>
 
 					{#if errorMessage}
@@ -226,18 +226,18 @@
 					<div class="grid gap-2">
 						<Label for="email2">Email</Label>
 						<Input
-                                bind:value={email}
-                                id="email2"
-                                placeholder="m@example.com"
-                                required
-                                type="email"
+								bind:value={email}
+								id="email2"
+								placeholder="m@example.com"
+								required
+								type="email"
 						/>
 					</div>
 					<div class="grid gap-2">
 						<div class="flex items-center">
 							<Label for="password2">Password</Label>
 						</div>
-                        <Input bind:value={password} id="password2" required type="password"/>
+						<Input bind:value={password} id="password2" required type="password"/>
 					</div>
 
 					{#if errorMessage}
@@ -256,7 +256,7 @@
 
 				<div class="mt-4 text-center text-sm">
 					<Button onclick={() => (tabValue = 'login')} variant="link"
-                    >Already have an account? Login
+					>Already have an account? Login
 					</Button>
 				</div>
 			</Card.Content>
diff --git a/web/src/lib/components/nav-main.svelte b/web/src/lib/components/nav-main.svelte
index 1bbf999..9e46458 100644
--- a/web/src/lib/components/nav-main.svelte
+++ b/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}
diff --git a/web/src/lib/components/nav-projects.svelte b/web/src/lib/components/nav-projects.svelte
index 4e6406a..070b364 100644
--- a/web/src/lib/components/nav-projects.svelte
+++ b/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"
-                            side={sidebar.isMobile ? 'bottom' : 'right'}
-                            align={sidebar.isMobile ? 'end' : 'start'}
+							class="w-48"
+							side={sidebar.isMobile ? 'bottom' : 'right'}
+							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>
diff --git a/web/src/lib/components/nav-user.svelte b/web/src/lib/components/nav-user.svelte
index 1c6cf8a..9d4e362 100644
--- a/web/src/lib/components/nav-user.svelte
+++ b/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 {goto} from '$app/navigation';
-    import {base} from '$app/paths';
+	import {handleLogout} from '$lib/utils.ts';
+	import {goto} from '$app/navigation';
+	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}
-                            size="lg"
-                            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+							{...props}
+							size="lg"
+							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"
-                    class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
-                    side={sidebar.isMobile ? 'bottom' : 'right'}
-                    sideOffset={4}
+					align="end"
+					class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
+					side={sidebar.isMobile ? 'bottom' : 'right'}
+					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>
diff --git a/web/src/lib/components/recommended-media-carousel.svelte b/web/src/lib/components/recommended-media-carousel.svelte
index c5d7e15..2768b71 100644
--- a/web/src/lib/components/recommended-media-carousel.svelte
+++ b/web/src/lib/components/recommended-media-carousel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type {MetaDataProviderShowSearchResult} from '$lib/types';
+    import type {MetaDataProviderSearchResult} from '$lib/types';
     import AddMediaCard from '$lib/components/add-media-card.svelte';
     import {Skeleton} from '$lib/components/ui/skeleton';
     import {Button} from '$lib/components/ui/button';
@@ -10,7 +10,7 @@
         isShow,
         isLoading
     }: {
-        media: MetaDataProviderShowSearchResult[];
+        media: MetaDataProviderSearchResult[];
         isShow: boolean;
         isLoading: boolean;
     } = $props();
diff --git a/web/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte b/web/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
index ba4023a..e5369c5 100644
--- a/web/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
+++ b/web/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import Ellipsis from '@lucide/svelte/icons/ellipsis';
-    import type {WithElementRef, WithoutChildren} from 'bits-ui';
-    import type {HTMLAttributes} from 'svelte/elements';
-    import {cn} from '$lib/utils.js';
+	import type {WithElementRef, WithoutChildren} from 'bits-ui';
+	import type {HTMLAttributes} from 'svelte/elements';
+	import {cn} from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,11 +12,11 @@
 </script>
 
 <span
-        {...restProps}
-        aria-hidden="true"
-        bind:this={ref}
-        class={cn('flex size-9 items-center justify-center', className)}
-        role="presentation"
+		{...restProps}
+		aria-hidden="true"
+		bind:this={ref}
+		class={cn('flex size-9 items-center justify-center', className)}
+		role="presentation"
 >
 	<Ellipsis class="size-4"/>
 	<span class="sr-only">More</span>
diff --git a/web/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte b/web/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
index c1a08e4..f796871 100644
--- a/web/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
+++ b/web/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import type {WithElementRef} from 'bits-ui';
-    import type {HTMLAttributes} from 'svelte/elements';
-    import {cn} from '$lib/utils.js';
+	import type {WithElementRef} from 'bits-ui';
+	import type {HTMLAttributes} from 'svelte/elements';
+	import {cn} from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,12 +12,12 @@
 </script>
 
 <span
-        {...restProps}
-        aria-current="page"
-        aria-disabled="true"
-        bind:this={ref}
-        class={cn('font-normal text-foreground', className)}
-        role="link"
+		{...restProps}
+		aria-current="page"
+		aria-disabled="true"
+		bind:this={ref}
+		class={cn('font-normal text-foreground', className)}
+		role="link"
 >
 	{@render children?.()}
 </span>
diff --git a/web/src/lib/components/ui/button/button.svelte b/web/src/lib/components/ui/button/button.svelte
index e5ad8be..811b0b4 100644
--- a/web/src/lib/components/ui/button/button.svelte
+++ b/web/src/lib/components/ui/button/button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts" module>
-    import type {WithElementRef} from 'bits-ui';
-    import type {HTMLAnchorAttributes, HTMLButtonAttributes} from 'svelte/elements';
-    import {type VariantProps, tv} from 'tailwind-variants';
+	import type {WithElementRef} from 'bits-ui';
+	import type {HTMLAnchorAttributes, HTMLButtonAttributes} from 'svelte/elements';
+	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> & {
-        variant?: ButtonVariant;
-        size?: ButtonSize;
-    };
+			WithElementRef<HTMLAnchorAttributes> & {
+		variant?: ButtonVariant;
+		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}
-            class={cn(buttonVariants({ variant, size }), className)}
-            {type}
-            {...restProps}
+			bind:this={ref}
+			class={cn(buttonVariants({ variant, size }), className)}
+			{type}
+			{...restProps}
 	>
 		{@render children?.()}
 	</button>
diff --git a/web/src/lib/components/ui/checkbox/checkbox.svelte b/web/src/lib/components/ui/checkbox/checkbox.svelte
index d1a45a1..7c076a9 100644
--- a/web/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/web/src/lib/components/ui/checkbox/checkbox.svelte
@@ -1,8 +1,8 @@
 <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 Minus from '@lucide/svelte/icons/minus';
-    import {cn} from '$lib/utils.js';
+	import {cn} from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -14,16 +14,16 @@
 </script>
 
 <CheckboxPrimitive.Root
-        {...restProps}
-        bind:checked
-        bind:indeterminate
-        bind:ref
-        class={cn(
+		{...restProps}
+		bind:checked
+		bind:indeterminate
+		bind:ref
+		class={cn(
 		'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"/>
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
index b3b1b71..f616bce 100644
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import {DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild} from 'bits-ui';
+	import {DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild} from 'bits-ui';
 	import Check from '@lucide/svelte/icons/check';
 	import Minus from '@lucide/svelte/icons/minus';
-    import {cn} from '$lib/utils.js';
-    import type {Snippet} from 'svelte';
+	import {cn} from '$lib/utils.js';
+	import type {Snippet} from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -18,16 +18,16 @@
 </script>
 
 <DropdownMenuPrimitive.CheckboxItem
-        {...restProps}
-        bind:checked
-        bind:indeterminate
-        bind:ref
-        class={cn(
+		{...restProps}
+		bind:checked
+		bind:indeterminate
+		bind:ref
+		class={cn(
 		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className
 	)}
 >
-    {#snippet children({checked, indeterminate})}
+	{#snippet children({checked, indeterminate})}
 		<span class="absolute left-2 flex size-3.5 items-center justify-center">
 			{#if indeterminate}
 				<Minus class="size-4"/>
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
index 5188c5e..8c4d155 100644
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -1,30 +1,30 @@
 <script lang="ts">
-    import {DropdownMenu as DropdownMenuPrimitive, type WithoutChild} from 'bits-ui';
-    import Circle from '@lucide/svelte/icons/circle';
-    import {cn} from '$lib/utils.js';
+	import {DropdownMenu as DropdownMenuPrimitive, type WithoutChild} from 'bits-ui';
+	import Circle from '@lucide/svelte/icons/circle';
+	import {cn} from '$lib/utils.js';
 
 	let {
-        ref = $bindable(null),
-        class: className,
-        children: childrenProp,
-        ...restProps
-    }: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
 </script>
 
 <DropdownMenuPrimitive.RadioItem
-        bind:ref
-        class={cn(
+		bind:ref
+		class={cn(
 		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className
 	)}
-        {...restProps}
+		{...restProps}
 >
-    {#snippet children({checked})}
+	{#snippet children({checked})}
 		<span class="absolute left-2 flex size-3.5 items-center justify-center">
 			{#if checked}
 				<Circle class="size-2 fill-current"/>
 			{/if}
 		</span>
-        {@render childrenProp?.({checked})}
-    {/snippet}
+		{@render childrenProp?.({checked})}
+	{/snippet}
 </DropdownMenuPrimitive.RadioItem>
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
index df6310e..804ea92 100644
--- a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import type {HTMLAttributes} from 'svelte/elements';
-    import {type WithElementRef} from 'bits-ui';
-    import {cn} from '$lib/utils.js';
+	import type {HTMLAttributes} from 'svelte/elements';
+	import {type WithElementRef} from 'bits-ui';
+	import {cn} from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,9 +12,9 @@
 </script>
 
 <span
-        {...restProps}
-        bind:this={ref}
-        class={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+		{...restProps}
+		bind:this={ref}
+		class={cn('ml-auto text-xs tracking-widest opacity-60', className)}
 >
 	{@render children?.()}
 </span>
diff --git a/web/src/lib/components/ui/menubar/menubar-checkbox-item.svelte b/web/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
index fb1df06..cc7b5d7 100644
--- a/web/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
+++ b/web/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
@@ -1,33 +1,33 @@
 <script lang="ts">
-    import {Menubar as MenubarPrimitive, type WithoutChildrenOrChild} from 'bits-ui';
-    import Check from '@lucide/svelte/icons/check';
-    import Minus from '@lucide/svelte/icons/minus';
-    import {cn} from '$lib/utils.js';
-    import type {Snippet} from 'svelte';
+	import {Menubar as MenubarPrimitive, type WithoutChildrenOrChild} from 'bits-ui';
+	import Check from '@lucide/svelte/icons/check';
+	import Minus from '@lucide/svelte/icons/minus';
+	import {cn} from '$lib/utils.js';
+	import type {Snippet} from 'svelte';
 
-    let {
-        ref = $bindable(null),
-        checked = $bindable(false),
-        indeterminate = $bindable(false),
-        class: className,
-        children: childrenProp,
-        ...restProps
-    }: WithoutChildrenOrChild<MenubarPrimitive.CheckboxItemProps> & {
-        children?: Snippet;
-    } = $props();
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildrenOrChild<MenubarPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
 </script>
 
 <MenubarPrimitive.CheckboxItem
-        {...restProps}
-        bind:checked
-        bind:indeterminate
-        bind:ref
-        class={cn(
+		{...restProps}
+		bind:checked
+		bind:indeterminate
+		bind:ref
+		class={cn(
 		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className
 	)}
 >
-    {#snippet children({checked, indeterminate})}
+	{#snippet children({checked, indeterminate})}
 		<span class="absolute left-2 flex size-3.5 items-center justify-center">
 			{#if indeterminate}
 				<Minus class="size-4"/>
@@ -35,6 +35,6 @@
 				<Check class={cn('size-4', !checked && 'text-transparent')}/>
 			{/if}
 		</span>
-        {@render childrenProp?.()}
-    {/snippet}
+		{@render childrenProp?.()}
+	{/snippet}
 </MenubarPrimitive.CheckboxItem>
diff --git a/web/src/lib/components/ui/menubar/menubar-radio-item.svelte b/web/src/lib/components/ui/menubar/menubar-radio-item.svelte
index 0eafb34..931dddc 100644
--- a/web/src/lib/components/ui/menubar/menubar-radio-item.svelte
+++ b/web/src/lib/components/ui/menubar/menubar-radio-item.svelte
@@ -1,30 +1,30 @@
 <script lang="ts">
-    import {Menubar as MenubarPrimitive, type WithoutChild} from 'bits-ui';
-    import Circle from '@lucide/svelte/icons/circle';
-    import {cn} from '$lib/utils.js';
+	import {Menubar as MenubarPrimitive, type WithoutChild} from 'bits-ui';
+	import Circle from '@lucide/svelte/icons/circle';
+	import {cn} from '$lib/utils.js';
 
-    let {
-        ref = $bindable(null),
-        class: className,
-        children: childrenProp,
-        ...restProps
-    }: WithoutChild<MenubarPrimitive.RadioItemProps> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<MenubarPrimitive.RadioItemProps> = $props();
 </script>
 
 <MenubarPrimitive.RadioItem
-        {...restProps}
-        bind:ref
-        class={cn(
+		{...restProps}
+		bind:ref
+		class={cn(
 		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className
 	)}
 >
-    {#snippet children({checked})}
+	{#snippet children({checked})}
 		<span class="absolute left-2 flex size-3.5 items-center justify-center">
 			{#if checked}
 				<Circle class="size-2 fill-current"/>
 			{/if}
 		</span>
-        {@render childrenProp?.({checked})}
-    {/snippet}
+		{@render childrenProp?.({checked})}
+	{/snippet}
 </MenubarPrimitive.RadioItem>
diff --git a/web/src/lib/components/ui/menubar/menubar-shortcut.svelte b/web/src/lib/components/ui/menubar/menubar-shortcut.svelte
index a06b131..0e9fbd7 100644
--- a/web/src/lib/components/ui/menubar/menubar-shortcut.svelte
+++ b/web/src/lib/components/ui/menubar/menubar-shortcut.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-    import type {HTMLAttributes} from 'svelte/elements';
-    import type {WithElementRef} from 'bits-ui';
-    import {cn} from '$lib/utils.js';
+	import type {HTMLAttributes} from 'svelte/elements';
+	import type {WithElementRef} from 'bits-ui';
+	import {cn} from '$lib/utils.js';
 
-    let {
-        ref = $bindable(null),
-        class: className,
-        children,
-        ...restProps
-    }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
 <span
-        {...restProps}
-        bind:this={ref}
-        class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+		{...restProps}
+		bind:this={ref}
+		class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
 >
 	{@render children?.()}
 </span>
diff --git a/web/src/lib/components/ui/tooltip/index.ts b/web/src/lib/components/ui/tooltip/index.ts
index 97dbc0e..4e2271b 100644
--- a/web/src/lib/components/ui/tooltip/index.ts
+++ b/web/src/lib/components/ui/tooltip/index.ts
@@ -14,5 +14,5 @@ export {
 	Root as Tooltip,
 	Content as TooltipContent,
 	Trigger as TooltipTrigger,
-    Provider as TooltipProvider
+	Provider as TooltipProvider
 };
diff --git a/web/src/lib/components/user-details.svelte b/web/src/lib/components/user-details.svelte
index 1b12c4f..8d7947e 100644
--- a/web/src/lib/components/user-details.svelte
+++ b/web/src/lib/components/user-details.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import {getContext} from 'svelte';
-    import type {User} from '$lib/types';
+	import {getContext} from 'svelte';
+	import type {User} from '$lib/types';
 
 	const user: () => User = getContext('user');
 </script>
diff --git a/web/src/lib/components/user-settings.svelte b/web/src/lib/components/user-settings.svelte
index 274575c..99b440d 100644
--- a/web/src/lib/components/user-settings.svelte
+++ b/web/src/lib/components/user-settings.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-    import {Button} from '$lib/components/ui/button/index.js';
-    import {env} from '$env/dynamic/public';
-    import {toast} from 'svelte-sonner';
+	import {Button} from '$lib/components/ui/button/index.js';
+	import {env} from '$env/dynamic/public';
+	import {toast} from 'svelte-sonner';
 	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 {Label} from '$lib/components/ui/label/index.js';
+	import {Input} from '$lib/components/ui/input/index.js';
 
 	const apiUrl = env.PUBLIC_API_URL;
 	let newPassword: string = $state('');
@@ -20,8 +20,8 @@
 				},
 				credentials: 'include',
 				body: JSON.stringify({
-                    ...(newPassword !== '' && {password: newPassword}),
-                    ...(newEmail !== '' && {password: newEmail})
+					...(newPassword !== '' && {password: newPassword}),
+					...(newEmail !== '' && {password: newEmail})
 				})
 			});
 
@@ -36,7 +36,7 @@
 		} catch (error) {
 			console.error('Error updating user:', error);
 			toast.error(
-                'Error updating user: ' + (error instanceof Error ? error.message : String(error))
+					'Error updating user: ' + (error instanceof Error ? error.message : String(error))
 			);
 		} finally {
 			newPassword = '';
@@ -63,22 +63,22 @@
 			<div>
 				<Label class="mb-1 block text-sm font-medium" for="email">Email</Label>
 				<Input
-                        bind:value={newEmail}
-                        class="w-full"
-                        id="email"
-                        placeholder="Keep empty to not change the email"
-                        type="email"
+						bind:value={newEmail}
+						class="w-full"
+						id="email"
+						placeholder="Keep empty to not change the email"
+						type="email"
 				/>
 			</div>
 			<!-- Password -->
 			<div>
 				<Label class="mb-1 block text-sm font-medium" for="password">Password</Label>
 				<Input
-                        bind:value={newPassword}
-                        class="w-full"
-                        id="password"
-                        placeholder="Keep empty to not change the password"
-                        type="password"
+						bind:value={newPassword}
+						class="w-full"
+						id="password"
+						placeholder="Keep empty to not change the password"
+						type="password"
 				/>
 			</div>
 		</div>
diff --git a/web/src/lib/types.ts b/web/src/lib/types.ts
index 38a2303..9b1ee67 100644
--- a/web/src/lib/types.ts
+++ b/web/src/lib/types.ts
@@ -163,7 +163,7 @@ export interface UserUpdate {
 	is_verified?: boolean | null; // anyOf boolean, null
 }
 
-export interface MetaDataProviderShowSearchResult {
+export interface MetaDataProviderSearchResult {
 	poster_path: string | null;
 	overview: string | null;
 	name: string;
@@ -193,11 +193,11 @@ export interface RichShowTorrent {
 }
 
 export interface RichMovieTorrent {
-    show_id: string;
-    name: string;
-    year: number | null;
-    metadata_provider: string;
-    torrents: Torrent[];
+	show_id: string;
+	name: string;
+	year: number | null;
+	metadata_provider: string;
+	torrents: Torrent[];
 }
 
 interface SeasonRequestBase {
diff --git a/web/src/routes/dashboard/+layout.svelte b/web/src/routes/dashboard/+layout.svelte
index 40e509a..2cd5411 100644
--- a/web/src/routes/dashboard/+layout.svelte
+++ b/web/src/routes/dashboard/+layout.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import AppSidebar from '$lib/components/app-sidebar.svelte';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
-    import type {LayoutProps} from './$types';
-    import {setContext} from 'svelte';
-    import {goto} from '$app/navigation';
-    import {base} from '$app/paths';
-    import {toast} from 'svelte-sonner';
+	import type {LayoutProps} from './$types';
+	import {setContext} from 'svelte';
+	import {goto} from '$app/navigation';
+	import {base} from '$app/paths';
+	import {toast} from 'svelte-sonner';
 
-    let {data, children}: LayoutProps = $props();
+	let {data, children}: LayoutProps = $props();
 	console.log('Received User Data: ', data.user);
 	if (!data.user.is_verified) {
 		toast.info('Your account requires verification. Redirecting...');
@@ -17,7 +17,7 @@
 </script>
 
 <Sidebar.Provider>
-    <AppSidebar/>
+	<AppSidebar/>
 	<Sidebar.Inset>
 		{@render children()}
 	</Sidebar.Inset>
diff --git a/web/src/routes/dashboard/+layout.ts b/web/src/routes/dashboard/+layout.ts
index fe1cd26..ce646b7 100644
--- a/web/src/routes/dashboard/+layout.ts
+++ b/web/src/routes/dashboard/+layout.ts
@@ -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()};
 };
diff --git a/web/src/routes/dashboard/+page.svelte b/web/src/routes/dashboard/+page.svelte
index 1d30573..c112f65 100644
--- a/web/src/routes/dashboard/+page.svelte
+++ b/web/src/routes/dashboard/+page.svelte
@@ -1,36 +1,37 @@
 <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 RecommendedMediaCarousel from '$lib/components/recommended-media-carousel.svelte';
-    import {base} from '$app/paths';
-    import {onMount} from 'svelte';
-    import {env} from '$env/dynamic/public';
+	import {base} from '$app/paths';
+	import {onMount} from 'svelte';
+	import {env} from '$env/dynamic/public';
+	import {MetaDataProviderSearchResult} from '$lib/types';
 
-    const apiUrl = env.PUBLIC_API_URL;
+	const apiUrl = env.PUBLIC_API_URL;
 
-	let recommendedShows: any[] = [];
+	let recommendedShows: MetaDataProviderSearchResult[] = [];
 	let showsLoading = true;
 
-	let recommendedMovies: any[] = [];
+	let recommendedMovies: MetaDataProviderSearchResult[] = [];
 	let moviesLoading = true;
 
 	onMount(async () => {
 		const showsRes = await fetch(apiUrl + '/tv/recommended', {
 			headers: {
 				'Content-Type': 'application/json',
-                Accept: 'application/json'
+				Accept: 'application/json'
 			},
 			credentials: 'include',
 			method: 'GET'
 		});
 		recommendedShows = await showsRes.json();
-        showsLoading = false;
+		showsLoading = false;
 
 		const moviesRes = await fetch(apiUrl + '/movies/recommended', {
 			headers: {
 				'Content-Type': 'application/json',
-                Accept: 'application/json'
+				Accept: 'application/json'
 			},
 			credentials: 'include',
 			method: 'GET'
@@ -42,14 +43,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"/>
-        <Separator class="mr-2 h-4" orientation="vertical"/>
+		<Sidebar.Trigger class="-ml-1"/>
+		<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>
@@ -62,16 +63,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-[70vw] md:max-w-[80vw]">
-            <h3 class="my-4 text-center text-2xl font-semibold">Trending Shows</h3>
-            <RecommendedMediaCarousel isLoading={showsLoading} isShow={true} media={recommendedShows}/>
+		<div class="mx-auto max-w-[70vw] md:max-w-[80vw]">
+			<h3 class="my-4 text-center text-2xl font-semibold">Trending Shows</h3>
+			<RecommendedMediaCarousel isLoading={showsLoading} isShow={true} media={recommendedShows}/>
 
-            <h3 class="my-4 text-center text-2xl font-semibold">Trending Movies</h3>
-            <RecommendedMediaCarousel
-                    isLoading={moviesLoading}
-                    isShow={false}
-                    media={recommendedMovies}
-            />
+			<h3 class="my-4 text-center text-2xl font-semibold">Trending Movies</h3>
+			<RecommendedMediaCarousel
+					isLoading={moviesLoading}
+					isShow={false}
+					media={recommendedMovies}
+			/>
 		</div>
 	</div>
 
diff --git a/web/src/routes/dashboard/about/+page.svelte b/web/src/routes/dashboard/about/+page.svelte
index 7e5ef04..b4ef9e4 100644
--- a/web/src/routes/dashboard/about/+page.svelte
+++ b/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"/>
-        <Separator class="mr-2 h-4" orientation="vertical"/>
+		<Sidebar.Trigger class="-ml-1"/>
+		<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"
-                    class="h-auto w-20"
-                    src="https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg"
+					alt="TMDB Logo"
+					class="h-auto w-20"
+					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"
-                    class="h-auto w-20"
-                    src="https://www.thetvdb.com/images/attribution/logo2.png"
+					alt="TheTVDB Logo"
+					class="h-auto w-20"
+					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>
diff --git a/web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte b/web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte
index f3a3f3f..140afb6 100644
--- a/web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte
+++ b/web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte
@@ -1,86 +1,84 @@
 <script lang="ts">
-    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 {ImageOff} from 'lucide-svelte';
-    import {getContext} from 'svelte';
-    import type {PublicMovie, RichShowTorrent, User} from '$lib/types.js';
-    import {getFullyQualifiedMediaName} from '$lib/utils';
-    import {page} from '$app/state';
-    import TorrentTable from '$lib/components/torrent-table.svelte';
-    import MediaPicture from '$lib/components/media-picture.svelte';
-    import DownloadMovieDialog from '$lib/components/download-movie-dialog.svelte';
-    import RequestMovieDialog from '$lib/components/request-movie-dialog.svelte';
+	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 {ImageOff} from 'lucide-svelte';
+	import {getContext} from 'svelte';
+	import type {PublicMovie, RichShowTorrent, User} from '$lib/types.js';
+	import {getFullyQualifiedMediaName} from '$lib/utils';
+	import {page} from '$app/state';
+	import TorrentTable from '$lib/components/torrent-table.svelte';
+	import MediaPicture from '$lib/components/media-picture.svelte';
+	import DownloadMovieDialog from '$lib/components/download-movie-dialog.svelte';
+	import RequestMovieDialog from '$lib/components/request-movie-dialog.svelte';
 
-    const apiUrl = env.PUBLIC_API_URL;
-    let movie: PublicMovie = page.data.movie;
-    let user: () => User = getContext('user');
-    let torrents: RichShowTorrent = page.data.torrents;
+	let movie: PublicMovie = page.data.movie;
+	let user: () => User = getContext('user');
+	let torrents: RichShowTorrent = page.data.torrents;
 </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"/>
-        <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.Item>
-                    <Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
-                </Breadcrumb.Item>
-                <Breadcrumb.Separator class="hidden md:block"/>
-                <Breadcrumb.Item>
-                    <Breadcrumb.Link href="/dashboard/movies">Movies</Breadcrumb.Link>
-                </Breadcrumb.Item>
-                <Breadcrumb.Separator class="hidden md:block"/>
-                <Breadcrumb.Item>
-                    <Breadcrumb.Page>{getFullyQualifiedMediaName(movie)}</Breadcrumb.Page>
-                </Breadcrumb.Item>
-            </Breadcrumb.List>
-        </Breadcrumb.Root>
-    </div>
+	<div class="flex items-center gap-2 px-4">
+		<Sidebar.Trigger class="-ml-1"/>
+		<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.Item>
+					<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
+				</Breadcrumb.Item>
+				<Breadcrumb.Separator class="hidden md:block"/>
+				<Breadcrumb.Item>
+					<Breadcrumb.Link href="/dashboard/movies">Movies</Breadcrumb.Link>
+				</Breadcrumb.Item>
+				<Breadcrumb.Separator class="hidden md:block"/>
+				<Breadcrumb.Item>
+					<Breadcrumb.Page>{getFullyQualifiedMediaName(movie)}</Breadcrumb.Page>
+				</Breadcrumb.Item>
+			</Breadcrumb.List>
+		</Breadcrumb.Root>
+	</div>
 </header>
 <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
-    {getFullyQualifiedMediaName(movie)}
+	{getFullyQualifiedMediaName(movie)}
 </h1>
 <div class="flex w-full flex-1 flex-col gap-4 p-4">
-    <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">
-            {#if movie.id}
-                <MediaPicture media={movie}/>
-            {:else}
-                <div
-                        class="aspect-9/16 flex h-auto w-full items-center justify-center rounded-lg bg-gray-200 text-gray-500"
-                >
-                    <ImageOff size={48}/>
-                </div>
-            {/if}
-        </div>
-        <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">
-                {movie.overview}
-            </p>
-        </div>
-        <div class="w-full flex-auto rounded-xl bg-muted/50 p-4 md:w-1/3">
-            {#if user().is_superuser}
-                <DownloadMovieDialog {movie}/>
-                <div class="my-4"></div>
-            {/if}
-            <RequestMovieDialog {movie}/>
-        </div>
-    </div>
-    <!-- 	<div class="flex-1 rounded-xl bg-muted/50 p-4">
+	<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">
+			{#if movie.id}
+				<MediaPicture media={movie}/>
+			{:else}
+				<div
+						class="aspect-9/16 flex h-auto w-full items-center justify-center rounded-lg bg-gray-200 text-gray-500"
+				>
+					<ImageOff size={48}/>
+				</div>
+			{/if}
+		</div>
+		<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">
+				{movie.overview}
+			</p>
+		</div>
+		<div class="w-full flex-auto rounded-xl bg-muted/50 p-4 md:w-1/3">
+			{#if user().is_superuser}
+				<DownloadMovieDialog {movie}/>
+				<div class="my-4"></div>
+			{/if}
+			<RequestMovieDialog {movie}/>
+		</div>
+	</div>
+	<!-- 	<div class="flex-1 rounded-xl bg-muted/50 p-4">
             <div class="w-full overflow-x-auto">
 
             </div>
         </div> -->
-    <div class="flex-1 rounded-xl bg-muted/50 p-4">
-        <div class="w-full overflow-x-auto">
-            <TorrentTable isShow={false} torrents={torrents.torrents}/>
-        </div>
-    </div>
+	<div class="flex-1 rounded-xl bg-muted/50 p-4">
+		<div class="w-full overflow-x-auto">
+			<TorrentTable isShow={false} torrents={torrents.torrents}/>
+		</div>
+	</div>
 </div>
diff --git a/web/src/routes/dashboard/movies/add-movie/+page.svelte b/web/src/routes/dashboard/movies/add-movie/+page.svelte
index ac53edc..f831630 100644
--- a/web/src/routes/dashboard/movies/add-movie/+page.svelte
+++ b/web/src/routes/dashboard/movies/add-movie/+page.svelte
@@ -8,7 +8,7 @@
     import {Button} from '$lib/components/ui/button';
     import {ChevronDown} from 'lucide-svelte';
     import * as Collapsible from '$lib/components/ui/collapsible/index.js';
-    import type {MetaDataProviderShowSearchResult} from '$lib/types.js';
+    import type {MetaDataProviderSearchResult} from '$lib/types.js';
     import * as RadioGroup from '$lib/components/ui/radio-group/index.js';
     import AddMediaCard from '$lib/components/add-media-card.svelte';
     import {toast} from 'svelte-sonner';
@@ -17,7 +17,7 @@
     const apiUrl = env.PUBLIC_API_URL;
     let searchTerm: string = $state('');
     let metadataProvider: string = $state('tmdb');
-    let results: MetaDataProviderShowSearchResult[] | null = $state(null);
+    let results: MetaDataProviderSearchResult[] | null = $state(null);
     onMount(search);
 
     async function search() {
diff --git a/web/src/routes/dashboard/movies/torrents/+page.ts b/web/src/routes/dashboard/movies/torrents/+page.ts
deleted file mode 100644
index bcfc909..0000000
--- a/web/src/routes/dashboard/movies/torrents/+page.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {env} from '$env/dynamic/public';
-import type {PageLoad} from './$types';
-
-const apiUrl = env.PUBLIC_API_URL;
-
-export const load: PageLoad = async ({fetch}) => {
-};
diff --git a/web/src/routes/dashboard/settings/+page.svelte b/web/src/routes/dashboard/settings/+page.svelte
index f88a4d2..d585ead 100644
--- a/web/src/routes/dashboard/settings/+page.svelte
+++ b/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"/>
-        <Separator class="mr-2 h-4" orientation="vertical"/>
+		<Sidebar.Trigger class="-ml-1"/>
+		<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}
diff --git a/web/src/routes/dashboard/tv/+page.svelte b/web/src/routes/dashboard/tv/+page.svelte
index b7ab33c..eb163eb 100644
--- a/web/src/routes/dashboard/tv/+page.svelte
+++ b/web/src/routes/dashboard/tv/+page.svelte
@@ -1,30 +1,30 @@
 <script lang="ts">
-    import {page} from '$app/state';
+	import {page} from '$app/state';
 	import * as Card from '$lib/components/ui/card/index.js';
-    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 {getFullyQualifiedMediaName} from '$lib/utils';
+	import {getFullyQualifiedMediaName} from '$lib/utils';
 	import MediaPicture from '$lib/components/media-picture.svelte';
-    import {Skeleton} from '$lib/components/ui/skeleton';
+	import {Skeleton} from '$lib/components/ui/skeleton';
 
 	let tvShowsPromise = page.data.tvShows;
 </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"/>
-        <Separator class="mr-2 h-4" orientation="vertical"/>
+		<Sidebar.Trigger class="-ml-1"/>
+		<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.Page>Shows</Breadcrumb.Page>
 				</Breadcrumb.Item>
@@ -33,24 +33,24 @@
 	</div>
 </header>
 {#snippet loadingbar()}
-    <Skeleton class="h-[50vh] w-full "/>
-    <Skeleton class="h-[50vh] w-full "/>
-    <Skeleton class="h-[50vh] w-full "/>
-    <Skeleton class="h-[50vh] w-full "/>
-    <Skeleton class="h-[50vh] w-full "/>
-    <Skeleton class="h-[50vh] w-full "/>
-    <Skeleton class="h-[50vh] w-full "/>
-    <Skeleton class="h-[50vh] w-full "/>
-    <Skeleton class="h-[50vh] w-full "/>
-    <Skeleton class="h-[50vh] w-full "/>
-    <Skeleton class="h-[50vh] w-full "/>
+	<Skeleton class="h-[50vh] w-full "/>
+	<Skeleton class="h-[50vh] w-full "/>
+	<Skeleton class="h-[50vh] w-full "/>
+	<Skeleton class="h-[50vh] w-full "/>
+	<Skeleton class="h-[50vh] w-full "/>
+	<Skeleton class="h-[50vh] w-full "/>
+	<Skeleton class="h-[50vh] w-full "/>
+	<Skeleton class="h-[50vh] w-full "/>
+	<Skeleton class="h-[50vh] w-full "/>
+	<Skeleton class="h-[50vh] w-full "/>
+	<Skeleton class="h-[50vh] w-full "/>
 {/snippet}
 <div class="flex w-full flex-1 flex-col gap-4 p-4 pt-0">
 	<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
 		TV Shows
 	</h1>
 	<div
-            class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+			class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
 	>
 		{#await tvShowsPromise}
 			{@render loadingbar()}
@@ -66,7 +66,7 @@
 								<Card.Description class="truncate">{show.overview}</Card.Description>
 							</Card.Header>
 							<Card.Content>
-                                <MediaPicture media={show}/>
+								<MediaPicture media={show}/>
 							</Card.Content>
 						</Card.Root>
 					</a>
diff --git a/web/src/routes/dashboard/tv/+page.ts b/web/src/routes/dashboard/tv/+page.ts
index 9d64b0c..304a034 100644
--- a/web/src/routes/dashboard/tv/+page.ts
+++ b/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};
 };
diff --git a/web/src/routes/dashboard/tv/[showId=uuid]/+layout.svelte b/web/src/routes/dashboard/tv/[showId=uuid]/+layout.svelte
index fb82c86..aa3d9e0 100644
--- a/web/src/routes/dashboard/tv/[showId=uuid]/+layout.svelte
+++ b/web/src/routes/dashboard/tv/[showId=uuid]/+layout.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import {setContext} from 'svelte';
-    import type {LayoutProps} from './$types';
+	import {setContext} from 'svelte';
+	import type {LayoutProps} from './$types';
 
-    let {data, children}: LayoutProps = $props();
+	let {data, children}: LayoutProps = $props();
 
 	const showData = $derived(data.showData);
 	setContext('show', () => showData);
diff --git a/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte b/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte
index 29c9d09..2168967 100644
--- a/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte
+++ b/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
-    import {env} from '$env/dynamic/public';
-    import {Separator} from '$lib/components/ui/separator/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 {goto} from '$app/navigation';
-    import {ImageOff} from 'lucide-svelte';
+	import {goto} from '$app/navigation';
+	import {ImageOff} from 'lucide-svelte';
 	import * as Table from '$lib/components/ui/table/index.js';
-    import {getContext} from 'svelte';
-    import type {RichShowTorrent, Show, User} from '$lib/types.js';
-    import {getFullyQualifiedMediaName} from '$lib/utils';
+	import {getContext} from 'svelte';
+	import type {RichShowTorrent, Show, User} from '$lib/types.js';
+	import {getFullyQualifiedMediaName} from '$lib/utils';
 	import DownloadSeasonDialog from '$lib/components/download-season-dialog.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 RequestSeasonDialog from '$lib/components/request-season-dialog.svelte';
 	import MediaPicture from '$lib/components/media-picture.svelte';
-    import {Checkbox} from '$lib/components/ui/checkbox/index.js';
-    import {toast} from 'svelte-sonner';
-    import {Label} from '$lib/components/ui/label';
+	import {Checkbox} from '$lib/components/ui/checkbox/index.js';
+	import {toast} from 'svelte-sonner';
+	import {Label} from '$lib/components/ui/label';
 
 	const apiUrl = env.PUBLIC_API_URL;
 	let show: () => Show = getContext('show');
@@ -28,10 +28,10 @@
 		let url = new URL(apiUrl + '/tv/shows/' + show().id + '/continuousDownload');
 		url.searchParams.append('continuous_download', !show().continuous_download);
 		console.log(
-            'Toggling continuous download for show',
-            show().name,
-            'to',
-            !show().continuous_download
+				'Toggling continuous download for show',
+				show().name,
+				'to',
+				!show().continuous_download
 		);
 		const response = await fetch(url, {
 			method: 'POST',
@@ -49,22 +49,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"/>
-        <Separator class="mr-2 h-4" orientation="vertical"/>
+		<Sidebar.Trigger class="-ml-1"/>
+		<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>{getFullyQualifiedMediaName(show())}</Breadcrumb.Page>
 				</Breadcrumb.Item>
@@ -79,12 +79,12 @@
 	<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">
 			{#if show().id}
-                <MediaPicture media={show()}/>
+				<MediaPicture media={show()}/>
 			{:else}
 				<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>
 			{/if}
 		</div>
@@ -98,21 +98,21 @@
 				{#if !show().ended}
 					<div class="mx-1 my-2 block">
 						<Checkbox
-                                checked={show().continuous_download}
-                                onCheckedChange={() => {
+								checked={show().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>
-                        <hr/>
+						<hr/>
 					</div>
 				{/if}
-                <DownloadSeasonDialog show={show()}/>
+				<DownloadSeasonDialog show={show()}/>
 			{/if}
-            <RequestSeasonDialog show={show()}/>
+			<RequestSeasonDialog show={show()}/>
 		</div>
 	</div>
 	<div class="flex-1 rounded-xl bg-muted/50 p-4">
@@ -131,12 +131,12 @@
 					{#if show().seasons.length > 0}
 						{#each show().seasons as season (season.id)}
 							<Table.Row
-                                    link={true}
-                                    onclick={() => goto('/dashboard/tv/' + show().id + '/' + season.id)}
+									link={true}
+									onclick={() => goto('/dashboard/tv/' + show().id + '/' + season.id)}
 							>
 								<Table.Cell class="min-w-[10px] font-medium">{season.number}</Table.Cell>
 								<Table.Cell class="min-w-[10px] font-medium">
-                                    <CheckmarkX state={season.downloaded}/>
+									<CheckmarkX state={season.downloaded}/>
 								</Table.Cell>
 								<Table.Cell class="min-w-[50px]">{season.name}</Table.Cell>
 								<Table.Cell class="max-w-[300px] truncate">{season.overview}</Table.Cell>
@@ -153,7 +153,7 @@
 	</div>
 	<div class="flex-1 rounded-xl bg-muted/50 p-4">
 		<div class="w-full overflow-x-auto">
-            <TorrentTable torrents={torrents.torrents}/>
+			<TorrentTable torrents={torrents.torrents}/>
 		</div>
 	</div>
 </div>
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 4117876..ea7cc34 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
@@ -1,13 +1,13 @@
 <script lang="ts">
-    import {page} from '$app/state';
-    import {Separator} from '$lib/components/ui/separator/index.js';
+	import {page} from '$app/state';
+	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 * as Table from '$lib/components/ui/table/index.js';
-    import {getContext} from 'svelte';
-    import type {PublicSeasonFile, Season, Show} from '$lib/types';
+	import {getContext} from 'svelte';
+	import type {PublicSeasonFile, Season, Show} from '$lib/types';
 	import CheckmarkX from '$lib/components/checkmark-x.svelte';
-    import {getFullyQualifiedMediaName, getTorrentQualityString} from '$lib/utils';
+	import {getFullyQualifiedMediaName, getTorrentQualityString} from '$lib/utils';
 	import MediaPicture from '$lib/components/media-picture.svelte';
 
 	let seasonFiles: PublicSeasonFile[] = $state(page.data.files);
@@ -19,29 +19,29 @@
 
 <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"/>
-        <Separator class="mr-2 h-4" orientation="vertical"/>
+		<Sidebar.Trigger class="-ml-1"/>
+		<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.Link href="/dashboard/tv/{show().id}">
 						{show().name}
 						{show().year == null ? '' : '(' + show().year + ')'}
 					</Breadcrumb.Link>
 				</Breadcrumb.Item>
-                <Breadcrumb.Separator class="hidden md:block"/>
+				<Breadcrumb.Separator class="hidden md:block"/>
 				<Breadcrumb.Item>
 					<Breadcrumb.Page>Season {season.number}</Breadcrumb.Page>
 				</Breadcrumb.Item>
@@ -55,7 +55,7 @@
 <div class="flex flex-1 flex-col gap-4 p-4">
 	<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="w-full flex-auto rounded-xl bg-muted/50 p-4 md:w-1/4">
 			<p class="leading-7 [&:not(:first-child)]:mt-6">
@@ -82,7 +82,7 @@
 								{file.file_path_suffix}
 							</Table.Cell>
 							<Table.Cell class="w-[10px] font-medium">
-                                <CheckmarkX state={file.downloaded}/>
+								<CheckmarkX state={file.downloaded}/>
 							</Table.Cell>
 						</Table.Row>
 					{:else}
diff --git a/web/src/routes/dashboard/tv/add-show/+page.svelte b/web/src/routes/dashboard/tv/add-show/+page.svelte
index 84508ff..227e0f7 100644
--- a/web/src/routes/dashboard/tv/add-show/+page.svelte
+++ b/web/src/routes/dashboard/tv/add-show/+page.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
-    import {env} from '$env/dynamic/public';
-    import {Separator} from '$lib/components/ui/separator/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 {Input} from '$lib/components/ui/input';
-    import {Label} from '$lib/components/ui/label';
-    import {Button} from '$lib/components/ui/button';
-    import {ChevronDown} from 'lucide-svelte';
+	import {Input} from '$lib/components/ui/input';
+	import {Label} from '$lib/components/ui/label';
+	import {Button} from '$lib/components/ui/button';
+	import {ChevronDown} from 'lucide-svelte';
 	import * as Collapsible from '$lib/components/ui/collapsible/index.js';
-    import type {MetaDataProviderShowSearchResult} from '$lib/types.js';
+	import type {MetaDataProviderSearchResult} from '$lib/types.js';
 	import * as RadioGroup from '$lib/components/ui/radio-group/index.js';
 	import AddMediaCard from '$lib/components/add-media-card.svelte';
-    import {toast} from 'svelte-sonner';
-    import {onMount} from 'svelte';
+	import {toast} from 'svelte-sonner';
+	import {onMount} from 'svelte';
 
-    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);
-    onMount(search);
+	let results: MetaDataProviderSearchResult[] | null = $state(null);
+	onMount(search);
 	async function search() {
 		let url = new URL(apiUrl + '/tv/recommended');
 		if (searchTerm.length > 0) {
@@ -39,7 +39,7 @@
 			}
 			results = await response.json();
 			if (searchTerm.length === 0) {
-                return;
+				return;
 			}
 			if (results && results.length > 0) {
 				toast.success(`Found ${results.length} result(s) for "${searchTerm}".`);
@@ -48,7 +48,7 @@
 			}
 		} catch (error) {
 			const errorMessage =
-                error instanceof Error ? error.message : 'An unknown error occurred during search.';
+					error instanceof Error ? error.message : 'An unknown error occurred during search.';
 			console.error('Search error:', error);
 			toast.error(errorMessage);
 			results = null; // Clear previous results on error
@@ -58,22 +58,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"/>
-        <Separator class="mr-2 h-4" orientation="vertical"/>
+		<Sidebar.Trigger class="-ml-1"/>
+		<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>Add a Show</Breadcrumb.Page>
 				</Breadcrumb.Item>
@@ -85,33 +85,33 @@
 <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
+			Add a Show
 		</h1>
 		<section>
 			<Label for="search-box">Show Name</Label>
-            <Input bind:value={searchTerm} id="search-box" placeholder="Show Name" type="text"/>
+			<Input bind:value={searchTerm} id="search-box" placeholder="Show Name" type="text"/>
 			<p class="text-sm text-muted-foreground">Search for a Show to add.</p>
 		</section>
 		<section>
-            <Collapsible.Root class="w-full space-y-1">
+			<Collapsible.Root class="w-full space-y-1">
 				<Collapsible.Trigger>
 					<div class="flex items-center justify-between space-x-4 px-4">
 						<h4 class="text-sm font-semibold">Advanced Settings</h4>
 						<Button class="w-9 p-0" size="sm" variant="ghost">
-                            <ChevronDown/>
+							<ChevronDown/>
 							<span class="sr-only">Toggle</span>
 						</Button>
 					</div>
 				</Collapsible.Trigger>
-                <Collapsible.Content class="space-y-1">
+				<Collapsible.Content class="space-y-1">
 					<Label for="metadata-provider-selector">Choose which Metadata Provider to query.</Label>
 					<RadioGroup.Root bind:value={metadataProvider} id="metadata-provider-selector">
 						<div class="flex items-center space-x-2">
-                            <RadioGroup.Item id="option-one" value="tmdb"/>
+							<RadioGroup.Item id="option-one" value="tmdb"/>
 							<Label for="option-one">TMDB (Recommended)</Label>
 						</div>
 						<div class="flex items-center space-x-2">
-                            <RadioGroup.Item id="option-two" value="tvdb"/>
+							<RadioGroup.Item id="option-two" value="tvdb"/>
 							<Label for="option-two">TVDB</Label>
 						</div>
 					</RadioGroup.Root>
@@ -123,18 +123,18 @@
 		</section>
 	</div>
 
-    <Separator class="my-8"/>
+	<Separator class="my-8"/>
 
 	{#if results != null}
 		{#if results.length === 0}
 			<h3 class="mx-auto">No Shows found.</h3>
 		{:else}
 			<div
-                    class="grid w-full auto-rows-min gap-4 sm:grid-cols-1
+					class="grid w-full auto-rows-min gap-4 sm:grid-cols-1
              md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
 			>
 				{#each results as result}
-                    <AddMediaCard {result}/>
+					<AddMediaCard {result}/>
 				{/each}
 			</div>
 		{/if}
diff --git a/web/src/routes/dashboard/tv/torrents/+page.svelte b/web/src/routes/dashboard/tv/torrents/+page.svelte
index 6aee268..94ec933 100644
--- a/web/src/routes/dashboard/tv/torrents/+page.svelte
+++ b/web/src/routes/dashboard/tv/torrents/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-    import {page} from '$app/state';
-    import {Separator} from '$lib/components/ui/separator/index.js';
+	import {page} from '$app/state';
+	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 {getFullyQualifiedMediaName} from '$lib/utils';
+	import type {RichShowTorrent} from '$lib/types';
+	import {getFullyQualifiedMediaName} 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"/>
-        <Separator class="mr-2 h-4" orientation="vertical"/>
+		<Sidebar.Trigger class="-ml-1"/>
+		<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>
@@ -51,16 +51,16 @@
 					<Card.Root>
 						<Card.Header>
 							<Card.Title>
-                                {getFullyQualifiedMediaName(show)}
+								{getFullyQualifiedMediaName(show)}
 							</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">No Torrents added yet.</div>
+				<div class="col-span-full text-center text-muted-foreground">No Torrents added yet.</div>
 			{/each}
 		</Accordion.Root>
 	{/await}
diff --git a/web/src/routes/dashboard/tv/torrents/+page.ts b/web/src/routes/dashboard/tv/torrents/+page.ts
index 1f7935b..a44bc02 100644
--- a/web/src/routes/dashboard/tv/torrents/+page.ts
+++ b/web/src/routes/dashboard/tv/torrents/+page.ts
@@ -8,5 +8,5 @@ export const load: PageLoad = async ({fetch}) => {
 		method: 'GET',
 		credentials: 'include'
 	});
-    return {shows: response.json()};
+	return {shows: response.json()};
 };
diff --git a/web/src/routes/login/+page.ts b/web/src/routes/login/+page.ts
index f20214d..83ab437 100644
--- a/web/src/routes/login/+page.ts
+++ b/web/src/routes/login/+page.ts
@@ -12,5 +12,5 @@ export const load: PageLoad = async ({fetch}) => {
 		credentials: 'include'
 	});
 
-    return {oauthProvider: await response.json()};
+	return {oauthProvider: await response.json()};
 };
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 4633379..c5ac871 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,9 +1,9 @@
 {
 	"extends": "./.svelte-kit/tsconfig.json",
-  "include": [
-    "web/src/app.d.ts",
-    "web/src/**/*"
-  ],
+	"include": [
+		"web/src/app.d.ts",
+		"web/src/**/*"
+	],
 	"compilerOptions": {
 		"allowJs": true,
 		"checkJs": true,
@@ -14,9 +14,9 @@
 		"sourceMap": true,
 		"strict": true,
 		"moduleResolution": "bundler",
-      "types": [
-        "svelte"
-      ]
+		"types": [
+			"svelte"
+		]
 	}
 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files