From 4b247b2627118282e5f81dc05fb57abe24b5cccd Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <frederic.cabassut@arte.tv>
Date: Fri, 6 Mar 2026 21:35:50 +0100
Subject: [PATCH] style: replace all inline SVGs with Lucide icons

Swap every inline SVG across Header, SearchBar, NoteCard, NoteEditor,
Checklist, and ImageUpload for Lucide components. Use Palette for the
color picker icon instead of the paintbrush. Zero inline SVGs remain.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/Checklist.svelte     | 11 +++++-----
 src/lib/components/ImageUpload.svelte   |  5 ++---
 src/lib/components/Layout/Header.svelte |  5 ++---
 src/lib/components/NoteCard.svelte      | 29 ++++++++++---------------
 src/lib/components/NoteEditor.svelte    | 15 +++++--------
 src/lib/components/SearchBar.svelte     | 10 ++++-----
 todo.md                                 |  5 ++---
 7 files changed, 32 insertions(+), 48 deletions(-)

diff --git a/src/lib/components/Checklist.svelte b/src/lib/components/Checklist.svelte
index 308b62c..88a2657 100644
--- a/src/lib/components/Checklist.svelte
+++ b/src/lib/components/Checklist.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import XIcon from 'lucide-svelte/icons/x';
+	import Plus from 'lucide-svelte/icons/plus';
+
 	interface ChecklistItem {
 		text: string;
 		checked: boolean;
@@ -101,9 +104,7 @@
 				aria-label="Remove item"
 				data-testid="checklist-remove"
 			>
-				<svg class="h-4 w-4 text-[var(--text-muted)]" 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>
+				<XIcon class="h-4 w-4 text-[var(--text-muted)]" />
 			</button>
 		</div>
 	{/each}
@@ -112,9 +113,7 @@
 		class="flex items-center gap-2 text-sm text-[var(--text-muted)] hover:text-[var(--text)]"
 		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>
+		<Plus class="h-4 w-4" />
 		Add item
 	</button>
 </div>
diff --git a/src/lib/components/ImageUpload.svelte b/src/lib/components/ImageUpload.svelte
index 45a359d..3cc047f 100644
--- a/src/lib/components/ImageUpload.svelte
+++ b/src/lib/components/ImageUpload.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import XIcon from 'lucide-svelte/icons/x';
 	import type { Attachment } from '$lib/types/index.js';
 
 	interface Props {
@@ -69,9 +70,7 @@
 						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>
+						<XIcon class="h-3 w-3" />
 					</button>
 				</div>
 			{/each}
diff --git a/src/lib/components/Layout/Header.svelte b/src/lib/components/Layout/Header.svelte
index 93422c4..15aac27 100644
--- a/src/lib/components/Layout/Header.svelte
+++ b/src/lib/components/Layout/Header.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import SearchBar from '../SearchBar.svelte';
 	import SyncIndicator from '../SyncIndicator.svelte';
+	import Menu from 'lucide-svelte/icons/menu';
 
 	interface Props {
 		onMenuToggle: () => void;
@@ -15,9 +16,7 @@
 		class="rounded-sm p-2 hover:bg-[var(--border)]/10"
 		aria-label="Toggle sidebar"
 	>
-		<svg class="h-6 w-6 text-[var(--text)]" 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>
+		<Menu class="h-6 w-6 text-[var(--text)]" />
 	</button>
 
 	<div class="flex items-center gap-2">
diff --git a/src/lib/components/NoteCard.svelte b/src/lib/components/NoteCard.svelte
index fbb334a..030fe98 100644
--- a/src/lib/components/NoteCard.svelte
+++ b/src/lib/components/NoteCard.svelte
@@ -3,6 +3,11 @@
 	import { renderMarkdown } from '$lib/utils/markdown.js';
 	import { togglePin, trashNote, archiveNote, unarchiveNote, restoreNote, deleteNote, updateNote, currentFilter } from '$lib/stores/notes.js';
 	import type { Note } from '$lib/types/index.js';
+	import Undo2 from 'lucide-svelte/icons/undo-2';
+	import Trash2 from 'lucide-svelte/icons/trash-2';
+	import Bookmark from 'lucide-svelte/icons/bookmark';
+	import Archive from 'lucide-svelte/icons/archive';
+	import ArchiveRestore from 'lucide-svelte/icons/archive-restore';
 
 	interface ChecklistItem {
 		text: string;
@@ -117,9 +122,7 @@
 				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>
+				<Undo2 class="h-4 w-4" />
 			</button>
 			<button
 				onclick={stop(() => deleteNote(note.id))}
@@ -127,9 +130,7 @@
 				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>
+				<Trash2 class="h-4 w-4 text-[#b44]" />
 			</button>
 		{:else}
 			<button
@@ -138,9 +139,7 @@
 				title={note.pinned ? 'Unpin' : 'Pin'}
 				data-testid="pin-btn"
 			>
-				<svg class="h-4 w-4 {note.pinned ? 'text-[var(--primary)]' : ''}" 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>
+				<Bookmark class="h-4 w-4 {note.pinned ? 'fill-[var(--primary)] text-[var(--primary)]' : ''}" />
 			</button>
 			{#if $currentFilter === 'archived'}
 				<button
@@ -149,9 +148,7 @@
 					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>
+					<ArchiveRestore class="h-4 w-4" />
 				</button>
 			{:else}
 				<button
@@ -160,9 +157,7 @@
 					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>
+					<Archive class="h-4 w-4" />
 				</button>
 			{/if}
 			<button
@@ -171,9 +166,7 @@
 				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>
+				<Trash2 class="h-4 w-4" />
 			</button>
 		{/if}
 	</div>
diff --git a/src/lib/components/NoteEditor.svelte b/src/lib/components/NoteEditor.svelte
index 89fda0a..5937e55 100644
--- a/src/lib/components/NoteEditor.svelte
+++ b/src/lib/components/NoteEditor.svelte
@@ -7,6 +7,9 @@
 	import { NOTE_COLORS } from '$lib/utils/colors.js';
 	import type { Editor } from '@tiptap/core';
 	import type { Note, NoteColor } from '$lib/types/index.js';
+	import Palette from 'lucide-svelte/icons/palette';
+	import ListChecks from 'lucide-svelte/icons/list-checks';
+	import Code from 'lucide-svelte/icons/code';
 
 	interface Props {
 		note: Note | null;
@@ -133,9 +136,7 @@
 						title="Background color"
 						data-testid="color-picker-toggle"
 					>
-						<svg class="h-5 w-5 text-[var(--text-muted)]" 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>
+						<Palette class="h-5 w-5 text-[var(--text-muted)]" />
 					</button>
 					{#if showColorPicker}
 						<div class="absolute left-0 top-full mt-2 rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] p-2">
@@ -151,9 +152,7 @@
 					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>
+					<ListChecks class="h-5 w-5" />
 				</button>
 
 				<!-- Raw markdown mode toggle -->
@@ -163,9 +162,7 @@
 					title="Markdown mode"
 					data-testid="markdown-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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-					</svg>
+					<Code class="h-5 w-5" />
 				</button>
 			</div>
 
diff --git a/src/lib/components/SearchBar.svelte b/src/lib/components/SearchBar.svelte
index 5213d6d..02c8549 100644
--- a/src/lib/components/SearchBar.svelte
+++ b/src/lib/components/SearchBar.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { notes, loadNotes, currentFilter } from '$lib/stores/notes.js';
 	import type { Note } from '$lib/types/index.js';
+	import Search from 'lucide-svelte/icons/search';
+	import X from 'lucide-svelte/icons/x';
 
 	let query = $state('');
 	let originalNotes: Note[] = [];
@@ -38,9 +40,7 @@
 
 <div class="relative max-w-2xl">
 	<div class="flex items-center rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-base)] px-4 py-2 focus-within:border-[var(--primary)]">
-		<svg class="mr-3 h-5 w-5 text-[var(--text-muted)]" 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>
+		<Search class="mr-3 h-5 w-5 text-[var(--text-muted)]" />
 		<input
 			type="text"
 			placeholder="Search crumbs..."
@@ -51,9 +51,7 @@
 		/>
 		{#if query}
 			<button onclick={clearSearch} class="ml-2 text-[var(--text-muted)] hover:text-[var(--text)]" 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>
+				<X class="h-5 w-5" />
 			</button>
 		{/if}
 	</div>
diff --git a/todo.md b/todo.md
index 5e6697f..17ce89f 100644
--- a/todo.md
+++ b/todo.md
@@ -1,5 +1,4 @@
 - [x] use colors for the cloud status icon that fit more into the colour scheme
 - [x] do we actually have a colour palette and theme ?
-- [ ] choose diffent icon for the background colour
-- [ ] make sure we use only lucid icons everywhere
-- [ ]
+- [x] choose diffent icon for the background colour
+- [x] make sure we use only lucid icons everywhere