chore: Add delete functionality to NoteCard component

frontend/src/lib/components/NoteCard.svelte

@@ -6,13 +6,25 @@
 	const dispatch = createEventDispatcher();
 
 	import Launch from '~icons/mdi/launch';
-	import FileDocumentEdit from '~icons/mdi/file-document-edit';
+	import TrashCan from '~icons/mdi/trash-can';
 
 	export let note: Note;
 
 	function editNote() {
 		dispatch('edit', note);
 	}
+
+	async function deleteNote() {
+		const res = await fetch(`/api/notes/${note.id}`, {
+			method: 'DELETE'
+		});
+		if (res.ok) {
+			addToast('success', 'Note deleted successfully');
+			dispatch('delete', note.id);
+		} else {
+			addToast('Failed to delete note', 'error');
+		}
+	}
 </script>
 
 <div
@@ -27,6 +39,12 @@
 			<button class="btn btn-neutral mb-2" on:click={editNote}>
 				<Launch class="w-6 h-6" />Open
 			</button>
+			<button
+				id="delete_adventure"
+				data-umami-event="Delete Adventure"
+				class="btn btn-warning"
+				on:click={deleteNote}><TrashCan class="w-6 h-6" />Delete</button
+			>
 		</div>
 	</div>
 </div>

frontend/src/lib/components/NoteModal.svelte

@@ -8,10 +8,6 @@
 	export let note: Note | null = null;
 	export let collection: Collection;
 
-	let editing: boolean = true;
-
-	console.log(collection);
-
 	let newNote = {
 		name: note?.name || '',
 		content: note?.content || '',
@@ -20,10 +16,6 @@
 		collection: collection.id,
 		is_public: collection.is_public
 	};
-	console.log(note);
-
-	export let startDate: string | null = null;
-	export let endDate: string | null = null;
 
 	let initialName: string = note?.name || '';
 
@@ -70,7 +62,10 @@
 				body: JSON.stringify(newNote)
 			});
 			if (res.ok) {
-				dispatch('close');
+				let data = await res.json();
+				if (data) {
+					dispatch('create', data);
+				}
 			} else {
 				let data = await res.json();
 				console.error('Failed to save note', data);
@@ -89,7 +84,7 @@
 			<p class="font-semibold text-md mb-2">Editing note {initialName}</p>
 		{/if}
 
-		<form>
+		<form on:submit|preventDefault>
 			<div class="form-control mb-2">
 				<label for="name">Name</label>
 				<input
@@ -105,8 +100,8 @@
 					type="date"
 					id="date"
 					name="date"
-					min={startDate || ''}
-					max={endDate || ''}
+					min={collection.start_date || ''}
+					max={collection.end_date || ''}
 					bind:value={newNote.date}
 					class="input input-bordered w-full max-w-xs mt-1"
 				/>

frontend/src/routes/collections/[id]/+page.svelte

@@ -183,7 +183,7 @@
 	let isEditModalOpen: boolean = false;
 	let isTransportationEditModalOpen: boolean = false;
 	let isNoteModalOpen: boolean = false;
-	let noteToEdit: Note;
+	let noteToEdit: Note | null;
 
 	let newType: string;
 
@@ -247,8 +247,6 @@
 	<NoteModal
 		note={noteToEdit}
 		on:close={() => (isNoteModalOpen = false)}
-		startDate={collection.start_date}
-		endDate={collection.end_date}
 		{collection}
 		on:save={(event) => {
 			notes = notes.map((note) => {
@@ -260,6 +258,10 @@
 			isNoteModalOpen = false;
 		}}
 		on:close={() => (isNoteModalOpen = false)}
+		on:create={(event) => {
+			notes = [event.detail, ...notes];
+			isNoteModalOpen = false;
+		}}
 	/>
 {/if}
 
@@ -387,6 +389,7 @@
 							on:click={() => {
 								isNoteModalOpen = true;
 								newType = '';
+								noteToEdit = null;
 							}}
 						>
 							Note</button
@@ -523,6 +526,9 @@
 								noteToEdit = event.detail;
 								isNoteModalOpen = true;
 							}}
+							on:delete={(event) => {
+								notes = notes.filter((n) => n.id != event.detail);
+							}}
 						/>
 					{/each}
 				{/if}