feat: user-selectable featured images for note card headers

Images are hidden from card thumbnails by default. Users explicitly
feature images via a star toggle in the upload panel, and only featured
images appear in the card header strip.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/lib/components/ImageUpload.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import XIcon from 'lucide-svelte/icons/x';
+	import Star from 'lucide-svelte/icons/star';
 	import RefreshCw from 'lucide-svelte/icons/refresh-cw';
 	import ImageLightbox from './ImageLightbox.svelte';
 	import type { Attachment } from '$lib/types/index.js';
@@ -12,9 +13,10 @@
 		attachments: Attachment[];
 		onUpload: (attachment: Attachment) => void;
 		onRemove: (attachmentId: string) => void;
+		onToggleFeatured?: (attachmentId: string, featured: boolean) => void;
 	}
 
-	let { noteId, attachments = [], onUpload, onRemove }: Props = $props();
+	let { noteId, attachments = [], onUpload, onRemove, onToggleFeatured }: Props = $props();
 
 	let uploading = $state(false);
 	let optimizing = $state(false);
@@ -123,6 +125,15 @@
 						<div class="absolute bottom-0.5 left-0.5 rounded-sm bg-black/50 p-0.5" title="Pending sync">
 							<RefreshCw class="h-3 w-3 text-white" />
 						</div>
+					{:else if onToggleFeatured}
+						<button
+							onclick={() => onToggleFeatured(attachment.id, !attachment.featured)}
+							class="absolute bottom-0.5 right-0.5 rounded-full bg-black/50 p-0.5 {attachment.featured ? 'block' : 'hidden group-hover:block'}"
+							aria-label={attachment.featured ? 'Unfeature image' : 'Feature image'}
+							data-testid="toggle-featured"
+						>
+							<Star class="h-3 w-3 {attachment.featured ? 'fill-[var(--primary)] text-[var(--primary)]' : 'text-white'}" />
+						</button>
 					{/if}
 					<button
 						onclick={() => onRemove(attachment.id)}

src/lib/components/NoteCard.svelte

@@ -48,6 +48,8 @@
 	const doneChecklistItems = $derived(checklistItems.filter(i => i.checked));
 	const sortedChecklistItems = $derived([...activeChecklistItems, ...doneChecklistItems]);
 
+	const featuredAttachments = $derived((note.attachments ?? []).filter(a => a.featured));
+
 	function stop(fn: () => void) {
 		return (e: Event) => {
 			e.stopPropagation();
@@ -81,10 +83,10 @@
 	data-testid="note-card"
 	data-note-id={note.id}
 >
-	<!-- Thumbnail strip -->
-	{#if note.attachments && note.attachments.length > 0}
+	<!-- Thumbnail strip (featured images only) -->
+	{#if featuredAttachments.length > 0}
 		<div class="-mx-4 -mt-4 mb-3 flex overflow-hidden rounded-t-sm" data-testid="card-thumbnails">
-			{#each note.attachments.slice(0, 3) as attachment}
+			{#each featuredAttachments.slice(0, 3) as attachment}
 				<div class="relative min-w-0 flex-1">
 					<!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_click_events_have_key_events -->
 					<img
@@ -97,9 +99,9 @@
 					/>
 				</div>
 			{/each}
-			{#if note.attachments.length > 3}
+			{#if featuredAttachments.length > 3}
 				<div class="absolute right-1 top-1 rounded-sm bg-black/60 px-1.5 py-0.5 text-xs font-medium text-white" data-testid="card-thumbnail-count">
-					+{note.attachments.length - 3}
+					+{featuredAttachments.length - 3}
 				</div>
 			{/if}
 		</div>

src/lib/components/NoteEditor.svelte

@@ -66,6 +66,24 @@
 		attachmentsList = [...attachmentsList, attachment];
 	}
 
+	async function handleToggleFeatured(attachmentId: string, featured: boolean) {
+		if (!noteId) return;
+		try {
+			const res = await fetch(`/api/notes/${noteId}/attachments?attachmentId=${attachmentId}`, {
+				method: 'PATCH',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ featured })
+			});
+			if (res.ok) {
+				attachmentsList = attachmentsList.map((a) =>
+					a.id === attachmentId ? { ...a, featured } : a
+				);
+			}
+		} catch (err) {
+			console.error('Failed to toggle featured:', err);
+		}
+	}
+
 	async function handleAttachmentRemove(attachmentId: string) {
 		if (!noteId) return;
 		try {
@@ -200,6 +218,7 @@
 					attachments={attachmentsList}
 					onUpload={handleAttachmentUpload}
 					onRemove={handleAttachmentRemove}
+					onToggleFeatured={handleToggleFeatured}
 				/>
 			</div>
 		{:else if noteId && attachmentsList.length > 0}