lashman/openpylon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: redesign card detail modal as 2-column dashboard grid

Browse Source 
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
2026-02-15 21:41:16 +02:00
parent 63b7de0e6f
commit 21302bdfe9
5 changed files with 665 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
docs/plans/2026-02-15-card-detail-redesign-design.md Normal file
View 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
View 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"
>
&times;
</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"
```

152
src/components/card-detail/CardDetailModal.tsx
View File

@@ -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}

28
src/components/card-detail/ChecklistSection.tsx
View File

@@ -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}

4
src/components/card-detail/MarkdownEditor.tsx
View File

@@ -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 ? (