Replace native color input with custom ColorPicker component

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
 - Notifications infrastructure 
 - Anonymous feedback claiming
 - Create widgets for users to embed on their website

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>

components/products/ProductSettingsAppearance.vue

@@ -10,20 +10,8 @@
       </CardHeader>
       <CardContent class="space-y-4">
         <div class="space-y-2">
-          <Label for="accent-color">Accent Color</Label>
-          <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"
-            />
-            <Input
-              id="accent-color"
-              v-model="form.accentColor"
-              placeholder="#3b82f6"
-            />
-          </div>
+          <Label>Accent Color</Label>
+          <ColorPicker v-model="form.accentColor" />
           <p class="text-xs text-muted-foreground">
             Used for buttons and links on your public board.
           </p>
@@ -84,7 +72,7 @@
               alt="Logo"
               class="h-8 w-8 rounded object-cover bg-white/20"
               @error="$event.target.style.display = 'none'"
             />
             <div
               v-else
               class="h-8 w-8 rounded bg-white/20 flex items-center justify-center"

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: {

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",

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"