feat: Crumbs by Bretzel — self-hostable notes app MVP

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

src/lib/components/Checklist.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	interface ChecklistItem {
+		text: string;
+		checked: boolean;
+	}
+
+	interface Props {
+		content: string;
+		onChange: (content: string) => void;
+	}
+
+	let { content, onChange }: Props = $props();
+
+	let items = $state<ChecklistItem[]>(parseChecklist(content));
+
+	function parseChecklist(text: string): ChecklistItem[] {
+		if (!text.trim()) return [{ text: '', checked: false }];
+		const lines = text.split('\n');
+		return lines.map((line) => {
+			if (line.startsWith('- [x] ')) return { text: line.slice(6), checked: true };
+			if (line.startsWith('- [ ] ')) return { text: line.slice(6), checked: false };
+			return { text: line, checked: false };
+		});
+	}
+
+	function serializeChecklist(list: ChecklistItem[]): string {
+		return list
+			.map((item) => `- [${item.checked ? 'x' : ' '}] ${item.text}`)
+			.join('\n');
+	}
+
+	function emitChange() {
+		onChange(serializeChecklist(items));
+	}
+
+	function toggleItem(index: number) {
+		items[index].checked = !items[index].checked;
+		emitChange();
+	}
+
+	function updateText(index: number, text: string) {
+		items[index].text = text;
+		emitChange();
+	}
+
+	function addItem(afterIndex: number) {
+		items.splice(afterIndex + 1, 0, { text: '', checked: false });
+		items = [...items];
+		emitChange();
+		// Focus new input on next tick
+		setTimeout(() => {
+			const inputs = document.querySelectorAll<HTMLInputElement>('[data-testid="checklist-input"]');
+			inputs[afterIndex + 1]?.focus();
+		}, 0);
+	}
+
+	function removeItem(index: number) {
+		if (items.length <= 1) return;
+		items.splice(index, 1);
+		items = [...items];
+		emitChange();
+	}
+
+	function handleKeydown(e: KeyboardEvent, index: number) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			addItem(index);
+		} else if (e.key === 'Backspace' && items[index].text === '' && items.length > 1) {
+			e.preventDefault();
+			removeItem(index);
+			setTimeout(() => {
+				const inputs = document.querySelectorAll<HTMLInputElement>('[data-testid="checklist-input"]');
+				inputs[Math.max(0, index - 1)]?.focus();
+			}, 0);
+		}
+	}
+</script>
+
+<div class="space-y-1" data-testid="checklist">
+	{#each items as item, index}
+		<div class="flex items-center gap-2">
+			<input
+				type="checkbox"
+				checked={item.checked}
+				onchange={() => toggleItem(index)}
+				class="h-4 w-4 rounded border-gray-300 text-amber-600 focus:ring-amber-500"
+				data-testid="checklist-checkbox"
+			/>
+			<input
+				type="text"
+				value={item.text}
+				oninput={(e) => updateText(index, (e.target as HTMLInputElement).value)}
+				onkeydown={(e) => handleKeydown(e, index)}
+				class="flex-1 bg-transparent text-sm outline-none {item.checked ? 'text-gray-400 line-through' : 'text-gray-800 dark:text-gray-200'}"
+				placeholder="List item"
+				data-testid="checklist-input"
+			/>
+			<button
+				onclick={() => removeItem(index)}
+				class="opacity-0 hover:opacity-100 focus:opacity-100"
+				aria-label="Remove item"
+				data-testid="checklist-remove"
+			>
+				<svg class="h-4 w-4 text-gray-400" 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>
+		</div>
+	{/each}
+	<button
+		onclick={() => addItem(items.length - 1)}
+		class="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+		data-testid="checklist-add"
+	>
+		<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+		</svg>
+		Add item
+	</button>
+</div>

src/lib/components/ColorPicker.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { NOTE_COLORS, COLOR_OPTIONS } from '$lib/utils/colors.js';
+	import { effectiveTheme } from '$lib/stores/theme.js';
+	import type { NoteColor } from '$lib/types/index.js';
+
+	interface Props {
+		selected: NoteColor;
+		onSelect: (color: NoteColor) => void;
+	}
+
+	let { selected, onSelect }: Props = $props();
+</script>
+
+<div class="flex flex-wrap gap-1" data-testid="color-picker">
+	{#each COLOR_OPTIONS as option}
+		{@const colors = NOTE_COLORS[option.value]}
+		<button
+			onclick={() => onSelect(option.value)}
+			class="h-8 w-8 rounded-full border-2 transition-transform hover:scale-110 {selected === option.value ? 'border-gray-800 dark:border-white' : 'border-transparent'}"
+			style="background-color: {$effectiveTheme === 'dark' ? colors.dark : colors.light}"
+			title={option.label}
+			data-testid="color-{option.value}"
+		></button>
+	{/each}
+</div>

src/lib/components/ImageUpload.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import type { Attachment } from '$lib/types/index.js';
+
+	interface Props {
+		noteId: string;
+		attachments: Attachment[];
+		onUpload: (attachment: Attachment) => void;
+		onRemove: (attachmentId: string) => void;
+	}
+
+	let { noteId, attachments = [], onUpload, onRemove }: Props = $props();
+
+	let uploading = $state(false);
+	let dragOver = $state(false);
+
+	async function handleFiles(files: FileList | null) {
+		if (!files || !noteId) return;
+
+		uploading = true;
+		for (const file of files) {
+			if (!file.type.startsWith('image/')) continue;
+
+			const formData = new FormData();
+			formData.append('file', file);
+
+			try {
+				const res = await fetch(`/api/notes/${noteId}/attachments`, {
+					method: 'POST',
+					body: formData
+				});
+				if (res.ok) {
+					const attachment = await res.json();
+					onUpload(attachment);
+				}
+			} catch (err) {
+				console.error('Upload failed:', err);
+			}
+		}
+		uploading = false;
+	}
+
+	function handleDrop(e: DragEvent) {
+		e.preventDefault();
+		dragOver = false;
+		handleFiles(e.dataTransfer?.files ?? null);
+	}
+
+	function handleDragOver(e: DragEvent) {
+		e.preventDefault();
+		dragOver = true;
+	}
+</script>
+
+<div data-testid="image-upload">
+	<!-- Existing attachments -->
+	{#if attachments.length > 0}
+		<div class="mb-2 flex flex-wrap gap-2">
+			{#each attachments as attachment}
+				<div class="group relative">
+					<img
+						src="/api/notes/{noteId}/attachments/{attachment.id}"
+						alt={attachment.filename}
+						class="h-20 w-20 rounded object-cover"
+						data-testid="attachment-thumbnail"
+					/>
+					<button
+						onclick={() => onRemove(attachment.id)}
+						class="absolute -right-1 -top-1 hidden rounded-full bg-red-500 p-0.5 text-white group-hover:block"
+						aria-label="Remove attachment"
+						data-testid="remove-attachment"
+					>
+						<svg class="h-3 w-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>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Upload area -->
+	<div
+		class="rounded-lg border-2 border-dashed p-4 text-center transition-colors {dragOver ? 'border-amber-500 bg-amber-50 dark:bg-amber-900/20' : 'border-gray-300 dark:border-gray-600'}"
+		ondrop={handleDrop}
+		ondragover={handleDragOver}
+		ondragleave={() => (dragOver = false)}
+		role="button"
+		tabindex="0"
+		data-testid="upload-dropzone"
+	>
+		{#if uploading}
+			<p class="text-sm text-gray-500">Uploading...</p>
+		{:else}
+			<label class="cursor-pointer">
+				<span class="text-sm text-gray-500">Drop images here or <span class="text-amber-600 underline">browse</span></span>
+				<input
+					type="file"
+					accept="image/*"
+					multiple
+					class="hidden"
+					onchange={(e) => handleFiles((e.target as HTMLInputElement).files)}
+					data-testid="file-input"
+				/>
+			</label>
+		{/if}
+	</div>
+</div>

src/lib/components/Layout/Header.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import SearchBar from '../SearchBar.svelte';
+	import ThemeToggle from '../ThemeToggle.svelte';
+	import SyncIndicator from '../SyncIndicator.svelte';
+
+	interface Props {
+		onMenuToggle: () => void;
+	}
+
+	let { onMenuToggle }: Props = $props();
+</script>
+
+<header class="sticky top-0 z-30 flex h-16 items-center gap-4 border-b border-gray-200 bg-white px-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+	<button
+		onclick={onMenuToggle}
+		class="rounded-full p-2 hover:bg-gray-100 dark:hover:bg-gray-800"
+		aria-label="Toggle sidebar"
+	>
+		<svg class="h-6 w-6 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+		</svg>
+	</button>
+
+	<div class="flex items-center gap-2">
+		<span class="text-2xl">🥨</span>
+		<h1 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Crumbs</h1>
+	</div>
+
+	<div class="mx-4 flex-1">
+		<SearchBar />
+	</div>
+
+	<div class="flex items-center gap-2">
+		<SyncIndicator />
+		<ThemeToggle />
+	</div>
+</header>

src/lib/components/Layout/Sidebar.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { currentFilter, loadNotes, allTags, selectedTag } from '$lib/stores/notes.js';
+	import type { NoteFilter } from '$lib/types/index.js';
+
+	interface Props {
+		open: boolean;
+	}
+
+	let { open }: Props = $props();
+
+	function setFilter(filter: NoteFilter) {
+		selectedTag.set(null);
+		loadNotes(filter);
+	}
+
+	function selectTag(tag: string | null) {
+		selectedTag.set(tag);
+		loadNotes('all');
+	}
+</script>
+
+<aside
+	class="fixed left-0 top-16 z-20 h-[calc(100vh-4rem)] w-64 transform border-r border-gray-200 bg-white transition-transform duration-200 dark:border-gray-700 dark:bg-gray-900 {open ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0"
+>
+	<nav class="p-2">
+		<ul class="space-y-1">
+			<li>
+				<button
+					onclick={() => setFilter('all')}
+					class="flex w-full items-center gap-3 rounded-full px-6 py-3 text-left text-sm transition-colors {$currentFilter === 'all' && !$selectedTag ? 'bg-amber-100 text-amber-900 dark:bg-amber-900/30 dark:text-amber-200' : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'}"
+				>
+					<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+					</svg>
+					Notes
+				</button>
+			</li>
+			<li>
+				<button
+					onclick={() => setFilter('archived')}
+					class="flex w-full items-center gap-3 rounded-full px-6 py-3 text-left text-sm transition-colors {$currentFilter === 'archived' ? 'bg-amber-100 text-amber-900 dark:bg-amber-900/30 dark:text-amber-200' : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'}"
+				>
+					<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+					</svg>
+					Archive
+				</button>
+			</li>
+			<li>
+				<button
+					onclick={() => setFilter('trashed')}
+					class="flex w-full items-center gap-3 rounded-full px-6 py-3 text-left text-sm transition-colors {$currentFilter === 'trashed' ? 'bg-amber-100 text-amber-900 dark:bg-amber-900/30 dark:text-amber-200' : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'}"
+				>
+					<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+					</svg>
+					Trash
+				</button>
+			</li>
+		</ul>
+
+		{#if $allTags.length > 0}
+			<div class="mt-6 border-t border-gray-200 pt-4 dark:border-gray-700">
+				<h3 class="px-6 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Tags</h3>
+				<ul class="mt-2 space-y-1">
+					{#each $allTags as tag}
+						<li>
+							<button
+								onclick={() => selectTag($selectedTag === tag ? null : tag)}
+								class="flex w-full items-center gap-3 rounded-full px-6 py-2 text-left text-sm transition-colors {$selectedTag === tag ? 'bg-amber-100 text-amber-900 dark:bg-amber-900/30 dark:text-amber-200' : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'}"
+							>
+								<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+								</svg>
+								#{tag}
+							</button>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/if}
+	</nav>
+</aside>

src/lib/components/Layout/Toast.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+
+	interface ToastMessage {
+		id: number;
+		text: string;
+		type: 'info' | 'success' | 'error';
+		action?: { label: string; handler: () => void };
+	}
+
+	let counter = 0;
+	export const toasts = writable<ToastMessage[]>([]);
+
+	export function showToast(
+		text: string,
+		type: 'info' | 'success' | 'error' = 'info',
+		action?: { label: string; handler: () => void },
+		duration = 4000
+	) {
+		const id = ++counter;
+		toasts.update((t) => [...t, { id, text, type, action }]);
+		if (!action) {
+			setTimeout(() => dismiss(id), duration);
+		}
+	}
+
+	export function dismiss(id: number) {
+		toasts.update((t) => t.filter((toast) => toast.id !== id));
+	}
+</script>
+
+<div class="fixed bottom-4 left-1/2 z-50 flex -translate-x-1/2 flex-col gap-2">
+	{#each $toasts as toast (toast.id)}
+		<div
+			class="flex items-center gap-3 rounded-lg px-4 py-3 shadow-lg {toast.type === 'error' ? 'bg-red-600 text-white' : toast.type === 'success' ? 'bg-green-600 text-white' : 'bg-gray-800 text-white dark:bg-gray-200 dark:text-gray-900'}"
+		>
+			<span class="text-sm">{toast.text}</span>
+			{#if toast.action}
+				<button
+					onclick={() => { toast.action?.handler(); dismiss(toast.id); }}
+					class="text-sm font-semibold underline"
+				>
+					{toast.action.label}
+				</button>
+			{/if}
+			<button onclick={() => dismiss(toast.id)} class="ml-2 opacity-70 hover:opacity-100">&times;</button>
+		</div>
+	{/each}
+</div>

src/lib/components/NoteCard.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import { NOTE_COLORS } from '$lib/utils/colors.js';
+	import { effectiveTheme } from '$lib/stores/theme.js';
+	import { stripMarkdown } from '$lib/utils/markdown.js';
+	import { togglePin, trashNote, archiveNote, unarchiveNote, restoreNote, deleteNote, currentFilter } from '$lib/stores/notes.js';
+	import type { Note } from '$lib/types/index.js';
+
+	interface Props {
+		note: Note;
+		onEdit: (note: Note) => void;
+	}
+
+	let { note, onEdit }: Props = $props();
+
+	$effect(() => {
+		const colors = NOTE_COLORS[note.color];
+		const bg = $effectiveTheme === 'dark' ? colors.dark : colors.light;
+		cardStyle = `background-color: ${bg}`;
+	});
+
+	let cardStyle = $state('');
+
+	const preview = $derived(stripMarkdown(note.content).slice(0, 200));
+
+	function stop(fn: () => void) {
+		return (e: Event) => {
+			e.stopPropagation();
+			fn();
+		};
+	}
+</script>
+
+<article
+	class="group relative cursor-pointer rounded-lg border border-gray-200 p-4 shadow-sm transition-shadow hover:shadow-md dark:border-gray-700"
+	style={cardStyle}
+	onclick={() => onEdit(note)}
+	onkeydown={(e) => e.key === 'Enter' && onEdit(note)}
+	role="button"
+	tabindex="0"
+	data-testid="note-card"
+	data-note-id={note.id}
+>
+	{#if note.title}
+		<h3 class="mb-2 text-sm font-semibold text-gray-900 dark:text-gray-100">{note.title}</h3>
+	{/if}
+
+	{#if preview}
+		<p class="line-clamp-6 text-sm text-gray-700 dark:text-gray-300">{preview}</p>
+	{/if}
+
+	{#if note.tags && note.tags.length > 0}
+		<div class="mt-2 flex flex-wrap gap-1">
+			{#each note.tags as tag}
+				<span class="rounded-full bg-gray-200/60 px-2 py-0.5 text-xs text-gray-600 dark:bg-gray-700/60 dark:text-gray-400">
+					#{tag}
+				</span>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Action buttons - show on hover -->
+	<div class="absolute bottom-1 right-1 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+		{#if $currentFilter === 'trashed'}
+			<button
+				onclick={stop(() => restoreNote(note.id))}
+				class="rounded-full p-1.5 hover:bg-black/10 dark:hover:bg-white/10"
+				title="Restore"
+				data-testid="restore-btn"
+			>
+				<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
+				</svg>
+			</button>
+			<button
+				onclick={stop(() => deleteNote(note.id))}
+				class="rounded-full p-1.5 hover:bg-black/10 dark:hover:bg-white/10"
+				title="Delete forever"
+				data-testid="delete-forever-btn"
+			>
+				<svg class="h-4 w-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+				</svg>
+			</button>
+		{:else}
+			<button
+				onclick={stop(() => togglePin(note.id, note.pinned))}
+				class="rounded-full p-1.5 hover:bg-black/10 dark:hover:bg-white/10"
+				title={note.pinned ? 'Unpin' : 'Pin'}
+				data-testid="pin-btn"
+			>
+				<svg class="h-4 w-4 {note.pinned ? 'text-amber-600' : ''}" fill={note.pinned ? 'currentColor' : 'none'} stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
+				</svg>
+			</button>
+			{#if $currentFilter === 'archived'}
+				<button
+					onclick={stop(() => unarchiveNote(note.id))}
+					class="rounded-full p-1.5 hover:bg-black/10 dark:hover:bg-white/10"
+					title="Unarchive"
+					data-testid="unarchive-btn"
+				>
+					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+					</svg>
+				</button>
+			{:else}
+				<button
+					onclick={stop(() => archiveNote(note.id))}
+					class="rounded-full p-1.5 hover:bg-black/10 dark:hover:bg-white/10"
+					title="Archive"
+					data-testid="archive-btn"
+				>
+					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+					</svg>
+				</button>
+			{/if}
+			<button
+				onclick={stop(() => trashNote(note.id))}
+				class="rounded-full p-1.5 hover:bg-black/10 dark:hover:bg-white/10"
+				title="Delete"
+				data-testid="trash-btn"
+			>
+				<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+				</svg>
+			</button>
+		{/if}
+	</div>
+
+	<!-- Pin indicator -->
+	{#if note.pinned}
+		<div class="absolute right-2 top-2">
+			<svg class="h-4 w-4 text-amber-600" fill="currentColor" viewBox="0 0 24 24">
+				<path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
+			</svg>
+		</div>
+	{/if}
+</article>

src/lib/components/NoteEditor.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import ColorPicker from './ColorPicker.svelte';
+	import Checklist from './Checklist.svelte';
+	import { updateNote, createNote } from '$lib/stores/notes.js';
+	import { renderMarkdown } from '$lib/utils/markdown.js';
+	import { NOTE_COLORS } from '$lib/utils/colors.js';
+	import { effectiveTheme } from '$lib/stores/theme.js';
+	import type { Note, NoteColor } from '$lib/types/index.js';
+
+	interface Props {
+		note: Note | null;
+		isNew?: boolean;
+		onClose: () => void;
+	}
+
+	let { note, isNew = false, onClose }: Props = $props();
+
+	let title = $state(note?.title || '');
+	let content = $state(note?.content || '');
+	let color = $state<NoteColor>(note?.color || 'default');
+	let checklistMode = $state(note?.checklistMode || false);
+	let showPreview = $state(false);
+	let showColorPicker = $state(false);
+
+	let bgStyle = $state('');
+	$effect(() => {
+		const colors = NOTE_COLORS[color];
+		bgStyle = `background-color: ${$effectiveTheme === 'dark' ? colors.dark : colors.light}`;
+	});
+
+	const renderedContent = $derived(renderMarkdown(content));
+
+	async function save() {
+		if (!title.trim() && !content.trim()) {
+			onClose();
+			return;
+		}
+
+		if (isNew) {
+			await createNote({ title, content, color, checklistMode });
+		} else if (note) {
+			await updateNote(note.id, { title, content, color, checklistMode });
+		}
+		onClose();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			save();
+		}
+	}
+
+	function handleColorSelect(c: NoteColor) {
+		color = c;
+		showColorPicker = false;
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="fixed inset-0 z-40 flex items-start justify-center bg-black/50 pt-20"
+	onclick={save}
+	onkeydown={handleKeydown}
+	data-testid="note-editor-overlay"
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="mx-4 w-full max-w-xl rounded-lg border border-gray-200 shadow-xl dark:border-gray-700"
+		style={bgStyle}
+		onclick={(e) => e.stopPropagation()}
+		onkeydown={(e) => { e.stopPropagation(); handleKeydown(e); }}
+		data-testid="note-editor"
+	>
+		<!-- Title -->
+		<input
+			type="text"
+			placeholder="Title"
+			bind:value={title}
+			class="w-full bg-transparent px-4 pt-4 text-lg font-semibold text-gray-900 outline-none placeholder:text-gray-500 dark:text-gray-100"
+			data-testid="note-title-input"
+		/>
+
+		<!-- Content -->
+		{#if checklistMode}
+			<div class="px-4 py-2">
+				<Checklist {content} onChange={(c) => (content = c)} />
+			</div>
+		{:else if showPreview}
+			<div
+				class="prose prose-sm dark:prose-invert min-h-[100px] max-w-none px-4 py-2"
+				data-testid="note-preview"
+			>
+				{@html renderedContent}
+			</div>
+		{:else}
+			<textarea
+				placeholder="Take a note..."
+				bind:value={content}
+				class="min-h-[100px] w-full resize-none bg-transparent px-4 py-2 text-sm text-gray-800 outline-none placeholder:text-gray-500 dark:text-gray-200"
+				rows="6"
+				data-testid="note-content-input"
+			></textarea>
+		{/if}
+
+		<!-- Toolbar -->
+		<div class="flex items-center justify-between border-t border-gray-200/50 px-2 py-2 dark:border-gray-700/50">
+			<div class="flex items-center gap-1">
+				<!-- Color picker toggle -->
+				<div class="relative">
+					<button
+						onclick={() => (showColorPicker = !showColorPicker)}
+						class="rounded-full p-2 hover:bg-black/10 dark:hover:bg-white/10"
+						title="Background color"
+						data-testid="color-picker-toggle"
+					>
+						<svg class="h-5 w-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+						</svg>
+					</button>
+					{#if showColorPicker}
+						<div class="absolute left-0 top-full mt-2 rounded-lg border border-gray-200 bg-white p-2 shadow-lg dark:border-gray-700 dark:bg-gray-800">
+							<ColorPicker selected={color} onSelect={handleColorSelect} />
+						</div>
+					{/if}
+				</div>
+
+				<!-- Preview toggle -->
+				<button
+					onclick={() => (showPreview = !showPreview)}
+					class="rounded-full p-2 hover:bg-black/10 dark:hover:bg-white/10"
+					title={showPreview ? 'Edit' : 'Preview'}
+					data-testid="preview-toggle"
+				>
+					<svg class="h-5 w-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						{#if showPreview}
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+						{:else}
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+						{/if}
+					</svg>
+				</button>
+
+				<!-- Checklist mode toggle -->
+				<button
+					onclick={() => (checklistMode = !checklistMode)}
+					class="rounded-full p-2 hover:bg-black/10 dark:hover:bg-white/10 {checklistMode ? 'text-amber-600' : ''}"
+					title="Checklist mode"
+					data-testid="checklist-toggle"
+				>
+					<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+					</svg>
+				</button>
+			</div>
+
+			<button
+				onclick={save}
+				class="rounded px-4 py-1 text-sm font-medium text-gray-700 hover:bg-black/10 dark:text-gray-300 dark:hover:bg-white/10"
+				data-testid="close-editor-btn"
+			>
+				Close
+			</button>
+		</div>
+	</div>
+</div>

src/lib/components/NoteGrid.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import NoteCard from './NoteCard.svelte';
+	import type { Note } from '$lib/types/index.js';
+
+	interface Props {
+		notes: Note[];
+		label?: string;
+		onEdit: (note: Note) => void;
+	}
+
+	let { notes, label = '', onEdit }: Props = $props();
+</script>
+
+{#if notes.length > 0}
+	{#if label}
+		<p class="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">{label}</p>
+	{/if}
+	<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4" data-testid="note-grid">
+		{#each notes as note (note.id)}
+			<NoteCard {note} {onEdit} />
+		{/each}
+	</div>
+{/if}

src/lib/components/SearchBar.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { notes, loadNotes, currentFilter } from '$lib/stores/notes.js';
+	import type { Note } from '$lib/types/index.js';
+
+	let query = $state('');
+	let originalNotes: Note[] = [];
+	let isSearching = $state(false);
+
+	async function handleSearch() {
+		if (!query.trim()) {
+			if (isSearching) {
+				notes.set(originalNotes);
+				isSearching = false;
+			}
+			return;
+		}
+
+		if (!isSearching) {
+			notes.subscribe((n) => (originalNotes = n))();
+			isSearching = true;
+		}
+
+		const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
+		if (res.ok) {
+			const results = await res.json();
+			notes.set(results);
+		}
+	}
+
+	function clearSearch() {
+		query = '';
+		if (isSearching) {
+			notes.set(originalNotes);
+			isSearching = false;
+		}
+	}
+</script>
+
+<div class="relative max-w-2xl">
+	<div class="flex items-center rounded-lg bg-gray-100 px-4 py-2 dark:bg-gray-800">
+		<svg class="mr-3 h-5 w-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+		</svg>
+		<input
+			type="text"
+			placeholder="Search notes..."
+			bind:value={query}
+			oninput={handleSearch}
+			class="w-full bg-transparent text-sm text-gray-800 outline-none placeholder:text-gray-500 dark:text-gray-200"
+			data-testid="search-input"
+		/>
+		{#if query}
+			<button onclick={clearSearch} class="ml-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300" aria-label="Clear search">
+				<svg class="h-5 w-5" 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>
+		{/if}
+	</div>
+</div>

src/lib/components/SyncIndicator.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	// Placeholder for Phase 6 - will be connected to sync store
+	let status: 'synced' | 'syncing' | 'offline' | 'error' = $state('synced');
+</script>
+
+<div class="flex items-center" title="Sync status: {status}" data-testid="sync-indicator">
+	{#if status === 'synced'}
+		<svg class="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 24 24">
+			<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+		</svg>
+	{:else if status === 'syncing'}
+		<svg class="h-5 w-5 animate-spin text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+		</svg>
+	{:else if status === 'offline'}
+		<svg class="h-5 w-5 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
+			<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+		</svg>
+	{:else}
+		<svg class="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 24 24">
+			<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+		</svg>
+	{/if}
+</div>

src/lib/components/TagFilter.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { allTags, selectedTag } from '$lib/stores/notes.js';
+
+	function toggleTag(tag: string) {
+		selectedTag.update((current) => (current === tag ? null : tag));
+	}
+</script>
+
+{#if $allTags.length > 0}
+	<div class="flex flex-wrap gap-2" data-testid="tag-filter">
+		{#each $allTags as tag}
+			<button
+				onclick={() => toggleTag(tag)}
+				class="rounded-full px-3 py-1 text-xs font-medium transition-colors {$selectedTag === tag ? 'bg-amber-200 text-amber-900 dark:bg-amber-800 dark:text-amber-100' : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}"
+				data-testid="tag-chip"
+			>
+				#{tag}
+			</button>
+		{/each}
+	</div>
+{/if}

src/lib/components/ThemeToggle.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { effectiveTheme, toggleTheme } from '$lib/stores/theme.js';
+</script>
+
+<button
+	onclick={toggleTheme}
+	class="rounded-full p-2 hover:bg-gray-100 dark:hover:bg-gray-800"
+	aria-label="Toggle dark mode"
+	data-testid="theme-toggle"
+>
+	{#if $effectiveTheme === 'dark'}
+		<svg class="h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 24 24">
+			<path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+		</svg>
+	{:else}
+		<svg class="h-5 w-5 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
+			<path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+		</svg>
+	{/if}
+</button>