work

src/routes/projects/[id]/link-repository/+page.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { ActionData, PageServerData } from './$types';
+
+	let { data, form }: { data: PageServerData; form: ActionData } = $props();
+</script>
+
+<svelte:head>
+	<title>Link repository · Taskarr</title>
+</svelte:head>
+
+<main class="mx-auto min-h-screen max-w-3xl px-6 py-10">
+	<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+		<h1 class="text-3xl font-bold text-slate-900">Link a repository</h1>
+		<p class="mt-2 text-slate-600">Attach a GitHub repository to {data.project.name} using an installed app.</p>
+
+		<form method="post" action="?/link" class="mt-6 grid gap-3">
+			<select name="repository" class="rounded-md border border-slate-300 px-3 py-2">
+				<option value="">Choose a repository</option>
+				{#each data.repositoryCatalog as installation}
+					<optgroup label={installation.accountLogin}>
+						{#each installation.repositories as repo}
+							<option
+								value={JSON.stringify({
+									installationId: installation.installationId,
+									owner: repo.owner.login,
+									repo: repo.name,
+									fullName: repo.full_name,
+									defaultBranch: repo.default_branch
+								})}
+							>
+								{repo.full_name}
+							</option>
+						{/each}
+					</optgroup>
+				{/each}
+			</select>
+			<p class="text-sm text-slate-500">Repositories shown here come from the installed GitHub App.</p>
+			{#if form?.error}
+				<p class="text-sm text-red-600">{form.error}</p>
+			{/if}
+			<button class="w-fit rounded-md bg-blue-600 px-4 py-2 text-white">Link repository</button>
+		</form>
+	</div>
+</main>