Fix display_name TS error + clean rebuild
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -356,3 +356,13 @@ main {
|
||||
min-height: 28px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Status dot pulse animation for in_progress tasks */
|
||||
@keyframes statusPulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
.status-dot-active {
|
||||
animation: statusPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -6,21 +6,33 @@ import { useAuth } from "@/lib/auth";
|
||||
import { getTasks, getGroups, createTask, updateTask, Task, Group } from "@/lib/api";
|
||||
import { useTranslation } from "@/lib/i18n";
|
||||
import TaskCard from "@/components/TaskCard";
|
||||
import GroupSelector from "@/components/GroupSelector";
|
||||
import TaskModal from "@/components/TaskModal";
|
||||
import { useSwipeable } from "react-swipeable";
|
||||
|
||||
type StatusFilter = "all" | "pending" | "in_progress" | "done" | "cancelled";
|
||||
const STATUS_VALUES = ["pending", "in_progress", "done", "cancelled"] as const;
|
||||
type StatusValue = (typeof STATUS_VALUES)[number];
|
||||
|
||||
function statusColor(s: StatusValue | null): string {
|
||||
switch (s) {
|
||||
case "pending": return "#FBBF24";
|
||||
case "in_progress": return "#60A5FA";
|
||||
case "done": return "#34D399";
|
||||
case "cancelled": return "#9CA3AF";
|
||||
default: return "#7A7A9A";
|
||||
}
|
||||
}
|
||||
|
||||
export default function TasksPage() {
|
||||
const { token } = useAuth();
|
||||
const { token, user } = useAuth();
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [groups, setGroups] = useState<Group[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedGroup, setSelectedGroup] = useState<string | null>(null);
|
||||
const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
|
||||
const [selectedStatus, setSelectedStatus] = useState<StatusValue | null>(null);
|
||||
const [groupOpen, setGroupOpen] = useState(false);
|
||||
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [swipeDirection, setSwipeDirection] = useState<"left" | "right" | null>(null);
|
||||
const [swipeOverlay, setSwipeOverlay] = useState<{ name: string; icon: string | null } | null>(null);
|
||||
@@ -34,13 +46,18 @@ export default function TasksPage() {
|
||||
return groupOrder.indexOf(selectedGroup);
|
||||
}, [groupOrder, selectedGroup]);
|
||||
|
||||
const selectedGroupObj = useMemo(
|
||||
() => (selectedGroup ? groups.find((g) => g.id === selectedGroup) ?? null : null),
|
||||
[selectedGroup, groups]
|
||||
);
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
if (!token) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const params: Record<string, string> = {};
|
||||
if (selectedGroup) params.group_id = selectedGroup;
|
||||
if (statusFilter !== "all") params.status = statusFilter;
|
||||
if (selectedStatus) params.status = selectedStatus;
|
||||
|
||||
const [tasksRes, groupsRes] = await Promise.all([
|
||||
getTasks(token, Object.keys(params).length > 0 ? params : undefined),
|
||||
@@ -53,7 +70,7 @@ export default function TasksPage() {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [token, selectedGroup, statusFilter]);
|
||||
}, [token, selectedGroup, selectedStatus]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!token) {
|
||||
@@ -118,46 +135,141 @@ export default function TasksPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const statusOptions: { value: StatusFilter; label: string }[] = [
|
||||
{ value: "all", label: t("tasks.all") },
|
||||
{ value: "pending", label: t("tasks.status.pending") },
|
||||
{ value: "in_progress", label: t("tasks.status.in_progress") },
|
||||
{ value: "done", label: t("tasks.status.done") },
|
||||
{ value: "cancelled", label: t("tasks.status.cancelled") },
|
||||
];
|
||||
|
||||
if (!token) return null;
|
||||
|
||||
const userInitial = (user?.name || user?.email || "?").charAt(0).toUpperCase();
|
||||
|
||||
return (
|
||||
<div className="space-y-2 pb-24 sm:pb-8 px-4 sm:px-0">
|
||||
{/* Group dropdown + Status pills — single compact row */}
|
||||
<div className="flex items-center gap-3 flex-nowrap">
|
||||
<div className="flex-shrink-0">
|
||||
<GroupSelector
|
||||
groups={groups}
|
||||
selected={selectedGroup}
|
||||
onSelect={setSelectedGroup}
|
||||
/>
|
||||
<div className="pb-24 sm:pb-8">
|
||||
{/* Single-row sticky filter header — group dropdown left, status pills right */}
|
||||
<div style={{
|
||||
display: "flex", alignItems: "center",
|
||||
padding: "0 8px",
|
||||
position: "sticky", top: 44, zIndex: 40,
|
||||
height: 40, maxHeight: 40,
|
||||
background: "var(--background, #fff)",
|
||||
borderBottom: "1px solid var(--border, #e5e7eb)",
|
||||
flexWrap: "nowrap", overflow: "hidden",
|
||||
}}>
|
||||
|
||||
{/* Groups dropdown — compact, left side */}
|
||||
<div style={{ position: "relative", flexShrink: 0 }}>
|
||||
<button
|
||||
onClick={() => { setGroupOpen(o => !o); }}
|
||||
style={{
|
||||
display: "flex", alignItems: "center", gap: 4,
|
||||
padding: "4px 10px", borderRadius: 16, height: 32,
|
||||
border: `1.5px solid ${selectedGroupObj?.color || "var(--border, #3A3A4A)"}`,
|
||||
background: selectedGroupObj ? selectedGroupObj.color + "18" : "transparent",
|
||||
color: selectedGroupObj?.color || "var(--foreground, #374151)",
|
||||
fontSize: 12, fontWeight: 600, cursor: "pointer", whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{selectedGroupObj
|
||||
? `${selectedGroupObj.icon ?? ""} ${(selectedGroupObj as any).name}`
|
||||
: t("tasks.all")}
|
||||
<span style={{ fontSize: 8, opacity: 0.5, marginLeft: 1 }}>{groupOpen ? "\u25b2" : "\u25bc"}</span>
|
||||
</button>
|
||||
{groupOpen && (
|
||||
<>
|
||||
<div onClick={() => setGroupOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 150 }} />
|
||||
<div style={{
|
||||
position: "absolute", top: "110%", left: 0, zIndex: 200,
|
||||
background: "var(--popover, #fff)", border: "1px solid var(--border, #e5e7eb)",
|
||||
borderRadius: 12, padding: "4px 0", minWidth: 180,
|
||||
boxShadow: "0 8px 24px rgba(0,0,0,0.15)",
|
||||
}}>
|
||||
<button
|
||||
onClick={() => { setSelectedGroup(null); setGroupOpen(false); }}
|
||||
style={{
|
||||
width: "100%", padding: "9px 14px",
|
||||
background: !selectedGroup ? "rgba(29,78,216,0.08)" : "transparent",
|
||||
border: "none", borderLeft: `3px solid ${!selectedGroup ? "#1D4ED8" : "transparent"}`,
|
||||
color: !selectedGroup ? "#2563EB" : "var(--foreground, #374151)",
|
||||
textAlign: "left", fontSize: 13, cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
{t("tasks.all")}
|
||||
</button>
|
||||
{groups.map(g => (
|
||||
<button
|
||||
key={g.id}
|
||||
onClick={() => { setSelectedGroup(g.id); setGroupOpen(false); }}
|
||||
style={{
|
||||
width: "100%", padding: "9px 14px",
|
||||
background: selectedGroup === g.id ? g.color + "18" : "transparent",
|
||||
border: "none", borderLeft: `3px solid ${selectedGroup === g.id ? g.color : "transparent"}`,
|
||||
color: selectedGroup === g.id ? g.color : "var(--foreground, #374151)",
|
||||
textAlign: "left", fontSize: 13, cursor: "pointer",
|
||||
display: "flex", alignItems: "center", gap: 8,
|
||||
}}
|
||||
>
|
||||
<span>{g.icon}</span>
|
||||
{g.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-1 overflow-x-auto scrollbar-hide flex-1 min-w-0">
|
||||
{statusOptions.map((opt) => (
|
||||
|
||||
{/* Status pills — horizontal scroll, right side */}
|
||||
<div style={{
|
||||
display: "flex", alignItems: "center", gap: 4,
|
||||
flex: 1, overflow: "hidden", marginLeft: 0,
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
className="scrollbar-hide"
|
||||
>
|
||||
<div style={{
|
||||
display: "flex", alignItems: "center", gap: 3,
|
||||
overflowX: "auto", flexShrink: 1,
|
||||
}}
|
||||
className="scrollbar-hide"
|
||||
>
|
||||
{/* "All" pill */}
|
||||
<button
|
||||
key={opt.value}
|
||||
onClick={() => setStatusFilter(opt.value)}
|
||||
className={`flex-shrink-0 px-2.5 py-1 rounded-full text-[11px] font-medium transition-all ${
|
||||
statusFilter === opt.value
|
||||
? "bg-gray-800 text-white dark:bg-white dark:text-gray-900"
|
||||
: "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
|
||||
}`}
|
||||
onClick={() => setSelectedStatus(null)}
|
||||
style={{
|
||||
padding: "3px 10px", borderRadius: 14, height: 28,
|
||||
border: "none", cursor: "pointer", whiteSpace: "nowrap",
|
||||
fontSize: 11, fontWeight: selectedStatus === null ? 700 : 500,
|
||||
background: selectedStatus === null ? "rgba(29,78,216,0.12)" : "transparent",
|
||||
color: selectedStatus === null ? "#2563EB" : "var(--muted, #6B7280)",
|
||||
transition: "all 0.15s ease",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{opt.label}
|
||||
{t("tasks.all")}
|
||||
</button>
|
||||
))}
|
||||
{STATUS_VALUES.map(s => (
|
||||
<button
|
||||
key={s}
|
||||
onClick={() => setSelectedStatus(selectedStatus === s ? null : s)}
|
||||
style={{
|
||||
display: "flex", alignItems: "center", gap: 4,
|
||||
padding: "3px 10px", borderRadius: 14, height: 28,
|
||||
border: "none", cursor: "pointer", whiteSpace: "nowrap",
|
||||
fontSize: 11, fontWeight: selectedStatus === s ? 700 : 500,
|
||||
background: selectedStatus === s ? statusColor(s) + "20" : "transparent",
|
||||
color: selectedStatus === s ? statusColor(s) : "var(--muted, #6B7280)",
|
||||
transition: "all 0.15s ease",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<span style={{
|
||||
width: 6, height: 6, borderRadius: "50%",
|
||||
background: statusColor(s), flexShrink: 0,
|
||||
}} />
|
||||
{t(`tasks.status.${s}`)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Swipeable task list area */}
|
||||
<div {...swipeHandlers} className="relative min-h-[200px]">
|
||||
<div {...swipeHandlers} className="relative min-h-[200px] px-4 sm:px-0 pt-2">
|
||||
{/* Swipe overlay */}
|
||||
{swipeOverlay && (
|
||||
<div className="absolute inset-0 z-30 flex items-center justify-center pointer-events-none">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -141,6 +141,7 @@ export interface Group {
|
||||
color: string;
|
||||
icon: string | null;
|
||||
sort_order: number;
|
||||
display_name?: string;
|
||||
}
|
||||
|
||||
export interface Connector {
|
||||
|
||||
Reference in New Issue
Block a user