feat: add card cover color with picker in card detail and bar in thumbnail

src/components/card-detail/CardDetailModal.tsx

@@ -57,6 +57,10 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
 
               {/* Right sidebar (40%) */}
               <div className="flex flex-col gap-5 overflow-y-auto border-t border-border p-5 sm:w-[40%] sm:border-t-0">
+                <CoverColorPicker cardId={cardId} coverColor={card.coverColor} />
+
+                <Separator />
+
                 <LabelPicker
                   cardId={cardId}
                   cardLabelIds={card.labels}
@@ -156,3 +160,46 @@ function InlineTitle({ cardId, title, updateCard }: InlineTitleProps) {
     </DialogTitle>
   );
 }
+
+/* ---------- Cover color picker ---------- */
+
+function CoverColorPicker({ cardId, coverColor }: { cardId: string; coverColor: string | null }) {
+  const updateCard = useBoardStore((s) => s.updateCard);
+  const 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" },
+  ];
+
+  return (
+    <div className="flex flex-col gap-2">
+      <h4 className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
+        Cover
+      </h4>
+      <div className="flex flex-wrap gap-1.5">
+        <button
+          onClick={() => updateCard(cardId, { coverColor: null })}
+          className="flex size-6 items-center justify-center rounded-full border border-border text-xs text-pylon-text-secondary hover:bg-pylon-column"
+          title="None"
+        >
+          &times;
+        </button>
+        {presets.map(({ hue, label }) => (
+          <button
+            key={hue}
+            onClick={() => updateCard(cardId, { coverColor: hue })}
+            className="size-6 rounded-full transition-transform hover:scale-110"
+            style={{
+              backgroundColor: `oklch(55% 0.12 ${hue})`,
+              outline: coverColor === hue ? "2px solid currentColor" : "none",
+              outlineOffset: "1px",
+            }}
+            title={label}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}