feat: implement description

src/lib/Repos.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button } from 'bits-ui';
+	import { AlertDialog, Button } from 'bits-ui';
 	import { GitBranch, Star, Clock, Import, Search, RefreshCw, LoaderCircle } from '@lucide/svelte';
 	import type { Repository } from './types/repo';
 	import { createQuery } from '@tanstack/svelte-query';
@@ -59,12 +59,25 @@
 	const repos = $derived(searching ? (searchResultsQuery.data ?? []) : (query.data ?? []));
 	const isPending = $derived(searching ? searchResultsQuery.isPending : query.isPending);
 
-	const handleImport = async (repo: Repository) => {
+	let dialogOpen = $state(false);
+	let selectedRepo = $state<Repository | null>(null);
+	let description = $state('');
+
+	const openDialog = (repo: Repository) => {
 		if (added.includes(repo.id)) {
 			toast.warning('Repository already imported');
 			return;
 		}
-		adding = repo.id;
+		selectedRepo = repo;
+		description = repo.description ?? '';
+		dialogOpen = true;
+	};
+
+	const handleImport = async () => {
+		if (!selectedRepo) return;
+		adding = selectedRepo.id;
+		dialogOpen = false;
+
 		let response = await fetch('/api/v0/user/repo/add', {
 			method: 'POST',
 			headers: {
@@ -72,8 +85,9 @@
 				Authorization: (await apiClient.getToken()) ?? ''
 			},
 			body: JSON.stringify({
-				id: repo.id.toString(),
-				full_name: repo.full_name
+				id: selectedRepo.id.toString(),
+				full_name: selectedRepo.full_name,
+				description
 			})
 		});
 		const data = await response.json();
@@ -84,8 +98,10 @@
 		} else {
 			toast.success('Successfully added repository');
 		}
-		added.push(repo.id);
+		added.push(selectedRepo.id);
 		adding = null;
+		selectedRepo = null;
+		description = '';
 	};
 
 	const languageColors: Record<string, string> = {
@@ -161,7 +177,7 @@
 						? 'border-success-border bg-success'
 						: 'bg-primary'} disabled:cursor-default disabled:opacity-50"
 					disabled={adding !== null}
-					onclick={() => handleImport(repo)}
+					onclick={() => openDialog(repo)}
 				>
 					{#if adding === repo.id}
 						<RefreshCw class="h-4 w-4 animate-spin" />
@@ -189,3 +205,52 @@
 		You must have a dist/ folder with index.html + index.wasm
 	</p>
 </div>
+
+<AlertDialog.Root bind:open={dialogOpen}>
+	<AlertDialog.Portal>
+		<AlertDialog.Overlay class="fixed inset-0 z-50 bg-black/80" />
+		<AlertDialog.Content
+			class="fixed top-1/2 left-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border bg-surface p-6 shadow-xl"
+		>
+			<div class="flex flex-col gap-4">
+				<AlertDialog.Title class="text-lg font-semibold text-text-primary">
+					Add Repository
+				</AlertDialog.Title>
+				<AlertDialog.Description class="text-sm text-text-secondary">
+					{#if selectedRepo}
+						You are about to add <span class="font-semibold text-text-primary"
+							>{selectedRepo.full_name}</span
+						>. Please provide a description for your project.
+					{/if}
+				</AlertDialog.Description>
+
+				<div class="mt-2">
+					<label for="description" class="mb-2 block text-sm font-medium text-text-primary">
+						Description
+					</label>
+					<textarea
+						id="description"
+						bind:value={description}
+						placeholder="Describe your project..."
+						rows="3"
+						class="w-full rounded-lg border border-border-hover bg-surface-hover px-3 py-2 text-text-primary placeholder-text-muted transition-colors outline-none focus:border-border-focus focus:ring-1 focus:ring-border-focus"
+					></textarea>
+				</div>
+			</div>
+
+			<div class="mt-6 flex justify-end gap-3">
+				<AlertDialog.Cancel
+					class="rounded-lg border border-border px-4 py-2 text-sm font-medium text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary"
+				>
+					Cancel
+				</AlertDialog.Cancel>
+				<AlertDialog.Action
+					class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-primary/90"
+					onclick={handleImport}
+				>
+					Continue
+				</AlertDialog.Action>
+			</div>
+		</AlertDialog.Content>
+	</AlertDialog.Portal>
+</AlertDialog.Root>

src/routes/layout.css

@@ -151,6 +151,14 @@ button:focus-visible {
   transform-origin: top;
 }
 
+[data-alert-dialog-content][data-state="open"] {
+  animation: grow-in 150ms ease-out;
+}
+
+[data-alert-dialog-content][data-state="closed"] {
+  animation: grow-out 150ms ease-out;
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;