format frontend code

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
-	import {useSidebar} from '$lib/components/ui/sidebar/index.js';
+    import {useSidebar} from '$lib/components/ui/sidebar/index.js';
 	import Ellipsis from '@lucide/svelte/icons/ellipsis';
 	import Folder from '@lucide/svelte/icons/folder';
 	import Share from '@lucide/svelte/icons/share';
@@ -28,38 +28,38 @@
 		{#each projects as item (item.name)}
 			<Sidebar.MenuItem>
 				<Sidebar.MenuButton>
-					{#snippet child({props})}
+                    {#snippet child({props})}
 						<a href={item.url} {...props}>
-							<item.icon/>
+                            <item.icon/>
 							<span>{item.name}</span>
 						</a>
 					{/snippet}
 				</Sidebar.MenuButton>
 				<DropdownMenu.Root>
 					<DropdownMenu.Trigger>
-						{#snippet child({props})}
+                        {#snippet child({props})}
 							<Sidebar.MenuAction showOnHover {...props}>
-								<Ellipsis/>
+                                <Ellipsis/>
 								<span class="sr-only">More</span>
 							</Sidebar.MenuAction>
 						{/snippet}
 					</DropdownMenu.Trigger>
 					<DropdownMenu.Content
-							class="w-48"
-							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>

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>

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-	import type {WithElementRef} from 'bits-ui';
-	import type {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>

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

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

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

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

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

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

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

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

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

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

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

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