1528 lines
47 KiB
TypeScript
1528 lines
47 KiB
TypeScript
"use client";
|
|
|
|
import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
|
|
import {
|
|
closestCenter,
|
|
DndContext,
|
|
DragOverlay,
|
|
KeyboardSensor,
|
|
PointerSensor,
|
|
useSensor,
|
|
useSensors,
|
|
} from "@dnd-kit/core";
|
|
import {
|
|
arrayMove,
|
|
SortableContext,
|
|
sortableKeyboardCoordinates,
|
|
useSortable,
|
|
verticalListSortingStrategy,
|
|
} from "@dnd-kit/sortable";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
import {
|
|
ArrowDown,
|
|
ArrowUp,
|
|
Calendar,
|
|
Check,
|
|
CheckCircle2,
|
|
ChevronDown,
|
|
ChevronRight,
|
|
Circle,
|
|
Copy,
|
|
Flag,
|
|
GripVertical,
|
|
List,
|
|
MoreVertical,
|
|
Move,
|
|
Plus,
|
|
Puzzle,
|
|
SendHorizonal,
|
|
Star,
|
|
Trash2,
|
|
X,
|
|
} from "lucide-react";
|
|
import { useMemo, useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import {
|
|
Empty,
|
|
EmptyContent,
|
|
EmptyDescription,
|
|
EmptyHeader,
|
|
EmptyMedia,
|
|
EmptyTitle,
|
|
} from "@/components/ui/empty";
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupButton,
|
|
InputGroupInput,
|
|
} from "@/components/ui/input-group";
|
|
import {
|
|
Item,
|
|
ItemContent,
|
|
ItemGroup,
|
|
ItemMedia,
|
|
ItemTitle,
|
|
} from "@/components/ui/item";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const formatDueDate = (date: Date) =>
|
|
date.toLocaleDateString("fa-IR", { month: "short", day: "numeric" });
|
|
|
|
interface Todo10Labels {
|
|
moreActions: string;
|
|
addTaskAbove: string;
|
|
addTaskBelow: string;
|
|
dateSection: string;
|
|
prioritySection: string;
|
|
today: string;
|
|
tomorrow: string;
|
|
nextWeek: string;
|
|
nextMonth: string;
|
|
noDate: string;
|
|
moveTo: string;
|
|
duplicate: string;
|
|
copyTaskLink: string;
|
|
addExtension: string;
|
|
removeFavorite: string;
|
|
addFavorite: string;
|
|
delete: string;
|
|
cancel: string;
|
|
deleteDialogTitle: string;
|
|
deleteDialogDescription: (title: string) => string;
|
|
addTaskLabel: string;
|
|
taskPlaceholder: string;
|
|
dateLabel: string;
|
|
priorityLabel: string;
|
|
noPriority: string;
|
|
selectProject: string;
|
|
submitTask: string;
|
|
emptyTitle: string;
|
|
emptyDescription: string;
|
|
allTasks: (count: number) => string;
|
|
completedLabel: string;
|
|
expandSubtasks: string;
|
|
collapseSubtasks: string;
|
|
dragTask: (title: string) => string;
|
|
markIncomplete: (title: string) => string;
|
|
markComplete: (title: string) => string;
|
|
}
|
|
|
|
const defaultLabels: Todo10Labels = {
|
|
moreActions: "گزینه‌های بیشتر",
|
|
addTaskAbove: "افزودن وظیفه بالا",
|
|
addTaskBelow: "افزودن وظیفه پایین",
|
|
dateSection: "تاریخ",
|
|
prioritySection: "اولویت",
|
|
today: "امروز",
|
|
tomorrow: "فردا",
|
|
nextWeek: "هفته آینده",
|
|
nextMonth: "ماه آینده",
|
|
noDate: "بدون تاریخ",
|
|
moveTo: "انتقال به…",
|
|
duplicate: "تکثیر",
|
|
copyTaskLink: "کپی لینک وظیفه",
|
|
addExtension: "افزودن افزونه…",
|
|
removeFavorite: "حذف از علاقه‌مندی‌ها",
|
|
addFavorite: "افزودن به علاقه‌مندی‌ها",
|
|
delete: "حذف",
|
|
cancel: "انصراف",
|
|
deleteDialogTitle: "حذف وظیفه؟",
|
|
deleteDialogDescription: (title) =>
|
|
`وظیفه «${title}» برای همیشه حذف می‌شود.`,
|
|
addTaskLabel: "افزودن وظیفه جدید",
|
|
taskPlaceholder: "عنوان وظیفه",
|
|
dateLabel: "تاریخ",
|
|
priorityLabel: "اولویت",
|
|
noPriority: "بدون اولویت",
|
|
selectProject: "انتخاب پروژه",
|
|
submitTask: "افزودن",
|
|
emptyTitle: "هنوز وظیفه‌ای ندارید",
|
|
emptyDescription: "با افزودن اولین وظیفه خود شروع کنید.",
|
|
allTasks: (count) => `همه وظایف (${count})`,
|
|
completedLabel: "تکمیل‌شده",
|
|
expandSubtasks: "نمایش زیروظایف",
|
|
collapseSubtasks: "پنهان کردن زیروظایف",
|
|
dragTask: (title) => `جابه‌جایی «${title}»`,
|
|
markIncomplete: (title) => `علامت‌گذاری «${title}» به‌عنوان انجام‌نشده`,
|
|
markComplete: (title) => `علامت‌گذاری «${title}» به‌عنوان انجام‌شده`,
|
|
};
|
|
|
|
interface Todo10Props {
|
|
projects?: Project[];
|
|
initialTodos?: Todo[];
|
|
labels?: Todo10Labels;
|
|
className?: string;
|
|
}
|
|
|
|
type Priority = "P1" | "P2" | "P3" | "P4";
|
|
type SortOption =
|
|
| "manual"
|
|
| "dueDate"
|
|
| "priority"
|
|
| "title"
|
|
| "createdAt"
|
|
| "updatedAt";
|
|
|
|
interface Subtask {
|
|
id: string;
|
|
title: string;
|
|
completed: boolean;
|
|
}
|
|
|
|
interface Project {
|
|
id: string;
|
|
name: string;
|
|
color?: string;
|
|
}
|
|
|
|
interface Todo {
|
|
id: string;
|
|
title: string;
|
|
completed: boolean;
|
|
projectId: string;
|
|
priority?: Priority;
|
|
dueDate?: Date;
|
|
starred?: boolean;
|
|
subtasks: Subtask[];
|
|
createdAt: Date;
|
|
updatedAt: Date;
|
|
}
|
|
|
|
interface TodoFilters {
|
|
projects: string[];
|
|
priorities: string[];
|
|
starredOnly: boolean;
|
|
}
|
|
|
|
const defaultProjects: Project[] = [
|
|
{ id: "personal", name: "کارهای شخصی", color: "#3b82f6" },
|
|
{ id: "work", name: "پروژه‌های کاری", color: "#8b5cf6" },
|
|
{ id: "shopping", name: "خرید", color: "#10b981" },
|
|
{ id: "learning", name: "یادگیری", color: "#ec4899" },
|
|
];
|
|
|
|
const defaultTodos: Todo[] = [
|
|
{
|
|
id: "1",
|
|
title: "تکمیل مستندات فنی پروژه",
|
|
completed: false,
|
|
projectId: "work",
|
|
priority: "P1",
|
|
dueDate: new Date(2025, 9, 25),
|
|
starred: true,
|
|
subtasks: [
|
|
{ id: "s1", title: "نوشتن مستندات فنی", completed: true },
|
|
{ id: "s2", title: "افزودن نمونه کد", completed: false },
|
|
],
|
|
createdAt: new Date(2025, 9, 15),
|
|
updatedAt: new Date(2025, 9, 20),
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "بررسی و تأیید طراحی رابط کاربری",
|
|
completed: false,
|
|
projectId: "work",
|
|
priority: "P2",
|
|
subtasks: [],
|
|
createdAt: new Date(2025, 9, 18),
|
|
updatedAt: new Date(2025, 9, 20),
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "آماده‌سازی گزارش هفتگی",
|
|
completed: false,
|
|
projectId: "shopping",
|
|
priority: "P3",
|
|
subtasks: [],
|
|
createdAt: new Date(2025, 9, 20),
|
|
updatedAt: new Date(2025, 9, 20),
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "هماهنگی جلسات تیم",
|
|
completed: true,
|
|
projectId: "personal",
|
|
priority: "P2",
|
|
subtasks: [],
|
|
createdAt: new Date(2024, 9, 19),
|
|
updatedAt: new Date(2024, 9, 23),
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "بررسی مستندات فنی",
|
|
completed: false,
|
|
projectId: "learning",
|
|
priority: "P4",
|
|
starred: true,
|
|
subtasks: [],
|
|
createdAt: new Date(2025, 9, 16),
|
|
updatedAt: new Date(2025, 9, 20),
|
|
},
|
|
{
|
|
id: "6",
|
|
title: "آماده‌سازی ارائه جلسه تیم",
|
|
completed: false,
|
|
projectId: "work",
|
|
priority: "P2",
|
|
dueDate: new Date(2025, 10, 5),
|
|
subtasks: [
|
|
{ id: "s3", title: "طراحی اسلایدها", completed: false },
|
|
{ id: "s4", title: "آماده‌سازی محیط دمو", completed: false },
|
|
],
|
|
createdAt: new Date(2025, 9, 30),
|
|
updatedAt: new Date(2025, 9, 30),
|
|
},
|
|
{
|
|
id: "7",
|
|
title: "برنامه‌ریزی جلسه حضوری تیمی",
|
|
completed: false,
|
|
projectId: "personal",
|
|
priority: "P3",
|
|
dueDate: new Date(2025, 10, 8),
|
|
starred: true,
|
|
subtasks: [
|
|
{ id: "s5", title: "بررسی آب‌وهوا", completed: false },
|
|
{ id: "s6", title: "هماهنگی مکان", completed: false },
|
|
],
|
|
createdAt: new Date(2025, 9, 30),
|
|
updatedAt: new Date(2025, 9, 30),
|
|
},
|
|
{
|
|
id: "8",
|
|
title: "بازبینی pull request شماره ۲۳۴",
|
|
completed: true,
|
|
projectId: "work",
|
|
priority: "P2",
|
|
subtasks: [],
|
|
createdAt: new Date(2024, 9, 22),
|
|
updatedAt: new Date(2024, 9, 23),
|
|
},
|
|
{
|
|
id: "9",
|
|
title: "به‌روزرسانی مستندات فنی",
|
|
completed: true,
|
|
projectId: "work",
|
|
priority: "P3",
|
|
subtasks: [],
|
|
createdAt: new Date(2024, 9, 22),
|
|
updatedAt: new Date(2024, 9, 23),
|
|
},
|
|
{
|
|
id: "10",
|
|
title: "رفع مشکلات طراحی واکنش‌گرا",
|
|
completed: true,
|
|
projectId: "work",
|
|
priority: "P1",
|
|
subtasks: [],
|
|
createdAt: new Date(2024, 9, 21),
|
|
updatedAt: new Date(2024, 9, 22),
|
|
},
|
|
];
|
|
|
|
const priorityColors: Record<Priority, string> = {
|
|
P1: "text-red-500",
|
|
P2: "text-orange-500",
|
|
P3: "text-yellow-500",
|
|
P4: "text-gray-500",
|
|
};
|
|
|
|
const priorityLabels: Record<Priority, string> = {
|
|
P1: "P1 - فوری",
|
|
P2: "P2 - زیاد",
|
|
P3: "P3 - متوسط",
|
|
P4: "P4 - کم",
|
|
};
|
|
|
|
function sortTodos(todos: Todo[], sortBy: SortOption): Todo[] {
|
|
if (sortBy === "manual") return todos;
|
|
|
|
return [...todos].sort((a, b) => {
|
|
switch (sortBy) {
|
|
case "dueDate":
|
|
if (!a.dueDate && !b.dueDate) return 0;
|
|
if (!a.dueDate) return 1;
|
|
if (!b.dueDate) return -1;
|
|
return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime();
|
|
|
|
case "priority": {
|
|
const priorityOrder = { P1: 1, P2: 2, P3: 3, P4: 4 };
|
|
const aPriority = a.priority ? priorityOrder[a.priority] : 5;
|
|
const bPriority = b.priority ? priorityOrder[b.priority] : 5;
|
|
return aPriority - bPriority;
|
|
}
|
|
|
|
case "title":
|
|
return a.title.localeCompare(b.title, "fa");
|
|
|
|
case "createdAt":
|
|
return (
|
|
new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
|
|
);
|
|
|
|
case "updatedAt":
|
|
return (
|
|
new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
|
|
);
|
|
|
|
default:
|
|
return 0;
|
|
}
|
|
});
|
|
}
|
|
|
|
function filterTodos(todos: Todo[], filters: TodoFilters): Todo[] {
|
|
let result = [...todos];
|
|
|
|
if (filters.starredOnly) {
|
|
result = result.filter((todo) => todo.starred);
|
|
}
|
|
if (filters.projects.length > 0) {
|
|
result = result.filter((todo) => filters.projects.includes(todo.projectId));
|
|
}
|
|
if (filters.priorities.length > 0) {
|
|
result = result.filter((todo) =>
|
|
todo.priority ? filters.priorities.includes(todo.priority) : false,
|
|
);
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
interface TodoActionsDropdownProps {
|
|
todo: Todo;
|
|
isOpen: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
onDelete?: (id: string) => void;
|
|
onUpdate?: (todo: Todo) => void;
|
|
onToggleStar?: (id: string) => void;
|
|
labels: Todo10Labels;
|
|
}
|
|
|
|
const TodoActionsDropdown = ({
|
|
todo,
|
|
isOpen,
|
|
onOpenChange,
|
|
onDelete,
|
|
onUpdate,
|
|
onToggleStar,
|
|
labels,
|
|
}: TodoActionsDropdownProps) => {
|
|
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
|
|
|
const dateOptions = [
|
|
{ type: "today" as const, label: labels.today, color: "text-blue-500" },
|
|
{ type: "tomorrow" as const, label: labels.tomorrow, color: "text-green-500" },
|
|
{ type: "next-week" as const, label: labels.nextWeek, color: "text-cyan-500" },
|
|
{
|
|
type: "next-month" as const,
|
|
label: labels.nextMonth,
|
|
color: "text-orange-500",
|
|
},
|
|
{ type: "no-date" as const, label: labels.noDate, color: "text-yellow-500" },
|
|
];
|
|
|
|
const getPresetDate = (
|
|
type: "today" | "tomorrow" | "next-week" | "next-month" | "no-date",
|
|
): Date | undefined => {
|
|
const now = new Date();
|
|
switch (type) {
|
|
case "today":
|
|
return now;
|
|
case "tomorrow": {
|
|
const tomorrow = new Date(now);
|
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
|
return tomorrow;
|
|
}
|
|
case "next-week": {
|
|
const nextWeek = new Date(now);
|
|
nextWeek.setDate(nextWeek.getDate() + 7);
|
|
return nextWeek;
|
|
}
|
|
case "next-month": {
|
|
const nextMonth = new Date(now);
|
|
nextMonth.setMonth(nextMonth.getMonth() + 1);
|
|
return nextMonth;
|
|
}
|
|
case "no-date":
|
|
return undefined;
|
|
}
|
|
};
|
|
|
|
const setDate = (
|
|
dateType: "today" | "tomorrow" | "next-week" | "next-month" | "no-date",
|
|
) => {
|
|
if (!onUpdate) return;
|
|
const newDate = getPresetDate(dateType);
|
|
onUpdate({ ...todo, dueDate: newDate });
|
|
};
|
|
|
|
const setPriority = (priority: Priority) => {
|
|
if (!onUpdate) return;
|
|
onUpdate({ ...todo, priority });
|
|
};
|
|
|
|
const handleCopyLink = () => {
|
|
const taskUrl = `${window.location.origin}/task/${todo.id}`;
|
|
navigator.clipboard.writeText(taskUrl);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<DropdownMenu modal={false} open={isOpen} onOpenChange={onOpenChange}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
aria-label={labels.moreActions}
|
|
className={cn(
|
|
"-me-2 transition-all duration-200 ease-out",
|
|
"-translate-x-2 scale-50 opacity-0",
|
|
"group-hover:translate-x-0 group-hover:scale-100 group-hover:opacity-100",
|
|
isOpen && "translate-x-0 scale-100 opacity-100",
|
|
)}
|
|
>
|
|
<MoreVertical className="size-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="end"
|
|
onClick={(e) => e.stopPropagation()}
|
|
onCloseAutoFocus={(e) => e.preventDefault()}
|
|
className="w-64"
|
|
>
|
|
<DropdownMenuItem onClick={(e) => e.stopPropagation()}>
|
|
<ArrowUp className="size-4" aria-hidden />
|
|
{labels.addTaskAbove}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={(e) => e.stopPropagation()}>
|
|
<ArrowDown className="size-4" aria-hidden />
|
|
{labels.addTaskBelow}
|
|
</DropdownMenuItem>
|
|
|
|
<DropdownMenuSeparator />
|
|
|
|
<div className="px-2 py-1.5">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium">{labels.dateSection}</span>
|
|
<span className="text-xs text-muted-foreground">T</span>
|
|
</div>
|
|
<TooltipProvider delayDuration={300}>
|
|
<div className="mt-1 flex items-center gap-3">
|
|
{dateOptions.map((option) => (
|
|
<Tooltip key={option.type}>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setDate(option.type);
|
|
}}
|
|
className="cursor-pointer rounded p-1 transition-colors hover:bg-accent"
|
|
>
|
|
<Calendar className={`${option.color} size-4`} />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>{option.label}</TooltipContent>
|
|
</Tooltip>
|
|
))}
|
|
</div>
|
|
</TooltipProvider>
|
|
</div>
|
|
|
|
<div className="px-2 py-1.5">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium">{labels.prioritySection}</span>
|
|
<span className="text-xs text-muted-foreground">Y</span>
|
|
</div>
|
|
<TooltipProvider delayDuration={300}>
|
|
<div className="mt-1 flex items-center gap-3">
|
|
{(["P1", "P2", "P3", "P4"] as Priority[]).map((priority) => (
|
|
<Tooltip key={priority}>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setPriority(priority);
|
|
}}
|
|
>
|
|
<Circle
|
|
className={cn("size-4", priorityColors[priority])}
|
|
/>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>{priorityLabels[priority]}</TooltipContent>
|
|
</Tooltip>
|
|
))}
|
|
</div>
|
|
</TooltipProvider>
|
|
</div>
|
|
|
|
<DropdownMenuSeparator />
|
|
|
|
<DropdownMenuItem onClick={(e) => e.stopPropagation()}>
|
|
<Move className="size-4" aria-hidden />
|
|
{labels.moveTo}
|
|
<span className="ms-auto text-xs text-muted-foreground">V</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={(e) => e.stopPropagation()}>
|
|
<Plus className="size-4" aria-hidden />
|
|
{labels.duplicate}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleCopyLink();
|
|
}}
|
|
>
|
|
<Copy className="size-4" aria-hidden />
|
|
{labels.copyTaskLink}
|
|
<span className="ms-auto text-xs text-muted-foreground">⇧ ⌘ L</span>
|
|
</DropdownMenuItem>
|
|
|
|
<DropdownMenuSeparator />
|
|
|
|
<DropdownMenuItem onClick={(e) => e.stopPropagation()}>
|
|
<Puzzle className="size-4" aria-hidden />
|
|
{labels.addExtension}
|
|
</DropdownMenuItem>
|
|
|
|
<DropdownMenuSeparator />
|
|
|
|
{!todo.completed && (
|
|
<>
|
|
<DropdownMenuItem
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onToggleStar?.(todo.id);
|
|
}}
|
|
>
|
|
<Star
|
|
className={cn(
|
|
"size-4",
|
|
todo.starred &&
|
|
"fill-amber-500 text-amber-500 dark:fill-amber-400 dark:text-amber-400",
|
|
)}
|
|
/>
|
|
{todo.starred ? labels.removeFavorite : labels.addFavorite}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
</>
|
|
)}
|
|
|
|
<DropdownMenuItem
|
|
variant="destructive"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onOpenChange(false);
|
|
setShowDeleteDialog(true);
|
|
}}
|
|
>
|
|
<Trash2 className="size-4" aria-hidden />
|
|
{labels.delete}
|
|
<span className="ms-auto text-xs text-muted-foreground">⌘ ⌫</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
|
|
<DialogContent dir="rtl" lang="fa" className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>{labels.deleteDialogTitle}</DialogTitle>
|
|
<DialogDescription>
|
|
{labels.deleteDialogDescription(todo.title)}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setShowDeleteDialog(false);
|
|
}}
|
|
>
|
|
{labels.cancel}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="destructive"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onDelete?.(todo.id);
|
|
setShowDeleteDialog(false);
|
|
}}
|
|
>
|
|
{labels.delete}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|
|
|
|
interface SortableTodoItemProps {
|
|
todo: Todo;
|
|
project?: Project;
|
|
onToggle: (id: string) => void;
|
|
onToggleSubtask: (todoId: string, subtaskId: string) => void;
|
|
onToggleExpand: (id: string) => void;
|
|
onDelete?: (id: string) => void;
|
|
onUpdate?: (todo: Todo) => void;
|
|
onToggleStar?: (id: string) => void;
|
|
isExpanded: boolean;
|
|
labels: Todo10Labels;
|
|
}
|
|
|
|
const SortableTodoItem = ({
|
|
todo,
|
|
project,
|
|
onToggle,
|
|
onToggleSubtask,
|
|
onToggleExpand,
|
|
onDelete,
|
|
onUpdate,
|
|
onToggleStar,
|
|
isExpanded,
|
|
labels,
|
|
}: SortableTodoItemProps) => {
|
|
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
isDragging,
|
|
} = useSortable({ id: todo.id });
|
|
|
|
const style = {
|
|
transform: CSS.Translate.toString(transform),
|
|
transition,
|
|
opacity: isDragging ? 0.5 : 1,
|
|
};
|
|
|
|
const completedSubtasks = todo.subtasks.filter((st) => st.completed).length;
|
|
const totalSubtasks = todo.subtasks.length;
|
|
|
|
return (
|
|
<div ref={setNodeRef} style={style} className="w-full">
|
|
<Item
|
|
variant={todo.completed ? "muted" : "default"}
|
|
className={cn(
|
|
"group cursor-pointer items-start rounded-none border-0 border-b border-border",
|
|
todo.completed ? "py-1 opacity-60 hover:opacity-80" : "py-2",
|
|
)}
|
|
onClick={() => onToggle(todo.id)}
|
|
>
|
|
<ItemMedia>
|
|
<div className="flex items-center gap-0.5">
|
|
<div className="relative flex items-center">
|
|
{todo.subtasks.length > 0 && !todo.completed && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onToggleExpand(todo.id);
|
|
}}
|
|
className="absolute -start-8"
|
|
aria-label={
|
|
isExpanded ? labels.collapseSubtasks : labels.expandSubtasks
|
|
}
|
|
aria-expanded={isExpanded}
|
|
>
|
|
<ChevronRight
|
|
className={cn(
|
|
"size-4 text-muted-foreground transition-transform duration-200 rtl:rotate-180",
|
|
isExpanded && "rotate-90 rtl:rotate-90",
|
|
)}
|
|
/>
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
{...attributes}
|
|
{...listeners}
|
|
className={cn(
|
|
"absolute -translate-x-1 scale-50 cursor-grab opacity-0 transition-all group-hover:translate-x-0 group-hover:scale-100 group-hover:opacity-100 active:cursor-grabbing",
|
|
todo.subtasks.length > 0 ? "-start-14" : "-start-8",
|
|
)}
|
|
onClick={(e) => e.stopPropagation()}
|
|
aria-label={labels.dragTask(todo.title)}
|
|
>
|
|
<GripVertical className="size-4 text-muted-foreground" />
|
|
</Button>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onToggle(todo.id);
|
|
}}
|
|
className={cn(
|
|
"shrink-0 rounded-full transition-all duration-200",
|
|
"-ms-1",
|
|
todo.completed && "-me-2",
|
|
)}
|
|
aria-label={
|
|
todo.completed
|
|
? labels.markIncomplete(todo.title)
|
|
: labels.markComplete(todo.title)
|
|
}
|
|
>
|
|
<div className="relative">
|
|
{!todo.completed ? (
|
|
<Circle
|
|
className={cn(
|
|
"size-5",
|
|
todo.priority && priorityColors[todo.priority],
|
|
)}
|
|
/>
|
|
) : (
|
|
<CheckCircle2
|
|
className="size-5 text-muted-foreground"
|
|
strokeWidth={2}
|
|
/>
|
|
)}
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
</ItemMedia>
|
|
<ItemContent className="min-w-0">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-1.5">
|
|
<ItemTitle
|
|
className={cn(
|
|
"flex-1",
|
|
todo.completed && "text-muted-foreground line-through",
|
|
)}
|
|
>
|
|
{todo.title}
|
|
</ItemTitle>
|
|
<div className="flex shrink-0 items-center gap-1">
|
|
{todo.dueDate && !todo.completed && (
|
|
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
|
<Calendar className="size-3" />
|
|
{formatDueDate(todo.dueDate)}
|
|
</div>
|
|
)}
|
|
{!todo.completed && (
|
|
<div
|
|
className={cn(
|
|
todo.completed
|
|
? "opacity-0 transition-opacity group-hover:opacity-100"
|
|
: "",
|
|
)}
|
|
>
|
|
<TodoActionsDropdown
|
|
todo={todo}
|
|
isOpen={isDropdownOpen}
|
|
onOpenChange={setIsDropdownOpen}
|
|
onDelete={onDelete}
|
|
onUpdate={onUpdate}
|
|
onToggleStar={onToggleStar}
|
|
labels={labels}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{project && !todo.completed && (
|
|
<div className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground/60">
|
|
<span>{project.name}</span>
|
|
{totalSubtasks > 0 && (
|
|
<>
|
|
<span>·</span>
|
|
<span>{totalSubtasks}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
{isExpanded && todo.subtasks.length > 0 && !todo.completed && (
|
|
<div
|
|
className={cn(
|
|
"overflow-hidden transition-all duration-300 ease-in-out",
|
|
isExpanded ? "max-h-96 opacity-100" : "max-h-0 opacity-0",
|
|
)}
|
|
>
|
|
<div className="mt-1.5 space-y-0.5">
|
|
{todo.subtasks.map((subtask) => (
|
|
<div
|
|
key={subtask.id}
|
|
className="group/subtask -ms-1 flex items-center gap-1.5 rounded px-1 py-0.5 transition-colors hover:bg-accent/20"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onToggleSubtask(todo.id, subtask.id);
|
|
}}
|
|
>
|
|
<button
|
|
className={cn(
|
|
"flex size-3.5 shrink-0 items-center justify-center rounded border transition-all",
|
|
subtask.completed
|
|
? "border-primary bg-primary"
|
|
: "border-muted-foreground/30 hover:border-primary/50",
|
|
)}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onToggleSubtask(todo.id, subtask.id);
|
|
}}
|
|
aria-label={
|
|
subtask.completed
|
|
? labels.markIncomplete(subtask.title)
|
|
: labels.markComplete(subtask.title)
|
|
}
|
|
>
|
|
{subtask.completed && (
|
|
<Check
|
|
className="size-2.5 text-primary-foreground"
|
|
strokeWidth={3}
|
|
/>
|
|
)}
|
|
</button>
|
|
<span
|
|
className={cn(
|
|
"line-clamp-1 cursor-pointer text-xs transition-all select-none",
|
|
subtask.completed
|
|
? "text-muted-foreground/50 line-through"
|
|
: "text-muted-foreground",
|
|
)}
|
|
>
|
|
{subtask.title}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</ItemContent>
|
|
</Item>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface AddTaskFormProps {
|
|
projects: Project[];
|
|
selectedProjectId: string;
|
|
onAddTask: (
|
|
title: string,
|
|
projectId: string,
|
|
dueDate?: Date,
|
|
priority?: Priority,
|
|
) => void;
|
|
onProjectChange: (projectId: string) => void;
|
|
labels: Todo10Labels;
|
|
}
|
|
|
|
const AddTaskForm = ({
|
|
projects,
|
|
selectedProjectId,
|
|
onAddTask,
|
|
onProjectChange,
|
|
labels,
|
|
}: AddTaskFormProps) => {
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
const [title, setTitle] = useState("");
|
|
const [date, setDate] = useState<Date | undefined>();
|
|
const [priority, setPriority] = useState<Priority | undefined>();
|
|
const [datePickerOpen, setDatePickerOpen] = useState(false);
|
|
const selectedProject = projects.find((p) => p.id === selectedProjectId);
|
|
|
|
const handleAddTask = () => {
|
|
if (title.trim()) {
|
|
onAddTask(title.trim(), selectedProjectId, date, priority);
|
|
setTitle("");
|
|
setDate(undefined);
|
|
setPriority(undefined);
|
|
setIsExpanded(false);
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setTitle("");
|
|
setDate(undefined);
|
|
setPriority(undefined);
|
|
setIsExpanded(false);
|
|
};
|
|
|
|
if (!isExpanded) {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
size="lg"
|
|
className="w-full justify-start gap-2"
|
|
onClick={() => setIsExpanded(true)}
|
|
>
|
|
<Plus className="h-4 w-4" aria-hidden />
|
|
{labels.addTaskLabel}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<InputGroup>
|
|
<InputGroupInput
|
|
autoFocus
|
|
placeholder={labels.taskPlaceholder}
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
aria-label={labels.taskPlaceholder}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" && title.trim()) {
|
|
e.preventDefault();
|
|
handleAddTask();
|
|
}
|
|
if (e.key === "Escape") {
|
|
handleCancel();
|
|
}
|
|
}}
|
|
className="py-3 text-base font-medium"
|
|
/>
|
|
<InputGroupAddon align="block-end" className="flex-wrap">
|
|
<Popover open={datePickerOpen} onOpenChange={setDatePickerOpen}>
|
|
<PopoverTrigger asChild>
|
|
<InputGroupButton
|
|
size="sm"
|
|
className={date ? "text-blue-500" : ""}
|
|
aria-label={labels.dateLabel}
|
|
>
|
|
<Calendar className="h-4 w-4" aria-hidden />
|
|
{date ? (
|
|
<span className="text-xs">{formatDueDate(date)}</span>
|
|
) : (
|
|
labels.dateLabel
|
|
)}
|
|
</InputGroupButton>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
dir="rtl"
|
|
lang="fa"
|
|
className="w-auto p-2"
|
|
align="start"
|
|
>
|
|
<div className="space-y-2">
|
|
<div className="space-y-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="w-full justify-start"
|
|
onClick={() => {
|
|
setDate(new Date());
|
|
setDatePickerOpen(false);
|
|
}}
|
|
>
|
|
{labels.today}
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="w-full justify-start"
|
|
onClick={() => {
|
|
const tomorrow = new Date();
|
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
|
setDate(tomorrow);
|
|
setDatePickerOpen(false);
|
|
}}
|
|
>
|
|
{labels.tomorrow}
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="w-full justify-start"
|
|
onClick={() => {
|
|
const nextWeek = new Date();
|
|
nextWeek.setDate(nextWeek.getDate() + 7);
|
|
setDate(nextWeek);
|
|
setDatePickerOpen(false);
|
|
}}
|
|
>
|
|
{labels.nextWeek}
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="w-full justify-start"
|
|
onClick={() => {
|
|
setDate(undefined);
|
|
setDatePickerOpen(false);
|
|
}}
|
|
>
|
|
{labels.noDate}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<InputGroupButton
|
|
size="sm"
|
|
className={priority ? priorityColors[priority] : ""}
|
|
aria-label={labels.priorityLabel}
|
|
>
|
|
{priority ? (
|
|
<Circle
|
|
className={cn("h-4 w-4", priorityColors[priority])}
|
|
aria-hidden
|
|
/>
|
|
) : (
|
|
<Flag className="h-4 w-4" aria-hidden />
|
|
)}
|
|
{priority ? priorityLabels[priority] : labels.priorityLabel}
|
|
</InputGroupButton>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
dir="rtl"
|
|
lang="fa"
|
|
className="w-48 p-2"
|
|
align="start"
|
|
>
|
|
<div className="space-y-1">
|
|
{(["P1", "P2", "P3", "P4"] as Priority[]).map((p) => (
|
|
<Button
|
|
key={p}
|
|
variant={priority === p ? "secondary" : "ghost"}
|
|
className="w-full justify-start gap-2"
|
|
onClick={() => setPriority(p)}
|
|
>
|
|
<Circle className={cn("h-3.5 w-3.5", priorityColors[p])} />
|
|
{priorityLabels[p]}
|
|
</Button>
|
|
))}
|
|
<Button
|
|
variant="ghost"
|
|
className="w-full justify-start"
|
|
onClick={() => setPriority(undefined)}
|
|
>
|
|
{labels.noPriority}
|
|
</Button>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</InputGroupAddon>
|
|
<InputGroupAddon align="block-end">
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<InputGroupButton size="sm" className="gap-2">
|
|
{selectedProject ? selectedProject.name : labels.selectProject}
|
|
<ChevronDown className="h-3.5 w-3.5" aria-hidden />
|
|
</InputGroupButton>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
dir="rtl"
|
|
lang="fa"
|
|
className="w-56 p-2"
|
|
align="start"
|
|
>
|
|
<div className="space-y-1">
|
|
{projects.map((project) => (
|
|
<Button
|
|
key={project.id}
|
|
variant={
|
|
selectedProjectId === project.id ? "secondary" : "ghost"
|
|
}
|
|
className="w-full justify-start"
|
|
onClick={() => onProjectChange(project.id)}
|
|
>
|
|
{project.name}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<InputGroupButton
|
|
size="sm"
|
|
onClick={handleCancel}
|
|
variant="secondary"
|
|
className="ms-auto"
|
|
>
|
|
<X className="h-4 w-4" aria-hidden />
|
|
<span className="hidden sm:inline">{labels.cancel}</span>
|
|
</InputGroupButton>
|
|
<InputGroupButton
|
|
size="sm"
|
|
onClick={handleAddTask}
|
|
disabled={!title.trim()}
|
|
variant="default"
|
|
>
|
|
<SendHorizonal className="h-4 w-4 rtl:rotate-180" aria-hidden />
|
|
<span className="hidden sm:inline">{labels.submitTask}</span>
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
);
|
|
};
|
|
|
|
const Todo10 = ({
|
|
projects = defaultProjects,
|
|
initialTodos = defaultTodos,
|
|
labels = defaultLabels,
|
|
className,
|
|
}: Todo10Props) => {
|
|
const [todos, setTodos] = useState(initialTodos);
|
|
const [sortBy, setSortBy] = useState<SortOption>("manual");
|
|
const [filters, setFilters] = useState<TodoFilters>({
|
|
projects: [],
|
|
priorities: [],
|
|
starredOnly: false,
|
|
});
|
|
const [selectedProjectId, setSelectedProjectId] = useState<string>(
|
|
projects[0]?.id ?? "personal",
|
|
);
|
|
const [isCompletedExpanded, setIsCompletedExpanded] = useState(true);
|
|
const [activeTodo, setActiveTodo] = useState<Todo | null>(null);
|
|
const [expandedTodos, setExpandedTodos] = useState<Set<string>>(
|
|
new Set(
|
|
initialTodos
|
|
.filter((t) => t.subtasks.length > 0 && !t.completed)
|
|
.map((t) => t.id),
|
|
),
|
|
);
|
|
|
|
const sensors = useSensors(
|
|
useSensor(PointerSensor),
|
|
useSensor(KeyboardSensor, {
|
|
coordinateGetter: sortableKeyboardCoordinates,
|
|
}),
|
|
);
|
|
|
|
const filteredTodos = useMemo(() => {
|
|
return filterTodos(todos, filters);
|
|
}, [todos, filters]);
|
|
|
|
const { filteredActiveTodos, filteredCompletedTodos } = useMemo(() => {
|
|
const completedTasks = filteredTodos.filter((todo) => todo.completed);
|
|
const activeTasks = filteredTodos.filter((todo) => !todo.completed);
|
|
|
|
const sortedActive = sortTodos(activeTasks, sortBy);
|
|
const sortedCompleted = sortTodos(completedTasks, sortBy);
|
|
|
|
return {
|
|
filteredActiveTodos: sortedActive,
|
|
filteredCompletedTodos: sortedCompleted,
|
|
};
|
|
}, [filteredTodos, sortBy]);
|
|
|
|
const toggleTodo = (id: string) => {
|
|
setTodos((prevTodos) =>
|
|
prevTodos.map((todo) =>
|
|
todo.id === id ? { ...todo, completed: !todo.completed } : todo,
|
|
),
|
|
);
|
|
};
|
|
|
|
const toggleSubtask = (todoId: string, subtaskId: string) => {
|
|
setTodos((prevTodos) =>
|
|
prevTodos.map((todo) =>
|
|
todo.id === todoId
|
|
? {
|
|
...todo,
|
|
subtasks: todo.subtasks.map((st) =>
|
|
st.id === subtaskId ? { ...st, completed: !st.completed } : st,
|
|
),
|
|
}
|
|
: todo,
|
|
),
|
|
);
|
|
};
|
|
|
|
const toggleExpand = (id: string) => {
|
|
setExpandedTodos((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) {
|
|
next.delete(id);
|
|
} else {
|
|
next.add(id);
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const addTask = (
|
|
title: string,
|
|
projectId: string,
|
|
dueDate?: Date,
|
|
priority?: Priority,
|
|
) => {
|
|
const newTodo: Todo = {
|
|
id: `todo-${Date.now()}`,
|
|
title,
|
|
completed: false,
|
|
projectId,
|
|
dueDate,
|
|
priority,
|
|
subtasks: [],
|
|
createdAt: new Date(),
|
|
updatedAt: new Date(),
|
|
};
|
|
setTodos((prevTodos) => [...prevTodos, newTodo]);
|
|
};
|
|
|
|
const handleUpdate = (updatedTodo: Todo) => {
|
|
setTodos((prevTodos) =>
|
|
prevTodos.map((todo) =>
|
|
todo.id === updatedTodo.id
|
|
? { ...updatedTodo, updatedAt: new Date() }
|
|
: todo,
|
|
),
|
|
);
|
|
};
|
|
|
|
const handleDelete = (id: string) => {
|
|
setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
|
|
};
|
|
|
|
const handleToggleStar = (id: string) => {
|
|
setTodos((prevTodos) =>
|
|
prevTodos.map((todo) =>
|
|
todo.id === id ? { ...todo, starred: !todo.starred } : todo,
|
|
),
|
|
);
|
|
};
|
|
|
|
const handleDragStart = (event: DragStartEvent) => {
|
|
const { active } = event;
|
|
const todo = todos.find((t) => t.id === active.id);
|
|
setActiveTodo(todo || null);
|
|
};
|
|
|
|
const handleDragEnd = (event: DragEndEvent) => {
|
|
const { active, over } = event;
|
|
|
|
if (over && active.id !== over.id && sortBy === "manual") {
|
|
const oldIndex = todos.findIndex((item) => item.id === active.id);
|
|
const newIndex = todos.findIndex((item) => item.id === over.id);
|
|
|
|
if (oldIndex !== -1 && newIndex !== -1) {
|
|
setTodos((items) => arrayMove(items, oldIndex, newIndex));
|
|
}
|
|
}
|
|
|
|
setActiveTodo(null);
|
|
};
|
|
|
|
const hasTodos = todos.length > 0;
|
|
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mx-auto flex max-w-2xl flex-col gap-8">
|
|
{!hasTodos ? (
|
|
<Empty>
|
|
<EmptyHeader>
|
|
<EmptyMedia variant="icon">
|
|
<List aria-hidden />
|
|
</EmptyMedia>
|
|
<EmptyTitle>{labels.emptyTitle}</EmptyTitle>
|
|
<EmptyDescription>{labels.emptyDescription}</EmptyDescription>
|
|
</EmptyHeader>
|
|
<EmptyContent>
|
|
<AddTaskForm
|
|
projects={projects}
|
|
selectedProjectId={selectedProjectId}
|
|
onAddTask={addTask}
|
|
onProjectChange={setSelectedProjectId}
|
|
labels={labels}
|
|
/>
|
|
</EmptyContent>
|
|
</Empty>
|
|
) : (
|
|
<div className="mx-auto flex w-full max-w-4xl flex-col gap-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold">
|
|
{labels.allTasks(filteredActiveTodos.length)}
|
|
</h3>
|
|
</div>
|
|
|
|
<DndContext
|
|
sensors={sensors}
|
|
collisionDetection={closestCenter}
|
|
onDragStart={handleDragStart}
|
|
onDragEnd={handleDragEnd}
|
|
>
|
|
<SortableContext
|
|
items={filteredActiveTodos.map((t) => t.id)}
|
|
strategy={verticalListSortingStrategy}
|
|
>
|
|
<ItemGroup className="w-full">
|
|
{filteredActiveTodos.map((todo) => {
|
|
const project = projects.find(
|
|
(p) => p.id === todo.projectId,
|
|
);
|
|
return (
|
|
<SortableTodoItem
|
|
key={todo.id}
|
|
todo={todo}
|
|
project={project}
|
|
onToggle={toggleTodo}
|
|
onToggleSubtask={toggleSubtask}
|
|
onToggleExpand={toggleExpand}
|
|
onDelete={handleDelete}
|
|
onUpdate={handleUpdate}
|
|
onToggleStar={handleToggleStar}
|
|
isExpanded={expandedTodos.has(todo.id)}
|
|
labels={labels}
|
|
/>
|
|
);
|
|
})}
|
|
</ItemGroup>
|
|
</SortableContext>
|
|
|
|
<AddTaskForm
|
|
projects={projects}
|
|
selectedProjectId={selectedProjectId}
|
|
onAddTask={addTask}
|
|
onProjectChange={setSelectedProjectId}
|
|
labels={labels}
|
|
/>
|
|
|
|
{filteredCompletedTodos.length > 0 && (
|
|
<div className="space-y-3 border-t border-border/50 pt-6">
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
setIsCompletedExpanded(!isCompletedExpanded)
|
|
}
|
|
className="group flex w-full items-center gap-2 text-xs font-semibold text-muted-foreground transition-colors hover:text-foreground"
|
|
aria-expanded={isCompletedExpanded}
|
|
aria-label={
|
|
isCompletedExpanded
|
|
? `بستن بخش ${labels.completedLabel}`
|
|
: `باز کردن بخش ${labels.completedLabel}`
|
|
}
|
|
>
|
|
<ChevronDown
|
|
className={cn(
|
|
"size-3.5 text-muted-foreground transition-transform duration-200",
|
|
!isCompletedExpanded && "-rotate-90",
|
|
)}
|
|
aria-hidden
|
|
/>
|
|
<span>{labels.completedLabel}</span>
|
|
<span className="rounded-full bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
|
|
{filteredCompletedTodos.length}
|
|
</span>
|
|
</button>
|
|
|
|
<div
|
|
className={cn(
|
|
"overflow-hidden transition-all duration-300 ease-in-out",
|
|
isCompletedExpanded
|
|
? "max-h-[2000px] opacity-100"
|
|
: "max-h-0 opacity-0",
|
|
)}
|
|
>
|
|
<ItemGroup className="w-full">
|
|
{filteredCompletedTodos.map((todo) => {
|
|
const project = projects.find(
|
|
(p) => p.id === todo.projectId,
|
|
);
|
|
return (
|
|
<SortableTodoItem
|
|
key={todo.id}
|
|
todo={todo}
|
|
project={project}
|
|
onToggle={toggleTodo}
|
|
onToggleSubtask={toggleSubtask}
|
|
onToggleExpand={toggleExpand}
|
|
onDelete={handleDelete}
|
|
onUpdate={handleUpdate}
|
|
onToggleStar={handleToggleStar}
|
|
isExpanded={expandedTodos.has(todo.id)}
|
|
labels={labels}
|
|
/>
|
|
);
|
|
})}
|
|
</ItemGroup>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<DragOverlay>
|
|
{activeTodo ? (
|
|
<Item
|
|
variant={activeTodo.completed ? "muted" : "default"}
|
|
className="cursor-grabbing items-center border-b opacity-90 shadow-lg"
|
|
>
|
|
<ItemMedia>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className="cursor-grabbing"
|
|
aria-hidden
|
|
tabIndex={-1}
|
|
>
|
|
<GripVertical className="size-4 text-muted-foreground" />
|
|
</Button>
|
|
<Checkbox
|
|
checked={activeTodo.completed}
|
|
aria-hidden
|
|
tabIndex={-1}
|
|
/>
|
|
</div>
|
|
</ItemMedia>
|
|
<ItemContent>
|
|
<ItemTitle
|
|
className={
|
|
activeTodo.completed
|
|
? "text-muted-foreground line-through"
|
|
: ""
|
|
}
|
|
>
|
|
{activeTodo.title}
|
|
</ItemTitle>
|
|
</ItemContent>
|
|
</Item>
|
|
) : null}
|
|
</DragOverlay>
|
|
</DndContext>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Todo10 };
|