From 1dbb842ba62e0be6b83a7772db39bbd28e412b16 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 20 Aug 2026 15:03:36 +0200
Subject: [PATCH] web/commments: add comment box with account selector stories
 & visual nits

Signed-off-by: eti <eti@eti.tf>
---
 .../components/auth/AccountSelector.svelte    | 16 +++----
 .../lib/components/comment/CommentBox.svelte  | 20 +--------
 .../comment/CommentCard.stories.svelte        | 30 +++++++++++++
 .../components/comment/CommentEditor.svelte   | 43 ++++++++++---------
 4 files changed, 59 insertions(+), 50 deletions(-)

diff --git a/web/src/lib/components/auth/AccountSelector.svelte b/web/src/lib/components/auth/AccountSelector.svelte
index 22319294..32be2ed6 100644
--- a/web/src/lib/components/auth/AccountSelector.svelte
+++ b/web/src/lib/components/auth/AccountSelector.svelte
@@ -3,9 +3,9 @@
 
 	export const accountSelector = tv({
 		slots: {
-			trigger: "flex min-w-0 items-center gap-1.5 text-foreground-muted",
+			trigger: "flex min-w-0 items-center gap-1.5",
 			chevron: "size-3 shrink-0",
-			header: "border-b-0 px-2 py-1.5 typography-paragraph-small text-foreground-muted"
+			header: "border-b-0 px-2 py-1.5"
 		}
 	});
 </script>
@@ -41,16 +41,10 @@
 </script>
 
 {#if selected && others.length > 0}
-	<Dropdown
-		{group}
-		{disabled}
-		size="small"
-		label={`${label} ${selected.handle}`}
-		class={className}
-	>
+	<Dropdown {group} {disabled} label={`${label} ${selected.handle}`} class={className}>
 		{#snippet trigger()}
 			<span class={classes.trigger()}>
-				<User did={selected.did} handle={selected.handle} size="small" class="min-w-0" />
+				<User did={selected.did} handle={selected.handle} class="min-w-0" />
 				<ChevronDown class={classes.chevron()} aria-hidden="true" />
 			</span>
 		{/snippet}
@@ -58,7 +52,7 @@
 		<div class={classes.header()}>{label}</div>
 		{#each others as account (account.did)}
 			<DropdownItem onclick={() => (value = account.did)}>
-				<User did={account.did} handle={account.handle} size="small" class="min-w-0" />
+				<User did={account.did} handle={account.handle} class="min-w-0" />
 			</DropdownItem>
 		{/each}
 	</Dropdown>
diff --git a/web/src/lib/components/comment/CommentBox.svelte b/web/src/lib/components/comment/CommentBox.svelte
index fdd101ba..89c92c4b 100644
--- a/web/src/lib/components/comment/CommentBox.svelte
+++ b/web/src/lib/components/comment/CommentBox.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import MessageSquarePlus from "$icon/message-square-plus";
 	import Reply from "$icon/reply";
-	import Avatar from "$lib/components/ui/Avatar.svelte";
-	import User from "$lib/components/ui/User.svelte";
 	import { type MarkupContext } from "$lib/markup";
 	import CommentEditor from "./CommentEditor.svelte";
 	import type { ThreadInput } from "./comments";
@@ -61,25 +59,11 @@
 {/snippet}
 
 {#if isThread}
-	<!-- two-column, mirroring Comment: avatar left, handle + editor right -->
-	<div class="flex gap-2 bg-background-default/50 px-6 py-3">
-		<div class="shrink-0">
-			<Avatar did={authorDid} handle={authorHandle} size="large" />
-		</div>
-		<div class="flex min-w-0 flex-1 flex-col gap-2">
-			<div
-				class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-subtle"
-			>
-				<span class="text-foreground-default">{authorHandle}</span>
-			</div>
-			{@render editor()}
-		</div>
+	<div class="bg-background-default/50 p-4">
+		{@render editor()}
 	</div>
 {:else}
 	<div class="rounded-sm border border-border-default bg-background-default p-4 drop-shadow-xs">
-		<div class="pb-2">
-			<User handle={authorHandle} did={authorDid} />
-		</div>
 		{@render editor()}
 	</div>
 {/if}
diff --git a/web/src/lib/components/comment/CommentCard.stories.svelte b/web/src/lib/components/comment/CommentCard.stories.svelte
index d94a0bb6..bd3edae6 100644
--- a/web/src/lib/components/comment/CommentCard.stories.svelte
+++ b/web/src/lib/components/comment/CommentCard.stories.svelte
@@ -60,3 +60,33 @@
 		await expect(canvas.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
 	}}
 />
+
+<!-- logged in to several accounts: the reply box carries an account picker -->
+<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()
+		);
+	}}
+/>
+
+<!-- an edit keeps the record's author, so no picker even with several accounts -->
+<Story
+	name="Editing with several accounts"
+	args={{ thread: myThread }}
+	parameters={{ auth: { accounts: 2 } }}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(canvas.getByRole("button", { name: "Edit comment" }));
+		await waitFor(() => canvas.getByPlaceholderText(/edit your comment/i));
+		await expect(canvas.getByRole("button", { name: "Save" })).toBeInTheDocument();
+		expect(canvas.queryByRole("button", { name: /comment as/i })).toBeNull();
+	}}
+/>
diff --git a/web/src/lib/components/comment/CommentEditor.svelte b/web/src/lib/components/comment/CommentEditor.svelte
index dc9fd072..8b81a282 100644
--- a/web/src/lib/components/comment/CommentEditor.svelte
+++ b/web/src/lib/components/comment/CommentEditor.svelte
@@ -132,26 +132,7 @@
 
 	<ErrorAlert label={publish.error} />
 
-	<div class="flex items-center gap-2">
-		<Button
-			type="submit"
-			variant="primary"
-			icon={publish.loading ? Spinner : submitIcon}
-			disabled={!canSubmit}
-		>
-			{submitLabel}
-		</Button>
-		{#if oncancel}
-			<Button
-				type="button"
-				variant="default"
-				icon={X}
-				disabled={publish.loading}
-				onclick={oncancel}
-			>
-				Cancel
-			</Button>
-		{/if}
+	<div class="flex w-full items-center justify-between">
 		{#if !rkey}
 			<AccountSelector
 				{accounts}
@@ -159,8 +140,28 @@
 				label="Comment as"
 				disabled={publish.loading}
 				group="comment-editor"
-				class="ml-auto"
 			/>
 		{/if}
+		<div class="flex flex-row gap-2">
+			{#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