From 9fd53bd6a02311d6f055748fca95dbb02a12d289 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 30 Jul 2026 18:30:32 +0200
Subject: [PATCH] web/settings: add the repository settings screens from the
 redesign

Completes the desktop half of the Settings Redesign Figma
(TFhrx7FBh2Ue5SGH8CUeBU) that the user-settings pass left out: General,
Access, Pipelines, Hooks and Sites, plus the rename, custom-label,
collaborator, secret and webhook drill-downs.

There was no repository settings surface in the rewrite at all, so this
adds the route tree under [handle]/[repo]/settings and a Settings tab on
RepoTabs. The tab is unconditional for now -- gating it needs the
viewer's push access, which the repo layout load doesn't resolve yet.

The sidebar card, drill-down shell and row primitives are reused from
the user settings. Three of them grew to cover patterns that only appear
on the repo pages: SettingsList's gap is now named in spacing units
because the designs use all of 8/12/16px, SettingsRow takes a muted
description, and SettingsBlock is the new title+description+action
header that Access and Pipelines put above each card. Multi-line copy is
passed as an array of lines rather than a string with escapes, which
reads better and keeps the templates free of useless mustaches.

SettingsEmpty replaces EmptyState inside settings: Figma's empty state
there is a single 52px row, not the tall italic box the rest of the app
uses. SettingsSaveBar factors out the Reset / "Unsaved changes" / Save
trio now that General, Sites and Profile all carry it.

Verified light and dark against the Figma renders; navigation, card and
surface tokens plus nav width and heading size all match.

Refs TAN-575.

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/repo/RepoTabs.svelte   |   6 +-
 .../lib/components/settings/DrillDown.svelte  |  13 +-
 .../lib/components/settings/FormRow.svelte    |  40 +++-
 .../components/settings/SettingsBlock.svelte  |  60 ++++++
 .../components/settings/SettingsEmpty.svelte  |  15 ++
 .../components/settings/SettingsList.svelte   |  12 +-
 .../components/settings/SettingsRow.svelte    |  38 +++-
 .../settings/SettingsSaveBar.svelte           |  23 +++
 .../settings/SettingsSection.svelte           |  15 +-
 .../components/settings/tabs/EmailsTab.svelte |   4 +-
 .../components/settings/tabs/KeysTab.svelte   |   4 +-
 .../components/settings/tabs/KnotsTab.svelte  |   4 +-
 .../settings/tabs/ProfileTab.svelte           |  17 +-
 .../components/settings/tabs/SitesTab.svelte  |   4 +-
 .../settings/tabs/SpindlesTab.svelte          |   4 +-
 .../[handle]/[repo]/settings/+layout.svelte   |  36 ++++
 .../[handle]/[repo]/settings/+page.svelte     | 177 ++++++++++++++++++
 .../[repo]/settings/access/+page.svelte       |  69 +++++++
 .../[repo]/settings/access/new/+page.svelte   |  40 ++++
 .../[repo]/settings/hooks/+page.svelte        |  97 ++++++++++
 .../[repo]/settings/hooks/new/+page.svelte    |  81 ++++++++
 .../[repo]/settings/labels/new/+page.svelte   |  91 +++++++++
 .../[repo]/settings/pipelines/+page.svelte    |  96 ++++++++++
 .../pipelines/secrets/new/+page.svelte        |  44 +++++
 .../[repo]/settings/rename/+page.svelte       |  78 ++++++++
 .../[repo]/settings/sites/+page.svelte        | 140 ++++++++++++++
 26 files changed, 1155 insertions(+), 53 deletions(-)
 create mode 100644 web/src/lib/components/settings/SettingsBlock.svelte
 create mode 100644 web/src/lib/components/settings/SettingsEmpty.svelte
 create mode 100644 web/src/lib/components/settings/SettingsSaveBar.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/settings/+layout.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/settings/+page.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/settings/access/+page.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/settings/access/new/+page.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/settings/pipelines/secrets/new/+page.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/settings/sites/+page.svelte

diff --git a/web/src/lib/components/repo/RepoTabs.svelte b/web/src/lib/components/repo/RepoTabs.svelte
index 0e927d0b..4483be61 100644
--- a/web/src/lib/components/repo/RepoTabs.svelte
+++ b/web/src/lib/components/repo/RepoTabs.svelte
@@ -3,6 +3,7 @@
 	import CircleDot from "$icon/circle-dot";
 	import GitPullRequest from "$icon/git-pull-request";
 	import Layers2 from "$icon/layers-2";
+	import Settings from "$icon/settings";
 	import Tabs, { type TabDef } from "$lib/components/ui/Tabs.svelte";
 	import type { RepoCounts, RepoInfo } from "./types";
 
@@ -32,7 +33,10 @@
 			count: counts.pulls,
 			href: `${base}/pulls`
 		},
-		{ id: "pipelines", label: "Pipelines", icon: Layers2, href: `${base}/pipelines` }
+		{ id: "pipelines", label: "Pipelines", icon: Layers2, href: `${base}/pipelines` },
+		// todo: only show this to collaborators — needs the viewer's push access on
+		// RepoInfo, which the layout load doesn't resolve yet
+		{ id: "settings", label: "Settings", icon: Settings, href: `${base}/settings` }
 	]);
 </script>
 
diff --git a/web/src/lib/components/settings/DrillDown.svelte b/web/src/lib/components/settings/DrillDown.svelte
index f1ba0981..35694911 100644
--- a/web/src/lib/components/settings/DrillDown.svelte
+++ b/web/src/lib/components/settings/DrillDown.svelte
@@ -8,11 +8,16 @@
 		backLabel: string;
 		backHref: string;
 		title: string;
-		description?: string;
+		/** pass an array to get one line each */
+		description?: string | string[];
 		children: Snippet;
 	}
 
 	let { backLabel, backHref, title, description, children }: Props = $props();
+
+	const lines = $derived(
+		description === undefined ? [] : Array.isArray(description) ? description : [description]
+	);
 </script>
 
 <!-- Drill-downs are in-place content swaps: the sidebar stays put and the parent
@@ -30,9 +35,9 @@
 <div class="flex w-full flex-col gap-4">
 	<div class="flex flex-col gap-1">
 		<h1 class="typography-paragraph-large text-foreground-default">{title}</h1>
-		{#if description}
-			<p class="typography-paragraph-regular text-foreground-muted">{description}</p>
-		{/if}
+		{#each lines as line (line)}
+			<p class="typography-paragraph-regular text-foreground-muted">{line}</p>
+		{/each}
 	</div>
 	{@render children()}
 </div>
diff --git a/web/src/lib/components/settings/FormRow.svelte b/web/src/lib/components/settings/FormRow.svelte
index fe45aa35..98f651d6 100644
--- a/web/src/lib/components/settings/FormRow.svelte
+++ b/web/src/lib/components/settings/FormRow.svelte
@@ -3,22 +3,46 @@
 
 	interface Props {
 		label: string;
-		/** helper line under the label, e.g. "Confirm your identity to proceed." */
-		description?: string;
+		/** renders a muted "(optional)" after the label, as on the webhook secret */
+		optional?: boolean;
+		/** helper copy under the label; pass an array to get one line each */
+		description?: string | string[];
 		for?: string;
+		/** top-align the control when it is taller than the label, e.g. a checkbox list */
+		align?: "center" | "start";
 		/** the control — Figma sizes these to 320px on the right of the row */
 		children: Snippet;
 	}
 
-	let { label, description, for: forId, children }: Props = $props();
+	let {
+		label,
+		optional = false,
+		description,
+		for: forId,
+		align = "center",
+		children
+	}: Props = $props();
+
+	const lines = $derived(
+		description === undefined ? [] : Array.isArray(description) ? description : [description]
+	);
 </script>
 
-<div class="flex min-h-8 w-full flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+<div
+	class="flex min-h-8 w-full flex-col gap-2 sm:flex-row sm:justify-between {align === 'start'
+		? 'sm:items-start'
+		: 'sm:items-center'}"
+>
 	<div class="flex min-w-0 flex-col">
-		<label class="typography-paragraph-regular text-foreground-default" for={forId}>{label}</label>
-		{#if description}
-			<span class="typography-paragraph-regular text-foreground-muted">{description}</span>
-		{/if}
+		<label class="typography-paragraph-regular text-foreground-default" for={forId}>
+			{label}
+			{#if optional}
+				<span class="text-foreground-muted">(optional)</span>
+			{/if}
+		</label>
+		{#each lines as line (line)}
+			<span class="typography-paragraph-regular text-foreground-muted">{line}</span>
+		{/each}
 	</div>
 	<div class="w-full shrink-0 sm:w-80">{@render children()}</div>
 </div>
diff --git a/web/src/lib/components/settings/SettingsBlock.svelte b/web/src/lib/components/settings/SettingsBlock.svelte
new file mode 100644
index 00000000..8fd02395
--- /dev/null
+++ b/web/src/lib/components/settings/SettingsBlock.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		/** Figma uses 16px on General's label blocks and 14px on Access/Pipelines */
+		title?: string;
+		titleSize?: "regular" | "large";
+		/** muted copy under the title; pass an array to get one line each */
+		description?: string | string[];
+		/** trailing action, bottom-aligned against the description */
+		action?: Snippet;
+		/** the hairline between the header and the content */
+		separator?: boolean;
+		children?: Snippet;
+	}
+
+	let {
+		title,
+		titleSize = "regular",
+		description,
+		action,
+		separator = false,
+		children
+	}: Props = $props();
+
+	const lines = $derived(
+		description === undefined ? [] : Array.isArray(description) ? description : [description]
+	);
+</script>
+
+<div class="flex w-full flex-col gap-4">
+	{#if title || lines.length > 0 || action}
+		<!-- the action sits on the last line of the description, not its middle -->
+		<div class="flex w-full items-end justify-between gap-16">
+			<div class="flex min-w-0 flex-col">
+				{#if title}
+					<span
+						class="{titleSize === 'large'
+							? 'typography-paragraph-large'
+							: 'typography-paragraph-regular'} text-foreground-default"
+					>
+						{title}
+					</span>
+				{/if}
+				{#each lines as line (line)}
+					<p class="typography-paragraph-regular text-foreground-muted">{line}</p>
+				{/each}
+			</div>
+			{#if action}
+				<div class="flex shrink-0 items-center gap-2">{@render action()}</div>
+			{/if}
+		</div>
+	{/if}
+	{#if separator}
+		<hr class="w-full border-0 border-t border-border-default" />
+	{/if}
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
diff --git a/web/src/lib/components/settings/SettingsEmpty.svelte b/web/src/lib/components/settings/SettingsEmpty.svelte
new file mode 100644
index 00000000..910433b7
--- /dev/null
+++ b/web/src/lib/components/settings/SettingsEmpty.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	interface Props {
+		message: string;
+	}
+
+	let { message }: Props = $props();
+</script>
+
+<!-- the settings screens use a single-row card rather than the tall, italic
+     EmptyState the rest of the app uses -->
+<div
+	class="flex w-full items-center justify-center rounded-sm border border-border-default px-4 py-3 typography-paragraph-regular text-foreground-muted"
+>
+	{message}
+</div>
diff --git a/web/src/lib/components/settings/SettingsList.svelte b/web/src/lib/components/settings/SettingsList.svelte
index 270c02d9..6f72428e 100644
--- a/web/src/lib/components/settings/SettingsList.svelte
+++ b/web/src/lib/components/settings/SettingsList.svelte
@@ -6,10 +6,12 @@
 		variants: {
 			// Figma spaces rows with a gap and drops the hairline in the middle of it,
 			// so the divider is split evenly across the two rows it separates rather
-			// than sitting flush against one of them.
+			// than sitting flush against one of them. Named in Tailwind spacing units
+			// because the designs use all three of 8 / 12 / 16px.
 			gap: {
-				md: "[&>*+*]:mt-2 [&>*+*]:border-t [&>*+*]:border-border-default [&>*+*]:pt-2",
-				sm: "[&>*+*]:mt-1 [&>*+*]:border-t [&>*+*]:border-border-default [&>*+*]:pt-1"
+				"2": "[&>*+*]:mt-1 [&>*+*]:border-t [&>*+*]:border-border-default [&>*+*]:pt-1",
+				"3": "[&>*+*]:mt-1.5 [&>*+*]:border-t [&>*+*]:border-border-default [&>*+*]:pt-1.5",
+				"4": "[&>*+*]:mt-2 [&>*+*]:border-t [&>*+*]:border-border-default [&>*+*]:pt-2"
 			},
 			padding: {
 				default: "px-4 py-3",
@@ -17,7 +19,7 @@
 			}
 		},
 		defaultVariants: {
-			gap: "md",
+			gap: "4",
 			padding: "default"
 		}
 	});
@@ -35,7 +37,7 @@
 		children: Snippet;
 	}
 
-	let { gap = "md", padding = "default", class: className, children }: Props = $props();
+	let { gap = "4", padding = "default", class: className, children }: Props = $props();
 
 	const classes = $derived(settingsList({ gap, padding, class: className }));
 </script>
diff --git a/web/src/lib/components/settings/SettingsRow.svelte b/web/src/lib/components/settings/SettingsRow.svelte
index ee2e2b50..74bb6d9a 100644
--- a/web/src/lib/components/settings/SettingsRow.svelte
+++ b/web/src/lib/components/settings/SettingsRow.svelte
@@ -5,28 +5,52 @@
 	interface Props {
 		/** plain-text label — omit and render whatever you need through `label` */
 		title?: string;
+		/** muted explanation under the title; pass an array to get one line each */
+		description?: string | string[];
 		icon?: Component<SvelteHTMLElements["svg"]>;
 		/** replaces `title`/`icon` when the leading side is more than a label */
 		label?: Snippet;
 		/** trailing controls: buttons, toggles, code chips */
 		children?: Snippet;
+		/** top-align the control instead of centring it, for tall right-hand content */
+		align?: "center" | "start";
 		class?: string;
 	}
 
-	let { title, icon, label, children, class: className }: Props = $props();
+	let {
+		title,
+		description,
+		icon,
+		label,
+		children,
+		align = "center",
+		class: className
+	}: Props = $props();
 
 	const Glyph = $derived(icon);
+	const lines = $derived(
+		description === undefined ? [] : Array.isArray(description) ? description : [description]
+	);
 </script>
 
-<div class="flex min-h-8 w-full items-center justify-between gap-4 {className ?? ''}">
+<div
+	class="flex min-h-8 w-full justify-between gap-4 {align === 'start'
+		? 'items-start'
+		: 'items-center'} {className ?? ''}"
+>
 	{#if label}
 		{@render label()}
 	{:else}
-		<span class="flex min-w-0 items-center gap-2">
-			{#if Glyph}
-				<Glyph class="size-3.5 shrink-0 text-foreground-default" aria-hidden="true" />
-			{/if}
-			<span class="typography-paragraph-regular text-foreground-default">{title}</span>
+		<span class="flex min-w-0 flex-col">
+			<span class="flex items-center gap-2">
+				{#if Glyph}
+					<Glyph class="size-3.5 shrink-0 text-foreground-default" aria-hidden="true" />
+				{/if}
+				<span class="typography-paragraph-regular text-foreground-default">{title}</span>
+			</span>
+			{#each lines as line (line)}
+				<span class="typography-paragraph-regular text-foreground-muted">{line}</span>
+			{/each}
 		</span>
 	{/if}
 	{#if children}
diff --git a/web/src/lib/components/settings/SettingsSaveBar.svelte b/web/src/lib/components/settings/SettingsSaveBar.svelte
new file mode 100644
index 00000000..48c45a08
--- /dev/null
+++ b/web/src/lib/components/settings/SettingsSaveBar.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Button from "$lib/components/ui/Button.svelte";
+	import Save from "$icon/save";
+	import RotateCcw from "$icon/rotate-ccw";
+
+	interface Props {
+		dirty: boolean;
+		onreset?: () => void;
+		onsave?: () => void;
+	}
+
+	let { dirty, onreset, onsave }: Props = $props();
+</script>
+
+<!-- Figma keeps Save disabled until something changed, and only then reveals Reset
+     and the "Unsaved changes" note beside it -->
+<div class="flex shrink-0 items-center gap-4">
+	{#if dirty}
+		<Button icon={RotateCcw} onclick={onreset}>Reset</Button>
+		<span class="typography-paragraph-regular text-foreground-muted">Unsaved changes</span>
+	{/if}
+	<Button variant="primary" icon={Save} disabled={!dirty} onclick={onsave}>Save</Button>
+</div>
diff --git a/web/src/lib/components/settings/SettingsSection.svelte b/web/src/lib/components/settings/SettingsSection.svelte
index 84e17a4f..e51c4750 100644
--- a/web/src/lib/components/settings/SettingsSection.svelte
+++ b/web/src/lib/components/settings/SettingsSection.svelte
@@ -1,24 +1,31 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import SettingsList from "./SettingsList.svelte";
+	import type { SettingsListVariants } from "./SettingsList.svelte";
 
 	interface Props {
 		/** omit for the leading card, which Figma leaves unlabelled */
 		title?: string;
-		/** set false when the children provide their own container */
+		/** gap between the heading and its card — 12px on the user pages, 16 on repo */
+		headingGap?: "3" | "4";
+		/** row spacing inside the framed card */
+		rowGap?: SettingsListVariants["gap"];
+		/** set false when the children provide their own container(s) */
 		framed?: boolean;
 		children: Snippet;
 	}
 
-	let { title, framed = true, children }: Props = $props();
+	let { title, headingGap = "3", rowGap = "2", framed = true, children }: Props = $props();
+
+	const gapClass = $derived(headingGap === "4" ? "gap-4" : "gap-3");
 </script>
 
-<section class="flex w-full flex-col gap-3">
+<section class="flex w-full flex-col {gapClass}">
 	{#if title}
 		<h2 class="typography-heading-4 text-foreground-default">{title}</h2>
 	{/if}
 	{#if framed}
-		<SettingsList gap="sm">
+		<SettingsList gap={rowGap}>
 			{@render children()}
 		</SettingsList>
 	{:else}
diff --git a/web/src/lib/components/settings/tabs/EmailsTab.svelte b/web/src/lib/components/settings/tabs/EmailsTab.svelte
index 03931c8b..05adeb95 100644
--- a/web/src/lib/components/settings/tabs/EmailsTab.svelte
+++ b/web/src/lib/components/settings/tabs/EmailsTab.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Button from "$lib/components/ui/Button.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
-	import EmptyState from "$lib/components/ui/EmptyState.svelte";
+	import SettingsEmpty from "../SettingsEmpty.svelte";
 	import SettingsHeader from "../SettingsHeader.svelte";
 	import SettingsToolbar from "../SettingsToolbar.svelte";
 	import SettingsList from "../SettingsList.svelte";
@@ -60,7 +60,7 @@
 	</SettingsToolbar>
 
 	{#if emails.length === 0}
-		<EmptyState message="No emails added yet" />
+		<SettingsEmpty message="No emails added yet" />
 	{:else}
 		<SettingsList>
 			{#each emails as email (email.id)}
diff --git a/web/src/lib/components/settings/tabs/KeysTab.svelte b/web/src/lib/components/settings/tabs/KeysTab.svelte
index 75228950..0fc31f04 100644
--- a/web/src/lib/components/settings/tabs/KeysTab.svelte
+++ b/web/src/lib/components/settings/tabs/KeysTab.svelte
@@ -10,7 +10,7 @@
 	import Button from "$lib/components/ui/Button.svelte";
 	import Spinner from "$lib/components/ui/Spinner.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
-	import EmptyState from "$lib/components/ui/EmptyState.svelte";
+	import SettingsEmpty from "../SettingsEmpty.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import SettingsHeader from "../SettingsHeader.svelte";
 	import SettingsToolbar from "../SettingsToolbar.svelte";
@@ -107,7 +107,7 @@
 			<Spinner /> Loading…
 		</div>
 	{:else if keys.length === 0}
-		<EmptyState message="No keys added yet" />
+		<SettingsEmpty message="No keys added yet" />
 	{:else}
 		<SettingsList>
 			{#each keys as k (k.rkey)}
diff --git a/web/src/lib/components/settings/tabs/KnotsTab.svelte b/web/src/lib/components/settings/tabs/KnotsTab.svelte
index 0ffb56f6..3a192ddf 100644
--- a/web/src/lib/components/settings/tabs/KnotsTab.svelte
+++ b/web/src/lib/components/settings/tabs/KnotsTab.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Button from "$lib/components/ui/Button.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
-	import EmptyState from "$lib/components/ui/EmptyState.svelte";
+	import SettingsEmpty from "../SettingsEmpty.svelte";
 	import SettingsHeader from "../SettingsHeader.svelte";
 	import SettingsToolbar from "../SettingsToolbar.svelte";
 	import SettingsList from "../SettingsList.svelte";
@@ -52,7 +52,7 @@
 	</SettingsToolbar>
 
 	{#if knots.length === 0}
-		<EmptyState message="No knots registered yet" />
+		<SettingsEmpty message="No knots registered yet" />
 	{:else}
 		<SettingsList>
 			{#each knots as knot (knot.id)}
diff --git a/web/src/lib/components/settings/tabs/ProfileTab.svelte b/web/src/lib/components/settings/tabs/ProfileTab.svelte
index 296ec69f..e9061f2c 100644
--- a/web/src/lib/components/settings/tabs/ProfileTab.svelte
+++ b/web/src/lib/components/settings/tabs/ProfileTab.svelte
@@ -9,11 +9,10 @@
 	import Toggle from "$lib/components/ui/Toggle.svelte";
 	import SettingsSection from "../SettingsSection.svelte";
 	import SettingsRow from "../SettingsRow.svelte";
+	import SettingsSaveBar from "../SettingsSaveBar.svelte";
 	import CodeChip from "../CodeChip.svelte";
 	import ThemePicker from "../ThemePicker.svelte";
 	import Pencil from "$icon/pencil";
-	import Save from "$icon/save";
-	import RotateCcw from "$icon/rotate-ccw";
 	import Key from "$icon/key";
 	import Pause from "$icon/pause";
 	import Trash from "$icon/trash-2";
@@ -63,19 +62,9 @@
 	const STATS = ["Repositories", "Followers", "Stars", "Pull requests", "Issues"];
 </script>
 
-{#snippet actions()}
-	<div class="flex items-center gap-4">
-		{#if dirty}
-			<Button icon={RotateCcw} onclick={reset}>Reset</Button>
-			<span class="typography-paragraph-regular text-foreground-muted">Unsaved changes</span>
-		{/if}
-		<Button variant="primary" icon={Save} disabled={!dirty}>Save</Button>
-	</div>
-{/snippet}
-
 <div class="flex min-h-9 w-full items-center justify-between gap-4">
 	<h1 class="typography-heading-2 text-foreground-default">Profile</h1>
-	{@render actions()}
+	<SettingsSaveBar {dirty} onreset={reset} />
 </div>
 
 <div class="flex w-full flex-col gap-10">
@@ -163,5 +152,5 @@
 </div>
 
 <div class="flex w-full justify-end">
-	{@render actions()}
+	<SettingsSaveBar {dirty} onreset={reset} />
 </div>
diff --git a/web/src/lib/components/settings/tabs/SitesTab.svelte b/web/src/lib/components/settings/tabs/SitesTab.svelte
index c8a554ce..a87588b7 100644
--- a/web/src/lib/components/settings/tabs/SitesTab.svelte
+++ b/web/src/lib/components/settings/tabs/SitesTab.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Button from "$lib/components/ui/Button.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
-	import EmptyState from "$lib/components/ui/EmptyState.svelte";
+	import SettingsEmpty from "../SettingsEmpty.svelte";
 	import SettingsHeader from "../SettingsHeader.svelte";
 	import SettingsToolbar from "../SettingsToolbar.svelte";
 	import SettingsList from "../SettingsList.svelte";
@@ -38,7 +38,7 @@
 	</SettingsToolbar>
 
 	{#if sites.length === 0}
-		<EmptyState message="No sites claimed yet" />
+		<SettingsEmpty message="No sites claimed yet" />
 	{:else}
 		<SettingsList>
 			{#each sites as site (site.id)}
diff --git a/web/src/lib/components/settings/tabs/SpindlesTab.svelte b/web/src/lib/components/settings/tabs/SpindlesTab.svelte
index 8c56bb0b..279f636f 100644
--- a/web/src/lib/components/settings/tabs/SpindlesTab.svelte
+++ b/web/src/lib/components/settings/tabs/SpindlesTab.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Button from "$lib/components/ui/Button.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
-	import EmptyState from "$lib/components/ui/EmptyState.svelte";
+	import SettingsEmpty from "../SettingsEmpty.svelte";
 	import SettingsHeader from "../SettingsHeader.svelte";
 	import SettingsToolbar from "../SettingsToolbar.svelte";
 	import SettingsList from "../SettingsList.svelte";
@@ -49,7 +49,7 @@
 	</SettingsToolbar>
 
 	{#if spindles.length === 0}
-		<EmptyState message="No spindles registered yet" />
+		<SettingsEmpty message="No spindles registered yet" />
 	{:else}
 		<SettingsList>
 			{#each spindles as spindle (spindle.id)}
diff --git a/web/src/routes/[handle]/[repo]/settings/+layout.svelte b/web/src/routes/[handle]/[repo]/settings/+layout.svelte
new file mode 100644
index 00000000..979bf018
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/+layout.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { page } from "$app/state";
+	import SettingsNav, { type SettingsNavItem } from "$lib/components/settings/SettingsNav.svelte";
+	import SlidersHorizontal from "$icon/sliders-horizontal";
+	import UsersRound from "$icon/users-round";
+	import Layers from "$icon/layers";
+	import Webhook from "$icon/webhook";
+	import Globe from "$icon/globe";
+
+	let { children, data } = $props();
+
+	const base = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);
+
+	const items = $derived<SettingsNavItem[]>([
+		{ id: "general", label: "General", href: base, icon: SlidersHorizontal },
+		{ id: "access", label: "Access", href: `${base}/access`, icon: UsersRound },
+		{ id: "pipelines", label: "Pipelines", href: `${base}/pipelines`, icon: Layers },
+		{ id: "hooks", label: "Hooks", href: `${base}/hooks`, icon: Webhook },
+		{ id: "sites", label: "Sites", href: `${base}/sites`, icon: Globe }
+	]);
+
+	// route ids look like /[handle]/[repo]/settings/<tab>/…, and a drill-down keeps
+	// its parent tab active, so only the segment right after `settings` matters
+	const segment = $derived(page.route.id?.split("/")[4] ?? "");
+	const active = $derived(items.some((i) => i.id === segment) ? segment : "general");
+</script>
+
+<div
+	class="flex min-h-[600px] w-full flex-col items-stretch gap-4 overflow-hidden rounded-sm border border-border-default bg-background-default md:flex-row md:items-start"
+>
+	<SettingsNav {items} {active} label="Repository settings" />
+
+	<div class="flex min-w-0 flex-1 flex-col gap-8 px-4 py-6">
+		{@render children()}
+	</div>
+</div>
diff --git a/web/src/routes/[handle]/[repo]/settings/+page.svelte b/web/src/routes/[handle]/[repo]/settings/+page.svelte
new file mode 100644
index 00000000..008ce5ef
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/+page.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+	import { untrack } from "svelte";
+	import { resolve } from "$app/paths";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
+	import Select from "$lib/components/ui/Select.svelte";
+	import Toggle from "$lib/components/ui/Toggle.svelte";
+	import SettingsEmpty from "$lib/components/settings/SettingsEmpty.svelte";
+	import SettingsSection from "$lib/components/settings/SettingsSection.svelte";
+	import SettingsBlock from "$lib/components/settings/SettingsBlock.svelte";
+	import SettingsList from "$lib/components/settings/SettingsList.svelte";
+	import SettingsRow from "$lib/components/settings/SettingsRow.svelte";
+	import SettingsSaveBar from "$lib/components/settings/SettingsSaveBar.svelte";
+	import Plus from "$icon/plus";
+	import X from "$icon/x";
+	import Pencil from "$icon/pencil";
+	import Trash from "$icon/trash-2";
+
+	let { data } = $props();
+
+	const base = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);
+	const path = (p: string) => resolve(p as "/");
+
+	// mocked — repo settings have no write path in the rewrite yet, so the form is
+	// seeded from the repo once rather than tracking it
+	const initial = {
+		description: "",
+		website: "",
+		topics: "",
+		defaultBranch: untrack(() => data.repo.defaultBranch)
+	};
+	let form = $state({ ...initial });
+	const dirty = $derived(JSON.stringify(form) !== JSON.stringify(initial));
+	const reset = () => (form = { ...initial });
+
+	let labels = $state([
+		{
+			name: "documentation",
+			color: "#06b6d4",
+			meta: "Basic · sh.tangled.repo.issue",
+			subscribed: true
+		},
+		{
+			name: "duplicate",
+			color: "#ef4444",
+			meta: "Basic · sh.tangled.repo.issue",
+			subscribed: true
+		},
+		{
+			name: "good-first-issue",
+			color: "#8b5cf6",
+			meta: "Basic · sh.tangled.repo.issue",
+			subscribed: true
+		},
+		{ name: "wontfix", color: "#3b82f6", meta: "Basic · sh.tangled.repo.issue", subscribed: true },
+		{
+			name: "assignee",
+			color: "#10b981",
+			meta: "string type · DID format · Multiple · sh.tangled.repo.issue, sh.tangled.repo.pull",
+			subscribed: true
+		}
+	]);
+
+	const unsubscribeAll = () => {
+		labels = labels.map((l) => ({ ...l, subscribed: false }));
+	};
+
+	const branches = $derived([data.repo.defaultBranch, "develop", "trunk"]);
+</script>
+
+<div class="flex min-h-9 w-full items-center justify-between gap-4">
+	<h1 class="typography-heading-2 text-foreground-default">General</h1>
+	<SettingsSaveBar {dirty} onreset={reset} />
+</div>
+
+<div class="flex w-full flex-col gap-10">
+	<!-- the leading pair of cards carries no heading in the design -->
+	<div class="flex w-full flex-col gap-4">
+		<SettingsList gap="3">
+			<SettingsRow title="Description">
+				<Input
+					bind:value={form.description}
+					placeholder="What this project is about"
+					class="w-80"
+				/>
+			</SettingsRow>
+			<SettingsRow title="Website">
+				<Input bind:value={form.website} placeholder="URL" class="w-80" />
+			</SettingsRow>
+			<SettingsRow title="Topics" description="List of topics separated by spaces.">
+				<Input bind:value={form.topics} placeholder="infra, social, decentralized" class="w-80" />
+			</SettingsRow>
+		</SettingsList>
+
+		<SettingsList gap="3">
+			<SettingsRow
+				title="Default branch"
+				description={[
+					'The default branch is considered the "base" branch in your repository, against which all pull requests and code commits are automatically made, unless you specify a different branch.'
+				]}
+			>
+				<Select bind:value={form.defaultBranch} aria-label="Default branch" class="w-80">
+					{#each branches as branch (branch)}
+						<option value={branch}>{branch}</option>
+					{/each}
+				</Select>
+			</SettingsRow>
+		</SettingsList>
+	</div>
+
+	<SettingsSection title="Labels" framed={false} headingGap="4">
+		<div class="flex w-full flex-col gap-4">
+			<SettingsBlock
+				title="Default labels"
+				titleSize="large"
+				description={[
+					"Manage your issues and pulls by creating labels to categorize them. Only repository owners may configure labels.",
+					"You may choose to subscribe to default labels, or create entirely custom labels."
+				]}
+			>
+				{#snippet action()}
+					<Button icon={X} onclick={unsubscribeAll}>Unsubscribe all</Button>
+				{/snippet}
+
+				<SettingsList gap="3">
+					{#each labels as item (item.name)}
+						<SettingsRow>
+							{#snippet label()}
+								<span class="flex min-w-0 flex-col gap-1">
+									<span class="flex items-center gap-2">
+										<span
+											class="size-2 shrink-0 rounded-full"
+											style="background-color: {item.color}"
+											aria-hidden="true"
+										></span>
+										<span class="typography-paragraph-regular text-foreground-default">
+											{item.name}
+										</span>
+									</span>
+									<span class="typography-paragraph-regular text-foreground-muted">
+										{item.meta}
+									</span>
+								</span>
+							{/snippet}
+							<Toggle bind:checked={item.subscribed} aria-label={item.name} />
+						</SettingsRow>
+					{/each}
+				</SettingsList>
+			</SettingsBlock>
+
+			<SettingsBlock title="Custom labels" titleSize="large">
+				{#snippet action()}
+					<Button icon={Plus} href={path(`${base}/labels/new`)}>Add custom label</Button>
+				{/snippet}
+				<SettingsEmpty message="No custom labels added yet" />
+			</SettingsBlock>
+		</div>
+	</SettingsSection>
+
+	<hr class="w-full border-0 border-t border-border-default" />
+
+	<SettingsSection title="Danger zone" headingGap="4" rowGap="3">
+		<SettingsRow title="Rename">
+			<Button icon={Pencil} href={path(`${base}/rename`)}>Rename repository</Button>
+		</SettingsRow>
+		<SettingsRow
+			title="Delete"
+			description="Deleting a repository is irreversible and permanent. Be certain before deleting a repository."
+		>
+			<Button variant="danger" icon={Trash}>Delete repository</Button>
+		</SettingsRow>
+	</SettingsSection>
+</div>
+
+<div class="flex w-full justify-end">
+	<SettingsSaveBar {dirty} onreset={reset} />
+</div>
diff --git a/web/src/routes/[handle]/[repo]/settings/access/+page.svelte b/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
new file mode 100644
index 00000000..90a42a42
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { untrack } from "svelte";
+	import { resolve } from "$app/paths";
+	import Avatar from "$lib/components/ui/Avatar.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import SettingsBlock from "$lib/components/settings/SettingsBlock.svelte";
+	import SettingsList from "$lib/components/settings/SettingsList.svelte";
+	import SettingsRow from "$lib/components/settings/SettingsRow.svelte";
+	import UserRoundPlus from "$icon/user-round-plus";
+	import UserRoundMinus from "$icon/user-round-minus";
+
+	let { data } = $props();
+
+	const base = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);
+	const path = (p: string) => resolve(p as "/");
+
+	// mocked — collaborator management is not wired up yet
+	let collaborators = $state([
+		{
+			handle: untrack(() => data.repo.ownerHandle),
+			did: untrack(() => data.repo.ownerDid),
+			role: "Owner",
+			owner: true
+		},
+		{ handle: "user2.tld", did: undefined, role: "Collaborator", owner: false }
+	]);
+
+	const remove = (handle: string) => {
+		collaborators = collaborators.filter((c) => c.handle !== handle);
+	};
+</script>
+
+<div class="flex min-h-8 w-full items-center gap-4">
+	<h1 class="typography-heading-2 text-foreground-default">Access</h1>
+</div>
+
+<SettingsBlock
+	title="Collaborators"
+	description={[
+		"Any user added as a collaborator will be able to push commits and tags to this repository,",
+		"upload releases, and workflows."
+	]}
+	separator
+>
+	{#snippet action()}
+		<Button icon={UserRoundPlus} href={path(`${base}/access/new`)}>Add collaborator</Button>
+	{/snippet}
+
+	<SettingsList gap="3">
+		{#each collaborators as person (person.handle)}
+			<SettingsRow>
+				{#snippet label()}
+					<span class="flex min-w-0 items-center gap-2">
+						<Avatar did={person.did} handle={person.handle} size="size-5" />
+						<span class="typography-paragraph-regular text-foreground-default">
+							{person.handle}
+						</span>
+						<span class="typography-paragraph-regular text-foreground-muted">{person.role}</span>
+					</span>
+				{/snippet}
+				{#if !person.owner}
+					<Button icon={UserRoundMinus} onclick={() => remove(person.handle)}>
+						Remove collaborator
+					</Button>
+				{/if}
+			</SettingsRow>
+		{/each}
+	</SettingsList>
+</SettingsBlock>
diff --git a/web/src/routes/[handle]/[repo]/settings/access/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/access/new/+page.svelte
new file mode 100644
index 00000000..38e07bdc
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/access/new/+page.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { resolve } from "$app/paths";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
+	import DrillDown from "$lib/components/settings/DrillDown.svelte";
+	import SettingsList from "$lib/components/settings/SettingsList.svelte";
+	import FormRow from "$lib/components/settings/FormRow.svelte";
+	import FormActions from "$lib/components/settings/FormActions.svelte";
+	import Plus from "$icon/plus";
+	import X from "$icon/x";
+
+	let { data } = $props();
+
+	const back = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings/access`);
+
+	let user = $state("");
+	const valid = $derived(user.trim().length > 0);
+
+	// mocked — collaborator management is not wired up yet
+	const submit = () => goto(resolve(back as "/"));
+</script>
+
+<DrillDown
+	backLabel="Access"
+	backHref={back}
+	title="Add collaborator"
+	description="Collaborators can push to this repository."
+>
+	<SettingsList padding="tight">
+		<FormRow label="User" for="collaborator">
+			<Input id="collaborator" bind:value={user} placeholder="user.tngl.sh" />
+		</FormRow>
+	</SettingsList>
+
+	<FormActions>
+		<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
+		<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
+	</FormActions>
+</DrillDown>
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
new file mode 100644
index 00000000..af0dfd29
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { untrack } from "svelte";
+	import { resolve } from "$app/paths";
+	import Avatar from "$lib/components/ui/Avatar.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Toggle from "$lib/components/ui/Toggle.svelte";
+	import SettingsEmpty from "$lib/components/settings/SettingsEmpty.svelte";
+	import SettingsBlock from "$lib/components/settings/SettingsBlock.svelte";
+	import SettingsList from "$lib/components/settings/SettingsList.svelte";
+	import CodeChip from "$lib/components/settings/CodeChip.svelte";
+	import Plus from "$icon/plus";
+	import Eye from "$icon/eye";
+	import Pencil from "$icon/pencil";
+	import Trash from "$icon/trash-2";
+	import Inbox from "$icon/inbox";
+
+	let { data } = $props();
+
+	const base = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);
+	const path = (p: string) => resolve(p as "/");
+
+	// mocked — webhooks are not wired up yet
+	let hooks = $state([
+		{
+			id: "1",
+			url: "https://hooks.user.tld/tg/repository-cs-hk",
+			events: "push, pull_request:created, pull_request:closed",
+			added: "Added 2 mins ago by",
+			by: untrack(() => data.repo.ownerHandle),
+			enabled: true
+		},
+		{
+			id: "2",
+			url: "https://hooks.user.tld/tg/repository",
+			events: "push, pull_request:created, pull_request:closed",
+			added: "Added 5 hours ago by",
+			by: untrack(() => data.repo.ownerHandle),
+			enabled: false
+		}
+	]);
+
+	const remove = (id: string) => {
+		hooks = hooks.filter((h) => h.id !== id);
+	};
+</script>
+
+<div class="flex min-h-8 w-full items-center gap-4">
+	<h1 class="typography-heading-2 text-foreground-default">Hooks</h1>
+</div>
+
+<SettingsBlock
+	description={[
+		"Webhooks allow external services to be notified when certain events happen.",
+		"When the specified events happen, we'll send a POST request to each of the URLs you provide."
+	]}
+>
+	{#snippet action()}
+		<Button icon={Plus} href={path(`${base}/hooks/new`)}>New webhook</Button>
+	{/snippet}
+
+	{#if hooks.length === 0}
+		<SettingsEmpty message="No webhooks yet" />
+	{:else}
+		<SettingsList gap="3">
+			{#each hooks as hook (hook.id)}
+				<!-- the toggle rides the top-right corner while the actions sit under it,
+				     so this row is a two-column block rather than a SettingsRow -->
+				<div class="flex w-full items-start justify-between gap-4">
+					<div class="flex min-w-0 flex-col gap-1">
+						<CodeChip class="w-fit break-all">{hook.url}</CodeChip>
+						<span
+							class="flex items-center gap-1.5 typography-paragraph-regular text-foreground-muted"
+						>
+							<Eye class="size-3.5 shrink-0" aria-hidden="true" />
+							{hook.events}
+						</span>
+						<span
+							class="flex items-center gap-1.5 typography-paragraph-regular text-foreground-muted"
+						>
+							{hook.added}
+							<Avatar handle={hook.by} size="size-4" />
+							{hook.by}
+						</span>
+					</div>
+					<div class="flex shrink-0 flex-col items-end gap-4">
+						<Toggle bind:checked={hook.enabled} aria-label="Enable {hook.url}" />
+						<div class="flex items-center gap-2">
+							<Button icon={Inbox}>Deliveries</Button>
+							<Button icon={Pencil}>Edit</Button>
+							<Button variant="danger" icon={Trash} onclick={() => remove(hook.id)}>Delete</Button>
+						</div>
+					</div>
+				</div>
+			{/each}
+		</SettingsList>
+	{/if}
+</SettingsBlock>
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte
new file mode 100644
index 00000000..3e95e147
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { resolve } from "$app/paths";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
+	import Checkbox from "$lib/components/ui/Checkbox.svelte";
+	import DrillDown from "$lib/components/settings/DrillDown.svelte";
+	import SettingsList from "$lib/components/settings/SettingsList.svelte";
+	import FormRow from "$lib/components/settings/FormRow.svelte";
+	import FormActions from "$lib/components/settings/FormActions.svelte";
+	import Plus from "$icon/plus";
+	import X from "$icon/x";
+
+	let { data } = $props();
+
+	const back = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings/hooks`);
+
+	let url = $state("");
+	let secret = $state("");
+	// mocked — webhooks are not wired up yet. Push is preselected, as in the design.
+	let events = $state<Record<string, boolean>>({
+		push: true,
+		renamed: false,
+		opened: false,
+		resubmitted: false,
+		merged: false,
+		closed: false,
+		reopened: false
+	});
+
+	const EVENTS: { id: string; label: string }[] = [
+		{ id: "push", label: "Push events" },
+		{ id: "renamed", label: "Repository renamed" },
+		{ id: "opened", label: "Pull request opened" },
+		{ id: "resubmitted", label: "Pull request resubmitted" },
+		{ id: "merged", label: "Pull request merged" },
+		{ id: "closed", label: "Pull request closed" },
+		{ id: "reopened", label: "Pull request reopened" }
+	];
+
+	const valid = $derived(url.trim().length > 0 && Object.values(events).some(Boolean));
+	const submit = () => goto(resolve(back as "/"));
+</script>
+
+<DrillDown backLabel="Hooks" backHref={back} title="New webhook">
+	<SettingsList padding="tight">
+		<FormRow
+			label="Payload URL"
+			description="The URL that will receive the webhook POST requests."
+			for="hook-url"
+		>
+			<Input id="hook-url" bind:value={url} placeholder="https://example.com/webhook" />
+		</FormRow>
+
+		<FormRow
+			label="Secret"
+			optional
+			description="If provided, webhook payloads will be signed with HMAC-SHA256. Leave blank to send unsigned webhooks."
+			for="hook-secret"
+		>
+			<Input id="hook-secret" bind:value={secret} placeholder="A secret for signed webhooks" />
+		</FormRow>
+
+		<FormRow
+			label="Events"
+			description="Additional event types (issues) will be available in future updates."
+			align="start"
+		>
+			<div class="flex flex-col gap-1">
+				{#each EVENTS as event (event.id)}
+					<Checkbox bind:checked={events[event.id]}>{event.label}</Checkbox>
+				{/each}
+			</div>
+		</FormRow>
+	</SettingsList>
+
+	<FormActions>
+		<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
+		<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
+	</FormActions>
+</DrillDown>
diff --git a/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
new file mode 100644
index 00000000..cccdeccc
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { resolve } from "$app/paths";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
+	import Radio from "$lib/components/ui/Radio.svelte";
+	import Checkbox from "$lib/components/ui/Checkbox.svelte";
+	import DrillDown from "$lib/components/settings/DrillDown.svelte";
+	import SettingsList from "$lib/components/settings/SettingsList.svelte";
+	import FormRow from "$lib/components/settings/FormRow.svelte";
+	import FormActions from "$lib/components/settings/FormActions.svelte";
+	import Plus from "$icon/plus";
+	import X from "$icon/x";
+
+	let { data } = $props();
+
+	const back = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);
+
+	// the eight swatches from the design
+	const COLORS = [
+		"#ef4444",
+		"#3b82f6",
+		"#22c55e",
+		"#f59e0b",
+		"#8b5cf6",
+		"#ec4899",
+		"#06b6d4",
+		"#6b7280"
+	];
+
+	// mocked — custom labels are not wired up yet
+	let type = $state<"basic" | "key-value">("basic");
+	let name = $state("");
+	let scopeIssues = $state(true);
+	let scopePulls = $state(true);
+	let color = $state(COLORS[0]);
+
+	const valid = $derived(name.trim().length > 0 && (scopeIssues || scopePulls));
+	const submit = () => goto(resolve(back as "/"));
+</script>
+
+<DrillDown backLabel="General" backHref={back} title="Add custom label">
+	<SettingsList padding="tight">
+		<FormRow
+			label="Label type"
+			description={[
+				"Basic labels can have a name and a color.",
+				"Key-value labels are more detailed, they can have a key and an associated value.",
+				"You may define additional constraints on label values."
+			]}
+		>
+			<div class="flex items-center gap-6">
+				<Radio value="basic" bind:group={type} name="label-type">Basic</Radio>
+				<Radio value="key-value" bind:group={type} name="label-type">Key-value</Radio>
+			</div>
+		</FormRow>
+
+		<FormRow label="Name" for="label-name">
+			<Input id="label-name" bind:value={name} placeholder="improvement" />
+		</FormRow>
+
+		<FormRow label="Scope" align="start">
+			<div class="flex flex-col gap-1">
+				<Checkbox bind:checked={scopeIssues}>Issues</Checkbox>
+				<Checkbox bind:checked={scopePulls}>Pull requests</Checkbox>
+			</div>
+		</FormRow>
+
+		<FormRow label="Color">
+			<div class="flex items-center gap-2">
+				{#each COLORS as swatch (swatch)}
+					<button
+						type="button"
+						onclick={() => (color = swatch)}
+						aria-label="Use colour {swatch}"
+						aria-pressed={color === swatch}
+						class="size-5 cursor-pointer rounded-full transition-shadow {color === swatch
+							? 'ring-2 ring-foreground-default ring-offset-2 ring-offset-background-default'
+							: ''}"
+						style="background-color: {swatch}"
+					></button>
+				{/each}
+			</div>
+		</FormRow>
+	</SettingsList>
+
+	<FormActions>
+		<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
+		<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
+	</FormActions>
+</DrillDown>
diff --git a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
new file mode 100644
index 00000000..e6cb2013
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { untrack } from "svelte";
+	import { resolve } from "$app/paths";
+	import Avatar from "$lib/components/ui/Avatar.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Select from "$lib/components/ui/Select.svelte";
+	import SettingsBlock from "$lib/components/settings/SettingsBlock.svelte";
+	import SettingsList from "$lib/components/settings/SettingsList.svelte";
+	import SettingsRow from "$lib/components/settings/SettingsRow.svelte";
+	import DocsButton from "$lib/components/settings/DocsButton.svelte";
+	import Plus from "$icon/plus";
+	import Trash from "$icon/trash-2";
+
+	let { data } = $props();
+
+	const base = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);
+	const path = (p: string) => resolve(p as "/");
+
+	// mocked — spindle selection and secrets are not wired up yet
+	let spindle = $state(untrack(() => data.repo.spindle) ?? "spindle.tangled.sh");
+	const spindles = $derived([spindle, "spindle.user.tld"]);
+
+	let secrets = $state([
+		{
+			name: "generic_secret",
+			added: "Added 5 hours ago by",
+			by: untrack(() => data.repo.ownerHandle)
+		}
+	]);
+
+	const remove = (name: string) => {
+		secrets = secrets.filter((s) => s.name !== name);
+	};
+</script>
+
+<div class="flex min-h-8 w-full items-center gap-4">
+	<h1 class="typography-heading-2 text-foreground-default">Pipelines</h1>
+</div>
+
+<SettingsBlock
+	title="Spindle"
+	description={[
+		"Choose a spindle to execute your workflows on. Only repository owners can configure spindles.",
+		"Spindles can be selfhosted."
+	]}
+	separator
+>
+	{#snippet action()}
+		<DocsButton href="https://docs.tangled.org/spindles" />
+	{/snippet}
+
+	<SettingsList gap="3">
+		<SettingsRow title="Spindle">
+			<Select bind:value={spindle} aria-label="Spindle" class="w-80">
+				{#each spindles as option (option)}
+					<option value={option}>{option}</option>
+				{/each}
+			</Select>
+		</SettingsRow>
+	</SettingsList>
+</SettingsBlock>
+
+<SettingsBlock
+	title="Secrets"
+	description={[
+		"Secrets are accessible in workflow runs via environment variables.",
+		"Anyone with collaborator access to this repository can add and use secrets in workflow runs."
+	]}
+	separator
+>
+	{#snippet action()}
+		<Button icon={Plus} href={path(`${base}/pipelines/secrets/new`)}>Add secret</Button>
+	{/snippet}
+
+	<SettingsList gap="3">
+		{#each secrets as secret (secret.name)}
+			<SettingsRow>
+				{#snippet label()}
+					<span class="flex min-w-0 flex-col gap-1">
+						<span class="font-mono typography-monospace-regular break-all text-foreground-default">
+							{secret.name}
+						</span>
+						<span
+							class="flex items-center gap-1.5 typography-paragraph-regular text-foreground-muted"
+						>
+							{secret.added}
+							<Avatar handle={secret.by} size="size-4" />
+							{secret.by}
+						</span>
+					</span>
+				{/snippet}
+				<Button variant="danger" icon={Trash} onclick={() => remove(secret.name)}>Delete</Button>
+			</SettingsRow>
+		{/each}
+	</SettingsList>
+</SettingsBlock>
diff --git a/web/src/routes/[handle]/[repo]/settings/pipelines/secrets/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/pipelines/secrets/new/+page.svelte
new file mode 100644
index 00000000..38944be7
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/pipelines/secrets/new/+page.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { resolve } from "$app/paths";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
+	import DrillDown from "$lib/components/settings/DrillDown.svelte";
+	import SettingsList from "$lib/components/settings/SettingsList.svelte";
+	import FormRow from "$lib/components/settings/FormRow.svelte";
+	import FormActions from "$lib/components/settings/FormActions.svelte";
+	import Plus from "$icon/plus";
+	import X from "$icon/x";
+
+	let { data } = $props();
+
+	const back = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings/pipelines`);
+
+	let name = $state("");
+	let value = $state("");
+	const valid = $derived(name.trim().length > 0 && value.length > 0);
+
+	// mocked — secrets are not wired up yet
+	const submit = () => goto(resolve(back as "/"));
+</script>
+
+<DrillDown
+	backLabel="Pipelines"
+	backHref={back}
+	title="Add secret"
+	description="Secrets are available as environment variables in the workflow."
+>
+	<SettingsList padding="tight">
+		<FormRow label="Name" for="secret-name">
+			<Input id="secret-name" bind:value={name} placeholder="SECRET_NAME" />
+		</FormRow>
+		<FormRow label="Value" for="secret-value">
+			<Input id="secret-value" bind:value placeholder="very important secret" />
+		</FormRow>
+	</SettingsList>
+
+	<FormActions>
+		<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
+		<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
+	</FormActions>
+</DrillDown>
diff --git a/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte b/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
new file mode 100644
index 00000000..dc38e7b0
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { resolve } from "$app/paths";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
+	import DrillDown from "$lib/components/settings/DrillDown.svelte";
+	import SettingsList from "$lib/components/settings/SettingsList.svelte";
+	import FormRow from "$lib/components/settings/FormRow.svelte";
+	import FormActions from "$lib/components/settings/FormActions.svelte";
+	import Copy from "$icon/copy";
+	import CopyCheck from "$icon/copy-check";
+	import Plus from "$icon/plus";
+	import X from "$icon/x";
+
+	let { data } = $props();
+
+	const back = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);
+	const did = $derived(data.repo.ownerDid);
+
+	// the point of the screen: these survive a rename, the handle-based ones don't
+	const stableUrls = $derived([`https://tangled.org/${did}`, `git@tangled.org:${did}`]);
+
+	let copied = $state<string | null>(null);
+	const copy = async (url: string) => {
+		await navigator.clipboard.writeText(url);
+		copied = url;
+		setTimeout(() => (copied === url ? (copied = null) : null), 1500);
+	};
+
+	let name = $state("");
+	const valid = $derived(name.trim().length > 0 && name.trim() !== data.repo.name);
+
+	// mocked — renaming is not wired up yet
+	const submit = () => goto(resolve(back as "/"));
+</script>
+
+<DrillDown
+	backLabel="General"
+	backHref={back}
+	title="Rename repository"
+	description={[
+		"Existing git remotes that use the old name will break.",
+		"Use the stable, DID-based URLs below to avoid breakage on future renames."
+	]}
+>
+	<div class="flex w-full flex-col gap-1">
+		{#each stableUrls as url (url)}
+			<div class="flex items-center gap-2">
+				<code class="font-mono typography-monospace-regular break-all text-foreground-default">
+					{url}
+				</code>
+				<button
+					type="button"
+					onclick={() => copy(url)}
+					aria-label="Copy {url}"
+					class="cursor-pointer text-foreground-muted hover:text-foreground-default"
+				>
+					{#if copied === url}
+						<CopyCheck class="size-3.5" aria-hidden="true" />
+					{:else}
+						<Copy class="size-3.5" aria-hidden="true" />
+					{/if}
+				</button>
+			</div>
+		{/each}
+	</div>
+
+	<SettingsList padding="tight">
+		<FormRow label="Name" for="repo-name">
+			<Input id="repo-name" bind:value={name} placeholder="great-project" />
+		</FormRow>
+	</SettingsList>
+
+	<FormActions>
+		<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
+		<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
+	</FormActions>
+</DrillDown>
diff --git a/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
new file mode 100644
index 00000000..c94a462d
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
@@ -0,0 +1,140 @@
+<script lang="ts">
+	import { untrack } from "svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
+	import Radio from "$lib/components/ui/Radio.svelte";
+	import Select from "$lib/components/ui/Select.svelte";
+	import Toggle from "$lib/components/ui/Toggle.svelte";
+	import Tag from "$lib/components/ui/Tag.svelte";
+	import SettingsEmpty from "$lib/components/settings/SettingsEmpty.svelte";
+	import SettingsSection from "$lib/components/settings/SettingsSection.svelte";
+	import SettingsList from "$lib/components/settings/SettingsList.svelte";
+	import SettingsRow from "$lib/components/settings/SettingsRow.svelte";
+	import SettingsSaveBar from "$lib/components/settings/SettingsSaveBar.svelte";
+	import CodeChip from "$lib/components/settings/CodeChip.svelte";
+	import Check from "$icon/check";
+	import ExternalLink from "$icon/external-link";
+	import Settings2 from "$icon/settings-2";
+
+	let { data } = $props();
+
+	const domain = "user.tngl.sh";
+	const subPath = $derived(`${domain}/${data.repo.name}`);
+
+	// mocked — sites config is backed by G7 and has no write path here. Rendering
+	// the deployed state so the live-status pair and Disable row are visible; an
+	// undeployed repo drops both, as in the first Figma frame.
+	const deployed = true;
+
+	const initial = {
+		branch: untrack(() => data.repo.defaultBranch),
+		directory: "/",
+		type: "index" as "index" | "subpath",
+		disabled: false
+	};
+	let form = $state({ ...initial });
+	const dirty = $derived(JSON.stringify(form) !== JSON.stringify(initial));
+	const reset = () => (form = { ...initial });
+
+	// the "(default)" marker is display-only; the value stays the plain branch name
+	const branches = $derived([
+		{ value: data.repo.defaultBranch, label: `${data.repo.defaultBranch} (default)` },
+		{ value: "develop", label: "develop" }
+	]);
+
+	const deploys = [
+		{ branch: "main", status: "Success", reason: "Config change", when: "5 hours ago" }
+	];
+</script>
+
+<div class="flex min-h-9 w-full items-center justify-between gap-4">
+	<h1 class="typography-heading-2 text-foreground-default">Sites</h1>
+	<SettingsSaveBar {dirty} onreset={reset} />
+</div>
+
+<div class="flex w-full flex-col gap-4">
+	<p class="typography-paragraph-regular text-foreground-muted">
+		Serve a static site directly from this repository. Choose a branch and the directory containing
+		your <code class="font-mono typography-monospace-regular">index.html</code>.<br />
+		Only repository owners can configure sites.
+	</p>
+
+	{#if deployed}
+		<ButtonGroup class="w-fit">
+			<Button icon={Check}>Live at {domain}</Button>
+			<Button icon={ExternalLink}>Open</Button>
+		</ButtonGroup>
+	{/if}
+</div>
+
+<SettingsList gap="3">
+	<SettingsRow title="Branch" description="The branch to build and deploy the site from.">
+		<Select bind:value={form.branch} aria-label="Branch" class="w-80">
+			{#each branches as branch (branch.value)}
+				<option value={branch.value}>{branch.label}</option>
+			{/each}
+		</Select>
+	</SettingsRow>
+
+	<SettingsRow
+		title="Deploy directory"
+		description={[
+			"Path within the repository that contains your index.html.",
+			"Use / for the root, or a subdirectory like /docs."
+		]}
+	>
+		<Input bind:value={form.directory} placeholder="/" class="w-80" />
+	</SettingsRow>
+
+	<SettingsRow
+		title="Type"
+		description={[
+			"An index site is served at the root of your sites domain.",
+			"A sub-path site is served under the repository name."
+		]}
+	>
+		<div class="flex w-80 flex-col gap-2">
+			<div class="flex flex-col gap-1">
+				<Radio value="index" bind:group={form.type} name="site-type">Index site</Radio>
+				<CodeChip class="w-fit">{domain}</CodeChip>
+			</div>
+			<div class="flex flex-col gap-1">
+				<Radio value="subpath" bind:group={form.type} name="site-type">Sub-path site</Radio>
+				<CodeChip class="w-fit">{subPath}</CodeChip>
+			</div>
+		</div>
+	</SettingsRow>
+
+	{#if deployed}
+		<SettingsRow
+			title="Disable site"
+			description="Disables the site for this repository. The site will no longer be served."
+		>
+			<Toggle bind:checked={form.disabled} aria-label="Disable site" />
+		</SettingsRow>
+	{/if}
+</SettingsList>
+
+<hr class="w-full border-0 border-t border-border-default" />
+
+<SettingsSection title="Recent deploys" headingGap="4" rowGap="3" framed={deploys.length > 0}>
+	{#if deploys.length === 0}
+		<SettingsEmpty message="No deploys yet." />
+	{:else}
+		{#each deploys as deploy (deploy.branch)}
+			<SettingsRow>
+				{#snippet label()}
+					<span class="flex min-w-0 items-center gap-2">
+						<span class="font-mono typography-monospace-regular text-foreground-default">
+							{deploy.branch}
+						</span>
+						<Tag color="success" size="sm" icon={Check}>{deploy.status}</Tag>
+						<Tag color="gray" size="sm" icon={Settings2}>{deploy.reason}</Tag>
+					</span>
+				{/snippet}
+				<span class="typography-paragraph-regular text-foreground-muted">{deploy.when}</span>
+			</SettingsRow>
+		{/each}
+	{/if}
+</SettingsSection>
-- 
2.51.2