feat: add season request dialog and enhance season request management

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

@@ -22,8 +22,8 @@
                         url: '/dashboard/tv/torrents'
                     },
                     {
-						title: 'Settings',
-						url: '#'
+						title: 'Requests',
+						url: '/dashboard/tv/requests'
 					}
 
                 ]

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

@@ -0,0 +1,162 @@
+<script lang="ts">
+    import {env} from '$env/dynamic/public';
+    import {Button, buttonVariants} from '$lib/components/ui/button/index.js';
+    import * as Dialog from '$lib/components/ui/dialog/index.js';
+    import {Label} from '$lib/components/ui/label';
+    import * as Select from '$lib/components/ui/select/index.js';
+    import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+    import type {PublicShow, Quality, CreateSeasonRequest} from '$lib/types.js';
+    import {getFullyQualifiedShowName, getTorrentQualityString} from '$lib/utils.js';
+
+    let {show}: { show: PublicShow } = $props();
+
+    let dialogOpen = $state(false);
+    let selectedSeasonsIds = $state<string[]>([]);
+    let minQuality = $state<Quality | undefined>(undefined);
+    let wantedQuality = $state<Quality | undefined>(undefined);
+    let isSubmittingRequest = $state(false);
+    let submitRequestError = $state<string | null>(null);
+
+    const qualityValues: Quality[] = [1, 2, 3, 4];
+    let qualityOptions = $derived(
+        qualityValues.map(q => ({value: q, label: getTorrentQualityString(q)}))
+    );
+    let isFormInvalid = $derived(
+        !selectedSeasonsIds || selectedSeasonsIds.length === 0 ||
+        !minQuality || !wantedQuality ||
+        (wantedQuality > minQuality)
+    );
+
+    async function handleRequestSeason() {
+        isSubmittingRequest = true;
+        submitRequestError = null;
+
+        const payloads: CreateSeasonRequest = selectedSeasonsIds.map(seasonId => ({
+            season_id: seasonId,
+            min_quality: minQuality,
+            wanted_quality: wantedQuality
+        }));
+        for (const payload of payloads) {
+            try {
+                const response = await fetch(`${env.PUBLIC_API_URL}/tv/seasons/requests`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    credentials: 'include',
+                    body: JSON.stringify(payload)
+                });
+
+                if (response.status === 204) { // Success, no content
+                    dialogOpen = false; // Close the dialog
+                    // Reset form fields
+                    selectedSeasonsIds = undefined;
+                    minQuality = undefined;
+                    wantedQuality = undefined;
+                    // Optionally: add a success toast/notification here
+                } else {
+                    const errorData = await response.json().catch(() => ({message: response.statusText}));
+                    submitRequestError = `Failed to submit request: ${errorData.message || response.statusText}`;
+                    console.error('Failed to submit request', response.statusText, errorData);
+                }
+            } catch (error) {
+                submitRequestError = `Error submitting request: ${error instanceof Error ? error.message : String(error)}`;
+                console.error('Error submitting request:', error);
+            } finally {
+                isSubmittingRequest = false;
+            }
+        }
+    }
+
+</script>
+
+<Dialog.Root bind:open={dialogOpen}>
+    <Dialog.Trigger
+            class={buttonVariants({ variant: 'default' })}
+            on:click={() => {
+            dialogOpen = true;
+        }}
+    >
+        Request Season
+    </Dialog.Trigger>
+    <Dialog.Content class="max-h-[90vh] w-fit min-w-[clamp(300px,50vw,600px)] overflow-y-auto">
+        <Dialog.Header>
+            <Dialog.Title>Request a Season for {getFullyQualifiedShowName(show)}</Dialog.Title>
+            <Dialog.Description>
+                Select a season and desired qualities to submit a request.
+            </Dialog.Description>
+        </Dialog.Header>
+        <div class="grid gap-4 py-4">
+            <!-- Season Select -->
+            <div class="grid grid-cols-[1fr,3fr] items-center gap-4 md:grid-cols-[100px,1fr]">
+                <Label class="text-right" for="season">Season</Label>
+                <Select.Root bind:value={selectedSeasonsIds}>
+                    <Select.Trigger class="w-full" id="season">
+                        {#each selectedSeasonsIds as seasonId (seasonId)}
+                            {#if show.seasons.find(season => season.id === seasonId)}
+                                {show.seasons.find(season => season.id === seasonId).number},&nbsp;
+                            {/if}
+                        {:else}
+                            Select one or more seasons
+                        {/each}
+                    </Select.Trigger>
+                    <Select.Content>
+                        {#each show.seasons as season (season.id)}
+                            <Select.Item value={season.id}>
+                                Season {season.number}{season.name ? `: ${season.name}` : ''}
+                            </Select.Item>
+                        {/each}
+                    </Select.Content>
+                </Select.Root>
+            </div>
+
+            <!-- Min Quality Select -->
+            <div class="grid grid-cols-[1fr,3fr] items-center gap-4 md:grid-cols-[100px,1fr]">
+                <Label class="text-right" for="min-quality">Min Quality</Label>
+                <Select.Root bind:value={minQuality} type="single">
+                    <Select.Trigger class="w-full" id="min-quality">
+                        {minQuality ? getTorrentQualityString(minQuality) : "Select Minimum Quality"}
+                    </Select.Trigger>
+                    <Select.Content>
+                        {#each qualityOptions as option (option.value)}
+                            <Select.Item value={option.value}>{option.label}</Select.Item>
+                        {/each}
+                    </Select.Content>
+                </Select.Root>
+            </div>
+
+            <!-- Wanted Quality Select -->
+            <div class="grid grid-cols-[1fr,3fr] items-center gap-4 md:grid-cols-[100px,1fr]">
+                <Label class="text-right" for="wanted-quality">Wanted Quality</Label>
+                <Select.Root bind:value={wantedQuality} type="single">
+                    <Select.Trigger class="w-full" id="wanted-quality">
+                        {wantedQuality ? getTorrentQualityString(wantedQuality) : "Select Wanted Quality"}
+                    </Select.Trigger>
+                    <Select.Content>
+                        {#each qualityOptions as option (option.value)}
+                            <Select.Item value={option.value}>{option.label}</Select.Item>
+                        {/each}
+                    </Select.Content>
+                </Select.Root>
+            </div>
+
+            {#if submitRequestError}
+                <p class="col-span-full text-sm text-red-500 text-center">{submitRequestError}</p>
+            {/if}
+        </div>
+        <Dialog.Footer>
+            <Button disabled={isSubmittingRequest} onclick={() => dialogOpen = false} variant="outline">Cancel</Button>
+            <Button
+                    disabled={isFormInvalid || isSubmittingRequest}
+                    onclick={handleRequestSeason}
+            >
+                {#if isSubmittingRequest}
+                    <LoaderCircle class="mr-2 h-4 w-4 animate-spin"/>
+                    Submitting...
+                {:else}
+                    Submit Request
+                {/if}
+            </Button>
+        </Dialog.Footer>
+    </Dialog.Content>
+</Dialog.Root>

web/src/lib/components/season-requests-table.svelte

@@ -1,18 +1,75 @@
 <script lang="ts">
     import {
-        convertTorrentSeasonRangeToIntegerRange, getFullyQualifiedShowName,
+        getFullyQualifiedShowName,
         getTorrentQualityString,
-        getTorrentStatusString
     } from "$lib/utils.js";
-    import type {SeasonRequest} from "$lib/types.js";
+    import type {SeasonRequest, User} from "$lib/types.js";
     import CheckmarkX from "$lib/components/checkmark-x.svelte";
     import * as Table from "$lib/components/ui/table/index.js";
+    import {getContext} from "svelte";
+    import {Button} from "$lib/components/ui/button/index.js";
+    import {env} from '$env/dynamic/public';
+    import {toast} from "svelte-sonner";
+
 
     let {
         requests, filter = () => {
             return true
         }
-    }: { requests: SeasonRequest[], filter: (SeasonRequest) => boolean } = $props();
+    }: { requests: SeasonRequest[], filter: (request: SeasonRequest) => boolean } = $props();
+    const user: () => User = getContext("user");
+
+    async function approveRequest(requestId: string, currentAuthorizedStatus: boolean) {
+        try {
+            const response = await fetch(`${env.PUBLIC_API_URL}/tv/seasons/requests/${requestId}?authorized_status=${!currentAuthorizedStatus}`, {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const requestIndex = requests.findIndex(r => r.id === requestId);
+                if (requestIndex !== -1) {
+                    requests[requestIndex].authorized = !currentAuthorizedStatus;
+                    requests[requestIndex].authorized_by = user();
+                }
+            } else {
+                console.error(`Failed to update request status ${response.statusText}`, await response.text());
+                // Optionally, add user-facing error handling here
+            }
+        } catch (error) {
+            console.error('Error updating request status:', error);
+            // Optionally, add user-facing error handling here
+        }
+    }
+
+    async function deleteRequest(requestId: string) {
+        try {
+            const response = await fetch(`${env.PUBLIC_API_URL}/tv/seasons/requests/${requestId}`, {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const index = requests.findIndex(r => r.id === requestId);
+                if (index > -1) {
+                    requests.splice(index, 1); // Remove the request from the list
+                }
+                toast.success('Request deleted successfully');
+            } else {
+                console.error(`Failed to delete request ${response.statusText}`, await response.text());
+                toast.error('Failed to delete request');
+            }
+        } catch (error) {
+            console.error('Error deleting request:', error);
+            toast.error('Error deleting request: ' + (error instanceof Error ? error.message : String(error)));
+        }
+    }
 
 </script>
 
@@ -34,26 +91,38 @@
         {#each requests as request (request.id)}
             {#if filter(request)}
                 <Table.Row>
-                    <Table.Cell class="font-medium">
+                    <Table.Cell>
                         {getFullyQualifiedShowName(request.show)}
                     </Table.Cell>
                     <Table.Cell>
                         {request.season.number}
                     </Table.Cell>
-                    <Table.Cell class="font-medium">
+                    <Table.Cell>
                         {getTorrentQualityString(request.min_quality)}
                     </Table.Cell>
-                    <Table.Cell class="font-medium">
+                    <Table.Cell>
                         {getTorrentQualityString(request.wanted_quality)}
                     </Table.Cell>
                     <Table.Cell>
-                        {request.requested_by?.email}
+                        {request.requested_by?.email ?? 'N/A'}
                     </Table.Cell>
                     <Table.Cell>
                         <CheckmarkX state={request.authorized}/>
                     </Table.Cell>
                     <Table.Cell>
-                        {request.authorized_by?.email}
+                        {request.authorized_by?.email ?? 'N/A'}
+                    </Table.Cell>
+                    <Table.Cell class="space-x-1">
+                        {#if user().is_superuser}
+                            <Button class="mb-1" size="sm"
+                                    onclick={() => approveRequest(request.id, request.authorized)}>
+                                {request.authorized ? 'Unapprove' : 'Approve'}
+                            </Button>
+                        {/if}
+                        {#if user().is_superuser || user().id === request.requested_by?.id}
+                            <Button variant="destructive" size="sm" onclick={() => deleteRequest(request.id)}>Delete
+                            </Button>
+                        {/if}
                     </Table.Cell>
                 </Table.Row>
             {/if}

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

@@ -0,0 +1 @@
+export {default as Toaster} from "./sonner.svelte";

web/src/lib/components/ui/sonner/sonner.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import {Toaster as Sonner, type ToasterProps as SonnerProps} from "svelte-sonner";
+    import {mode} from "mode-watcher";
+
+    let {...restProps}: SonnerProps = $props();
+</script>
+
+<Sonner
+        {...restProps}
+        class="toaster group"
+        theme={mode.current}
+        toastOptions={{
+		classes: {
+			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+			description: "group-[.toast]:text-muted-foreground",
+			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+		},
+	}}
+/>