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/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

@@ -8,9 +8,8 @@
 	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";
 
-    const apiUrl = env.PUBLIC_API_URL
+	const apiUrl = env.PUBLIC_API_URL;
 
 	let {oauthProvider} = $props();
 	let oauthProviderName = $derived(oauthProvider.oauth_name);
@@ -146,15 +145,14 @@
 </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"
+					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="bg-background text-muted-foreground relative z-10 px-2">
+				<span class="relative z-10 bg-background px-2 text-muted-foreground">
 					Or continue with
 				</span>
 			</div>

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=""
@@ -152,9 +152,7 @@
             {/if}
         {:else}
             <Table.Row>
-                <Table.Cell colspan="8" class="text-center">
+                <Table.Cell colspan="8" class="text-center">There are currently no requests.</Table.Cell>
-                    There are currently no requests.
-                </Table.Cell>
             </Table.Row>
         {/each}
     </Table.Body>

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

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

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 Check from '@lucide/svelte/icons/check';
-    import Minus from "@lucide/svelte/icons/minus";
+	import Minus from '@lucide/svelte/icons/minus';
-    import {cn} from "$lib/utils.js";
+	import {cn} from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -19,7 +19,7 @@
 		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",
+		'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
 	)}
 >
@@ -28,7 +28,7 @@
 			{#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}

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/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-settings.svelte

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

web/src/lib/types.ts

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

web/src/lib/utils.ts

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

web/src/routes/+page.svelte

@@ -1,15 +1,11 @@
 <script lang="ts">
     import {goto} from '$app/navigation';
     import {base} from '$app/paths';
-	import {onMount} from 'svelte';
+    import {browser} from '$app/environment';
-	import {browser} from "$app/environment";
+    import {redirect} from '@sveltejs/kit';
-	import {redirect} from "@sveltejs/kit";
-
-	if (browser)
-		goto(base + '/dashboard');
-	else
-		throw redirect(307, '/login');
 
+    if (browser) goto(base + '/dashboard');
+    else throw redirect(307, '/login');
 </script>
 
 <svelte:head>

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

@@ -2,7 +2,7 @@ import {env} from '$env/dynamic/public';
 import type {LayoutLoad} from './$types';
 import {redirect} from '@sveltejs/kit';
 import {base} from '$app/paths';
-import {browser} from "$app/environment";
+import {browser} from '$app/environment';
 import {goto} from '$app/navigation';
 
 const apiUrl = env.PUBLIC_API_URL;

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

@@ -33,7 +33,9 @@
 		Dashboard
 	</h1>
 	<div class="min-h-[100vh] flex-1 items-center justify-center rounded-xl p-4 md:min-h-min">
-		<div class="mx-auto max-w-[80vw] sm:max-w-[200px] md:max-w-[500px] lg:max-w-[750px] xl:max-w-[1200px]">
+        <div
+                class="mx-auto max-w-[80vw] sm:max-w-[200px] md:max-w-[500px] lg:max-w-[750px] xl:max-w-[1200px]"
+        >
 			<h3 class="my-4 scroll-m-20 text-center text-2xl font-semibold tracking-tight">
 				Trending Shows
 			</h3>

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

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

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

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

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

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

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

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

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

@@ -14,34 +14,37 @@
 	import {page} from '$app/state';
 	import TorrentTable from '$lib/components/torrent-table.svelte';
 	import RequestSeasonDialog from '$lib/components/request-season-dialog.svelte';
-    import {browser} from "$app/environment";
+	import ShowPicture from '$lib/components/show-picture.svelte';
-    import ShowPicture from "$lib/components/show-picture.svelte";
+	import {Checkbox} from '$lib/components/ui/checkbox/index.js';
-    import {Checkbox} from "$lib/components/ui/checkbox/index.js";
 	import {toast} from 'svelte-sonner';
-    import {Label} from "$lib/components/ui/label";
+	import {Label} from '$lib/components/ui/label';
 
-    const apiUrl = env.PUBLIC_API_URL
+	const apiUrl = env.PUBLIC_API_URL;
 	let show: () => Show = getContext('show');
 	let user: () => User = getContext('user');
 	let torrents: RichShowTorrent = page.data.torrentsData;
 
 	async function toggle_continuous_download() {
-        let url = new URL(apiUrl + "/tv/shows/" + show().id + "/continuousDownload");
+		let url = new URL(apiUrl + '/tv/shows/' + show().id + '/continuousDownload');
 		url.searchParams.append('continuous_download', !show().continuous_download);
-        console.log("Toggling continuous download for show", show().name, "to", !show().continuous_download);
+		console.log(
+				'Toggling continuous download for show',
+				show().name,
+				'to',
+				!show().continuous_download
+		);
 		const response = await fetch(url, {
 			method: 'POST',
 			credentials: 'include'
 		});
 		if (!response.ok) {
 			const errorText = await response.text();
-            toast.error("Failed to toggle continuous download: " + errorText);
+			toast.error('Failed to toggle continuous download: ' + errorText);
 		} else {
 			show().continuous_download = !show().continuous_download;
-            toast.success("Continuous download toggled successfully.");
+			toast.success('Continuous download toggled successfully.');
 		}
 	}
-    
 </script>
 
 <header class="flex h-16 shrink-0 items-center gap-2">
@@ -72,9 +75,9 @@
 <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
 	{getFullyQualifiedShowName(show())}
 </h1>
-<div class="flex flex-1 w-full flex-col gap-4 p-4">
+<div class="flex w-full flex-1 flex-col gap-4 p-4">
-    <div class="flex flex-col md:flex-row md:items-stretch gap-4">
+	<div class="flex flex-col gap-4 md:flex-row md:items-stretch">
-        <div class="w-full md:w-1/3 md:max-w-sm rounded-xl bg-muted/50 overflow-hidden">
+		<div class="w-full overflow-hidden rounded-xl bg-muted/50 md:w-1/3 md:max-w-sm">
 			{#if show().id}
 				<ShowPicture show={show()}/>
 			{:else}
@@ -85,29 +88,26 @@
 				</div>
 			{/if}
 		</div>
-        <div class="w-full md:w-1/4 flex-auto rounded-xl bg-muted/50 p-4">
+		<div class="w-full flex-auto rounded-xl bg-muted/50 p-4 md:w-1/4">
 			<p class="leading-7 [&:not(:first-child)]:mt-6">
 				{show().overview}
 			</p>
 		</div>
-        <div
+		<div class="w-full flex-auto rounded-xl bg-muted/50 p-4 md:w-1/3">
-                class="w-full md:w-1/3 flex-auto rounded-xl bg-muted/50 p-4"
-        >
 			{#if user().is_superuser}
 				{#if !show().ended}
-                    <div class="my-2 mx-1 block">
+					<div class="mx-1 my-2 block">
 						<Checkbox
 								checked={show().continuous_download}
 								onCheckedChange={() => {
-                                toggle_continuous_download()
+								toggle_continuous_download();
 							}}
 								id="continuous-download-checkbox"
-
 						/>
 						<Label for="continuous-download-checkbox">
 							Enable automatic download of future seasons
 						</Label>
-                        <hr>
+						<hr/>
 					</div>
 				{/if}
 				<DownloadSeasonDialog show={show()}/>

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

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

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

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

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

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

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

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

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

@@ -60,9 +60,7 @@
 					</Card.Root>
 				</div>
 			{:else}
-				<div class="col-span-full text-center text-muted-foreground">
+                <div class="col-span-full text-center text-muted-foreground">No Torrents added yet.</div>
-					No Torrents added yet.
-				</div>
 			{/each}
 		</Accordion.Root>
 	{/await}

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

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

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

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

web/vite.config.ts

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