From 76d9d47a44906df89fdbefb39973372813261183 Mon Sep 17 00:00:00 2001
From: maxid <97409287+maxdorninger@users.noreply.github.com>
Date: Sat, 3 Jan 2026 14:54:48 +0100
Subject: [PATCH 1/3] deduplicate code in download movie/season dialogs

---
 .../download-dialog-wrapper.svelte            |  32 +++
 .../download-movie-dialog.svelte              | 208 ++++----------
 .../download-season-dialog.svelte             | 261 ++++++------------
 .../download-dialogs/search-tabs.svelte       |  47 ++++
 .../download-dialogs/torrent-table.svelte     | 102 +++++++
 5 files changed, 308 insertions(+), 342 deletions(-)
 create mode 100644 web/src/lib/components/download-dialogs/download-dialog-wrapper.svelte
 create mode 100644 web/src/lib/components/download-dialogs/search-tabs.svelte
 create mode 100644 web/src/lib/components/download-dialogs/torrent-table.svelte

diff --git a/web/src/lib/components/download-dialogs/download-dialog-wrapper.svelte b/web/src/lib/components/download-dialogs/download-dialog-wrapper.svelte
new file mode 100644
index 0000000..ff37b35
--- /dev/null
+++ b/web/src/lib/components/download-dialogs/download-dialog-wrapper.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { buttonVariants } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { type Snippet } from 'svelte';
+
+	let {
+		open = $bindable(),
+		triggerText,
+		title,
+		description,
+		children
+	}: {
+		open: boolean;
+		triggerText: string;
+		title: string;
+		description: string;
+		children: Snippet;
+	} = $props();
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Trigger class={buttonVariants({ variant: 'default' })}>{triggerText}</Dialog.Trigger>
+	<Dialog.Content class="max-h-[90vh] w-fit min-w-[80vw] overflow-y-auto">
+		<Dialog.Header>
+			<Dialog.Title>{title}</Dialog.Title>
+			<Dialog.Description>
+				{description}
+			</Dialog.Description>
+		</Dialog.Header>
+		{@render children()}
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/web/src/lib/components/download-dialogs/download-movie-dialog.svelte b/web/src/lib/components/download-dialogs/download-movie-dialog.svelte
index f62da2d..bdebfbe 100644
--- a/web/src/lib/components/download-dialogs/download-movie-dialog.svelte
+++ b/web/src/lib/components/download-dialogs/download-movie-dialog.svelte
@@ -1,19 +1,18 @@
 <script lang="ts">
-	import { Button, buttonVariants } from '$lib/components/ui/button';
-	import { Input } from '$lib/components/ui/input';
-	import { Label } from '$lib/components/ui/label';
+	import { Button } from '$lib/components/ui/button';
 	import { toast } from 'svelte-sonner';
 	import { Badge } from '$lib/components/ui/badge';
 
-	import { ArrowDown, ArrowUp, LoaderCircle } from 'lucide-svelte';
-	import * as Dialog from '$lib/components/ui/dialog';
-	import * as Tabs from '$lib/components/ui/tabs';
 	import * as Table from '$lib/components/ui/table';
 	import client from '$lib/api';
+	import type { components } from '$lib/api/api';
 	import SelectFilePathSuffixDialog from '$lib/components/download-dialogs/select-file-path-suffix-dialog.svelte';
 	import { invalidateAll } from '$app/navigation';
+	import TorrentTable from '$lib/components/download-dialogs/torrent-table.svelte';
+	import SearchTabs from '$lib/components/download-dialogs/search-tabs.svelte';
+	import DownloadDialogWrapper from '$lib/components/download-dialogs/download-dialog-wrapper.svelte';
 
-	let { movie } = $props();
+	let { movie }: { movie: components['schemas']['Movie'] } = $props();
 	let dialogueState = $state(false);
 	let torrentsError: string | null = $state(null);
 	let queryOverride: string = $state('');
@@ -23,7 +22,6 @@
 	let torrentsData: any[] | null = $state(null);
 	let tabState: string = $state('basic');
 	let isLoading: boolean = $state(false);
-	let sortBy = $state({ col: 'score', ascending: false });
 
 	let advancedMode: boolean = $derived(tabState === 'advanced');
 
@@ -35,32 +33,12 @@
 		{ name: 'Indexer Flags', id: 'flags' }
 	];
 
-	function getSortedColumnState(column: string | undefined): boolean | null {
-		if (sortBy.col !== column) return null;
-		return sortBy.ascending;
-	}
-
-	function sortData(column?: string | undefined) {
-		if (column !== undefined) {
-			if (column === sortBy.col) {
-				sortBy.ascending = !sortBy.ascending;
-			} else {
-				sortBy = { col: column, ascending: true };
-			}
-		}
-
-		let modifier = sortBy.ascending ? 1 : -1;
-		torrentsData?.sort((a, b) =>
-			a[sortBy.col] < b[sortBy.col] ? -1 * modifier : a[sortBy.col] > b[sortBy.col] ? modifier : 0
-		);
-	}
-
 	async function downloadTorrent(result_id: string) {
 		torrentsError = null;
 		const { data, response } = await client.POST(`/api/v1/movies/{movie_id}/torrents`, {
 			params: {
 				path: {
-					movie_id: movie.id
+					movie_id: movie.id!
 				},
 				query: {
 					public_indexer_result_id: result_id,
@@ -96,7 +74,7 @@
 						search_query_override: advancedMode ? queryOverride : undefined
 					},
 					path: {
-						movie_id: movie.id
+						movie_id: movie.id!
 					}
 				}
 			})
@@ -105,135 +83,49 @@
 		toast.info('Searching for torrents...');
 
 		torrentsData = await torrentsPromise;
-		sortData();
 		toast.info('Found ' + torrentsData?.length + ' torrents.');
 	}
 </script>
 
-<Dialog.Root bind:open={dialogueState}>
-	<Dialog.Trigger class={buttonVariants({ variant: 'default' })}>Download Movie</Dialog.Trigger>
-	<Dialog.Content class="max-h-[90vh] w-fit min-w-[80vw] overflow-y-auto">
-		<Dialog.Header>
-			<Dialog.Title>Download a Movie</Dialog.Title>
-			<Dialog.Description>
-				Search and download torrents for a specific season or season packs.
-			</Dialog.Description>
-		</Dialog.Header>
-		<Tabs.Root class="w-full" bind:value={tabState}>
-			<Tabs.List>
-				<Tabs.Trigger value="basic">Standard Mode</Tabs.Trigger>
-				<Tabs.Trigger value="advanced">Advanced Mode</Tabs.Trigger>
-			</Tabs.List>
-			<Tabs.Content value="basic">
-				<div class="grid w-full items-center gap-1.5">
-					<Button
-						disabled={isLoading}
-						class="w-fit"
-						onclick={() => {
-							search();
-						}}
-					>
-						Search for Torrents
-					</Button>
-				</div>
-			</Tabs.Content>
-			<Tabs.Content value="advanced">
-				<div class="grid w-full items-center gap-1.5">
-					<Label for="query-override">Enter a custom query</Label>
-					<div class="flex w-full max-w-sm items-center space-x-2">
-						<Input bind:value={queryOverride} id="query-override" type="text" />
-						<Button
-							disabled={isLoading}
-							class="w-fit"
-							onclick={() => {
-								search();
-							}}
-						>
-							Search for Torrents
-						</Button>
-					</div>
-					<p class="text-sm text-muted-foreground">
-						The custom query will override the default search string like "A Minecraft Movie
-						(2025)".
-					</p>
-				</div>
-			</Tabs.Content>
-		</Tabs.Root>
-		{#if torrentsError}
-			<div class="my-2 w-full text-center text-red-500">An error occurred: {torrentsError}</div>
-		{/if}
-		<div class="mt-4 items-center">
-			{#await torrentsPromise}
-				<div class="flex w-full max-w-sm items-center space-x-2">
-					<LoaderCircle class="animate-spin" />
-					<p>Loading torrents...</p>
-				</div>
-			{:then}
-				<h3 class="mb-2 text-lg font-semibold">Found Torrents:</h3>
-				<div class="overflow-y-auto rounded-md border p-2">
-					<Table.Root>
-						<Table.Header>
-							<Table.Row>
-								<Table.Head>Title</Table.Head>
-								{#each tableColumnHeadings as { name, id } (id)}
-									<Table.Head onclick={() => sortData(id)} class="cursor-pointer">
-										<div class="inline-flex items-center">
-											{name}
-											{#if getSortedColumnState(id) === true}
-												<ArrowUp />
-											{:else if getSortedColumnState(id) === false}
-												<ArrowDown />
-											{:else}
-												<!-- Preserve layout (column width) when no sort is applied -->
-												<ArrowUp class="invisible"></ArrowUp>
-											{/if}
-										</div>
-									</Table.Head>
-								{/each}
-								<Table.Head class="text-right">Actions</Table.Head>
-							</Table.Row>
-						</Table.Header>
-						<Table.Body>
-							{#each torrentsData as torrent (torrent.id)}
-								<Table.Row>
-									<Table.Cell class="max-w-[300px] font-medium">{torrent.title}</Table.Cell>
-									<Table.Cell>{(torrent.size / 1024 / 1024 / 1024).toFixed(2)}GB</Table.Cell>
-									<Table.Cell>{torrent.seeders}</Table.Cell>
-									<Table.Cell>{torrent.score}</Table.Cell>
-									<Table.Cell>{torrent.indexer ?? 'Unknown'}</Table.Cell>
-									<Table.Cell>
-										{#each torrent.flags as flag (flag)}
-											<Badge variant="outline">{flag}</Badge>
-										{/each}
-									</Table.Cell>
-									<Table.Cell class="text-right">
-										<SelectFilePathSuffixDialog
-											media={movie}
-											bind:filePathSuffix
-											callback={() => downloadTorrent(torrent.id!)}
-										/>
-									</Table.Cell>
-								</Table.Row>
-							{:else}
-								{#if torrentsData === null}
-									<Table.Cell colspan={7}>
-										<div class="font-light text-center w-full">
-											Start searching by clicking the search button!
-										</div>
-									</Table.Cell>
-								{:else}
-									<Table.Cell colspan={7}>
-										<div class="font-light text-center w-full">No torrents found.</div>
-									</Table.Cell>
-								{/if}
-							{/each}
-						</Table.Body>
-					</Table.Root>
-				</div>
-			{:catch error}
-				<div class="w-full text-center text-red-500">Failed to load torrents.</div>
-				<div class="w-full text-center text-red-500">Error: {error.message}</div>
-			{/await}
-		</div>
-	</Dialog.Content>
-</Dialog.Root>
+<DownloadDialogWrapper
+	bind:open={dialogueState}
+	triggerText="Download Movie"
+	title="Download a Movie"
+	description="Search and download torrents for a specific season or season packs."
+>
+	<SearchTabs
+		bind:tabState
+		{isLoading}
+		bind:queryOverride
+		onSearch={search}
+		advancedModeHelpText="The custom query will override the default search string like 'A Minecraft Movie (2025)'."
+	>
+		{#snippet basicModeContent()}
+			<Button disabled={isLoading} class="w-fit" onclick={search}>Search for Torrents</Button>
+		{/snippet}
+	</SearchTabs>
+	{#if torrentsError}
+		<div class="my-2 w-full text-center text-red-500">An error occurred: {torrentsError}</div>
+	{/if}
+	<TorrentTable {torrentsPromise} columns={tableColumnHeadings}>
+		{#snippet rowSnippet(torrent)}
+			<Table.Cell class="max-w-[300px] font-medium">{torrent.title}</Table.Cell>
+			<Table.Cell>{(torrent.size / 1024 / 1024 / 1024).toFixed(2)}GB</Table.Cell>
+			<Table.Cell>{torrent.seeders}</Table.Cell>
+			<Table.Cell>{torrent.score}</Table.Cell>
+			<Table.Cell>{torrent.indexer ?? 'Unknown'}</Table.Cell>
+			<Table.Cell>
+				{#each torrent.flags as flag (flag)}
+					<Badge variant="outline">{flag}</Badge>
+				{/each}
+			</Table.Cell>
+			<Table.Cell class="text-right">
+				<SelectFilePathSuffixDialog
+					media={movie}
+					bind:filePathSuffix
+					callback={() => downloadTorrent(torrent.id)}
+				/>
+			</Table.Cell>
+		{/snippet}
+	</TorrentTable>
+</DownloadDialogWrapper>
diff --git a/web/src/lib/components/download-dialogs/download-season-dialog.svelte b/web/src/lib/components/download-dialogs/download-season-dialog.svelte
index b9171ab..c262f50 100644
--- a/web/src/lib/components/download-dialogs/download-season-dialog.svelte
+++ b/web/src/lib/components/download-dialogs/download-season-dialog.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button, buttonVariants } from '$lib/components/ui/button';
+	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
 	import { toast } from 'svelte-sonner';
@@ -7,15 +7,15 @@
 		convertTorrentSeasonRangeToIntegerRange,
 		formatSecondsToOptimalUnit
 	} from '$lib/utils.ts';
-	import { ArrowDown, ArrowUp, LoaderCircle } from 'lucide-svelte';
-	import * as Dialog from '$lib/components/ui/dialog';
-	import * as Tabs from '$lib/components/ui/tabs';
 	import * as Table from '$lib/components/ui/table';
 	import { Badge } from '$lib/components/ui/badge';
 	import client from '$lib/api';
 	import type { components } from '$lib/api/api';
 	import SelectFilePathSuffixDialog from '$lib/components/download-dialogs/select-file-path-suffix-dialog.svelte';
 	import { invalidateAll } from '$app/navigation';
+	import TorrentTable from '$lib/components/download-dialogs/torrent-table.svelte';
+	import SearchTabs from '$lib/components/download-dialogs/search-tabs.svelte';
+	import DownloadDialogWrapper from '$lib/components/download-dialogs/download-dialog-wrapper.svelte';
 
 	let { show }: { show: components['schemas']['Show'] } = $props();
 	let dialogueState = $state(false);
@@ -28,7 +28,6 @@
 	let torrentsData: any[] | null = $state(null);
 	let tabState: string = $state('basic');
 	let isLoading: boolean = $state(false);
-	let sortBy = $state({ col: 'score', ascending: false });
 
 	let advancedMode: boolean = $derived(tabState === 'advanced');
 
@@ -43,26 +42,6 @@
 		{ name: 'Seasons', id: 'season' }
 	];
 
-	function getSortedColumnState(column: string | undefined): boolean | null {
-		if (sortBy.col !== column) return null;
-		return sortBy.ascending;
-	}
-
-	function sortData(column?: string | undefined) {
-		if (column !== undefined) {
-			if (column === sortBy.col) {
-				sortBy.ascending = !sortBy.ascending;
-			} else {
-				sortBy = { col: column, ascending: true };
-			}
-		}
-
-		let modifier = sortBy.ascending ? 1 : -1;
-		torrentsData?.sort((a, b) =>
-			a[sortBy.col] < b[sortBy.col] ? -1 * modifier : a[sortBy.col] > b[sortBy.col] ? modifier : 0
-		);
-	}
-
 	async function downloadTorrent(result_id: string) {
 		torrentsError = null;
 		const { response } = await client.POST('/api/v1/tv/torrents', {
@@ -110,166 +89,80 @@
 		toast.info('Searching for torrents...');
 
 		torrentsData = await torrentsPromise;
-		sortData();
 		toast.info('Found ' + torrentsData?.length + ' torrents.');
 	}
 </script>
 
-<Dialog.Root bind:open={dialogueState}>
-	<Dialog.Trigger class={buttonVariants({ variant: 'default' })}>Download Seasons</Dialog.Trigger>
-	<Dialog.Content class="max-h-[90vh] w-fit min-w-[80vw] overflow-y-auto">
-		<Dialog.Header>
-			<Dialog.Title>Download a Season</Dialog.Title>
-			<Dialog.Description>
-				Search and download torrents for a specific season or season packs.
-			</Dialog.Description>
-		</Dialog.Header>
-		<Tabs.Root class="w-full" bind:value={tabState}>
-			<Tabs.List>
-				<Tabs.Trigger value="basic">Standard Mode</Tabs.Trigger>
-				<Tabs.Trigger value="advanced">Advanced Mode</Tabs.Trigger>
-			</Tabs.List>
-			<Tabs.Content value="basic">
-				<div class="grid w-full items-center gap-1.5">
-					<Label for="season-number">
-						Enter a season number from 1 to {show.seasons.at(-1)?.number}
-					</Label>
-					<div class="flex w-full max-w-sm items-center space-x-2">
-						<Input
-							type="number"
-							id="season-number"
-							bind:value={selectedSeasonNumber}
-							max={show.seasons.at(-1)?.number}
-						/>
-						<Button
-							disabled={isLoading}
-							class="w-fit"
-							onclick={() => {
-								search();
-							}}
-						>
-							Search for Torrents
-						</Button>
-					</div>
-					<p class="text-sm text-muted-foreground">
-						Enter the season's number you want to search for. The first, usually 1, or the last
-						season number usually yield the most season packs. Note that only Seasons which are
-						listed in the "Seasons" cell will be imported!
-					</p>
-				</div>
-			</Tabs.Content>
-			<Tabs.Content value="advanced">
-				<div class="grid w-full items-center gap-1.5">
-					<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} />
-						<Button
-							disabled={isLoading}
-							class="w-fit"
-							onclick={() => {
-								search();
-							}}
-						>
-							Search for Torrents
-						</Button>
-					</div>
-					<p class="text-sm text-muted-foreground">
-						The custom query will override the default search string like "The Simpsons Season 3".
-						Note that only Seasons which are listed in the "Seasons" cell will be imported!
-					</p>
-				</div>
-			</Tabs.Content>
-		</Tabs.Root>
-		{#if torrentsError}
-			<div class="my-2 w-full text-center text-red-500">An error occurred: {torrentsError}</div>
-		{/if}
-		<div class="mt-4 items-center">
-			{#await torrentsPromise}
-				<div class="flex w-full max-w-sm items-center space-x-2">
-					<LoaderCircle class="animate-spin" />
-					<p>Loading torrents...</p>
-				</div>
-			{:then}
-				<h3 class="mb-2 text-lg font-semibold">Found Torrents:</h3>
-				<div class="overflow-y-auto rounded-md border p-2">
-					<Table.Root class="torrentResult">
-						<Table.Header>
-							<Table.Row>
-								<Table.Head>Title</Table.Head>
-								{#each tableColumnHeadings as { name, id } (id)}
-									<Table.Head onclick={() => sortData(id)} class="cursor-pointer">
-										<div class="inline-flex items-center">
-											{name}
-											{#if getSortedColumnState(id) === true}
-												<ArrowUp />
-											{:else if getSortedColumnState(id) === false}
-												<ArrowDown />
-											{:else}
-												<!-- Preserve layout (column width) when no sort is applied -->
-												<ArrowUp class="invisible"></ArrowUp>
-											{/if}
-										</div>
-									</Table.Head>
-								{/each}
-								<Table.Head class="text-right">Actions</Table.Head>
-							</Table.Row>
-						</Table.Header>
-						<Table.Body>
-							{#each torrentsData as torrent (torrent.id)}
-								<Table.Row>
-									<Table.Cell class="max-w-[300px] font-medium">{torrent.title}</Table.Cell>
-									<Table.Cell>{(torrent.size / 1024 / 1024 / 1024).toFixed(2)}GB</Table.Cell>
-									<Table.Cell>{torrent.usenet}</Table.Cell>
-									<Table.Cell>{torrent.usenet ? 'N/A' : torrent.seeders}</Table.Cell>
-									<Table.Cell
-										>{torrent.age
-											? formatSecondsToOptimalUnit(torrent.age)
-											: torrent.usenet
-												? 'N/A'
-												: ''}</Table.Cell
-									>
-									<Table.Cell>{torrent.score}</Table.Cell>
-									<Table.Cell>{torrent.indexer ?? 'unknown'}</Table.Cell>
-									<Table.Cell>
-										{#if torrent.flags}
-											{#each torrent.flags as flag (flag)}
-												<Badge variant="outline">{flag}</Badge>
-											{/each}
-										{/if}
-									</Table.Cell>
-									<Table.Cell>
-										{#if torrent.season}
-											{convertTorrentSeasonRangeToIntegerRange(torrent.season)}
-										{/if}
-									</Table.Cell>
-									<Table.Cell class="text-right">
-										<SelectFilePathSuffixDialog
-											bind:filePathSuffix
-											media={show}
-											callback={() => downloadTorrent(torrent.id!)}
-										/>
-									</Table.Cell>
-								</Table.Row>
-							{:else}
-								{#if torrentsData === null}
-									<Table.Cell colspan={7}>
-										<div class="font-light text-center w-full">
-											Start searching by clicking the search button!
-										</div>
-									</Table.Cell>
-								{:else}
-									<Table.Cell colspan={7}>
-										<div class="font-light text-center w-full">No torrents found.</div>
-									</Table.Cell>
-								{/if}
-							{/each}
-						</Table.Body>
-					</Table.Root>
-				</div>
-			{:catch error}
-				<div class="w-full text-center text-red-500">Failed to load torrents.</div>
-				<div class="w-full text-center text-red-500">Error: {error.message}</div>
-			{/await}
-		</div>
-	</Dialog.Content>
-</Dialog.Root>
+<DownloadDialogWrapper
+	bind:open={dialogueState}
+	triggerText="Download Seasons"
+	title="Download a Season"
+	description="Search and download torrents for a specific season or season packs."
+>
+	<SearchTabs
+		bind:tabState
+		{isLoading}
+		bind:queryOverride
+		onSearch={search}
+		advancedModeHelpText="The custom query will override the default search string like 'The Simpsons Season 3'. Note that only Seasons which are listed in the 'Seasons' cell will be imported!"
+	>
+		{#snippet basicModeContent()}
+			<Label for="season-number">
+				Enter a season number from 1 to {show.seasons.at(-1)?.number}
+			</Label>
+			<div class="flex w-full max-w-sm items-center space-x-2">
+				<Input
+					type="number"
+					id="season-number"
+					bind:value={selectedSeasonNumber}
+					max={show.seasons.at(-1)?.number}
+				/>
+				<Button disabled={isLoading} class="w-fit" onclick={search}>Search for Torrents</Button>
+			</div>
+			<p class="text-sm text-muted-foreground">
+				Enter the season's number you want to search for. The first, usually 1, or the last season
+				number usually yield the most season packs. Note that only Seasons which are listed in the
+				"Seasons" cell will be imported!
+			</p>
+		{/snippet}
+	</SearchTabs>
+	{#if torrentsError}
+		<div class="my-2 w-full text-center text-red-500">An error occurred: {torrentsError}</div>
+	{/if}
+	<TorrentTable {torrentsPromise} columns={tableColumnHeadings}>
+		{#snippet rowSnippet(torrent)}
+			<Table.Cell class="max-w-[300px] font-medium">{torrent.title}</Table.Cell>
+			<Table.Cell>{(torrent.size / 1024 / 1024 / 1024).toFixed(2)}GB</Table.Cell>
+			<Table.Cell>{torrent.usenet}</Table.Cell>
+			<Table.Cell>{torrent.usenet ? 'N/A' : torrent.seeders}</Table.Cell>
+			<Table.Cell
+				>{torrent.age
+					? formatSecondsToOptimalUnit(torrent.age)
+					: torrent.usenet
+						? 'N/A'
+						: ''}</Table.Cell
+			>
+			<Table.Cell>{torrent.score}</Table.Cell>
+			<Table.Cell>{torrent.indexer ?? 'unknown'}</Table.Cell>
+			<Table.Cell>
+				{#if torrent.flags}
+					{#each torrent.flags as flag (flag)}
+						<Badge variant="outline">{flag}</Badge>
+					{/each}
+				{/if}
+			</Table.Cell>
+			<Table.Cell>
+				{#if torrent.season}
+					{convertTorrentSeasonRangeToIntegerRange(torrent.season)}
+				{/if}
+			</Table.Cell>
+			<Table.Cell class="text-right">
+				<SelectFilePathSuffixDialog
+					bind:filePathSuffix
+					media={show}
+					callback={() => downloadTorrent(torrent.id)}
+				/>
+			</Table.Cell>
+		{/snippet}
+	</TorrentTable>
+</DownloadDialogWrapper>
diff --git a/web/src/lib/components/download-dialogs/search-tabs.svelte b/web/src/lib/components/download-dialogs/search-tabs.svelte
new file mode 100644
index 0000000..faaa510
--- /dev/null
+++ b/web/src/lib/components/download-dialogs/search-tabs.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import * as Tabs from '$lib/components/ui/tabs';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import { type Snippet } from 'svelte';
+
+	let {
+		tabState = $bindable(),
+		isLoading,
+		queryOverride = $bindable(),
+		onSearch,
+		basicModeContent,
+		advancedModeHelpText
+	}: {
+		tabState: string;
+		isLoading: boolean;
+		queryOverride: string;
+		onSearch: () => void;
+		basicModeContent: Snippet;
+		advancedModeHelpText: string;
+	} = $props();
+</script>
+
+<Tabs.Root class="w-full" bind:value={tabState}>
+	<Tabs.List>
+		<Tabs.Trigger value="basic">Standard Mode</Tabs.Trigger>
+		<Tabs.Trigger value="advanced">Advanced Mode</Tabs.Trigger>
+	</Tabs.List>
+	<Tabs.Content value="basic">
+		<div class="grid w-full items-center gap-1.5">
+			{@render basicModeContent()}
+		</div>
+	</Tabs.Content>
+	<Tabs.Content value="advanced">
+		<div class="grid w-full items-center gap-1.5">
+			<Label for="query-override">Enter a custom query</Label>
+			<div class="flex w-full max-w-sm items-center space-x-2">
+				<Input bind:value={queryOverride} id="query-override" type="text" />
+				<Button disabled={isLoading} class="w-fit" onclick={onSearch}>Search for Torrents</Button>
+			</div>
+			<p class="text-sm text-muted-foreground">
+				{advancedModeHelpText}
+			</p>
+		</div>
+	</Tabs.Content>
+</Tabs.Root>
diff --git a/web/src/lib/components/download-dialogs/torrent-table.svelte b/web/src/lib/components/download-dialogs/torrent-table.svelte
new file mode 100644
index 0000000..8358db6
--- /dev/null
+++ b/web/src/lib/components/download-dialogs/torrent-table.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { ArrowDown, ArrowUp, LoaderCircle } from 'lucide-svelte';
+	import * as Table from '$lib/components/ui/table';
+	import { type Snippet } from 'svelte';
+
+	let {
+		torrentsPromise,
+		columns,
+		rowSnippet
+	}: {
+		torrentsPromise: Promise<any>;
+		columns: { name: string; id: string }[];
+		rowSnippet: Snippet<[any]>;
+	} = $props();
+
+	let sortBy = $state({ col: 'score', ascending: false });
+
+	function getSortedColumnState(column: string | undefined): boolean | null {
+		if (sortBy.col !== column) return null;
+		return sortBy.ascending;
+	}
+
+	function toggleSort(column: string) {
+		if (column === sortBy.col) {
+			sortBy.ascending = !sortBy.ascending;
+		} else {
+			sortBy = { col: column, ascending: true };
+		}
+	}
+	function sort(data: any[], column: string, ascending: boolean): any[] {
+		let modifier = ascending ? 1 : -1;
+		data.sort((a, b) => {
+			if (a[column] < b[column]) {
+				return -1 * modifier;
+			} else if (a[column] > b[column]) {
+				return modifier;
+			} else {
+				return 0;
+			}
+		});
+		return data;
+	}
+</script>
+
+<div class="mt-4 items-center">
+	{#await torrentsPromise}
+		<div class="flex w-full max-w-sm items-center space-x-2">
+			<LoaderCircle class="animate-spin" />
+			<p>Loading torrents...</p>
+		</div>
+	{:then data}
+		<h3 class="mb-2 text-lg font-semibold">Found Torrents:</h3>
+		<div class="overflow-y-auto rounded-md border p-2">
+			<Table.Root>
+				<Table.Header>
+					<Table.Row>
+						<Table.Head>Title</Table.Head>
+						{#each columns as column (column.id)}
+							<Table.Head onclick={() => toggleSort(column.id)} class="cursor-pointer">
+								<div class="inline-flex items-center">
+									{column.name}
+									{#if getSortedColumnState(column.id) === true}
+										<ArrowUp />
+									{:else if getSortedColumnState(column.id) === false}
+										<ArrowDown />
+									{:else}
+										<!-- Preserve layout (column width) when no sort is applied -->
+										<ArrowUp class="invisible"></ArrowUp>
+									{/if}
+								</div>
+							</Table.Head>
+						{/each}
+						<Table.Head class="text-right">Actions</Table.Head>
+					</Table.Row>
+				</Table.Header>
+				<Table.Body>
+					{#if data}
+						{@const sortedData = sort(data, sortBy.col, sortBy.ascending)}
+						{#each sortedData as torrent (torrent.id)}
+							<Table.Row>
+								{@render rowSnippet(torrent)}
+							</Table.Row>
+						{:else}
+							<Table.Cell colspan={columns.length + 2}>
+								<div class="font-light text-center w-full">No torrents found.</div>
+							</Table.Cell>
+						{/each}
+					{:else}
+						<Table.Cell colspan={columns.length + 2}>
+							<div class="w-full text-center font-light">
+								Start searching by clicking the search button!
+							</div>
+						</Table.Cell>
+					{/if}
+				</Table.Body>
+			</Table.Root>
+		</div>
+	{:catch error}
+		<div class="w-full text-center text-red-500">Failed to load torrents.</div>
+		<div class="w-full text-center text-red-500">Error: {error.message}</div>
+	{/await}
+</div>

From e6daba279cc60ebd6e3ea684cdd1fcd6a4743303 Mon Sep 17 00:00:00 2001
From: maxid <97409287+maxdorninger@users.noreply.github.com>
Date: Sat, 3 Jan 2026 16:04:21 +0100
Subject: [PATCH 2/3] fix torrents table sorting by always returning a new
 array

---
 web/src/lib/components/download-dialogs/torrent-table.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/src/lib/components/download-dialogs/torrent-table.svelte b/web/src/lib/components/download-dialogs/torrent-table.svelte
index 8358db6..a12b38f 100644
--- a/web/src/lib/components/download-dialogs/torrent-table.svelte
+++ b/web/src/lib/components/download-dialogs/torrent-table.svelte
@@ -29,7 +29,7 @@
 	}
 	function sort(data: any[], column: string, ascending: boolean): any[] {
 		let modifier = ascending ? 1 : -1;
-		data.sort((a, b) => {
+		return [...data].sort((a, b) => {
 			if (a[column] < b[column]) {
 				return -1 * modifier;
 			} else if (a[column] > b[column]) {
@@ -38,7 +38,6 @@
 				return 0;
 			}
 		});
-		return data;
 	}
 </script>
 

From 30ccd0e12806a587b44c06e08df26feea51699da Mon Sep 17 00:00:00 2001
From: maxid <97409287+maxdorninger@users.noreply.github.com>
Date: Sat, 3 Jan 2026 16:04:38 +0100
Subject: [PATCH 3/3] fix torrents title text overflowing

---
 .../components/download-dialogs/download-movie-dialog.svelte    | 2 +-
 .../components/download-dialogs/download-season-dialog.svelte   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/download-dialogs/download-movie-dialog.svelte b/web/src/lib/components/download-dialogs/download-movie-dialog.svelte
index bdebfbe..749c5f6 100644
--- a/web/src/lib/components/download-dialogs/download-movie-dialog.svelte
+++ b/web/src/lib/components/download-dialogs/download-movie-dialog.svelte
@@ -109,7 +109,7 @@
 	{/if}
 	<TorrentTable {torrentsPromise} columns={tableColumnHeadings}>
 		{#snippet rowSnippet(torrent)}
-			<Table.Cell class="max-w-[300px] font-medium">{torrent.title}</Table.Cell>
+			<Table.Cell class="font-medium">{torrent.title}</Table.Cell>
 			<Table.Cell>{(torrent.size / 1024 / 1024 / 1024).toFixed(2)}GB</Table.Cell>
 			<Table.Cell>{torrent.seeders}</Table.Cell>
 			<Table.Cell>{torrent.score}</Table.Cell>
diff --git a/web/src/lib/components/download-dialogs/download-season-dialog.svelte b/web/src/lib/components/download-dialogs/download-season-dialog.svelte
index c262f50..65bfc80 100644
--- a/web/src/lib/components/download-dialogs/download-season-dialog.svelte
+++ b/web/src/lib/components/download-dialogs/download-season-dialog.svelte
@@ -131,7 +131,7 @@
 	{/if}
 	<TorrentTable {torrentsPromise} columns={tableColumnHeadings}>
 		{#snippet rowSnippet(torrent)}
-			<Table.Cell class="max-w-[300px] font-medium">{torrent.title}</Table.Cell>
+			<Table.Cell class="font-medium">{torrent.title}</Table.Cell>
 			<Table.Cell>{(torrent.size / 1024 / 1024 / 1024).toFixed(2)}GB</Table.Cell>
 			<Table.Cell>{torrent.usenet}</Table.Cell>
 			<Table.Cell>{torrent.usenet ? 'N/A' : torrent.seeders}</Table.Cell>