chore: bump version to 0.14.0

All isActive() and getAttributes() calls in the template were not
reading the tick prop, so Svelte 5 never re-evaluated them when the
editor state changed. Extracted isActive() and getAttrs() helpers
that consume tick to establish the reactive dependency.

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

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   crumbs:
-    image: ghcr.io/bretzel-app/crumbs:0.11.0
+    image: ghcr.io/bretzel-app/crumbs:0.13.1
     container_name: crumbs
     ports:
       - "3000:3000"

docs/FEATURES.md

@@ -25,8 +25,8 @@
 - Ordered lists (`1. item`)
 - Code blocks (triple backtick)
 - Inline code (single backtick)
-- Tables
 - Links — insert, edit, and remove with URL input
+- Tables (insert, add/delete rows and columns)
 - Dividers (horizontal rules)
 - Text alignment (left, center, right, justify)
 - Line breaks

package.json

@@ -1,7 +1,7 @@
 {
   "name": "crumbs",
   "private": true,
-  "version": "0.11.1",
+  "version": "0.14.0",
   "type": "module",
   "license": "MIT",
   "author": "Bretzel (https://bretzel.app)",
@@ -34,6 +34,10 @@
     "@tiptap/core": "^3.20.1",
     "@tiptap/extension-link": "^3.20.1",
     "@tiptap/extension-placeholder": "^3.20.1",
+    "@tiptap/extension-table": "^3.20.1",
+    "@tiptap/extension-table-cell": "^3.20.1",
+    "@tiptap/extension-table-header": "^3.20.1",
+    "@tiptap/extension-table-row": "^3.20.1",
     "@tiptap/extension-task-item": "^3.20.1",
     "@tiptap/extension-task-list": "^3.20.1",
     "@tiptap/extension-text-align": "^3.20.1",

pnpm-lock.yaml

@@ -28,6 +28,18 @@ importers:
       '@tiptap/extension-placeholder':
         specifier: ^3.20.1
         version: 3.20.1(@tiptap/extensions@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))
+      '@tiptap/extension-table':
+        specifier: ^3.20.1
+        version: 3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1)
+      '@tiptap/extension-table-cell':
+        specifier: ^3.20.1
+        version: 3.20.1(@tiptap/extension-table@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))
+      '@tiptap/extension-table-header':
+        specifier: ^3.20.1
+        version: 3.20.1(@tiptap/extension-table@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))
+      '@tiptap/extension-table-row':
+        specifier: ^3.20.1
+        version: 3.20.1(@tiptap/extension-table@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))
       '@tiptap/extension-task-item':
         specifier: ^3.20.1
         version: 3.20.1(@tiptap/extension-list@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))
@@ -1508,6 +1520,27 @@ packages:
     peerDependencies:
       '@tiptap/core': ^3.20.1
 
+  '@tiptap/extension-table-cell@3.20.1':
+    resolution: {integrity: sha512-nSeboFey+MJqZuCQSbVUajQVaGiypeoUPiGd0CJdyfc0oPsBGGqp7XFJtw5HHEbDqEvSHvGNDoZDFsUTAxUyIg==}
+    peerDependencies:
+      '@tiptap/extension-table': ^3.20.1
+
+  '@tiptap/extension-table-header@3.20.1':
+    resolution: {integrity: sha512-Xsdgik3Bh5xWSkLaPR/6NDLZR5lgUDIN/yiZ7bLtfTsyGxqEvuW2Y9/j/XP3AfsZzGy2/SuA9bM9zxPcFQxwFA==}
+    peerDependencies:
+      '@tiptap/extension-table': ^3.20.1
+
+  '@tiptap/extension-table-row@3.20.1':
+    resolution: {integrity: sha512-uYE0SdY4J81wn/fg8Gum0TVSTTBekQhRGeSwDnRfBBd9JILBsLotBTt4ucM7JOUjrP9BjS+QFCT9EstAchPHfQ==}
+    peerDependencies:
+      '@tiptap/extension-table': ^3.20.1
+
+  '@tiptap/extension-table@3.20.1':
+    resolution: {integrity: sha512-y2o1De3P/FH80nst1D9pYSwtRvxF87WkNAYGurqCkZ6SjwFq1Ifeh9eY+o79R6SCwcfpvQRytCYd+Yw9o5XAtA==}
+    peerDependencies:
+      '@tiptap/core': ^3.20.1
+      '@tiptap/pm': ^3.20.1
+
   '@tiptap/extension-task-item@3.20.1':
     resolution: {integrity: sha512-ZdQld5Jzw/b/zl9TSA3KNkucmQhW5lHS/0YEKb+eFvxMwdHTKSpsTQzrfzbJixcdSqsuKJB+uUCwDDB+l0CRlA==}
     peerDependencies:
@@ -4811,6 +4844,23 @@ snapshots:
     dependencies:
       '@tiptap/core': 3.20.1(@tiptap/pm@3.20.1)
 
+  '@tiptap/extension-table-cell@3.20.1(@tiptap/extension-table@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))':
+    dependencies:
+      '@tiptap/extension-table': 3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1)
+
+  '@tiptap/extension-table-header@3.20.1(@tiptap/extension-table@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))':
+    dependencies:
+      '@tiptap/extension-table': 3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1)
+
+  '@tiptap/extension-table-row@3.20.1(@tiptap/extension-table@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))':
+    dependencies:
+      '@tiptap/extension-table': 3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1)
+
+  '@tiptap/extension-table@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1)':
+    dependencies:
+      '@tiptap/core': 3.20.1(@tiptap/pm@3.20.1)
+      '@tiptap/pm': 3.20.1
+
   '@tiptap/extension-task-item@3.20.1(@tiptap/extension-list@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))':
     dependencies:
       '@tiptap/extension-list': 3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1)

src/app.css

@@ -72,3 +72,33 @@ body::before {
 .prose :where(a):not(:where([class~="not-prose"] *)):hover {
 	color: var(--primary-hover);
 }
+
+/* Table styles for TipTap editor */
+.tiptap table {
+	border-collapse: collapse;
+	width: 100%;
+	margin: 0.5rem 0;
+}
+
+.tiptap th,
+.tiptap td {
+	border: 1px solid var(--border-subtle);
+	padding: 0.375rem 0.625rem;
+	text-align: left;
+	vertical-align: top;
+	min-width: 4rem;
+}
+
+.tiptap th {
+	font-weight: 600;
+	background-color: color-mix(in srgb, var(--bg-base) 60%, transparent);
+}
+
+.tiptap td p,
+.tiptap th p {
+	margin: 0;
+}
+
+.tiptap .selectedCell {
+	background-color: color-mix(in srgb, var(--primary) 12%, transparent);
+}

src/lib/components/CollaboratorPopover.svelte

@@ -47,7 +47,7 @@
 
 	{#if showPopover}
 		<div
-			class="absolute left-0 bottom-full z-20 mb-1 min-w-[160px] rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-2 shadow-[var(--card-shadow)] animate-[fade-in_150ms_ease-out]"
+			class="absolute right-0 bottom-full z-20 mb-1 min-w-[160px] rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-2 shadow-[var(--card-shadow)] animate-[fade-in_150ms_ease-out]"
 			data-testid="collaborator-popover"
 		>
 			<p class="mb-1 text-xs font-semibold text-[var(--text-muted)]">Shared with</p>

src/lib/components/FormattingToolbar.svelte

@@ -23,7 +23,10 @@
 		AlignJustify,
 		Minus,
 		ChevronDown,
-		Ellipsis
+		Table2,
+		BetweenHorizontalEnd,
+		BetweenVerticalEnd,
+		RemoveFormatting
 	} from 'lucide-svelte';
 
 	interface Props {
@@ -35,6 +38,9 @@
 
 	function canUndo() { void tick; return editor?.can().chain().focus().undo().run() ?? false; }
 	function canRedo() { void tick; return editor?.can().chain().focus().redo().run() ?? false; }
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function isActive(nameOrAttrs: any, attrs?: Record<string, any>): boolean { void tick; return editor?.isActive(nameOrAttrs, attrs) ?? false; }
+	function getAttrs(type: string) { void tick; return editor?.getAttributes(type) ?? {}; }
 
 	let openDropdown: string | null = $state(null);
 	let linkUrl: string = $state('');
@@ -110,13 +116,35 @@
 <svelte:document onpointerdown={handlePointerDown} onkeydown={handleKeydown} />
 
 <div
-	class="flex items-center gap-0.5 border-b border-[var(--border-subtle)] px-2 py-1"
+	class="flex flex-wrap items-center gap-0.5 border-b border-[var(--border-subtle)] px-2 py-1"
 	data-testid="formatting-toolbar"
 >
+	<!-- Undo/Redo -->
+	<button
+		onclick={() => editor?.chain().focus().undo().run()}
+		disabled={!canUndo()}
+		class={btnClass(false, !canUndo())}
+		title="Undo"
+		data-testid="format-undo"
+	>
+		<Undo2 size={iconSize} />
+	</button>
+	<button
+		onclick={() => editor?.chain().focus().redo().run()}
+		disabled={!canRedo()}
+		class={btnClass(false, !canRedo())}
+		title="Redo"
+		data-testid="format-redo"
+	>
+		<Redo2 size={iconSize} />
+	</button>
+
+	<div class="mx-1 h-4 w-px shrink-0 bg-[var(--border-subtle)]"></div>
+
 	<!-- Inline -->
 	<button
 		onclick={() => editor?.chain().focus().toggleBold().run()}
-		class={btnClass(editor?.isActive('bold') ?? false)}
+		class={btnClass(isActive('bold'))}
 		title="Bold (Ctrl+B)"
 		data-testid="format-bold"
 	>
@@ -124,7 +152,7 @@
 	</button>
 	<button
 		onclick={() => editor?.chain().focus().toggleItalic().run()}
-		class={btnClass(editor?.isActive('italic') ?? false)}
+		class={btnClass(isActive('italic'))}
 		title="Italic (Ctrl+I)"
 		data-testid="format-italic"
 	>
@@ -132,7 +160,7 @@
 	</button>
 	<button
 		onclick={() => editor?.chain().focus().toggleStrike().run()}
-		class={btnClass(editor?.isActive('strike') ?? false)}
+		class={btnClass(isActive('strike'))}
 		title="Strikethrough (Ctrl+Shift+X)"
 		data-testid="format-strikethrough"
 	>
@@ -140,7 +168,7 @@
 	</button>
 	<button
 		onclick={() => editor?.chain().focus().toggleUnderline().run()}
-		class={btnClass(editor?.isActive('underline') ?? false)}
+		class={btnClass(isActive('underline'))}
 		title="Underline (Ctrl+U)"
 		data-testid="format-underline"
 	>
@@ -153,7 +181,7 @@
 	<div class="relative" data-dropdown="heading">
 		<button
 			onclick={() => toggleDropdown('heading')}
-			class={dropdownBtnClass(editor?.isActive('heading') ?? false)}
+			class={dropdownBtnClass(isActive('heading'))}
 			title="Heading"
 			data-testid="format-heading"
 		>
@@ -164,7 +192,7 @@
 			<div class="absolute left-0 bottom-full z-50 mb-1 min-w-[150px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
 				<button
 					onclick={() => { editor?.chain().focus().toggleHeading({ level: 1 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('heading', { level: 1 }) ?? false)}
+					class={dropdownItemClass(isActive('heading', { level: 1 }))}
 					data-testid="format-h1"
 				>
 					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H1</span>
@@ -172,7 +200,7 @@
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().toggleHeading({ level: 2 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('heading', { level: 2 }) ?? false)}
+					class={dropdownItemClass(isActive('heading', { level: 2 }))}
 					data-testid="format-h2"
 				>
 					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H2</span>
@@ -180,7 +208,7 @@
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().toggleHeading({ level: 3 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('heading', { level: 3 }) ?? false)}
+					class={dropdownItemClass(isActive('heading', { level: 3 }))}
 					data-testid="format-h3"
 				>
 					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H3</span>
@@ -194,7 +222,7 @@
 	<div class="relative" data-dropdown="list">
 		<button
 			onclick={() => toggleDropdown('list')}
-			class={dropdownBtnClass((editor?.isActive('bulletList') || editor?.isActive('orderedList')) ?? false)}
+			class={dropdownBtnClass(isActive('bulletList') || isActive('orderedList'))}
 			title="Lists"
 			data-testid="format-list"
 		>
@@ -205,7 +233,7 @@
 			<div class="absolute left-0 bottom-full z-50 mb-1 min-w-[170px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
 				<button
 					onclick={() => { editor?.chain().focus().toggleBulletList().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('bulletList') ?? false)}
+					class={dropdownItemClass(isActive('bulletList'))}
 					data-testid="format-bullet-list"
 				>
 					<List size={iconSize} />
@@ -213,7 +241,7 @@
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().toggleOrderedList().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('orderedList') ?? false)}
+					class={dropdownItemClass(isActive('orderedList'))}
 					data-testid="format-ordered-list"
 				>
 					<ListOrdered size={iconSize} />
@@ -227,7 +255,7 @@
 	<div class="relative" data-dropdown="link">
 		<button
 			onclick={() => toggleDropdown('link')}
-			class={btnClass(editor?.isActive('link') ?? false)}
+			class={btnClass(isActive('link'))}
 			title="Insert link (Ctrl+K)"
 			data-testid="format-link"
 		>
@@ -259,7 +287,7 @@
 					<button
 						type="button"
 						onclick={openLink}
-						disabled={!editor?.getAttributes('link').href}
+						disabled={!getAttrs('link').href}
 						class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--border)]/5 hover:text-[var(--text)] disabled:opacity-30"
 						title="Open link"
 						data-testid="format-link-open"
@@ -269,7 +297,7 @@
 					<button
 						type="button"
 						onclick={removeLink}
-						disabled={!editor?.isActive('link')}
+						disabled={!isActive('link')}
 						class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--border)]/5 hover:text-red-500 disabled:opacity-30"
 						title="Remove link"
 						data-testid="format-unlink"
@@ -281,99 +309,123 @@
 		{/if}
 	</div>
 
-	<div class="mx-1 h-4 w-px shrink-0 bg-[var(--border-subtle)]"></div>
-
-	<!-- More dropdown -->
-	<div class="relative" data-dropdown="more">
+	<!-- Table dropdown -->
+	<div class="relative" data-dropdown="table">
 		<button
-			onclick={() => toggleDropdown('more')}
-			class={dropdownBtnClass(false)}
-			title="More options"
-			data-testid="format-more"
+			onclick={() => toggleDropdown('table')}
+			class={dropdownBtnClass(isActive('table'))}
+			title="Table"
+			data-testid="format-table"
 		>
-			<Ellipsis size={iconSize} />
+			<Table2 size={iconSize} />
+			<ChevronDown size={chevronSize} />
 		</button>
-		{#if openDropdown === 'more'}
-			<div class="absolute right-0 bottom-full z-50 mb-1 min-w-[170px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
+		{#if openDropdown === 'table'}
+			<div class="absolute left-0 bottom-full z-50 mb-1 min-w-[190px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
 				<button
-					onclick={() => { editor?.chain().focus().undo().run(); closeDropdowns(); }}
-					disabled={!canUndo()}
+					onclick={() => { editor?.chain().focus().insertTable({ rows: 3, cols: 3 }).run(); closeDropdowns(); }}
 					class={dropdownItemClass()}
-					data-testid="format-undo"
+					data-testid="format-table-insert"
 				>
-					<Undo2 size={iconSize} />
-					<span>Undo</span>
+					<Table2 size={iconSize} />
+					<span>Insert table</span>
 				</button>
-				<button
-					onclick={() => { editor?.chain().focus().redo().run(); closeDropdowns(); }}
-					disabled={!canRedo()}
-					class={dropdownItemClass()}
-					data-testid="format-redo"
-				>
-					<Redo2 size={iconSize} />
-					<span>Redo</span>
-				</button>
-				<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
-				<button
-					onclick={() => { editor?.chain().focus().toggleCode().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('code') ?? false)}
-					data-testid="format-code"
-				>
-					<Code size={iconSize} />
-					<span>Inline code</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().toggleBlockquote().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('blockquote') ?? false)}
-					data-testid="format-blockquote"
-				>
-					<TextQuote size={iconSize} />
-					<span>Blockquote</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().toggleCodeBlock().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('codeBlock') ?? false)}
-					data-testid="format-code-block"
-				>
-					<CodeXml size={iconSize} />
-					<span>Code block</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().setHorizontalRule().run(); closeDropdowns(); }}
-					class={dropdownItemClass()}
-					data-testid="format-hr"
-				>
-					<Minus size={iconSize} />
-					<span>Divider</span>
-				</button>
-				<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
+				{#if isActive('table')}
+					<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
+					<button
+						onclick={() => { editor?.chain().focus().addRowAfter().run(); closeDropdowns(); }}
+						class={dropdownItemClass()}
+						data-testid="format-table-add-row"
+					>
+						<BetweenHorizontalEnd size={iconSize} />
+						<span>Add row</span>
+					</button>
+					<button
+						onclick={() => { editor?.chain().focus().addColumnAfter().run(); closeDropdowns(); }}
+						class={dropdownItemClass()}
+						data-testid="format-table-add-col"
+					>
+						<BetweenVerticalEnd size={iconSize} />
+						<span>Add column</span>
+					</button>
+					<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
+					<button
+						onclick={() => { editor?.chain().focus().deleteRow().run(); closeDropdowns(); }}
+						class={dropdownItemClass()}
+						data-testid="format-table-delete-row"
+					>
+						<Minus size={iconSize} />
+						<span>Delete row</span>
+					</button>
+					<button
+						onclick={() => { editor?.chain().focus().deleteColumn().run(); closeDropdowns(); }}
+						class={dropdownItemClass()}
+						data-testid="format-table-delete-col"
+					>
+						<Minus size={iconSize} />
+						<span>Delete column</span>
+					</button>
+					<button
+						onclick={() => { editor?.chain().focus().deleteTable().run(); closeDropdowns(); }}
+						class={`${dropdownItemClass()} text-[var(--destructive)]`}
+						data-testid="format-table-delete"
+					>
+						<RemoveFormatting size={iconSize} />
+						<span>Delete table</span>
+					</button>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Alignment dropdown -->
+	<div class="relative" data-dropdown="align">
+		<button
+			onclick={() => toggleDropdown('align')}
+			class={dropdownBtnClass(isActive({ textAlign: 'center' }) || isActive({ textAlign: 'right' }) || isActive({ textAlign: 'justify' }))}
+			title="Text alignment"
+			data-testid="format-align"
+		>
+			{#if isActive({ textAlign: 'center' })}
+				<AlignCenter size={iconSize} />
+			{:else if isActive({ textAlign: 'right' })}
+				<AlignRight size={iconSize} />
+			{:else if isActive({ textAlign: 'justify' })}
+				<AlignJustify size={iconSize} />
+			{:else}
+				<AlignLeft size={iconSize} />
+			{/if}
+			<ChevronDown size={chevronSize} />
+		</button>
+		{#if openDropdown === 'align'}
+			<div class="absolute right-0 bottom-full z-50 mb-1 min-w-[160px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
 				<button
 					onclick={() => { editor?.chain().focus().setTextAlign('left').run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive({ textAlign: 'left' }) ?? false)}
+					class={dropdownItemClass(isActive({ textAlign: 'left' }))}
 					data-testid="format-align-left"
 				>
 					<AlignLeft size={iconSize} />
-					<span>Align left</span>
+					<span>Left</span>
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().setTextAlign('center').run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive({ textAlign: 'center' }) ?? false)}
+					class={dropdownItemClass(isActive({ textAlign: 'center' }))}
 					data-testid="format-align-center"
 				>
 					<AlignCenter size={iconSize} />
-					<span>Align center</span>
+					<span>Center</span>
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().setTextAlign('right').run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive({ textAlign: 'right' }) ?? false)}
+					class={dropdownItemClass(isActive({ textAlign: 'right' }))}
 					data-testid="format-align-right"
 				>
 					<AlignRight size={iconSize} />
-					<span>Align right</span>
+					<span>Right</span>
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().setTextAlign('justify').run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive({ textAlign: 'justify' }) ?? false)}
+					class={dropdownItemClass(isActive({ textAlign: 'justify' }))}
 					data-testid="format-align-justify"
 				>
 					<AlignJustify size={iconSize} />
@@ -382,4 +434,40 @@
 			</div>
 		{/if}
 	</div>
+
+	<div class="mx-1 h-4 w-px shrink-0 bg-[var(--border-subtle)]"></div>
+
+	<!-- Block-level formatting -->
+	<button
+		onclick={() => editor?.chain().focus().toggleCode().run()}
+		class={btnClass(isActive('code'))}
+		title="Inline code"
+		data-testid="format-code"
+	>
+		<Code size={iconSize} />
+	</button>
+	<button
+		onclick={() => editor?.chain().focus().toggleBlockquote().run()}
+		class={btnClass(isActive('blockquote'))}
+		title="Blockquote"
+		data-testid="format-blockquote"
+	>
+		<TextQuote size={iconSize} />
+	</button>
+	<button
+		onclick={() => editor?.chain().focus().toggleCodeBlock().run()}
+		class={btnClass(isActive('codeBlock'))}
+		title="Code block"
+		data-testid="format-code-block"
+	>
+		<CodeXml size={iconSize} />
+	</button>
+	<button
+		onclick={() => editor?.chain().focus().setHorizontalRule().run()}
+		class={btnClass()}
+		title="Divider"
+		data-testid="format-hr"
+	>
+		<Minus size={iconSize} />
+	</button>
 </div>

src/lib/components/NoteCard.svelte

@@ -2,7 +2,6 @@
 	import { NOTE_COLORS } from '$lib/utils/colors.js';
 	import { renderMarkdown } from '$lib/utils/markdown.js';
 	import { togglePin, trashNote, archiveNote, unarchiveNote, restoreNote, deleteNote, updateNote, leaveNote, currentFilter } from '$lib/stores/notes.js';
-	import TagChip from './TagChip.svelte';
 	import ImageLightbox from './ImageLightbox.svelte';
 	import CollaboratorPopover from './CollaboratorPopover.svelte';
 	import type { Note } from '$lib/types/index.js';
@@ -77,7 +76,7 @@
 
 <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
 <article
-	class="group relative cursor-pointer rounded-sm border border-[var(--border-subtle)] p-4 transition-all hover:border-[var(--primary)] shadow-[var(--card-shadow)] hover:shadow-[var(--card-shadow-hover)] {fullHeight ? 'h-full' : ''}"
+	class="group relative cursor-pointer rounded-sm border border-[var(--border-subtle)] p-4 outline-none transition-all hover:border-[var(--primary)] shadow-[var(--card-shadow)] hover:shadow-[var(--card-shadow-hover)] {fullHeight ? 'h-full' : ''}"
 	style={cardStyle}
 	onclick={() => onEdit(note)}
 	onkeydown={(e) => e.key === 'Enter' && onEdit(note)}
@@ -162,14 +161,6 @@
 		</div>
 	{/if}
 
-	{#if note.tags && note.tags.length > 0}
-		<div class="mt-2 flex flex-wrap gap-1">
-			{#each note.tags as tag}
-				<TagChip {tag} />
-			{/each}
-		</div>
-	{/if}
-
 	<!-- Action buttons - show on hover -->
 	<div class="absolute bottom-1 right-1 flex gap-1 max-md:opacity-100 md:opacity-0 transition-opacity md:group-hover:opacity-100">
 		{#if $currentFilter === 'trashed'}

src/lib/components/NoteEditor.svelte

@@ -201,7 +201,7 @@
 >
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		class="mx-4 flex w-full max-w-xl flex-col rounded-sm border border-[var(--border)] shadow-[var(--card-shadow)] animate-[pop-in_150ms_ease-out]"
+		class="mx-4 flex w-full max-w-xl md:max-w-2xl flex-col overflow-hidden rounded-sm border border-[var(--border)] shadow-[var(--card-shadow)] animate-[pop-in_150ms_ease-out]"
 		style={bgStyle}
 		onclick={(e) => e.stopPropagation()}
 		onkeydown={(e) => { e.stopPropagation(); handleKeydown(e); }}
@@ -214,6 +214,13 @@
 			bind:value={title}
 			class="w-full bg-transparent px-4 pt-4 text-lg font-semibold text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
 			data-testid="note-title-input"
+			onkeydown={(e) => {
+				if (e.key === 'Enter') {
+					e.preventDefault();
+					if (textareaEl) textareaEl.focus();
+					else if (tiptapEditor) tiptapEditor.commands.focus('start');
+				}
+			}}
 		/>
 
 		<!-- Content -->

src/lib/components/NoteGrid.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import NoteCard from './NoteCard.svelte';
-	import GripVertical from 'lucide-svelte/icons/grip-vertical';
-	import { dragHandleZone, dragHandle, type DndEvent } from 'svelte-dnd-action';
+	import { dndzone, type DndEvent } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
 	import type { Note } from '$lib/types/index.js';
 
@@ -44,20 +43,12 @@
 		<div
 			class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
 			data-testid="note-grid"
-			use:dragHandleZone={{ items: localItems, flipDurationMs, type: dndType, dropTargetStyle: {} }}
+			use:dndzone={{ items: localItems, flipDurationMs, type: dndType, dropTargetStyle: {}, delayTouchStart: 400 }}
 			onconsider={handleConsider}
 			onfinalize={handleFinalize}
 		>
 			{#each localItems as note (note.id)}
-				<div class="relative h-full" animate:flip={{ duration: flipDurationMs }}>
-					<div
-						use:dragHandle
-						aria-label="drag handle for {note.title || 'note'}"
-						class="absolute top-2 left-2 z-10 cursor-grab rounded-sm p-1 text-[var(--text-muted)] opacity-60 hover:opacity-100 hover:bg-[var(--border-subtle)]/50 transition-opacity duration-150"
-						data-testid="note-drag-handle"
-					>
-						<GripVertical class="h-4 w-4" />
-					</div>
+				<div class="h-full outline-none" animate:flip={{ duration: flipDurationMs }}>
 					<NoteCard {note} {onEdit} fullHeight />
 				</div>
 			{/each}

src/lib/components/NotesView.svelte

@@ -2,9 +2,7 @@
 	import NoteGrid from '$lib/components/NoteGrid.svelte';
 	import NoteEditor from '$lib/components/NoteEditor.svelte';
 	import TagFilter from '$lib/components/TagFilter.svelte';
-	import SortSelector from '$lib/components/SortSelector.svelte';
 	import { pinnedNotes, unpinnedNotes, selectedTag, currentFilter, notes, notesLoaded, loadNotes, updateSortOrders } from '$lib/stores/notes.js';
-	import { sortMode } from '$lib/stores/sort.js';
 	import { onMount } from 'svelte';
 	import type { Note, NoteFilter } from '$lib/types/index.js';
 	import Plus from 'lucide-svelte/icons/plus';
@@ -19,10 +17,11 @@
 	let editingNote: Note | null = $state(null);
 	let showNewNote = $state(false);
 
-	// Sync store with route props
+	// Sync store with route props and reload notes when filter changes
 	$effect(() => {
 		currentFilter.set(filter);
 		selectedTag.set(tag);
+		loadNotes(filter);
 	});
 
 	function openEditor(note: Note) {
@@ -55,7 +54,7 @@
 </script>
 
 {#if filter === 'all' && !tag}
-	<div class="mx-auto mb-6 max-w-xl">
+	<div class="mx-auto mb-6 hidden max-w-xl md:block">
 		<button
 			onclick={() => (showNewNote = true)}
 			class="flex w-full items-center gap-3 rounded-sm border border-dashed border-[var(--border-subtle)] bg-[var(--bg-surface)] px-4 py-3 text-left text-sm text-[var(--text-muted)] transition-colors hover:border-[var(--primary)] hover:text-[var(--primary)]"
@@ -65,18 +64,19 @@
 			Add a crumb...
 		</button>
 	</div>
+	<button
+		onclick={() => (showNewNote = true)}
+		class="fixed bottom-6 right-6 z-40 flex h-12 w-12 items-center justify-center rounded-sm border border-[var(--border)] bg-[var(--primary)] text-white shadow-[var(--card-shadow)] transition-colors hover:bg-[var(--primary-hover)] md:hidden"
+		aria-label="Add a crumb"
+		data-testid="new-note-fab"
+	>
+		<Plus class="h-5 w-5" />
+	</button>
 {/if}
 
-{#if filter === 'all'}
-	<div class="mb-4 flex flex-wrap items-start justify-between gap-3">
-		<TagFilter />
-		<SortSelector />
-	</div>
-{:else}
-	<div class="mb-4">
-		<TagFilter />
-	</div>
-{/if}
+<div class="mb-4">
+	<TagFilter />
+</div>
 
 {#if filter === 'archived'}
 	<h2 class="mb-4 text-lg font-medium text-[var(--text-muted)]">Archive</h2>
@@ -88,7 +88,7 @@
 
 {#if $pinnedNotes.length > 0}
 	<div class="mb-6">
-		<NoteGrid notes={$pinnedNotes} label="Pinned" onEdit={openEditor} draggable={$sortMode === 'custom'} dndType="pinned-notes" onReorder={handleReorder} />
+		<NoteGrid notes={$pinnedNotes} label="Pinned" onEdit={openEditor} draggable dndType="pinned-notes" onReorder={handleReorder} />
 	</div>
 {/if}
 
@@ -96,7 +96,7 @@
 	notes={$unpinnedNotes}
 	label={$pinnedNotes.length > 0 ? 'Others' : ''}
 	onEdit={openEditor}
-	draggable={$sortMode === 'custom'}
+	draggable
 	dndType="unpinned-notes"
 	onReorder={handleReorder}
 />

src/lib/components/SortSelector.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import Clock from 'lucide-svelte/icons/clock';
-	import CalendarPlus from 'lucide-svelte/icons/calendar-plus';
-	import Hand from 'lucide-svelte/icons/hand';
-	import { sortMode, type SortMode } from '$lib/stores/sort.js';
-
-	const modes: { value: SortMode; label: string; icon: typeof Clock }[] = [
-		{ value: 'updated', label: 'Updated', icon: Clock },
-		{ value: 'created', label: 'Created', icon: CalendarPlus },
-		{ value: 'custom', label: 'Custom', icon: Hand }
-	];
-</script>
-
-<div class="inline-flex rounded-sm border border-[var(--border-subtle)]" data-testid="sort-selector">
-	{#each modes as mode}
-		<button
-			onclick={() => sortMode.set(mode.value)}
-			class="flex items-center gap-1 px-2 py-1 text-xs transition-colors duration-150
-				{$sortMode === mode.value
-					? 'bg-[var(--primary)] text-white'
-					: 'text-[var(--text-muted)] hover:text-[var(--text)]'}"
-			data-testid="sort-{mode.value}"
-			aria-label="Sort by {mode.label}"
-		>
-			<mode.icon class="h-3.5 w-3.5" />
-			<span class="hidden sm:inline">{mode.label}</span>
-		</button>
-	{/each}
-</div>

src/lib/components/SyncIndicator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import { getSyncStatus, onSyncStatusChange, type SyncStatus } from '$lib/sync/client.js';
+	import { getSyncStatus, onSyncStatusChange, sync, type SyncStatus } from '$lib/sync/client.js';
 	import CloudCheck from 'lucide-svelte/icons/cloud-check';
 	import CloudSync from 'lucide-svelte/icons/cloud-sync';
 	import CloudOff from 'lucide-svelte/icons/cloud-off';
@@ -44,7 +44,12 @@
 	});
 </script>
 
-<div class="flex items-center" title="Sync status: {status}" data-testid="sync-indicator">
+<button
+	class="flex cursor-pointer items-center rounded-sm p-1 transition-colors hover:bg-[var(--border-subtle)]/50"
+	title="Sync status: {status} — click to sync"
+	onclick={() => sync()}
+	data-testid="sync-indicator"
+>
 	{#if displayStatus === 'synced'}
 		<CloudCheck class="h-5 w-5 text-[var(--primary)]" />
 	{:else if displayStatus === 'syncing'}
@@ -54,4 +59,4 @@
 	{:else}
 		<CloudAlert class="h-5 w-5 text-[var(--destructive)]" />
 	{/if}
-</div>
+</button>

src/lib/components/TagChip.svelte

@@ -11,7 +11,7 @@
 {#if onclick}
 	<button
 		{onclick}
-		class="rounded-sm px-2 py-0.5 text-xs font-medium transition-colors {active
+		class="whitespace-nowrap rounded-sm px-2 py-0.5 text-xs font-medium transition-colors {active
 			? 'bg-[var(--primary)] text-white'
 			: 'border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-muted)] hover:border-[var(--primary)]'}"
 		data-testid="tag-chip"

src/lib/components/TagFilter.svelte

@@ -15,9 +15,19 @@
 </script>
 
 {#if $allTags.length > 0}
-	<div class="flex flex-wrap gap-2" data-testid="tag-filter">
+	<!-- svelte-ignore css_unused_selector -->
+	<div class="tag-scroll flex gap-2 overflow-x-auto max-md:flex-nowrap md:flex-wrap" data-testid="tag-filter">
 		{#each $allTags as tag}
 			<TagChip {tag} active={isTagActive(tag, $page.url.pathname)} onclick={() => toggleTag(tag)} />
 		{/each}
 	</div>
 {/if}
+
+<style>
+	.tag-scroll {
+		scrollbar-width: none;
+	}
+	.tag-scroll::-webkit-scrollbar {
+		display: none;
+	}
+</style>

src/lib/components/TiptapEditor.svelte

@@ -6,6 +6,10 @@
 	import Underline from '@tiptap/extension-underline';
 	import TextAlign from '@tiptap/extension-text-align';
 	import Placeholder from '@tiptap/extension-placeholder';
+	import { Table } from '@tiptap/extension-table';
+	import { TableRow } from '@tiptap/extension-table-row';
+	import { TableHeader } from '@tiptap/extension-table-header';
+	import { TableCell } from '@tiptap/extension-table-cell';
 	import { Markdown } from 'tiptap-markdown';
 
 	interface Props {
@@ -30,6 +34,10 @@
 				Underline,
 				TextAlign.configure({ types: ['heading', 'paragraph'] }),
 				Placeholder.configure({ placeholder }),
+				Table.configure({ resizable: false }),
+				TableRow,
+				TableHeader,
+				TableCell,
 				Markdown
 			],
 			content,

src/lib/stores/notes.ts

@@ -3,7 +3,6 @@ import type { Note, NoteFilter, NoteCreate, NoteUpdate } from '$lib/types/index.
 import { addToSyncQueue, putNote, deleteNoteFromIdb, getAllNotes, clearNotes as clearIdbNotes } from '$lib/sync/idb.js';
 import { showToast } from '$lib/stores/toast.js';
 import { extractTags } from '$lib/utils/tags.js';
-import { sortMode, type SortMode } from '$lib/stores/sort.js';
 
 export const notes = writable<Note[]>([]);
 export const currentFilter = writable<NoteFilter>('all');
@@ -28,25 +27,20 @@ export const filteredNotes = derived(
 	}
 );
 
-function sortNotes(list: Note[], mode: SortMode): Note[] {
+function sortNotes(list: Note[]): Note[] {
 	return [...list].sort((a, b) => {
-		if (mode === 'created') {
-			return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-		}
-		if (mode === 'custom') {
-			return a.sortOrder - b.sortOrder;
-		}
-		// default: updated
+		const orderDiff = a.sortOrder - b.sortOrder;
+		if (orderDiff !== 0) return orderDiff;
 		return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
 	});
 }
 
-export const pinnedNotes = derived([filteredNotes, sortMode], ([$notes, $sortMode]) =>
-	sortNotes($notes.filter((n) => n.pinned), $sortMode)
+export const pinnedNotes = derived(filteredNotes, ($notes) =>
+	sortNotes($notes.filter((n) => n.pinned))
 );
 
-export const unpinnedNotes = derived([filteredNotes, sortMode], ([$notes, $sortMode]) =>
-	sortNotes($notes.filter((n) => !n.pinned), $sortMode)
+export const unpinnedNotes = derived(filteredNotes, ($notes) =>
+	sortNotes($notes.filter((n) => !n.pinned))
 );
 
 export const allTags = derived(notes, ($notes) => {

src/lib/stores/sort.ts

@@ -1,24 +0,0 @@
-import { writable } from 'svelte/store';
-import { browser } from '$app/environment';
-
-export type SortMode = 'updated' | 'created' | 'custom';
-
-const STORAGE_KEY = 'crumbs-sort-mode';
-
-function getInitial(): SortMode {
-	if (browser) {
-		const stored = localStorage.getItem(STORAGE_KEY);
-		if (stored === 'updated' || stored === 'created' || stored === 'custom') {
-			return stored;
-		}
-	}
-	return 'updated';
-}
-
-export const sortMode = writable<SortMode>(getInitial());
-
-if (browser) {
-	sortMode.subscribe((value) => {
-		localStorage.setItem(STORAGE_KEY, value);
-	});
-}

src/routes/(app)/settings/+page.svelte

@@ -328,7 +328,7 @@
 				<div class="mb-3 text-sm text-[var(--error-text)]">{deleteMsg}</div>
 			{/if}
 
-			<div class="flex items-center gap-3">
+			<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
 				<input
 					type="password"
 					bind:value={deletePassword}
@@ -337,7 +337,7 @@
 				/>
 				<button
 					onclick={deleteAccount}
-					class="rounded-sm bg-[var(--destructive)] px-4 py-2 text-sm font-medium text-white hover:opacity-90"
+					class="whitespace-nowrap rounded-sm bg-[var(--destructive)] px-4 py-2 text-sm font-medium text-white hover:opacity-90"
 				>
 					Confirm delete
 				</button>

src/routes/(app)/settings/mcp/+page.svelte

@@ -126,7 +126,7 @@ ${mcpJsonConfig}`);
 	</p>
 
 	<!-- Create Key Form -->
-	<form onsubmit={createKey} class="mb-6 flex gap-2">
+	<form onsubmit={createKey} class="mb-6 flex flex-col gap-2 sm:flex-row">
 		<input
 			type="text"
 			bind:value={newKeyName}
@@ -182,7 +182,7 @@ ${mcpJsonConfig}`);
 	{:else}
 		<div class="space-y-2" data-testid="api-keys-list">
 			{#each keys as key (key.id)}
-				<div class="flex items-center justify-between rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-base)] px-4 py-3" data-testid="api-key-item">
+				<div class="flex flex-col gap-2 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-base)] px-4 py-3 sm:flex-row sm:items-center sm:justify-between" data-testid="api-key-item">
 					<div class="min-w-0 flex-1">
 						<div class="flex items-center gap-2">
 							<span class="text-sm font-medium text-[var(--text)]" data-testid="api-key-name">{key.name}</span>
@@ -195,7 +195,7 @@ ${mcpJsonConfig}`);
 							{/if}
 						</div>
 					</div>
-					<div class="ml-4">
+					<div class="sm:ml-4">
 						{#if deleteConfirmId === key.id}
 							<div class="flex items-center gap-1">
 								<button

src/routes/(app)/settings/users/+page.svelte

@@ -167,17 +167,17 @@
 
 		<div class="space-y-3">
 			{#each users as user (user.id)}
-				<div class="flex items-center justify-between rounded-sm border border-[var(--border-subtle)] p-4">
-					<div>
-						<p class="font-medium text-[var(--text)]">
+				<div class="flex flex-col gap-2 rounded-sm border border-[var(--border-subtle)] p-4 sm:flex-row sm:items-center sm:justify-between">
+					<div class="min-w-0">
+						<p class="truncate font-medium text-[var(--text)]">
 							{user.displayName || user.email}
 							{#if user.role === 'admin'}
 								<span class="ml-2 rounded-sm bg-[var(--primary)]/15 px-2 py-0.5 text-xs text-[var(--primary)]">admin</span>
 							{/if}
 						</p>
-						<p class="text-sm text-[var(--text-muted)]">{user.email}</p>
+						<p class="truncate text-sm text-[var(--text-muted)]">{user.email}</p>
 					</div>
-					<div class="flex items-center gap-2">
+					<div class="flex flex-wrap items-center gap-2">
 						<button
 							onclick={() => toggleRole(user)}
 							class="rounded-sm px-3 py-1 text-xs text-[var(--text-muted)] hover:bg-[var(--border-subtle)]/50"

tests/e2e/organization.spec.ts

@@ -70,7 +70,7 @@ test.describe('Organization Features', () => {
 });
 
 test.describe('Note Sorting', () => {
-	test('Scenario: Notes can be sorted by last updated', async ({ authenticatedPage: page }) => {
+	test('Scenario: Most recently updated note appears first', async ({ authenticatedPage: page }) => {
 		// Given two notes exist with different update times
 		await page.getByTestId('new-note-btn').click();
 		await page.getByTestId('note-title-input').fill('Sort-First');
@@ -82,9 +82,6 @@ test.describe('Note Sorting', () => {
 		await page.getByTestId('close-editor-btn').click();
 		await expect(noteCard(page, 'Sort-Second')).toBeVisible();
 
-		// When the user selects "Updated" sort mode
-		await page.getByTestId('sort-updated').click();
-
 		// Then Sort-Second (most recently updated) appears before Sort-First
 		const sortFirst = noteCard(page, 'Sort-First');
 		const sortSecond = noteCard(page, 'Sort-Second');
@@ -92,40 +89,4 @@ test.describe('Note Sorting', () => {
 		const secondBox = await sortFirst.boundingBox();
 		expect(firstBox!.y).toBeLessThanOrEqual(secondBox!.y);
 	});
-
-	test('Scenario: Notes can be sorted by creation date', async ({ authenticatedPage: page }) => {
-		// Given two notes exist
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Created-Older');
-		await page.getByTestId('close-editor-btn').click();
-		await expect(noteCard(page, 'Created-Older')).toBeVisible();
-
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Created-Newer');
-		await page.getByTestId('close-editor-btn').click();
-		await expect(noteCard(page, 'Created-Newer')).toBeVisible();
-
-		// When the user selects "Created" sort mode
-		await page.getByTestId('sort-created').click();
-
-		// Then Created-Newer appears before Created-Older
-		const newer = noteCard(page, 'Created-Newer');
-		const older = noteCard(page, 'Created-Older');
-		const newerBox = await newer.boundingBox();
-		const olderBox = await older.boundingBox();
-		expect(newerBox!.y).toBeLessThanOrEqual(olderBox!.y);
-	});
-
-	test('Scenario: Sort preference persists across page reload', async ({ authenticatedPage: page }) => {
-		// Given the user selects "Created" sort mode
-		await page.getByTestId('sort-created').click();
-
-		// When the page is reloaded
-		await page.reload();
-		await page.waitForLoadState('networkidle');
-
-		// Then the "Created" sort mode is still active
-		const createdBtn = page.getByTestId('sort-created');
-		await expect(createdBtn).toHaveClass(/bg-\[var\(--primary\)\]/);
-	});
 });

website/index.html

@@ -253,7 +253,7 @@
 				<li><a href="https://github.com/bretzel-app/crumbs/blob/main/docs/DEPLOYMENT.md" target="_blank" rel="noopener">Docs</a></li>
 				<li><a href="https://github.com/bretzel-app/crumbs/blob/main/LICENSE" target="_blank" rel="noopener">License</a></li>
 			</ul>
-			<span class="footer-version">v0.11.1</span>
+			<span class="footer-version">v0.14.0</span>
 		</div>
 	</footer>