From 79c9b12702376c40cbbccd987a1b536703682b2e Mon Sep 17 00:00:00 2001
From: Thomas Richter <git@tricnet.de>
Date: Sun, 1 Feb 2026 22:27:02 +0100
Subject: [PATCH] fix: parse hashtags only on blur/submit, add tag delete UI

- Parse hashtags when content textarea loses focus (blur)
- Parse hashtags when QuickCapture form is submitted
- Add tag display with delete buttons in expanded entry view
- Remove automatic hashtag parsing during typing

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/lib/components/EntryCard.svelte    | 53 +++++++++++++++++++++-
 src/lib/components/QuickCapture.svelte | 17 ++++++-
 src/routes/+page.server.ts             | 62 +++++++++++++++++++++-----
 3 files changed, 118 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/EntryCard.svelte b/src/lib/components/EntryCard.svelte
index 5b48cdb..6c098b1 100644
--- a/src/lib/components/EntryCard.svelte
+++ b/src/lib/components/EntryCard.svelte
@@ -206,6 +206,32 @@
 		await invalidateAll();
 		input.value = '';
 	}
+
+	async function handleContentBlur() {
+		// Parse hashtags from content when focus leaves the textarea
+		const formData = new FormData();
+		formData.append('id', entry.id);
+
+		await fetch('?/parseTags', {
+			method: 'POST',
+			body: formData
+		});
+
+		await invalidateAll();
+	}
+
+	async function handleRemoveTag(tagName: string) {
+		const formData = new FormData();
+		formData.append('id', entry.id);
+		formData.append('tagName', tagName);
+
+		await fetch('?/removeTag', {
+			method: 'POST',
+			body: formData
+		});
+
+		await invalidateAll();
+	}
 </script>
 
 <div class="relative overflow-hidden">
@@ -394,12 +420,13 @@
 
 				<div>
 					<label for="edit-content-{entry.id}" class="block text-sm font-medium text-gray-700 mb-1"
-						>Content</label
+						>Content <span class="font-normal text-gray-500">(use #hashtags for tags)</span></label
 					>
 					<textarea
 						id="edit-content-{entry.id}"
 						bind:value={editContent}
 						oninput={handleInput}
+						onblur={handleContentBlur}
 						rows="4"
 						class="w-full px-3 py-2 border border-gray-200 rounded-lg text-base resize-y focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
 					></textarea>
@@ -491,6 +518,30 @@
 					</div>
 				</div>
 
+				<!-- Tags section -->
+				{#if entry.tags?.length > 0}
+					<div>
+						<label class="block text-sm font-medium text-gray-700 mb-2">Tags</label>
+						<div class="flex flex-wrap gap-2">
+							{#each entry.tags as tag}
+								<span class="inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">
+									#{tag.name}
+									<button
+										type="button"
+										onclick={() => handleRemoveTag(tag.name)}
+										class="hover:bg-blue-200 rounded-full p-0.5"
+										aria-label="Remove tag {tag.name}"
+									>
+										<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+										</svg>
+									</button>
+								</span>
+							{/each}
+						</div>
+					</div>
+				{/if}
+
 				<div class="flex items-center justify-between">
 					<div>
 						<label for="edit-type-{entry.id}" class="block text-sm font-medium text-gray-700 mb-1"
diff --git a/src/lib/components/QuickCapture.svelte b/src/lib/components/QuickCapture.svelte
index 8dfd388..8b63189 100644
--- a/src/lib/components/QuickCapture.svelte
+++ b/src/lib/components/QuickCapture.svelte
@@ -57,6 +57,16 @@
 			console.error('Image upload failed:', result.data?.error);
 		}
 	}
+
+	async function parseTagsForEntry(entryId: string) {
+		const formData = new FormData();
+		formData.append('id', entryId);
+
+		await fetch('?/parseTags', {
+			method: 'POST',
+			body: formData
+		});
+	}
 </script>
 
 <form
@@ -67,14 +77,19 @@
 
 		return async ({ result, update }) => {
 			if (result.type === 'success' && result.data && 'entryId' in result.data) {
+				const entryId = result.data.entryId as string;
+
 				// Update preference
 				$preferences.lastEntryType = type;
 
+				// Parse hashtags from content
+				await parseTagsForEntry(entryId);
+
 				// Upload pending image if exists
 				if (imageToUpload) {
 					isUploading = true;
 					try {
-						await uploadImageForEntry(result.data.entryId as string, imageToUpload);
+						await uploadImageForEntry(entryId, imageToUpload);
 					} finally {
 						isUploading = false;
 						clearPendingImage();
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 152a8fb..3417243 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -54,12 +54,6 @@ export const actions: Actions = {
 			type: type || 'thought'
 		});
 
-		// Parse hashtags from content and save them
-		const hashtags = parseHashtags(content);
-		if (hashtags.length > 0) {
-			tagRepository.updateEntryTags(entry.id, hashtags);
-		}
-
 		return { success: true, entryId: entry.id };
 	},
 
@@ -115,12 +109,6 @@ export const actions: Actions = {
 
 		entryRepository.update(id, updates);
 
-		// Re-parse hashtags if content changed
-		if (contentChanged && updates.content) {
-			const hashtags = parseHashtags(updates.content as string);
-			tagRepository.updateEntryTags(id, hashtags);
-		}
-
 		return { success: true };
 	},
 
@@ -303,5 +291,55 @@ export const actions: Actions = {
 		} catch {
 			return fail(400, { error: 'Invalid tags format' });
 		}
+	},
+
+	parseTags: async ({ request }) => {
+		const formData = await request.formData();
+		const id = formData.get('id')?.toString();
+
+		if (!id) {
+			return fail(400, { error: 'Entry ID is required' });
+		}
+
+		const existing = entryRepository.getById(id);
+		if (!existing) {
+			return fail(404, { error: 'Entry not found' });
+		}
+
+		// Parse hashtags from current content and merge with existing tags
+		const newTags = parseHashtags(existing.content);
+		const existingTags = tagRepository.getByEntryId(id).map((t) => t.name.toLowerCase());
+		const allTags = [...new Set([...existingTags, ...newTags])];
+		tagRepository.updateEntryTags(id, allTags);
+
+		return { success: true };
+	},
+
+	removeTag: async ({ request }) => {
+		const formData = await request.formData();
+		const id = formData.get('id')?.toString();
+		const tagName = formData.get('tagName')?.toString();
+
+		if (!id) {
+			return fail(400, { error: 'Entry ID is required' });
+		}
+
+		if (!tagName) {
+			return fail(400, { error: 'Tag name is required' });
+		}
+
+		const existing = entryRepository.getById(id);
+		if (!existing) {
+			return fail(404, { error: 'Entry not found' });
+		}
+
+		// Get current tags and remove the specified one
+		const currentTags = tagRepository.getByEntryId(id).map((t) => t.name);
+		const updatedTags = currentTags.filter(
+			(t) => t.toLowerCase() !== tagName.toLowerCase()
+		);
+		tagRepository.updateEntryTags(id, updatedTags);
+
+		return { success: true };
 	}
 };