From 3bde75592f9c59ecf3278fc006c425fe7782f4bf Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <cabassut.frederic@gmail.com>
Date: Thu, 5 Mar 2026 23:17:30 +0100
Subject: [PATCH] feat: rename "notes" to "crumbs" throughout the UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace all user-facing "note(s)" with "crumb(s)" — sidebar, search
placeholder, editor placeholders, empty states. Use Lucide icons
(StickyNote, Archive, Trash2, Tag) in sidebar for consistency.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/Layout/Sidebar.svelte | 19 ++++++-------------
 src/lib/components/NoteEditor.svelte     |  4 ++--
 src/lib/components/SearchBar.svelte      |  2 +-
 src/lib/components/TiptapEditor.svelte   |  2 +-
 src/routes/+page.svelte                  | 10 +++++-----
 tests/e2e/notes-crud.spec.ts             |  2 +-
 6 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/Layout/Sidebar.svelte b/src/lib/components/Layout/Sidebar.svelte
index 03661d2..a7f6a05 100644
--- a/src/lib/components/Layout/Sidebar.svelte
+++ b/src/lib/components/Layout/Sidebar.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { currentFilter, loadNotes, allTags, selectedTag } from '$lib/stores/notes.js';
+	import { StickyNote, Archive, Trash2, Tag } from 'lucide-svelte';
 	import type { NoteFilter } from '$lib/types/index.js';
 
 	interface Props {
@@ -29,10 +30,8 @@
 					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' : 'text-gray-700 hover:bg-gray-100'}"
 				>
-					<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
+					<StickyNote size={20} />
+					Crumbs
 				</button>
 			</li>
 			<li>
@@ -40,9 +39,7 @@
 					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' : 'text-gray-700 hover:bg-gray-100'}"
 				>
-					<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 size={20} />
 					Archive
 				</button>
 			</li>
@@ -51,9 +48,7 @@
 					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' : 'text-gray-700 hover:bg-gray-100'}"
 				>
-					<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>
+					<Trash2 size={20} />
 					Trash
 				</button>
 			</li>
@@ -69,9 +64,7 @@
 								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' : 'text-gray-700 hover:bg-gray-100'}"
 							>
-								<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 size={16} />
 								#{tag}
 							</button>
 						</li>
diff --git a/src/lib/components/NoteEditor.svelte b/src/lib/components/NoteEditor.svelte
index 67fa4a3..ddbd19f 100644
--- a/src/lib/components/NoteEditor.svelte
+++ b/src/lib/components/NoteEditor.svelte
@@ -101,7 +101,7 @@
 		{:else if rawMarkdownMode}
 			<textarea
 				bind:this={textareaEl}
-				placeholder="Take a note..."
+				placeholder="Add a crumb..."
 				bind:value={content}
 				class="min-h-[300px] w-full resize-none bg-transparent px-4 py-2 text-sm text-gray-800 outline-none placeholder:text-gray-500"
 				rows="12"
@@ -113,7 +113,7 @@
 				onUpdate={(md) => (content = md)}
 				onEditor={(e) => (tiptapEditor = e)}
 				onTransaction={() => editorTick++}
-				placeholder="Take a note..."
+				placeholder="Add a crumb..."
 			/>
 		{/if}
 
diff --git a/src/lib/components/SearchBar.svelte b/src/lib/components/SearchBar.svelte
index b2d34ca..187d763 100644
--- a/src/lib/components/SearchBar.svelte
+++ b/src/lib/components/SearchBar.svelte
@@ -43,7 +43,7 @@
 		</svg>
 		<input
 			type="text"
-			placeholder="Search notes..."
+			placeholder="Search crumbs..."
 			bind:value={query}
 			oninput={handleSearch}
 			class="w-full bg-transparent text-sm text-gray-800 outline-none placeholder:text-gray-500"
diff --git a/src/lib/components/TiptapEditor.svelte b/src/lib/components/TiptapEditor.svelte
index f80ccdc..91eb71b 100644
--- a/src/lib/components/TiptapEditor.svelte
+++ b/src/lib/components/TiptapEditor.svelte
@@ -16,7 +16,7 @@
 		placeholder?: string;
 	}
 
-	let { content, onUpdate, onEditor, onTransaction, placeholder = 'Take a note...' }: Props = $props();
+	let { content, onUpdate, onEditor, onTransaction, placeholder = 'Add a crumb...' }: Props = $props();
 
 	let element: HTMLDivElement | undefined = $state();
 	let editor: Editor | undefined = $state();
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f51ef6e..a64c1c9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -29,7 +29,7 @@
 			class="w-full rounded-lg border border-gray-300 px-4 py-3 text-left text-sm text-gray-500 shadow-sm transition-shadow hover:shadow-md"
 			data-testid="new-note-btn"
 		>
-			Take a note...
+			Add a crumb...
 		</button>
 	</div>
 {/if}
@@ -63,13 +63,13 @@
 		</svg>
 		<p class="text-lg">
 			{#if $currentFilter === 'trashed'}
-				No notes in trash
+				No crumbs in trash
 			{:else if $currentFilter === 'archived'}
-				No archived notes
+				No archived crumbs
 			{:else if $selectedTag}
-				No notes with tag #{$selectedTag}
+				No crumbs with tag #{$selectedTag}
 			{:else}
-				Notes you add appear here
+				Your crumbs will appear here
 			{/if}
 		</p>
 	</div>
diff --git a/tests/e2e/notes-crud.spec.ts b/tests/e2e/notes-crud.spec.ts
index 624473e..47e3dd6 100644
--- a/tests/e2e/notes-crud.spec.ts
+++ b/tests/e2e/notes-crud.spec.ts
@@ -4,7 +4,7 @@ test.describe('Notes CRUD', () => {
 	test('Scenario: Fresh account shows an empty notes list', async ({ authenticatedPage: page }) => {
 		// Given the user has no notes
 		// Then the empty state message is displayed
-		await expect(page.getByText('Notes you add appear here')).toBeVisible();
+		await expect(page.getByText('Your crumbs will appear here')).toBeVisible();
 	});
 
 	test('Scenario: New note appears in the notes list after creation', async ({ authenticatedPage: page }) => {