50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T4dc6,"use client"; import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react"; import { addDays, format, isSameDay, isSameMonth, isWeekend } from "date-fns"; import { CalendarCheckIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { useEventKeyboard } from "@/hooks/use-event-keyboard"; import { useIsPast, useNow, useToday } from "@/hooks/use-now"; import { Popover, PopoverAnchor } from "@/components/ui/popover"; import { EventContextMenu } from "./event-context-menu"; import { EventDetailPopover } from "./event-detail-popover"; import { CalendarPopoverBoundaryProvider } from "./calendar-popover-context"; import { CalendarLoadingBar } from "./calendar-loading-bar"; import { EventContentSlot, useCalendar, useCalendarConfig, useCalendarViewSync, } from "./calendar-provider"; import { EVENT_FOCUS_RING_CLASS, eventColorStyles, } from "./calendar-event-item"; import { AGENDA_DAYS, formatAgendaDayOfSpan, formatAgendaTime, formatFullDate, getAgendaDays, getEventLabel, getVisibleDays, } from "@/lib/event-utils"; import type { AgendaDay, AgendaEntry, CalendarEvent, DetailedCalendarEvent, } from "./calendar-types"; import type { AgendaViewProps } from "./week-view-types"; /** * Box for custom `renderEventContent` output: fills the row after the color * accent, inset like the default content */ const AGENDA_SLOT_CLASS = "flex min-w-0 flex-1 items-center overflow-hidden px-2.5 py-1.5"; interface ContextMenuState { x: number; y: number; event: CalendarEvent; } /** The agenda's days of one month, under that month's label */ interface AgendaMonth { /** Start of the first listed day of the month */ date: Date; days: AgendaDay[]; } interface AgendaEventRowProps { entry: AgendaEntry; isSelected: boolean; /** Whether this row opens the details popover of the selected event */ showPopover: boolean; onSelect: (event: CalendarEvent) => void; onContextMenu: (e: React.MouseEvent, event: CalendarEvent) => void; onEventChange: (event: CalendarEvent) => void; /** Closes the given event's popover (clears it only while it is still selected) */ onPopoverClose: (eventId: string) => void; /** Callback for the popover's expand button (hidden when absent) */ onPopoverExpand?: () => void; } interface AgendaDayGroupProps { day: AgendaDay; isToday: boolean; /** Draws one of the day's entries */ renderRow: (day: AgendaDay, entry: AgendaEntry) => React.ReactNode; } interface AgendaTodayRowsProps { day: AgendaDay; renderRow: (day: AgendaDay, entry: AgendaEntry) => React.ReactNode; } interface AgendaEmptyStateProps { /** First day of the agenda */ from: Date; /** Last day of the agenda */ to: Date; } /** Splits the listed days into months, in order */ function groupByMonth(days: AgendaDay[]): AgendaMonth[] { const months: AgendaMonth[] = []; for (const day of days) { const current = months[months.length - 1]; if (current && isSameMonth(current.date, day.date)) { current.days.push(day); continue; } months.push({ date: day.date, days: [day] }); } return months; } /** Stable key for an entry: an event is listed at most once per day */ function getEntryKey(day: Date, entry: AgendaEntry): string { return `${format(day, "yyyy-MM-dd")}:${entry.event.id}`; } /** * Index in today's entries where the current-time line goes: before the * first timed entry that starts after `now`, or after the last entry */ function getNowLineIndex(entries: AgendaEntry[], now: Date): number { const index = entries.findIndex( (entry) => !entry.isAllDayOnThisDay && entry.dayIndex === 1 && entry.event.start > now, ); return index === -1 ? entries.length : index; } /** * Scrolling list of the coming days' events, grouped by day: `AGENDA_DAYS` * days from the provider's date, skipping days without events (today is * always shown). Date, events, selection and view settings come from the * surrounding CalendarProvider. */ export function AgendaView({ showEventPopover = true, onEventPopoverExpand, className, }: AgendaViewProps) { const { view, currentDate, events, viewSettings, selectedEventId, selectEvent, clearSelection, updateEvent, goToDate, loading, } = useCalendar(); const { locale } = useCalendarConfig(); const { reportView, reportVisibleDays, closeEventPopover } = useCalendarViewSync(); // `null` on the server and during hydration, so no day is marked as today const today = useToday(); /** * Whether the provider navigates by the agenda's range. False for the * commit before it adopts this view (on mount, or right after a switch it * doesn't follow). */ const isProviderInSync = view === "agenda"; const boundaryRef = useRef(null); /** * Never attached: nothing sits above the list, so the details popover may * use the agenda's full height */ const headerRef = useRef(null); const scrollContainerRef = useRef(null); const [contextMenu, setContextMenu] = useState(null); const { showWeekends } = viewSettings; // Tell the provider which view is on screen. `reportView` changes with the // provider's state, so this also re-checks after every switch. A layout // effect: the provider adopts the agenda before the first paint. useLayoutEffect(() => { reportView({ view: "agenda" }); }, [reportView]); const rangeDays = useMemo( () => getVisibleDays(currentDate, "agenda", AGENDA_DAYS), [currentDate], ); const rangeStart = rangeDays[0]; const rangeEnd = rangeDays[rangeDays.length - 1]; // Report the covered days to the provider (header and range consumers). // Not while it is adopting this view: the date is about to change. useEffect(() => { if (!isProviderInSync) return; reportVisibleDays(rangeDays); }, [isProviderInSync, rangeDays, reportVisibleDays]); // A new range starts at the top of the list useEffect(() => { scrollContainerRef.current?.scrollTo({ top: 0 }); }, [currentDate]); const listedDays = useMemo(() => { const days = getAgendaDays(events, currentDate, AGENDA_DAYS); return days.filter((day) => { if (!showWeekends && isWeekend(day.date)) return false; if (day.entries.length > 0) return true; return today !== null && isSameDay(day.date, today); }); }, [events, currentDate, showWeekends, today]); const months = useMemo(() => groupByMonth(listedDays), [listedDays]); const hasEvents = listedDays.some((day) => day.entries.length > 0); /** * Row that opens the selected event's popover: its first listed day, so * a multi-day event opens it once */ const popoverEntryKey = useMemo(() => { if (!selectedEventId || !showEventPopover) return null; for (const day of listedDays) { const entry = day.entries.find((e) => e.event.id === selectedEventId); if (entry) return getEntryKey(day.date, entry); } return null; }, [listedDays, selectedEventId, showEventPopover]); const handleSelect = useCallback( (event: CalendarEvent) => selectEvent(event.id), [selectEvent], ); const handleContextMenu = useCallback( (e: React.MouseEvent, event: CalendarEvent) => { e.preventDefault(); setContextMenu({ x: e.clientX, y: e.clientY, event }); }, [], ); /** Whether a day is in the agenda's range */ const isDayVisible = useCallback( (date: Date) => date >= rangeStart && date < addDays(rangeEnd, 1), [rangeStart, rangeEnd], ); /** Moves the range a day toward a day just outside it (keyboard moves go a day at most) */ const revealDay = useCallback( (date: Date) => { goToDate(addDays(currentDate, date < rangeStart ? -1 : 1)); }, [currentDate, rangeStart, goToDate], ); const handleEventKeyDown = useEventKeyboard({ containerRef: boundaryRef, scrollContainerRef, isDayVisible, revealDay, }); const handleRootClick = useCallback( (e: React.MouseEvent) => { const target = e.target as HTMLElement; if ( target.closest("[data-radix-popper-content-wrapper]") || target.closest("button") || target.closest("[role='button']") ) { return; } clearSelection(); }, [clearSelection], ); const renderRow = (day: AgendaDay, entry: AgendaEntry) => { const key = getEntryKey(day.date, entry); return ( ); }; return (

{hasEvents ? ( months.map((month) => (

{/* The day groups' labels carry the month for screen readers */}

{format(month.date, "MMMM yyyy", { locale })}

{month.days.map((day) => ( ))}

)) ) : ( )}

{/* No header to sit under, so the bar runs along the top, above the sticky month labels */} {loading && } {contextMenu && ( setContextMenu(null)} onEventChange={updateEvent} /> )}

); } /** * One day of the agenda: its date on the left (today in a badge), its * events on the right. A labelled group, like the time grid's day columns * and month cells. */ function AgendaDayGroup({ day, isToday, renderRow }: AgendaDayGroupProps) { const { locale } = useCalendarConfig(); const fullDate = formatFullDate(day.date, locale); return (

{/* The group's label reads the date out */}

{format(day.date, "EEE", { locale })} {format(day.date, "d", { locale })}

{isToday ? ( ) : ( day.entries.map((entry) => renderRow(day, entry)) )}

); } /** * Today's entries with a current-time line between the past and upcoming * ones, or a note when today has none. Its own component, so only today * re-renders as the clock ticks. */ function AgendaTodayRows({ day, renderRow }: AgendaTodayRowsProps) { // `null` on the server and during hydration: no line until then const now = useNow(); if (day.entries.length === 0) { return (

No events today

); } const lineIndex = now ? getNowLineIndex(day.entries, now) : -1; return day.entries.flatMap((entry, index) => { const row = renderRow(day, entry); const isLastRow = index === day.entries.length - 1; if (index === lineIndex) return [, row]; if (isLastRow && lineIndex === day.entries.length) { return [row, ]; } return [row]; }); } /** Red line marking the current time between today's events */ function AgendaNowLine() { return (

); } /** * An event under one of its days: a tinted row in the event's color with * its time, title, location and, for a multi-day event, which day this is. * Selects the event on click, Enter or Space, and opens the details popover * when it is the selected event's first listed day. */ function AgendaEventRow({ entry, isSelected, showPopover, onSelect, onContextMenu, onEventChange, onPopoverClose, onPopoverExpand, }: AgendaEventRowProps) { const { event } = entry; const color = event.color ?? "blue"; const styles = eventColorStyles[color]; // `false` on the server and during hydration, so the markup matches const eventIsPast = useIsPast(event.end); const { hourCycle, locale } = useCalendarConfig(); // Every field is optional: plain events read as details without any const { location }: DetailedCalendarEvent = event; const timeLabel = formatAgendaTime(entry, hourCycle, locale); const dayOfSpan = formatAgendaDayOfSpan(entry); const label = getEventLabel(event, hourCycle, locale); const details = [location, dayOfSpan].filter(Boolean).join(" · "); function handleClick(e: React.MouseEvent) { e.stopPropagation(); onSelect(event); } function handleContextMenu(e: React.MouseEvent) { e.preventDefault(); e.stopPropagation(); onContextMenu(e, event); } function handleKeyDown(e: React.KeyboardEvent) { if (e.key !== "Enter" && e.key !== " ") return; e.preventDefault(); onSelect(event); } const secondaryTextClass = isSelected ? "text-white/85" : cn(styles.text, "opacity-80 dark:text-white/70 dark:opacity-100"); return ( // Always inside a Popover, so opening the details keeps this element // (and its focus) instead of re-creating it { if (!open) onPopoverClose(event.id); }} >

{/* Color accent, merged into the background when selected (kept in place so the content doesn't shift) */} {event.title} {timeLabel} {details && ( {details} )}

} /> {showPopover && ( onPopoverClose(event.id)} onExpand={onPopoverExpand} side="bottom" align="end" /> )} ); } /** Shown when no events fall in the agenda's range */ function AgendaEmptyState({ from, to }: AgendaEmptyStateProps) { const { locale } = useCalendarConfig(); return (

Nothing planned

No events from {format(from, "MMM d", { locale })} to{" "} {format(to, "MMM d", { locale })}.

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"date-fns"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@calendarcn","registryDependencies":["@calendarcn/calendar-core","@calendarcn/event-details","popover"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/agenda-view.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]