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

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

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-    import {Settings, LifeBuoy, Send, LayoutPanelLeft, TvIcon, Home} from "lucide-svelte";
+    import {Home, Info, LifeBuoy, Send, Settings, TvIcon} from "lucide-svelte";
     import {PUBLIC_VERSION} from '$env/static/public';
 
     const data = {
@@ -47,6 +47,11 @@
                 title: 'Feedback',
                 url: '#',
                 icon: Send
+            },
+            {
+                title: 'About',
+                url: '/dashboard/about',
+                icon: Info
             }
         ]
     };
@@ -54,7 +59,6 @@
 
 <script lang="ts">
     import NavMain from '$lib/components/nav-main.svelte';
-    import NavProjects from '$lib/components/nav-projects.svelte';
     import NavSecondary from '$lib/components/nav-secondary.svelte';
     import NavUser from '$lib/components/nav-user.svelte';
     import * as Sidebar from '$lib/components/ui/sidebar/index.js';

web/src/lib/components/login-form.svelte

@@ -8,7 +8,6 @@
 	import * as Tabs from '$lib/components/ui/tabs/index.js';
 	import {toast} from 'svelte-sonner';
 	import LoadingBar from '$lib/components/loading-bar.svelte';
-	import {base} from "$app/paths";
 
 	let apiUrl = env.PUBLIC_API_URL;
 

web/src/lib/components/nav-user.svelte

@@ -1,10 +1,6 @@
 <script lang="ts">
-	import BadgeCheck from '@lucide/svelte/icons/badge-check';
-	import Bell from '@lucide/svelte/icons/bell';
 	import ChevronsUpDown from '@lucide/svelte/icons/chevrons-up-down';
-	import CreditCard from '@lucide/svelte/icons/credit-card';
 	import LogOut from '@lucide/svelte/icons/log-out';
-	import Sparkles from '@lucide/svelte/icons/sparkles';
 
 	import * as Avatar from '$lib/components/ui/avatar/index.js';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
@@ -13,6 +9,8 @@
 	import UserDetails from './user-details.svelte';
 	import UserRound from '@lucide/svelte/icons/user-round';
 	import {handleLogout} from '$lib/utils.ts';
+	import {goto} from "$app/navigation";
+	import {base} from "$app/paths";
 	const sidebar = useSidebar();
 </script>
 
@@ -59,6 +57,10 @@
 					</div>
 				</DropdownMenu.Label>
 				<DropdownMenu.Separator/>
+				<DropdownMenu.Item onclick={() => goto(base+'/dashboard/settings#me')}>
+					My Account
+				</DropdownMenu.Item>
+				<DropdownMenu.Separator/>
 				<DropdownMenu.Item onclick={() => handleLogout()}>
 					<LogOut/>
 					Log out

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import * as Card from "$lib/components/ui/card/index.js";
     import Autoplay from "embla-carousel-autoplay";
     import * as Carousel from "$lib/components/ui/carousel/index.js";
     import type {MetaDataProviderShowSearchResult} from "$lib/types";

web/src/lib/components/user-data-table.svelte

@@ -6,11 +6,9 @@
     import {env} from "$env/dynamic/public";
     import {toast} from "svelte-sonner";
     import * as Dialog from "$lib/components/ui/dialog/index.js";
-    import {getTorrentQualityString} from "$lib/utils";
     import {Label} from "$lib/components/ui/label/index.js";
     import * as RadioGroup from "$lib/components/ui/radio-group/index.js";
     import {Input} from "$lib/components/ui/input/index.js";
-    import {invalidateAll} from "$app/navigation";
 
     let {users}: { users: User[] } = $props();
     let sortedUsers = $derived(users.sort((a, b) => a.email.localeCompare(b.email)));

web/src/lib/components/user-settings.svelte

@@ -1,17 +1,10 @@
 <script lang="ts">
-    import type {User} from '$lib/types.js';
-    import CheckmarkX from '$lib/components/checkmark-x.svelte';
-    import * as Table from '$lib/components/ui/table/index.js';
     import {Button} from "$lib/components/ui/button/index.js";
     import {env} from "$env/dynamic/public";
     import {toast} from "svelte-sonner";
     import * as Dialog from "$lib/components/ui/dialog/index.js";
-    import {getTorrentQualityString} from "$lib/utils";
     import {Label} from "$lib/components/ui/label/index.js";
-    import * as RadioGroup from "$lib/components/ui/radio-group/index.js";
     import {Input} from "$lib/components/ui/input/index.js";
-    import {invalidateAll} from "$app/navigation";
-    import {getContext} from 'svelte';
 
     let newPassword: string = $state('');
     let newEmail: string = $state('');

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',