fix: minor ui improvements (#503)

* fix: minor ui improvements

* chore: formatted files

frontend/src/lib/components/header.svelte

@@ -9,15 +9,16 @@
 	import { getContext } from 'svelte';
 	import { type Writable } from 'svelte/store';
 	import { goto } from '$app/navigation';
+	import { onMount, onDestroy } from 'svelte';
 
 	const navItems: NavItem[] = [
 		{
 			name: 'Home',
 			path: '/'
 		},
 		{
-			name: 'Stats',
-			path: '/statistics'
+			name: 'Summary',
+			path: '/summary'
 		},
 		{
 			name: 'Library',
@@ -36,11 +37,34 @@
 	}
 
 	export let darkWhiteText: boolean = false;
+
+	onMount(async () => {
+		const header = document.getElementById('header');
+		const headerHeight = header?.offsetHeight;
+		console.log(headerHeight);
+
+		// header?.style.transition = 'padding 0.5s ease, other-properties 0.5s ease';
+
+		window.addEventListener('scroll', () => {
+			if (window.scrollY) {
+				// header?.classList.add('absolute');
+				header?.classList.remove('p-8');
+				header?.classList.add('p-4');
+				header?.classList.add('backdrop-blur-sm');
+			} else {
+				// header?.classList.remove('absolute');
+				header?.classList.remove('p-4');
+				header?.classList.add('p-8');
+				header?.classList.remove('backdrop-blur-sm');
+			}
+		});
+	});
 </script>
 
 <header
+	id="header"
 	class={clsx(
-		'flex w-full items-center justify-between bg-transparent p-8 md:px-24 lg:px-32',
+		'fixed top-0 flex w-full items-center justify-between bg-transparent p-8 transition-all duration-300 ease-in-out md:px-24 lg:px-32',
 		{
 			'text-background dark:text-foreground': darkWhiteText
 		},
@@ -96,4 +120,4 @@
 			</Drawer.Content>
 		</Drawer.Root>
 	</nav>
-</header>
+</header>

frontend/src/lib/components/home-items.svelte

@@ -23,12 +23,12 @@
 		<div class="my-2 flex flex-col gap-3 md:my-0 md:gap-4 xl:w-[70%]">
 			<div class="flex items-center justify-between gap-2">
 				<div class="flex items-center gap-2">
-					<div class="bg-primary rounded-md p-2 text-white">
+					<div class="rounded-md bg-primary p-2 text-white">
 						<Clapperboard class="size-4" />
 					</div>
 					<h2 class="text-xl font-medium md:text-2xl">Trending {name}</h2>
 				</div>
-				<a href="/movies" class="text-primary-foreground flex items-center gap-2 text-sm">
+				<a href="/movies" class="flex items-center gap-2 text-sm text-primary-foreground">
 					<MoveUpRight class="size-4" />
 				</a>
 			</div>
@@ -65,12 +65,12 @@
 		>
 			<div class="flex items-center justify-between">
 				<div class="flex items-center gap-2">
-					<div class="bg-primary rounded-md p-2 text-white">
+					<div class="rounded-md bg-primary p-2 text-white">
 						<Star class="size-4" />
 					</div>
 					<h2 class="text-xl font-medium md:text-2xl">Popular {name}</h2>
 				</div>
-				<a href="/{type}" class="text-primary-foreground flex items-center gap-2 text-sm">
+				<a href="/{type}" class="flex items-center gap-2 text-sm text-primary-foreground">
 					<MoveUpRight class="size-4" />
 				</a>
 			</div>
@@ -95,11 +95,11 @@
 								</h3>
 								<div class="flex items-center gap-2 text-xs font-normal">
 									<div class="flex items-center gap-1">
-										<CalendarDays class="text-muted-foreground size-4" />
+										<CalendarDays class="size-4 text-muted-foreground" />
 										<p>{item.release_date || item.first_air_date}</p>
 									</div>
 									<div class="flex items-center gap-1">
-										<Star class="text-muted-foreground size-4" />
+										<Star class="size-4 text-muted-foreground" />
 										<p>{roundOff(item.vote_average)}</p>
 									</div>
 								</div>

frontend/src/lib/components/media-item.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	export let data: any;
+	export let statesName;
+
+	// https://images.metahub.space/poster/small/tt3083016/img
+	const baseUrl = 'https://images.metahub.space/poster/small/';
+
+	const convertTo: Record<string, string> = {
+		Movie: 'movie',
+		Show: 'tv'
+	};
+</script>
+
+<a
+	class="xl:w-1/7 group relative mb-2 flex w-1/2 flex-shrink-0 flex-col gap-2 rounded-lg p-[.5rem] sm:w-1/3 md:w-1/4 lg:w-1/6"
+	href="/{convertTo[data.type]}/{data.imdb_id}"
+>
+	<div class="relative aspect-[1/1.5] w-full overflow-hidden rounded-lg">
+		<span class="inline-block h-full w-full">
+			<img
+				width="100%"
+				alt={data.title}
+				height="100%"
+				src="{baseUrl}{data.imdb_id}/img"
+				class="h-full w-full object-cover object-center transition-all duration-300 ease-in-out group-hover:scale-105"
+			/>
+		</span>
+		<div
+			class="absolute inset-0 z-10 flex h-full w-full flex-col justify-end gap-1 bg-gradient-to-t from-zinc-900 p-[.35rem] pb-2 tracking-wide lg:group-hover:opacity-100"
+		>
+			<div
+				class="flex flex-wrap justify-center gap-1 text-xs font-normal tracking-wide text-gray-200 md:items-center 2xl:text-sm"
+			>
+				<span>{data.type}</span>
+				•
+				<span class="whitespace-nowrap">
+					<span>{data.state === 'PartiallyCompleted' ? 'Partial' : statesName[data.state]}</span>
+				</span>
+			</div>
+			<div class="line-clamp-2 text-center text-sm font-medium leading-tight">{data.title}</div>
+		</div>
+	</div>
+</a>

frontend/src/lib/components/ui/accordion/accordion-content.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { slide } from 'svelte/transition';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = AccordionPrimitive.ContentProps;
+
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = slide;
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		duration: 200
+	};
+	export { className as class };
+</script>
+
+<AccordionPrimitive.Content
+	class={cn('overflow-hidden text-sm transition-all', className)}
+	{transition}
+	{transitionConfig}
+	{...$$restProps}
+>
+	<div class="pb-4 pt-0">
+		<slot />
+	</div>
+</AccordionPrimitive.Content>

frontend/src/lib/components/ui/accordion/accordion-item.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = AccordionPrimitive.ItemProps;
+
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
+	export { className as class };
+</script>
+
+<AccordionPrimitive.Item {value} class={cn('border-b', className)} {...$$restProps}>
+	<slot />
+</AccordionPrimitive.Item>

frontend/src/lib/components/ui/accordion/accordion-trigger.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import ChevronDown from 'lucide-svelte/icons/chevron-down';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = AccordionPrimitive.TriggerProps;
+	type $$Events = AccordionPrimitive.TriggerEvents;
+
+	let className: $$Props['class'] = undefined;
+	export let level: AccordionPrimitive.HeaderProps['level'] = 3;
+	export { className as class };
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		class={cn(
+			'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+			className
+		)}
+		{...$$restProps}
+		on:click
+	>
+		<slot />
+		<ChevronDown class="h-4 w-4 transition-transform duration-200" />
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

frontend/src/lib/components/ui/accordion/index.ts

@@ -0,0 +1,17 @@
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+import Content from './accordion-content.svelte';
+import Item from './accordion-item.svelte';
+import Trigger from './accordion-trigger.svelte';
+const Root = AccordionPrimitive.Root;
+
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger
+};

frontend/src/lib/components/ui/drawer/drawer-content.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-	import DrawerOverlay from "./drawer-overlay.svelte";
-	import { cn } from "$lib/utils.js";
+	import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+	import DrawerOverlay from './drawer-overlay.svelte';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = DrawerPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <DrawerPrimitive.Portal>
 	<DrawerOverlay />
 	<DrawerPrimitive.Content
 		class={cn(
-			"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+			'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
 			className
 		)}
 		{...$$restProps}

frontend/src/lib/components/ui/drawer/drawer-description.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-	import { cn } from "$lib/utils.js";
+	import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = DrawerPrimitive.DescriptionProps;
 
-	export let el: $$Props["el"] = undefined;
-	let className: $$Props["class"] = undefined;
+	export let el: $$Props['el'] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <DrawerPrimitive.Description
 	bind:el
-	class={cn("text-sm text-muted-foreground", className)}
+	class={cn('text-sm text-muted-foreground', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/drawer/drawer-footer.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement> & {
 		el?: HTMLDivElement;
 	};
 
-	export let el: $$Props["el"] = undefined;
-	let className: $$Props["class"] = undefined;
+	export let el: $$Props['el'] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div bind:this={el} class={cn("mt-auto flex flex-col gap-2 p-4", className)} {...$$restProps}>
+<div bind:this={el} class={cn('mt-auto flex flex-col gap-2 p-4', className)} {...$$restProps}>
 	<slot />
 </div>

frontend/src/lib/components/ui/drawer/drawer-header.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement> & {
 		el?: HTMLDivElement;
 	};
-	export let el: $$Props["el"] = undefined;
-	let className: $$Props["class"] = undefined;
+	export let el: $$Props['el'] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <div
 	bind:this={el}
-	class={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+	class={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/drawer/drawer-nested.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { Drawer as DrawerPrimitive } from 'vaul-svelte';
 
 	type $$Props = DrawerPrimitive.Props;
-	export let shouldScaleBackground: $$Props["shouldScaleBackground"] = true;
-	export let open: $$Props["open"] = false;
-	export let activeSnapPoint: $$Props["activeSnapPoint"] = undefined;
+	export let shouldScaleBackground: $$Props['shouldScaleBackground'] = true;
+	export let open: $$Props['open'] = false;
+	export let activeSnapPoint: $$Props['activeSnapPoint'] = undefined;
 </script>
 
 <DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>

frontend/src/lib/components/ui/drawer/drawer-overlay.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-	import { cn } from "$lib/utils.js";
+	import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = DrawerPrimitive.OverlayProps;
 
-	export let el: $$Props["el"] = undefined;
-	let className: $$Props["class"] = undefined;
+	export let el: $$Props['el'] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <DrawerPrimitive.Overlay
 	bind:el
-	class={cn("fixed inset-0 z-50 bg-black/80", className)}
+	class={cn('fixed inset-0 z-50 bg-black/80', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/drawer/drawer-title.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-	import { cn } from "$lib/utils.js";
+	import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = DrawerPrimitive.TitleProps;
 
-	export let el: $$Props["el"] = undefined;
-	let className: $$Props["class"] = undefined;
+	export let el: $$Props['el'] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <DrawerPrimitive.Title
 	bind:el
-	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	class={cn('text-lg font-semibold leading-none tracking-tight', className)}
 	{...$$restProps}
 >
 	<slot />