jakob48/crumbs
1
0
Fork 0
forked from mirror/crumbs-original
Code Pull Requests Activity

refactor: migrate icons to pixelarticons for SyncIndicator, small components, and settings

Browse Source 
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>
This commit is contained in:
Frederic Cabassut
2026-03-20 20:04:44 +01:00
co-authored by Claude Opus 4.6
parent 03481fea8a
commit 214fdec341
10 changed files with 47 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Checklist.svelte
+6 -9
View File
@@ -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}
src/lib/components/CollaboratorPopover.svelte
+2 -2
View File
@@ -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}
src/lib/components/ImageLightbox.svelte
+2 -2
View File
@@ -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
src/lib/components/ImageUpload.svelte
+4 -6
View File
@@ -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}
src/lib/components/NoteHistory.svelte
+5 -7
View File
@@ -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}
src/lib/components/NotesView.svelte
+3 -3
View File
@@ -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}
src/lib/components/ShareDialog.svelte
+4 -6
View File
@@ -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}
src/lib/components/SyncIndicator.svelte
+5 -8
View File
@@ -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>
src/routes/(app)/settings/+layout.svelte
+6 -6
View File
@@ -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>
src/routes/(app)/settings/mcp/+page.svelte
+10 -10
View File
@@ -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>