feat: add thumbnail spec

api/src/endpoints/get_repos.rs

@@ -42,7 +42,6 @@ pub async fn get_repos(
         .into_iter()
         .map(|r| r.id)
         .collect::<HashSet<String>>();
-    println!("{added_ids:?}");
     let data = response
         .json::<Vec<Repository>>()
         .await?

api/src/endpoints/proxy_file.rs

@@ -33,7 +33,9 @@ pub async fn proxy_file(
         .bearer_auth(token)
         .send()
         .await?;
-    response.error_for_status_ref()?;
+    response
+        .error_for_status_ref()
+        .map_err(|_| crate::error::Error::NotFound)?;
 
     let bytes = response.bytes().await?;
     let mime = mime_guess::from_path(&path.file)

api/src/error.rs

@@ -54,7 +54,9 @@ impl ResponseError for Error {
             Error::ValidationFailed(msg) => {
                 HttpResponse::BadRequest().json(ErrorResponse { error: msg.clone() })
             }
-            Error::NotFound => HttpResponse::NotFound().finish(),
+            Error::NotFound => HttpResponse::NotFound().json(ErrorResponse {
+                error: "not found".to_string(),
+            }),
             _ => HttpResponse::InternalServerError().finish(),
         }
     }

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"

src/routes/p/[id]/+page.svelte

@@ -56,7 +56,7 @@
 
 	<div
 		bind:this={containerRef}
-		class="relative w-full max-w-6xl overflow-hidden rounded-md bg-black shadow-2xl ring-1 ring-gray-700/80"
+		class="relative mt-2 w-full max-w-6xl overflow-hidden rounded-md bg-black shadow-2xl ring-1 ring-gray-700/80"
 		class:max-w-none={isFullscreen}
 		class:h-screen={isFullscreen}
 		class:rounded-none={isFullscreen}