From e3258fda187d1e1339470562a5c05aaaad4a50fa Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Fri, 25 Sep 2026 11:59:42 +0200
Subject: [PATCH] web/comment: keep the reply field open under every thread

Signed-off-by: eti <eti@eti.tf>
---
 .../lib/components/comment/CommentBox.svelte  | 19 ++---
 .../comment/CommentCard.stories.svelte        | 29 ++-----
 .../lib/components/comment/CommentCard.svelte | 34 ++------
 .../components/comment/CommentEditor.svelte   | 85 ++++++++++++-------
 4 files changed, 78 insertions(+), 89 deletions(-)

diff --git a/web/src/lib/components/comment/CommentBox.svelte b/web/src/lib/components/comment/CommentBox.svelte
index 77038e0d5..83100e5da 100644
--- a/web/src/lib/components/comment/CommentBox.svelte
+++ b/web/src/lib/components/comment/CommentBox.svelte
@@ -16,9 +16,7 @@
 		markup: MarkupContext;
 		// "thread" tucks the box into a comment card, matching its canvas background
 		variant?: "default" | "thread";
-		autofocus?: boolean;
 		onsubmitted?: (submitted: ThreadInput) => void;
-		oncancel?: () => void;
 	}
 
 	let {
@@ -30,9 +28,7 @@
 		authorHandle,
 		markup,
 		variant = "default",
-		autofocus = false,
-		onsubmitted,
-		oncancel
+		onsubmitted
 	}: Props = $props();
 
 	const isThread = $derived(variant === "thread");
@@ -47,24 +43,25 @@
 		{authorDid}
 		{authorHandle}
 		{markup}
-		rows={isThread ? 4 : 6}
 		placeholder={isThread
-			? "Write a reply. Markdown is supported."
+			? "Leave a reply..."
 			: "Add to the discussion. Markdown is supported."}
 		submitLabel={isThread ? "Reply" : "Comment"}
 		submitIcon={isThread ? Reply : MessageSquarePlus}
-		{autofocus}
+		compact={isThread}
+		inset={!isThread}
 		{onsubmitted}
-		{oncancel}
 	/>
 {/snippet}
 
 {#if isThread}
-	<div class="bg-background-default/50 p-md">
+	<div
+		class="rounded-b-sm bg-background-default/50 py-2xs pr-2xs pl-xl transition-shadow focus-within:ring-2 focus-within:ring-border-strong"
+	>
 		{@render editor()}
 	</div>
 {:else}
-	<Card padding="small">
+	<Card padding="none" class="overflow-visible">
 		{@render editor()}
 	</Card>
 {/if}
diff --git a/web/src/lib/components/comment/CommentCard.stories.svelte b/web/src/lib/components/comment/CommentCard.stories.svelte
index 8bd91aab2..962cae66b 100644
--- a/web/src/lib/components/comment/CommentCard.stories.svelte
+++ b/web/src/lib/components/comment/CommentCard.stories.svelte
@@ -31,18 +31,20 @@
 <Story name="Top level only" />
 <Story name="With replies" args={{ thread: sampleThread }} />
 
-<!-- logged in: clicking "Leave a reply" opens an inline reply box -->
+<!-- logged in: the reply field is always there; its button only appears once there is text -->
 <Story
 	name="Replying"
 	parameters={{ auth: true }}
 	play={async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await userEvent.click(canvas.getByRole("button", { name: "Leave a reply..." }));
-		const textarea = await waitFor(() => canvas.getByPlaceholderText(/write a reply/i));
+		const textarea = canvas.getByPlaceholderText("Leave a reply...");
+		expect(canvas.queryByRole("button", { name: "Reply" })).toBeNull();
+		expect(canvas.queryByRole("switch")).toBeNull();
+		await userEvent.type(textarea, "first line{Shift>}{Enter}{/Shift}second line");
 		await expect(canvas.getByRole("button", { name: "Reply" })).toBeInTheDocument();
-		await expect(canvas.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
-		// the editor should be focused so the user can type immediately
-		await waitFor(() => expect(textarea).toHaveFocus());
+		expect(canvas.queryByRole("button", { name: "Cancel" })).toBeNull();
+		await userEvent.clear(textarea);
+		await waitFor(() => expect(canvas.queryByRole("button", { name: "Reply" })).toBeNull());
 	}}
 />
 
@@ -61,21 +63,6 @@
 	}}
 />
 
-<Story
-	name="Replying with several accounts"
-	parameters={{ auth: { accounts: 2 } }}
-	play={async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await userEvent.click(canvas.getByRole("button", { name: "Leave a reply..." }));
-		await waitFor(() => canvas.getByPlaceholderText(/write a reply/i));
-		await userEvent.click(canvas.getByRole("button", { name: /comment as alice/i }));
-		await userEvent.click(await canvas.findByRole("menuitem", { name: /bob/i }));
-		await waitFor(() =>
-			expect(canvas.getByRole("button", { name: /comment as bob/i })).toBeVisible()
-		);
-	}}
-/>
-
 <Story
 	name="Reporting a reply"
 	args={{ thread: sampleThread }}
diff --git a/web/src/lib/components/comment/CommentCard.svelte b/web/src/lib/components/comment/CommentCard.svelte
index 27e849da1..ee6cbeed3 100644
--- a/web/src/lib/components/comment/CommentCard.svelte
+++ b/web/src/lib/components/comment/CommentCard.svelte
@@ -45,7 +45,6 @@
 	const currentUser = $derived(auth?.currentUser ?? null);
 	const reporting = createReporting();
 
-	let replying = $state(false);
 	let editingUri = $state<string | null>(null);
 
 	let reactionsByUri = $derived.by(() => {
@@ -115,7 +114,7 @@
 
 {#snippet commentActions(comment: CommentView, noun: "comment" | "reply")}
 	<div
-		class="flex items-center gap-none opacity-0 transition group-hover:opacity-100 focus-within:opacity-100"
+		class="flex items-center gap-3xs opacity-0 transition group-hover:opacity-100 focus-within:opacity-100"
 	>
 		<ReactionPicker
 			subjectUri={comment.uri}
@@ -194,8 +193,8 @@
 	{@render commentActions(thread.self, "comment")}
 {/snippet}
 
-<Card padding="none" class="bg-background-subtle dark:bg-background-default">
-	<div class="group">
+<Card padding="none" class="overflow-visible bg-background-subtle dark:bg-background-default">
+	<div class="group overflow-clip rounded-t-sm">
 		<Comment
 			authorHandle={thread.self.authorHandle}
 			authorDid={thread.self.authorDid}
@@ -254,7 +253,7 @@
 
 	{#if thread.self.deleted && !thread.self.cid}
 		<!-- deleted parent with no recoverable strongRef; nothing to reply against -->
-	{:else if replying && currentUser}
+	{:else if currentUser}
 		<div class={thread.replies.length ? "border-t border-border-default" : ""}>
 			<CommentBox
 				variant="thread"
@@ -265,31 +264,16 @@
 				authorDid={currentUser.did}
 				authorHandle={currentUser.handle}
 				{markup}
-				autofocus
-				onsubmitted={(submitted) => {
-					replying = false;
-					onsubmitted?.(submitted);
-				}}
-				oncancel={() => (replying = false)}
+				{onsubmitted}
 			/>
 		</div>
 	{:else}
 		<div
-			class={`flex items-center gap-xs bg-background-default/50 px-xl py-xs ${thread.replies.length ? "border-t border-border-default" : ""}`}
+			class={`flex items-center gap-xs rounded-b-sm bg-background-default/50 px-xl py-xs ${thread.replies.length ? "border-t border-border-default" : ""}`}
 		>
-			{#if currentUser}
-				<button
-					type="button"
-					class="w-full cursor-text text-left text-foreground-muted focus:outline-none"
-					onclick={() => (replying = true)}
-				>
-					Leave a reply...
-				</button>
-			{:else}
-				<span class="text-foreground-muted">
-					<a href={resolve("/login")} class="underline">Login</a> to leave a reply
-				</span>
-			{/if}
+			<span class="text-foreground-muted">
+				<a href={resolve("/login")} class="underline">Login</a> to leave a reply
+			</span>
 		</div>
 	{/if}
 </Card>
diff --git a/web/src/lib/components/comment/CommentEditor.svelte b/web/src/lib/components/comment/CommentEditor.svelte
index 07a81e24e..4dcfcb09f 100644
--- a/web/src/lib/components/comment/CommentEditor.svelte
+++ b/web/src/lib/components/comment/CommentEditor.svelte
@@ -14,6 +14,7 @@
 	import Button from "$lib/components/ui/Button.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import MarkdownEditor from "$lib/components/ui/MarkdownEditor.svelte";
+	import Separator from "$lib/components/ui/Separator.svelte";
 	import Spinner from "$lib/components/ui/Spinner.svelte";
 	import { renderMarkup, type MarkupContext } from "$lib/markup";
 	import { createAction } from "$lib/action.svelte";
@@ -40,6 +41,8 @@
 		submitLabel: string;
 		submitIcon: Component<SvelteHTMLElements["svg"]>;
 		autofocus?: boolean;
+		compact?: boolean;
+		inset?: boolean;
 		onsubmitted?: (submitted: ThreadInput) => void;
 		oncancel?: () => void;
 	}
@@ -61,6 +64,8 @@
 		submitLabel,
 		submitIcon,
 		autofocus = false,
+		compact = false,
+		inset = false,
 		onsubmitted,
 		oncancel
 	}: Props = $props();
@@ -136,7 +141,19 @@
 	const canSubmit = $derived(body.trim() !== "" && !publish.loading);
 </script>
 
-<form onsubmit={publish.run} class="flex flex-col gap-xs">
+{#snippet submit()}
+	<Button
+		type="submit"
+		variant="primary"
+		size={compact ? "small" : "regular"}
+		icon={publish.loading ? Spinner : submitIcon}
+		disabled={!canSubmit}
+	>
+		{submitLabel}
+	</Button>
+{/snippet}
+
+<form onsubmit={publish.run} class={["flex flex-col", !inset && "gap-xs"]}>
 	<MarkdownEditor
 		name="body"
 		{rows}
@@ -147,40 +164,44 @@
 		bind:value={body}
 		bind:preview
 		disabled={publish.loading}
+		{compact}
+		{inset}
+		trailing={compact && body.trim() !== "" ? submit : undefined}
 	/>
 
-	<ErrorAlert label={publish.error} />
+	{#if inset}
+		<Separator />
+	{/if}
+
+	<div class={["flex flex-col gap-xs", inset && "p-xs", compact && !publish.error && "hidden"]}>
+		<ErrorAlert label={publish.error} />
 
-	<div class="flex w-full items-center">
-		{#if !rkey}
-			<AccountSelector
-				{accounts}
-				bind:value={() => acting.did, (did) => (picked = did)}
-				label="Comment as"
-				disabled={publish.loading}
-				group="comment-editor"
-			/>
+		{#if !compact}
+			<div class="flex w-full items-center">
+				{#if !rkey}
+					<AccountSelector
+						{accounts}
+						bind:value={() => acting.did, (did) => (picked = did)}
+						label="Comment as"
+						disabled={publish.loading}
+						group="comment-editor"
+					/>
+				{/if}
+				<div class="ml-auto flex flex-row gap-xs">
+					{#if oncancel}
+						<Button
+							type="button"
+							variant="default"
+							icon={X}
+							disabled={publish.loading}
+							onclick={oncancel}
+						>
+							Cancel
+						</Button>
+					{/if}
+					{@render submit()}
+				</div>
+			</div>
 		{/if}
-		<div class="ml-auto flex flex-row gap-xs">
-			{#if oncancel}
-				<Button
-					type="button"
-					variant="default"
-					icon={X}
-					disabled={publish.loading}
-					onclick={oncancel}
-				>
-					Cancel
-				</Button>
-			{/if}
-			<Button
-				type="submit"
-				variant="primary"
-				icon={publish.loading ? Spinner : submitIcon}
-				disabled={!canSubmit}
-			>
-				{submitLabel}
-			</Button>
-		</div>
 	</div>
 </form>
-- 
2.51.2