Lock button

src/lib/Toolbar.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-	import { Upload, Download, Paintbrush, Trash2, EyeOff, ZoomIn } from 'lucide-svelte';
-	import { exportBoard, importBoard } from './io';
+	import { Upload, Download, Paintbrush, Trash2, EyeOff, ZoomIn, Combine, Lock, Unlock } from 'lucide-svelte';
+	import { exportBoard, importBoard, mergeBoard } from './io';
 	import { state } from './state.svelte';
 	import Palette from './Palette.svelte';
 
 	let { onHide }: { onHide?: () => void } = $props();
 
 	let fileInput: HTMLInputElement;
+	let mergeFileInput: HTMLInputElement;
 
 	async function handleExport() {
 		const result = await exportBoard();
@@ -30,6 +31,23 @@
 		input.value = '';
 	}
 
+	function handleMergeClick() {
+		mergeFileInput.click();
+	}
+
+	async function handleMergeChange(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const files = input.files;
+		if (!files || files.length === 0) return;
+		for (const file of files) {
+			const result = await mergeBoard(file);
+			if (!result.success) {
+				alert(result.error || `Merge failed for ${file.name}`);
+			}
+		}
+		input.value = '';
+	}
+
 	function handleClear() {
 		if (confirm('Clear the canvas? This cannot be undone.')) {
 			state.reset();
@@ -93,10 +111,22 @@
 			<span>{zoomPercent}%</span>
 		</button>
 	</div>
-	<button onclick={() => state.editGlobal(true)} title="Style"><Paintbrush size={14} /></button>
-	<button onclick={handleClear} title="Clear"><Trash2 size={14} /></button>
-	<button onclick={handleImportClick} title="Import"><Upload size={14} /></button>
+	<button onclick={() => state.editGlobal(true)} title="Style" disabled={state.locked}><Paintbrush size={14} /></button>
+	<button onclick={handleClear} title="Clear" disabled={state.locked}><Trash2 size={14} /></button>
+	<button onclick={handleImportClick} title="Import" disabled={state.locked}><Upload size={14} /></button>
+	<button onclick={handleMergeClick} title="Merge" disabled={state.locked}><Combine size={14} /></button>
 	<button onclick={handleExport} title="Export"><Download size={14} /></button>
+	<button
+		class:active={state.locked}
+		onclick={() => state.setLocked(!state.locked)}
+		title={state.locked ? 'Unlock' : 'Lock'}
+	>
+		{#if state.locked}
+			<Unlock size={14} />
+		{:else}
+			<Lock size={14} />
+		{/if}
+	</button>
 	{#if onHide}
 		<button onclick={onHide} title="Hide interface"><EyeOff size={14} /></button>
 	{/if}
@@ -107,6 +137,14 @@
 		onchange={handleFileChange}
 		style="display: none"
 	/>
+	<input
+		bind:this={mergeFileInput}
+		type="file"
+		accept=".bub"
+		multiple
+		onchange={handleMergeChange}
+		style="display: none"
+	/>
 </div>
 
 <style>
@@ -163,6 +201,21 @@
 		color: var(--text, #fff);
 	}
 
+	button.active {
+		background: var(--accent, #4a9eff);
+		color: var(--text, #fff);
+	}
+
+	button:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	button:disabled:hover {
+		background: var(--surface, #282c34);
+		color: var(--text-dim, #666);
+	}
+
 	.zoom {
 		display: flex;
 		align-items: center;