From 1547ad5a709ca0f6c305e63f86e2c97abef225d4 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 15 Feb 2026 20:29:29 +0200
Subject: [PATCH] feat: add card cover color with picker in card detail and bar
 in thumbnail

---
 src/components/board/CardThumbnail.tsx        | 23 ++++++++-
 .../card-detail/CardDetailModal.tsx           | 47 +++++++++++++++++++
 2 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/src/components/board/CardThumbnail.tsx b/src/components/board/CardThumbnail.tsx
index 1b769e4..734f4d8 100644
--- a/src/components/board/CardThumbnail.tsx
+++ b/src/components/board/CardThumbnail.tsx
@@ -6,6 +6,7 @@ import { CSS } from "@dnd-kit/utilities";
 import type { Card, Label } from "@/types/board";
 import { LabelDots } from "@/components/board/LabelDots";
 import { ChecklistBar } from "@/components/board/ChecklistBar";
+import { Paperclip, AlignLeft } from "lucide-react";
 
 interface CardThumbnailProps {
   card: Card;
@@ -58,6 +59,17 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
       role="article"
       aria-label={card.title}
     >
+      {/* Cover color bar */}
+      {card.coverColor && (
+        <div
+          className="mb-2 h-1 rounded-t-lg"
+          style={{
+            backgroundColor: `oklch(55% 0.12 ${card.coverColor})`,
+            margin: `calc(-0.75rem * var(--density-factor)) calc(-0.75rem * var(--density-factor)) 0.5rem`,
+          }}
+        />
+      )}
+
       {/* Label dots */}
       {card.labels.length > 0 && (
         <div className="mb-2">
@@ -69,7 +81,7 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
       <p className="text-sm font-medium text-pylon-text">{card.title}</p>
 
       {/* Footer row: due date + checklist */}
-      {(hasDueDate || card.checklist.length > 0) && (
+      {(hasDueDate || card.checklist.length > 0 || card.attachments.length > 0 || card.description) && (
         <div className="mt-2 flex items-center gap-3">
           {dueDate && (
             <span
@@ -85,6 +97,15 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
           {card.checklist.length > 0 && (
             <ChecklistBar checklist={card.checklist} />
           )}
+          {card.description && (
+            <AlignLeft className="size-3 text-pylon-text-secondary" />
+          )}
+          {card.attachments.length > 0 && (
+            <span className="flex items-center gap-0.5 text-pylon-text-secondary">
+              <Paperclip className="size-3" />
+              <span className="font-mono text-xs">{card.attachments.length}</span>
+            </span>
+          )}
         </div>
       )}
     </motion.button>
diff --git a/src/components/card-detail/CardDetailModal.tsx b/src/components/card-detail/CardDetailModal.tsx
index 10679da..d200d94 100644
--- a/src/components/card-detail/CardDetailModal.tsx
+++ b/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>
+  );
+}