From bd3fb911a8666085caff8d5e56e18322c81849b3 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 29 Jul 2026 19:52:07 +0200
Subject: [PATCH] web/components: tailor the empty repo state to ssh key
 presence

the four-step 'generate a key, add it to settings, set your remote, push' walk
through is only useful to an owner without a key on their account. owners who
already have one now get the quick-setup commands instead, in the shape github
and codeberg use: create-and-push, or push an existing repository.

key presence comes from sh.tangled.publicKey.countKeys, fetched lazily and only
for the owner; a failed lookup falls back to the key-generation instructions
since those are the safe ones to show. the new hasSshKey prop overrides the
lookup so both variants are storyable without a backend.

Signed-off-by: eti <eti@eti.tf>
---
 .../components/repo/EmptyRepo.stories.svelte  |   7 +-
 web/src/lib/components/repo/EmptyRepo.svelte  | 122 ++++++++++++++----
 2 files changed, 106 insertions(+), 23 deletions(-)

diff --git a/web/src/lib/components/repo/EmptyRepo.stories.svelte b/web/src/lib/components/repo/EmptyRepo.stories.svelte
index a4439408..275f4c55 100644
--- a/web/src/lib/components/repo/EmptyRepo.stories.svelte
+++ b/web/src/lib/components/repo/EmptyRepo.stories.svelte
@@ -26,7 +26,12 @@
 
 <Story name="Owner instructions" asChild>
 	<StoryAuthProvider initial={{ did: ownerDid, handle: "dawn" }}>
-		<EmptyRepo repo={ownerRepo} />
+		<EmptyRepo repo={ownerRepo} hasSshKey={false} />
+	</StoryAuthProvider>
+</Story>
+<Story name="Owner with SSH key" asChild>
+	<StoryAuthProvider initial={{ did: ownerDid, handle: "dawn" }}>
+		<EmptyRepo repo={ownerRepo} hasSshKey={true} />
 	</StoryAuthProvider>
 </Story>
 <Story name="Visitor" asChild>
diff --git a/web/src/lib/components/repo/EmptyRepo.svelte b/web/src/lib/components/repo/EmptyRepo.svelte
index 5879e878..2a9e309b 100644
--- a/web/src/lib/components/repo/EmptyRepo.svelte
+++ b/web/src/lib/components/repo/EmptyRepo.svelte
@@ -1,13 +1,20 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
 	import { getAuth } from "$lib/auth.svelte";
+	import { createBobbinClient } from "$lib/api/client";
+	import { count } from "$lib/api/count";
 	import type { RepoInfo } from "./types";
 
 	interface Props {
 		repo: RepoInfo;
+		/**
+		 * Overrides the SSH key lookup, for deterministic stories/tests.
+		 * Left unset in real usage, in which case it's figured out from the API.
+		 */
+		hasSshKey?: boolean;
 	}
 
-	let { repo }: Props = $props();
+	let { repo, hasSshKey }: Props = $props();
 
 	const auth = getAuth();
 	const isOwner = $derived(auth.currentDid === repo.ownerDid);
@@ -18,6 +25,39 @@
 			.split(/[:/]/)[0]
 	);
 	const remote = $derived(`git@${sshHost}:${repo.repoDid ?? `${repo.ownerHandle}/${repo.name}`}`);
+
+	type KeyStatus = "checking" | "has-key" | "no-key";
+
+	let keyStatus = $state<KeyStatus>("checking");
+
+	$effect(() => {
+		if (hasSshKey !== undefined) {
+			keyStatus = hasSshKey ? "has-key" : "no-key";
+			return;
+		}
+
+		if (!isOwner) return;
+		const did = auth.currentDid;
+		if (!did) return;
+
+		let cancelled = false;
+		keyStatus = "checking";
+
+		(async () => {
+			try {
+				const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl });
+				const result = await count(ctx, "sh.tangled.publicKey.countKeys", did);
+				if (!cancelled) keyStatus = result.count > 0 ? "has-key" : "no-key";
+			} catch {
+				// safe fallback: guide the owner through generating a key.
+				if (!cancelled) keyStatus = "no-key";
+			}
+		})();
+
+		return () => {
+			cancelled = true;
+		};
+	});
 </script>
 
 {#snippet bullet(n: number)}
@@ -28,29 +68,67 @@
 	</span>
 {/snippet}
 
+{#snippet codeBlock(lines: string[])}
+	<pre class="overflow-x-auto rounded bg-background-inset p-3 font-mono text-sm">{lines.join(
+			"\n"
+		)}</pre>
+{/snippet}
+
 {#if isOwner}
-	<div class="flex w-full place-content-center">
-		<div class="flex w-fit flex-col gap-4 py-6 text-sm">
-			<p>This is an empty repository. To get started:</p>
-			<p>
-				{@render bullet(1)}First, generate a new
-				<a
-					href="https://git-scm.com/book/en/v2/Git-on-the-Server-Generating-Your-SSH-Public-Key"
-					rel="noopener"
-					class="underline">SSH key pair</a
-				>.
-			</p>
-			<p>
-				{@render bullet(2)}Then add the public key from the
-				<a href={resolve("/settings/keys")} class="underline">keys page</a> in your settings.
-			</p>
-			<p>
-				{@render bullet(3)}Configure your remote to
-				<code class="rounded bg-background-inset px-1 font-mono">{remote}</code>
-			</p>
-			<p>{@render bullet(4)}Push!</p>
+	{#if keyStatus === "checking"}
+		<div class="py-6" aria-hidden="true"></div>
+	{:else if keyStatus === "has-key"}
+		<div class="flex w-full place-content-center">
+			<div class="flex w-fit flex-col gap-5 py-6 text-sm">
+				<p>This is an empty repository.</p>
+				<div class="flex flex-col gap-2">
+					<p class="text-foreground-subtle">…create a new repository on the command line</p>
+					{@render codeBlock([
+						`echo "# ${repo.name}" >> README.md`,
+						"git init",
+						"git add README.md",
+						'git commit -m "initial commit"',
+						`git branch -M ${repo.defaultBranch}`,
+						`git remote add origin ${remote}`,
+						`git push -u origin ${repo.defaultBranch}`
+					])}
+				</div>
+				<div class="flex flex-col gap-2">
+					<p class="text-foreground-subtle">
+						…or push an existing repository from the command line
+					</p>
+					{@render codeBlock([
+						`git remote add origin ${remote}`,
+						`git branch -M ${repo.defaultBranch}`,
+						`git push -u origin ${repo.defaultBranch}`
+					])}
+				</div>
+			</div>
+		</div>
+	{:else}
+		<div class="flex w-full place-content-center">
+			<div class="flex w-fit flex-col gap-4 py-6 text-sm">
+				<p>This is an empty repository. To get started:</p>
+				<p>
+					{@render bullet(1)}First, generate a new
+					<a
+						href="https://git-scm.com/book/en/v2/Git-on-the-Server-Generating-Your-SSH-Public-Key"
+						rel="noopener"
+						class="underline">SSH key pair</a
+					>.
+				</p>
+				<p>
+					{@render bullet(2)}Then add the public key from the
+					<a href={resolve("/settings/keys")} class="underline">keys page</a> in your settings.
+				</p>
+				<p>
+					{@render bullet(3)}Configure your remote to
+					<code class="rounded bg-background-inset px-1 font-mono">{remote}</code>
+				</p>
+				<p>{@render bullet(4)}Push!</p>
+			</div>
 		</div>
-	</div>
+	{/if}
 {:else}
 	<p class="py-6 text-center text-foreground-subtle">This is an empty repository.</p>
 {/if}
-- 
2.51.2