mirror/crumbs-original
1
0
Fork 1
mirror of https://github.com/bretzel-app/crumbs.git synced 2026-10-12 20:06:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: update toggle icons to show destination mode

Browse Source 
Checklist toggle: SquareCheck (→ checklist) / Type (→ text).
Markdown toggle: FileCode (→ markdown) / FileText (→ rich text).
Icons now show what you'll switch to, not the current state.
Remove active color highlight since icon swap communicates state.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Frederic Cabassut
2026-03-06 23:12:36 +01:00
co-authored by Claude Opus 4.6
parent fa806c5799
commit d9c9663af2
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/NoteEditor.svelte
+10 -10
View File
@@ -8,10 +8,10 @@
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 List from 'lucide-svelte/icons/list';
import Code from 'lucide-svelte/icons/code';
import Eye from 'lucide-svelte/icons/eye';
import SquareCheck from 'lucide-svelte/icons/square-check';
import Type from 'lucide-svelte/icons/type';
import FileCode from 'lucide-svelte/icons/file-code';
import FileText from 'lucide-svelte/icons/file-text';
interface Props {
note: Note | null;
@@ -152,28 +152,28 @@
<!-- Checklist mode toggle -->
<button
onclick={() => (checklistMode = !checklistMode)}
class="rounded-sm p-2 hover:bg-[var(--border)]/10 {checklistMode ? 'text-[var(--primary)]' : ''}"
class="rounded-sm p-2 hover:bg-[var(--border)]/10"
title={checklistMode ? 'Switch to text' : 'Checklist mode'}
data-testid="checklist-toggle"
>
{#if checklistMode}
<ListChecks class="h-5 w-5" />
<Type class="h-5 w-5" />
{:else}
<List class="h-5 w-5" />
<SquareCheck class="h-5 w-5" />
{/if}
</button>
<!-- Raw markdown mode toggle -->
<button
onclick={toggleMarkdownMode}
class="rounded-sm p-2 hover:bg-[var(--border)]/10 {rawMarkdownMode ? 'text-[var(--primary)]' : ''}"
class="rounded-sm p-2 hover:bg-[var(--border)]/10"
title={rawMarkdownMode ? 'Rich text mode' : 'Markdown mode'}
data-testid="markdown-toggle"
>
{#if rawMarkdownMode}
<Code class="h-5 w-5" />
<FileText class="h-5 w-5" />
{:else}
<Eye class="h-5 w-5" />
<FileCode class="h-5 w-5" />
{/if}
</button>
</div>