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: swap icons based on toggle state for markdown and checklist modes

Browse Source 
Markdown toggle: Eye (rich text) / Code (raw MD, highlighted).
Checklist toggle: List (text mode) / ListChecks (checklist, highlighted).
Icons now change on toggle so the active state is visually clear.

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 77337e9ac1
commit f1ab4d0e82
2 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/NoteEditor.svelte
+14 -4
View File
@@ -9,7 +9,9 @@
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';
interface Props {
note: Note | null;
@@ -149,20 +151,28 @@
<button
onclick={() => (checklistMode = !checklistMode)}
class="rounded-sm p-2 hover:bg-[var(--border)]/10 {checklistMode ? 'text-[var(--primary)]' : ''}"
title="Checklist mode"
title={checklistMode ? 'Switch to text' : 'Checklist mode'}
data-testid="checklist-toggle"
>
<ListChecks class="h-5 w-5" />
{#if checklistMode}
<ListChecks class="h-5 w-5" />
{:else}
<List 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)]' : ''}"
title="Markdown mode"
title={rawMarkdownMode ? 'Rich text mode' : 'Markdown mode'}
data-testid="markdown-toggle"
>
<Code class="h-5 w-5" />
{#if rawMarkdownMode}
<Code class="h-5 w-5" />
{:else}
<Eye class="h-5 w-5" />
{/if}
</button>
</div>
todo.md
+2 -2
View File
@@ -5,8 +5,8 @@
- [x] on mobile the header is clutered, maybe we can colapse the search bar into a search icon, and when clicked it opens a search bar to search
- [x] let's add an outline on the colour palette selection for the background to make each colour more visible
- [x] on mobile the colour selection overflows outside the screen
- [ ] let's use another icon for toggling the raw md mode, also the active state doesn't make on this icon now, either we change the icon when it's in one state or the other, or the button should be active when the md state is active
- [ ] same for the list icon, toggling between this mode is nice but the icon becomes inactive which is weird
- [x] let's use another icon for toggling the raw md mode, also the active state doesn't make on this icon now, either we change the icon when it's in one state or the other, or the button should be active when the md state is active
- [x] same for the list icon, toggling between this mode is nice but the icon becomes inactive which is weird
- [ ] on mobile the toolbar collapose on two lines, can we do something so it stays only on one line and we have a dropdown to open the additional options
- [ ] add this todo.md to gitignore and remove from git
- [ ] close the menu by default on mobile