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
73
docs/plans/2026-02-15-card-detail-redesign-design.md
Normal file
73
docs/plans/2026-02-15-card-detail-redesign-design.md
Normal file
@@ -0,0 +1,73 @@
|
||||
# Card Detail Modal Redesign — Design Document
|
||||
|
||||
**Date:** 2026-02-15
|
||||
**Status:** Approved
|
||||
|
||||
## Problem
|
||||
|
||||
The current card detail modal uses a 60/40 split layout with a massive markdown editor on the left and all metadata (cover, labels, due date, checklist, attachments) crammed into a narrow right sidebar. This is unbalanced — the description field dominates despite being lightly used, while actionable sections like checklist are squeezed.
|
||||
|
||||
## Design Decisions (from brainstorming)
|
||||
|
||||
| Question | Answer |
|
||||
|----------|--------|
|
||||
| Primary use when opening card | Scan everything at once |
|
||||
| Description importance | Light use (short notes) |
|
||||
| Modal size | Go wider |
|
||||
| Layout style | Dashboard grid |
|
||||
| Section prominence | Equal weight |
|
||||
| Long checklist behavior | Scroll within cell |
|
||||
| Title position | Full-width header with cover color |
|
||||
| Attachment display | Compact list |
|
||||
| Description visibility | Always visible cell in grid |
|
||||
|
||||
## Layout
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────┐
|
||||
│ ██████████████████████████████████████████████████ [×] │ Cover color header
|
||||
│ Card Title (click to edit) │ Inline-editable
|
||||
├────────────────────────────┬─────────────────────────────┤
|
||||
│ LABELS │ DUE DATE │ Row 1: metadata
|
||||
│ [Tag] [Tag] [Tag] [+] │ Feb 20 · 5 days left │
|
||||
├────────────────────────────┼─────────────────────────────┤
|
||||
│ CHECKLIST 2/5 │ DESCRIPTION │ Row 2: content
|
||||
│ ✓ item 1 │ Short notes here... │
|
||||
│ ☐ item 2 (scroll) │ (click to edit) │
|
||||
│ + Add item │ │
|
||||
├────────────────────────────┼─────────────────────────────┤
|
||||
│ COVER │ ATTACHMENTS │ Row 3: secondary
|
||||
│ ○ ○ ○ ○ ○ ○ ○ ○ × │ file.pdf · doc.png │
|
||||
│ │ [+ Add file] │
|
||||
└────────────────────────────┴─────────────────────────────┘
|
||||
```
|
||||
|
||||
### Header
|
||||
- Full-width bar with cover color as background (or neutral `pylon-surface` if no cover)
|
||||
- White text on colored bg, normal text on surface bg
|
||||
- Inline-editable title (click → input → Enter/Escape)
|
||||
- Close [×] button top-right
|
||||
|
||||
### Grid Body
|
||||
- CSS Grid: `grid-template-columns: 1fr 1fr`, `gap: 1rem`
|
||||
- Each cell: `rounded-lg bg-pylon-column/50 p-4`
|
||||
- Section headers: `font-mono text-xs uppercase tracking-widest text-pylon-text-secondary`
|
||||
- Row 1: Labels + Due Date (small metadata)
|
||||
- Row 2: Checklist + Description (main content, max-h ~200px with internal scroll)
|
||||
- Row 3: Cover Color + Attachments (secondary)
|
||||
|
||||
### Modal
|
||||
- Width: `max-w-4xl` (up from `max-w-3xl`)
|
||||
- Max height: `max-h-[85vh]` with body scrollable
|
||||
- Shared layout animation preserved (`layoutId`)
|
||||
|
||||
### Animation
|
||||
- Grid cells stagger in with `fadeSlideUp` + `staggerContainer(0.05)`
|
||||
- Backdrop blur + fade (existing)
|
||||
- Escape/click-outside to close (existing)
|
||||
|
||||
## Files to Modify
|
||||
- `src/components/card-detail/CardDetailModal.tsx` — Full rewrite of layout
|
||||
- `src/components/card-detail/MarkdownEditor.tsx` — Remove min-h-200, adapt for grid cell
|
||||
- `src/components/card-detail/ChecklistSection.tsx` — Add max-height + scroll
|
||||
- Minor: LabelPicker, DueDatePicker, AttachmentSection — No structural changes needed
|
||||
467
docs/plans/2026-02-15-card-detail-redesign-implementation.md
Normal file
467
docs/plans/2026-02-15-card-detail-redesign-implementation.md
Normal file
@@ -0,0 +1,467 @@
|
||||
# Card Detail Modal Redesign — Implementation Plan
|
||||
|
||||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||||
|
||||
**Goal:** Replace the 60/40 split card detail modal with a 2-column dashboard grid where every section gets equal weight.
|
||||
|
||||
**Architecture:** Full rewrite of `CardDetailModal.tsx` to use CSS Grid (2 cols, 3 rows) under a cover-color header. Sub-components (`MarkdownEditor`, `ChecklistSection`) get minor tweaks for cell sizing. `CoverColorPicker` moves from inline private component to its own grid cell. Framer Motion stagger preserved.
|
||||
|
||||
**Tech Stack:** React 19, TypeScript, Framer Motion 12, Tailwind 4, Zustand
|
||||
|
||||
---
|
||||
|
||||
### Task 1: Rewrite CardDetailModal — header + grid shell
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/card-detail/CardDetailModal.tsx` (full rewrite, lines 1-245)
|
||||
|
||||
**Step 1: Replace the entire file with the new layout**
|
||||
|
||||
Replace the full contents of `CardDetailModal.tsx` with:
|
||||
|
||||
```tsx
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
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";
|
||||
import { LabelPicker } from "@/components/card-detail/LabelPicker";
|
||||
import { DueDatePicker } from "@/components/card-detail/DueDatePicker";
|
||||
import { AttachmentSection } from "@/components/card-detail/AttachmentSection";
|
||||
import { springs, staggerContainer, fadeSlideUp } from "@/lib/motion";
|
||||
|
||||
interface CardDetailModalProps {
|
||||
cardId: string | null;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
|
||||
const card = useBoardStore((s) =>
|
||||
cardId ? s.board?.cards[cardId] ?? null : null
|
||||
);
|
||||
const boardLabels = useBoardStore((s) => s.board?.labels ?? []);
|
||||
const updateCard = useBoardStore((s) => s.updateCard);
|
||||
|
||||
const open = cardId != null && card != null;
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{open && card && cardId && (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<motion.div
|
||||
className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Modal */}
|
||||
<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-4xl overflow-hidden rounded-xl bg-pylon-surface shadow-2xl"
|
||||
transition={springs.gentle}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<EscapeHandler onClose={onClose} />
|
||||
<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="grid max-h-[calc(85vh-4rem)] grid-cols-2 gap-4 overflow-y-auto p-5"
|
||||
variants={staggerContainer(0.05)}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{/* Row 1: Labels + Due Date */}
|
||||
<motion.div
|
||||
className="rounded-lg bg-pylon-column/50 p-4"
|
||||
variants={fadeSlideUp}
|
||||
transition={springs.bouncy}
|
||||
>
|
||||
<LabelPicker
|
||||
cardId={cardId}
|
||||
cardLabelIds={card.labels}
|
||||
boardLabels={boardLabels}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="rounded-lg bg-pylon-column/50 p-4"
|
||||
variants={fadeSlideUp}
|
||||
transition={springs.bouncy}
|
||||
>
|
||||
<DueDatePicker cardId={cardId} dueDate={card.dueDate} />
|
||||
</motion.div>
|
||||
|
||||
{/* 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>
|
||||
|
||||
<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}
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Escape key handler ---------- */
|
||||
|
||||
function EscapeHandler({ onClose }: { onClose: () => void }) {
|
||||
useEffect(() => {
|
||||
function handleKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") onClose();
|
||||
}
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||
}, [onClose]);
|
||||
return null;
|
||||
}
|
||||
|
||||
/* ---------- Inline editable title ---------- */
|
||||
|
||||
interface InlineTitleProps {
|
||||
cardId: string;
|
||||
title: string;
|
||||
updateCard: (cardId: string, updates: { title: string }) => void;
|
||||
hasColor: boolean;
|
||||
}
|
||||
|
||||
function InlineTitle({ cardId, title, updateCard, hasColor }: InlineTitleProps) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [draft, setDraft] = useState(title);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setDraft(title);
|
||||
}, [title]);
|
||||
|
||||
useEffect(() => {
|
||||
if (editing && inputRef.current) {
|
||||
inputRef.current.focus();
|
||||
inputRef.current.select();
|
||||
}
|
||||
}, [editing]);
|
||||
|
||||
function handleSave() {
|
||||
const trimmed = draft.trim();
|
||||
if (trimmed && trimmed !== title) {
|
||||
updateCard(cardId, { title: trimmed });
|
||||
} else {
|
||||
setDraft(title);
|
||||
}
|
||||
setEditing(false);
|
||||
}
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent) {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
handleSave();
|
||||
} else if (e.key === "Escape") {
|
||||
setDraft(title);
|
||||
setEditing(false);
|
||||
}
|
||||
}
|
||||
|
||||
const textColor = hasColor ? "text-white" : "text-pylon-text";
|
||||
const hoverColor = hasColor ? "hover:text-white/80" : "hover:text-pylon-accent";
|
||||
|
||||
if (editing) {
|
||||
return (
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={draft}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onBlur={handleSave}
|
||||
onKeyDown={handleKeyDown}
|
||||
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"
|
||||
}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<h2
|
||||
onClick={() => setEditing(true)}
|
||||
className={`flex-1 cursor-pointer font-heading text-xl transition-colors ${textColor} ${hoverColor}`}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- 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"
|
||||
>
|
||||
×
|
||||
</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>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Step 2: Verify TypeScript compiles**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
Expected: No errors
|
||||
|
||||
**Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/card-detail/CardDetailModal.tsx
|
||||
git commit -m "feat: rewrite card detail modal as 2-column dashboard grid"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 2: Adapt MarkdownEditor for grid cell
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/card-detail/MarkdownEditor.tsx` (lines 93-103)
|
||||
|
||||
**Step 1: Replace `min-h-[200px]` with cell-friendly sizing**
|
||||
|
||||
In `MarkdownEditor.tsx`, change the textarea className (line 99):
|
||||
|
||||
```
|
||||
Old: className="min-h-[200px] w-full resize-y rounded-md ...
|
||||
New: className="min-h-[100px] max-h-[160px] w-full resize-y rounded-md ...
|
||||
```
|
||||
|
||||
And change the preview container className (line 103):
|
||||
|
||||
```
|
||||
Old: className="min-h-[200px] cursor-pointer rounded-md ...
|
||||
New: className="min-h-[100px] max-h-[160px] overflow-y-auto cursor-pointer rounded-md ...
|
||||
```
|
||||
|
||||
**Step 2: Verify TypeScript compiles**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
Expected: No errors
|
||||
|
||||
**Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/card-detail/MarkdownEditor.tsx
|
||||
git commit -m "feat: adapt markdown editor sizing for dashboard grid cell"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 3: Add scroll containment to ChecklistSection
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/card-detail/ChecklistSection.tsx` (lines 52-64)
|
||||
|
||||
**Step 1: Add max-height + overflow to the checklist items container**
|
||||
|
||||
In `ChecklistSection.tsx`, change the items container (line 53):
|
||||
|
||||
```
|
||||
Old: <div className="flex flex-col gap-1">
|
||||
New: <div className="flex max-h-[160px] flex-col gap-1 overflow-y-auto">
|
||||
```
|
||||
|
||||
Also add a small progress bar under the header. Change lines 39-50 (the header section) to:
|
||||
|
||||
```tsx
|
||||
{/* 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 && (
|
||||
<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>
|
||||
```
|
||||
|
||||
**Step 2: Verify TypeScript compiles**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
Expected: No errors
|
||||
|
||||
**Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/card-detail/ChecklistSection.tsx
|
||||
git commit -m "feat: add scroll containment and progress bar to checklist"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 4: Remove unused Separator import + visual verification
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/card-detail/CardDetailModal.tsx` (verify no stale imports)
|
||||
|
||||
**Step 1: Verify the file has no unused imports**
|
||||
|
||||
The rewrite in Task 1 already removed the `Separator` import. Confirm the import block does NOT include:
|
||||
- `import { Separator } from "@/components/ui/separator";`
|
||||
|
||||
If it's still there, delete it.
|
||||
|
||||
**Step 2: Run TypeScript check**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
Expected: No errors
|
||||
|
||||
**Step 3: Run the dev server and visually verify**
|
||||
|
||||
Run: `npm run dev` (or `npx tauri dev` if checking in Tauri)
|
||||
|
||||
Verify:
|
||||
- Card detail modal opens on card click
|
||||
- Full-width header shows cover color (or neutral bg)
|
||||
- Title is editable (click to edit, Enter/Escape)
|
||||
- Close button [x] works
|
||||
- 2x3 grid: Labels | Due Date / Checklist | Description / Cover | Attachments
|
||||
- Each cell has rounded-lg background
|
||||
- Checklist scrolls when > ~6 items
|
||||
- Description shows compact preview
|
||||
- All animations stagger in
|
||||
- Escape closes modal
|
||||
- Click outside closes modal
|
||||
|
||||
**Step 4: Commit**
|
||||
|
||||
```bash
|
||||
git add -A
|
||||
git commit -m "feat: card detail modal dashboard grid redesign complete"
|
||||
```
|
||||
Reference in New Issue
Block a user