feat: Phase 1 quick wins - defaultColumnWidth, due date colors, card aging, open attachments
This commit is contained in:
Your Name
@@ -1,14 +1,54 @@
|
||||
import React from "react";
|
||||
import { format, isPast, isToday } from "date-fns";
|
||||
import { motion, useReducedMotion } from "framer-motion";
|
||||
import { useState, useRef } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { format } from "date-fns";
|
||||
import { motion, useReducedMotion, AnimatePresence } from "framer-motion";
|
||||
import { fadeSlideUp, springs } from "@/lib/motion";
|
||||
import { useSortable } from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import type { Card, Label } from "@/types/board";
|
||||
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
|
||||
import { LabelDots } from "@/components/board/LabelDots";
|
||||
import { ChecklistBar } from "@/components/board/ChecklistBar";
|
||||
import { Paperclip, AlignLeft } from "lucide-react";
|
||||
|
||||
/* ---------- Due date status ---------- */
|
||||
|
||||
function getDueDateStatus(dueDate: string | null): { color: string; bgColor: string; label: string } | null {
|
||||
if (!dueDate) return null;
|
||||
const date = new Date(dueDate);
|
||||
const now = new Date();
|
||||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||
const dueDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
||||
const diffDays = Math.ceil((dueDay.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (diffDays < 0) {
|
||||
return { color: "text-pylon-danger", bgColor: "bg-pylon-danger/10", label: "Overdue" };
|
||||
}
|
||||
if (diffDays <= 2) {
|
||||
return { color: "text-[oklch(65%_0.15_70)]", bgColor: "bg-[oklch(65%_0.15_70/10%)]", label: "Due soon" };
|
||||
}
|
||||
return { color: "text-[oklch(55%_0.12_145)]", bgColor: "bg-[oklch(55%_0.12_145/10%)]", label: "Upcoming" };
|
||||
}
|
||||
|
||||
/* ---------- Card aging ---------- */
|
||||
|
||||
function getAgingOpacity(updatedAt: string): number {
|
||||
const days = (Date.now() - new Date(updatedAt).getTime()) / (1000 * 60 * 60 * 24);
|
||||
if (days <= 7) return 1.0;
|
||||
if (days <= 14) return 0.85;
|
||||
if (days <= 30) return 0.7;
|
||||
return 0.55;
|
||||
}
|
||||
|
||||
/* ---------- Priority colors ---------- */
|
||||
|
||||
const PRIORITY_COLORS: Record<string, string> = {
|
||||
low: "oklch(60% 0.15 240)",
|
||||
medium: "oklch(70% 0.15 85)",
|
||||
high: "oklch(60% 0.15 55)",
|
||||
urgent: "oklch(55% 0.15 25)",
|
||||
};
|
||||
|
||||
interface CardThumbnailProps {
|
||||
card: Card;
|
||||
boardLabels: Label[];
|
||||
@@ -31,25 +71,40 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
|
||||
data: { type: "card", columnId },
|
||||
});
|
||||
|
||||
const style: React.CSSProperties = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.3 : undefined,
|
||||
padding: `calc(0.75rem * var(--density-factor))`,
|
||||
};
|
||||
|
||||
const hasDueDate = card.dueDate != null;
|
||||
const dueDate = hasDueDate ? new Date(card.dueDate!) : null;
|
||||
const overdue = dueDate != null && isPast(dueDate) && !isToday(dueDate);
|
||||
const dueDateStatus = getDueDateStatus(card.dueDate);
|
||||
|
||||
function handleClick() {
|
||||
onCardClick?.(card.id);
|
||||
}
|
||||
|
||||
// Drop indicator line when this card is being dragged
|
||||
if (isDragging) {
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={{
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
}}
|
||||
className="py-1"
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
>
|
||||
<div className="h-[3px] rounded-full bg-pylon-accent shadow-[0_0_6px_var(--pylon-accent),0_0_14px_var(--pylon-accent)]" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.button
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
style={{
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
padding: `calc(0.75rem * var(--density-factor))`,
|
||||
opacity: getAgingOpacity(card.updatedAt),
|
||||
}}
|
||||
onClick={handleClick}
|
||||
className="w-full rounded-lg bg-pylon-surface shadow-sm text-left"
|
||||
layoutId={`card-${card.id}`}
|
||||
@@ -86,25 +141,29 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
|
||||
{/* Card title */}
|
||||
<p className="text-sm font-medium text-pylon-text">{card.title}</p>
|
||||
|
||||
{/* Footer row: due date + checklist */}
|
||||
{(hasDueDate || card.checklist.length > 0 || card.attachments.length > 0 || card.description) && (
|
||||
{/* Footer row: priority + due date + checklist + icons */}
|
||||
{(hasDueDate || card.checklist.length > 0 || card.attachments.length > 0 || card.description || card.priority !== "none") && (
|
||||
<div className="mt-2 flex items-center gap-3">
|
||||
{dueDate && (
|
||||
{card.priority !== "none" && (
|
||||
<span
|
||||
className={`font-mono text-xs ${
|
||||
overdue
|
||||
? "rounded bg-pylon-danger/10 px-1 py-0.5 text-pylon-danger"
|
||||
: "text-pylon-text-secondary"
|
||||
}`}
|
||||
className={`size-2.5 shrink-0 rounded-full ${card.priority === "urgent" ? "animate-pulse" : ""}`}
|
||||
style={{ backgroundColor: PRIORITY_COLORS[card.priority] }}
|
||||
title={`Priority: ${card.priority}`}
|
||||
/>
|
||||
)}
|
||||
{dueDateStatus && card.dueDate && (
|
||||
<span
|
||||
className={`font-mono text-xs rounded px-1 py-0.5 ${dueDateStatus.color} ${dueDateStatus.bgColor}`}
|
||||
title={dueDateStatus.label}
|
||||
>
|
||||
{format(dueDate, "MMM d")}
|
||||
{format(new Date(card.dueDate), "MMM d")}
|
||||
</span>
|
||||
)}
|
||||
{card.checklist.length > 0 && (
|
||||
<ChecklistBar checklist={card.checklist} />
|
||||
)}
|
||||
{card.description && (
|
||||
<AlignLeft className="size-3 text-pylon-text-secondary" />
|
||||
<DescriptionPreview description={card.description} />
|
||||
)}
|
||||
{card.attachments.length > 0 && (
|
||||
<span className="flex items-center gap-0.5 text-pylon-text-secondary">
|
||||
@@ -117,3 +176,120 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
|
||||
</motion.button>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Description hover preview ---------- */
|
||||
|
||||
function DescriptionPreview({ description }: { description: string }) {
|
||||
const [show, setShow] = useState(false);
|
||||
const [pos, setPos] = useState<{ below: boolean; top?: number; bottom?: number; left: number; arrowLeft: number; maxHeight: number } | null>(null);
|
||||
const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const iconRef = useRef<HTMLSpanElement>(null);
|
||||
|
||||
function handleEnter() {
|
||||
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
||||
timeoutRef.current = setTimeout(() => {
|
||||
if (iconRef.current) {
|
||||
const rect = iconRef.current.getBoundingClientRect();
|
||||
const zoom = parseFloat(getComputedStyle(document.documentElement).fontSize) / 16;
|
||||
const popupW = 224 * zoom; // w-56 = 14rem, scales with zoom
|
||||
const gap = 8;
|
||||
|
||||
// Flip below if more room below than above
|
||||
const titleBarH = 52 * zoom;
|
||||
const spaceAbove = rect.top - gap - titleBarH;
|
||||
const spaceBelow = window.innerHeight - rect.bottom - gap - 8;
|
||||
const below = spaceBelow > spaceAbove;
|
||||
|
||||
// Max height for popup content (stay within viewport)
|
||||
const paddingPx = 24 * zoom; // p-3 top + bottom
|
||||
const maxAvailable = below
|
||||
? window.innerHeight - (rect.bottom + gap) - 8
|
||||
: rect.top - gap - titleBarH;
|
||||
const maxHeight = Math.max(60, Math.min(maxAvailable - paddingPx, 300 * zoom));
|
||||
|
||||
// Center horizontally, clamp to viewport
|
||||
let left = rect.left + rect.width / 2 - popupW / 2;
|
||||
left = Math.max(8, Math.min(left, window.innerWidth - popupW - 8));
|
||||
|
||||
// Arrow offset relative to popup left edge
|
||||
const arrowLeft = Math.max(12, Math.min(rect.left + rect.width / 2 - left, popupW - 12));
|
||||
|
||||
// Position: use top when below, bottom when above (avoids height estimation)
|
||||
setPos(below
|
||||
? { below: true, top: rect.bottom + gap, left, arrowLeft, maxHeight }
|
||||
: { below: false, bottom: window.innerHeight - rect.top + gap, left, arrowLeft, maxHeight }
|
||||
);
|
||||
}
|
||||
setShow(true);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function handleLeave() {
|
||||
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
||||
timeoutRef.current = setTimeout(() => setShow(false), 100);
|
||||
}
|
||||
|
||||
function cancelHide() {
|
||||
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
||||
}
|
||||
|
||||
// Strip markdown formatting for a clean preview
|
||||
const plainText = description
|
||||
.replace(/^#{1,6}\s+/gm, "")
|
||||
.replace(/\*\*(.+?)\*\*/g, "$1")
|
||||
.replace(/\*(.+?)\*/g, "$1")
|
||||
.replace(/`(.+?)`/g, "$1")
|
||||
.replace(/\[(.+?)\]\(.+?\)/g, "$1")
|
||||
.replace(/^[-*]\s+/gm, "- ")
|
||||
.trim();
|
||||
|
||||
|
||||
return (
|
||||
<span
|
||||
ref={iconRef}
|
||||
onMouseEnter={handleEnter}
|
||||
onMouseLeave={handleLeave}
|
||||
>
|
||||
<AlignLeft className="size-3 text-pylon-text-secondary" />
|
||||
{createPortal(
|
||||
<AnimatePresence>
|
||||
{show && pos && (
|
||||
<motion.div
|
||||
key="desc-preview"
|
||||
initial={{ opacity: 0, y: pos.below ? -4 : 4, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: pos.below ? -4 : 4, scale: 0.95 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
className="pointer-events-auto fixed z-[9999] w-56 rounded-lg border border-border bg-pylon-surface p-3 shadow-xl"
|
||||
style={{
|
||||
...(pos.below ? { top: pos.top } : { bottom: pos.bottom }),
|
||||
left: pos.left,
|
||||
}}
|
||||
onMouseEnter={cancelHide}
|
||||
onMouseLeave={() => setShow(false)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Arrow */}
|
||||
<div
|
||||
className={`absolute size-2 rotate-45 border-border bg-pylon-surface ${
|
||||
pos.below ? "-top-1 border-l border-t" : "-bottom-1 border-b border-r"
|
||||
}`}
|
||||
style={{ left: pos.arrowLeft }}
|
||||
/>
|
||||
<OverlayScrollbarsComponent
|
||||
style={{ maxHeight: pos.maxHeight }}
|
||||
options={{ scrollbars: { theme: "os-theme-pylon", autoHide: "scroll", autoHideDelay: 600, clickScroll: true }, overflow: { x: "hidden" } }}
|
||||
defer
|
||||
>
|
||||
<p className="whitespace-pre-wrap text-xs leading-relaxed text-pylon-text">
|
||||
{plainText}
|
||||
</p>
|
||||
</OverlayScrollbarsComponent>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>,
|
||||
document.body
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user