From 531defe9869c27838a0bff38ce4868d5a0646bb9 Mon Sep 17 00:00:00 2001
From: vegard <vnotnes@pm.me>
Date: Mon, 16 Mar 2026 09:18:37 +0100
Subject: [PATCH] Editor/UI: expanded bottom bar, kanban rich editor,
 ConvertDialog ordlyd
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Editor compact mode: send/minimer-knapper flyttes til bunnrad når utvidet
- KanbanBlock: bruker Editor-komponent for beskrivelse i stedet for textarea
- ConvertDialog: «Opprett» i stedet for «Konverter» (meldingen beholdes)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/lib/blocks/KanbanBlock.svelte       | 33 ++++-------
 web/src/lib/components/ConvertDialog.svelte |  4 +-
 web/src/lib/components/Editor.svelte        | 61 ++++++++++++++-------
 3 files changed, 55 insertions(+), 43 deletions(-)

diff --git a/web/src/lib/blocks/KanbanBlock.svelte b/web/src/lib/blocks/KanbanBlock.svelte
index f39e9db..7c19c4a 100644
--- a/web/src/lib/blocks/KanbanBlock.svelte
+++ b/web/src/lib/blocks/KanbanBlock.svelte
@@ -4,6 +4,7 @@
 	import type { KanbanConnection, KanbanColumn } from '$lib/kanban/types';
 	import type { MessageData } from '$lib/types/message';
 	import MessageBox from '$lib/components/MessageBox.svelte';
+	import Editor from '$lib/components/Editor.svelte';
 
 	let { props = {} }: { props?: Record<string, unknown> } = $props();
 
@@ -225,12 +226,13 @@
 					bind:value={editTitle}
 					placeholder="Tittel"
 				/>
-				<textarea
-					class="edit-desc"
-					bind:value={editDescription}
-					placeholder="Beskrivelse (valgfritt)"
-					rows="3"
-				></textarea>
+				<div class="edit-desc-editor">
+					<Editor
+						mode="extended"
+						bind:content={editDescription}
+						placeholder="Beskrivelse (valgfritt)"
+					/>
+				</div>
 				<div class="modal-actions">
 					<button type="button" onclick={saveEdit}>Lagre</button>
 					<button type="button" class="delete" onclick={handleDeleteCard}>Slett</button>
@@ -457,7 +459,7 @@
 		border: 1px solid #2d3148;
 		border-radius: 10px;
 		padding: 1rem;
-		width: 340px;
+		width: 420px;
 		max-width: 90vw;
 		display: flex;
 		flex-direction: column;
@@ -480,24 +482,13 @@
 		border-color: #3b82f6;
 	}
 
-	.edit-desc {
-		background: #0f1117;
+	.edit-desc-editor {
 		border: 1px solid #2d3148;
 		border-radius: 6px;
-		color: #e1e4e8;
-		padding: 0.5rem;
-		font-size: 0.8rem;
-		font-family: inherit;
-		resize: vertical;
-		line-height: 1.4;
+		overflow: hidden;
 	}
 
-	.edit-desc:focus {
-		outline: none;
-		border-color: #3b82f6;
-	}
-
-	.edit-desc::placeholder, .edit-title::placeholder {
+	.edit-title::placeholder {
 		color: #8b92a5;
 	}
 
diff --git a/web/src/lib/components/ConvertDialog.svelte b/web/src/lib/components/ConvertDialog.svelte
index 69f8349..f58b390 100644
--- a/web/src/lib/components/ConvertDialog.svelte
+++ b/web/src/lib/components/ConvertDialog.svelte
@@ -88,7 +88,7 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class="convert-dialog" onclick={(e) => e.stopPropagation()}>
-		<h3>{type === 'kanban' ? 'Konverter til kanban-kort' : 'Konverter til kalenderhendelse'}</h3>
+		<h3>{type === 'kanban' ? 'Opprett kanban-kort' : 'Opprett kalenderhendelse'}</h3>
 
 		{#if loading}
 			<p class="convert-dialog__loading">Laster...</p>
@@ -147,7 +147,7 @@
 			<button class="convert-dialog__btn convert-dialog__btn--cancel" onclick={onCancel}>Avbryt</button>
 			<button class="convert-dialog__btn convert-dialog__btn--confirm" onclick={handleSubmit}
 				disabled={loading || (type === 'kanban' ? !selectedColumnId : !selectedCalendarId || !startsAt)}
-			>Konverter</button>
+			>Opprett</button>
 		</div>
 	</div>
 </div>
diff --git a/web/src/lib/components/Editor.svelte b/web/src/lib/components/Editor.svelte
index 6b606a4..7ec284b 100644
--- a/web/src/lib/components/Editor.svelte
+++ b/web/src/lib/components/Editor.svelte
@@ -307,27 +307,15 @@
 			<div bind:this={editorEl} class="editor-mount"></div>
 		{/if}
 
-		{#if mode === 'compact'}
-			<button type="button" class="expand-btn" onclick={toggleExpand} title={expanded ? 'Minimer' : 'Utvid editor'}>
-				{#if expanded}
-					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-						<polyline points="4 14 10 14 10 20"></polyline>
-						<polyline points="20 10 14 10 14 4"></polyline>
-						<line x1="14" y1="10" x2="21" y2="3"></line>
-						<line x1="3" y1="21" x2="10" y2="14"></line>
-					</svg>
-				{:else}
-					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-						<polyline points="15 3 21 3 21 9"></polyline>
-						<polyline points="9 21 3 21 3 15"></polyline>
-						<line x1="21" y1="3" x2="14" y2="10"></line>
-						<line x1="3" y1="21" x2="10" y2="14"></line>
-					</svg>
-				{/if}
+		{#if mode === 'compact' && !expanded}
+			<button type="button" class="expand-btn" onclick={toggleExpand} title="Utvid editor">
+				<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+					<polyline points="15 3 21 3 21 9"></polyline>
+					<polyline points="9 21 3 21 3 15"></polyline>
+					<line x1="21" y1="3" x2="14" y2="10"></line>
+					<line x1="3" y1="21" x2="10" y2="14"></line>
+				</svg>
 			</button>
-		{/if}
-
-		{#if mode === 'compact'}
 			<button
 				type="button"
 				class="send-btn"
@@ -342,6 +330,30 @@
 		{/if}
 	</div>
 
+	{#if mode === 'compact' && expanded}
+		<div class="editor-bottom-bar">
+			<button type="button" class="expand-btn" onclick={toggleExpand} title="Minimer">
+				<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+					<polyline points="4 14 10 14 10 20"></polyline>
+					<polyline points="20 10 14 10 14 4"></polyline>
+					<line x1="14" y1="10" x2="21" y2="3"></line>
+					<line x1="3" y1="21" x2="10" y2="14"></line>
+				</svg>
+			</button>
+			<button
+				type="button"
+				class="send-btn"
+				onclick={handleSubmit}
+				disabled={!hasContent}
+				aria-label="Send"
+			>
+				<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+					<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+				</svg>
+			</button>
+		</div>
+	{/if}
+
 	<!-- Mention suggestions popup -->
 	{#if suggestions.length > 0 && mentionPopupPos}
 		<div
@@ -616,6 +628,15 @@
 		margin: 0 0.15rem;
 	}
 
+	/* Bottom bar (expanded compact mode) */
+	.editor-bottom-bar {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 0.3rem 0.4rem 0;
+	}
+
 	/* Send button (compact mode) */
 	.send-btn {
 		display: flex;