feat(inline-edit): add WYSIWYG inline dashboard editing mode
Replace the disconnected board edit page with inline editing directly on the board view. Toggle with Ctrl+E or the Edit button. Features: - Edit mode store with changeset accumulation and batch save - Floating toolbar (save, discard, add section, board settings, exit) - Widget hover overlays with edit/delete/drag controls - Type-specific widget config panels for all 14 widget types - Section inline editing (title, icon picker, delete) - "+" buttons for adding widgets and sections inline - Section-level drag-and-drop reordering via svelte-dnd-action - Batch save API endpoint (single Prisma transaction) - Board properties side panel with live theme/wallpaper preview - Modal widget type picker with search filtering - Icon picker component with visual grid and search - Confirmation dialog modal for all destructive actions - HTML format support for Note widget (in addition to markdown/text) - Full i18n support (en + ru) for all new UI strings - Legacy edit page banner linking to new inline mode
This commit is contained in:
@@ -0,0 +1,147 @@
|
||||
<script lang="ts">
|
||||
import { t } from 'svelte-i18n';
|
||||
import { editMode } from '$lib/stores/editMode.svelte.js';
|
||||
import ConfirmDialog from '$lib/components/ui/ConfirmDialog.svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
interface Props {
|
||||
onSave: () => void;
|
||||
onDiscard: () => void;
|
||||
onExit: () => void;
|
||||
onAddSection: () => void;
|
||||
onBoardSettings: () => void;
|
||||
}
|
||||
|
||||
let { onSave, onDiscard, onExit, onAddSection, onBoardSettings }: Props = $props();
|
||||
|
||||
let showDiscardConfirm = $state(false);
|
||||
|
||||
function handleExit() {
|
||||
if (editMode.dirty) {
|
||||
showDiscardConfirm = true;
|
||||
} else {
|
||||
onExit();
|
||||
}
|
||||
}
|
||||
|
||||
function handleDiscard() {
|
||||
showDiscardConfirm = false;
|
||||
onDiscard();
|
||||
}
|
||||
|
||||
function handleDiscardCancel() {
|
||||
showDiscardConfirm = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if editMode.active}
|
||||
<div
|
||||
class="fixed bottom-6 left-1/2 z-40 -translate-x-1/2"
|
||||
transition:fly={{ y: 60, duration: 250 }}
|
||||
>
|
||||
<!-- Toolbar pill -->
|
||||
<div class="flex items-center gap-1 rounded-2xl border border-border bg-card/95 px-2 py-1.5 shadow-xl backdrop-blur-sm">
|
||||
<!-- Save -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={onSave}
|
||||
disabled={!editMode.dirty}
|
||||
class="relative flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm font-medium transition-colors
|
||||
{editMode.dirty
|
||||
? 'bg-primary text-primary-foreground hover:bg-primary/90'
|
||||
: 'text-muted-foreground opacity-50 cursor-not-allowed'}"
|
||||
>
|
||||
<!-- Check icon -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
|
||||
<polyline points="17 21 17 13 7 13 7 21" />
|
||||
<polyline points="7 3 7 8 15 8" />
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{$t('common.save') ?? 'Save'}</span>
|
||||
{#if editMode.changeCount > 0}
|
||||
<span class="absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-bold text-destructive-foreground">
|
||||
{editMode.changeCount}
|
||||
</span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<div class="mx-0.5 h-6 w-px bg-border"></div>
|
||||
|
||||
<!-- Add Section -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={onAddSection}
|
||||
class="flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm text-foreground transition-colors hover:bg-accent"
|
||||
title={$t('board.add_section') ?? 'Add Section'}
|
||||
>
|
||||
<!-- Plus icon -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{$t('board.add_section') ?? 'Section'}</span>
|
||||
</button>
|
||||
|
||||
<!-- Board Settings -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={onBoardSettings}
|
||||
class="flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm text-foreground transition-colors hover:bg-accent"
|
||||
title={$t('board.settings') ?? 'Board Settings'}
|
||||
>
|
||||
<!-- Settings icon -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{$t('board.settings') ?? 'Settings'}</span>
|
||||
</button>
|
||||
|
||||
<div class="mx-0.5 h-6 w-px bg-border"></div>
|
||||
|
||||
<!-- Discard -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={handleExit}
|
||||
disabled={!editMode.dirty}
|
||||
class="flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm transition-colors
|
||||
{editMode.dirty
|
||||
? 'text-destructive hover:bg-destructive/10'
|
||||
: 'text-muted-foreground opacity-50 cursor-not-allowed'}"
|
||||
title={$t('common.discard') ?? 'Discard Changes'}
|
||||
>
|
||||
<!-- Undo icon -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 7v6h6" />
|
||||
<path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" />
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{$t('common.discard') ?? 'Discard'}</span>
|
||||
</button>
|
||||
|
||||
<!-- Exit Edit Mode -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={handleExit}
|
||||
class="flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm text-foreground transition-colors hover:bg-accent"
|
||||
title={$t('board.exit_edit') ?? 'Exit Edit Mode'}
|
||||
>
|
||||
<!-- X icon -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{$t('board.exit_edit') ?? 'Done'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if showDiscardConfirm}
|
||||
<ConfirmDialog
|
||||
title={$t('board.discard_title') ?? 'Discard Changes'}
|
||||
message={$t('board.discard_confirm') ?? 'Are you sure you want to discard all unsaved changes?'}
|
||||
confirmLabel={$t('common.discard') ?? 'Discard'}
|
||||
onConfirm={handleDiscard}
|
||||
onCancel={handleDiscardCancel}
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
Reference in New Issue
Block a user