web-app-launcher/src/lib/components/board/EditToolbar.svelte

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