feat: frontend fixes and improvements (#29)

* deps: downgrade to fix sveltejs/kit#11317

* fix: fixed the api problems on frontend

* feat: improvements to +page.server.ts and moved backend api host to localhost

frontend/package.json

@@ -15,7 +15,7 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/adapter-node": "^1.3.1",
-		"@sveltejs/kit": "^1.27.4",
+		"@sveltejs/kit": "1.30.0",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
 		"@types/luxon": "^3.3.7",

frontend/src/lib/components/header.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import type { NavItem } from '$lib/types';
 	import ThemeSwitcher from '$lib/components/theme-switcher.svelte';
-	import NavigationItem from '$lib/components/header/item.svelte';
-	import { Mountain, MoreHorizontal, X } from 'lucide-svelte';
+	import NavigationItem from '$lib/components/header-item.svelte';
+	import { Mountain, MoreHorizontal, X, Loader2 } from 'lucide-svelte';
 	import { Button } from '$lib/components/ui/button';
+	import { navigating } from '$app/stores';
 
 	const navItems: NavItem[] = [
 		{
@@ -48,6 +49,12 @@
 	</nav>
 </header>
 
+{#if $navigating}
+	<div class="loading-bar dark:bg-white bg-black z-[99]">
+		<div class="loading-animation"></div>
+	</div>
+{/if}
+
 <div
 	id="mobilenav"
 	class:h-0={!showMenu}
@@ -73,4 +80,28 @@
 	#mobilenav {
 		transition: all 0.5s ease-in-out;
 	}
+	.loading-bar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 4px;
+		overflow: hidden;
+	}
+
+	.loading-animation {
+		width: 100%;
+		height: 100%;
+		background: linear-gradient(to right, transparent, #888, transparent);
+		animation: loading 1s infinite;
+	}
+
+	@keyframes loading {
+		0% {
+			transform: translateX(-100%);
+		}
+		100% {
+			transform: translateX(100%);
+		}
+	}
 </style>

frontend/src/lib/components/status-media-card.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import type { PlexDebridItem, StatusInterface } from '$lib/types';
+	import { formatState } from '$lib/helpers';
 	import { Badge } from '$lib/components/ui/badge';
+	import { Button } from '$lib/components/ui/button';
+	import { Clapperboard } from 'lucide-svelte';
 
 	export let plexDebridItem: PlexDebridItem;
 	export let itemState: StatusInterface;
@@ -11,12 +14,14 @@
 </script>
 
 <div
-	class="flex flex-col md:flex-row md:justify-between gap-2 md:gap-0 text-white w-full bg-cover bg-center relative rounded-xl p-4 overflow-hidden"
+	class="flex flex-col md:flex-row md:justify-between gap-2 md:gap-0 text-white w-full bg-cover bg-center relative rounded-xl p-4 overflow-hidden border"
 	style="background-image: url({banner});"
 >
-	<div class="absolute top-0 left-0 w-full h-full bg-black opacity-40 rounded-xl" />
+	<div class="absolute top-0 left-0 w-full h-full bg-slate-900 opacity-50 rounded-xl" />
 	<div class="w-full h-full flex flex-col md:flex-row gap-2">
-		<div class="z-[1] flex gap-x-2 items-start md:items-center w-full md:w-2/3">
+		<div
+			class="z-[1] flex gap-x-2 items-start md:items-center w-full md:w-2/3 lg:w-3/4 xl:w-4/5 2xl:w-5/6"
+		>
 			<a href={plexDebridItem.imdb_link} target="_blank" rel="noopener noreferrer">
 				<img
 					alt="test"
@@ -26,15 +31,24 @@
 				/>
 			</a>
 			<div class="flex flex-col">
-				<p class="text-xl font-semibold md:text-ellipsis md:line-clamp-1">{plexDebridItem.title}</p>
-				<p>{plexDebridItem.aired_at}</p>
+				<p class="text-xl lg:text-2xl font-semibold md:text-ellipsis md:line-clamp-1">
+					{plexDebridItem.title}
+				</p>
+				<p>{plexDebridItem.aired_at.slice(0, -3)}</p>
+				<div class="flex flex-wrap gap-1 items-center mt-1">
+					{#each plexDebridItem.genres as genre}
+						<Badge variant="secondary">
+							{formatState(genre)}
+						</Badge>
+					{/each}
+				</div>
 			</div>
 		</div>
-		<div class="z-[1] flex flex-col items-start w-full md:w-1/2">
+		<div class="z-[1] flex flex-col gap-2 items-start w-full md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6">
 			<div class="flex gap-2 items-center">
 				<p class="text-lg font-semibold">Status</p>
-				<Badge class="{itemState.bg} text-black tracking-wider hover:text-white dark:hover:text-black">
-					{itemState.text}
+				<Badge class="{itemState.bg} tracking-wider text-black">
+					{itemState.text ?? formatState(plexDebridItem.state)}
 				</Badge>
 			</div>
 		</div>

frontend/src/lib/helpers.ts

@@ -1,4 +1,4 @@
-import { DateTime, Settings } from 'luxon';
+import { DateTime } from 'luxon';
 import type { PlexDebridItem } from '$lib/types';
 
 // only works with real-debrid dates because of CET format provided by RD

frontend/src/lib/types.ts

@@ -30,7 +30,7 @@ export interface PlexDebridItem {
 }
 
 export interface StatusInterface {
-	text: string;
+	text?: string;
 	color: string;
 	bg: string;
 	description: string;

frontend/src/routes/+error.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+</script>
+
+<div class="flex flex-col items-center justify-center w-full h-full font-primary">
+	<h1 class="text-4xl font-bold text-center">Something went wrong</h1>
+	<p class="text-lg text-muted-foreground">Error code: {$page.status}</p>
+	<p class="text-base text-muted-foreground">Error message: {$page.error?.message}</p>
+</div>

frontend/src/routes/+page.server.ts

@@ -0,0 +1,22 @@
+import type { PageServerLoad } from './$types';
+import type { UserResponse } from '$lib/types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ fetch }) => {
+	async function getUserData() {
+		try {
+			const res = await fetch('http://localhost:8080/user');
+			if (res.ok) {
+				return (await res.json()) as UserResponse;
+			}
+			throw error(res.status, `Unable to fetch user data: ${res.status} ${res.statusText}`);
+		} catch (e) {
+			console.error(e);
+			throw error(500, 'Unable to fetch user data. API is down.');
+		}
+	}
+
+	return {
+		user: await getUserData()
+	};
+};

frontend/src/routes/+page.svelte

@@ -1,21 +1,22 @@
 <script lang="ts">
 	import { formatDate } from '$lib/helpers';
+	import type { UserResponse } from '$lib/types';
 
-	export let data;
+	interface ExportedData {
+		user: UserResponse;
+	}
+
+	export let data: ExportedData;
 </script>
 
 <svelte:head>
 	<title>Iceberg | Home</title>
 </svelte:head>
 
 <div class="flex flex-col w-full p-8 md:px-24 lg:px-32">
-	{#if data.user}
 		<h1 class="text-xl md:text-2xl font-semibold">Welcome {data.user?.username}</h1>
 		<p class="md:text-lg text-muted-foreground">{data.user?.email}</p>
 		<p class="md:text-lg text-muted-foreground break-words">
 			Premium expires on {formatDate(data.user?.expiration, 'short')}
 		</p>
-	{:else}
-		<p class="md:text-lg text-muted-foreground">You are not logged in.</p>
-	{/if}
 </div>

frontend/src/routes/settings/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import { Construction } from "lucide-svelte";
+</script>
+
+<div class="flex flex-col p-8 md:px-24 lg:px-32">
+    <div class="flex flex-wrap gap-2 items-center">
+        <Construction class="w-12 h-12 text-white" />
+        <h1 class="text-xl md:text-2xl font-semibold">This page is under construction</h1>
+    </div>
+</div>

frontend/src/routes/status/+page.server.ts

@@ -0,0 +1,37 @@
+import type { PageServerLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ fetch }) => {
+	async function getStates() {
+		try {
+			const res = await fetch('http://localhost:8080/items/states');
+			if (res.ok) {
+				return await res.json();
+			}
+			throw error(res.status, `Unable to fetch states data: ${res.status} ${res.statusText}`);
+		} catch (e) {
+			console.error(e);
+			throw error(500, 'Unable to fetch states data. API is down.');
+		}
+	}
+
+	async function getItems() {
+		try {
+			const res = await fetch('http://localhost:8080/items/');
+			if (res.ok) {
+				return await res.json();
+			}
+			throw error(res.status, `Unable to fetch items data: ${res.status} ${res.statusText}`);
+		} catch (e) {
+			console.error(e);
+			throw error(500, 'Unable to fetch items data. API is down.');
+		}
+	}
+
+	return {
+		streamed: {
+			items: getItems()
+		},
+		states: await getStates()
+	};
+};