refactor: standardize formatting and improve code consistency across components

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

@@ -4,7 +4,12 @@
 	import TvIcon from '@lucide/svelte/icons/tv';
 	import LayoutPanelLeft from '@lucide/svelte/icons/layout-panel-left';
 	import DownloadIcon from '@lucide/svelte/icons/download';
+	import Sun from "@lucide/svelte/icons/sun";
+	import Moon from "@lucide/svelte/icons/moon";
 
+	import {resetMode, setMode} from "mode-watcher";
+	import {buttonVariants} from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
 	const data = {
 		navMain: [
 			{
@@ -18,7 +23,7 @@
 						url: '/dashboard/tv'
 					},
 					{
-						title: 'Add Show',
+						title: 'Add a show',
 						url: '/dashboard/tv/add-show'
 					},
 					{

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

@@ -1,37 +1,54 @@
 <script lang="ts">
-    import * as Sidebar from '$lib/components/ui/sidebar/index.js';
-    import type {ComponentProps} from 'svelte';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import type {ComponentProps} from 'svelte';
+	import Sun from "@lucide/svelte/icons/sun";
+	import Moon from "@lucide/svelte/icons/moon";
 
-    let {
-        ref = $bindable(null),
-        items,
-        ...restProps
-    }: {
-        items: {
-            title: string;
-            url: string;
-            // This should be `Component` after @lucide/svelte updates types
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            icon: any;
-        }[];
-    } & ComponentProps<typeof Sidebar.Group> = $props();
+	import {toggleMode} from "mode-watcher";
+	import {Button} from "$lib/components/ui/button/index.js";
+	let {
+		ref = $bindable(null),
+		items,
+		...restProps
+	}: {
+		items: {
+			title: string;
+			url: string;
+			// This should be `Component` after @lucide/svelte updates types
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			icon: any;
+		}[];
+	} & ComponentProps<typeof Sidebar.Group> = $props();
 </script>
 
 <Sidebar.Group bind:ref {...restProps}>
-    <Sidebar.GroupContent>
-        <Sidebar.Menu>
-            {#each items as item (item.title)}
-                <Sidebar.MenuItem>
-                    <Sidebar.MenuButton size="sm">
-                        {#snippet child({props})}
-                            <a href={item.url} {...props}>
-                                <item.icon/>
-                                <span>{item.title}</span>
-                            </a>
-                        {/snippet}
-                    </Sidebar.MenuButton>
-                </Sidebar.MenuItem>
-            {/each}
-        </Sidebar.Menu>
-    </Sidebar.GroupContent>
+	<Sidebar.GroupContent>
+		<Sidebar.Menu>
+			<Sidebar.MenuItem>
+				<Sidebar.MenuButton size="sm">
+					{#snippet child({props})}
+						<div on:click={()=>toggleMode()} {...props}>
+
+							<Sun class="dark:hidden "/>
+							<Moon class="hidden dark:inline"/>
+							<span>Toggle mode</span>
+						</div>
+					{/snippet}
+				</Sidebar.MenuButton>
+			</Sidebar.MenuItem>
+
+			{#each items as item (item.title)}
+				<Sidebar.MenuItem>
+					<Sidebar.MenuButton size="sm">
+						{#snippet child({props})}
+							<a href={item.url} {...props}>
+								<item.icon/>
+								<span>{item.title}</span>
+							</a>
+						{/snippet}
+					</Sidebar.MenuButton>
+				</Sidebar.MenuItem>
+			{/each}
+		</Sidebar.Menu>
+	</Sidebar.GroupContent>
 </Sidebar.Group>

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

@@ -40,9 +40,9 @@
 				{/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'}
-					align="end"
 					sideOffset={4}
 			>
 				<DropdownMenu.Label class="p-0 font-normal">

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import {Accordion as AccordionPrimitive, type WithoutChild} from 'bits-ui';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+        bind:ref
+        class={cn(
+		'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+		className
+	)}
+        {...restProps}
+>
+    <div class="pb-4 pt-0">
+        {@render children?.()}
+    </div>
+</AccordionPrimitive.Content>

web/src/lib/components/ui/accordion/accordion-item.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import {Accordion as AccordionPrimitive} from 'bits-ui';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item {...restProps} bind:ref class={cn('border-b', className)}/>

web/src/lib/components/ui/accordion/accordion-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import {Accordion as AccordionPrimitive, type WithoutChild} from 'bits-ui';
+    import ChevronDown from '@lucide/svelte/icons/chevron-down';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        level = 3,
+        children,
+        ...restProps
+    }: WithoutChild<AccordionPrimitive.TriggerProps> & {
+        level?: AccordionPrimitive.HeaderProps['level'];
+    } = $props();
+</script>
+
+<AccordionPrimitive.Header class="flex" {level}>
+    <AccordionPrimitive.Trigger
+            bind:ref
+            class={cn(
+			'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+			className
+		)}
+            {...restProps}
+    >
+        {@render children?.()}
+        <ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200"/>
+    </AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

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

@@ -0,0 +1,17 @@
+import {Accordion as AccordionPrimitive} from 'bits-ui';
+import Content from './accordion-content.svelte';
+import Item from './accordion-item.svelte';
+import Trigger from './accordion-trigger.svelte';
+
+const Root = AccordionPrimitive.Root;
+export {
+    Root,
+    Content,
+    Item,
+    Trigger,
+    //
+    Root as Accordion,
+    Content as AccordionContent,
+    Item as AccordionItem,
+    Trigger as AccordionTrigger
+};

web/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -1,22 +1,22 @@
 <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 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';
 
 	let {
-        ref = $bindable(null),
-        class: className,
-        ...restProps
-    }: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
 </script>
 
 <span
-        bind:this={ref}
-        role="presentation"
-        aria-hidden="true"
-        class={cn('flex size-9 items-center justify-center', className)}
-        {...restProps}
+		{...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>

web/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte

@@ -1,23 +1,23 @@
 <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),
-        class: className,
-        children,
-        ...restProps
-    }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
 <span
-        bind:this={ref}
-        role="link"
-        aria-disabled="true"
-        aria-current="page"
-        class={cn('font-normal text-foreground', className)}
-        {...restProps}
+		{...restProps}
+		aria-current="page"
+		aria-disabled="true"
+		bind:this={ref}
+		class={cn('font-normal text-foreground', className)}
+		role="link"
 >
 	{@render children?.()}
 </span>

web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -1,33 +1,33 @@
 <script lang="ts">
-    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 {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';
 
 	let {
-        ref = $bindable(null),
-        class: className,
-        children: childrenProp,
-        checked = $bindable(false),
-        indeterminate = $bindable(false),
-        ...restProps
-    }: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
-        children?: Snippet;
-    } = $props();
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		...restProps
+	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
 </script>
 
 <DropdownMenuPrimitive.CheckboxItem
-        bind:ref
-        bind:checked
-        bind:indeterminate
-        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
 	)}
-        {...restProps}
 >
-    {#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}
 </DropdownMenuPrimitive.CheckboxItem>

web/src/lib/components/ui/dropdown-menu/dropdown-menu-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();
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
 <span
-        bind:this={ref}
-        class={cn('ml-auto text-xs tracking-widest opacity-60', className)}
-        {...restProps}
+		{...restProps}
+		bind:this={ref}
+		class={cn('ml-auto text-xs tracking-widest opacity-60', className)}
 >
 	{@render children?.()}
 </span>

web/src/lib/types.ts

@@ -1,56 +1,56 @@
 export interface User {
-    id: string;
-    email: string;
-    is_active?: boolean;
-    is_superuser?: boolean;
-    is_verified?: boolean;
+	id: string;
+	email: string;
+	is_active?: boolean;
+	is_superuser?: boolean;
+	is_verified?: boolean;
 }
 
 export interface BearerResponse {
-    access_token: string;
-    token_type: string;
+	access_token: string;
+	token_type: string;
 }
 
 export interface BodyAuthCookieLoginAuthCookieLoginPost {
-    grant_type?: string | null; // anyOf string, null, pattern ^password$ implied but not strongly typed in TS interface
-    username: string;
-    password: string;
-    scope?: string; // default: ""
-    client_id?: string | null; // anyOf string, null
-    client_secret?: string | null; // anyOf string, null
+	grant_type?: string | null; // anyOf string, null, pattern ^password$ implied but not strongly typed in TS interface
+	username: string;
+	password: string;
+	scope?: string; // default: ""
+	client_id?: string | null; // anyOf string, null
+	client_secret?: string | null; // anyOf string, null
 }
 
 export interface BodyAuthJwtLoginAuthJwtLoginPost {
-    grant_type?: string | null; // anyOf string, null, pattern ^password$ implied but not strongly typed in TS interface
-    username: string;
-    password: string;
-    scope?: string; // default: ""
-    client_id?: string | null; // anyOf string, null
-    client_secret?: string | null; // anyOf string, null
+	grant_type?: string | null; // anyOf string, null, pattern ^password$ implied but not strongly typed in TS interface
+	username: string;
+	password: string;
+	scope?: string; // default: ""
+	client_id?: string | null; // anyOf string, null
+	client_secret?: string | null; // anyOf string, null
 }
 
 export interface BodyResetForgotPasswordAuthForgotPasswordPost {
-    email: string; // format: email
+	email: string; // format: email
 }
 
 export interface BodyResetResetPasswordAuthResetPasswordPost {
-    token: string;
-    password: string;
+	token: string;
+	password: string;
 }
 
 export interface BodyVerifyRequestTokenAuthRequestVerifyTokenPost {
-    email: string; // format: email
+	email: string; // format: email
 }
 
 export interface BodyVerifyVerifyAuthVerifyPost {
-    token: string;
+	token: string;
 }
 
 export interface Episode {
-    number: number; // type: integer
-    external_id: number; // type: integer
-    title: string;
-    id?: string; // type: string, format: uuid
+	number: number; // type: integer
+	external_id: number; // type: integer
+	title: string;
+	id?: string; // type: string, format: uuid
 }
 
 export type Quality = 1 | 2 | 3 | 4 | 5;
@@ -59,72 +59,107 @@ export type TorrentStatus = 1 | 2 | 3 | 4;
 // You likely want to export these maps and potentially helper functions too
 
 export interface PublicIndexerQueryResult {
-    title: string;
-    quality: Quality; // $ref: #/components/schemas/Quality
-    id: string; // type: string, format: uuid
-    seeders: number; // type: integer
-    flags: string[]; // items: { type: string }, type: array
-    season: number[]; // items: { type: integer }, type: array
-    size: number;
+	title: string;
+	quality: Quality; // $ref: #/components/schemas/Quality
+	id: string; // type: string, format: uuid
+	seeders: number; // type: integer
+	flags: string[]; // items: { type: string }, type: array
+	season: number[]; // items: { type: integer }, type: array
+	size: number;
 }
 
 export interface Season {
-    number: number; // type: integer
-    name: string;
-    overview: string;
-    external_id: number; // type: integer
-    episodes: Episode[]; // items: { $ref: #/components/schemas/Episode }, type: array
-    id?: string; // type: string, format: uuid
+	number: number; // type: integer
+	name: string;
+	overview: string;
+	external_id: number; // type: integer
+	episodes: Episode[]; // items: { $ref: #/components/schemas/Episode }, type: array
+	id?: string; // type: string, format: uuid
+}
+export interface PublicSeason {
+	number: number; // type: integer
+	name: string;
+	downloaded: boolean;
+	overview: string;
+	external_id: number; // type: integer
+	episodes: Episode[]; // items: { $ref: #/components/schemas/Episode }, type: array
+	id?: string; // type: string, format: uuid
 }
-
 export interface SeasonRequest {
-    season_id: string; // type: string, format: uuid
-    min_quality: Quality; // $ref: #/components/schemas/Quality
-    wanted_quality: Quality; // $ref: #/components/schemas/Quality
+	season_id: string; // type: string, format: uuid
+	min_quality: Quality; // $ref: #/components/schemas/Quality
+	wanted_quality: Quality; // $ref: #/components/schemas/Quality
 }
 
 export interface Show {
-    name: string;
-    overview: string;
-    year: number; // type: integer
-    external_id: number; // type: integer
-    metadata_provider: string;
-    seasons: Season[]; // items: { $ref: #/components/schemas/Season }, type: array
-    id: string; // type: string, format: uuid
+	name: string;
+	overview: string;
+	year: number; // type: integer
+	external_id: number; // type: integer
+	metadata_provider: string;
+	seasons: Season[]; // items: { $ref: #/components/schemas/Season }, type: array
+	id: string; // type: string, format: uuid
+}
+
+export interface PublicShow {
+	name: string;
+	overview: string;
+	year: number; // type: integer
+	external_id: number; // type: integer
+	metadata_provider: string;
+	seasons: PublicSeason[]; // items: { $ref: #/components/schemas/Season }, type: array
+	id: string; // type: string, format: uuid
 }
 
 export interface Torrent {
-    status: TorrentStatus; // $ref: #/components/schemas/TorrentStatus
-    title: string;
-    quality: Quality; // $ref: #/components/schemas/Quality
-    imported: boolean;
-    hash: string;
-    id?: string; // type: string, format: uuid
+	status: TorrentStatus; // $ref: #/components/schemas/TorrentStatus
+	title: string;
+	quality: Quality; // $ref: #/components/schemas/Quality
+	imported: boolean;
+	hash: string;
+	id?: string; // type: string, format: uuid
 }
 
 export interface UserCreate {
-    email: string; // format: email
-    password: string;
-    is_active?: boolean | null; // anyOf boolean, null, default: true
-    is_superuser?: boolean | null; // anyOf boolean, null, default: false
-    is_verified?: boolean | null; // anyOf boolean, null, default: false
+	email: string; // format: email
+	password: string;
+	is_active?: boolean | null; // anyOf boolean, null, default: true
+	is_superuser?: boolean | null; // anyOf boolean, null, default: false
+	is_verified?: boolean | null; // anyOf boolean, null, default: false
 }
 
 export interface UserUpdate {
-    password?: string | null; // anyOf string, null
-    email?: string | null; // anyOf string, null, format: email
-    is_active?: boolean | null; // anyOf boolean, null
-    is_superuser?: boolean | null; // anyOf boolean, null
-    is_verified?: boolean | null; // anyOf boolean, null
-    // No required fields listed in the schema, so all are optional
+	password?: string | null; // anyOf string, null
+	email?: string | null; // anyOf string, null, format: email
+	is_active?: boolean | null; // anyOf boolean, null
+	is_superuser?: boolean | null; // anyOf boolean, null
+	is_verified?: boolean | null; // anyOf boolean, null
 }
 
 export interface MetaDataProviderShowSearchResult {
-    poster_path: string | null;
-    overview: string | null;
-    name: string;
-    external_id: number;
-    year: number | null;
-    metadata_provider: string;
-    added: boolean;
+	poster_path: string | null;
+	overview: string | null;
+	name: string;
+	external_id: number;
+	year: number | null;
+	metadata_provider: string;
+	added: boolean;
+}
+export interface RichSeasonTorrent {
+	torrent_id: string;
+	torrent_title: string;
+	status: TorrentStatus;
+	quality: Quality;
+	imported: boolean;
+
+	file_path_suffix: string;
+	seasons: number[];
+}
+
+export interface RichShowTorrent {
+	show_id: string;
+	name: string;
+	year: number | null;
+	metadata_provider: string;
+	torrents: RichSeasonTorrent[];
 }

web/src/lib/utils.ts

@@ -19,10 +19,17 @@ export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
 }
 
-export function getQualityString(value: number): string {
+export function getTorrentQualityString(value: number): string {
 	return qualityMap[value] || 'unknown';
 }
 
 export function getTorrentStatusString(value: number): string {
 	return torrentStatusMap[value] || 'unknown';
 }
+export function getFullyQualifiedShowName(show: { name: string; year: number }): string {
+	let name = show.name;
+	if (show.year != null) {
+		name += ' (' + show.year + ')';
+	}
+	return name;
+}