add get more recommendations button do dashboard, add movie pages to frontend, and make the loading of data non-blocking by adding skeletons while loading, instead of delaying the rendering of the page

web/src/lib/components/recommended-media-carousel.svelte

@@ -3,14 +3,39 @@
     import * as Carousel from '$lib/components/ui/carousel/index.js';
     import type {MetaDataProviderShowSearchResult} from '$lib/types';
     import AddMediaCard from '$lib/components/add-media-card.svelte';
+    import {Skeleton} from "$lib/components/ui/skeleton";
+    import {Button} from "$lib/components/ui/button";
+    import {ChevronDown, ChevronRight} from "lucide-svelte";
 
-    let {media, isShow}: { media: MetaDataProviderShowSearchResult[], isShow: boolean } = $props();
+    let {media, isShow, isLoading}: {
+        media: MetaDataProviderShowSearchResult[],
+        isShow: boolean,
+        isLoading: boolean
+    } = $props();
 </script>
 
 <div class="grid w-full gap-4 sm:grid-cols-1
      md:grid-cols-2 lg:grid-cols-3">
-    {#each media.slice(0, 3) as mediaItem}
-        <AddMediaCard isShow={isShow} result={mediaItem}/>
-    {/each}
+    {#if isLoading}
+        <Skeleton class="w-full h-[70vh]"/>
+        <Skeleton class="w-full h-[70vh]"/>
+        <Skeleton class="w-full h-[70vh]"/>
+
+    {:else }
+        {#each media.slice(0, 3) as mediaItem}
+            <AddMediaCard isShow={isShow} result={mediaItem}/>
+        {/each}
+    {/if}
+    {#if isShow}
+        <Button class="md:col-start-2" variant="secondary" href="/dashboard/tv/add-show">
+            More recommendations
+            <ChevronRight/>
+        </Button>
+    {:else }
+        <Button class="md:col-start-2" variant="secondary" href="/dashboard/movies/add-movie">
+            More recommendations
+            <ChevronRight/>
+        </Button>
+    {/if}
 </div>
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {getFullyQualifiedShowName, getTorrentQualityString} from '$lib/utils.js';
+    import {getFullyQualifiedMediaName, getTorrentQualityString} from '$lib/utils.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';
@@ -103,7 +103,7 @@
             {#if filter(request)}
                 <Table.Row>
                     <Table.Cell>
-                        {getFullyQualifiedShowName(request.show)}
+                        {getFullyQualifiedMediaName(request.show)}
                     </Table.Cell>
                     <Table.Cell>
                         {request.season.number}

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

@@ -7,7 +7,7 @@
     import CheckmarkX from '$lib/components/checkmark-x.svelte';
     import * as Table from '$lib/components/ui/table/index.js';
 
-    let {torrents} = $props();
+    let {torrents, isShow = true} = $props();
 </script>
 
 <Table.Root>
@@ -15,7 +15,9 @@
     <Table.Header>
         <Table.Row>
             <Table.Head>Name</Table.Head>
-            <Table.Head>Seasons</Table.Head>
+            {#if isShow}
+                <Table.Head>Seasons</Table.Head>
+            {/if}
             <Table.Head>Download Status</Table.Head>
             <Table.Head>Quality</Table.Head>
             <Table.Head>File Path Suffix</Table.Head>
@@ -30,11 +32,13 @@
                         {torrent.torrent_title}
                     </a>
                 </Table.Cell>
-                <Table.Cell>
-                    <a href={'/dashboard/torrents/' + torrent.torrent_id}>
-                        {convertTorrentSeasonRangeToIntegerRange(torrent)}
-                    </a>
-                </Table.Cell>
+                {#if isShow}
+                    <Table.Cell>
+                        <a href={'/dashboard/torrents/' + torrent.torrent_id}>
+                            {convertTorrentSeasonRangeToIntegerRange(torrent)}
+                        </a>
+                    </Table.Cell>
+                {/if}
                 <Table.Cell>
                     <a href={'/dashboard/torrents/' + torrent.torrent_id}>
                         {getTorrentStatusString(torrent.status)}

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

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+    import {type VariantProps, tv} from "tailwind-variants";
+
+    export const badgeVariants = tv({
+        base: "focus:ring-ring inline-flex select-none items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+        variants: {
+            variant: {
+                default:
+                    "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow",
+                secondary:
+                    "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+                destructive:
+                    "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow",
+                outline: "text-foreground",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    });
+
+    export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+    import type {WithElementRef} from "bits-ui";
+    import type {HTMLAnchorAttributes} from "svelte/elements";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        href,
+        class: className,
+        variant = "default",
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAnchorAttributes> & {
+        variant?: BadgeVariant;
+    } = $props();
+</script>
+
+<svelte:element
+        {...restProps}
+        bind:this={ref}
+        class={cn(badgeVariants({ variant }), className)}
+        {href}
+        this={href ? "a" : "span"}
+>
+    {@render children?.()}
+</svelte:element>

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

@@ -0,0 +1,2 @@
+export {default as Badge} from "./badge.svelte";
+export {badgeVariants, type BadgeVariant} from "./badge.svelte";

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

@@ -1,7 +1,7 @@
-import Root from './skeleton.svelte';
+import Root from "./skeleton.svelte";
 
 export {
     Root,
     //
-    Root as Skeleton
+    Root as Skeleton,
 };

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import type {WithElementRef, WithoutChildren} from 'bits-ui';
-    import type {HTMLAttributes} from 'svelte/elements';
-    import {cn} from '$lib/utils.js';
+    import type {WithElementRef, WithoutChildren} from "bits-ui";
+    import type {HTMLAttributes} from "svelte/elements";
+    import {cn} from "$lib/utils.js";
 
     let {
         ref = $bindable(null),
@@ -12,6 +12,6 @@
 
 <div
         bind:this={ref}
-        class={cn('animate-pulse rounded-md bg-primary/10', className)}
+        class={cn("bg-primary/10 animate-pulse rounded-md", className)}
         {...restProps}
 ></div>