feat: add repo importing

src/lib/Repos.svelte

@@ -6,6 +6,8 @@
 	import { authClient } from './auth-client';
 	import { apiClient } from './api-client';
 	import NProgress from 'nprogress';
+	import { toast } from 'svelte-sonner';
+	import { formatDistanceToNow } from 'date-fns';
 
 	const session = authClient.useSession();
 
@@ -48,14 +50,38 @@
 	}));
 
 	let adding = $state<number | null>(null);
+	let added = $state<number[]>([]);
+	$effect(() => {
+		added = repos.filter((r) => r.added).map((r) => r.id);
+	});
 
 	const searching = $derived(throttledQuery.length > 0);
 	const repos = $derived(searching ? (searchResultsQuery.data ?? []) : (query.data ?? []));
 	const isPending = $derived(searching ? searchResultsQuery.isPending : query.isPending);
 
-	const handleImport = async (repoId: number) => {
-		adding = repoId;
-		await new Promise((resolve) => setTimeout(resolve, 2000));
+	const handleImport = async (repo: Repository) => {
+		if (added.includes(repo.id)) {
+			toast.warning('Repository already imported');
+			return;
+		}
+		adding = repo.id;
+		let response = await fetch('/api/v0/user/repo/add', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: (await apiClient.getToken()) ?? ''
+			},
+			body: JSON.stringify({
+				id: repo.id.toString(),
+				name: repo.full_name
+			})
+		});
+		if (!response.ok) {
+			toast.warning('Repository already imported');
+		} else {
+			toast.success('Successfully added repository');
+		}
+		added.push(repo.id);
 		adding = null;
 	};
 
@@ -97,9 +123,9 @@
 	<div class="space-y-3">
 		{#each repos as repo (repo.id)}
 			<div
-				class="group flex items-center justify-between rounded-lg border border-gray-800 bg-gray-800/50 p-4 transition-colors hover:border-gray-700 hover:bg-gray-800"
+				class="group flex items-center justify-between rounded-lg border border-gray-800 bg-gray-800/40 p-4 transition-colors hover:border-gray-700 hover:bg-gray-800"
 			>
-				<div class="min-w-0 flex-1">
+				<div class="flex-1">
 					<div class="flex items-center gap-2">
 						<h3 class="truncate font-medium text-white">{repo.name}</h3>
 					</div>
@@ -123,21 +149,25 @@
 						</span>
 						<span class="flex items-center gap-1">
 							<Clock class="h-3.5 w-3.5" />
-							{repo.updatedAt}
+							{formatDistanceToNow(new Date(repo.updated_at), { addSuffix: true })}
 						</span>
 					</div>
 				</div>
 				<Button.Root
-					class="ml-4 flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-500 disabled:cursor-default disabled:opacity-50"
+					class="ml-4 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors {added.includes(
+						repo.id
+					)
+						? 'border-green-800 bg-green-900'
+						: 'bg-blue-600'} disabled:cursor-default disabled:opacity-50"
 					disabled={adding !== null}
-					onclick={() => handleImport(repo.id)}
+					onclick={() => handleImport(repo)}
 				>
 					{#if adding === repo.id}
 						<RefreshCw class="h-4 w-4 animate-spin" />
 						<span>Adding...</span>
 					{:else}
 						<Import class="h-4 w-4" />
-						<span>Add</span>
+						<span>{added.includes(repo.id) ? 'Added' : 'Add'}</span>
 					{/if}
 				</Button.Root>
 			</div>

src/lib/api-client.ts

@@ -2,49 +2,50 @@ import { decodeJwt } from 'jose';
 import { authClient } from './auth-client';
 
 export class ApiClient {
-	private token: string | null;
+  private token: string | null;
 
-	constructor() {
-		this.token = null;
-	}
+  constructor() {
+    this.token = null;
+  }
 
-	private tokenValid() {
-		if (!this.token) {
-			return false;
-		}
+  private tokenValid() {
+    if (!this.token) {
+      return false;
+    }
 
-		const jwt = decodeJwt(this.token);
-		if (!jwt.exp) {
-			return false;
-		}
+    const jwt = decodeJwt(this.token);
+    if (!jwt.exp) {
+      return false;
+    }
 
-		return jwt.exp > Date.now() / 1000 + 10;
-	}
+    return jwt.exp > Date.now() / 1000 + 10;
+  }
 
-	private async getToken() {
-		if (this.tokenValid()) {
-			return this.token;
-		}
+  async getToken() {
+    if (this.tokenValid()) {
+      return this.token;
+    }
 
-		const token = (await authClient.token().then((t) => t.data?.token)) ?? null;
-		this.token = token;
+    const token = (await authClient.token().then((t) => t.data?.token)) ?? null;
+    this.token = token;
 
-		return token;
-	}
+    return token;
+  }
 
-	async request<T>(url: string, options: RequestInit = {}): Promise<T> {
-		const token = await this.getToken();
+  async request<T>(url: string, options: RequestInit = {}): Promise<T> {
+    const token = await this.getToken();
 
-		const response = await fetch(url, {
-			...options,
-			headers: {
-				Authorization: `Bearer ${token}`
-			}
-		});
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        ...options.headers,
+        Authorization: `Bearer ${token}`,
+      }
+    });
 
-		const data = await response.json();
-		return data;
-	}
+    const data = await response.json();
+    return data;
+  }
 }
 
 export const apiClient = new ApiClient();

src/lib/types/repo.ts

@@ -1,10 +1,12 @@
 export type Repository = {
-	id: number;
-	name: string;
-	fullName: string;
-	description?: string | null;
-	language?: string | null;
-	stars?: number;
-	updatedAt: string;
-	private: boolean;
+  id: number;
+  name: string;
+  full_name: string;
+  description?: string | null;
+  language?: string | null;
+  stars?: number;
+  updated_at: string;
+  private: boolean;
+  default_branch: String;
+  added: boolean;
 };

src/routes/+layout.svelte

@@ -5,6 +5,7 @@
 	import 'nprogress/nprogress.css';
 	import NProgress from 'nprogress';
 	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools';
+	import { Toaster } from 'svelte-sonner';
 
 	let { children } = $props();
 	const queryClient = new QueryClient();
@@ -12,6 +13,7 @@
 </script>
 
 <Header />
+<Toaster position="top-center" theme="dark" />
 
 <QueryClientProvider client={queryClient}>
 	{@render children()}