Lock button

src/lib/Palette.svelte

@@ -2,6 +2,8 @@
 	import { Square, Type, Image, Music, Video, Globe } from 'lucide-svelte';
 	import { state } from './state.svelte';
 
+	let locked = $derived(state.locked);
+
 	let imageInput: HTMLInputElement;
 	let soundInput: HTMLInputElement;
 	let videoInput: HTMLInputElement;
@@ -172,36 +174,38 @@
 	}
 </script>
 
-<div class="palette">
-	<button onclick={addTile} title="Tile"><Square size={14} /></button>
-	<button onclick={addText} title="Text"><Type size={14} /></button>
-	<button onclick={() => imageInput.click()} title="Image"><Image size={14} /></button>
-	<button onclick={() => soundInput.click()} title="Sound"><Music size={14} /></button>
-	<button onclick={() => videoInput.click()} title="Video"><Video size={14} /></button>
-	<button onclick={addEmbed} title="Embed"><Globe size={14} /></button>
+{#if !locked}
+	<div class="palette">
+		<button onclick={addTile} title="Tile"><Square size={14} /></button>
+		<button onclick={addText} title="Text"><Type size={14} /></button>
+		<button onclick={() => imageInput.click()} title="Image"><Image size={14} /></button>
+		<button onclick={() => soundInput.click()} title="Sound"><Music size={14} /></button>
+		<button onclick={() => videoInput.click()} title="Video"><Video size={14} /></button>
+		<button onclick={addEmbed} title="Embed"><Globe size={14} /></button>
 
-	<input
-		bind:this={imageInput}
-		type="file"
-		accept="image/*"
-		onchange={handleImageChange}
-		style="display:none"
-	/>
-	<input
-		bind:this={soundInput}
-		type="file"
-		accept="audio/*"
-		onchange={handleSoundChange}
-		style="display:none"
-	/>
-	<input
-		bind:this={videoInput}
-		type="file"
-		accept="video/*"
-		onchange={handleVideoChange}
-		style="display:none"
-	/>
-</div>
+		<input
+			bind:this={imageInput}
+			type="file"
+			accept="image/*"
+			onchange={handleImageChange}
+			style="display:none"
+		/>
+		<input
+			bind:this={soundInput}
+			type="file"
+			accept="audio/*"
+			onchange={handleSoundChange}
+			style="display:none"
+		/>
+		<input
+			bind:this={videoInput}
+			type="file"
+			accept="video/*"
+			onchange={handleVideoChange}
+			style="display:none"
+		/>
+	</div>
+{/if}
 
 <style>
 	.palette {