Fix display_name TS error + clean rebuild
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -3,7 +3,6 @@
|
||||
import { useState, useRef } from "react";
|
||||
import { Task } from "@/lib/api";
|
||||
import { useTranslation } from "@/lib/i18n";
|
||||
import StatusBadge from "./StatusBadge";
|
||||
import Link from "next/link";
|
||||
import { useSwipeable } from "react-swipeable";
|
||||
|
||||
@@ -19,19 +18,64 @@ const PRIORITY_COLORS: Record<string, string> = {
|
||||
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 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",
|
||||
"#10B981", "#06B6D4", "#F97316", "#6366F1",
|
||||
];
|
||||
let hash = 0;
|
||||
for (let i = 0; i < userId.length; i++) {
|
||||
hash = ((hash << 5) - hash) + userId.charCodeAt(i);
|
||||
hash |= 0;
|
||||
}
|
||||
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();
|
||||
}
|
||||
|
||||
export default function TaskCard({ task, onComplete }: 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 [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 swipeHandlers = useSwipeable({
|
||||
onSwiping: (e) => {
|
||||
@@ -93,20 +137,67 @@ export default function TaskCard({ task, onComplete }: TaskCardProps) {
|
||||
}}
|
||||
>
|
||||
<Link href={`/tasks/${task.id}`} className="block group">
|
||||
<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" : ""}`}>
|
||||
{/* Priority line on left edge */}
|
||||
<div
|
||||
className="absolute left-0 top-0 bottom-0 w-0.5"
|
||||
style={{ backgroundColor: priorityColor }}
|
||||
/>
|
||||
<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 }}
|
||||
>
|
||||
<div className="px-3 py-2 flex items-center gap-2.5" style={{ minHeight: 44 }}>
|
||||
|
||||
<div className="pl-3 pr-2.5 py-2 flex items-center gap-2">
|
||||
{/* Group icon */}
|
||||
{task.group_icon && (
|
||||
<span className="text-base flex-shrink-0 leading-none">{task.group_icon}</span>
|
||||
)}
|
||||
{/* 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>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Title - single line, truncated */}
|
||||
{/* Status dot — big colored circle */}
|
||||
<div
|
||||
className={`flex-shrink-0 ${taskActive ? "status-dot-active" : ""}`}
|
||||
style={{
|
||||
width: 14, height: 14,
|
||||
borderRadius: "50%",
|
||||
background: statusDotColor,
|
||||
boxShadow: taskActive ? `0 0 6px ${statusDotColor}80` : "none",
|
||||
}}
|
||||
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" : ""
|
||||
@@ -115,17 +206,19 @@ export default function TaskCard({ task, onComplete }: TaskCardProps) {
|
||||
{task.title}
|
||||
</h3>
|
||||
|
||||
{/* Status badge */}
|
||||
<div className="flex-shrink-0">
|
||||
<StatusBadge status={task.status} size="sm" />
|
||||
</div>
|
||||
{/* RIGHT: Group icon */}
|
||||
{task.group_icon && (
|
||||
<span className="text-sm flex-shrink-0 leading-none opacity-70">{task.group_icon}</span>
|
||||
)}
|
||||
|
||||
{/* Priority dot */}
|
||||
<div
|
||||
className="w-2 h-2 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: priorityColor }}
|
||||
{/* 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