From cd232fea7455804de35a4d016392488789bf87a7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 16 Feb 2026 13:18:41 +0000
Subject: [PATCH 1/2] feat: replace native color input with preset swatches
 picker

Redesigns the accent color picker in ProductSettingsAppearance to show
a grid of 12 preset color swatches with active-state indicator, plus a
custom color trigger (pipette icon) backed by a hidden native picker.
Adds a live color preview swatch next to the hex input for fine-tuning.

https://claude.ai/code/session_011Kb1RWHLQDakpkWvByGaBZ
---
 TODO.md                                       |  1 -
 .../products/ProductSettingsAppearance.vue    | 74 +++++++++++++++++--
 2 files changed, 67 insertions(+), 8 deletions(-)

diff --git a/TODO.md b/TODO.md
index 6de3dfe..0fdae91 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,7 +1,6 @@
 - Send email when domain has been connected
 - Create user
 - add API with API docs
-- Update color picker to use new design
 - click to access feedback details for items in personal feedback list
 - Notifications infrastructure 
 - Anonymous feedback claiming
diff --git a/components/products/ProductSettingsAppearance.vue b/components/products/ProductSettingsAppearance.vue
index 255a590..4d6cbc6 100644
--- a/components/products/ProductSettingsAppearance.vue
+++ b/components/products/ProductSettingsAppearance.vue
@@ -9,19 +9,62 @@
         <CardDescription>Customize how your public feedback board looks.</CardDescription>
       </CardHeader>
       <CardContent class="space-y-4">
-        <div class="space-y-2">
-          <Label for="accent-color">Accent Color</Label>
+        <div class="space-y-3">
+          <Label>Accent Color</Label>
+          <!-- Preset swatches -->
+          <div class="flex flex-wrap gap-2">
+            <button
+              v-for="swatch in presetColors"
+              :key="swatch.value"
+              type="button"
+              :title="swatch.label"
+              class="relative w-8 h-8 rounded-full border-2 transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              :class="form.accentColor === swatch.value ? 'border-foreground scale-110' : 'border-transparent hover:scale-105'"
+              :style="{ backgroundColor: swatch.value }"
+              @click="form.accentColor = swatch.value"
+            >
+              <Icon
+                v-if="form.accentColor === swatch.value"
+                name="lucide:check"
+                class="absolute inset-0 m-auto w-3.5 h-3.5 text-white drop-shadow"
+              />
+            </button>
+            <!-- Custom color trigger -->
+            <label
+              class="relative w-8 h-8 rounded-full border-2 cursor-pointer flex items-center justify-center transition-all hover:scale-105 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"
+              :class="isCustomColor ? 'border-foreground scale-110' : 'border-dashed border-muted-foreground'"
+              :style="isCustomColor ? { backgroundColor: form.accentColor } : {}"
+              title="Custom color"
+            >
+              <Icon
+                v-if="isCustomColor"
+                name="lucide:check"
+                class="absolute inset-0 m-auto w-3.5 h-3.5 text-white drop-shadow"
+              />
+              <Icon
+                v-else
+                name="lucide:pipette"
+                class="w-3.5 h-3.5 text-muted-foreground"
+              />
+              <input
+                type="color"
+                :value="form.accentColor"
+                class="sr-only"
+                @input="form.accentColor = $event.target.value"
+              />
+            </label>
+          </div>
+          <!-- Hex input for custom / fine-tune -->
           <div class="flex items-center gap-2">
-            <input
-              type="color"
-              :value="form.accentColor"
-              class="w-8 h-8 rounded border cursor-pointer"
-              @input="form.accentColor = $event.target.value"
+            <div
+              class="w-6 h-6 rounded border shrink-0"
+              :style="{ backgroundColor: form.accentColor || '#3b82f6' }"
             />
             <Input
               id="accent-color"
               v-model="form.accentColor"
               placeholder="#3b82f6"
+              class="font-mono text-sm max-w-40"
             />
           </div>
           <p class="text-xs text-muted-foreground">
@@ -143,9 +186,26 @@ export default {
         showPoweredBy: settings.showPoweredBy !== false,
       },
       isSaving: false,
+      presetColors: [
+        { label: 'Blue', value: '#3b82f6' },
+        { label: 'Indigo', value: '#6366f1' },
+        { label: 'Violet', value: '#8b5cf6' },
+        { label: 'Pink', value: '#ec4899' },
+        { label: 'Red', value: '#ef4444' },
+        { label: 'Orange', value: '#f97316' },
+        { label: 'Amber', value: '#f59e0b' },
+        { label: 'Emerald', value: '#10b981' },
+        { label: 'Teal', value: '#14b8a6' },
+        { label: 'Slate', value: '#64748b' },
+        { label: 'Dark', value: '#1e293b' },
+        { label: 'Black', value: '#000000' },
+      ],
     }
   },
   computed: {
+    isCustomColor() {
+      return this.form.accentColor && !this.presetColors.some(c => c.value === this.form.accentColor)
+    },
     currentSettings() {
       const settings = this.project.settings || {}
       return {

From b96cd1b8c0d4cae4960c89c52109c4180e1ada28 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 16 Feb 2026 13:33:09 +0000
Subject: [PATCH 2/2] feat: replace color picker with vanilla-colorful gradient
 picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the preset swatches and native browser picker with a proper
HSL gradient color picker (vanilla-colorful) wrapped in a reka-ui
Popover. Clicking the color swatch opens a popover with a full
saturation/lightness gradient area, hue slider, and hex input for
fine-tuning — all matching the shadcn design system styling.

https://claude.ai/code/session_011Kb1RWHLQDakpkWvByGaBZ
---
 components/ColorPicker.vue                    | 105 ++++++++++++++++++
 .../products/ProductSettingsAppearance.vue    |  76 +------------
 nuxt.config.ts                                |   5 +
 package.json                                  |   1 +
 yarn.lock                                     |   5 +
 5 files changed, 118 insertions(+), 74 deletions(-)
 create mode 100644 components/ColorPicker.vue

diff --git a/components/ColorPicker.vue b/components/ColorPicker.vue
new file mode 100644
index 0000000..a8610b7
--- /dev/null
+++ b/components/ColorPicker.vue
@@ -0,0 +1,105 @@
+<template>
+  <PopoverRoot v-model:open="isOpen">
+    <PopoverTrigger as-child>
+      <button
+        type="button"
+        class="h-9 w-9 rounded-md border-2 border-input cursor-pointer ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        :style="{ backgroundColor: modelValue || '#3b82f6' }"
+        :aria-label="`Selected color: ${modelValue}`"
+      />
+    </PopoverTrigger>
+    <PopoverPortal>
+      <PopoverContent
+        class="z-50 rounded-md border bg-popover p-3 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+        :side-offset="6"
+        align="start"
+      >
+        <div class="space-y-3">
+          <ClientOnly>
+            <hex-color-picker
+              :color="modelValue"
+              class="color-picker-widget"
+              @color-changed="onColorChanged"
+            />
+          </ClientOnly>
+          <div class="flex items-center gap-2">
+            <div
+              class="h-6 w-6 shrink-0 rounded border border-input"
+              :style="{ backgroundColor: modelValue || '#3b82f6' }"
+            />
+            <Input
+              :model-value="hexInput"
+              class="h-8 font-mono text-sm"
+              maxlength="7"
+              @update:model-value="onHexInput"
+            />
+          </div>
+        </div>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>
+
+<script>
+import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from 'reka-ui'
+
+export default {
+  name: 'ColorPicker',
+
+  components: {
+    PopoverRoot,
+    PopoverTrigger,
+    PopoverPortal,
+    PopoverContent,
+  },
+
+  props: {
+    modelValue: {
+      type: String,
+      default: '#3b82f6',
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  data() {
+    return {
+      isOpen: false,
+      hexInput: this.modelValue || '#3b82f6',
+    }
+  },
+
+  watch: {
+    modelValue(val) {
+      this.hexInput = val
+    },
+  },
+
+  mounted() {
+    if (import.meta.client) {
+      import('vanilla-colorful/hex-color-picker.js')
+    }
+  },
+
+  methods: {
+    onColorChanged(event) {
+      const color = event.detail.value
+      this.hexInput = color
+      this.$emit('update:modelValue', color)
+    },
+
+    onHexInput(value) {
+      this.hexInput = value
+      if (/^#[0-9a-fA-F]{6}$/.test(value)) {
+        this.$emit('update:modelValue', value)
+      }
+    },
+  },
+}
+</script>
+
+<style>
+.color-picker-widget {
+  width: 100%;
+}
+</style>
diff --git a/components/products/ProductSettingsAppearance.vue b/components/products/ProductSettingsAppearance.vue
index 4d6cbc6..a25578f 100644
--- a/components/products/ProductSettingsAppearance.vue
+++ b/components/products/ProductSettingsAppearance.vue
@@ -9,64 +9,9 @@
         <CardDescription>Customize how your public feedback board looks.</CardDescription>
       </CardHeader>
       <CardContent class="space-y-4">
-        <div class="space-y-3">
+        <div class="space-y-2">
           <Label>Accent Color</Label>
-          <!-- Preset swatches -->
-          <div class="flex flex-wrap gap-2">
-            <button
-              v-for="swatch in presetColors"
-              :key="swatch.value"
-              type="button"
-              :title="swatch.label"
-              class="relative w-8 h-8 rounded-full border-2 transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-              :class="form.accentColor === swatch.value ? 'border-foreground scale-110' : 'border-transparent hover:scale-105'"
-              :style="{ backgroundColor: swatch.value }"
-              @click="form.accentColor = swatch.value"
-            >
-              <Icon
-                v-if="form.accentColor === swatch.value"
-                name="lucide:check"
-                class="absolute inset-0 m-auto w-3.5 h-3.5 text-white drop-shadow"
-              />
-            </button>
-            <!-- Custom color trigger -->
-            <label
-              class="relative w-8 h-8 rounded-full border-2 cursor-pointer flex items-center justify-center transition-all hover:scale-105 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"
-              :class="isCustomColor ? 'border-foreground scale-110' : 'border-dashed border-muted-foreground'"
-              :style="isCustomColor ? { backgroundColor: form.accentColor } : {}"
-              title="Custom color"
-            >
-              <Icon
-                v-if="isCustomColor"
-                name="lucide:check"
-                class="absolute inset-0 m-auto w-3.5 h-3.5 text-white drop-shadow"
-              />
-              <Icon
-                v-else
-                name="lucide:pipette"
-                class="w-3.5 h-3.5 text-muted-foreground"
-              />
-              <input
-                type="color"
-                :value="form.accentColor"
-                class="sr-only"
-                @input="form.accentColor = $event.target.value"
-              />
-            </label>
-          </div>
-          <!-- Hex input for custom / fine-tune -->
-          <div class="flex items-center gap-2">
-            <div
-              class="w-6 h-6 rounded border shrink-0"
-              :style="{ backgroundColor: form.accentColor || '#3b82f6' }"
-            />
-            <Input
-              id="accent-color"
-              v-model="form.accentColor"
-              placeholder="#3b82f6"
-              class="font-mono text-sm max-w-40"
-            />
-          </div>
+          <ColorPicker v-model="form.accentColor" />
           <p class="text-xs text-muted-foreground">
             Used for buttons and links on your public board.
           </p>
@@ -186,26 +131,9 @@ export default {
         showPoweredBy: settings.showPoweredBy !== false,
       },
       isSaving: false,
-      presetColors: [
-        { label: 'Blue', value: '#3b82f6' },
-        { label: 'Indigo', value: '#6366f1' },
-        { label: 'Violet', value: '#8b5cf6' },
-        { label: 'Pink', value: '#ec4899' },
-        { label: 'Red', value: '#ef4444' },
-        { label: 'Orange', value: '#f97316' },
-        { label: 'Amber', value: '#f59e0b' },
-        { label: 'Emerald', value: '#10b981' },
-        { label: 'Teal', value: '#14b8a6' },
-        { label: 'Slate', value: '#64748b' },
-        { label: 'Dark', value: '#1e293b' },
-        { label: 'Black', value: '#000000' },
-      ],
     }
   },
   computed: {
-    isCustomColor() {
-      return this.form.accentColor && !this.presetColors.some(c => c.value === this.form.accentColor)
-    },
     currentSettings() {
       const settings = this.project.settings || {}
       return {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d8887fb..ae2f39a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -7,6 +7,11 @@ export default defineNuxtConfig({
   vite: {
     plugins: [tailwindcss()],
   },
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag: string) => tag === 'hex-color-picker',
+    },
+  },
   modules: ['@nuxt/fonts', '@nuxt/icon', '@nuxt/test-utils', 'shadcn-nuxt', '@nuxtjs/color-mode', 'nuxt-nodemailer', '@scalar/nuxt'],
   runtimeConfig: {
     nodemailer: {
diff --git a/package.json b/package.json
index 5b0e146..23fd761 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.1.8",
     "tw-animate-css": "^1.3.4",
+    "vanilla-colorful": "^0.7.2",
     "vue": "^3.5.16",
     "vue-router": "^4.5.1",
     "vue-sonner": "^2.0.1",
diff --git a/yarn.lock b/yarn.lock
index e252867..2b0369c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10566,6 +10566,11 @@ validate-npm-package-license@^3.0.4:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+vanilla-colorful@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/vanilla-colorful/-/vanilla-colorful-0.7.2.tgz#3fb1f4b9f15b797e20fd1ce8e0364f33b073f4a2"
+  integrity sha512-z2YZusTFC6KnLERx1cgoIRX2CjPRP0W75N+3CC6gbvdX5Ch47rZkEMGO2Xnf+IEmi3RiFLxS18gayMA27iU7Kg==
+
 vfile-location@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-5.0.3.tgz#cb9eacd20f2b6426d19451e0eafa3d0a846225c3"