From 48ff8a67d78893e1ca1d441811dd67001befb679 Mon Sep 17 00:00:00 2001
From: Chen Asraf <casraf@pm.me>
Date: Thu, 9 Apr 2026 23:47:37 +0300
Subject: [PATCH] fix: add missing no-color option to note colors

---
 src/components/Notes/NoteDialog.test.ts | 25 +++++++++++++++++--------
 src/components/Notes/NoteDialog.vue     | 22 ++++++++++++++++++++++
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/components/Notes/NoteDialog.test.ts b/src/components/Notes/NoteDialog.test.ts
index 0bd6aba..51aec0e 100644
--- a/src/components/Notes/NoteDialog.test.ts
+++ b/src/components/Notes/NoteDialog.test.ts
@@ -269,22 +269,31 @@ describe('NoteDialog', () => {
   })
 
   describe('color swatches', () => {
-    it('renders 16 swatches in both modes', () => {
+    it('renders 17 swatches (no-color + 16 colors)', () => {
       const wrapper = mount(NoteDialog, {
         props: { open: true, note: makeNote() },
       })
-      expect(wrapper.findAll('.note-dialog__swatch')).toHaveLength(16)
+      expect(wrapper.findAll('.note-dialog__swatch')).toHaveLength(17)
+    })
+
+    it('has no-color swatch active by default when note has no color', () => {
+      const wrapper = mount(NoteDialog, {
+        props: { open: true, note: makeNote({ color: null }) },
+      })
+      const noColor = wrapper.find('.note-dialog__swatch--none')
+      expect(noColor.classes()).toContain('note-dialog__swatch--active')
     })
 
     it('toggles color on swatch click', async () => {
       const wrapper = mount(NoteDialog, {
         props: { open: true, note: makeNote({ color: null }) },
       })
-      const swatch = wrapper.find('.note-dialog__swatch')
-      await swatch.trigger('click')
-      expect(swatch.classes()).toContain('note-dialog__swatch--active')
-      await swatch.trigger('click')
-      expect(swatch.classes()).not.toContain('note-dialog__swatch--active')
+      // Click a color swatch (skip the first "no color" swatch)
+      const colorSwatch = wrapper.findAll('.note-dialog__swatch').at(1)!
+      await colorSwatch.trigger('click')
+      expect(colorSwatch.classes()).toContain('note-dialog__swatch--active')
+      await colorSwatch.trigger('click')
+      expect(colorSwatch.classes()).not.toContain('note-dialog__swatch--active')
     })
 
     it('saves immediately on color change for existing notes', async () => {
@@ -328,7 +337,7 @@ describe('NoteDialog', () => {
       // Should be in view mode
       expect(wrapper.find('.nc-text-area').exists()).toBe(false)
       // Swatches still visible
-      expect(wrapper.findAll('.note-dialog__swatch')).toHaveLength(16)
+      expect(wrapper.findAll('.note-dialog__swatch')).toHaveLength(17)
     })
   })
 })
diff --git a/src/components/Notes/NoteDialog.vue b/src/components/Notes/NoteDialog.vue
index e02c24a..6057ede 100644
--- a/src/components/Notes/NoteDialog.vue
+++ b/src/components/Notes/NoteDialog.vue
@@ -46,6 +46,14 @@
       <!-- Color swatches (always visible) -->
       <div class="note-dialog__color">
         <div class="note-dialog__swatches">
+          <button
+            type="button"
+            class="note-dialog__swatch note-dialog__swatch--none"
+            :class="{ 'note-dialog__swatch--active': colorValue === '' }"
+            :style="{ borderColor: colorValue === '' ? 'var(--color-main-text)' : 'transparent' }"
+            :aria-label="strings.noColor"
+            @click="toggleColor('')"
+          />
           <button
             v-for="c in colorOptions"
             :key="c"
@@ -299,6 +307,7 @@ const strings = {
   view: t('pantry', 'Preview'),
   untitled: t('pantry', 'Untitled note'),
   noContent: t('pantry', 'Click to add content …'),
+  noColor: t('pantry', 'Default (no color)'),
 }
 </script>
 
@@ -416,6 +425,19 @@ const strings = {
     &--active {
       transform: scale(1.15);
     }
+
+    &--none {
+      background: var(--color-background-hover);
+      // Diagonal line to indicate "no color"
+      background-image: linear-gradient(
+        135deg,
+        transparent 40%,
+        var(--color-error, #e00) 40%,
+        var(--color-error, #e00) 60%,
+        transparent 60%
+      );
+      background-size: 100% 100%;
+    }
   }
 }
 </style>