working on the frontend for the movies

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

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-    import {Home, Info, LifeBuoy, Send, Settings, TvIcon} from 'lucide-svelte';
+	import {Home, Info, LifeBuoy, Send, Settings, TvIcon, Clapperboard} from 'lucide-svelte';
     import {PUBLIC_VERSION} from '$env/static/public';
 
 	const data = {
@@ -30,6 +30,26 @@
 					}
 				]
 			},
+			{
+				title: 'Movies',
+				url: '/dashboard/movies',
+				icon: Clapperboard,
+				isActive: true,
+				items: [
+					{
+						title: 'Add a movie',
+						url: '/dashboard/movies/add-movie'
+					},
+					{
+						title: 'Torrents',
+						url: '/dashboard/movies/torrents'
+					},
+					{
+						title: 'Requests',
+						url: '/dashboard/movies/requests'
+					}
+				]
+			},
 			{
 				title: 'Settings',
 				url: '/dashboard/settings',

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

@@ -0,0 +1,18 @@
+<script>
+    import {getFullyQualifiedMediaName} from '$lib/utils.js';
+    import {env} from '$env/dynamic/public';
+
+    const apiUrl = env.PUBLIC_API_URL;
+    let {media} = $props();
+    console.log("got media: ", media);
+</script>
+
+<picture>
+    <source srcset="{apiUrl}/static/image/{media.id}.avif" type="image/avif"/>
+    <source srcset="{apiUrl}/static/image/{media.id}.webp" type="image/webp"/>
+    <img
+            alt="{getFullyQualifiedMediaName(media)}'s Poster Image"
+            class="aspect-9/16 center h-auto w-full rounded-lg object-cover"
+            src="{apiUrl}/static/image/{media.id}.jpeg"
+    />
+</picture>

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

@@ -1,17 +0,0 @@
-<script>
-    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"/>
-    <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>

web/src/lib/types.ts

@@ -119,6 +119,25 @@ export interface PublicShow {
 	ended: boolean;
 }
 
+export interface Movie {
+	name: string;
+	overview: string;
+	year: number; // type: integer
+	external_id: number; // type: integer
+	metadata_provider: string;
+	id: string; // type: string, format: uuid
+}
+
+export interface PublicMovie {
+	name: string;
+	overview: string;
+	year: number; // type: integer
+	external_id: number; // type: integer
+	metadata_provider: string;
+	id: string; // type: string, format: uuid
+	downloaded: boolean;
+}
+
 export interface Torrent {
 	status: TorrentStatus; // $ref: #/components/schemas/TorrentStatus
 	title: string;

web/src/lib/utils.ts

@@ -32,10 +32,11 @@ export function getTorrentQualityString(value: number): string {
 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 + ')';
+
+export function getFullyQualifiedMediaName(media: { name: string; year: number }): string {
+	let name = media.name;
+	if (media.year != null) {
+		name += ' (' + media.year + ')';
 	}
 	return name;
 }