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('');