From f1ab4d0e82a216eecc60464a98195c6bd0a75157 Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <cabassut.frederic@gmail.com>
Date: Fri, 6 Mar 2026 22:01:47 +0100
Subject: [PATCH] style: swap icons based on toggle state for markdown and
 checklist modes

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>
---
 src/lib/components/NoteEditor.svelte | 18 ++++++++++++++----
 todo.md                              |  4 ++--
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/NoteEditor.svelte b/src/lib/components/NoteEditor.svelte
index 2a9497d..0d8e209 100644
--- a/src/lib/components/NoteEditor.svelte
+++ b/src/lib/components/NoteEditor.svelte
@@ -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>
 
diff --git a/todo.md b/todo.md
index cf17450..8b02781 100644
--- a/todo.md
+++ b/todo.md
@@ -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