+
+ );
+ }
+
+ return (
+ No project selected
+
+
+
+
+ {/* Container that grows horizontally */}
+
+
+ l.id)}
+ strategy={horizontalListSortingStrategy}
+ >
+ {projectLists.map((list) => {
+ const listCards = cards
+ .filter((c) => c.listId === list.id)
+ .sort((a, b) => a.position - b.position);
+ return (
+
+
+ {/* Add list button */}
+ {showNewList ? (
+
+
+
+ ) : (
+
+
+ setNewListName(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') handleCreateList();
+ if (e.key === 'Escape') {
+ setShowNewList(false);
+ setNewListName('');
+ }
+ }}
+ className="w-full px-3 py-2 bg-bg-tertiary border border-border rounded-lg text-text-primary placeholder-text-muted text-sm focus:outline-none focus:border-accent data-focus:border-accent"
+ placeholder="List name"
+ autoFocus
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {projectLists.length === 0 && (
+
+ )}
+ + Add your first list to get started. See shortcuts below. +
+ )} +
+
+ )}
+
+
+ {activeList.name}
+ + {cards.filter((c) => c.listId === activeList.id).length} + +
+ {/* Cover Image - only render if URL is safe */}
+ {safeCoverImageUrl && (
+
+ );
+}
+
+export function Card({ card, isOpenedByKeyboard, onModalClose }: CardProps) {
+ const [showModal, setShowModal] = useState(false);
+ const [measuredHeight, setMeasuredHeight] = useState(0);
+ const focusedCardId = useFocusedCardId();
+ const setFocusedCard = useCardFocusStore((s) => s.setFocusedCard);
+ const dueDateWarningDays = useThemeStore((s) => s.dueDateWarningDays);
+ const showFavicons = useThemeStore((s) => s.showFavicons);
+ const cardRef = useRef
+ 
+
+ )}
+
+
+ {/* Title */}
+
+ + {card.title} +
+ + {/* Footer: description icon, link pill, due date */} + {(card.description || card.link || card.dueDate) && ( +
+ {card.description && (
+
+ )}
+ {
+ setNodeRef(node);
+ (cardRef as React.MutableRefObject).current = node;
+ }}
+ style={{
+ ...style,
+ opacity: isDragging ? 0 : showModal ? 0 : 1,
+ transition: isDragging ? style.transition : 'opacity 0.15s ease-out',
+ }}
+ data-card-id={card.id}
+ {...attributes}
+ {...listeners}
+ onClick={() => {
+ if (!isDragging) {
+ setFocusedCard(card.id);
+ setShowModal(true);
+ }
+ }}
+ className={`bg-bg-tertiary rounded-lg border cursor-grab active:cursor-grabbing group select-none transition-[border-color,box-shadow] hover:scale-[1.02] hover:-translate-y-0.5 active:scale-[0.98] ${
+ isFocused
+ ? 'ring-1 ring-glow/50 border-glow/50'
+ : 'border-border hover:border-border-light'
+ }`}
+ >
+ {/* Cover Image - only render if URL is safe */}
+ {safeCoverImageUrl && (
+
+
+ {showModal &&
+ {
+ (e.target as HTMLImageElement).style.display = 'none';
+ }}
+ />
+
+ )}
+
+
+ {/* Title */}
+
+ + {card.title} +
+ + {/* Footer: description icon, link pill, due date */} + {(card.description || card.link || card.dueDate) && ( +
+ {card.description && (
+
+ )}
+