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

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>