feat: redesign card detail modal as 2-column dashboard grid
Replace 60/40 split layout with a 2x3 CSS grid where all sections get equal weight. Cover color header, progress bar on checklist, compact markdown editor, scroll containment on long lists.
This commit is contained in:
Your Name
@@ -1,6 +1,6 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { X } from "lucide-react";
|
||||
import { useBoardStore } from "@/stores/board-store";
|
||||
import { MarkdownEditor } from "@/components/card-detail/MarkdownEditor";
|
||||
import { ChecklistSection } from "@/components/card-detail/ChecklistSection";
|
||||
@@ -38,74 +38,112 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
|
||||
/>
|
||||
|
||||
{/* Modal */}
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
onClick={onClose}
|
||||
>
|
||||
<motion.div
|
||||
layoutId={`card-${cardId}`}
|
||||
className="relative w-full max-w-3xl overflow-hidden rounded-xl bg-pylon-surface shadow-2xl"
|
||||
className="relative w-full max-w-4xl overflow-hidden rounded-xl bg-pylon-surface shadow-2xl"
|
||||
transition={springs.gentle}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Close on Escape */}
|
||||
<EscapeHandler onClose={onClose} />
|
||||
|
||||
{/* Hidden accessible description */}
|
||||
<span className="sr-only">Card detail editor</span>
|
||||
|
||||
{/* Header: cover color background + title + close */}
|
||||
<div
|
||||
className="relative flex items-center gap-3 px-6 py-4"
|
||||
style={{
|
||||
backgroundColor: card.coverColor
|
||||
? `oklch(55% 0.12 ${card.coverColor})`
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
<InlineTitle
|
||||
cardId={cardId}
|
||||
title={card.title}
|
||||
updateCard={updateCard}
|
||||
hasColor={card.coverColor != null}
|
||||
/>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className={`absolute right-4 top-1/2 -translate-y-1/2 rounded-md p-1 transition-colors ${
|
||||
card.coverColor
|
||||
? "text-white/70 hover:bg-white/20 hover:text-white"
|
||||
: "text-pylon-text-secondary hover:bg-pylon-column hover:text-pylon-text"
|
||||
}`}
|
||||
aria-label="Close"
|
||||
>
|
||||
<X className="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Dashboard grid body */}
|
||||
<motion.div
|
||||
className="flex max-h-[80vh] flex-col sm:flex-row"
|
||||
className="grid max-h-[calc(85vh-4rem)] grid-cols-2 gap-4 overflow-y-auto p-5"
|
||||
variants={staggerContainer(0.05)}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{/* Left panel: Title + Markdown (60%) */}
|
||||
{/* Row 1: Labels + Due Date */}
|
||||
<motion.div
|
||||
className="flex flex-1 flex-col overflow-y-auto p-6 sm:w-[60%]"
|
||||
className="rounded-lg bg-pylon-column/50 p-4"
|
||||
variants={fadeSlideUp}
|
||||
transition={springs.bouncy}
|
||||
>
|
||||
<div className="mb-4">
|
||||
<InlineTitle
|
||||
cardId={cardId}
|
||||
title={card.title}
|
||||
updateCard={updateCard}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<MarkdownEditor cardId={cardId} value={card.description} />
|
||||
</motion.div>
|
||||
|
||||
{/* Vertical separator */}
|
||||
<Separator orientation="vertical" className="hidden sm:block" />
|
||||
|
||||
{/* Right sidebar (40%) */}
|
||||
<motion.div
|
||||
className="flex flex-col gap-5 overflow-y-auto border-t border-border p-5 sm:w-[40%] sm:border-t-0"
|
||||
variants={fadeSlideUp}
|
||||
transition={springs.bouncy}
|
||||
>
|
||||
<CoverColorPicker cardId={cardId} coverColor={card.coverColor} />
|
||||
|
||||
<Separator />
|
||||
|
||||
<LabelPicker
|
||||
cardId={cardId}
|
||||
cardLabelIds={card.labels}
|
||||
boardLabels={boardLabels}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<motion.div
|
||||
className="rounded-lg bg-pylon-column/50 p-4"
|
||||
variants={fadeSlideUp}
|
||||
transition={springs.bouncy}
|
||||
>
|
||||
<DueDatePicker cardId={cardId} dueDate={card.dueDate} />
|
||||
</motion.div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Row 2: Checklist + Description */}
|
||||
<motion.div
|
||||
className="rounded-lg bg-pylon-column/50 p-4"
|
||||
variants={fadeSlideUp}
|
||||
transition={springs.bouncy}
|
||||
>
|
||||
<ChecklistSection
|
||||
cardId={cardId}
|
||||
checklist={card.checklist}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<Separator />
|
||||
<motion.div
|
||||
className="rounded-lg bg-pylon-column/50 p-4"
|
||||
variants={fadeSlideUp}
|
||||
transition={springs.bouncy}
|
||||
>
|
||||
<MarkdownEditor cardId={cardId} value={card.description} />
|
||||
</motion.div>
|
||||
|
||||
{/* Row 3: Cover + Attachments */}
|
||||
<motion.div
|
||||
className="rounded-lg bg-pylon-column/50 p-4"
|
||||
variants={fadeSlideUp}
|
||||
transition={springs.bouncy}
|
||||
>
|
||||
<CoverColorPicker
|
||||
cardId={cardId}
|
||||
coverColor={card.coverColor}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="rounded-lg bg-pylon-column/50 p-4"
|
||||
variants={fadeSlideUp}
|
||||
transition={springs.bouncy}
|
||||
>
|
||||
<AttachmentSection
|
||||
cardId={cardId}
|
||||
attachments={card.attachments}
|
||||
@@ -139,9 +177,10 @@ interface InlineTitleProps {
|
||||
cardId: string;
|
||||
title: string;
|
||||
updateCard: (cardId: string, updates: { title: string }) => void;
|
||||
hasColor: boolean;
|
||||
}
|
||||
|
||||
function InlineTitle({ cardId, title, updateCard }: InlineTitleProps) {
|
||||
function InlineTitle({ cardId, title, updateCard, hasColor }: InlineTitleProps) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [draft, setDraft] = useState(title);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
@@ -177,6 +216,9 @@ function InlineTitle({ cardId, title, updateCard }: InlineTitleProps) {
|
||||
}
|
||||
}
|
||||
|
||||
const textColor = hasColor ? "text-white" : "text-pylon-text";
|
||||
const hoverColor = hasColor ? "hover:text-white/80" : "hover:text-pylon-accent";
|
||||
|
||||
if (editing) {
|
||||
return (
|
||||
<input
|
||||
@@ -185,7 +227,9 @@ function InlineTitle({ cardId, title, updateCard }: InlineTitleProps) {
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onBlur={handleSave}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="font-heading text-xl text-pylon-text bg-transparent outline-none border-b border-pylon-accent pb-0.5"
|
||||
className={`flex-1 font-heading text-xl bg-transparent outline-none border-b pb-0.5 ${
|
||||
hasColor ? "text-white border-white/50" : "text-pylon-text border-pylon-accent"
|
||||
}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -193,7 +237,7 @@ function InlineTitle({ cardId, title, updateCard }: InlineTitleProps) {
|
||||
return (
|
||||
<h2
|
||||
onClick={() => setEditing(true)}
|
||||
className="cursor-pointer font-heading text-xl text-pylon-text transition-colors hover:text-pylon-accent"
|
||||
className={`flex-1 cursor-pointer font-heading text-xl transition-colors ${textColor} ${hoverColor}`}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
@@ -202,14 +246,25 @@ function InlineTitle({ cardId, title, updateCard }: InlineTitleProps) {
|
||||
|
||||
/* ---------- Cover color picker ---------- */
|
||||
|
||||
function CoverColorPicker({ cardId, coverColor }: { cardId: string; coverColor: string | null }) {
|
||||
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" },
|
||||
{ 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 (
|
||||
@@ -232,7 +287,8 @@ function CoverColorPicker({ cardId, coverColor }: { cardId: string; coverColor:
|
||||
className="size-6 rounded-full transition-transform hover:scale-110"
|
||||
style={{
|
||||
backgroundColor: `oklch(55% 0.12 ${hue})`,
|
||||
outline: coverColor === hue ? "2px solid currentColor" : "none",
|
||||
outline:
|
||||
coverColor === hue ? "2px solid currentColor" : "none",
|
||||
outlineOffset: "1px",
|
||||
}}
|
||||
title={label}
|
||||
|
||||
@@ -37,20 +37,30 @@ export function ChecklistSection({ cardId, checklist }: ChecklistSectionProps) {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
|
||||
Checklist
|
||||
</h4>
|
||||
{/* Header + progress */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
|
||||
Checklist
|
||||
</h4>
|
||||
{checklist.length > 0 && (
|
||||
<span className="font-mono text-xs text-pylon-text-secondary">
|
||||
{checked}/{checklist.length}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{checklist.length > 0 && (
|
||||
<span className="font-mono text-xs text-pylon-text-secondary">
|
||||
{checked}/{checklist.length}
|
||||
</span>
|
||||
<div className="h-1 w-full overflow-hidden rounded-full bg-pylon-column">
|
||||
<div
|
||||
className="h-full rounded-full bg-pylon-accent transition-all duration-300"
|
||||
style={{ width: `${(checked / checklist.length) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Items */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex max-h-[160px] flex-col gap-1 overflow-y-auto">
|
||||
{checklist.map((item) => (
|
||||
<ChecklistRow
|
||||
key={item.id}
|
||||
|
||||
@@ -96,11 +96,11 @@ export function MarkdownEditor({ cardId, value }: MarkdownEditorProps) {
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
placeholder="Add a description... (Markdown supported)"
|
||||
className="min-h-[200px] w-full resize-y rounded-md border border-pylon-text-secondary/20 bg-pylon-surface px-3 py-2 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60 focus:border-pylon-accent focus:ring-1 focus:ring-pylon-accent"
|
||||
className="min-h-[100px] max-h-[160px] w-full resize-y rounded-md border border-pylon-text-secondary/20 bg-pylon-surface px-3 py-2 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60 focus:border-pylon-accent focus:ring-1 focus:ring-pylon-accent"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="min-h-[200px] cursor-pointer rounded-md border border-transparent px-1 py-1 transition-colors hover:border-pylon-text-secondary/20"
|
||||
className="min-h-[100px] max-h-[160px] overflow-y-auto cursor-pointer rounded-md border border-transparent px-1 py-1 transition-colors hover:border-pylon-text-secondary/20"
|
||||
onClick={() => setMode("edit")}
|
||||
>
|
||||
{draft ? (
|
||||
|
||||
Reference in New Issue
Block a user