Add setting for default note color

src/lib/components/notes/note-color-picker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import FaPalette from '$icon/fa-palette.svelte';
-	import { NoteColor } from '$lib/db/enums/note-color';
+	import { NoteColor, NoteColorArray } from '$lib/db/enums/note-color';
 	import Button from '../button.svelte';
 	import { notes, themeUpperCase } from '$lib/stores';
 	import type { Note } from '$lib/stores/notes';
@@ -10,10 +10,6 @@
 	export let noteEditorStore: NoteEditorStore;
 	const { expanded, expand } = noteEditorStore;
 
-	const colors = Object.entries(NoteColor) as [
-		[keyof typeof NoteColor, (typeof NoteColor)[keyof typeof NoteColor]]
-	];
-
 	function changeColor(color: keyof typeof NoteColor) {
 		notes.update(note.id, { color });
 		expand(null);
@@ -26,7 +22,7 @@
 	</Button>
 {:else}
 	<div class="color-options">
-		{#each colors as [color, colorData] (color)}
+		{#each NoteColorArray as [color, colorData] (color)}
 			<button
 				type="button"
 				class="color-options__option"

src/lib/components/settings/settings-color-picker.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import FaCircleCheck from '$icon/fa-circle-check.svelte';
+	import { NoteColor, NoteColorArray } from '$lib/db/enums/note-color';
+	import { themeUpperCase } from '$lib/stores';
+
+	export let value: keyof typeof NoteColor;
+</script>
+
+<div class="color-options">
+	{#each NoteColorArray as [color, colorData] (color)}
+		<div class="color-options__option">
+			<input
+				type="radio"
+				name="defaultNoteColor"
+				aria-label={colorData.LABEL}
+				value={color}
+				bind:group={value}
+				class="color-options__control"
+				style:background-color={colorData[$themeUpperCase]}
+			/>
+			{#if value === color}
+				<div class="color-options__check-wrapper">
+					<div class="color-options__check">
+						<FaCircleCheck />
+					</div>
+				</div>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style lang="scss">
+	.color-options {
+		display: flex;
+		justify-content: space-between;
+		gap: 0.4rem;
+		margin: 0.3rem 0;
+
+		&__option {
+			flex: 1 0 0;
+			position: relative;
+		}
+
+		&__control {
+			width: 100%;
+			height: 2.5rem;
+			padding: 0;
+			margin: 0;
+			color: inherit;
+			border: 2px solid currentColor;
+			border-radius: 0.5rem;
+
+			&:focus {
+				border: 2px solid currentColor;
+			}
+		}
+
+		&__check-wrapper {
+			position: absolute;
+			inset: 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		&__check {
+			display: flex;
+			width: 1.2rem;
+			color: black;
+		}
+	}
+
+	@media (min-width: 360px) {
+		.color-options {
+			gap: 0.8rem;
+		}
+	}
+</style>

src/lib/components/settings/settings-modal.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import Modal from '../modal.svelte';
 	import { settings } from '$lib/stores';
+	import SettingsColorPicker from './settings-color-picker.svelte';
 
-	const { open, noteScale } = settings;
+	const { open, noteScale, defaultNoteColor } = settings;
 </script>
 
 <Modal title="Settings" size="sm" bind:open={$open}>
@@ -17,5 +18,8 @@
 			bind:value={$noteScale}
 		/>
 	</label>
-	<!-- TODO: setting for default note color -->
+	<fieldset>
+		<legend>Default Note Color</legend>
+		<SettingsColorPicker bind:value={$defaultNoteColor} />
+	</fieldset>
 </Modal>

src/lib/db/enums/note-color.ts

@@ -30,3 +30,7 @@ export const NoteColor = {
 		DARK: 'hsl(0, 0%, 85%)',
 	},
 } as const;
+
+export const NoteColorArray = Object.entries(NoteColor) as [
+	[keyof typeof NoteColor, (typeof NoteColor)[keyof typeof NoteColor]]
+];