From 0a4ad62a4d374dec0594fe99f9cc297deef0235f Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 23 Sep 2026 18:41:13 +0200
Subject: [PATCH] web/repo: lay out the repo creation form with fields

Signed-off-by: eti <eti@eti.tf>
---
 .../components/repo/RepoCreationForm.svelte   | 188 ++++++++----------
 1 file changed, 87 insertions(+), 101 deletions(-)

diff --git a/web/src/lib/components/repo/RepoCreationForm.svelte b/web/src/lib/components/repo/RepoCreationForm.svelte
index 5d0a99b41..237648924 100644
--- a/web/src/lib/components/repo/RepoCreationForm.svelte
+++ b/web/src/lib/components/repo/RepoCreationForm.svelte
@@ -49,6 +49,7 @@
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Button, { buttonIcon } from "$lib/components/ui/Button.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import Field from "$lib/components/ui/Field.svelte";
 	import FormStep from "$lib/components/ui/FormStep.svelte";
 	import FormStepDisclosure from "$lib/components/ui/FormStepDisclosure.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
@@ -214,98 +215,82 @@
 >
 	<FormStep step={1} title="Details" description="Basic repository information.">
 		<div class="space-y-md">
-			<div>
-				<label
-					for="repo_name"
-					class="mb-2xs block typography-paragraph-small font-bold text-foreground-default"
-				>
-					Repository name
-				</label>
-				<div class="flex w-full flex-col gap-xs md:flex-row md:items-center md:gap-none">
-					{#if owners.length > 1}
-						<AccountSelector
-							accounts={owners}
-							bind:value={() => owner?.did ?? "", (did) => (selectedOwnerDid = did)}
-							label="Repository owner"
-							disabled={!user || action.loading}
-							group="repo-creation"
-							class="min-w-0 md:mr-xs md:max-w-[55%]"
+			<Field
+				label="Repository name"
+				subtitle="Choose a unique, descriptive name. Use letters, numbers, periods, underscores, and hyphens."
+			>
+				{#snippet children({ id })}
+					<div
+						class="flex w-full flex-col gap-xs md:flex-row md:items-center md:gap-none"
+					>
+						{#if owners.length > 1}
+							<AccountSelector
+								accounts={owners}
+								bind:value={
+									() => owner?.did ?? "", (did) => (selectedOwnerDid = did)
+								}
+								label="Repository owner"
+								disabled={!user || action.loading}
+								group="repo-creation"
+								class="min-w-0 md:me-xs md:max-w-[55%]"
+							/>
+						{:else}
+							<div
+								class="hidden min-w-0 items-center gap-2xs self-stretch px-xs typography-paragraph-small text-foreground-muted md:flex md:max-w-[55%] md:rounded-s md:border md:border-e-0 md:border-border-default md:bg-background-inset"
+							>
+								<Avatar did={user?.did} handle={user?.handle} size="regular" />
+								<span class="truncate">{user?.handle ?? "…"}</span>
+							</div>
+						{/if}
+						<Input
+							{id}
+							name="repo_name"
+							placeholder="repository-name"
+							maxlength={100}
+							bind:value={name}
+							required
+							class={owners.length > 1
+								? "flex-1"
+								: "flex-1 md:rounded-s-none md:rounded-e"}
 						/>
-					{:else}
-						<div
-							class="hidden shrink-0 items-center gap-2xs p-xs typography-paragraph-small text-foreground-muted md:flex md:rounded-l md:border md:border-r-0 md:border-border-default md:bg-background-inset"
-						>
-							<Avatar did={user?.did} handle={user?.handle} size="regular" />
-							<span>{user?.handle ?? "…"}</span>
-						</div>
+					</div>
+					{#if ownersLoading}
+						<p class="typography-paragraph-small text-foreground-muted">
+							Loading organizations…
+						</p>
 					{/if}
+					<ErrorAlert label={ownersError ?? undefined} />
+				{/snippet}
+			</Field>
+
+			<Field label="Description" subtitle="{[...description].length}/140 characters">
+				{#snippet children({ id })}
 					<Input
-						id="repo_name"
-						name="repo_name"
-						placeholder="repository-name"
-						maxlength={100}
-						bind:value={name}
-						required
-						class={owners.length > 1
-							? "flex-1"
-							: "flex-1 md:rounded-l-none md:rounded-r"}
+						{id}
+						name="description"
+						placeholder="A brief description of your project..."
+						maxlength={140}
+						bind:value={description}
 					/>
-				</div>
-				{#if ownersLoading}<p
-						class="mt-2xs typography-paragraph-small text-foreground-muted"
-					>
-						Loading organizations…
-					</p>{/if}
-				<ErrorAlert label={ownersError ?? undefined} class="mt-xs" />
-				<p class="mt-2xs typography-paragraph-small text-foreground-muted">
-					Choose a unique, descriptive name. Use letters, numbers, periods, underscores,
-					and hyphens.
-				</p>
-			</div>
-
-			<div>
-				<label
-					for="repo_description"
-					class="mb-2xs block typography-paragraph-small font-bold text-foreground-default"
-				>
-					Description
-				</label>
-				<Input
-					id="repo_description"
-					name="description"
-					placeholder="A brief description of your project..."
-					maxlength={140}
-					bind:value={description}
-				/>
-				<p class="mt-2xs typography-paragraph-small text-foreground-muted">
-					{[...description].length}/140 characters
-				</p>
-			</div>
+				{/snippet}
+			</Field>
 		</div>
 	</FormStep>
 
 	<FormStep step={2} title="Configuration" description="Repository settings and hosting.">
 		<div class="space-y-md">
 			{#if showDefaultBranch}
-				<div>
-					<label
-						for="default_branch"
-						class="mb-2xs block typography-paragraph-small font-bold text-foreground-default"
-					>
-						Default branch
-					</label>
-					<Input id="default_branch" name="branch" bind:value={defaultBranch} required />
-					<p class="mt-2xs typography-paragraph-small text-foreground-muted">
-						The primary branch where development happens. Common choices are "main" or
-						"master".
-					</p>
-				</div>
+				<Field
+					label="Default branch"
+					subtitle="The primary branch where development happens. Common choices are &quot;main&quot; or &quot;master&quot;."
+				>
+					{#snippet children({ id })}
+						<Input {id} name="branch" bind:value={defaultBranch} required />
+					{/snippet}
+				</Field>
 			{/if}
 
-			<div>
-				<div class="mb-2xs typography-paragraph-small font-bold text-foreground-default">
-					Select a knot
-				</div>
+			<Field label="Select a knot" group>
 				<ServicePicker
 					kind="knot"
 					hosts={preferences.then((saved) => makeKnotList(saved.knots))}
@@ -314,36 +299,37 @@
 					bind:address={knotAddress}
 					bind:remember={rememberKnot}
 				/>
-				<p class="mt-xs typography-paragraph-small text-foreground-muted">
+				{#snippet subtitle()}
 					A knot hosts repository data and handles Git operations. You can also
 					<a href={resolve("/settings/knots")} class="underline">register your own knot</a
 					>.
-				</p>
-			</div>
+				{/snippet}
+			</Field>
 		</div>
 	</FormStep>
 
 	<FormStepDisclosure title="Advanced">
-		<div class="mb-2xs typography-paragraph-small font-bold text-foreground-default">
-			Select a spindle
-		</div>
-		<ServicePicker
-			kind="spindle"
-			hosts={preferences.then((saved) => makeSpindleList(saved.spindles))}
-			official={page.data.publicConfig?.primarySpindleHostname ?? ""}
-			none="No spindle"
-			bind:choice={spindleChoice}
-			bind:address={spindleAddress}
-			bind:remember={rememberSpindle}
-		/>
-		<p class="mt-xs typography-paragraph-small text-foreground-muted">
-			A spindle runs your CI workflows. You can also
-			<a href={resolve("/settings/spindles")} class="underline">register your own spindle</a>.
-		</p>
+		<Field label="Select a spindle" group>
+			<ServicePicker
+				kind="spindle"
+				hosts={preferences.then((saved) => makeSpindleList(saved.spindles))}
+				official={page.data.publicConfig?.primarySpindleHostname ?? ""}
+				none="No spindle"
+				bind:choice={spindleChoice}
+				bind:address={spindleAddress}
+				bind:remember={rememberSpindle}
+			/>
+			{#snippet subtitle()}
+				A spindle runs your CI workflows. You can also
+				<a href={resolve("/settings/spindles")} class="underline"
+					>register your own spindle</a
+				>.
+			{/snippet}
+		</Field>
 	</FormStepDisclosure>
 
-	<ErrorAlert label={action.error} class="mt-xl" />
-	<div class="mt-2xl flex justify-end">
+	<div class="mt-3xl flex flex-col items-end gap-md">
+		<ErrorAlert label={action.error} class="self-stretch" />
 		<Button
 			variant="primary"
 			type="submit"
-- 
2.51.2