Environment colors (#225)

src-web/components/core/ColorPicker.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { HexColorPicker } from 'react-colorful';
+import { useRandomKey } from '../../hooks/useRandomKey';
+import { PlainInput } from './PlainInput';
+
+interface Props {
+  onChange: (value: string | null) => void;
+  color: string | null;
+}
+
+export function ColorPicker({ onChange, color: defaultColor }: Props) {
+  const [updateKey, regenerateKey] = useRandomKey();
+  const [color, setColor] = useState<string | null>(defaultColor);
+  return (
+    <form
+      className="flex flex-col gap-3 items-stretch w-full"
+      onSubmit={(e) => {
+        e.preventDefault();
+        onChange(color);
+      }}
+    >
+      <HexColorPicker
+        color={color ?? undefined}
+        className="!w-full"
+        onChange={(color) => {
+          setColor(color.toUpperCase());
+          regenerateKey();
+        }}
+      />
+      <PlainInput
+        hideLabel
+        label="Plain Color"
+        forceUpdateKey={updateKey}
+        defaultValue={color ?? ''}
+        onChange={(c) => setColor(c.toUpperCase())}
+        validate={(color) => color.match(/#[0-9a-fA-F]{6}$/) !== null}
+      />
+    </form>
+  );
+}

src-web/components/core/Icon.tsx

@@ -26,9 +26,9 @@ const icons = {
   cake: lucide.CakeIcon,
   chat: lucide.MessageSquare,
   check: lucide.CheckIcon,
+  check_circle: lucide.CheckCircleIcon,
   check_square_checked: lucide.SquareCheckIcon,
   check_square_unchecked: lucide.SquareIcon,
-  check_circle: lucide.CheckCircleIcon,
   chevron_down: lucide.ChevronDownIcon,
   chevron_right: lucide.ChevronRightIcon,
   circle_alert: lucide.CircleAlertIcon,
@@ -78,6 +78,7 @@ const icons = {
   minus_circle: lucide.MinusCircleIcon,
   moon: lucide.MoonIcon,
   more_vertical: lucide.MoreVerticalIcon,
+  palette: lucide.PaletteIcon,
   paste: lucide.ClipboardPasteIcon,
   pencil: lucide.PencilIcon,
   pin: lucide.PinIcon,