feat: add annotation mode

src/lib/Cell.svelte

@@ -1,14 +1,41 @@
 <script lang="ts">
-	let { value, selected, disabled, onclick } = $props();
+	let {
+		value,
+		annotations,
+		selected,
+		disabled,
+		onclick
+	}: {
+		value: number;
+		annotations: number[];
+		selected: boolean;
+		disabled: boolean;
+		onclick: () => void;
+	} = $props();
 </script>
 
 <button
-	class="aspect-square rounded-4xl border"
-	class:bg-amber-600={selected}
+	class="aspect-square rounded-4xl border border-gray-200"
+	class:bg-cyan-500={selected}
 	class:bg-gray-200={disabled}
 	class:cursor-pointer={!disabled}
 	{onclick}
 	{disabled}
 >
-	{value || '-'}
+	<div class="flex items-center justify-center">
+		{#if value}
+			<div>{value || ' '}</div>
+		{:else}
+			<div class="flex flex-wrap justify-center space-y-2 space-x-2 md:flex-col">
+				{#each annotations as nb (nb)}
+					<div
+						class="flex h-9 w-9 items-center justify-center rounded-full bg-emerald-300 p-1"
+						class:bg-white={selected}
+					>
+						{nb}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
 </button>