feat: add column color picker submenu with 10 preset colors

src/components/board/ColumnHeader.tsx

@@ -20,6 +20,19 @@ interface ColumnHeaderProps {
   boardColor?: string;
 }
 
+const COLOR_PRESETS = [
+  { hue: "160", label: "Teal" },
+  { hue: "240", label: "Blue" },
+  { hue: "300", label: "Purple" },
+  { hue: "350", label: "Pink" },
+  { hue: "25", label: "Red" },
+  { hue: "55", label: "Orange" },
+  { hue: "85", label: "Yellow" },
+  { hue: "130", label: "Lime" },
+  { hue: "200", label: "Cyan" },
+  { hue: "0", label: "Slate" },
+];
+
 export function ColumnHeader({ column, cardCount, boardColor }: ColumnHeaderProps) {
   const [editing, setEditing] = useState(false);
   const [editValue, setEditValue] = useState(column.title);
@@ -28,6 +41,7 @@ export function ColumnHeader({ column, cardCount, boardColor }: ColumnHeaderProp
   const updateColumnTitle = useBoardStore((s) => s.updateColumnTitle);
   const deleteColumn = useBoardStore((s) => s.deleteColumn);
   const setColumnWidth = useBoardStore((s) => s.setColumnWidth);
+  const setColumnColor = useBoardStore((s) => s.setColumnColor);
 
   useEffect(() => {
     if (editing && inputRef.current) {
@@ -60,7 +74,13 @@ export function ColumnHeader({ column, cardCount, boardColor }: ColumnHeaderProp
   }
 
   return (
-    <div className="flex items-center justify-between border-b border-border px-3 pb-2 pt-3" style={{ borderTop: boardColor ? `3px solid ${boardColor}30` : undefined }}>
+    <div className="flex items-center justify-between border-b border-border px-3 pb-2 pt-3" style={{
+        borderTop: column.color
+          ? `3px solid oklch(55% 0.12 ${column.color})`
+          : boardColor
+            ? `3px solid ${boardColor}30`
+            : undefined
+      }}>
       <div className="flex items-center gap-2 overflow-hidden">
         {editing ? (
           <input
@@ -129,6 +149,33 @@ export function ColumnHeader({ column, cardCount, boardColor }: ColumnHeaderProp
               </DropdownMenuItem>
             </DropdownMenuSubContent>
           </DropdownMenuSub>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>Color</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem onClick={() => setColumnColor(column.id, null)}>
+                None
+                {column.color == null && (
+                  <span className="ml-auto text-pylon-accent">*</span>
+                )}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <div className="flex flex-wrap gap-1.5 px-2 py-1.5">
+                {COLOR_PRESETS.map(({ hue, label }) => (
+                  <button
+                    key={hue}
+                    onClick={() => setColumnColor(column.id, hue)}
+                    className="size-5 rounded-full transition-transform hover:scale-110"
+                    style={{
+                      backgroundColor: `oklch(55% 0.12 ${hue})`,
+                      outline: column.color === hue ? "2px solid currentColor" : "none",
+                      outlineOffset: "1px",
+                    }}
+                    title={label}
+                  />
+                ))}
+              </div>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
           <DropdownMenuSeparator />
           <DropdownMenuItem
             variant="destructive"