sidelinja/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Editor/UI: expanded bottom bar, kanban rich editor, ConvertDialog ordlyd

Browse source 
- 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>
This commit is contained in:
vegard 2026-03-16 09:18:37 +01:00
parent 58646b1543
commit 531defe986
3 changed files with 55 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
web/src/lib/blocks/KanbanBlock.svelte
View file

@ -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}
<div class="edit-desc-editor">
<Editor
mode="extended"
bind:content={editDescription}
placeholder="Beskrivelse (valgfritt)"
rows="3"
></textarea>
/>
</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;
}

4
web/src/lib/components/ConvertDialog.svelte
View file

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

49
web/src/lib/components/Editor.svelte
View file

@ -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}
{#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>
{/if}
</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;