feat: enhance torrent management with new table component and improved navigation

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

@@ -9,14 +9,10 @@
 		navMain: [
 			{
 				title: 'TV',
-				url: '#',
+				url: '/dashboard/tv',
 				icon: TvIcon,
 				isActive: true,
 				items: [
-					{
-						title: 'Shows',
-						url: '/dashboard/tv'
-					},
 					{
 						title: 'Add a show',
 						url: '/dashboard/tv/add-show'

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

@@ -10,7 +10,7 @@
     import LoaderCircle from '@lucide/svelte/icons/loader-circle';
 
     import type {PublicIndexerQueryResult} from '$lib/types.js';
-    import {getFullyQualifiedShowName} from '$lib/utils';
+    import {convertTorrentSeasonRangeToIntegerRange, getFullyQualifiedShowName} from '$lib/utils';
 
     let {show} = $props();
 
@@ -278,11 +278,7 @@
                                         {/each}
                                     </Table.Cell>
                                     <Table.Cell>
-                                        {#if torrent.season.length === 1}
-                                            {torrent.season[0]}
-                                        {:else}
-                                            {torrent.season.at(0)}−{torrent.season.at(-1)}
-                                        {/if}
+                                        {convertTorrentSeasonRangeToIntegerRange(torrent)}
                                     </Table.Cell>
                                     <Table.Cell class="text-right">
                                         <Button

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

@@ -14,8 +14,27 @@
 	import UserDetails from './user-details.svelte';
 	import type {User} from '$lib/types';
 	import UserRound from '@lucide/svelte/icons/user-round';
+	import {base} from '$app/paths';
+	import {env} from "$env/dynamic/public";
+	import {goto} from '$app/navigation';
+
 	const user: () => User = getContext('user');
 	const sidebar = useSidebar();
+	const apiUrl = env.PUBLIC_API_URL;
+
+	async function handleLogout() {
+		const response = await fetch(apiUrl + '/auth/cookie/logout', {
+			method: 'POST',
+			credentials: 'include'
+		});
+		if (response.ok) {
+			console.log('Logout successful!');
+			await goto(base + '/login');
+		} else {
+			console.error('Logout failed:', response.status);
+		}
+	}
+
 </script>
 
 <Sidebar.Menu>
@@ -83,7 +102,7 @@
 					</DropdownMenu.Item>
 				</DropdownMenu.Group>
 				<DropdownMenu.Separator/>
-				<DropdownMenu.Item>
+				<DropdownMenu.Item onclick={() => handleLogout()}>
 					<LogOut/>
 					Log out
 				</DropdownMenu.Item>

web/src/lib/components/torrent-table.svelte

@@ -0,0 +1,62 @@
+<script>
+    import {
+        convertTorrentSeasonRangeToIntegerRange,
+        getTorrentQualityString,
+        getTorrentStatusString
+    } from "$lib/utils.js";
+    import CheckmarkX from "$lib/components/checkmark-x.svelte";
+    import * as Table from "$lib/components/ui/table/index.js";
+
+    let {torrents} = $props();
+
+</script>
+
+<Table.Root>
+    <Table.Caption>A list of all torrents.</Table.Caption>
+    <Table.Header>
+        <Table.Row>
+            <Table.Head>Name</Table.Head>
+            <Table.Head>Seasons</Table.Head>
+            <Table.Head>Download Status</Table.Head>
+            <Table.Head>Quality</Table.Head>
+            <Table.Head>File Path Suffix</Table.Head>
+            <Table.Head>Imported</Table.Head>
+        </Table.Row>
+    </Table.Header>
+    <Table.Body>
+        {#each torrents as torrent}
+            <Table.Row>
+                <Table.Cell class="font-medium">
+                    <a href={'/dashboard/torrents/' + torrent.torrent_id}>
+                        {torrent.torrent_title}
+                    </a>
+                </Table.Cell>
+                <Table.Cell>
+                    <a href={'/dashboard/torrents/' + torrent.torrent_id}>
+                        {convertTorrentSeasonRangeToIntegerRange(torrent)}
+                    </a>
+                </Table.Cell>
+                <Table.Cell>
+                    <a href={'/dashboard/torrents/' + torrent.torrent_id}>
+                        {getTorrentStatusString(torrent.status)}
+                    </a>
+                </Table.Cell>
+                <Table.Cell class="font-medium">
+                    <a href={'/dashboard/torrents/' + torrent.torrent_id}>
+                        {getTorrentQualityString(torrent.quality)}
+                    </a>
+                </Table.Cell>
+                <Table.Cell class="font-medium">
+                    <a href={'/dashboard/torrents/' + torrent.torrent_id}>
+                        {torrent.file_path_suffix}
+                    </a>
+                </Table.Cell>
+                <Table.Cell>
+                    <a href={'/dashboard/torrents/' + torrent.torrent_id}>
+                        <CheckmarkX state={torrent.imported}/>
+                    </a>
+                </Table.Cell>
+            </Table.Row>
+        {/each}
+    </Table.Body>
+</Table.Root>

web/src/lib/utils.ts

@@ -33,3 +33,13 @@ export function getFullyQualifiedShowName(show: { name: string; year: number }):
 	}
 	return name;
 }
+
+export function convertTorrentSeasonRangeToIntegerRange(torrent: any): string {
+	if (torrent.seasons.length === 1) return torrent.seasons[0]?.toString();
+	if (torrent.seasons.length >= 2) return torrent.seasons[0]?.toString() + "-" + torrent.seasons.at(-1).toString();
+	else {
+		console.log("Error parsing season range: " + torrent.seasons);
+		return "Error parsing season range: " + torrent.seasons;
+	}
+
+}