From aa34e22fefa885cd13171caba7e5d7c7b571078c Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Fri, 25 Sep 2026 11:59:42 +0200
Subject: [PATCH] web/components: add compact and inset modes to MarkdownEditor

Signed-off-by: eti <eti@eti.tf>
---
 .../lib/components/ui/MarkdownEditor.svelte   | 222 +++++++++++++-----
 1 file changed, 157 insertions(+), 65 deletions(-)

diff --git a/web/src/lib/components/ui/MarkdownEditor.svelte b/web/src/lib/components/ui/MarkdownEditor.svelte
index f209563c0..b95f1a0c3 100644
--- a/web/src/lib/components/ui/MarkdownEditor.svelte
+++ b/web/src/lib/components/ui/MarkdownEditor.svelte
@@ -1,5 +1,82 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const markdownEditor = tv({
+		slots: {
+			root: "flex flex-col",
+			toolbar:
+				"flex items-center justify-between gap-md border-b border-border-default bg-background-subtle p-2xs",
+			body: "relative flex [&:has([data-preview-ready])_textarea]:invisible",
+			field: "rounded-none border-0 bg-transparent focus-within:ring-0"
+		},
+		variants: {
+			transparent: {
+				true: { root: "bg-transparent" },
+				false: { root: "bg-background-default" }
+			},
+			compact: {
+				true: {
+					body: "items-end gap-xs",
+					field: "min-w-0 flex-1 typography-paragraph-regular [&_textarea]:px-0 [&_textarea]:py-2xs [&_textarea]:placeholder:text-foreground-muted"
+				},
+				false: {
+					root: "overflow-hidden transition-colors",
+					body: "flex-col",
+					field: "typography-paragraph-body"
+				}
+			},
+			inset: {
+				true: "",
+				false: ""
+			},
+			disabled: {
+				true: "",
+				false: ""
+			}
+		},
+		compoundVariants: [
+			{ compact: false, inset: false, class: { root: "rounded-sm border" } },
+			{
+				compact: false,
+				inset: true,
+				class: { root: "relative z-1 rounded-t-[calc(var(--radius-sm)-1px)]" }
+			},
+			{
+				compact: false,
+				disabled: true,
+				class: { root: "cursor-not-allowed border-border-disabled" }
+			},
+			{ compact: false, disabled: false, class: { root: "border-border-default" } },
+			{
+				compact: false,
+				inset: false,
+				disabled: false,
+				class: {
+					root: "focus-within:border-border-strong focus-within:ring-1 focus-within:ring-border-strong"
+				}
+			},
+			{
+				compact: false,
+				inset: true,
+				disabled: false,
+				class: {
+					root: "outline-2 outline-transparent focus-within:outline-border-strong"
+				}
+			}
+		],
+		defaultVariants: {
+			transparent: false,
+			compact: false,
+			inset: false,
+			disabled: false
+		}
+	});
+
+	export type MarkdownEditorVariants = VariantProps<typeof markdownEditor>;
+</script>
+
 <script lang="ts">
-	import { onMount, untrack, type Component } from "svelte";
+	import { onMount, untrack, type Component, type Snippet } from "svelte";
 	import type { Attachment } from "svelte/attachments";
 	import type { KeyboardEventHandler, SvelteHTMLElements } from "svelte/elements";
 	import Bold from "$icon/bold";
@@ -94,6 +171,9 @@
 		disabled?: boolean;
 		autofocus?: boolean;
 		transparent?: boolean;
+		compact?: boolean;
+		inset?: boolean;
+		trailing?: Snippet;
 	}
 
 	let {
@@ -106,14 +186,17 @@
 		placeholder,
 		disabled = false,
 		autofocus = false,
-		transparent = false
+		transparent = false,
+		compact = false,
+		inset = false,
+		trailing
 	}: Props = $props();
 
 	const uid = $props.id();
 	const textareaId = $derived(id ?? `${uid}-textarea`);
 	const previewId = `${uid}-preview`;
 	const listId = `${uid}-suggestions`;
-	const surface = $derived(transparent ? "bg-transparent" : "bg-background-default");
+	const classes = $derived(markdownEditor({ transparent, compact, inset, disabled }));
 
 	let textareaEl = $state<HTMLTextAreaElement>();
 	let typeahead = $state<ReturnType<typeof MarkdownTypeahead>>();
@@ -132,6 +215,14 @@
 		if (autofocus) textareaEl?.focus();
 	});
 
+	$effect(() => {
+		const el = textareaEl;
+		if (!compact || !el) return;
+		void value;
+		el.style.height = "auto";
+		el.style.height = `${el.scrollHeight}px`;
+	});
+
 	const hasContent = $derived(value.trim() !== "");
 
 	const rendered = $derived(
@@ -254,73 +345,69 @@
 	</Tooltip>
 {/snippet}
 
-<div
-	class={[
-		"flex flex-col overflow-hidden rounded-sm border transition-colors",
-		surface,
-		disabled
-			? "cursor-not-allowed border-border-disabled"
-			: "border-border-default focus-within:border-border-strong focus-within:ring-1 focus-within:ring-border-strong"
-	]}
->
-	<div
-		class="flex items-center justify-between gap-md border-b border-border-default bg-background-subtle p-2xs"
-	>
-		<div
-			role="toolbar"
-			aria-label="Formatting"
-			aria-controls={textareaId}
-			class="flex min-w-0 flex-wrap items-center gap-xs"
-		>
-			{#each INLINE_TOOLS as tool (tool.label)}
-				{@render toolButton(tool)}
-			{/each}
-			<Tooltip content="List" disabled={listOpen}>
-				<Dropdown
-					variant="button"
-					buttonVariant="ghost"
-					size="mini"
-					label="List"
-					disabled={disabled || preview}
-					onOpenChange={(open) => (listOpen = open)}
+<div class={classes.root()}>
+	{#if !compact}
+		<div class={classes.toolbar()}>
+			<div
+				role="toolbar"
+				aria-label="Formatting"
+				aria-controls={textareaId}
+				class="flex min-w-0 flex-wrap items-center gap-xs"
+			>
+				{#each INLINE_TOOLS as tool (tool.label)}
+					{@render toolButton(tool)}
+				{/each}
+				<Tooltip content="List" disabled={listOpen}>
+					<Dropdown
+						variant="button"
+						buttonVariant="ghost"
+						size="mini"
+						label="List"
+						disabled={disabled || preview}
+						onOpenChange={(open) => (listOpen = open)}
+					>
+						{#snippet trigger()}
+							<List class="size-3 shrink-0" aria-hidden="true" />
+							<ChevronDown class="size-3 shrink-0" aria-hidden="true" />
+						{/snippet}
+						{#each LISTS as item (item.kind)}
+							<DropdownItem
+								icon={item.icon}
+								onclick={() => apply((s) => list(s, item.kind))}
+							>
+								{item.label}
+							</DropdownItem>
+						{/each}
+					</Dropdown>
+				</Tooltip>
+				{#each BLOCK_TOOLS as tool (tool.label)}
+					{@render toolButton(tool)}
+				{/each}
+			</div>
+			<div class="flex shrink-0 items-center gap-xs px-xs">
+				<label
+					for={previewId}
+					class="flex items-center gap-1.5 typography-paragraph-regular"
 				>
-					{#snippet trigger()}
-						<List class="size-3 shrink-0" aria-hidden="true" />
-						<ChevronDown class="size-3 shrink-0" aria-hidden="true" />
-					{/snippet}
-					{#each LISTS as item (item.kind)}
-						<DropdownItem
-							icon={item.icon}
-							onclick={() => apply((s) => list(s, item.kind))}
-						>
-							{item.label}
-						</DropdownItem>
-					{/each}
-				</Dropdown>
-			</Tooltip>
-			{#each BLOCK_TOOLS as tool (tool.label)}
-				{@render toolButton(tool)}
-			{/each}
-		</div>
-		<div class="flex shrink-0 items-center gap-xs px-xs">
-			<label for={previewId} class="flex items-center gap-1.5 typography-paragraph-regular">
-				<Eye class="size-3.5 shrink-0" aria-hidden="true" />
-				Preview
-			</label>
-			<Toggle
-				id={previewId}
-				bind:checked={preview}
-				disabled={disabled || (!preview && !hasContent)}
-			/>
+					<Eye class="size-3.5 shrink-0" aria-hidden="true" />
+					Preview
+				</label>
+				<Toggle
+					id={previewId}
+					bind:checked={preview}
+					disabled={disabled || (!preview && !hasContent)}
+				/>
+			</div>
 		</div>
-	</div>
+	{/if}
 
-	<div class="relative flex flex-col [&:has([data-preview-ready])_textarea]:invisible">
+	<div class={classes.body()}>
 		<Textarea
 			id={textareaId}
 			{name}
-			{rows}
-			resizeable
+			rows={compact ? 1 : rows}
+			size={compact ? "unsized" : "regular"}
+			resizeable={!compact}
 			{placeholder}
 			bind:value
 			bind:element={textareaEl}
@@ -334,8 +421,13 @@
 			onclick={() => typeahead?.refresh()}
 			onscroll={() => typeahead?.refresh()}
 			onblur={() => typeahead?.close()}
-			class="rounded-none border-0 bg-transparent typography-paragraph-body focus-within:ring-0"
+			class={classes.field()}
 		/>
+		{#if trailing}
+			<div class="shrink-0">
+				{@render trailing()}
+			</div>
+		{/if}
 		{#if preview}
 			<div
 				bind:this={pane}
-- 
2.51.2