feat: add About page with media manager description and metadata sources attribution and enhance ui

web/src/routes/dashboard/+page.svelte

@@ -33,7 +33,7 @@
     <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
         Dashboard
     </h1>
-    <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min items-center justify-center p-4">
+    <div class="min-h-[100vh] flex-1 rounded-xl  md:min-h-min items-center justify-center p-4">
         <div class="xl:max-w-[1200px] lg:max-w-[750px] md:max-w-[500px] sm:max-w-[200px] mx-auto">
             <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight text-center my-4">Trending Shows</h3>
             {#await recommendedShows}

web/src/routes/dashboard/+page.ts

@@ -2,7 +2,6 @@ import {env} from '$env/dynamic/public';
 import type {PageLoad} from './$types';
 
 const apiUrl = env.PUBLIC_API_URL;
-import {toast} from 'svelte-sonner';
 
 
 export const load: PageLoad = async ({fetch}) => {

web/src/routes/dashboard/about/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import {Separator} from '$lib/components/ui/separator/index.js';
+    import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+    import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
+    import {base} from '$app/paths';
+    import logo from '$lib/images/logo.svg';
+    import {PUBLIC_VERSION} from '$env/static/public';
+</script>
+
+<header class="flex h-16 shrink-0 items-center gap-2">
+    <div class="flex items-center gap-2 px-4">
+        <Sidebar.Trigger class="-ml-1"/>
+        <Separator class="mr-2 h-4" orientation="vertical"/>
+        <Breadcrumb.Root>
+            <Breadcrumb.List>
+                <Breadcrumb.Item class="hidden md:block">
+                    <Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Item>
+                    <Breadcrumb.Page>About</Breadcrumb.Page>
+                </Breadcrumb.Item>
+            </Breadcrumb.List>
+        </Breadcrumb.Root>
+    </div>
+</header>
+
+<div class="flex flex-col items-center justify-center w-full py-12 px-4">
+    <img alt="Media Manager Logo" class="w-24 h-24 mb-4" src={logo}/>
+    <h1 class="text-4xl font-bold mb-2">About Media Manager</h1>
+    <p class="text-lg text-center max-w-2xl mb-6">
+        <strong>Media Manager</strong> is an all-in-one solution for organizing and building your media
+        library. Built for simplicity and modernity, it helps you keep track of your favorite shows and movies and
+        explore trending content—all in one place.
+    </p>
+    <p class="text-sm text-muted-foreground mb-2">
+        Version: v{PUBLIC_VERSION}
+    </p>
+    <div class="text-sm text-muted-foreground mb-6 my-6 flex items-center gap-2 lg:w-1/3 sm:w-1/2">
+        <a class="flex items-center gap-2" href="https://www.themoviedb.org/" target="_blank">
+            <img alt="TMDB Logo"
+                 class="w-20 h-auto"
+                 src="https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg"/>
+            <span>Metadata provided by TMDB. Please consider adding missing information or subscribing.</span>
+        </a>
+    </div>
+    <div class="text-sm text-muted-foreground mb-6 my-6 flex items-center gap-2 lg:w-1/3 sm:w-1/2">
+        <a class="flex items-center gap-2" href="https://thetvdb.com/subscribe" target="_blank">
+            <img alt="TheTVDB Logo" class="w-20 h-auto" src="https://www.thetvdb.com/images/attribution/logo2.png"/>
+            <span>Metadata provided by TheTVDB. Please consider adding missing information or subscribing.</span>
+        </a>
+    </div>
+</div>

web/src/routes/dashboard/settings/+page.svelte

@@ -4,11 +4,32 @@
     import * as Card from "$lib/components/ui/card/index.js";
     import {getContext} from "svelte";
     import UserSettings from '$lib/components/user-settings.svelte';
-
+    import {Separator} from "$lib/components/ui/separator";
+    import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+    import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
+    import {base} from "$app/paths";
     let currentUser = getContext("user")
     let users = page.data.users;
 </script>
 
+<header class="flex h-16 shrink-0 items-center gap-2">
+    <div class="flex items-center gap-2 px-4">
+        <Sidebar.Trigger class="-ml-1"/>
+        <Separator class="mr-2 h-4" orientation="vertical"/>
+        <Breadcrumb.Root>
+            <Breadcrumb.List>
+                <Breadcrumb.Item class="hidden md:block">
+                    <Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Item>
+                    <Breadcrumb.Page>Settings</Breadcrumb.Page>
+                </Breadcrumb.Item>
+            </Breadcrumb.List>
+        </Breadcrumb.Root>
+    </div>
+</header>
+
 <div class="flex w-full flex-1 flex-col gap-4 p-4 pt-0 max-w-[1000px] mx-auto">
     <h1 class="scroll-m-20 my-6 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
         Settings

web/src/routes/dashboard/settings/+page.ts

@@ -1,7 +1,7 @@
 import {env} from '$env/dynamic/public';
 import type {PageLoad} from './$types';
 
-export const load: PageLoad = async ({params, fetch}) => {
+export const load: PageLoad = async ({fetch}) => {
     try {
         const users = await fetch(env.PUBLIC_API_URL + "/users/all", {
             method: 'GET',