Merge pull request #2580 from cry4pt/main

Author: WarFiN123

src/components/color-picker.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 import type React from "react";
-
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import {
@@ -16,73 +15,87 @@ interface ColorPickerProps {
   onChange: (color: string) => void;
 }
 
+/** Discord-themed preset colors */
+const discordColors = [
+  "#5865F2", // Blurple
+  "#57F287", // Green
+  "#FEE75C", // Yellow
+  "#EB459E", // Fuchsia
+  "#ED4245", // Red
+  "#000000", // Black
+  "#FFFFFF", // White
+  "#1E1F22", // Dark
+  "#2B2D31", // Dark but not as dark
+  "#313338", // Even less dark
+  "#F2F3F5", // Light
+  "#E3E5E8", // Less light
+];
+
 export function ColorPicker({ color, onChange }: ColorPickerProps) {
   const [inputValue, setInputValue] = useState(color);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
   const [isOpen, setIsOpen] = useState(false);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
 
-  // Discord colors
-  const discordColors = [
-    "#5865F2", // Blurple
-    "#57F287", // Green
-    "#FEE75C", // Yellow
-    "#EB459E", // Fuchsia
-    "#ED4245", // Red
-    "#000000", // Black
-    "#FFFFFF", // White
-    "#1E1F22", // Dark
-    "#2B2D31", // Dark but not as dark
-    "#313338", // Even less dark
-    "#F2F3F5", // Light
-    "#E3E5E8", // Less light
-  ];
-
-  useEffect(() => {
-    setInputValue(color);
-  }, [color]);
-
-  useEffect(() => {
-    if (isOpen) {
-      setTimeout(() => {
-        drawColorGradient();
-      }, 50);
-    }
-  }, [isOpen]);
-
-  const drawColorGradient = () => {
+  /* --------------------------------------------------------------------- *
+   *  Draw the HSV-style gradient on the canvas
+   * --------------------------------------------------------------------- */
+  const drawColorGradient = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
 
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
-    // Clear canvas
+    // Clear
     ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-    // Draw color gradient (horizontal - hue)
-    const gradientH = ctx.createLinearGradient(0, 0, canvas.width, 0);
-    gradientH.addColorStop(0, "#FF0000");
-    gradientH.addColorStop(1 / 6, "#FFFF00");
-    gradientH.addColorStop(2 / 6, "#00FF00");
-    gradientH.addColorStop(3 / 6, "#00FFFF");
-    gradientH.addColorStop(4 / 6, "#0000FF");
-    gradientH.addColorStop(5 / 6, "#FF00FF");
-    gradientH.addColorStop(1, "#FF0000");
-
-    ctx.fillStyle = gradientH;
+    // Horizontal hue gradient
+    const gradH = ctx.createLinearGradient(0, 0, canvas.width, 0);
+    gradH.addColorStop(0, "#FF0000");
+    gradH.addColorStop(1 / 6, "#FFFF00");
+    gradH.addColorStop(2 / 6, "#00FF00");
+    gradH.addColorStop(3 / 6, "#00FFFF");
+    gradH.addColorStop(4 / 6, "#0000FF");
+    gradH.addColorStop(5 / 6, "#FF00FF");
+    gradH.addColorStop(1, "#FF0000");
+
+    ctx.fillStyle = gradH;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-    // Draw white to black gradient overlay (vertical - saturation/value)
-    const gradientV = ctx.createLinearGradient(0, 0, 0, canvas.height);
-    gradientV.addColorStop(0, "rgba(255, 255, 255, 1)");
-    gradientV.addColorStop(0.5, "rgba(255, 255, 255, 0)");
-    gradientV.addColorStop(0.5, "rgba(0, 0, 0, 0)");
-    gradientV.addColorStop(1, "rgba(0, 0, 0, 1)");
+    // Vertical white→transparent→black overlay (saturation/value)
+    const gradV = ctx.createLinearGradient(0, 0, 0, canvas.height);
+    gradV.addColorStop(0, "rgba(255,255,255,1)");
+    gradV.addColorStop(0.5, "rgba(255,255,255,0)");
+    gradV.addColorStop(0.5, "rgba(0,0,0,0)");
+    gradV.addColorStop(1, "rgba(0,0,0,1)");
 
-    ctx.fillStyle = gradientV;
+    ctx.fillStyle = gradV;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
-  };
+  }, []);
+
+  /* --------------------------------------------------------------------- *
+   *  Redraw when the popover opens (give the canvas time to mount)
+   * --------------------------------------------------------------------- */
+  useEffect(() => {
+    if (!isOpen) return;
 
+    const timer = setTimeout(() => {
+      drawColorGradient();
+    }, 50);
+
+    return () => clearTimeout(timer);
+  }, [isOpen, drawColorGradient]);
+
+  /* --------------------------------------------------------------------- *
+   *  Keep the input in sync with the prop
+   * --------------------------------------------------------------------- */
+  useEffect(() => {
+    setInputValue(color);
+  }, [color]);
+
+  /* --------------------------------------------------------------------- *
+   *  Click → sample color from canvas
+   * --------------------------------------------------------------------- */
   const handleCanvasClick = (e: React.MouseEvent<HTMLCanvasElement>) => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -94,19 +107,24 @@ export function ColorPicker({ color, onChange }: ColorPickerProps) {
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
-    const imageData = ctx.getImageData(x, y, 1, 1).data;
-    const color = `#${[imageData[0], imageData[1], imageData[2]].map((x) => x.toString(16).padStart(2, "0")).join("")}`;
+    const [r, g, b] = ctx.getImageData(x, y, 1, 1).data;
+    const hex = `#${[r, g, b]
+      .map((c) => c.toString(16).padStart(2, "0"))
+      .join("")}`;
 
-    onChange(color);
-    setInputValue(color);
+    onChange(hex);
+    setInputValue(hex);
   };
 
+  /* --------------------------------------------------------------------- *
+   *  Manual hex input
+   * --------------------------------------------------------------------- */
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
+    const val = e.target.value;
+    setInputValue(val);
 
-    // Validate if it's a proper hex color
-    if (/^#[0-9A-F]{6}$/i.test(e.target.value)) {
-      onChange(e.target.value);
+    if (/^#[0-9A-F]{6}$/i.test(val)) {
+      onChange(val);
     }
   };
 
@@ -122,8 +140,10 @@ export function ColorPicker({ color, onChange }: ColorPickerProps) {
             <span className="sr-only">Pick a color</span>
           </Button>
         </PopoverTrigger>
+
         <PopoverContent className="w-64">
           <div className="space-y-4">
+            {/* Canvas picker */}
             <div className="relative w-full h-40 rounded-md overflow-hidden border border-input">
               <canvas
                 ref={canvasRef}
@@ -134,26 +154,28 @@ export function ColorPicker({ color, onChange }: ColorPickerProps) {
               />
             </div>
 
+            {/* Discord preset swatches */}
             <div className="grid grid-cols-6 gap-2">
-              {discordColors.map((discordColor, index) => (
+              {discordColors.map((c) => (
                 <Button
-                  key={index}
+                  key={c}
                   variant="outline"
                   className="w-8 h-8 p-0 rounded-md border"
-                  style={{ backgroundColor: discordColor }}
+                  style={{ backgroundColor: c }}
                   onClick={() => {
-                    onChange(discordColor);
-                    setInputValue(discordColor);
+                    onChange(c);
+                    setInputValue(c);
                   }}
                 >
-                  <span className="sr-only">Select color {discordColor}</span>
+                  <span className="sr-only">Select {c}</span>
                 </Button>
               ))}
             </div>
           </div>
         </PopoverContent>
       </Popover>
 
+      {/* Hex input */}
       <Input
         value={inputValue}
         onChange={handleInputChange}