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

@@ -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"

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();