From 214fdec341acedcb77113ed3a982811ddbbeda4f Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <frederic.cabassut@arte.tv>
Date: Fri, 20 Mar 2026 20:04:44 +0100
Subject: [PATCH] refactor: migrate icons to pixelarticons for SyncIndicator,
 small components, and settings

Replace lucide-svelte imports with @iconify/svelte pixelarticons in
SyncIndicator, NoteHistory, ShareDialog, Checklist, CollaboratorPopover,
ImageLightbox, ImageUpload, NotesView, settings layout, and MCP settings.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/lib/components/Checklist.svelte           | 15 ++++++--------
 src/lib/components/CollaboratorPopover.svelte |  4 ++--
 src/lib/components/ImageLightbox.svelte       |  4 ++--
 src/lib/components/ImageUpload.svelte         | 10 ++++------
 src/lib/components/NoteHistory.svelte         | 12 +++++------
 src/lib/components/NotesView.svelte           |  6 +++---
 src/lib/components/ShareDialog.svelte         | 10 ++++------
 src/lib/components/SyncIndicator.svelte       | 13 +++++-------
 src/routes/(app)/settings/+layout.svelte      | 12 +++++------
 src/routes/(app)/settings/mcp/+page.svelte    | 20 +++++++++----------
 10 files changed, 47 insertions(+), 59 deletions(-)

diff --git a/src/lib/components/Checklist.svelte b/src/lib/components/Checklist.svelte
index 898cf2d..cd5e6e8 100644
--- a/src/lib/components/Checklist.svelte
+++ b/src/lib/components/Checklist.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
-	import XIcon from 'lucide-svelte/icons/x';
-	import Plus from 'lucide-svelte/icons/plus';
-	import GripVertical from 'lucide-svelte/icons/grip-vertical';
-	import ChevronRight from 'lucide-svelte/icons/chevron-right';
+	import Icon from '@iconify/svelte';
 	import { dragHandleZone, dragHandle, type DndEvent } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
 
@@ -123,7 +120,7 @@
 		{#each activeItems as item (item.id)}
 			<div class="group flex items-center gap-2 py-1.5" animate:flip={{ duration: flipDurationMs }}>
 				<div use:dragHandle aria-label="drag handle" class="drag-handle cursor-grab max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100 transition-opacity duration-150" data-testid="checklist-drag-handle">
-					<GripVertical class="h-4 w-4 text-[var(--text-muted)]" />
+					<Icon icon="pixelarticons:drag-and-drop" class="h-4 w-4 text-[var(--text-muted)]" />
 				</div>
 				<input
 					type="checkbox"
@@ -147,7 +144,7 @@
 					aria-label="Remove item"
 					data-testid="checklist-remove"
 				>
-					<XIcon class="h-4 w-4 text-[var(--text-muted)]" />
+					<Icon icon="pixelarticons:close" class="h-4 w-4 text-[var(--text-muted)]" />
 				</button>
 			</div>
 		{/each}
@@ -158,7 +155,7 @@
 		class="flex items-center gap-2 py-1.5 text-sm text-[var(--text-muted)] hover:text-[var(--text)]"
 		data-testid="checklist-add"
 	>
-		<Plus class="h-4 w-4" />
+		<Icon icon="pixelarticons:plus" class="h-4 w-4" />
 		Add item
 	</button>
 
@@ -169,7 +166,7 @@
 				class="flex items-center gap-1 text-xs text-[var(--text-muted)] hover:text-[var(--text)]"
 				data-testid="checklist-toggle-done"
 			>
-				<ChevronRight class="h-3 w-3 transition-transform duration-150 {doneExpanded ? 'rotate-90' : ''}" />
+				<Icon icon="pixelarticons:chevron-right" class="h-3 w-3 transition-transform duration-150 {doneExpanded ? 'rotate-90' : ''}" />
 				{doneCount} done
 			</button>
 
@@ -191,7 +188,7 @@
 								aria-label="Remove item"
 								data-testid="checklist-done-remove"
 							>
-								<XIcon class="h-4 w-4 text-[var(--text-muted)]" />
+								<Icon icon="pixelarticons:close" class="h-4 w-4 text-[var(--text-muted)]" />
 							</button>
 						</div>
 					{/each}
diff --git a/src/lib/components/CollaboratorPopover.svelte b/src/lib/components/CollaboratorPopover.svelte
index 7d5ac34..e96cebe 100644
--- a/src/lib/components/CollaboratorPopover.svelte
+++ b/src/lib/components/CollaboratorPopover.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Collaborator } from '$lib/types/index.js';
-	import Users from 'lucide-svelte/icons/users';
+	import Icon from '@iconify/svelte';
 
 	interface Props {
 		collaborators: Collaborator[];
@@ -42,7 +42,7 @@
 		onclick={handleClick}
 		data-testid="collaborator-indicator"
 	>
-		<Users class="h-4 w-4" />
+		<Icon icon="pixelarticons:users" class="h-4 w-4" />
 	</button>
 
 	{#if showPopover}
diff --git a/src/lib/components/ImageLightbox.svelte b/src/lib/components/ImageLightbox.svelte
index cd58225..fd41df8 100644
--- a/src/lib/components/ImageLightbox.svelte
+++ b/src/lib/components/ImageLightbox.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import XIcon from 'lucide-svelte/icons/x';
+	import Icon from '@iconify/svelte';
 
 	interface Props {
 		src: string;
@@ -46,7 +46,7 @@
 		aria-label="Close lightbox"
 		data-testid="lightbox-close"
 	>
-		<XIcon class="h-6 w-6" />
+		<Icon icon="pixelarticons:close" class="h-6 w-6" />
 	</button>
 
 	<img
diff --git a/src/lib/components/ImageUpload.svelte b/src/lib/components/ImageUpload.svelte
index 6a8ad78..3aff589 100644
--- a/src/lib/components/ImageUpload.svelte
+++ b/src/lib/components/ImageUpload.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-	import XIcon from 'lucide-svelte/icons/x';
-	import Star from 'lucide-svelte/icons/star';
-	import RefreshCw from 'lucide-svelte/icons/refresh-cw';
+	import Icon from '@iconify/svelte';
 	import ImageLightbox from './ImageLightbox.svelte';
 	import type { Attachment } from '$lib/types/index.js';
 	import { optimizeImage } from '$lib/utils/image-optimize.js';
@@ -133,7 +131,7 @@
 					</button>
 					{#if isPending}
 						<div class="absolute bottom-0.5 left-0.5 rounded-sm bg-black/50 p-0.5" title="Pending sync">
-							<RefreshCw class="h-3 w-3 text-white" />
+							<Icon icon="pixelarticons:reload" class="h-3 w-3 text-white" />
 						</div>
 					{:else if onToggleFeatured}
 						<button
@@ -142,7 +140,7 @@
 							aria-label={attachment.featured ? 'Unfeature image' : 'Feature image'}
 							data-testid="toggle-featured"
 						>
-							<Star class="h-3 w-3 {attachment.featured ? 'fill-[var(--primary)] text-[var(--primary)]' : 'text-white'}" />
+							<Icon icon="pixelarticons:pin" class="h-3 w-3 {attachment.featured ? 'fill-[var(--primary)] text-[var(--primary)]' : 'text-white'}" />
 						</button>
 					{/if}
 					<button
@@ -151,7 +149,7 @@
 						aria-label="Remove attachment"
 						data-testid="remove-attachment"
 					>
-						<XIcon class="h-3 w-3" />
+						<Icon icon="pixelarticons:close" class="h-3 w-3" />
 					</button>
 				</div>
 			{/each}
diff --git a/src/lib/components/NoteHistory.svelte b/src/lib/components/NoteHistory.svelte
index 1b84c60..3892177 100644
--- a/src/lib/components/NoteHistory.svelte
+++ b/src/lib/components/NoteHistory.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import type { NoteVersionSummary, NoteVersion } from '$lib/types/index.js';
-	import X from 'lucide-svelte/icons/x';
-	import RotateCcw from 'lucide-svelte/icons/rotate-ccw';
-	import Clock from 'lucide-svelte/icons/clock';
+	import Icon from '@iconify/svelte';
 	import { showToast } from '$lib/stores/toast.js';
 
 	interface Props {
@@ -111,7 +109,7 @@
 		<!-- Header -->
 		<div class="flex items-center justify-between border-b border-[var(--border-subtle)] px-4 py-3">
 			<div class="flex items-center gap-2">
-				<Clock class="h-4 w-4 text-[var(--text-muted)]" />
+				<Icon icon="pixelarticons:clock" class="h-4 w-4 text-[var(--text-muted)]" />
 				<h2 class="text-sm font-semibold text-[var(--text)]">Version History</h2>
 			</div>
 			<button
@@ -120,7 +118,7 @@
 				title="Close history"
 				data-testid="close-history-btn"
 			>
-				<X class="h-4 w-4 text-[var(--text-muted)]" />
+				<Icon icon="pixelarticons:close" class="h-4 w-4 text-[var(--text-muted)]" />
 			</button>
 		</div>
 
@@ -190,7 +188,7 @@
 											class="flex items-center gap-1.5 rounded-sm border border-[var(--destructive)] bg-[var(--destructive)] px-3 py-1.5 text-xs font-medium text-white hover:opacity-90 disabled:opacity-50"
 											data-testid="confirm-restore-btn"
 										>
-											<RotateCcw class="h-3.5 w-3.5" />
+											<Icon icon="pixelarticons:undo" class="h-3.5 w-3.5" />
 											{isRestoring ? 'Restoring…' : 'Confirm Restore'}
 										</button>
 										<button
@@ -207,7 +205,7 @@
 									class="flex items-center gap-1.5 rounded-sm border border-[var(--border-subtle)] px-3 py-1.5 text-xs font-medium text-[var(--text)] hover:border-[var(--primary)] hover:text-[var(--primary)] transition-colors"
 									data-testid="restore-btn"
 								>
-									<RotateCcw class="h-3.5 w-3.5" />
+									<Icon icon="pixelarticons:undo" class="h-3.5 w-3.5" />
 									Restore this version
 								</button>
 							{/if}
diff --git a/src/lib/components/NotesView.svelte b/src/lib/components/NotesView.svelte
index 8af7795..2d3539d 100644
--- a/src/lib/components/NotesView.svelte
+++ b/src/lib/components/NotesView.svelte
@@ -5,7 +5,7 @@
 	import { favoriteNotes, unfavoritedNotes, selectedTag, currentFilter, notes, notesLoaded, loadNotes, updateSortOrders } from '$lib/stores/notes.js';
 	import { onMount } from 'svelte';
 	import type { Note, NoteFilter } from '$lib/types/index.js';
-	import Plus from 'lucide-svelte/icons/plus';
+	import Icon from '@iconify/svelte';
 
 	interface Props {
 		filter: NoteFilter;
@@ -60,7 +60,7 @@
 			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)]"
 			data-testid="new-note-btn"
 		>
-			<Plus class="h-4 w-4" />
+			<Icon icon="pixelarticons:plus" class="h-4 w-4" />
 			Add a crumb...
 		</button>
 	</div>
@@ -70,7 +70,7 @@
 		aria-label="Add a crumb"
 		data-testid="new-note-fab"
 	>
-		<Plus class="h-5 w-5" />
+		<Icon icon="pixelarticons:plus" class="h-5 w-5" />
 	</button>
 {/if}
 
diff --git a/src/lib/components/ShareDialog.svelte b/src/lib/components/ShareDialog.svelte
index d45a0cd..38422b3 100644
--- a/src/lib/components/ShareDialog.svelte
+++ b/src/lib/components/ShareDialog.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import type { Collaborator } from '$lib/types/index.js';
-	import X from 'lucide-svelte/icons/x';
-	import UserMinus from 'lucide-svelte/icons/user-minus';
-	import Search from 'lucide-svelte/icons/search';
+	import Icon from '@iconify/svelte';
 	import { showToast } from '$lib/stores/toast.js';
 
 	interface UserResult {
@@ -119,14 +117,14 @@
 				class="rounded-sm p-1 hover:bg-[var(--border)]/10"
 				title="Close"
 			>
-				<X class="h-4 w-4" />
+				<Icon icon="pixelarticons:close" class="h-4 w-4" />
 			</button>
 		</div>
 
 		<!-- Search input -->
 		<div class="relative px-4 pt-3">
 			<div class="relative">
-				<Search class="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--text-muted)]" />
+				<Icon icon="pixelarticons:search" class="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--text-muted)]" />
 				<input
 					type="text"
 					placeholder="Search users..."
@@ -181,7 +179,7 @@
 							title="Remove"
 							data-testid="remove-collaborator-btn"
 						>
-							<UserMinus class="h-4 w-4" />
+							<Icon icon="pixelarticons:user-minus" class="h-4 w-4" />
 						</button>
 					</li>
 				{/each}
diff --git a/src/lib/components/SyncIndicator.svelte b/src/lib/components/SyncIndicator.svelte
index 994b424..576e08c 100644
--- a/src/lib/components/SyncIndicator.svelte
+++ b/src/lib/components/SyncIndicator.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
 	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';
-	import CloudAlert from 'lucide-svelte/icons/cloud-alert';
+	import Icon from '@iconify/svelte';
 
 	let status: SyncStatus = $state(getSyncStatus());
 	let displayStatus: SyncStatus = $state(getSyncStatus());
@@ -51,12 +48,12 @@
 	data-testid="sync-indicator"
 >
 	{#if displayStatus === 'synced'}
-		<CloudCheck class="h-5 w-5 text-[var(--primary)]" />
+		<Icon icon="pixelarticons:cloud-done" class="h-5 w-5 text-[var(--primary)]" />
 	{:else if displayStatus === 'syncing'}
-		<CloudSync class="h-5 w-5 text-[var(--primary)] opacity-60" />
+		<Icon icon="pixelarticons:sync" class="h-5 w-5 text-[var(--primary)] opacity-60" />
 	{:else if displayStatus === 'offline'}
-		<CloudOff class="h-5 w-5 text-[var(--text-muted)]" />
+		<Icon icon="pixelarticons:cloud" class="h-5 w-5 text-[var(--text-muted)]" />
 	{:else}
-		<CloudAlert class="h-5 w-5 text-[var(--destructive)]" />
+		<Icon icon="pixelarticons:cloud" class="h-5 w-5 text-[var(--destructive)]" />
 	{/if}
 </button>
diff --git a/src/routes/(app)/settings/+layout.svelte b/src/routes/(app)/settings/+layout.svelte
index 71bea8e..9ca8381 100644
--- a/src/routes/(app)/settings/+layout.svelte
+++ b/src/routes/(app)/settings/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import { User, Cpu, ShieldCheck, SlidersHorizontal, Info } from 'lucide-svelte';
+	import Icon from '@iconify/svelte';
 
 	let { data, children } = $props();
 	let pathname = $derived(page.url.pathname);
@@ -23,7 +23,7 @@
 						class="flex items-center gap-2 rounded-sm px-3 py-2 text-sm whitespace-nowrap transition-colors {pathname === '/settings/preferences' ? 'bg-[var(--primary)]/15 text-[var(--primary)] font-medium' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
 						data-testid="settings-nav-preferences"
 					>
-						<SlidersHorizontal size={16} />
+						<Icon icon="pixelarticons:sliders" width={16} />
 						Preferences
 					</a>
 				</li>
@@ -32,7 +32,7 @@
 						href="/settings/profile"
 						class="flex items-center gap-2 rounded-sm px-3 py-2 text-sm whitespace-nowrap transition-colors {pathname === '/settings/profile' ? 'bg-[var(--primary)]/15 text-[var(--primary)] font-medium' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
 					>
-						<User size={16} />
+						<Icon icon="pixelarticons:user" width={16} />
 						Profile
 					</a>
 				</li>
@@ -41,7 +41,7 @@
 						href="/settings/mcp"
 						class="flex items-center gap-2 rounded-sm px-3 py-2 text-sm whitespace-nowrap transition-colors {pathname === '/settings/mcp' ? 'bg-[var(--primary)]/15 text-[var(--primary)] font-medium' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
 					>
-						<Cpu size={16} />
+						<Icon icon="pixelarticons:cpu" width={16} />
 						API
 					</a>
 				</li>
@@ -51,7 +51,7 @@
 							href="/settings/users"
 							class="flex items-center gap-2 rounded-sm px-3 py-2 text-sm whitespace-nowrap transition-colors {pathname === '/settings/users' ? 'bg-[var(--primary)]/15 text-[var(--primary)] font-medium' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
 						>
-							<ShieldCheck size={16} />
+							<Icon icon="pixelarticons:shield" width={16} />
 							Users
 						</a>
 					</li>
@@ -61,7 +61,7 @@
 						href="/settings/about"
 						class="flex items-center gap-2 rounded-sm px-3 py-2 text-sm whitespace-nowrap transition-colors {pathname === '/settings/about' ? 'bg-[var(--primary)]/15 text-[var(--primary)] font-medium' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
 					>
-						<Info size={16} />
+						<Icon icon="pixelarticons:info-box" width={16} />
 						About
 					</a>
 				</li>
diff --git a/src/routes/(app)/settings/mcp/+page.svelte b/src/routes/(app)/settings/mcp/+page.svelte
index ebdbbb7..f03c019 100644
--- a/src/routes/(app)/settings/mcp/+page.svelte
+++ b/src/routes/(app)/settings/mcp/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Key, Copy, Trash2, Plus, Check } from 'lucide-svelte';
+	import Icon from '@iconify/svelte';
 
 	interface ApiKey {
 		id: string;
@@ -118,7 +118,7 @@ ${mcpJsonConfig}`);
 <!-- API Keys -->
 <section class="mb-6 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-6 shadow-[var(--card-shadow)]">
 	<div class="mb-4 flex items-center gap-2">
-		<Key size={16} class="text-[var(--primary)]" />
+		<Icon icon="pixelarticons:lock" width={16} class="text-[var(--primary)]" />
 		<h2 class="text-lg font-semibold text-[var(--text)]">API Keys</h2>
 	</div>
 	<p class="mb-4 text-xs text-[var(--text-muted)]">
@@ -140,7 +140,7 @@ ${mcpJsonConfig}`);
 			class="flex items-center gap-1 rounded-sm bg-[var(--primary)] px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-[var(--primary-hover)] disabled:opacity-50"
 			data-testid="create-api-key-btn"
 		>
-			<Plus size={14} />
+			<Icon icon="pixelarticons:plus" width={14} />
 			Create
 		</button>
 	</form>
@@ -167,9 +167,9 @@ ${mcpJsonConfig}`);
 					data-testid="copy-key-btn"
 				>
 					{#if copiedKey}
-						<Check size={14} class="text-[var(--success-text,#3a5a40)]" />
+						<Icon icon="pixelarticons:check" width={14} class="text-[var(--success-text,#3a5a40)]" />
 					{:else}
-						<Copy size={14} />
+						<Icon icon="pixelarticons:copy" width={14} />
 					{/if}
 				</button>
 			</div>
@@ -219,7 +219,7 @@ ${mcpJsonConfig}`);
 								data-testid="delete-api-key-btn"
 								title="Revoke key"
 							>
-								<Trash2 size={14} />
+								<Icon icon="pixelarticons:trash" width={14} />
 							</button>
 						{/if}
 					</div>
@@ -253,9 +253,9 @@ ${mcpJsonConfig}`);
 			title="Copy JSON config"
 		>
 			{#if copiedJson}
-				<Check size={12} class="text-[var(--success-text,#3a5a40)]" />
+				<Icon icon="pixelarticons:check" width={12} class="text-[var(--success-text,#3a5a40)]" />
 			{:else}
-				<Copy size={12} />
+				<Icon icon="pixelarticons:copy" width={12} />
 			{/if}
 		</button>
 	</div>
@@ -279,9 +279,9 @@ ${mcpJsonConfig}`);
 				title="Copy LLM prompt"
 			>
 				{#if copiedPrompt}
-					<Check size={12} class="text-[var(--success-text,#3a5a40)]" />
+					<Icon icon="pixelarticons:check" width={12} class="text-[var(--success-text,#3a5a40)]" />
 				{:else}
-					<Copy size={12} />
+					<Icon icon="pixelarticons:copy" width={12} />
 				{/if}
 			</button>
 		</div>