feat: add two-panel card detail modal with markdown, checklist, labels, dates, attachments

- CardDetailModal: two-panel layout (60/40) with inline title editing
- MarkdownEditor: edit/preview toggle with react-markdown + remark-gfm
- ChecklistSection: add/toggle/edit/delete items with progress counter
- LabelPicker: toggle labels + create new labels with color swatches
- DueDatePicker: date input with relative time and overdue styling
- AttachmentSection: list with remove, placeholder add button
- Wired into BoardView via selectedCardId state
This commit is contained in:
Your Name
2026-02-15 19:05:02 +02:00
parent 86de747bc4
commit b527d441e3
9 changed files with 796 additions and 5 deletions

View File

@@ -9,9 +9,10 @@ interface CardThumbnailProps {
card: Card;
boardLabels: Label[];
columnId: string;
onCardClick?: (cardId: string) => void;
}
export function CardThumbnail({ card, boardLabels, columnId }: CardThumbnailProps) {
export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: CardThumbnailProps) {
const {
attributes,
listeners,
@@ -35,8 +36,7 @@ export function CardThumbnail({ card, boardLabels, columnId }: CardThumbnailProp
const overdue = dueDate != null && isPast(dueDate) && !isToday(dueDate);
function handleClick() {
// Card detail modal will be wired in Task 11
console.log("Card clicked:", card.id);
onCardClick?.(card.id);
}
return (