From edbfe02ee03c5c65040e39c7db4f102fdd45e6d4 Mon Sep 17 00:00:00 2001
From: patrick <patrickjaroszewski@protonmail.com>
Date: Tue, 3 Mar 2026 16:13:22 -0500
Subject: [PATCH] feat: add notes UI components and routes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/routes/(app)/notes/+layout.svelte        |  10 ++
 src/routes/(app)/notes/+page.svelte          | 157 +++++++++++++++++
 src/routes/(app)/notes/NoteActionMenu.svelte | 135 ++++++++++++++
 src/routes/(app)/notes/NoteCard.svelte       | 107 +++++++++++
 src/routes/(app)/notes/NoteEditor.svelte     | 176 +++++++++++++++++++
 src/routes/(app)/notes/NoteSearchBar.svelte  |  38 ++++
 src/routes/(app)/notes/NotesGrid.svelte      |  68 +++++++
 src/routes/(app)/notes/TagInput.svelte       |  65 +++++++
 src/routes/(app)/notes/[id]/+page.svelte     | 122 +++++++++++++
 src/routes/(app)/notes/archive/+page.svelte  |  78 ++++++++
 src/routes/(app)/notes/trash/+page.svelte    | 112 ++++++++++++
 11 files changed, 1068 insertions(+)
 create mode 100644 src/routes/(app)/notes/+layout.svelte
 create mode 100644 src/routes/(app)/notes/+page.svelte
 create mode 100644 src/routes/(app)/notes/NoteActionMenu.svelte
 create mode 100644 src/routes/(app)/notes/NoteCard.svelte
 create mode 100644 src/routes/(app)/notes/NoteEditor.svelte
 create mode 100644 src/routes/(app)/notes/NoteSearchBar.svelte
 create mode 100644 src/routes/(app)/notes/NotesGrid.svelte
 create mode 100644 src/routes/(app)/notes/TagInput.svelte
 create mode 100644 src/routes/(app)/notes/[id]/+page.svelte
 create mode 100644 src/routes/(app)/notes/archive/+page.svelte
 create mode 100644 src/routes/(app)/notes/trash/+page.svelte

diff --git a/src/routes/(app)/notes/+layout.svelte b/src/routes/(app)/notes/+layout.svelte
new file mode 100644
index 0000000..5f43fd8
--- /dev/null
+++ b/src/routes/(app)/notes/+layout.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { setNoteService } from '$lib/context/notes.svelte';
+
+	// Initialize note service for all notes routes
+	setNoteService('default-user');
+
+	let { children } = $props();
+</script>
+
+{@render children()}
diff --git a/src/routes/(app)/notes/+page.svelte b/src/routes/(app)/notes/+page.svelte
new file mode 100644
index 0000000..a6a1c10
--- /dev/null
+++ b/src/routes/(app)/notes/+page.svelte
@@ -0,0 +1,157 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getNoteService } from '$lib/context/notes.svelte';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import * as Tabs from '$lib/components/ui/tabs/index.js';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { Plus, LayoutGrid, List } from '@lucide/svelte';
+	import NotesGrid from './NotesGrid.svelte';
+	import NoteSearchBar from './NoteSearchBar.svelte';
+
+	// Get note service from context
+	const noteService = getNoteService();
+
+	let searchQuery = $state('');
+	let currentFilter = $state<'all' | 'pinned' | 'archived' | 'trash'>('all');
+	let view = $state<'grid' | 'list'>('grid');
+
+	// Get filtered notes based on current tab
+	const filteredNotes = $derived(() => {
+		let notes = noteService.activeNotes;
+
+		switch (currentFilter) {
+			case 'pinned':
+				notes = noteService.pinnedNotes;
+				break;
+			case 'archived':
+				notes = noteService.archivedNotes;
+				break;
+			case 'trash':
+				notes = noteService.trashedNotes;
+				break;
+		}
+
+		// Apply search filter
+		if (searchQuery.trim()) {
+			return noteService.searchNotes(searchQuery, notes);
+		}
+
+		return notes;
+	});
+
+	async function createNewNote() {
+		const note = await noteService.createNote({
+			title: '',
+			content: '',
+			tags: new Set()
+		});
+
+		// Wait a bit for the subscription to update
+		await new Promise((resolve) => setTimeout(resolve, 100));
+
+		goto(`/notes/${note.id}`);
+	}
+
+	function openNote(noteId: string) {
+		goto(`/notes/${noteId}`);
+	}
+</script>
+
+<div class="w-full container mx-auto p-6 space-y-6">
+	<!-- Page Header -->
+	<div class="flex items-center justify-between">
+		<div>
+			<h1 class="text-3xl font-bold tracking-tight text-foreground">Notes</h1>
+			<p class="text-muted-foreground">Capture your thoughts with markdown</p>
+		</div>
+
+		<div class="flex items-center gap-3">
+			<!-- View Toggle -->
+			<div class="flex items-center border rounded-md">
+				<Button
+					variant={view === 'grid' ? 'secondary' : 'ghost'}
+					size="icon-sm"
+					onclick={() => (view = 'grid')}
+					aria-label="Grid view"
+				>
+					<LayoutGrid class="h-4 w-4" />
+				</Button>
+				<Button
+					variant={view === 'list' ? 'secondary' : 'ghost'}
+					size="icon-sm"
+					onclick={() => (view = 'list')}
+					aria-label="List view"
+				>
+					<List class="h-4 w-4" />
+				</Button>
+			</div>
+
+			<!-- New Note Button -->
+			<Button onclick={createNewNote} class="gap-2">
+				<Plus class="h-4 w-4" />
+				New Note
+			</Button>
+		</div>
+	</div>
+
+	<Separator />
+
+	<!-- Search and Filters -->
+	<div class="space-y-4">
+		<NoteSearchBar bind:value={searchQuery} />
+
+		<Tabs.Root value={currentFilter} onValueChange={(v) => (currentFilter = v as any)}>
+			<Tabs.List class="grid w-full grid-cols-4">
+				<Tabs.Trigger value="all">
+					All
+					{#if !searchQuery}
+						<span class="ml-1 text-xs text-muted-foreground">
+							({noteService.activeNotes.length})
+						</span>
+					{/if}
+				</Tabs.Trigger>
+				<Tabs.Trigger value="pinned">
+					Pinned
+					{#if !searchQuery}
+						<span class="ml-1 text-xs text-muted-foreground">
+							({noteService.pinnedNotes.length})
+						</span>
+					{/if}
+				</Tabs.Trigger>
+				<Tabs.Trigger value="archived">
+					Archived
+					{#if !searchQuery}
+						<span class="ml-1 text-xs text-muted-foreground">
+							({noteService.archivedNotes.length})
+						</span>
+					{/if}
+				</Tabs.Trigger>
+				<Tabs.Trigger value="trash">
+					Trash
+					{#if !searchQuery}
+						<span class="ml-1 text-xs text-muted-foreground">
+							({noteService.trashedNotes.length})
+						</span>
+					{/if}
+				</Tabs.Trigger>
+			</Tabs.List>
+		</Tabs.Root>
+	</div>
+
+	<!-- Notes Grid -->
+	<NotesGrid
+		notes={filteredNotes()}
+		{view}
+		loading={noteService.loading}
+		emptyMessage={searchQuery
+			? 'No notes match your search'
+			: currentFilter === 'pinned'
+				? 'No pinned notes'
+				: currentFilter === 'archived'
+					? 'No archived notes'
+					: currentFilter === 'trash'
+						? 'Trash is empty'
+						: 'No notes yet'}
+		onNoteClick={(note) => openNote(note.id)}
+	/>
+</div>
diff --git a/src/routes/(app)/notes/NoteActionMenu.svelte b/src/routes/(app)/notes/NoteActionMenu.svelte
new file mode 100644
index 0000000..023882a
--- /dev/null
+++ b/src/routes/(app)/notes/NoteActionMenu.svelte
@@ -0,0 +1,135 @@
+<script lang="ts">
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';
+	import {
+		EllipsisVertical,
+		Pin,
+		Archive,
+		ArchiveRestore,
+		Trash2,
+		RotateCcw,
+		XCircle
+	} from '@lucide/svelte';
+	import { getNoteService } from '$lib/context/notes.svelte';
+	import type { Note } from '$lib/triplit/schema';
+
+	const noteService = getNoteService();
+
+	let { note }: { note: Note } = $props();
+
+	let deleteDialog = $state(false);
+	let permanentDeleteDialog = $state(false);
+
+	async function handlePin() {
+		await noteService.pinNote(note.id, !note.pinned);
+	}
+
+	async function handleArchive() {
+		await noteService.archiveNote(note.id, !note.archived);
+	}
+
+	async function handleDelete() {
+		await noteService.deleteNote(note.id);
+		deleteDialog = false;
+	}
+
+	async function handleRestore() {
+		await noteService.restoreNote(note.id);
+	}
+
+	async function handlePermanentDelete() {
+		await noteService.permanentDelete(note.id);
+		permanentDeleteDialog = false;
+	}
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		<Button variant="ghost" size="icon-sm">
+			<EllipsisVertical class="h-4 w-4" />
+			<span class="sr-only">Note actions</span>
+		</Button>
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content class="w-48">
+		<DropdownMenu.Group>
+			<DropdownMenu.GroupHeading>Actions</DropdownMenu.GroupHeading>
+			<DropdownMenu.Separator />
+
+			{#if !note.deleted}
+				<!-- Pin/Unpin -->
+				<DropdownMenu.Item onclick={handlePin}>
+					<Pin class="h-4 w-4" />
+					{note.pinned ? 'Unpin' : 'Pin note'}
+				</DropdownMenu.Item>
+
+				<!-- Archive/Unarchive -->
+				{#if !note.archived}
+					<DropdownMenu.Item onclick={handleArchive}>
+						<Archive class="h-4 w-4" />
+						Archive
+					</DropdownMenu.Item>
+				{:else}
+					<DropdownMenu.Item onclick={handleArchive}>
+						<ArchiveRestore class="h-4 w-4" />
+						Unarchive
+					</DropdownMenu.Item>
+				{/if}
+
+				<DropdownMenu.Separator />
+
+				<!-- Delete -->
+				<DropdownMenu.Item onclick={() => (deleteDialog = true)}>
+					<Trash2 class="h-4 w-4 text-destructive" />
+					<span>Delete</span>
+				</DropdownMenu.Item>
+			{:else}
+				<!-- Restore from trash -->
+				<DropdownMenu.Item onclick={handleRestore}>
+					<RotateCcw class="h-4 w-4" />
+					Restore
+				</DropdownMenu.Item>
+
+				<DropdownMenu.Separator />
+
+				<!-- Permanent delete -->
+				<DropdownMenu.Item onclick={() => (permanentDeleteDialog = true)}>
+					<XCircle class="h-4 w-4 text-destructive" />
+					<span class="text-destructive">Delete forever</span>
+				</DropdownMenu.Item>
+			{/if}
+		</DropdownMenu.Group>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<!-- Delete Confirmation Dialog -->
+<AlertDialog.Root bind:open={deleteDialog}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Move to trash?</AlertDialog.Title>
+			<AlertDialog.Description>
+				This note will be moved to trash. You can restore it within 30 days.
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+			<Button onclick={handleDelete} variant="destructive">Move to trash</Button>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
+
+<!-- Permanent Delete Confirmation Dialog -->
+<AlertDialog.Root bind:open={permanentDeleteDialog}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Delete permanently?</AlertDialog.Title>
+			<AlertDialog.Description>
+				This action cannot be undone. This will permanently delete the note.
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+			<Button onclick={handlePermanentDelete} variant="destructive">Delete forever</Button>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/src/routes/(app)/notes/NoteCard.svelte b/src/routes/(app)/notes/NoteCard.svelte
new file mode 100644
index 0000000..822d55b
--- /dev/null
+++ b/src/routes/(app)/notes/NoteCard.svelte
@@ -0,0 +1,107 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card/index.js';
+	import { Badge } from '$lib/components/ui/badge/index.js';
+	import { Pin } from '@lucide/svelte';
+	import type { Note } from '$lib/triplit/schema';
+	import NoteActionMenu from './NoteActionMenu.svelte';
+	import { Carta, Markdown } from 'carta-md';
+	import DOMPurify from 'isomorphic-dompurify';
+
+	let { note, view = 'grid', onclick }: { note: Note; view?: 'grid' | 'list'; onclick?: () => void } = $props();
+
+	const carta = new Carta({ sanitizer: DOMPurify.sanitize });
+
+	// Get first line of content as title if title is empty
+	const displayTitle = $derived(note.title || note.content.split('\n')[0] || 'Untitled');
+
+	// Truncate content for preview
+	const previewContent = $derived(() => {
+		const lines = view === 'grid' ? 3 : 2;
+		const contentLines = note.content.split('\n').slice(0, lines);
+		const preview = contentLines.join('\n');
+		return preview.length > 150 ? preview.substring(0, 150) + '...' : preview;
+	});
+
+	// Format relative time
+	function formatRelativeTime(date: Date): string {
+		const now = new Date();
+		const diff = now.getTime() - date.getTime();
+		const seconds = Math.floor(diff / 1000);
+		const minutes = Math.floor(seconds / 60);
+		const hours = Math.floor(minutes / 60);
+		const days = Math.floor(hours / 24);
+		const months = Math.floor(days / 30);
+		const years = Math.floor(days / 365);
+
+		if (years > 0) return `${years}y ago`;
+		if (months > 0) return `${months}mo ago`;
+		if (days > 0) return `${days}d ago`;
+		if (hours > 0) return `${hours}h ago`;
+		if (minutes > 0) return `${minutes}m ago`;
+		return 'Just now';
+	}
+
+	const tags = $derived(Array.from(note.tags));
+</script>
+
+<Card.Root
+	class="cursor-pointer transition-all hover:shadow-md gap-2 {view === 'list' ? 'flex flex-row' : ''}"
+	role="button"
+	tabindex="0"
+	{onclick}
+	onkeydown={(e) => {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			onclick?.();
+		}
+	}}
+>
+	<div class="flex items-start justify-between gap-2 px-6">
+		<div class="flex items-center gap-2 flex-1 min-w-0">
+			{#if note.pinned}
+				<Pin class="h-4 w-4 text-muted-foreground shrink-0" />
+			{/if}
+			<h3 class="font-semibold text-base line-clamp-1">{displayTitle}</h3>
+		</div>
+		<div onclick={(e) => e.stopPropagation()}>
+			<NoteActionMenu {note} />
+		</div>
+	</div>
+
+	<Card.Content class="flex-1">
+		<!-- Content Preview -->
+		{#if note.content}
+			<div class="note-preview text-sm text-muted-foreground {view === 'grid' ? 'line-clamp-3' : 'line-clamp-2'} overflow-hidden">
+				<Markdown {carta} value={previewContent()} />
+			</div>
+		{/if}
+
+		<!-- Tags -->
+		{#if tags.length > 0}
+			<div class="flex flex-wrap gap-1 mt-3">
+				{#each tags.slice(0, 3) as tag (tag)}
+					<Badge variant="outline" class="text-xs">
+						{tag}
+					</Badge>
+				{/each}
+				{#if tags.length > 3}
+					<Badge variant="outline" class="text-xs">
+						+{tags.length - 3}
+					</Badge>
+				{/if}
+			</div>
+		{/if}
+	</Card.Content>
+
+	<Card.Footer>
+		<span class="text-xs text-muted-foreground">
+			{formatRelativeTime(note.updatedAt)}
+		</span>
+	</Card.Footer>
+</Card.Root>
+
+<style>
+	.note-preview :global(*) {
+		margin: 0;
+	}
+</style>
diff --git a/src/routes/(app)/notes/NoteEditor.svelte b/src/routes/(app)/notes/NoteEditor.svelte
new file mode 100644
index 0000000..914a484
--- /dev/null
+++ b/src/routes/(app)/notes/NoteEditor.svelte
@@ -0,0 +1,176 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Carta, MarkdownEditor } from 'carta-md';
+	import DOMPurify from 'isomorphic-dompurify';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { getNoteService } from '$lib/context/notes.svelte';
+
+	// Import Carta styles
+	import 'carta-md/default.css';
+	// import 'carta-md/light.css';
+
+	const noteService = getNoteService();
+
+	let { noteId }: { noteId: string } = $props();
+
+	let note = $derived(noteService.getNoteById(noteId));
+	let title = $state('');
+	let content = $state('');
+	let saveTimeout: ReturnType<typeof setTimeout> | null = null;
+	let lastSaved = $state<Date | null>(null);
+	let isSaving = $state(false);
+	let hasUnsavedChanges = $state(false);
+	let initializedNoteId = $state<string | null>(null);
+	let lastSavedTitle = $state('');
+	let lastSavedContent = $state('');
+
+	// Initialize Carta with DOMPurify sanitization
+	// const carta = new Carta({
+	// 	sanitizer: DOMPurify.sanitize
+	// });
+
+	const carta = new Carta({
+		sanitizer: false,
+		extensions: [
+			// attachment({
+			// 	async upload() {
+			// 		return 'some-url-from-server.xyz';
+			// 	}
+			// }),
+			// emoji(),
+			// slash(),
+			// code()
+		]
+	});
+
+	// Initialize title and content only when noteId changes
+	$effect(() => {
+		if (note && noteId !== initializedNoteId) {
+			title = note.title;
+			content = note.content;
+			lastSavedTitle = note.title;
+			lastSavedContent = note.content;
+			initializedNoteId = noteId;
+		}
+	});
+
+	// Auto-save functionality (500ms debounce after last change)
+	async function saveNote() {
+		if (!note) return;
+
+		hasUnsavedChanges = false;
+		isSaving = true;
+		try {
+			await noteService.updateNote(note.id, {
+				title: title.trim(),
+				content: content.trim()
+			});
+			lastSavedTitle = title.trim();
+			lastSavedContent = content.trim();
+			lastSaved = new Date();
+		} catch (err) {
+			console.error('Failed to save note:', err);
+			hasUnsavedChanges = true; // Restore unsaved state on error
+		} finally {
+			isSaving = false;
+		}
+	}
+
+	function debounceSave() {
+		hasUnsavedChanges = true;
+
+		if (saveTimeout) {
+			clearTimeout(saveTimeout);
+		}
+
+		saveTimeout = setTimeout(() => {
+			saveNote();
+		}, 500);
+	}
+
+	// Save on title change (debounced - waits 500ms after last keystroke)
+	$effect(() => {
+		if (initializedNoteId && title !== lastSavedTitle) {
+			debounceSave();
+		}
+	});
+
+	// Save on content change (debounced - waits 500ms after last keystroke)
+	$effect(() => {
+		if (initializedNoteId && content !== lastSavedContent) {
+			debounceSave();
+		}
+	});
+
+	// Cleanup timeout on unmount
+	onMount(() => {
+		return () => {
+			if (saveTimeout) {
+				clearTimeout(saveTimeout);
+			}
+		};
+	});
+
+	// Format last saved time
+	function formatSaveTime(date: Date | null): string {
+		if (!date) return '';
+		const now = new Date();
+		const diff = now.getTime() - date.getTime();
+		const seconds = Math.floor(diff / 1000);
+
+		if (seconds < 5) return 'Saved just now';
+		if (seconds < 60) return `Saved ${seconds}s ago`;
+
+		const minutes = Math.floor(seconds / 60);
+		if (minutes < 60) return `Saved ${minutes}m ago`;
+
+		return `Saved at ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+	}
+</script>
+
+{#if note}
+	<div class="h-full flex flex-col">
+		<!-- Title Input -->
+		<div class="p-4 pb-0">
+			<Input
+				bind:value={title}
+				placeholder="Note title..."
+				class="text-2xl font-semibold border-none shadow-none px-0 focus-visible:ring-0"
+			/>
+		</div>
+
+		<Separator class="my-4" />
+
+		<!-- Carta Editor -->
+		<div class="flex-1 px-4 pb-4 overflow-hidden">
+			<MarkdownEditor {carta} bind:value={content} mode="tabs" />
+			
+		</div>
+
+		<!-- Save Status -->
+		<div class="px-4 py-2 border-t bg-muted/30">
+			<div class="flex items-center justify-between text-xs text-muted-foreground">
+				<span>
+					{#if isSaving}
+						Saving...
+					{:else if hasUnsavedChanges}
+						Unsaved changes
+					{:else if lastSaved}
+						{formatSaveTime(lastSaved)}
+					{:else}
+						No changes
+					{/if}
+				</span>
+				<span>
+					{content.length} characters
+				</span>
+			</div>
+		</div>
+	</div>
+{:else}
+	<div class="h-full flex items-center justify-center">
+		<p class="text-muted-foreground">Note not found</p>
+	</div>
+{/if}
+
diff --git a/src/routes/(app)/notes/NoteSearchBar.svelte b/src/routes/(app)/notes/NoteSearchBar.svelte
new file mode 100644
index 0000000..b272511
--- /dev/null
+++ b/src/routes/(app)/notes/NoteSearchBar.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Search, X } from '@lucide/svelte';
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Search notes...'
+	}: {
+		value?: string;
+		placeholder?: string;
+	} = $props();
+
+	function clear() {
+		value = '';
+	}
+</script>
+
+<div class="relative w-full">
+	<Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+	<Input
+		bind:value
+		{placeholder}
+		class="pl-9 pr-9"
+		type="search"
+	/>
+	{#if value}
+		<Button
+			variant="ghost"
+			size="icon-sm"
+			class="absolute right-1 top-1/2 -translate-y-1/2"
+			onclick={clear}
+		>
+			<X class="h-4 w-4" />
+			<span class="sr-only">Clear search</span>
+		</Button>
+	{/if}
+</div>
diff --git a/src/routes/(app)/notes/NotesGrid.svelte b/src/routes/(app)/notes/NotesGrid.svelte
new file mode 100644
index 0000000..877fdc8
--- /dev/null
+++ b/src/routes/(app)/notes/NotesGrid.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { Note } from '$lib/triplit/schema';
+	import NoteCard from './NoteCard.svelte';
+	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+
+	let {
+		notes,
+		view = 'grid',
+		loading = false,
+		emptyMessage = 'No notes found',
+		onNoteClick
+	}: {
+		notes: Note[];
+		view?: 'grid' | 'list';
+		loading?: boolean;
+		emptyMessage?: string;
+		onNoteClick?: (note: Note) => void;
+	} = $props();
+</script>
+
+{#if loading}
+	<!-- Loading Skeletons -->
+	<div class="grid {view === 'grid' ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4' : 'grid-cols-1'} gap-4">
+		{#each Array(6) as _}
+			<div class="space-y-3">
+				<Skeleton class="h-32 w-full" />
+			</div>
+		{/each}
+	</div>
+{:else if notes.length === 0}
+	<!-- Empty State -->
+	<div class="flex flex-col items-center justify-center py-16 text-center">
+		<div class="flex h-20 w-20 items-center justify-center rounded-full bg-muted mb-4">
+			<svg
+				class="h-10 w-10 text-muted-foreground"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+				/>
+			</svg>
+		</div>
+		<h3 class="text-lg font-semibold mb-2">{emptyMessage}</h3>
+		<p class="text-muted-foreground max-w-sm">
+			{#if emptyMessage === 'No notes found'}
+				Create your first note to get started.
+			{:else}
+				{emptyMessage}
+			{/if}
+		</p>
+	</div>
+{:else}
+	<!-- Notes Grid/List -->
+	<div
+		class="grid {view === 'grid'
+			? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
+			: 'grid-cols-1'} gap-4"
+	>
+		{#each notes as note (note.id)}
+			<NoteCard {note} {view} onclick={() => onNoteClick?.(note)} />
+		{/each}
+	</div>
+{/if}
diff --git a/src/routes/(app)/notes/TagInput.svelte b/src/routes/(app)/notes/TagInput.svelte
new file mode 100644
index 0000000..6b6c966
--- /dev/null
+++ b/src/routes/(app)/notes/TagInput.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { Badge } from '$lib/components/ui/badge/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { X } from '@lucide/svelte';
+	import { getNoteService } from '$lib/context/notes.svelte';
+	import type { Note } from '$lib/triplit/schema';
+
+	const noteService = getNoteService();
+
+	let { note }: { note: Note } = $props();
+
+	let tagInput = $state('');
+	let tags = $derived(Array.from(note.tags));
+
+	async function addTag() {
+		const tag = tagInput.trim();
+		if (!tag || tags.includes(tag)) {
+			tagInput = '';
+			return;
+		}
+
+		await noteService.addTag(note.id, tag);
+		tagInput = '';
+	}
+
+	async function removeTag(tag: string) {
+		await noteService.removeTag(note.id, tag);
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			addTag();
+		}
+	}
+</script>
+
+<div class="space-y-2">
+	<!-- Tag Input -->
+	<Input
+		bind:value={tagInput}
+		onkeydown={handleKeydown}
+		placeholder="Add a tag..."
+		class="text-sm"
+	/>
+
+	<!-- Tag List -->
+	{#if tags.length > 0}
+		<div class="flex flex-wrap gap-2">
+			{#each tags as tag (tag)}
+				<Badge variant="secondary" class="gap-1">
+					{tag}
+					<button
+						type="button"
+						onclick={() => removeTag(tag)}
+						class="ml-1 hover:text-destructive transition-colors"
+						aria-label="Remove tag"
+					>
+						<X class="h-3 w-3" />
+					</button>
+				</Badge>
+			{/each}
+		</div>
+	{/if}
+</div>
diff --git a/src/routes/(app)/notes/[id]/+page.svelte b/src/routes/(app)/notes/[id]/+page.svelte
new file mode 100644
index 0000000..1a25b88
--- /dev/null
+++ b/src/routes/(app)/notes/[id]/+page.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { getNoteService } from '$lib/context/notes.svelte';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { ArrowLeft, Pin, Archive, ArchiveRestore, MoreVertical } from '@lucide/svelte';
+	import NoteEditor from '../NoteEditor.svelte';
+	import NoteActionMenu from '../NoteActionMenu.svelte';
+	import TagInput from '../TagInput.svelte';
+
+	const noteService = getNoteService();
+	const noteId = $derived($page.params.id);
+	const note = $derived(noteService.getNoteById(noteId));
+
+	let showTagDialog = $state(false);
+
+	async function handlePin() {
+		if (!note) return;
+		await noteService.pinNote(note.id, !note.pinned);
+	}
+
+	async function handleArchive() {
+		if (!note) return;
+		await noteService.archiveNote(note.id, !note.archived);
+		goto('/notes');
+	}
+
+	function goBack() {
+		goto('/notes');
+	}
+</script>
+
+{#if note}
+	<div class="h-screen flex flex-col">
+		<!-- Top App Bar -->
+		<div class="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+			<div class="container mx-auto px-4 py-3">
+				<div class="flex items-center justify-between">
+					<div class="flex items-center gap-2">
+						<Button variant="ghost" size="icon-sm" onclick={goBack}>
+							<ArrowLeft class="h-4 w-4" />
+							<span class="sr-only">Back to notes</span>
+						</Button>
+						<span class="text-sm text-muted-foreground">Back to notes</span>
+					</div>
+
+					<div class="flex items-center gap-2">
+						<!-- Pin Button -->
+						<Button
+							variant={note.pinned ? 'secondary' : 'ghost'}
+							size="icon-sm"
+							onclick={handlePin}
+							title={note.pinned ? 'Unpin note' : 'Pin note'}
+						>
+							<Pin class="h-4 w-4 {note.pinned ? 'fill-current' : ''}" />
+						</Button>
+
+						<!-- Archive Button -->
+						<Button
+							variant="ghost"
+							size="icon-sm"
+							onclick={handleArchive}
+							title={note.archived ? 'Unarchive note' : 'Archive note'}
+						>
+							{#if note.archived}
+								<ArchiveRestore class="h-4 w-4" />
+							{:else}
+								<Archive class="h-4 w-4" />
+							{/if}
+						</Button>
+
+						<!-- Tags Dialog Trigger -->
+						<Button variant="ghost" size="sm" onclick={() => (showTagDialog = true)}>
+							Tags
+						</Button>
+
+						<Separator orientation="vertical" class="h-6" />
+
+						<!-- More Options -->
+						<NoteActionMenu {note} />
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Editor -->
+		<div class="flex-1 overflow-hidden">
+			<NoteEditor {noteId} />
+		</div>
+	</div>
+
+	<!-- Tags Dialog -->
+	<Dialog.Root bind:open={showTagDialog}>
+		<Dialog.Content class="sm:max-w-md">
+			<Dialog.Header>
+				<Dialog.Title>Manage Tags</Dialog.Title>
+				<Dialog.Description>
+					Add or remove tags to organize your notes.
+				</Dialog.Description>
+			</Dialog.Header>
+			<div class="py-4">
+				<TagInput {note} />
+			</div>
+			<Dialog.Footer>
+				<Button onclick={() => (showTagDialog = false)}>Done</Button>
+			</Dialog.Footer>
+		</Dialog.Content>
+	</Dialog.Root>
+{:else}
+	<div class="h-screen flex items-center justify-center">
+		<div class="text-center">
+			<h2 class="text-2xl font-semibold mb-2">Note not found</h2>
+			<p class="text-muted-foreground mb-4">The note you're looking for doesn't exist.</p>
+			<Button onclick={goBack}>
+				<ArrowLeft class="h-4 w-4 mr-2" />
+				Back to notes
+			</Button>
+		</div>
+	</div>
+{/if}
diff --git a/src/routes/(app)/notes/archive/+page.svelte b/src/routes/(app)/notes/archive/+page.svelte
new file mode 100644
index 0000000..a0ddb72
--- /dev/null
+++ b/src/routes/(app)/notes/archive/+page.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getNoteService } from '$lib/context/notes.svelte';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { ArrowLeft, LayoutGrid, List } from '@lucide/svelte';
+	import NotesGrid from '../NotesGrid.svelte';
+	import NoteSearchBar from '../NoteSearchBar.svelte';
+
+	const noteService = getNoteService();
+
+	let searchQuery = $state('');
+	let view = $state<'grid' | 'list'>('grid');
+
+	const filteredNotes = $derived(() => {
+		if (searchQuery.trim()) {
+			return noteService.searchNotes(searchQuery, noteService.archivedNotes);
+		}
+		return noteService.archivedNotes;
+	});
+
+	function openNote(noteId: string) {
+		goto(`/notes/${noteId}`);
+	}
+</script>
+
+<div class="w-full container mx-auto p-6 space-y-6">
+	<!-- Page Header -->
+	<div class="flex items-center justify-between">
+		<div class="flex items-center gap-4">
+			<Button variant="ghost" size="icon-sm" onclick={() => goto('/notes')}>
+				<ArrowLeft class="h-4 w-4" />
+				<span class="sr-only">Back to notes</span>
+			</Button>
+			<div>
+				<h1 class="text-3xl font-bold tracking-tight text-foreground">Archived Notes</h1>
+				<p class="text-muted-foreground">
+					{noteService.archivedNotes.length}
+					{noteService.archivedNotes.length === 1 ? 'note' : 'notes'} archived
+				</p>
+			</div>
+		</div>
+
+		<!-- View Toggle -->
+		<div class="flex items-center border rounded-md">
+			<Button
+				variant={view === 'grid' ? 'secondary' : 'ghost'}
+				size="icon-sm"
+				onclick={() => (view = 'grid')}
+				aria-label="Grid view"
+			>
+				<LayoutGrid class="h-4 w-4" />
+			</Button>
+			<Button
+				variant={view === 'list' ? 'secondary' : 'ghost'}
+				size="icon-sm"
+				onclick={() => (view = 'list')}
+				aria-label="List view"
+			>
+				<List class="h-4 w-4" />
+			</Button>
+		</div>
+	</div>
+
+	<Separator />
+
+	<!-- Search -->
+	<NoteSearchBar bind:value={searchQuery} placeholder="Search archived notes..." />
+
+	<!-- Notes Grid -->
+	<NotesGrid
+		notes={filteredNotes()}
+		{view}
+		loading={noteService.loading}
+		emptyMessage={searchQuery ? 'No archived notes match your search' : 'No archived notes'}
+		onNoteClick={(note) => openNote(note.id)}
+	/>
+</div>
diff --git a/src/routes/(app)/notes/trash/+page.svelte b/src/routes/(app)/notes/trash/+page.svelte
new file mode 100644
index 0000000..4e25bcc
--- /dev/null
+++ b/src/routes/(app)/notes/trash/+page.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getNoteService } from '$lib/context/notes.svelte';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { ArrowLeft, LayoutGrid, List, Trash2 } from '@lucide/svelte';
+	import NotesGrid from '../NotesGrid.svelte';
+	import NoteSearchBar from '../NoteSearchBar.svelte';
+
+	const noteService = getNoteService();
+
+	let searchQuery = $state('');
+	let view = $state<'grid' | 'list'>('grid');
+	let emptyTrashDialog = $state(false);
+
+	const filteredNotes = $derived(() => {
+		if (searchQuery.trim()) {
+			return noteService.searchNotes(searchQuery, noteService.trashedNotes);
+		}
+		return noteService.trashedNotes;
+	});
+
+	async function handleEmptyTrash() {
+		await noteService.emptyTrash();
+		emptyTrashDialog = false;
+	}
+
+	function openNote(noteId: string) {
+		goto(`/notes/${noteId}`);
+	}
+</script>
+
+<div class="w-full container mx-auto p-6 space-y-6">
+	<!-- Page Header -->
+	<div class="flex items-center justify-between">
+		<div class="flex items-center gap-4">
+			<Button variant="ghost" size="icon-sm" onclick={() => goto('/notes')}>
+				<ArrowLeft class="h-4 w-4" />
+				<span class="sr-only">Back to notes</span>
+			</Button>
+			<div>
+				<h1 class="text-3xl font-bold tracking-tight text-foreground">Trash</h1>
+				<p class="text-muted-foreground">
+					{noteService.trashedNotes.length}
+					{noteService.trashedNotes.length === 1 ? 'note' : 'notes'} in trash • Auto-delete after
+					30 days
+				</p>
+			</div>
+		</div>
+
+		<div class="flex items-center gap-3">
+			<!-- View Toggle -->
+			<div class="flex items-center border rounded-md">
+				<Button
+					variant={view === 'grid' ? 'secondary' : 'ghost'}
+					size="icon-sm"
+					onclick={() => (view = 'grid')}
+					aria-label="Grid view"
+				>
+					<LayoutGrid class="h-4 w-4" />
+				</Button>
+				<Button
+					variant={view === 'list' ? 'secondary' : 'ghost'}
+					size="icon-sm"
+					onclick={() => (view = 'list')}
+					aria-label="List view"
+				>
+					<List class="h-4 w-4" />
+				</Button>
+			</div>
+
+			<!-- Empty Trash Button -->
+			{#if noteService.trashedNotes.length > 0}
+				<Button variant="destructive" onclick={() => (emptyTrashDialog = true)} class="gap-2">
+					<Trash2 class="h-4 w-4" />
+					Empty Trash
+				</Button>
+			{/if}
+		</div>
+	</div>
+
+	<Separator />
+
+	<!-- Search -->
+	<NoteSearchBar bind:value={searchQuery} placeholder="Search trash..." />
+
+	<!-- Notes Grid -->
+	<NotesGrid
+		notes={filteredNotes()}
+		{view}
+		loading={noteService.loading}
+		emptyMessage={searchQuery ? 'No trashed notes match your search' : 'Trash is empty'}
+		onNoteClick={(note) => openNote(note.id)}
+	/>
+</div>
+
+<!-- Empty Trash Confirmation Dialog -->
+<AlertDialog.Root bind:open={emptyTrashDialog}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Empty trash?</AlertDialog.Title>
+			<AlertDialog.Description>
+				This will permanently delete all notes in the trash. This action cannot be undone.
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+			<Button onclick={handleEmptyTrash} variant="destructive">Empty trash</Button>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>