92 lines
3.7 KiB
TypeScript
92 lines
3.7 KiB
TypeScript
/**
|
|
* @file trash/TrashList.tsx
|
|
* @description Client component rendering the list of deleted tasks with rich metadata, priority badges, and restore/delete actions.
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import { Task, PRIORITY_CONFIG } from "@/types/task";
|
|
import { Calendar } from "lucide-react";
|
|
import TaskActionButton from "./components/TaskActionButton";
|
|
|
|
/**
|
|
* Renders a list of deleted tasks stored in the trash, featuring priority badges,
|
|
* deletion dates, and action controls for permanent deletion or restoration.
|
|
*
|
|
* @param {Object} props - The component props.
|
|
* @param {Task[]} props.tasks - The array of deleted tasks to render.
|
|
* @returns {JSX.Element} The rendered trash list component or an empty state placeholder.
|
|
*/
|
|
export default function TrashList({ tasks }: { tasks: Task[] }) {
|
|
return (
|
|
<div className="grid gap-4">
|
|
{tasks.length === 0 ? (
|
|
<div className="text-center py-20 border-2 border-dashed border-border/50 rounded-3xl bg-card/20 space-y-2">
|
|
<p className="text-sm font-medium text-foreground-muted">
|
|
No deleted tasks found.
|
|
</p>
|
|
<p className="text-xs text-foreground-muted/65">
|
|
Your trash is completely empty.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
tasks.map((task) => {
|
|
const priorityConfig =
|
|
PRIORITY_CONFIG[task.priority as keyof typeof PRIORITY_CONFIG] ||
|
|
PRIORITY_CONFIG.medium;
|
|
|
|
const deletedDate = task.deletedAt
|
|
? new Date(task.deletedAt).toLocaleDateString("de-DE", {
|
|
day: "2-digit",
|
|
month: "2-digit",
|
|
year: "numeric",
|
|
})
|
|
: "Unknown";
|
|
|
|
return (
|
|
<div
|
|
key={task.id}
|
|
className="group relative flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-4 bg-card/40 border border-border/80 rounded-2xl hover:border-primary/40 hover:bg-card/70 transition-all duration-200 shadow-sm overflow-hidden"
|
|
>
|
|
<div className="absolute left-0 top-0 bottom-0 w-1 bg-rose-500/40 group-hover:bg-rose-500 transition-colors" />
|
|
|
|
{/* --- Left Side --- */}
|
|
<div className="flex flex-col gap-2 pl-2 max-w-2xl">
|
|
<div className="flex items-center gap-3">
|
|
<h3 className="font-semibold text-base group-hover:text-primary transition-colors line-clamp-1">
|
|
{task.title}
|
|
</h3>
|
|
|
|
<span
|
|
className={`text-[10px] px-2 py-0.5 rounded-md font-semibold border ${priorityConfig.className}`}
|
|
>
|
|
{priorityConfig.label}
|
|
</span>
|
|
</div>
|
|
|
|
{task.description && (
|
|
<p className="text-xs text-foreground-muted line-clamp-1">
|
|
{task.description}
|
|
</p>
|
|
)}
|
|
|
|
<div className="flex flex-wrap items-center gap-2 pt-1 text-xs">
|
|
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-card/60 text-foreground-muted border border-border/60">
|
|
<Calendar size={12} className="text-foreground-muted/70" />
|
|
Deleted {deletedDate}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- Right Side --- */}
|
|
<div className="flex sm:flex-col flex-row sm:items-stretch items-center justify-end sm:pt-2 pt-0 sm:border-t border-t-0 border-border/60 gap-2">
|
|
<TaskActionButton taskId={task.id} action="delete" />
|
|
<TaskActionButton taskId={task.id} action="restore" />
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
);
|
|
}
|