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/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>