feat: visual color picker (#43)

* feat: visual color picker * feat: use pallete for random colors * fix: style issues like indentation in code and different color format
2025-12-30 10:10:03 -06:00 · 2025-08-13 10:22:19 +02:00
parent 7aa9d25275
commit e4e7076f9e
6 changed files with 111 additions and 250 deletions
--- a/app/(app)/settings/categories/page.tsx
+++ b/app/(app)/settings/categories/page.tsx
@@ -27,7 +27,7 @@ export default async function CategoriesSettingsPage() {
        columns={[
          { key: "name", label: "Name", editable: true },
          { key: "llm_prompt", label: "LLM Prompt", editable: true },
-          { key: "color", label: "Color", defaultValue: randomHexColor(), editable: true },
+          { key: "color", label: "Color", type: "color", defaultValue: randomHexColor(), editable: true },
        ]}
        onDelete={async (code) => {
          "use server"
--- a/app/(app)/settings/projects/page.tsx
+++ b/app/(app)/settings/projects/page.tsx
@@ -26,7 +26,7 @@ export default async function ProjectsSettingsPage() {
        columns={[
          { key: "name", label: "Name", editable: true },
          { key: "llm_prompt", label: "LLM Prompt", editable: true },
-          { key: "color", label: "Color", defaultValue: randomHexColor(), editable: true },
+          { key: "color", label: "Color", type: "color", defaultValue: randomHexColor(), editable: true },
        ]}
        onDelete={async (code) => {
          "use server"
--- a/components/settings/crud.tsx
+++ b/components/settings/crud.tsx
@@ -9,7 +9,7 @@ import { useOptimistic, useState } from "react"
 interface CrudColumn<T> {
  key: keyof T
  label: string
-  type?: "text" | "number" | "checkbox" | "select"
+  type?: "text" | "number" | "checkbox" | "select" | "color"
  options?: string[]
  defaultValue?: string | boolean
  editable?: boolean
@@ -34,6 +34,15 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
    if (column.type === "checkbox") {
      return item[column.key] ? <Check /> : ""
    }
+    if (column.type === "color" || column.key === "color") {
+      const value = (item[column.key] as string) || ""
+      return (
+        <div className="flex items-center gap-2">
+          <span className="w-4 h-4 rounded-full border" style={{ backgroundColor: value || "#ffffff" }} />
+          <span>{value}</span>
+        </div>
+      )
+    }
    return item[column.key]
  }

@@ -70,6 +79,39 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
          ))}
        </select>
      )
+    } else if (column.type === "color" || column.key === "color") {
+      return (
+        <div className="flex items-center gap-2">
+          <div className="relative">
+            <span
+              className="block h-4 w-4 rounded-full border"
+              style={{ backgroundColor: (editingItem[column.key] as string) || "#000" }}
+            />
+            <input
+              type="color"
+              className="absolute inset-0 h-4 w-4 opacity-0 cursor-pointer"
+              value={(editingItem[column.key] as string) || "#000"}
+              onChange={(e) =>
+                setEditingItem({
+                  ...editingItem,
+                  [column.key]: e.target.value,
+                })
+              }
+            />
+          </div>
+          <Input
+            type="text"
+            value={(editingItem[column.key] as string) || ""}
+            onChange={(e) =>
+              setEditingItem({
+                ...editingItem,
+                [column.key]: e.target.value,
+              })
+            }
+            placeholder="#FFFFFF"
+          />
+        </div>
+      )
    }

    return (
@@ -119,6 +161,39 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
          ))}
        </select>
      )
+    } else if (column.type === "color" || column.key === "color") {
+      return (
+        <div className="flex items-center gap-2">
+          <div className="relative">
+            <span
+              className="block h-4 w-4 rounded-full border"
+              style={{ backgroundColor: String(newItem[column.key] || column.defaultValue || "#000") }}
+            />
+            <input
+              type="color"
+              className="absolute inset-0 h-4 w-4 opacity-0 cursor-pointer"
+              value={String(newItem[column.key] || column.defaultValue || "#000")}
+              onChange={(e) =>
+                setNewItem({
+                  ...newItem,
+                  [column.key]: e.target.value,
+                })
+              }
+            />
+          </div>
+            <Input
+              type="text"
+              value={String(newItem[column.key] || column.defaultValue || "")}
+              onChange={(e) =>
+                setNewItem({
+                  ...newItem,
+                  [column.key]: e.target.value,
+                })
+              }
+              placeholder="#FFFFFF"
+            />
+          </div>
+      )
    }
    return (
      <Input
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,6 +1,7 @@
 import { clsx, type ClassValue } from "clsx"
 import slugify from "slugify"
 import { twMerge } from "tailwind-merge"
+import { violet, tomato, red, crimson, pink, plum, purple, indigo, blue, sky, cyan, teal, mint, grass, lime, yellow, amber, orange, brown } from "@radix-ui/colors"

 const LOCALE = "en-US"

@@ -52,7 +53,28 @@ export function codeFromName(name: string, maxLength: number = 16) {
 }

 export function randomHexColor() {
-  return "#" + Math.floor(Math.random() * 16777215).toString(16)
+  const palette = [
+    violet.violet9,
+    indigo.indigo9,
+    blue.blue9,
+    cyan.cyan9,
+    teal.teal9,
+    grass.grass9,
+    lime.lime9,
+    yellow.yellow9,
+    amber.amber9,
+    orange.orange9,
+    red.red9,
+    crimson.crimson9,
+    pink.pink9,
+    purple.purple9,
+    plum.plum9,
+    mint.mint9,
+    brown.brown9,
+    sky.sky9,
+    tomato.tomato9,
+  ]
+  return palette[Math.floor(Math.random() * palette.length)]
 }

 export async function fetchAsBase64(url: string): Promise<string | null> {
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
        "@langchain/mistralai": "^0.2.1",
        "@langchain/openai": "^0.6.1",
        "@prisma/client": "^6.6.0",
+        "@radix-ui/colors": "^3.0.0",
        "@radix-ui/react-avatar": "^1.1.3",
        "@radix-ui/react-checkbox": "^1.1.4",
        "@radix-ui/react-collapsible": "^1.1.3",
@@ -2741,6 +2742,12 @@
        "@opentelemetry/api": "^1.8"
      }
    },
+    "node_modules/@radix-ui/colors": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-3.0.0.tgz",
+      "integrity": "sha512-FUOsGBkHrYJwCSEtWRCIfQbZG7q1e6DgxCIOe1SUQzDe/7rXXeA47s8yCn6fuTNQAj1Zq4oTFi9Yjp3wzElcxg==",
+      "license": "MIT"
+    },
    "node_modules/@radix-ui/number": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
@@ -4884,18 +4891,6 @@
        "undici-types": "~6.19.2"
      }
    },
-    "node_modules/@types/node-fetch": {
-      "version": "2.6.12",
-      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.12.tgz",
-      "integrity": "sha512-8nneRWKCg3rMtF69nLQJnOYUcbafYeFSjqkw3jCRLsqkWFlHaoQrr5mXmofFGOx3DKn7UfmBMyov8ySvLRVldA==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@types/node": "*",
-        "form-data": "^4.0.0"
-      }
-    },
    "node_modules/@types/pg": {
      "version": "8.6.1",
      "resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.6.1.tgz",
@@ -5540,20 +5535,6 @@
      "license": "Apache-2.0",
      "peer": true
    },
-    "node_modules/abort-controller": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
-      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "event-target-shim": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=6.5"
-      }
-    },
    "node_modules/abs-svg-path": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/abs-svg-path/-/abs-svg-path-0.1.1.tgz",
@@ -5603,20 +5584,6 @@
        "node": ">= 6.0.0"
      }
    },
-    "node_modules/agentkeepalive": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.6.0.tgz",
-      "integrity": "sha512-kja8j7PjmncONqaTsB8fQ+wE2mSU2DJ9D4XKoJ5PFWIdRMa6SLSN1ff4mOr4jCbfRSsxR4keIiySJU0N9T5hIQ==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "humanize-ms": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 8.0.0"
-      }
-    },
    "node_modules/ajv": {
      "version": "6.12.6",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -5957,14 +5924,6 @@
        "node": ">= 0.4"
      }
    },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
    "node_modules/available-typed-arrays": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -6415,20 +6374,6 @@
        "simple-swizzle": "^0.2.2"
      }
    },
-    "node_modules/combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "delayed-stream": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
    "node_modules/commander": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -6667,17 +6612,6 @@
      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
      "license": "MIT"
    },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
    "node_modules/detect-libc": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
@@ -6984,7 +6918,7 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "es-errors": "^1.3.0",
@@ -7533,17 +7467,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/event-target-shim": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
-      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/eventemitter3": {
      "version": "4.0.7",
      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -7746,72 +7669,6 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
-    "node_modules/form-data": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
-      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/form-data-encoder": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-1.7.2.tgz",
-      "integrity": "sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/form-data/node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/form-data/node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/formdata-node": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-4.4.1.tgz",
-      "integrity": "sha512-0iirZp3uVDjVGt9p49aTaqjk84TrglENEDuqfdlZQ1roC9CWlPk6Avf8EEnZNcAqPonwkG35x4n3ww/1THYAeQ==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "node-domexception": "1.0.0",
-        "web-streams-polyfill": "4.0.0-beta.3"
-      },
-      "engines": {
-        "node": ">= 12.20"
-      }
-    },
    "node_modules/forwarded-parse": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/forwarded-parse/-/forwarded-parse-2.1.2.tgz",
@@ -8175,7 +8032,7 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "has-symbols": "^1.0.3"
@@ -8271,17 +8128,6 @@
        "node": ">= 6"
      }
    },
-    "node_modules/humanize-ms": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
-      "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "ms": "^2.0.0"
-      }
-    },
    "node_modules/hyphen": {
      "version": "1.10.6",
      "resolved": "https://registry.npmjs.org/hyphen/-/hyphen-1.10.6.tgz",
@@ -9660,27 +9506,6 @@
        "node": "^10 || ^12 || >=14"
      }
    },
-    "node_modules/node-domexception": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
-      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "github",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10.5.0"
-      }
-    },
    "node_modules/node-fetch": {
      "version": "2.7.0",
      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -9855,57 +9680,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/openai": {
-      "version": "4.89.0",
-      "resolved": "https://registry.npmjs.org/openai/-/openai-4.89.0.tgz",
-      "integrity": "sha512-XNI0q2l8/Os6jmojxaID5EhyQjxZgzR2gWcpEjYWK5hGKwE7AcifxEY7UNwFDDHJQXqeiosQ0CJwQN+rvnwdjA==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@types/node": "^18.11.18",
-        "@types/node-fetch": "^2.6.4",
-        "abort-controller": "^3.0.0",
-        "agentkeepalive": "^4.2.1",
-        "form-data-encoder": "1.7.2",
-        "formdata-node": "^4.3.2",
-        "node-fetch": "^2.6.7"
-      },
-      "bin": {
-        "openai": "bin/cli"
-      },
-      "peerDependencies": {
-        "ws": "^8.18.0",
-        "zod": "^3.23.8"
-      },
-      "peerDependenciesMeta": {
-        "ws": {
-          "optional": true
-        },
-        "zod": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/openai/node_modules/@types/node": {
-      "version": "18.19.81",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.81.tgz",
-      "integrity": "sha512-7KO9oZ2//ivtSsryp0LQUqq79zyGXzwq1WqfywpC9ucjY7YyltMMmxWgtRFRKCxwa7VPxVBVy4kHf5UC1E8Lug==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "undici-types": "~5.26.4"
-      }
-    },
-    "node_modules/openai/node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
    "node_modules/openapi-types": {
      "version": "12.1.3",
      "resolved": "https://registry.npmjs.org/openapi-types/-/openapi-types-12.1.3.tgz",
@@ -12364,17 +12138,6 @@
        "node": ">=10.13.0"
      }
    },
-    "node_modules/web-streams-polyfill": {
-      "version": "4.0.0-beta.3",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.3.tgz",
-      "integrity": "sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14"
-      }
-    },
    "node_modules/webidl-conversions": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
    "@radix-ui/react-separator": "^1.1.2",
    "@radix-ui/react-slot": "^1.2.0",
    "@radix-ui/react-tooltip": "^1.1.8",
+    "@radix-ui/colors": "^3.0.0",
    "@react-pdf/renderer": "^4.3.0",
    "@sentry/nextjs": "^9.11.0",
    "@types/mime-types": "^2.1.4",