feat: add thumbnail spec

src/lib/Image.svelte

@@ -2,8 +2,11 @@
 	type ImageStatus = 'loading' | 'loaded' | 'error';
 	import type { HTMLImgAttributes } from 'svelte/elements';
 
-	let { src, ...props }: HTMLImgAttributes = $props();
+	let { src, fallback, ...props }: HTMLImgAttributes & { fallback?: string } = $props();
 	let status: ImageStatus = $state('loading');
+	let useFallback = $state(false);
+
+	const currentSrc = $derived(useFallback && fallback ? fallback : src);
 </script>
 
 {#if status === 'loading'}
@@ -11,11 +14,18 @@
 {/if}
 
 <img
-	{src}
+	src={currentSrc}
 	hidden={status === 'loading'}
 	onload={() => {
 		status = 'loaded';
 	}}
-	onerror={() => (status = 'error')}
+	onerror={() => {
+		if (!useFallback && fallback) {
+			useFallback = true;
+			status = 'loading';
+		} else {
+			status = 'error';
+		}
+	}}
 	{...props}
 />

src/lib/Projects.svelte

@@ -44,7 +44,8 @@
 			>
 				<div class="relative aspect-video overflow-hidden">
 					<Image
-						src={'https://picsum.photos/seed/yama/400/225'}
+						src={`/api/v0/repos/${project.id}/files/thumbnail.webp`}
+						fallback={`https://picsum.photos/seed/${project.id}/400/225`}
 						alt={project.full_name}
 						class="min-h-56.5 w-full min-w-100 object-cover transition-transform duration-300 group-hover:scale-105"
 					/>

src/lib/Repos.svelte

@@ -115,7 +115,6 @@
 		<div class="flex items-center gap-3">
 			<GitBranch class="h-6 w-6 text-icon" />
 			<h2 class="text-xl font-semibold text-text-primary">Import Git Repository</h2>
-			<span class="text-xs text-text-muted">repo must be public</span>
 		</div>
 		<Button.Root
 			class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary"