style: add subtle outline to unselected color swatches

Use --border-subtle for unselected swatches instead of transparent,
making each color option visually distinct.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/lib/components/ColorPicker.svelte

@@ -15,7 +15,7 @@
 		{@const colors = NOTE_COLORS[option.value]}
 		<button
 			onclick={() => onSelect(option.value)}
-			class="h-8 w-8 rounded-full border-2 transition-transform hover:scale-110 {selected === option.value ? 'border-[var(--text)]' : 'border-transparent'}"
+			class="h-8 w-8 rounded-full border-2 transition-transform hover:scale-110 {selected === option.value ? 'border-[var(--text)]' : 'border-[var(--border-subtle)]'}"
 			style="background-color: {colors.bg}"
 			title={option.label}
 			data-testid="color-{option.value}"

todo.md

@@ -3,9 +3,10 @@
 - [x] choose diffent icon for the background colour
 - [x] make sure we use only lucid icons everywhere
 - [x] on mobile the header is clutered, maybe we can colapse the search bar into a search icon, and when clicked it opens a search bar to search
-- [ ] let's add an outline on the colour palette selection for the background to make each colour more visible
+- [x] let's add an outline on the colour palette selection for the background to make each colour more visible
 - [ ] on mobile the colour selection overflows outside the screen
 - [ ] let's use another icon for toggling the raw md mode, also the active state doesn't make on this icon now, either we change the icon when it's in one state or the other, or the button should be active when the md state is active
 - [ ] same for the list icon, toggling between this mode is nice but the icon becomes inactive which is weird
 - [ ] on mobile the toolbar collapose on two lines, can we do something so it stays only on one line and we have a dropdown to open the additional options
 - [ ] add this todo.md to gitignore and remove from git
+- [ ] close the menu by default on mobile