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
69
src/components/card-detail/AttachmentSection.tsx
Normal file
69
src/components/card-detail/AttachmentSection.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import { FileIcon, X, Plus } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useBoardStore } from "@/stores/board-store";
|
||||
import type { Attachment } from "@/types/board";
|
||||
|
||||
interface AttachmentSectionProps {
|
||||
cardId: string;
|
||||
attachments: Attachment[];
|
||||
attachmentMode: "link" | "copy";
|
||||
}
|
||||
|
||||
export function AttachmentSection({
|
||||
cardId,
|
||||
attachments,
|
||||
}: AttachmentSectionProps) {
|
||||
const removeAttachment = useBoardStore((s) => s.removeAttachment);
|
||||
|
||||
function handleAdd() {
|
||||
// Placeholder: Tauri file dialog will be wired in a later task
|
||||
console.log("Add attachment (file dialog not yet wired)");
|
||||
}
|
||||
|
||||
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">
|
||||
Attachments
|
||||
</h4>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
onClick={handleAdd}
|
||||
className="text-pylon-text-secondary hover:text-pylon-text"
|
||||
>
|
||||
<Plus className="size-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Attachment list */}
|
||||
{attachments.length > 0 ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
{attachments.map((att) => (
|
||||
<div
|
||||
key={att.id}
|
||||
className="group/att flex items-center gap-2 rounded px-1 py-1 hover:bg-pylon-column/60"
|
||||
>
|
||||
<FileIcon className="size-3.5 shrink-0 text-pylon-text-secondary" />
|
||||
<span className="flex-1 truncate text-sm text-pylon-text">
|
||||
{att.name}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removeAttachment(cardId, att.id)}
|
||||
className="shrink-0 rounded p-0.5 text-pylon-text-secondary opacity-0 transition-opacity hover:bg-pylon-danger/10 hover:text-pylon-danger group-hover/att:opacity-100"
|
||||
aria-label="Remove attachment"
|
||||
>
|
||||
<X className="size-3" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs italic text-pylon-text-secondary/60">
|
||||
No attachments
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
162
src/components/card-detail/CardDetailModal.tsx
Normal file
162
src/components/card-detail/CardDetailModal.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
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";
|
||||
|
||||
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 attachmentMode = useBoardStore(
|
||||
(s) => s.board?.settings.attachmentMode ?? "link"
|
||||
);
|
||||
const updateCard = useBoardStore((s) => s.updateCard);
|
||||
|
||||
const open = cardId != null && card != null;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
|
||||
<DialogContent className="max-w-3xl gap-0 overflow-hidden p-0">
|
||||
{card && cardId && (
|
||||
<>
|
||||
{/* Hidden accessible description */}
|
||||
<DialogDescription className="sr-only">
|
||||
Card detail editor
|
||||
</DialogDescription>
|
||||
|
||||
<div className="flex max-h-[80vh] flex-col sm:flex-row">
|
||||
{/* Left panel: Title + Markdown (60%) */}
|
||||
<div className="flex flex-1 flex-col overflow-y-auto p-6 sm:w-[60%]">
|
||||
<DialogHeader className="mb-4">
|
||||
<InlineTitle
|
||||
cardId={cardId}
|
||||
title={card.title}
|
||||
updateCard={updateCard}
|
||||
/>
|
||||
</DialogHeader>
|
||||
|
||||
<MarkdownEditor cardId={cardId} value={card.description} />
|
||||
</div>
|
||||
|
||||
{/* Vertical separator */}
|
||||
<Separator orientation="vertical" className="hidden sm:block" />
|
||||
|
||||
{/* Right sidebar (40%) */}
|
||||
<div className="flex flex-col gap-5 overflow-y-auto border-t border-border p-5 sm:w-[40%] sm:border-t-0">
|
||||
<LabelPicker
|
||||
cardId={cardId}
|
||||
cardLabelIds={card.labels}
|
||||
boardLabels={boardLabels}
|
||||
/>
|
||||
|
||||
<Separator />
|
||||
|
||||
<DueDatePicker cardId={cardId} dueDate={card.dueDate} />
|
||||
|
||||
<Separator />
|
||||
|
||||
<ChecklistSection
|
||||
cardId={cardId}
|
||||
checklist={card.checklist}
|
||||
/>
|
||||
|
||||
<Separator />
|
||||
|
||||
<AttachmentSection
|
||||
cardId={cardId}
|
||||
attachments={card.attachments}
|
||||
attachmentMode={attachmentMode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Inline editable title ---------- */
|
||||
|
||||
interface InlineTitleProps {
|
||||
cardId: string;
|
||||
title: string;
|
||||
updateCard: (cardId: string, updates: { title: string }) => void;
|
||||
}
|
||||
|
||||
function InlineTitle({ cardId, title, updateCard }: InlineTitleProps) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [draft, setDraft] = useState(title);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Sync when title changes externally
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
if (editing) {
|
||||
return (
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={draft}
|
||||
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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<DialogTitle
|
||||
onClick={() => setEditing(true)}
|
||||
className="cursor-pointer font-heading text-xl text-pylon-text transition-colors hover:text-pylon-accent"
|
||||
>
|
||||
{title}
|
||||
</DialogTitle>
|
||||
);
|
||||
}
|
||||
156
src/components/card-detail/ChecklistSection.tsx
Normal file
156
src/components/card-detail/ChecklistSection.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import { useState, useRef } from "react";
|
||||
import { X } from "lucide-react";
|
||||
import { useBoardStore } from "@/stores/board-store";
|
||||
import type { ChecklistItem } from "@/types/board";
|
||||
|
||||
interface ChecklistSectionProps {
|
||||
cardId: string;
|
||||
checklist: ChecklistItem[];
|
||||
}
|
||||
|
||||
export function ChecklistSection({ cardId, checklist }: ChecklistSectionProps) {
|
||||
const toggleChecklistItem = useBoardStore((s) => s.toggleChecklistItem);
|
||||
const updateChecklistItem = useBoardStore((s) => s.updateChecklistItem);
|
||||
const deleteChecklistItem = useBoardStore((s) => s.deleteChecklistItem);
|
||||
const addChecklistItem = useBoardStore((s) => s.addChecklistItem);
|
||||
|
||||
const [newItemText, setNewItemText] = useState("");
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const checked = checklist.filter((item) => item.checked).length;
|
||||
|
||||
function handleAddItem() {
|
||||
const trimmed = newItemText.trim();
|
||||
if (trimmed) {
|
||||
addChecklistItem(cardId, trimmed);
|
||||
setNewItemText("");
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent) {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
handleAddItem();
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
{checklist.length > 0 && (
|
||||
<span className="font-mono text-xs text-pylon-text-secondary">
|
||||
{checked}/{checklist.length}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Items */}
|
||||
<div className="flex flex-col gap-1">
|
||||
{checklist.map((item) => (
|
||||
<ChecklistRow
|
||||
key={item.id}
|
||||
cardId={cardId}
|
||||
item={item}
|
||||
onToggle={() => toggleChecklistItem(cardId, item.id)}
|
||||
onUpdate={(text) => updateChecklistItem(cardId, item.id, text)}
|
||||
onDelete={() => deleteChecklistItem(cardId, item.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Add item */}
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={newItemText}
|
||||
onChange={(e) => setNewItemText(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Add item..."
|
||||
className="h-7 flex-1 rounded-md bg-pylon-column px-2 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60 focus:ring-1 focus:ring-pylon-accent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ChecklistRowProps {
|
||||
cardId: string;
|
||||
item: ChecklistItem;
|
||||
onToggle: () => void;
|
||||
onUpdate: (text: string) => void;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
function ChecklistRow({ item, onToggle, onUpdate, onDelete }: ChecklistRowProps) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [draft, setDraft] = useState(item.text);
|
||||
|
||||
function handleSave() {
|
||||
const trimmed = draft.trim();
|
||||
if (trimmed && trimmed !== item.text) {
|
||||
onUpdate(trimmed);
|
||||
} else {
|
||||
setDraft(item.text);
|
||||
}
|
||||
setEditing(false);
|
||||
}
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent) {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
handleSave();
|
||||
} else if (e.key === "Escape") {
|
||||
setDraft(item.text);
|
||||
setEditing(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="group/item flex items-center gap-2 rounded px-1 py-0.5 hover:bg-pylon-column/60">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.checked}
|
||||
onChange={onToggle}
|
||||
className="size-3.5 shrink-0 cursor-pointer accent-pylon-accent"
|
||||
/>
|
||||
|
||||
{editing ? (
|
||||
<input
|
||||
autoFocus
|
||||
value={draft}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onBlur={handleSave}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="h-6 flex-1 rounded bg-pylon-surface px-1 text-sm text-pylon-text outline-none focus:ring-1 focus:ring-pylon-accent"
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
onClick={() => {
|
||||
setDraft(item.text);
|
||||
setEditing(true);
|
||||
}}
|
||||
className={`flex-1 cursor-pointer text-sm ${
|
||||
item.checked
|
||||
? "line-through text-pylon-text-secondary"
|
||||
: "text-pylon-text"
|
||||
}`}
|
||||
>
|
||||
{item.text}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={onDelete}
|
||||
className="shrink-0 rounded p-0.5 text-pylon-text-secondary opacity-0 transition-opacity hover:bg-pylon-danger/10 hover:text-pylon-danger group-hover/item:opacity-100"
|
||||
aria-label="Delete item"
|
||||
>
|
||||
<X className="size-3" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
82
src/components/card-detail/DueDatePicker.tsx
Normal file
82
src/components/card-detail/DueDatePicker.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import { format, formatDistanceToNow, isPast, isToday } from "date-fns";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useBoardStore } from "@/stores/board-store";
|
||||
|
||||
interface DueDatePickerProps {
|
||||
cardId: string;
|
||||
dueDate: string | null;
|
||||
}
|
||||
|
||||
export function DueDatePicker({ cardId, dueDate }: DueDatePickerProps) {
|
||||
const updateCard = useBoardStore((s) => s.updateCard);
|
||||
|
||||
const dateObj = dueDate ? new Date(dueDate) : null;
|
||||
const overdue = dateObj != null && isPast(dateObj) && !isToday(dateObj);
|
||||
|
||||
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const val = e.target.value;
|
||||
updateCard(cardId, { dueDate: val || null });
|
||||
}
|
||||
|
||||
function handleClear() {
|
||||
updateCard(cardId, { dueDate: null });
|
||||
}
|
||||
|
||||
// Format the date value for the HTML date input (YYYY-MM-DD)
|
||||
const inputValue = dateObj
|
||||
? format(dateObj, "yyyy-MM-dd")
|
||||
: "";
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
{/* Header */}
|
||||
<h4 className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
|
||||
Due Date
|
||||
</h4>
|
||||
|
||||
{/* Current date display */}
|
||||
{dateObj && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`text-sm font-medium ${
|
||||
overdue ? "text-pylon-danger" : "text-pylon-text"
|
||||
}`}
|
||||
>
|
||||
{format(dateObj, "MMM d, yyyy")}
|
||||
</span>
|
||||
<span
|
||||
className={`text-xs ${
|
||||
overdue ? "text-pylon-danger" : "text-pylon-text-secondary"
|
||||
}`}
|
||||
>
|
||||
{overdue
|
||||
? `overdue by ${formatDistanceToNow(dateObj)}`
|
||||
: isToday(dateObj)
|
||||
? "today"
|
||||
: `in ${formatDistanceToNow(dateObj)}`}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Date input + clear */}
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="date"
|
||||
value={inputValue}
|
||||
onChange={handleChange}
|
||||
className="h-7 rounded-md border border-pylon-text-secondary/20 bg-pylon-column px-2 text-xs text-pylon-text outline-none focus:border-pylon-accent focus:ring-1 focus:ring-pylon-accent"
|
||||
/>
|
||||
{dueDate && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
onClick={handleClear}
|
||||
className="text-pylon-text-secondary hover:text-pylon-danger"
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
186
src/components/card-detail/LabelPicker.tsx
Normal file
186
src/components/card-detail/LabelPicker.tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
import { useState } from "react";
|
||||
import { Plus, Check } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { useBoardStore } from "@/stores/board-store";
|
||||
import type { Label } from "@/types/board";
|
||||
|
||||
interface LabelPickerProps {
|
||||
cardId: string;
|
||||
cardLabelIds: string[];
|
||||
boardLabels: Label[];
|
||||
}
|
||||
|
||||
const COLOR_SWATCHES = [
|
||||
"#ef4444", // red
|
||||
"#f97316", // orange
|
||||
"#eab308", // yellow
|
||||
"#22c55e", // green
|
||||
"#06b6d4", // cyan
|
||||
"#3b82f6", // blue
|
||||
"#8b5cf6", // violet
|
||||
"#ec4899", // pink
|
||||
];
|
||||
|
||||
export function LabelPicker({
|
||||
cardId,
|
||||
cardLabelIds,
|
||||
boardLabels,
|
||||
}: LabelPickerProps) {
|
||||
const toggleCardLabel = useBoardStore((s) => s.toggleCardLabel);
|
||||
const addLabel = useBoardStore((s) => s.addLabel);
|
||||
|
||||
const [newLabelName, setNewLabelName] = useState("");
|
||||
const [newLabelColor, setNewLabelColor] = useState(COLOR_SWATCHES[0]);
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
|
||||
const currentLabels = boardLabels.filter((l) => cardLabelIds.includes(l.id));
|
||||
|
||||
function handleCreateLabel() {
|
||||
const trimmed = newLabelName.trim();
|
||||
if (trimmed) {
|
||||
addLabel(trimmed, newLabelColor);
|
||||
setNewLabelName("");
|
||||
setShowCreate(false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleCreateKeyDown(e: React.KeyboardEvent) {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
handleCreateLabel();
|
||||
}
|
||||
}
|
||||
|
||||
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">
|
||||
Labels
|
||||
</h4>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
className="text-pylon-text-secondary hover:text-pylon-text"
|
||||
>
|
||||
<Plus className="size-3.5" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="end" className="w-64 bg-pylon-surface p-3">
|
||||
<div className="flex flex-col gap-2">
|
||||
<p className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
|
||||
Toggle labels
|
||||
</p>
|
||||
|
||||
{/* Existing labels */}
|
||||
{boardLabels.length > 0 && (
|
||||
<div className="flex max-h-40 flex-col gap-1 overflow-y-auto">
|
||||
{boardLabels.map((label) => {
|
||||
const isSelected = cardLabelIds.includes(label.id);
|
||||
return (
|
||||
<button
|
||||
key={label.id}
|
||||
onClick={() => toggleCardLabel(cardId, label.id)}
|
||||
className="flex items-center gap-2 rounded px-2 py-1 text-left text-sm transition-colors hover:bg-pylon-column"
|
||||
>
|
||||
<span
|
||||
className="size-3 shrink-0 rounded-full"
|
||||
style={{ backgroundColor: label.color }}
|
||||
/>
|
||||
<span className="flex-1 truncate text-pylon-text">
|
||||
{label.name}
|
||||
</span>
|
||||
{isSelected && (
|
||||
<Check className="size-3.5 shrink-0 text-pylon-accent" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create new label */}
|
||||
{showCreate ? (
|
||||
<div className="flex flex-col gap-2 border-t border-pylon-text-secondary/20 pt-2">
|
||||
<input
|
||||
autoFocus
|
||||
value={newLabelName}
|
||||
onChange={(e) => setNewLabelName(e.target.value)}
|
||||
onKeyDown={handleCreateKeyDown}
|
||||
placeholder="Label name..."
|
||||
className="h-7 rounded-md bg-pylon-column px-2 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60 focus:ring-1 focus:ring-pylon-accent"
|
||||
/>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{COLOR_SWATCHES.map((color) => (
|
||||
<button
|
||||
key={color}
|
||||
onClick={() => setNewLabelColor(color)}
|
||||
className="size-5 rounded-full transition-transform hover:scale-110"
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
outline:
|
||||
newLabelColor === color
|
||||
? "2px solid var(--pylon-accent)"
|
||||
: "none",
|
||||
outlineOffset: "1px",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<Button size="xs" onClick={handleCreateLabel}>
|
||||
Add
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
onClick={() => {
|
||||
setShowCreate(false);
|
||||
setNewLabelName("");
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
className="border-t border-pylon-text-secondary/20 pt-2 text-left text-xs text-pylon-text-secondary transition-colors hover:text-pylon-text"
|
||||
>
|
||||
+ Create label
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* Current labels display */}
|
||||
{currentLabels.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{currentLabels.map((label) => (
|
||||
<span
|
||||
key={label.id}
|
||||
className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium text-white"
|
||||
style={{ backgroundColor: label.color }}
|
||||
>
|
||||
{label.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs italic text-pylon-text-secondary/60">
|
||||
No labels
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
121
src/components/card-detail/MarkdownEditor.tsx
Normal file
121
src/components/card-detail/MarkdownEditor.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import { useState, useRef, useEffect, useCallback } from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useBoardStore } from "@/stores/board-store";
|
||||
|
||||
interface MarkdownEditorProps {
|
||||
cardId: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export function MarkdownEditor({ cardId, value }: MarkdownEditorProps) {
|
||||
const [mode, setMode] = useState<"edit" | "preview">("preview");
|
||||
const [draft, setDraft] = useState(value);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const updateCard = useBoardStore((s) => s.updateCard);
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
// Sync draft when value changes externally (e.g. undo)
|
||||
useEffect(() => {
|
||||
setDraft(value);
|
||||
}, [value]);
|
||||
|
||||
// Auto-focus textarea when switching to edit mode
|
||||
useEffect(() => {
|
||||
if (mode === "edit" && textareaRef.current) {
|
||||
textareaRef.current.focus();
|
||||
}
|
||||
}, [mode]);
|
||||
|
||||
const save = useCallback(
|
||||
(text: string) => {
|
||||
if (text !== value) {
|
||||
updateCard(cardId, { description: text });
|
||||
}
|
||||
},
|
||||
[cardId, value, updateCard]
|
||||
);
|
||||
|
||||
function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
|
||||
const text = e.target.value;
|
||||
setDraft(text);
|
||||
|
||||
// Debounced auto-save
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
debounceRef.current = setTimeout(() => {
|
||||
save(text);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function handleBlur() {
|
||||
if (debounceRef.current) {
|
||||
clearTimeout(debounceRef.current);
|
||||
debounceRef.current = null;
|
||||
}
|
||||
save(draft);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
{/* Mode toggle */}
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant={mode === "edit" ? "secondary" : "ghost"}
|
||||
size="xs"
|
||||
onClick={() => setMode("edit")}
|
||||
className="font-mono text-xs"
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant={mode === "preview" ? "secondary" : "ghost"}
|
||||
size="xs"
|
||||
onClick={() => {
|
||||
// Save before switching to preview
|
||||
if (mode === "edit") {
|
||||
if (debounceRef.current) {
|
||||
clearTimeout(debounceRef.current);
|
||||
debounceRef.current = null;
|
||||
}
|
||||
save(draft);
|
||||
}
|
||||
setMode("preview");
|
||||
}}
|
||||
className="font-mono text-xs"
|
||||
>
|
||||
Preview
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Editor / Preview */}
|
||||
{mode === "edit" ? (
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={draft}
|
||||
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"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="min-h-[200px] cursor-pointer rounded-md border border-transparent px-1 py-1 transition-colors hover:border-pylon-text-secondary/20"
|
||||
onClick={() => setMode("edit")}
|
||||
>
|
||||
{draft ? (
|
||||
<div className="prose prose-sm max-w-none text-pylon-text prose-headings:text-pylon-text prose-p:text-pylon-text prose-strong:text-pylon-text prose-a:text-pylon-accent prose-code:rounded prose-code:bg-pylon-column prose-code:px-1 prose-code:py-0.5 prose-code:text-pylon-text prose-pre:bg-pylon-column prose-pre:text-pylon-text">
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
||||
{draft}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm italic text-pylon-text-secondary/60">
|
||||
Click to add a description...
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user