385 lines
14 KiB
TypeScript
385 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import { usePathname } from "next/navigation";
|
|
import { toast } from "sonner";
|
|
import { AlertTriangle, CalendarClock, ChevronLeft, ChevronRight, Plus } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import { formatWeekdayDate } from "@/lib/format";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
|
import { useScheduledPanel } from "@/components/scheduled/scheduled-panel-provider";
|
|
import { ScheduledTodoItem } from "@/components/scheduled/scheduled-todo-item";
|
|
import { ScheduledTodoDialog } from "@/components/scheduled/scheduled-todo-dialog";
|
|
import { getScheduledBoard, toggleScheduledOccurrence } from "@/lib/actions/scheduled-todos";
|
|
import { useHoldOnComplete } from "@/components/hold-on-complete";
|
|
import type { ScheduledBoardDTO, ScheduledOccurrenceDTO } from "@/types/scheduled-todo";
|
|
|
|
function occurrenceKey(scheduledTodoId: string, occurrenceDate: string) {
|
|
return `${scheduledTodoId}-${occurrenceDate}`;
|
|
}
|
|
|
|
/** `layout.tsx` is shared by Home and every Project board, so the panel
|
|
* derives its own scope from the URL rather than a prop threaded down from
|
|
* a page it doesn't render (see the plan notes on why this fetches
|
|
* client-side instead of taking initial data as a prop like KanbanBoard). */
|
|
function projectIdFromPathname(pathname: string): string | null {
|
|
const match = /^\/projects\/([^/]+)/.exec(pathname);
|
|
return match ? match[1] : null;
|
|
}
|
|
|
|
function matchesOccurrence(o: ScheduledOccurrenceDTO, scheduledTodoId: string, occurrenceDate: string) {
|
|
return o.scheduledTodoId === scheduledTodoId && o.occurrenceDate === occurrenceDate;
|
|
}
|
|
|
|
function withToggledOccurrence(
|
|
board: ScheduledBoardDTO,
|
|
scheduledTodoId: string,
|
|
occurrenceDate: string,
|
|
completed: boolean
|
|
): ScheduledBoardDTO {
|
|
const flip = (o: ScheduledOccurrenceDTO) =>
|
|
matchesOccurrence(o, scheduledTodoId, occurrenceDate) ? { ...o, completed } : o;
|
|
|
|
// Overdue only ever lists incomplete occurrences -- flip it here just
|
|
// like the other sections, and let ExpandedPanel's own hold-aware filter
|
|
// (see useHoldOnComplete) decide when a freshly-completed one actually
|
|
// drops out of the list, rather than yanking it out the instant it's
|
|
// checked.
|
|
return {
|
|
overdue: board.overdue.map(flip),
|
|
today: { ...board.today, occurrences: board.today.occurrences.map(flip) },
|
|
upcoming: board.upcoming.map((day) => ({ ...day, occurrences: day.occurrences.map(flip) })),
|
|
};
|
|
}
|
|
|
|
export function ScheduledPanel() {
|
|
const { collapsed, toggle } = useScheduledPanel();
|
|
const pathname = usePathname();
|
|
const projectId = projectIdFromPathname(pathname);
|
|
|
|
const [board, setBoard] = useState<ScheduledBoardDTO | null>(null);
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [editingId, setEditingId] = useState<string | null>(null);
|
|
const { beginHold, cancelHold } = useHoldOnComplete();
|
|
|
|
const refresh = useCallback(() => {
|
|
getScheduledBoard(projectId)
|
|
.then(setBoard)
|
|
.catch(() => setBoard(null));
|
|
}, [projectId]);
|
|
|
|
useEffect(() => {
|
|
setBoard(null);
|
|
refresh();
|
|
}, [refresh]);
|
|
|
|
async function handleToggle(occurrence: ScheduledOccurrenceDTO, completed: boolean) {
|
|
setBoard((prev) =>
|
|
prev ? withToggledOccurrence(prev, occurrence.scheduledTodoId, occurrence.occurrenceDate, completed) : prev
|
|
);
|
|
// Only the Overdue section actually consults these holds (see
|
|
// ExpandedPanel), so it's harmless to key one for every occurrence --
|
|
// checking off a Today/Upcoming item just starts a hold nothing ever
|
|
// looks at, which quietly expires on its own.
|
|
const key = occurrenceKey(occurrence.scheduledTodoId, occurrence.occurrenceDate);
|
|
if (completed) beginHold(key);
|
|
else cancelHold(key);
|
|
try {
|
|
await toggleScheduledOccurrence(occurrence.scheduledTodoId, occurrence.occurrenceDate, completed);
|
|
} catch {
|
|
toast.error("Couldn't update scheduled to-do. Try again.");
|
|
refresh();
|
|
}
|
|
}
|
|
|
|
function handleEdit(scheduledTodoId: string) {
|
|
setEditingId(scheduledTodoId);
|
|
setDialogOpen(true);
|
|
}
|
|
|
|
function handleAdd() {
|
|
setEditingId(null);
|
|
setDialogOpen(true);
|
|
}
|
|
|
|
// Reflects true remaining work, not the hold-delayed view -- the
|
|
// collapsed rail's badge should drop the instant something's checked off,
|
|
// even while Overdue's own list still shows it fading out.
|
|
const overdueCount = board?.overdue.filter((o) => !o.completed).length ?? 0;
|
|
// Today's occurrences list includes already-checked-off ones (so they can
|
|
// still be toggled back), unlike overdue -- so this needs its own filter
|
|
// rather than just `board.today.occurrences.length`.
|
|
const todayCount = board?.today.occurrences.filter((o) => !o.completed).length ?? 0;
|
|
|
|
return (
|
|
<>
|
|
<aside
|
|
className={cn(
|
|
"flex h-screen flex-col border-l bg-sidebar text-sidebar-foreground transition-[width] duration-200",
|
|
collapsed ? "w-16" : "w-80"
|
|
)}
|
|
>
|
|
{collapsed ? (
|
|
<CollapsedRail
|
|
overdueCount={overdueCount}
|
|
todayCount={todayCount}
|
|
onAdd={handleAdd}
|
|
onExpand={toggle}
|
|
/>
|
|
) : (
|
|
<ExpandedPanel
|
|
board={board}
|
|
onToggleOccurrence={handleToggle}
|
|
onEditOccurrence={handleEdit}
|
|
onAdd={handleAdd}
|
|
onCollapse={toggle}
|
|
/>
|
|
)}
|
|
</aside>
|
|
|
|
<ScheduledTodoDialog
|
|
open={dialogOpen}
|
|
onOpenChange={setDialogOpen}
|
|
projectId={projectId}
|
|
scheduledTodoId={editingId}
|
|
onSaved={refresh}
|
|
onDeleted={refresh}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function CollapsedRail({
|
|
overdueCount,
|
|
todayCount,
|
|
onAdd,
|
|
onExpand,
|
|
}: {
|
|
overdueCount: number;
|
|
todayCount: number;
|
|
onAdd: () => void;
|
|
onExpand: () => void;
|
|
}) {
|
|
return (
|
|
<>
|
|
<div className="flex flex-col items-center gap-1.5 p-3">
|
|
<Tooltip>
|
|
<TooltipTrigger
|
|
render={
|
|
<button
|
|
type="button"
|
|
onClick={onExpand}
|
|
className="flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground"
|
|
aria-label="Expand scheduled to-dos"
|
|
>
|
|
<CalendarClock className="size-5" />
|
|
</button>
|
|
}
|
|
/>
|
|
<TooltipContent side="left">Scheduled to-dos</TooltipContent>
|
|
</Tooltip>
|
|
|
|
{/* Sits right below the calendar icon rather than as a corner
|
|
overlay -- a ping ring behind the solid circle makes overdue
|
|
work as loud/eye-catching as possible. */}
|
|
{overdueCount > 0 && (
|
|
<Tooltip>
|
|
<TooltipTrigger
|
|
render={
|
|
<button
|
|
type="button"
|
|
onClick={onExpand}
|
|
className="relative flex size-5 items-center justify-center"
|
|
aria-label={`${overdueCount} overdue`}
|
|
>
|
|
<span className="absolute inline-flex size-full animate-ping rounded-full bg-destructive opacity-75" />
|
|
<span className="relative flex size-5 items-center justify-center rounded-full bg-destructive text-[10px] font-bold text-white">
|
|
{overdueCount > 9 ? "9+" : overdueCount}
|
|
</span>
|
|
</button>
|
|
}
|
|
/>
|
|
<TooltipContent side="left">{overdueCount} overdue</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
|
|
{/* Below the overdue circle when both are present, otherwise right
|
|
below the calendar icon -- a plain opacity pulse (no ping ring)
|
|
keeps it visibly calmer than overdue's. */}
|
|
{todayCount > 0 && (
|
|
<Tooltip>
|
|
<TooltipTrigger
|
|
render={
|
|
<button
|
|
type="button"
|
|
onClick={onExpand}
|
|
className="flex size-5 animate-pulse items-center justify-center rounded-full bg-white text-[10px] font-bold text-black shadow-sm ring-1 ring-border"
|
|
aria-label={`${todayCount} due today`}
|
|
>
|
|
{todayCount > 9 ? "9+" : todayCount}
|
|
</button>
|
|
}
|
|
/>
|
|
<TooltipContent side="left">{todayCount} due today</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-1 flex-col items-center justify-end gap-1 p-2">
|
|
<Tooltip>
|
|
<TooltipTrigger
|
|
render={
|
|
<Button variant="ghost" size="icon" onClick={onAdd} aria-label="Add scheduled to-do">
|
|
<Plus className="size-4" />
|
|
</Button>
|
|
}
|
|
/>
|
|
<TooltipContent side="left">Add Scheduled To-Do</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Button variant="ghost" size="icon" onClick={onExpand} aria-label="Expand scheduled panel">
|
|
<ChevronLeft className="size-4" />
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function ExpandedPanel({
|
|
board,
|
|
onToggleOccurrence,
|
|
onEditOccurrence,
|
|
onAdd,
|
|
onCollapse,
|
|
}: {
|
|
board: ScheduledBoardDTO | null;
|
|
onToggleOccurrence: (occurrence: ScheduledOccurrenceDTO, completed: boolean) => void;
|
|
onEditOccurrence: (scheduledTodoId: string) => void;
|
|
onAdd: () => void;
|
|
onCollapse: () => void;
|
|
}) {
|
|
const { holds } = useHoldOnComplete();
|
|
|
|
// A freshly-checked-off occurrence lingers here through its hold (see
|
|
// useHoldOnComplete) instead of dropping out the instant it's completed;
|
|
// once its hold expires it's gone for good, same as before. The header
|
|
// count below counts this same list, so it never disagrees with what's
|
|
// actually on screen -- unlike the collapsed rail's badge, which drops
|
|
// the instant something's checked off (see ScheduledPanel's overdueCount).
|
|
const visibleOverdue =
|
|
board?.overdue.filter(
|
|
(o) => !o.completed || holds.has(occurrenceKey(o.scheduledTodoId, o.occurrenceDate))
|
|
) ?? [];
|
|
|
|
return (
|
|
<>
|
|
<div className="flex items-center justify-between gap-2 p-3">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<CalendarClock className="size-5 shrink-0 text-primary" />
|
|
<span className="truncate text-lg font-semibold">Scheduled</span>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={onCollapse}
|
|
aria-label="Collapse scheduled panel"
|
|
>
|
|
<ChevronRight className="size-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="flex-1 overflow-y-auto p-3">
|
|
{!board ? (
|
|
<p className="p-2 text-center text-sm text-muted-foreground">Loading…</p>
|
|
) : (
|
|
<div className="space-y-5">
|
|
{visibleOverdue.length > 0 && (
|
|
<section className="rounded-lg border-2 border-destructive bg-destructive/10 p-3">
|
|
<div className="mb-1.5 flex items-center gap-1.5 text-sm font-bold text-destructive">
|
|
<AlertTriangle className="size-4 animate-pulse" />
|
|
Overdue ({visibleOverdue.length})
|
|
</div>
|
|
<ul>
|
|
{visibleOverdue.map((o) => (
|
|
<ScheduledTodoItem
|
|
key={`${o.scheduledTodoId}-${o.occurrenceDate}`}
|
|
occurrence={o}
|
|
emphasis="overdue"
|
|
holdPhase={holds.get(occurrenceKey(o.scheduledTodoId, o.occurrenceDate))}
|
|
onToggle={(completed) => onToggleOccurrence(o, completed)}
|
|
onEdit={() => onEditOccurrence(o.scheduledTodoId)}
|
|
/>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
)}
|
|
|
|
<section>
|
|
<h3 className="mb-1.5 text-sm font-bold text-foreground">
|
|
Today — {formatWeekdayDate(board.today.date)}
|
|
</h3>
|
|
{board.today.occurrences.length > 0 ? (
|
|
<ul>
|
|
{board.today.occurrences.map((o) => (
|
|
<ScheduledTodoItem
|
|
key={`${o.scheduledTodoId}-${o.occurrenceDate}`}
|
|
occurrence={o}
|
|
emphasis="today"
|
|
onToggle={(completed) => onToggleOccurrence(o, completed)}
|
|
onEdit={() => onEditOccurrence(o.scheduledTodoId)}
|
|
/>
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<p className="text-xs text-muted-foreground">Nothing scheduled today.</p>
|
|
)}
|
|
</section>
|
|
|
|
{board.upcoming.map((day, index) => (
|
|
// Fades a little more for each day further from today, so
|
|
// today reads as the loudest thing in the column.
|
|
<section key={day.date} style={{ opacity: Math.max(0.35, 1 - (index + 1) * 0.13) }}>
|
|
<h3 className="mb-1.5 text-sm font-semibold text-muted-foreground">
|
|
{formatWeekdayDate(day.date)}
|
|
</h3>
|
|
{day.occurrences.length > 0 ? (
|
|
<ul>
|
|
{day.occurrences.map((o) => (
|
|
<ScheduledTodoItem
|
|
key={`${o.scheduledTodoId}-${o.occurrenceDate}`}
|
|
occurrence={o}
|
|
onToggle={(completed) => onToggleOccurrence(o, completed)}
|
|
onEdit={() => onEditOccurrence(o.scheduledTodoId)}
|
|
/>
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<p className="text-xs text-muted-foreground">Nothing scheduled.</p>
|
|
)}
|
|
</section>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="p-2">
|
|
<Button
|
|
variant="ghost"
|
|
className="w-full justify-start gap-2 text-muted-foreground"
|
|
onClick={onAdd}
|
|
>
|
|
<Plus className="size-4" />
|
|
Add Scheduled To-Do
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|