Link expansion of delete confirmation and color changer together

src/lib/components/notes/note-card.svelte

@@ -34,9 +34,9 @@
 <article class="note-card" style:--note-color={NoteColor[note.color][$themeUpperCase]}>
 	<header class="note-card__header" hidden={$editing}>
 		<div class="note-card__header-buttons">
-			<NoteDeleteButton {note} />
+			<NoteDeleteButton {note} {noteEditorStore} />
 			<div class="note-card__spacer" />
-			<NoteColorPicker {note} />
+			<NoteColorPicker {note} {noteEditorStore} />
 			<NoteTagButton on:click={focusTags} />
 		</div>
 		<div hidden={!showTags && $noteTags.length === 0}>

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

@@ -4,10 +4,11 @@
 	import Button from '../button.svelte';
 	import { notes, themeUpperCase } from '$lib/stores';
 	import type { Note } from '$lib/stores/notes';
+	import type { NoteEditorStore } from '$lib/stores/note-editor';
 
 	export let note: Note;
-
+	export let noteEditorStore: NoteEditorStore;
-	let selectingColor: boolean = false;
+	const { expanded, expand } = noteEditorStore;
 
 	const colors = Object.entries(NoteColor) as [
 		[keyof typeof NoteColor, (typeof NoteColor)[keyof typeof NoteColor]]
@@ -15,12 +16,12 @@
 
 	function changeColor(color: keyof typeof NoteColor) {
 		notes.update(note.id, { color });
-		selectingColor = false;
+		expand(null);
 	}
 </script>
 
-{#if !selectingColor}
+{#if $expanded !== 'colors'}
-	<Button plain icon label="Change color" on:click={() => (selectingColor = true)}>
+	<Button plain icon label="Change color" on:click={() => expand('colors')}>
 		<FaPalette />
 	</Button>
 {:else}

src/lib/components/notes/note-content.svelte

@@ -5,7 +5,6 @@
 
 	export let note: Note;
 	export let noteEditorStore: NoteEditorStore;
-
 	const { editing, draftContent, draftChange } = noteEditorStore;
 </script>
 

src/lib/components/notes/note-delete-button.svelte

@@ -5,14 +5,15 @@
 	import type { Note } from '$lib/stores/notes';
 	import FaCircleXmark from '$icon/fa-circle-xmark.svelte';
 	import FaCircleCheck from '$icon/fa-circle-check.svelte';
+	import type { NoteEditorStore } from '$lib/stores/note-editor';
 
 	export let note: Note;
-
+	export let noteEditorStore: NoteEditorStore;
-	let confirming: boolean = false;
+	const { expanded, expand } = noteEditorStore;
 </script>
 
-{#if !confirming}
+{#if $expanded !== 'delete'}
-	<Button plain icon label="Delete note" on:click={() => (confirming = true)}>
+	<Button plain icon label="Delete note" on:click={() => expand('delete')}>
 		<FaTrash />
 	</Button>
 {:else}
@@ -21,7 +22,7 @@
 		<Button plain icon label="Confirm deletion" on:click={() => notes.remove(note.id)}>
 			<FaCircleCheck />
 		</Button>
-		<Button plain icon label="Cancel deletion" on:click={() => (confirming = false)}>
+		<Button plain icon label="Cancel deletion" on:click={() => expand(null)}>
 			<FaCircleXmark />
 		</Button>
 	</div>

src/lib/stores/note-editor.ts

@@ -1,12 +1,16 @@
 import { get, readonly, writable } from 'svelte/store';
 import type { Note, NotesStore } from './notes';
 
+type ExpandState = 'delete' | 'colors' | null;
+
 export class NoteEditorStore {
 	private _editing = writable<boolean>(false);
 	private _draftContent = writable<string>('');
+	private _expanded = writable<ExpandState>(null);
 
 	readonly editing = readonly(this._editing);
 	readonly draftContent = readonly(this._draftContent);
+	readonly expanded = readonly(this._expanded);
 
 	constructor(private noteId: Note['id'], private notes: NotesStore) {}
 
@@ -29,4 +33,8 @@ export class NoteEditorStore {
 	discard = () => {
 		this._editing.set(false);
 	};
+
+	expand = (expanded: ExpandState) => {
+		this._expanded.set(expanded);
+	};
 }