From 696027f03cc647193b27b3d45dab4090e2f43ac9 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Mon, 27 Jul 2026 12:45:05 +0100
Subject: [PATCH] web/components: add new issue form

---
 .../repo/issues/IssueForm.stories.svelte      |  60 ++++++++
 .../components/repo/issues/IssueForm.svelte   | 125 +++++++++++++++++
 web/src/lib/components/repo/types.ts          |  11 ++
 .../testing/MockAuthProvider.svelte           |  30 ++++
 .../ui/MarkdownEditor.stories.svelte          |  23 +++
 .../lib/components/ui/MarkdownEditor.svelte   | 132 ++++++++++++++++++
 web/src/lib/components/ui/Textarea.svelte     |   3 +
 web/src/lib/markup/render.ts                  |  11 ++
 .../[repo]/issues/new/+page.server.ts         |   6 +
 .../[handle]/[repo]/issues/new/+page.svelte   |  40 ++++++
 10 files changed, 441 insertions(+)
 create mode 100644 web/src/lib/components/repo/issues/IssueForm.stories.svelte
 create mode 100644 web/src/lib/components/repo/issues/IssueForm.svelte
 create mode 100644 web/src/lib/components/testing/MockAuthProvider.svelte
 create mode 100644 web/src/lib/components/ui/MarkdownEditor.stories.svelte
 create mode 100644 web/src/lib/components/ui/MarkdownEditor.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/issues/new/+page.server.ts
 create mode 100644 web/src/routes/[handle]/[repo]/issues/new/+page.svelte

diff --git a/web/src/lib/components/repo/issues/IssueForm.stories.svelte b/web/src/lib/components/repo/issues/IssueForm.stories.svelte
new file mode 100644
index 00000000..6f4bdeaf
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueForm.stories.svelte
@@ -0,0 +1,60 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { expect, userEvent, waitFor, within } from "storybook/test";
+	import IssueForm from "./IssueForm.svelte";
+	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
+
+	// no-ops; submitting is inert here (needs an authed agent context)
+	const noop = () => undefined;
+
+	const { Story } = defineMeta({
+		title: "Repo/Issues/IssueForm",
+		component: IssueForm,
+		tags: ["autodocs"],
+		argTypes: {
+			mode: {
+				control: { type: "inline-radio" },
+				options: ["create", "edit"]
+			}
+		},
+		args: {
+			repoDid: "did:plc:wshs7t2adsemcrrd4snkeqli",
+			markup: { repo: "tangled.org/core", ref: "main", host: "tangled.org" },
+			mode: "create",
+			onsaved: noop,
+			oncancel: noop
+		}
+	});
+</script>
+
+<Story name="Create" />
+<Story
+	name="Edit"
+	args={{
+		mode: "edit",
+		title: "Add a full trending repositories view",
+		body: "I'd like a `/trending` view that shows more than the five repositories in the sidebar."
+	}}
+/>
+
+<!-- fills the form and submits with ctrl+enter against a fake agent that rejects, showing the error alert -->
+<Story
+	name="Failed submission"
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.type(canvas.getByLabelText("Title"), "Something broke");
+		await userEvent.type(
+			canvas.getByPlaceholderText(/describe your issue/i),
+			"details{Control>}{Enter}{/Control}"
+		);
+		await waitFor(() =>
+			expect(canvas.getByRole("alert")).toHaveTextContent(/network request failed/i)
+		);
+	}}
+>
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<IssueForm {...args} />
+		</MockAuthProvider>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/repo/issues/IssueForm.svelte b/web/src/lib/components/repo/issues/IssueForm.svelte
new file mode 100644
index 00000000..3cf301b1
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueForm.svelte
@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { untrack } from "svelte";
+	import { now as tidNow } from "@atcute/tid";
+	import CirclePlus from "$icon/circle-plus";
+	import Pencil from "$icon/pencil";
+	import X from "$icon/x";
+	import { putIssue } from "$lib/api/issue";
+	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 MarkdownEditor from "$lib/components/ui/MarkdownEditor.svelte";
+	import Spinner from "$lib/components/ui/Spinner.svelte";
+	import { type MarkupContext } from "$lib/markup";
+	import type { IssueRecord, RecordView } from "$lib/api/records";
+
+	interface Props {
+		repoDid: string;
+		markup: MarkupContext;
+		mode?: "create" | "edit";
+		rkey?: string;
+		createdAt?: string;
+		title?: string;
+		body?: string;
+		submitLabel?: string;
+		bodyPlaceholder?: string;
+		onsaved: (saved: RecordView<IssueRecord>) => void;
+		oncancel: () => void;
+	}
+
+	let {
+		repoDid,
+		markup,
+		mode = "create",
+		rkey,
+		createdAt,
+		title: initialTitle = "",
+		body: initialBody = "",
+		submitLabel,
+		bodyPlaceholder = "Describe your issue. Markdown is supported.",
+		onsaved,
+		oncancel
+	}: Props = $props();
+
+	const auth = getAuth();
+
+	let title = $state(untrack(() => initialTitle));
+	let body = $state(untrack(() => initialBody));
+	let isPublishing = $state(false);
+	let error = $state<string | null>(null);
+
+	const submitText = $derived(submitLabel ?? (mode === "edit" ? "Save" : "Create issue"));
+	const submitIcon = $derived(mode === "edit" ? Pencil : CirclePlus);
+	const canSubmit = $derived(title.trim() !== "" && !isPublishing);
+
+	const handleSubmit = async (e: SubmitEvent) => {
+		e.preventDefault();
+		const agent = auth.agent;
+		if (!agent || !canSubmit) return;
+		isPublishing = true;
+		error = null;
+		try {
+			const targetRkey = rkey ?? tidNow();
+			const record: IssueRecord = {
+				$type: "sh.tangled.repo.issue",
+				repo: repoDid as IssueRecord["repo"],
+				title,
+				body,
+				createdAt: createdAt ?? new Date().toISOString()
+			};
+			const saved = await putIssue(agent, targetRkey, record);
+			onsaved(saved);
+		} catch (err) {
+			error = err instanceof Error ? err.message : "Failed to save issue";
+		} finally {
+			isPublishing = false;
+		}
+	};
+</script>
+
+<form onsubmit={handleSubmit} class="flex flex-col gap-4">
+	<div class="flex flex-col gap-1.5">
+		<label for="issue-title" class="text-sm text-foreground-default">Title</label>
+		<Input id="issue-title" name="title" required bind:value={title} disabled={isPublishing} />
+	</div>
+
+	<div class="flex flex-col gap-1.5">
+		<span class="text-sm text-foreground-default">Body</span>
+
+		<MarkdownEditor
+			id="issue-body"
+			name="body"
+			rows={12}
+			placeholder={bodyPlaceholder}
+			{markup}
+			bind:value={body}
+			disabled={isPublishing}
+		/>
+	</div>
+
+	{#if error}
+		<ErrorAlert label={error} />
+	{/if}
+
+	<div class="flex items-center justify-end gap-2">
+		<Button
+			type="button"
+			variant="ghost"
+			icon={X}
+			disabled={isPublishing}
+			onclick={oncancel}
+			class="text-foreground-danger hover:text-foreground-danger"
+		>
+			Cancel
+		</Button>
+		<Button
+			type="submit"
+			variant="primary"
+			icon={isPublishing ? Spinner : submitIcon}
+			disabled={!canSubmit}
+		>
+			{submitText}
+		</Button>
+	</div>
+</form>
diff --git a/web/src/lib/components/repo/types.ts b/web/src/lib/components/repo/types.ts
index 142dc2eb..0c3d8622 100644
--- a/web/src/lib/components/repo/types.ts
+++ b/web/src/lib/components/repo/types.ts
@@ -38,3 +38,14 @@ export interface LanguageSlice {
 	percentage: number;
 	share: number;
 }
+
+export interface IssueSummary {
+	uri: string;
+	rkey: string;
+	title: string;
+	state: "open" | "closed";
+	authorHandle: string;
+	authorDid: string;
+	createdAt: string;
+	commentCount: number;
+}
diff --git a/web/src/lib/components/testing/MockAuthProvider.svelte b/web/src/lib/components/testing/MockAuthProvider.svelte
new file mode 100644
index 00000000..21a69a40
--- /dev/null
+++ b/web/src/lib/components/testing/MockAuthProvider.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	// story-only helper: injects a fake auth context so form stories can exercise
+	// a real (failing) submission without a live session. the fake agent's fetch
+	// handler always rejects, so putIssue/putComment land in the form's catch block.
+	import { setContext, type Snippet } from "svelte";
+	import { AUTH_KEY, type Auth } from "$lib/auth.svelte";
+
+	interface Props {
+		// message the fake agent rejects submissions with
+		failWith?: string;
+		children: Snippet;
+	}
+
+	let { failWith = "MockAuthProvider: network request failed, this error is intentional.", children }: Props = $props();
+
+	const agent = {
+		sub: "did:plc:alice",
+		handle: () => Promise.reject(new Error(failWith))
+	};
+
+	const auth = {
+		agent,
+		currentDid: "did:plc:alice",
+		currentUser: { did: "did:plc:alice", handle: "alice.pds.tngl.boltless.dev" }
+	} as unknown as Auth;
+
+	setContext(AUTH_KEY, auth);
+</script>
+
+{@render children()}
diff --git a/web/src/lib/components/ui/MarkdownEditor.stories.svelte b/web/src/lib/components/ui/MarkdownEditor.stories.svelte
new file mode 100644
index 00000000..122c2a3b
--- /dev/null
+++ b/web/src/lib/components/ui/MarkdownEditor.stories.svelte
@@ -0,0 +1,23 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import MarkdownEditor from "./MarkdownEditor.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/MarkdownEditor",
+		component: MarkdownEditor,
+		tags: ["autodocs"],
+		args: {
+			markup: { repo: "tangled.org/core", ref: "main", host: "tangled.org" },
+			placeholder: "Write some **markdown**. Switch to Preview to render it.",
+			rows: 8
+		}
+	});
+</script>
+
+<Story name="Empty" />
+<Story
+	name="With content"
+	args={{
+		value: "## Hello\n\nThis is a `MarkdownEditor` with some **content**.\n\n- one\n- two"
+	}}
+/>
diff --git a/web/src/lib/components/ui/MarkdownEditor.svelte b/web/src/lib/components/ui/MarkdownEditor.svelte
new file mode 100644
index 00000000..8b667208
--- /dev/null
+++ b/web/src/lib/components/ui/MarkdownEditor.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+	import type { KeyboardEventHandler } from "svelte/elements";
+	import Eye from "$icon/eye";
+	import Pencil from "$icon/pencil";
+	import Button from "./Button.svelte";
+	import ButtonGroup from "./ButtonGroup.svelte";
+	import Textarea from "./Textarea.svelte";
+	import { renderMarkup, type MarkupContext } from "$lib/markup";
+
+	interface Props {
+		value?: string;
+		markup: MarkupContext;
+		tab?: "write" | "preview";
+		id?: string;
+		name?: string;
+		rows?: number;
+		placeholder?: string;
+		disabled?: boolean;
+		previewClass?: string;
+		autofocus?: boolean;
+		// drop the textarea/preview background so the editor blends into its surroundings
+		transparent?: boolean;
+	}
+
+	let {
+		value = $bindable(""),
+		markup,
+		tab = $bindable("write"),
+		id,
+		name,
+		rows = 12,
+		placeholder,
+		disabled = false,
+		previewClass = "min-h-40",
+		autofocus = false,
+		transparent = false
+	}: Props = $props();
+
+	const surface = $derived(transparent ? "bg-transparent" : "bg-background-default");
+
+	let previewHtml = $state<string | null>(null);
+	let previewing = $state(false);
+	let textareaEl = $state<HTMLTextAreaElement>();
+
+	// focus on mount (and when returning to the write tab) if requested
+	$effect(() => {
+		if (autofocus) textareaEl?.focus();
+	});
+
+	$effect(() => {
+		if (tab !== "preview") return;
+		const source = value;
+		if (!source.trim()) {
+			previewHtml = null;
+			previewing = false;
+			return;
+		}
+		let cancelled = false;
+		previewing = true;
+		renderMarkup(source, markup)
+			.then((html) => {
+				if (!cancelled) previewHtml = html;
+			})
+			.catch(() => {
+				if (!cancelled) previewHtml = null;
+			})
+			.finally(() => {
+				if (!cancelled) previewing = false;
+			});
+		return () => {
+			cancelled = true;
+		};
+	});
+	// ctrl/cmd+enter submits the enclosing form, mirroring the old htmx editor
+	const handleKeydown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
+		if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+			e.preventDefault();
+			e.currentTarget.form?.requestSubmit();
+		}
+	};
+</script>
+
+<div class="flex flex-col gap-1.5">
+	<ButtonGroup class="self-start">
+		<Button
+			type="button"
+			size="sm"
+			icon={Pencil}
+			variant={tab === "write" ? "default" : "ghost"}
+			onclick={() => (tab = "write")}
+		>
+			Write
+		</Button>
+		<Button
+			type="button"
+			size="sm"
+			icon={Eye}
+			variant={tab === "preview" ? "default" : "ghost"}
+			onclick={() => (tab = "preview")}
+		>
+			Preview
+		</Button>
+	</ButtonGroup>
+
+	{#if tab === "write"}
+		<Textarea
+			{id}
+			{name}
+			{rows}
+			resizeable
+			{placeholder}
+			bind:value
+			bind:element={textareaEl}
+			{disabled}
+			onkeydown={handleKeydown}
+			class={transparent ? "max-h-none bg-transparent" : "max-h-none"}
+		/>
+	{:else if previewHtml}
+		<div
+			class={`markup rounded border border-border-default ${surface} px-2.5 py-2 ${previewClass}`}
+		>
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
+			{@html previewHtml}
+		</div>
+	{:else}
+		<div
+			class={`rounded border border-border-default ${surface} px-2.5 py-2 text-sm text-foreground-subtle italic ${previewClass}`}
+		>
+			{previewing ? "Rendering…" : "Nothing to preview."}
+		</div>
+	{/if}
+</div>
diff --git a/web/src/lib/components/ui/Textarea.svelte b/web/src/lib/components/ui/Textarea.svelte
index 61f83d3b..4022d9d3 100644
--- a/web/src/lib/components/ui/Textarea.svelte
+++ b/web/src/lib/components/ui/Textarea.svelte
@@ -59,6 +59,7 @@
 		iconLeft?: Component<SvelteHTMLElements["svg"]>;
 		iconRight?: Component<SvelteHTMLElements["svg"]>;
 		class?: string;
+		element?: HTMLTextAreaElement;
 	}
 
 	let {
@@ -71,6 +72,7 @@
 		iconLeft,
 		iconRight,
 		class: className,
+		element = $bindable(),
 		...rest
 	}: Props = $props();
 
@@ -83,6 +85,7 @@
 		<IconLeft class="mt-0.5 mr-1 size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
 	{/if}
 	<textarea
+		bind:this={element}
 		bind:value
 		{disabled}
 		{readonly}
diff --git a/web/src/lib/markup/render.ts b/web/src/lib/markup/render.ts
index 89e5e95b..61e1114d 100644
--- a/web/src/lib/markup/render.ts
+++ b/web/src/lib/markup/render.ts
@@ -11,3 +11,14 @@ export const renderDocument = async (
 	if (contents.length > SOURCE_LIMIT) return null;
 	return renderMarkdown(contents, ctx);
 };
+
+// like renderDocument, but for content that is always markdown (issue and
+// comment bodies) rather than a repo file with an extension to sniff
+export const renderMarkup = async (
+	contents: string,
+	ctx: MarkupContext
+): Promise<string | null> => {
+	const { SOURCE_LIMIT, renderMarkdown } = await import("./markdown");
+	if (contents.length > SOURCE_LIMIT) return null;
+	return renderMarkdown(contents, ctx);
+};
diff --git a/web/src/routes/[handle]/[repo]/issues/new/+page.server.ts b/web/src/routes/[handle]/[repo]/issues/new/+page.server.ts
new file mode 100644
index 00000000..a68ccc6c
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/issues/new/+page.server.ts
@@ -0,0 +1,6 @@
+import { requireAuth } from "$lib/auth/guards";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = (event) => {
+	requireAuth(event);
+};
diff --git a/web/src/routes/[handle]/[repo]/issues/new/+page.svelte b/web/src/routes/[handle]/[repo]/issues/new/+page.svelte
new file mode 100644
index 00000000..e3f00047
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/issues/new/+page.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { page } from "$app/state";
+	import { resolve } from "$app/paths";
+	import IssueForm from "$lib/components/repo/issues/IssueForm.svelte";
+
+	let { data } = $props();
+
+	const base = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/issues`);
+
+	const markup = $derived({
+		repo: `${data.repo.ownerHandle}/${data.repo.name}`,
+		ref: data.repo.defaultBranch,
+		host: page.url.host,
+		camo: data.publicConfig?.camoEnabled
+	});
+
+	// no issue detail route yet, so land back on the list after creating
+	const handleSaved = async () => {
+		await goto(resolve(base as "/"));
+	};
+
+	const handleCancel = () => {
+		void goto(resolve(base as "/"));
+	};
+</script>
+
+<svelte:head>
+	<title>New issue · {data.repo.ownerHandle}/{data.repo.name} · Tangled</title>
+</svelte:head>
+
+<section class="mt-2 rounded bg-background-default px-6 py-6 text-foreground-default shadow-sm">
+	<h1 class="mb-4 text-xl font-bold text-foreground-default">Create a new issue</h1>
+	<IssueForm
+		{markup}
+		repoDid={data.repo.repoDid ?? ""}
+		onsaved={handleSaved}
+		oncancel={handleCancel}
+	/>
+</section>
-- 
2.51.2