UI redesign: status dots with pulse + avatar circles + one-row header
- TaskCard: overlapping avatars, colored status dot (pulse for active) - Header: group dropdown + status pills in single 40px row - CSS: statusPulse animation - Group interface: display_name optional field Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -9,39 +9,20 @@ import { useSwipeable } from "react-swipeable";
|
||||
interface TaskCardProps {
|
||||
task: Task;
|
||||
onComplete?: (taskId: string) => void;
|
||||
onAssign?: (taskId: string) => void;
|
||||
}
|
||||
|
||||
const PRIORITY_COLORS: Record<string, string> = {
|
||||
urgent: "#ef4444",
|
||||
high: "#f97316",
|
||||
medium: "#eab308",
|
||||
low: "#22c55e",
|
||||
};
|
||||
|
||||
const PRIORITY_ICONS: Record<string, string> = {
|
||||
urgent: "\u25c6",
|
||||
high: "\u25b2",
|
||||
medium: "\u25cf",
|
||||
low: "\u25bd",
|
||||
};
|
||||
|
||||
const STATUS_DOT_COLORS: Record<string, string> = {
|
||||
pending: "#9CA3AF",
|
||||
in_progress: "#F59E0B",
|
||||
done: "#22C55E",
|
||||
completed: "#22C55E",
|
||||
cancelled: "#EF4444",
|
||||
};
|
||||
|
||||
function isDone(status: string): boolean {
|
||||
return status === "done" || status === "completed";
|
||||
function statusColor(status: string): string {
|
||||
switch (status) {
|
||||
case "todo":
|
||||
case "pending": return "#F59E0B"; // yellow
|
||||
case "in_progress": return "#3B82F6"; // blue
|
||||
case "done": return "#22C55E"; // green
|
||||
case "cancelled": return "#6B7280"; // gray
|
||||
default: return "#F59E0B";
|
||||
}
|
||||
}
|
||||
|
||||
function isInProgress(status: string): boolean {
|
||||
return status === "in_progress";
|
||||
}
|
||||
|
||||
/** Generate a consistent color from a string (user ID) */
|
||||
function userColor(userId: string): string {
|
||||
const colors = [
|
||||
"#3B82F6", "#8B5CF6", "#EC4899", "#F59E0B",
|
||||
@@ -55,41 +36,43 @@ function userColor(userId: string): string {
|
||||
return colors[Math.abs(hash) % colors.length];
|
||||
}
|
||||
|
||||
/** Get initials from user ID (first 2 chars uppercase) */
|
||||
function userInitials(userId: string): string {
|
||||
return userId.slice(0, 2).toUpperCase();
|
||||
function isDueSoon(dateStr: string): boolean {
|
||||
const due = new Date(dateStr).getTime();
|
||||
const now = Date.now();
|
||||
return due - now <= 7 * 24 * 60 * 60 * 1000;
|
||||
}
|
||||
|
||||
export default function TaskCard({ task, onComplete }: TaskCardProps) {
|
||||
function isPast(dateStr: string): boolean {
|
||||
return new Date(dateStr).getTime() < Date.now();
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
return new Date(dateStr).toLocaleDateString(undefined, { month: "short", day: "numeric" });
|
||||
}
|
||||
|
||||
export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps) {
|
||||
const { t } = useTranslation();
|
||||
const priorityColor = PRIORITY_COLORS[task.priority] || PRIORITY_COLORS.medium;
|
||||
const priorityIcon = PRIORITY_ICONS[task.priority] || PRIORITY_ICONS.medium;
|
||||
const statusDotColor = STATUS_DOT_COLORS[task.status] || STATUS_DOT_COLORS.pending;
|
||||
const taskDone = isDone(task.status);
|
||||
const taskActive = isInProgress(task.status);
|
||||
const taskDone = task.status === "done";
|
||||
const [swipeOffset, setSwipeOffset] = useState(0);
|
||||
const [swiped, setSwiped] = useState(false);
|
||||
const cardRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const SWIPE_THRESHOLD = 120;
|
||||
const MAX_AVATARS = 3;
|
||||
const assignees = task.assigned_to || [];
|
||||
const visibleAssignees = assignees.slice(0, MAX_AVATARS);
|
||||
const extraCount = assignees.length - MAX_AVATARS;
|
||||
const visibleAssignees = assignees.slice(0, 3);
|
||||
const groupColor = task.group_color;
|
||||
const sColor = statusColor(task.status);
|
||||
|
||||
const swipeHandlers = useSwipeable({
|
||||
onSwiping: (e) => {
|
||||
if (e.dir === "Right" && !taskDone && onComplete) {
|
||||
const offset = Math.min(e.deltaX, 160);
|
||||
setSwipeOffset(offset);
|
||||
setSwipeOffset(Math.min(e.deltaX, 160));
|
||||
}
|
||||
},
|
||||
onSwipedRight: (e) => {
|
||||
if (e.absX > SWIPE_THRESHOLD && !taskDone && onComplete) {
|
||||
setSwiped(true);
|
||||
setTimeout(() => {
|
||||
onComplete(task.id);
|
||||
}, 300);
|
||||
setTimeout(() => { onComplete(task.id); }, 300);
|
||||
} else {
|
||||
setSwipeOffset(0);
|
||||
}
|
||||
@@ -106,14 +89,12 @@ export default function TaskCard({ task, onComplete }: TaskCardProps) {
|
||||
const showCompleteHint = swipeOffset > 40;
|
||||
|
||||
return (
|
||||
<div className="relative overflow-hidden rounded-lg" ref={cardRef}>
|
||||
{/* Swipe background - green complete indicator */}
|
||||
<div className="relative overflow-hidden" ref={cardRef} style={{ margin: "0 0 5px" }}>
|
||||
{/* Swipe background */}
|
||||
{onComplete && !taskDone && (
|
||||
<div
|
||||
className={`absolute inset-0 flex items-center pl-4 rounded-lg transition-colors ${
|
||||
swipeOffset > SWIPE_THRESHOLD
|
||||
? "bg-green-500"
|
||||
: "bg-green-400/80"
|
||||
className={`absolute inset-0 flex items-center pl-4 rounded-xl transition-colors ${
|
||||
swipeOffset > SWIPE_THRESHOLD ? "bg-green-500" : "bg-green-400/80"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
@@ -136,89 +117,108 @@ export default function TaskCard({ task, onComplete }: TaskCardProps) {
|
||||
transition: swipeOffset === 0 ? "transform 0.3s ease" : "none",
|
||||
}}
|
||||
>
|
||||
<Link href={`/tasks/${task.id}`} className="block group">
|
||||
<Link href={`/tasks/${task.id}`} className="block">
|
||||
<div
|
||||
className={`relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-md transition-all duration-150 active:scale-[0.99] ${swiped ? "opacity-0 transition-opacity duration-300" : ""}`}
|
||||
style={{ minHeight: 44 }}
|
||||
style={{
|
||||
padding: "10px 14px",
|
||||
borderRadius: 10,
|
||||
background: "#13131A",
|
||||
border: `1px solid ${groupColor ? groupColor + "30" : "#1E1E2E"}`,
|
||||
borderLeft: `3px solid ${groupColor || "#2A2A3A"}`,
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
opacity: swiped ? 0 : 1,
|
||||
transition: swiped ? "opacity 0.3s" : undefined,
|
||||
}}
|
||||
>
|
||||
<div className="px-3 py-2 flex items-center gap-2.5" style={{ minHeight: 44 }}>
|
||||
{/* LEFT: title + optional due date */}
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
color: "#E8E8F0",
|
||||
textDecoration: taskDone ? "line-through" : "none",
|
||||
opacity: taskDone ? 0.5 : 1,
|
||||
}}>
|
||||
{task.title}
|
||||
</div>
|
||||
{task.due_at && isDueSoon(task.due_at) && (
|
||||
<div style={{
|
||||
fontSize: 11,
|
||||
color: isPast(task.due_at) ? "#EF4444" : "#F59E0B",
|
||||
marginTop: 2,
|
||||
}}>
|
||||
{formatDate(task.due_at)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* LEFT: User avatars (overlapping circles) */}
|
||||
<div className="flex-shrink-0 flex items-center" style={{ minWidth: assignees.length > 0 ? 28 : 0 }}>
|
||||
{visibleAssignees.length > 0 && (
|
||||
<div className="flex items-center" style={{ position: "relative" }}>
|
||||
{visibleAssignees.map((userId, idx) => (
|
||||
<div
|
||||
key={userId}
|
||||
style={{
|
||||
width: 22, height: 22,
|
||||
borderRadius: "50%",
|
||||
background: userColor(userId),
|
||||
border: "2px solid var(--background, #fff)",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontSize: 9, fontWeight: 700, color: "#fff",
|
||||
marginLeft: idx > 0 ? -8 : 0,
|
||||
position: "relative", zIndex: MAX_AVATARS - idx,
|
||||
}}
|
||||
title={userId}
|
||||
>
|
||||
{userInitials(userId)}
|
||||
</div>
|
||||
))}
|
||||
{extraCount > 0 && (
|
||||
<div
|
||||
style={{
|
||||
width: 22, height: 22,
|
||||
borderRadius: "50%",
|
||||
background: "var(--muted, #6B7280)",
|
||||
border: "2px solid var(--background, #fff)",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontSize: 8, fontWeight: 700, color: "#fff",
|
||||
marginLeft: -8,
|
||||
position: "relative", zIndex: 0,
|
||||
}}
|
||||
>
|
||||
+{extraCount}
|
||||
</div>
|
||||
)}
|
||||
{/* RIGHT: avatars + big status dot */}
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
|
||||
{/* Avatars */}
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
{visibleAssignees.map((userId, i) => (
|
||||
<div
|
||||
key={userId}
|
||||
title={userId}
|
||||
style={{
|
||||
width: 26, height: 26,
|
||||
borderRadius: "50%",
|
||||
marginLeft: i > 0 ? -8 : 0,
|
||||
border: "2px solid #13131A",
|
||||
background: userColor(userId),
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontSize: 10, fontWeight: 700, color: "white",
|
||||
zIndex: 3 - i,
|
||||
position: "relative",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{userId.slice(0, 2).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
|
||||
{/* + add user button */}
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (onAssign) onAssign(task.id);
|
||||
}}
|
||||
title="Přidat uživatele"
|
||||
style={{
|
||||
width: 26, height: 26,
|
||||
borderRadius: "50%",
|
||||
marginLeft: visibleAssignees.length > 0 ? -8 : 0,
|
||||
border: "2px dashed #3A3A5A",
|
||||
background: "transparent",
|
||||
cursor: "pointer",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontSize: 14, color: "#4A4A6A",
|
||||
position: "relative", zIndex: 0,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
+
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status dot — big colored circle */}
|
||||
{/* Big colored status dot */}
|
||||
<div
|
||||
className={`flex-shrink-0 ${taskActive ? "status-dot-active" : ""}`}
|
||||
title={t(`tasks.status.${task.status}`)}
|
||||
style={{
|
||||
width: 14, height: 14,
|
||||
borderRadius: "50%",
|
||||
background: statusDotColor,
|
||||
boxShadow: taskActive ? `0 0 6px ${statusDotColor}80` : "none",
|
||||
background: sColor,
|
||||
flexShrink: 0,
|
||||
boxShadow: `0 0 6px ${sColor}80`,
|
||||
}}
|
||||
title={t(`tasks.status.${task.status}`)}
|
||||
/>
|
||||
|
||||
{/* MIDDLE: Task title — single line, truncated */}
|
||||
<h3
|
||||
className={`text-sm font-medium truncate flex-1 min-w-0 ${
|
||||
taskDone ? "line-through text-muted" : ""
|
||||
}`}
|
||||
>
|
||||
{task.title}
|
||||
</h3>
|
||||
|
||||
{/* RIGHT: Group icon */}
|
||||
{task.group_icon && (
|
||||
<span className="text-sm flex-shrink-0 leading-none opacity-70">{task.group_icon}</span>
|
||||
)}
|
||||
|
||||
{/* RIGHT: Priority indicator */}
|
||||
<span
|
||||
className="flex-shrink-0 text-xs font-bold"
|
||||
style={{ color: priorityColor, lineHeight: 1 }}
|
||||
title={t(`tasks.priority.${task.priority}`)}
|
||||
>
|
||||
{priorityIcon}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user