From ec3e08ceddefdc28ae1f261f2b867fe5d8adb18e Mon Sep 17 00:00:00 2001
From: dawn <dawn@tangled.org>
Date: Fri, 11 Sep 2026 02:06:55 +0300
Subject: [PATCH] web: create custom labels from repo settings

Signed-off-by: dawn <dawn@tangled.org>
---
 web/src/lib/api/labels.ts                     |  40 ++++-
 .../[repo]/settings/labels/new/+page.svelte   | 154 ++++++++++--------
 .../[repo]/settings/labels/new/+page.ts       |   6 +
 3 files changed, 133 insertions(+), 67 deletions(-)
 create mode 100644 web/src/routes/[handle]/[repo]/settings/labels/new/+page.ts

diff --git a/web/src/lib/api/labels.ts b/web/src/lib/api/labels.ts
index 508d2f52f..cdcd16241 100644
--- a/web/src/lib/api/labels.ts
+++ b/web/src/lib/api/labels.ts
@@ -1,10 +1,17 @@
-import type { ResourceUri } from "@atcute/lexicons/syntax";
+import type { Nsid, ResourceUri } from "@atcute/lexicons/syntax";
+import { now as tidNow } from "@atcute/tid";
+import type { OAuthUserAgent } from "@atcute/oauth-browser-client";
 import type { BobbinContext, XrpcRequestInit } from "$lib/api/client";
 import type * as ShTangledLabelDefinition from "$lib/api/lexicons/types/sh/tangled/label/definition";
 import { collect } from "$lib/api/pagination";
+import { createRecord, deleteRecord, type WrittenRecord } from "$lib/api/write";
 
 export type LabelDefinition = ShTangledLabelDefinition.Main;
 
+const LABEL_DEFINITION_COLLECTION = "sh.tangled.label.definition" as Nsid;
+const ISSUE_SCOPE = "sh.tangled.repo.issue" as Nsid;
+const PULL_SCOPE = "sh.tangled.repo.pull" as Nsid;
+
 export const DEFAULT_LABEL_OWNER = "did:plc:wshs7t2adsemcrrd4snkeqli";
 export const DEFAULT_LABELS = [
 	`at://${DEFAULT_LABEL_OWNER}/sh.tangled.label.definition/wontfix`,
@@ -34,3 +41,34 @@ export const listLabelDefinitions = async (
 };
 
 export const isBasicLabel = (label: LabelDefinition): boolean => label.valueType.type === "null";
+
+export interface CustomLabelInput {
+	name: string;
+	color: string;
+	issues: boolean;
+	pulls: boolean;
+	keyValue: boolean;
+}
+
+export const createLabelDefinition = (
+	agent: OAuthUserAgent,
+	input: CustomLabelInput
+): Promise<WrittenRecord> =>
+	createRecord<LabelDefinition>(
+		agent,
+		LABEL_DEFINITION_COLLECTION,
+		{
+			$type: "sh.tangled.label.definition",
+			name: input.name,
+			color: input.color,
+			scope: [...(input.issues ? [ISSUE_SCOPE] : []), ...(input.pulls ? [PULL_SCOPE] : [])],
+			valueType: input.keyValue
+				? { type: "string", format: "any" }
+				: { type: "null", format: "any" },
+			createdAt: new Date().toISOString() as never
+		},
+		tidNow()
+	);
+
+export const deleteLabelDefinition = (agent: OAuthUserAgent, uri: string): Promise<void> =>
+	deleteRecord(agent, LABEL_DEFINITION_COLLECTION, uri.slice(uri.lastIndexOf("/") + 1));
diff --git a/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
index 863bc8e23..5b7ae7ddf 100644
--- a/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
+	import { createAction } from "$lib/action.svelte";
+	import { createLabelDefinition, deleteLabelDefinition } from "$lib/api/labels";
+	import { saveRepoRecord } from "$lib/api/repoSettings";
+	import { getAuth } from "$lib/auth.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.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 Pending from "$lib/components/ui/Pending.svelte";
-	import Bones from "$lib/components/ui/Bones.svelte";
-	import settingsSettingspanelContentSkeletonFixture from "$lib/bones/settings-settingspanel--content-skeleton-fixture.bones.json";
 	import DrillDown from "$lib/components/settings/DrillDown.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
 	import FormRow from "$lib/components/settings/FormRow.svelte";
@@ -17,6 +19,10 @@
 
 	let { data } = $props();
 
+	const auth = getAuth();
+	const repo = $derived(data.repo);
+	const back = $derived(`/${repo.ownerHandle}/${repo.name}/settings`);
+
 	const COLORS = [
 		"#ef4444",
 		"#3b82f6",
@@ -28,77 +34,93 @@
 		"#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 issues = $state(true);
+	let pulls = $state(true);
 	let color = $state(COLORS[0]);
 
-	const valid = $derived(name.trim().length > 0 && (scopeIssues || scopePulls));
-	const submit = () => {
-		void Promise.resolve(data.repo).then((repo) => {
-			void goto(resolve(`/${repo.ownerHandle}/${repo.name}/settings` as "/"));
+	const valid = $derived(name.trim().length > 0 && (issues || pulls));
+
+	const create = createAction(async () => {
+		const agent = auth.agent;
+		if (!agent || !valid) return;
+		const { uri } = await createLabelDefinition(agent, {
+			name: name.trim(),
+			color,
+			issues,
+			pulls,
+			keyValue: type === "key-value"
 		});
-	};
+		try {
+			await saveRepoRecord(agent, data.publicConfig.bobbinUrl, data.record, {
+				labels: [...(data.record.value.labels ?? []), uri]
+			});
+		} catch (cause) {
+			// roll back the orphaned definition; an unsubscribed label is invisible
+			await deleteLabelDefinition(agent, uri).catch(() => {});
+			throw cause;
+		}
+		await goto(resolve(back as "/"), { invalidateAll: true });
+	});
 </script>
 
-<Pending>
-	{#snippet skeleton()}
-		<Bones capture={settingsSettingspanelContentSkeletonFixture} />
-	{/snippet}
-	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
-	{@const repo = await data.repo}
-	{@const back = `/${repo.ownerHandle}/${repo.name}/settings`}
-	<DrillDown backLabel="General" backHref={back} title="Add custom label">
-		<SettingsList padding="small">
-			<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>
+<DrillDown backLabel="General" backHref={back} title="Add custom label">
+	<ErrorAlert label={create.error} />
+
+	<SettingsList padding="small">
+		<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="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="Scope" align="start">
+			<div class="flex flex-col gap-1">
+				<Checkbox bind:checked={issues}>Issues</Checkbox>
+				<Checkbox bind:checked={pulls}>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>
+		<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>
-</Pending>
+	<FormActions>
+		<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
+		<Button
+			variant="primary"
+			icon={Plus}
+			disabled={!valid}
+			loading={create.loading}
+			onclick={create.run}>Add</Button
+		>
+	</FormActions>
+</DrillDown>
diff --git a/web/src/routes/[handle]/[repo]/settings/labels/new/+page.ts b/web/src/routes/[handle]/[repo]/settings/labels/new/+page.ts
new file mode 100644
index 000000000..a308e5542
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/labels/new/+page.ts
@@ -0,0 +1,6 @@
+import { requireRepoAdmin } from "$lib/api/access";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async (event) => {
+	requireRepoAdmin((await event.parent()).access);
+};
-- 
2.51.2