From 52b71e64406d24f3ed1f0e99c5d2b94f326c58dc Mon Sep 17 00:00:00 2001
From: vegard <vnotnes@pm.me>
Date: Mon, 16 Mar 2026 03:46:10 +0100
Subject: [PATCH] =?UTF-8?q?UI:=20bruk=20play-symboler=20(=E2=97=80=20?=
 =?UTF-8?q?=E2=96=B6)=20for=20revisjonspiler?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/lib/components/MessageBox.svelte | 85 ++++++++++++------------
 1 file changed, 41 insertions(+), 44 deletions(-)

diff --git a/web/src/lib/components/MessageBox.svelte b/web/src/lib/components/MessageBox.svelte
index 26179e1..9c83ee0 100644
--- a/web/src/lib/components/MessageBox.svelte
+++ b/web/src/lib/components/MessageBox.svelte
@@ -266,35 +266,31 @@
 				{/if}
 			</div>
 		{/if}
-		<!-- Flytende toolbar — gruppert: handlinger | forvaltning -->
-		<div class="messagebox__toolbar">
-			<div class="messagebox__toolbar-group">
-				{#if callbacks.onReply}
-					<button class="messagebox__toolbar-btn" title="Svar" onclick={handleReply}>💬</button>
-				{/if}
-				{#if isOwnMessage && !editing && callbacks.onEdit}
-					<button class="messagebox__toolbar-btn" title="Rediger" onclick={startEdit}>✏️</button>
-				{/if}
-				{#if callbacks.onConvertToKanban}
-					<button class="messagebox__toolbar-btn" title="Opprett kanban-kort" onclick={handleConvertToKanban}>📋</button>
-				{/if}
-				{#if callbacks.onConvertToCalendar}
-					<button class="messagebox__toolbar-btn" title="Opprett kalenderhendelse" onclick={handleConvertToCalendar}>📅</button>
-				{/if}
-				{#if callbacks.onMagic}
-					<button class="messagebox__toolbar-btn" title="AI-behandling" onclick={handleMagic} disabled={isAiProcessing}>✨</button>
-				{/if}
-			</div>
-			{#if callbacks.onTogglePin || (isOwnMessage && !editing && callbacks.onDelete)}
-				<div class="messagebox__toolbar-divider"></div>
-				<div class="messagebox__toolbar-group">
-					{#if callbacks.onTogglePin}
-						<button class="messagebox__toolbar-btn" title={message.pinned ? 'Løsne' : 'Fest'} onclick={handleTogglePin}>📌</button>
-					{/if}
-					{#if isOwnMessage && !editing && callbacks.onDelete}
-						<button class="messagebox__toolbar-btn messagebox__toolbar-btn--danger" title="Slett" onclick={handleDelete}>🗑️</button>
-					{/if}
-				</div>
+		<!-- Øvre toolbar: opprett/transformer-handlinger -->
+		<div class="messagebox__toolbar messagebox__toolbar--top">
+			{#if isOwnMessage && !editing && callbacks.onEdit}
+				<button class="messagebox__toolbar-btn" title="Rediger" onclick={startEdit}>✏️</button>
+			{/if}
+			{#if callbacks.onConvertToKanban}
+				<button class="messagebox__toolbar-btn" title="Opprett kanban-kort" onclick={handleConvertToKanban}>📋</button>
+			{/if}
+			{#if callbacks.onConvertToCalendar}
+				<button class="messagebox__toolbar-btn" title="Opprett kalenderhendelse" onclick={handleConvertToCalendar}>📅</button>
+			{/if}
+			{#if callbacks.onMagic}
+				<button class="messagebox__toolbar-btn" title="AI-behandling" onclick={handleMagic} disabled={isAiProcessing}>✨</button>
+			{/if}
+		</div>
+		<!-- Nedre toolbar: samtale-handlinger -->
+		<div class="messagebox__toolbar messagebox__toolbar--bottom">
+			{#if callbacks.onReply}
+				<button class="messagebox__toolbar-btn" title="Svar" onclick={handleReply}>💬</button>
+			{/if}
+			{#if callbacks.onTogglePin}
+				<button class="messagebox__toolbar-btn" title={message.pinned ? 'Løsne' : 'Fest'} onclick={handleTogglePin}>📌</button>
+			{/if}
+			{#if isOwnMessage && !editing && callbacks.onDelete}
+				<button class="messagebox__toolbar-btn messagebox__toolbar-btn--danger" title="Slett" onclick={handleDelete}>🗑️</button>
 			{/if}
 		</div>
 		{#if confirmingDelete}
@@ -349,8 +345,8 @@
 						{/if}
 					</button>
 					{#if showingRevision}
-						<button class="messagebox__revision-nav" onclick={prevRevision} disabled={revisionIndex >= revisions.length - 1}>&larr;</button>
-						<button class="messagebox__revision-nav" onclick={nextRevision}>&rarr;</button>
+						<button class="messagebox__revision-nav" onclick={prevRevision} disabled={revisionIndex >= revisions.length - 1}>&#9664;</button>
+						<button class="messagebox__revision-nav" onclick={nextRevision}>&#9654;</button>
 						{#if revisionIndex >= 0}
 							<button class="messagebox__revision-toggle" onclick={(e) => { e.stopPropagation(); revisionIndex = -1; }}>
 								nåværende
@@ -456,10 +452,9 @@
 		font-size: 0.65rem;
 	}
 
-	/* === Flytende toolbar (absolutt-posisjonert, ingen layout-shift) === */
+	/* === Flytende toolbars (absolutt-posisjonert, ingen layout-shift) === */
 	.messagebox__toolbar {
 		position: absolute;
-		top: -0.6rem;
 		right: 0.4rem;
 		display: flex;
 		gap: 0.1rem;
@@ -473,11 +468,24 @@
 		z-index: 5;
 	}
 
+	.messagebox__toolbar--top {
+		top: -0.6rem;
+	}
+
+	.messagebox__toolbar--bottom {
+		bottom: -0.6rem;
+	}
+
 	.messagebox--expanded:hover .messagebox__toolbar {
 		opacity: 1;
 		pointer-events: auto;
 	}
 
+	/* Skjul tomme toolbars (kun har betingede barn) */
+	.messagebox__toolbar:empty {
+		display: none;
+	}
+
 	.messagebox__toolbar-btn {
 		font-size: 0.7rem;
 		background: none;
@@ -497,17 +505,6 @@
 		background: rgba(220, 38, 38, 0.25);
 	}
 
-	.messagebox__toolbar-group {
-		display: flex;
-		gap: 0.1rem;
-	}
-
-	.messagebox__toolbar-divider {
-		width: 1px;
-		background: #2d3148;
-		margin: 0.1rem 0.15rem;
-	}
-
 	.messagebox__confirm-delete {
 		display: flex;
 		align-items: center;