UI: bruk play-symboler (◀ ▶) for revisjonspiler

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
vegard 2026-03-16 03:46:10 +01:00
parent bc0da66d2a
commit 52b71e6440

View file

@ -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;