@remit/ui 0.0.155 → 0.0.156

package/src/components/agenda-panels.tsx

@@ -0,0 +1,421 @@
+/**
+ * The readings that sit beside the strip.
+ *
+ * A wide screen given to a single column of days wastes it as badly as a grid
+ * wastes a sparse week, so the width goes to the questions the list is good at:
+ * what is next, where the free time is, and where in the strip you currently
+ * are. None of them is a second copy of the list — each one answers something
+ * the rows cannot answer at a glance.
+ */
+
+import type { LucideIcon } from "lucide-react";
+import {
+	AlignJustify,
+	CalendarOff,
+	Clock,
+	LayoutList,
+	MoreHorizontal,
+	Radio,
+	Sun,
+} from "lucide-react";
+import { type ReactNode, useId, useMemo } from "react";
+import {
+	addDays,
+	DAY_END_MINUTE,
+	DAY_START_MINUTE,
+	datesBetween,
+	type FreeStretch,
+	formatMinute,
+	formatShortDay,
+	formatSpan,
+	type NextUp,
+	shortMonthLabel,
+} from "../lib/agenda-time.js";
+import { calendarColorClasses } from "../lib/calendar-color.js";
+import { cn } from "../lib/cn.js";
+import type { AgendaDensity } from "./agenda-flow.js";
+import { segmentClassName } from "./calendar-toolbar.js";
+import type {
+	CalendarColorId,
+	CalendarDay,
+	CalendarDescriptor,
+} from "./calendar-types.js";
+
+/* ------------------------------------------------------------------ */
+/* Density                                                             */
+/* ------------------------------------------------------------------ */
+
+const DENSITY_OPTIONS: {
+	value: AgendaDensity;
+	label: string;
+	Icon: LucideIcon;
+}[] = [
+	{ value: "dots", label: "Dots", Icon: MoreHorizontal },
+	{ value: "pills", label: "Rows", Icon: AlignJustify },
+	{ value: "detail", label: "Detail", Icon: LayoutList },
+];
+
+export interface AgendaDensityControlProps {
+	value: AgendaDensity;
+	onChange: (density: AgendaDensity) => void;
+	/** Where the words do not fit — a phone's bottom bar. */
+	icons?: boolean;
+	touch?: boolean;
+	className?: string;
+}
+
+/**
+ * Three steps, not two. A list can be read as a month of coloured dots or as a
+ * stack of cards, and which one is right depends on the day and the person, so
+ * the control is on screen at every width rather than in a settings page.
+ */
+export function AgendaDensityControl({
+	value,
+	onChange,
+	icons,
+	touch,
+	className,
+}: AgendaDensityControlProps) {
+	const group = useId();
+	return (
+		<fieldset className={cn("inline-flex items-center gap-0.5", className)}>
+			<legend className="sr-only">Agenda density</legend>
+			{DENSITY_OPTIONS.map((option) => (
+				<label
+					key={option.value}
+					aria-label={option.label}
+					className={cn(
+						segmentClassName(value === option.value),
+						touch ? "min-h-11 flex-1 text-sm" : "h-7 text-xs",
+					)}
+				>
+					<input
+						type="radio"
+						name={group}
+						value={option.value}
+						checked={value === option.value}
+						onChange={() => onChange(option.value)}
+						className="sr-only"
+					/>
+					{icons ? <option.Icon className="size-4" /> : option.label}
+				</label>
+			))}
+		</fieldset>
+	);
+}
+
+/* ------------------------------------------------------------------ */
+/* What's next                                                         */
+/* ------------------------------------------------------------------ */
+
+export interface NextUpCardProps {
+	nextUp: NextUp;
+	/** Whose hue each named event is drawn with. */
+	calendars: readonly CalendarDescriptor[];
+	today: string;
+	onSelectEvent: (eventId: string) => void;
+	onGoTo: (date: string) => void;
+	touch?: boolean;
+	className?: string;
+}
+
+/**
+ * The one question a grid answers badly. "What is next" out of a time grid
+ * means finding the now-line and reading downward past the empty rows; here it
+ * is a sentence, and the free time after it is part of the same sentence.
+ */
+export function NextUpCard({
+	nextUp,
+	calendars,
+	today,
+	onSelectEvent,
+	onGoTo,
+	touch,
+	className,
+}: NextUpCardProps) {
+	const { running, next, minutesUntilNext, after, free } = nextUp;
+	const colorOf = useMemo(() => {
+		const byId = new Map(
+			calendars.map((calendar) => [calendar.id, calendar.color]),
+		);
+		return (calendarId: string): CalendarColorId =>
+			byId.get(calendarId) ?? "cal-1";
+	}, [calendars]);
+
+	return (
+		<section
+			className={cn(
+				"flex flex-col gap-2 rounded-lg border border-line bg-surface-raised p-3",
+				className,
+			)}
+		>
+			{running.length > 0 && (
+				<div className="flex flex-col gap-1">
+					<Caption icon={<Radio className="size-3 text-danger" />}>Now</Caption>
+					{running.map((event) => (
+						<EventButton
+							key={event.id}
+							eventId={event.id}
+							title={event.title}
+							color={colorOf(event.calendarId)}
+							meta={`until ${event.end.slice(11, 16)}`}
+							onSelect={onSelectEvent}
+							touch={touch}
+						/>
+					))}
+				</div>
+			)}
+
+			<div className="flex flex-col gap-1">
+				<Caption icon={<Clock className="size-3" />}>
+					{next ? `Next · in ${formatSpan(minutesUntilNext)}` : "Next"}
+				</Caption>
+				{next ? (
+					<EventButton
+						eventId={next.id}
+						title={next.title}
+						color={colorOf(next.calendarId)}
+						meta={`${dayPrefix(next.start.slice(0, 10), today)}${next.start.slice(
+							11,
+							16,
+						)}${next.location === "" ? "" : ` · ${next.location}`}`}
+						onSelect={onSelectEvent}
+						touch={touch}
+					/>
+				) : (
+					<p className="text-sm text-fg-muted">Nothing else booked.</p>
+				)}
+				{after && (
+					<p className="truncate pl-1 text-2xs text-fg-subtle">
+						then {after.title} · {dayPrefix(after.start.slice(0, 10), today)}
+						{after.start.slice(11, 16)}
+					</p>
+				)}
+			</div>
+
+			{free && (
+				<button
+					type="button"
+					onClick={() => onGoTo(free.date)}
+					className={cn(
+						"flex items-center gap-2 rounded-md border border-dashed border-accent-2 bg-accent-2-soft/40 px-2 text-left text-accent-2 outline-none transition-colors hover:bg-accent-2-soft focus-visible:ring-2 focus-visible:ring-ring",
+						touch ? "min-h-11" : "min-h-8",
+					)}
+				>
+					<Sun className="size-3.5 shrink-0" />
+					<span className="text-xs font-medium">
+						{formatSpan(free.minutes)} free
+					</span>
+					<span className="text-2xs tabular-nums opacity-80">
+						{dayPrefix(free.date, today)}
+						{formatMinute(free.startMinute)} – {formatMinute(free.endMinute)}
+					</span>
+				</button>
+			)}
+		</section>
+	);
+}
+
+function Caption({ icon, children }: { icon: ReactNode; children: ReactNode }) {
+	return (
+		<h3 className="flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wider text-fg-subtle">
+			{icon}
+			{children}
+		</h3>
+	);
+}
+
+function EventButton({
+	eventId,
+	title,
+	color,
+	meta,
+	onSelect,
+	touch,
+}: {
+	eventId: string;
+	title: string;
+	color: CalendarColorId;
+	meta: string;
+	onSelect: (eventId: string) => void;
+	touch?: boolean;
+}) {
+	const hue = calendarColorClasses(color);
+	return (
+		<button
+			type="button"
+			onClick={() => onSelect(eventId)}
+			className={cn(
+				"flex w-full items-center gap-2 rounded-md border-l-2 px-2 py-1 text-left outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+				hue.soft,
+				hue.text,
+				hue.rail,
+				touch && "min-h-12",
+			)}
+		>
+			<span className="min-w-0 flex-1">
+				<span className="block truncate text-sm font-medium">{title}</span>
+				<span className="block truncate text-2xs opacity-80">{meta}</span>
+			</span>
+		</button>
+	);
+}
+
+function dayPrefix(date: string, today: string): string {
+	if (date === today) return "";
+	if (date === addDays(today, 1)) return "tomorrow · ";
+	return `${formatShortDay(date)} · `;
+}
+
+/* ------------------------------------------------------------------ */
+/* Free time                                                           */
+/* ------------------------------------------------------------------ */
+
+export interface FreeTimeListProps {
+	stretches: FreeStretch[];
+	today: string;
+	onPick: (stretch: FreeStretch) => void;
+	touch?: boolean;
+}
+
+/** Empty time, listed like anything else that is on the calendar. */
+export function FreeTimeList({
+	stretches,
+	today,
+	onPick,
+	touch,
+}: FreeTimeListProps) {
+	return (
+		<section className="flex flex-col gap-1.5">
+			<Caption icon={<CalendarOff className="size-3" />}>Open time</Caption>
+			{stretches.length === 0 ? (
+				<p className="text-xs text-fg-subtle">
+					Nothing open in the days on screen.
+				</p>
+			) : (
+				stretches.map((stretch) => (
+					<button
+						key={`${stretch.date}_${stretch.startMinute}`}
+						type="button"
+						onClick={() => onPick(stretch)}
+						className={cn(
+							"flex items-center gap-2 rounded-md border border-line px-2 text-left outline-none transition-colors hover:border-accent hover:text-accent focus-visible:ring-2 focus-visible:ring-ring",
+							touch ? "min-h-11" : "min-h-8",
+						)}
+					>
+						<span className="text-xs font-medium text-fg">
+							{formatSpan(stretch.minutes)}
+						</span>
+						<span className="min-w-0 flex-1 truncate text-2xs text-fg-subtle">
+							{stretch.date === today ? "today" : formatShortDay(stretch.date)}{" "}
+							· {formatMinute(stretch.startMinute)} –{" "}
+							{formatMinute(stretch.endMinute)}
+						</span>
+					</button>
+				))
+			)}
+		</section>
+	);
+}
+
+/* ------------------------------------------------------------------ */
+/* Where you are in the strip                                          */
+/* ------------------------------------------------------------------ */
+
+export interface PositionMapProps {
+	/** The month to draw, and the one after it. */
+	anchorDate: string;
+	visibleDate: string;
+	today: string;
+	dayOf: (date: string) => CalendarDay;
+	onGoTo: (date: string) => void;
+	className?: string;
+}
+
+/**
+ * Two months as a heat strip: how full each day is, and where the strip is
+ * currently parked. It is a scrollbar with meaning — the empty days are as
+ * legible as the full ones, which is the whole argument in miniature.
+ */
+export function PositionMap({
+	anchorDate,
+	visibleDate,
+	today,
+	dayOf,
+	onGoTo,
+	className,
+}: PositionMapProps) {
+	const months = [
+		monthStart(anchorDate),
+		monthStart(addDays(monthEnd(anchorDate), 1)),
+	];
+	const span = DAY_END_MINUTE - DAY_START_MINUTE;
+
+	return (
+		<div className={cn("flex flex-col gap-3", className)}>
+			{months.map((first) => (
+				<section key={first} className="flex flex-col gap-1">
+					<h3 className="px-row-inset text-2xs font-semibold uppercase tracking-wider text-fg-subtle">
+						{shortMonthLabel(first)}
+					</h3>
+					<div className="grid grid-cols-7 gap-0.5 px-row-inset">
+						{leadingBlanks(first).map((key) => (
+							<span key={key} />
+						))}
+						{datesBetween(first, monthEnd(first)).map((date) => {
+							const day = dayOf(date);
+							const fill = Math.min(1, day.busyMinutes / span);
+							return (
+								<button
+									key={date}
+									type="button"
+									onClick={() => onGoTo(date)}
+									className={cn(
+										"relative flex h-6 items-center justify-center rounded-sm text-2xs tabular-nums outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+										date === visibleDate
+											? "bg-surface-raised font-semibold text-fg ring-1 ring-line-strong"
+											: "text-fg-muted hover:bg-surface-sunken",
+										date === today && "font-semibold text-accent",
+									)}
+								>
+									{Number(date.slice(8))}
+									{fill > 0 && (
+										<span
+											aria-hidden
+											className="absolute inset-x-1 bottom-0.5 h-0.5 rounded-full bg-fg-subtle"
+											style={{ opacity: 0.35 + fill * 0.65 }}
+										/>
+									)}
+									{day.conflicts.length > 0 && (
+										<span
+											aria-hidden
+											className="absolute right-0.5 top-0.5 size-1 rounded-full bg-warning"
+										/>
+									)}
+								</button>
+							);
+						})}
+					</div>
+				</section>
+			))}
+		</div>
+	);
+}
+
+function monthStart(date: string): string {
+	return `${date.slice(0, 8)}01`;
+}
+
+function monthEnd(date: string): string {
+	const [year, month] = date.split("-").map(Number);
+	const last = new Date(Date.UTC(year, month, 0));
+	return last.toISOString().slice(0, 10);
+}
+
+/** Monday-first padding cells before the first of the month. */
+function leadingBlanks(first: string): string[] {
+	const [year, month, day] = first.split("-").map(Number);
+	const weekday = new Date(year, month - 1, day).getDay();
+	const count = (weekday + 6) % 7;
+	return Array.from({ length: count }, (_, index) => `blank_${first}_${index}`);
+}

package/src/components/calendar-event-chip.tsx

@@ -1,4 +1,5 @@
 import { Globe, Mail, Repeat } from "lucide-react";
+import type { ReactNode } from "react";
 import { calendarColorClasses } from "../lib/calendar-color.js";
 import { cn } from "../lib/cn.js";
 import type { Density } from "./app-shell-types.js";
@@ -27,6 +28,16 @@ export interface CalendarEventChipProps {
 	zoneCertainty: ZoneCertainty;
 	selected: boolean;
 	onClick?: () => void;
+	/**
+	 * Rendered inside the control but outside the coloured body, ahead of it —
+	 * the agenda's time gutter, which has to line up down a whole day and so
+	 * cannot sit inside a block whose width follows the title.
+	 */
+	leading?: ReactNode;
+	/** Rendered at the far end of the title line — a length, a count. */
+	trailing?: ReactNode;
+	/** A second line under the title: where it is, who is coming, whose calendar. */
+	detail?: ReactNode;
 }
 
 /**
@@ -54,27 +65,63 @@ export function CalendarEventChip({
 	zoneCertainty,
 	selected,
 	onClick,
+	leading,
+	trailing,
+	detail,
 }: CalendarEventChipProps) {
 	const hue = calendarColorClasses(color);
 	const isColumn = layout === "column";
 	const isCompact = density === "compact";
 	const declined = rsvp === "declined";
 	const provisional = rsvp === "tentative" || status === "tentative";
+	const stacked = isColumn || detail !== undefined;
 
-	return (
-		<button
-			type="button"
-			onClick={onClick}
-			aria-pressed={selected}
+	const head = (
+		<span
 			className={cn(
-				"group flex w-full min-w-0 overflow-hidden text-left outline-none transition-colors",
-				"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-surface",
+				"flex min-w-0 items-center gap-1",
+				isColumn && "w-full",
+				declined && "line-through",
+			)}
+		>
+			{timeText !== "" && (
+				<span className="shrink-0 tabular-nums opacity-80">{timeText}</span>
+			)}
+			<span className="truncate font-medium">{title}</span>
+		</span>
+	);
+
+	const marks = (hasThread || isRecurring || zoneCertainty === "ambiguous") && (
+		<span
+			className={cn(
+				"flex shrink-0 items-center gap-1",
+				isColumn && "mt-0.5",
+				!isColumn && trailing === undefined && "ml-auto",
+			)}
+		>
+			{isRecurring && <Repeat className="size-2.5" aria-label="Repeats" />}
+			{hasThread && <Mail className="size-2.5" aria-label="From mail" />}
+			{zoneCertainty === "ambiguous" && (
+				<Globe className="size-2.5 text-warning" aria-label="Unclear zone" />
+			)}
+		</span>
+	);
+
+	const tail = trailing !== undefined && (
+		<span className={cn("shrink-0 opacity-80", !isColumn && "ml-auto")}>
+			{trailing}
+		</span>
+	);
+
+	const body = (
+		<span
+			className={cn(
+				"flex min-w-0 flex-1 overflow-hidden rounded-sm border-l-2 px-1.5 py-0.5",
 				hue.soft,
 				hue.text,
-				isColumn
-					? "h-full flex-col rounded-sm border-l-2 px-1.5 py-0.5"
-					: "items-center gap-1.5 rounded-sm border-l-2 px-1.5 py-0.5",
 				hue.rail,
+				isColumn && "h-full",
+				stacked ? "flex-col" : "items-center gap-1.5",
 				provisional && "border-y border-r border-dashed",
 				provisional && hue.border,
 				declined && "opacity-60",
@@ -82,35 +129,37 @@ export function CalendarEventChip({
 				isCompact ? "text-2xs" : "text-xs",
 			)}
 		>
-			<span
-				className={cn(
-					"flex min-w-0 items-center gap-1",
-					isColumn && "w-full",
-					declined && "line-through",
-				)}
-			>
-				{timeText !== "" && (
-					<span className="shrink-0 tabular-nums opacity-80">{timeText}</span>
-				)}
-				<span className="truncate font-medium">{title}</span>
-			</span>
-			{(hasThread || isRecurring || zoneCertainty === "ambiguous") && (
-				<span
-					className={cn(
-						"flex shrink-0 items-center gap-1",
-						isColumn ? "mt-0.5" : "ml-auto",
-					)}
-				>
-					{isRecurring && <Repeat className="size-2.5" aria-label="Repeats" />}
-					{hasThread && <Mail className="size-2.5" aria-label="From mail" />}
-					{zoneCertainty === "ambiguous" && (
-						<Globe
-							className="size-2.5 text-warning"
-							aria-label="Unclear zone"
-						/>
-					)}
+			{isColumn || detail === undefined ? (
+				<>
+					{head}
+					{marks}
+					{tail}
+				</>
+			) : (
+				<span className="flex min-w-0 items-center gap-1.5">
+					{head}
+					{marks}
+					{tail}
 				</span>
 			)}
+			{detail}
+		</span>
+	);
+
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			aria-pressed={selected}
+			className={cn(
+				"group flex w-full min-w-0 text-left outline-none transition-colors",
+				"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-surface",
+				isColumn ? "h-full" : "items-start",
+				leading !== undefined && "gap-2",
+			)}
+		>
+			{leading}
+			{body}
 		</button>
 	);
 }

package/src/components/calendar-types.ts

@@ -82,6 +82,91 @@ export interface CalendarEventData {
 	status: "confirmed" | "tentative";
 }
 
+/**
+ * One day, with everything on it already sorted and measured. The surfaces that
+ * render a day take this rather than a flat event list, so the arithmetic is
+ * done once by whoever owns the events.
+ */
+export interface CalendarDay {
+	/** `YYYY-MM-DD`. */
+	date: string;
+	weekdayLabel: string;
+	dayNumber: number;
+	isToday: boolean;
+	/** Ascending by start. */
+	timed: CalendarEventData[];
+	allDay: CalendarEventData[];
+	/** Minutes of the day covered by at least one timed event. */
+	busyMinutes: number;
+	/**
+	 * Every pile-up on the day: one group per event that something else runs
+	 * into, holding that event and everything overlapping it. Members all meet
+	 * the event the group is built around, not necessarily each other — which is
+	 * what a grid has to lay out. Empty when the day is clean.
+	 */
+	conflicts: string[][];
+}
+
+/** An empty slot a reader picked, wherever they picked it — a grid, a list. */
+export interface CalendarSlotPick {
+	/** `YYYY-MM-DD`. */
+	date: string;
+	/** `HH:MM`, empty when the pick landed in the all-day band. */
+	startTime: string;
+	endTime: string;
+	allDay: boolean;
+}
+
+/** One reading of a phrase the parser could not settle on its own. */
+export interface PhraseChoiceOption {
+	id: string;
+	label: string;
+	/** Empty leaves the reading from the rest of the sentence alone. */
+	date: string;
+	startTime: string;
+}
+
+export interface PhraseChoice {
+	id: string;
+	question: string;
+	/** The words the question is about. */
+	source: string;
+	options: PhraseChoiceOption[];
+	chosenId: string;
+}
+
+/**
+ * What a reader made of a typed sentence, with the words each reading came
+ * from. Every field is presentational: the composer renders it and never parses
+ * anything itself, so a parser can be swapped without touching the surface.
+ */
+export interface AgendaParse {
+	title: string;
+	date: string;
+	dateText: string;
+	startTime: string;
+	startTimeText: string;
+	endTime: string;
+	durationMinutes: number;
+	durationText: string;
+	attendees: string[];
+	attendeesText: string;
+	location: string;
+	locationText: string;
+	/** Human-readable rule, empty for a one-off. */
+	repeat: string;
+	repeatText: string;
+	/** Defaults the reader applied on its own authority. */
+	assumptions: string[];
+	/** What the sentence never said. */
+	unresolved: string[];
+	/** What the sentence said two ways. */
+	choices: PhraseChoice[];
+}
+
+/** Choice id → option id, as answered by the person typing. */
+export type ChoicePicks = Readonly<Record<string, string>>;
+
 /**
  * One clock a zoneless time could be on. Present only when the source genuinely
  * did not say which, and the reader is the one who settles it.