fix(frontend): better 404 profile handling

Author: ImShyMike

frontend/src/lib/components/ErrorPage.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import LucideArrowLeft from '~icons/lucide/arrow-left';
+
 	export let status: number = 500;
 	export let error: { message?: string } | null = null;
 
@@ -20,4 +22,12 @@
 			<p class="m-0 text-2xl font-bold text-lavender">{meaning}</p>
 		</div>
 	</header>
+
+	<button
+		on:click={() => window.history.back()}
+		class="inline-flex items-center gap-2 rounded-md bg-surface0/50 px-4 py-2 text-sm font-medium text-text hover:bg-surface0 cursor-pointer"
+	>
+		<LucideArrowLeft class="h-4 w-4" aria-hidden="true" />
+		<span>Go Back</span>
+	</button>
 </section>

frontend/src/routes/@[slug]/+page.server.ts

@@ -1,17 +1,17 @@
 import type { PageServerLoad } from './$types';
 import type { ProfileResponse } from '$lib/types/profile';
 import { createApi, ApiError } from '$lib/api/api';
-import { error } from '@sveltejs/kit';
 
 export const load: PageServerLoad = async ({ fetch, params }) => {
-	const loadProfile = async (): Promise<ProfileResponse> => {
+	const loadProfile = async (): Promise<ProfileResponse | null> => {
 		try {
 			const api = createApi(fetch);
 			return await api.get<ProfileResponse>(`/page/profile/${params.slug}`);
 		} catch (e) {
-			console.error('Error loading profile page data:', e);
-			const err = e as ApiError;
-			throw error(err.status || 500, err.message);
+			if (e instanceof ApiError && e.status === 404) {
+				return null;
+			}
+			throw e;
 		}
 	};
 

frontend/src/routes/@[slug]/+page.svelte

@@ -43,6 +43,14 @@
 
 {#if deferred.showSkeleton}
 	<ProfileSkeleton />
+{:else if deferred.data === null}
+	<PageScaffold title="Not Found" showLastUpdated={false}>
+		<EmptyState
+			title="Profile not found"
+			description="The user you're looking for doesn't exist :("
+			className="mb-4"
+		/>
+	</PageScaffold>
 {:else if deferred.data}
 	{@const profileData = deferred.data}
 	<PageScaffold title="@{profileData.user.username}" showLastUpdated={false}>