@remit/ui 0.0.155 → 0.0.157

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-content.tsx

@@ -0,0 +1,102 @@
+import { Globe, Mail, Repeat } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn.js";
+import type { RsvpState, ZoneCertainty } from "./calendar-types.js";
+
+export interface CalendarEventChipContentProps {
+	title: string;
+	/** Rendered ahead of the title; empty for an all-day entry. */
+	timeText: string;
+	/**
+	 * `row` is the horizontal pill of the all-day band and the month grid.
+	 * `column` is the block that fills its slot in a time grid.
+	 */
+	layout: "row" | "column";
+	rsvp: RsvpState;
+	/** Carries the mail mark that says this event has a thread behind it. */
+	hasThread: boolean;
+	isRecurring: boolean;
+	zoneCertainty: ZoneCertainty;
+	/** 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;
+}
+
+/**
+ * What is written inside one event: the time, the title, the marks, and
+ * whatever the surface adds beside them. Every surface that draws an event
+ * draws this — `CalendarEventChip` inside its own button, `CalendarGrid` inside
+ * the element its engine built — so an event reads the same wherever it lands.
+ */
+export function CalendarEventChipContent({
+	title,
+	timeText,
+	layout,
+	rsvp,
+	hasThread,
+	isRecurring,
+	zoneCertainty,
+	trailing,
+	detail,
+}: CalendarEventChipContentProps) {
+	const isColumn = layout === "column";
+	const zoneAmbiguous = zoneCertainty === "ambiguous";
+	const stacked = !isColumn && detail !== undefined;
+
+	const head = (
+		<span
+			className={cn(
+				"flex min-w-0 items-center gap-1",
+				isColumn && "w-full",
+				rsvp === "declined" && "line-through",
+			)}
+		>
+			{timeText !== "" && (
+				<span className="shrink-0 tabular-nums opacity-80">{timeText}</span>
+			)}
+			<span className="truncate font-medium">{title}</span>
+		</span>
+	);
+
+	const marks = (isRecurring || hasThread || zoneAmbiguous) && (
+		<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" />}
+			{zoneAmbiguous && (
+				<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>
+	);
+
+	return (
+		<>
+			{stacked ? (
+				<span className="flex min-w-0 items-center gap-1.5">
+					{head}
+					{marks}
+					{tail}
+				</span>
+			) : (
+				<>
+					{head}
+					{marks}
+					{tail}
+				</>
+			)}
+			{detail}
+		</>
+	);
+}

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

@@ -7,13 +7,11 @@ import { calendarColorIds } from "./calendar-types.js";
  * picker, a day column we draw ourselves. Colour says which calendar; shape and
  * mark say everything else, so an event never depends on hue alone to be read.
  *
- * Option A's grid is FullCalendar, which renders the element itself and accepts
- * only a class string and the content inside it, so that one surface restates
- * this shell rather than mounting the component. The two are held to the same
- * values — hue, the dashed box for a provisional event, the dimming for a
- * declined one, the mark size. What the grid cannot take from here is the
- * element: no `aria-pressed`, no focus ring of ours, and a column too short for
- * the second line this chip puts its marks on.
+ * `CalendarGrid` renders the element itself and accepts only a class string and
+ * the content inside it, so that one surface does not mount this component. It
+ * is still the same chip: both draw the box from `calendarEventBodyClasses` and
+ * what is written in it from `CalendarEventChipContent`. What the grid cannot
+ * take from here is the element — no `aria-pressed`, no leading slot.
  */
 const meta: Meta<typeof CalendarEventChip> = {
 	title: "Calendar/Event chip",

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

@@ -1,7 +1,8 @@
-import { Globe, Mail, Repeat } from "lucide-react";
-import { calendarColorClasses } from "../lib/calendar-color.js";
+import type { ReactNode } from "react";
+import { calendarEventBodyClasses } from "../lib/calendar-event-shell.js";
 import { cn } from "../lib/cn.js";
 import type { Density } from "./app-shell-types.js";
+import { CalendarEventChipContent } from "./calendar-event-chip-content.js";
 import type {
 	CalendarColorId,
 	RsvpState,
@@ -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;
 }
 
 /**
@@ -35,11 +46,11 @@ export interface CalendarEventChipProps {
  * carries; the RSVP and the zone ride on shape and mark instead, so a declined
  * event in a green calendar still reads as green and as declined.
  *
- * A FullCalendar grid is the one surface that does not use it — the library
- * renders the event's element itself and takes only a class string and the
- * content inside, so `calendar-grid.tsx` restates this shell there. Every value
- * that can be shared is the same on both sides; what cannot cross is the
- * element itself, and with it `aria-pressed` and the focus ring.
+ * `CalendarGrid` is the one surface that does not render this component — its
+ * engine builds the event's element itself. It draws the same event out of the
+ * same two pieces: `calendarEventBodyClasses` for the box and
+ * `CalendarEventChipContent` for what is written in it. What cannot cross is
+ * the element, and with it `aria-pressed` and the leading slot.
  */
 export function CalendarEventChip({
 	title,
@@ -54,12 +65,11 @@ 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";
 
 	return (
 		<button
@@ -67,50 +77,40 @@ export function CalendarEventChip({
 			onClick={onClick}
 			aria-pressed={selected}
 			className={cn(
-				"group flex w-full min-w-0 overflow-hidden text-left outline-none transition-colors",
+				"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",
-				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,
-				provisional && "border-y border-r border-dashed",
-				provisional && hue.border,
-				declined && "opacity-60",
-				selected && "ring-2 ring-ring",
-				isCompact ? "text-2xs" : "text-xs",
+				isColumn ? "h-full" : "items-start",
+				leading !== undefined && "gap-2",
 			)}
 		>
+			{leading}
 			<span
 				className={cn(
-					"flex min-w-0 items-center gap-1",
-					isColumn && "w-full",
-					declined && "line-through",
+					calendarEventBodyClasses({
+						color,
+						layout,
+						density,
+						rsvp,
+						status,
+						selected,
+						stacked: detail !== undefined,
+					}),
+					"flex-1",
+					isColumn && "h-full",
 				)}
 			>
-				{timeText !== "" && (
-					<span className="shrink-0 tabular-nums opacity-80">{timeText}</span>
-				)}
-				<span className="truncate font-medium">{title}</span>
+				<CalendarEventChipContent
+					title={title}
+					timeText={timeText}
+					layout={layout}
+					rsvp={rsvp}
+					hasThread={hasThread}
+					isRecurring={isRecurring}
+					zoneCertainty={zoneCertainty}
+					trailing={trailing}
+					detail={detail}
+				/>
 			</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"
-						/>
-					)}
-				</span>
-			)}
 		</button>
 	);
 }