Conference agenda

"use client";

import { useState } from "react";
import {
  EVENT_COLORS,
  Kloq,
  downloadICS,
  formatRange,
  initialsFor,
  parseInstant,
  useKloq,
  type EventPanelProps,
  type KloqView,
} from "kloq";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { SegmentedControl, SegmentedControlItem } from "@/components/ui/segmented-control";
import {
  Sheet,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
} from "@/components/ui/sheet";
import { Bar, Dot, Nav } from "../parts";
import { CONFERENCE, conferenceDays, programme } from "./data";

const LOCALE = "en-GB";
const CLOCK = { locale: LOCALE, hour12: false };
const VIEWS: { id: KloqView; label: string }[] = [
  { id: "agenda", label: "Programme" },
  { id: "day", label: "Timetable" },
];
// the details sheet takes the event panel's slot, so it opens from every view and replaces the editor
const SLOTS = { EventPanel: SessionSheet };

export default function ConferenceAgendaExample() {
  const [view, setView] = useState<KloqView>("agenda");
  const [date, setDate] = useState(() => conferenceDays()[0]);
  const [events] = useState(() => programme());

  return (
    <div className="@container flex flex-col">
      <div className="h-136">
        <Kloq
          view={view}
          onViewChange={setView}
          date={date}
          onDateChange={setDate}
          weekStartsOn={1}
          locale={LOCALE}
          hour12={false}
          dayStartHour={8}
          dayEndHour={19}
          workingHours={false}
          events={events}
          components={SLOTS}
          persistence={false}
          designMode={false}
          storage={false}
        >
          <Header />
        </Kloq>
      </div>
    </div>
  );
}

function Header() {
  const k = useKloq();
  return (
    <Bar>
      <span className="font-heading text-sm font-semibold tracking-tight text-foreground">{CONFERENCE.name}</span>
      <span>
        {CONFERENCE.city} · {CONFERENCE.days} days
      </span>
      <div className="ms-auto flex flex-wrap items-center gap-x-4 gap-y-2">
        {k.viewSetting === "day" && <Nav locale={LOCALE} />}
        <SegmentedControl size="sm" aria-label="View" value={k.viewSetting} onValueChange={k.switchView}>
          {VIEWS.map((v) => (
            <SegmentedControlItem key={v.id} value={v.id}>
              {v.label}
            </SegmentedControlItem>
          ))}
        </SegmentedControl>
      </div>
    </Bar>
  );
}

function SessionSheet({ event, onClose }: EventPanelProps) {
  // the slot unmounts on `onClose`; holding `open` here lets the sheet play its exit first
  const [open, setOpen] = useState(true);
  const session = event.source;
  const day = new Date(parseInstant(event.start)).toLocaleDateString(LOCALE, {
    weekday: "long",
    day: "numeric",
    month: "long",
  });

  return (
    <Sheet open={open} onOpenChange={setOpen} onOpenChangeComplete={(next) => !next && onClose()}>
      <SheetPopup>
        <SheetHeader>
          <p className="flex items-center gap-2 font-mono text-xs text-muted-foreground">
            <Dot className={EVENT_COLORS[event.color].bar} />
            {session.location}
          </p>
          <SheetTitle className="text-balance">{session.title}</SheetTitle>
          <SheetDescription className="font-mono text-xs tabular-nums">
            {day} · {formatRange(event.startMin, event.endMin, CLOCK)}
          </SheetDescription>
        </SheetHeader>
        <SheetPanel className="flex flex-col gap-4">
          {session.description && <p className="text-sm leading-relaxed text-pretty">{session.description}</p>}
          {session.attendees?.length ? (
            <ul className="flex flex-col gap-2">
              {session.attendees.map((a) => (
                <li key={a.email} className="flex items-center gap-2.5 text-sm">
                  <Avatar>
                    <AvatarFallback>{initialsFor(a)}</AvatarFallback>
                  </Avatar>
                  {a.name}
                </li>
              ))}
            </ul>
          ) : null}
        </SheetPanel>
        <SheetFooter>
          <Button variant="outline" onClick={() => downloadICS(session)}>
            Add to my calendar
          </Button>
        </SheetFooter>
      </SheetPopup>
    </Sheet>
  );
}

import { instantAt, resolveView, type CalEvent, type EventColor } from "kloq";

export const CONFERENCE = { name: "KinetiConf", city: "Berlin", days: 2 };

export const TRACKS: Record<string, EventColor> = {
  "Main stage": "blue",
  Workshops: "violet",
  Lab: "amber",
  Foyer: "emerald",
};

type Session = [
  day: number,
  at: string,
  minutes: number,
  track: keyof typeof TRACKS,
  title: string,
  speakers: string[],
  blurb?: string,
];

const SESSIONS: Session[] = [
  [0, "09:00", 30, "Foyer", "Registration & coffee", []],
  [0, "09:30", 45, "Main stage", "Opening keynote: a calendar is a physics engine", ["Maya Lindqvist"],
    "Why every drag in a calendar should be a spring, not a tween — and what that buys you at 120 Hz."],
  [0, "10:30", 45, "Main stage", "Time zones without a database", ["Tomasz Wierzbicki"],
    "Everything Intl gives you for free, and the three DST edge cases it does not."],
  [0, "10:30", 90, "Workshops", "Build a booking page in an hour", ["Priya Raman"],
    "Controlled events, a clipped day, read-only blocks and a confirm card. Laptops required."],
  [0, "12:00", 60, "Foyer", "Lunch", []],
  [0, "13:00", 45, "Main stage", "Drag physics: settle, don't snap", ["Jonah Reyes"],
    "Frame-by-frame through a move, a resize and a rejected commit springing home."],
  [0, "13:00", 45, "Lab", "Office hours: recurrence edge cases", ["Aiko Tanaka"],
    "Bring your worst RRULE. Fifth Fridays, leap days, UNTIL across a DST change."],
  [0, "14:00", 45, "Main stage", "Designing for compact density", ["Ines Ferreira"],
    "Forty-four pixels an hour: what a title, a time and a colour bar need to stay legible."],
  [0, "14:00", 90, "Workshops", "Slots: your own event block", ["Kwame Mensah"],
    "Swap the block, keep the engine. The data attributes the drag layer needs and nothing more."],
  [0, "15:30", 45, "Main stage", "Panel: what a calendar owes its users", ["Maya Lindqvist", "Jonah Reyes", "Ines Ferreira"]],
  [0, "16:30", 30, "Main stage", "Lightning talks", []],
  [1, "09:00", 30, "Foyer", "Coffee", []],
  [1, "09:30", 45, "Main stage", "Keynote: the command palette is the app", ["Lena Baptiste"],
    "Every action reachable from ⌘K, and how natural-language quick add falls out of that."],
  [1, "10:30", 45, "Lab", "ICS in the wild", ["Tomasz Wierzbicki"],
    "Feeds from six providers, and what each one gets wrong about folding and DTEND."],
  [1, "10:30", 90, "Workshops", "Accessible drag and drop", ["Aiko Tanaka"],
    "Roving tabindex, live regions and keyboard moves that mirror every pointer gesture."],
  [1, "12:00", 60, "Foyer", "Lunch", []],
  [1, "13:00", 45, "Main stage", "Optimistic sync that doesn't lie", ["Kwame Mensah"],
    "onCommit as a promise: what to show while the server thinks, and how to take it back."],
  [1, "14:00", 45, "Main stage", "Closing keynote", ["Maya Lindqvist"]],
  [1, "15:00", 60, "Foyer", "Farewell drinks", []],
];

const email = (name: string) => `${name.toLowerCase().replace(/\s+/g, ".")}@kineticonf.dev`;

/** The programme runs Wednesday and Thursday of the current week. */
export function conferenceDays(now = new Date()): Date[] {
  const w = resolveView("week", 1, now);
  return w.days.slice(2, 2 + CONFERENCE.days);
}

/** Every session is `readOnly`: a public programme is read, not edited. */
export function programme(now = new Date()): CalEvent[] {
  const w = resolveView("week", 1, now);
  return SESSIONS.map(([day, at, minutes, track, title, speakers, blurb], i) => {
    const [h, m] = at.split(":").map(Number);
    const startMin = h * 60 + m;
    return {
      id: `session-${i}`,
      title,
      description: blurb,
      location: track,
      start: instantAt(w, 2 + day, startMin),
      end: instantAt(w, 2 + day, startMin + minutes),
      color: TRACKS[track],
      readOnly: true,
      busy: track !== "Foyer",
      attendees: speakers.map((name) => ({ name, email: email(name) })),
    };
  });
}

"use client";

import type { ComponentProps } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { formatViewTitle, useIsClient, useKloq } from "kloq";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/** The strip an example hangs its controls and readouts on; same box as `Kloq.Toolbar`. */
export function Bar({
  edge = "bottom",
  className,
  ...props
}: ComponentProps<"div"> & { edge?: "top" | "bottom" }) {
  return (
    <div
      {...props}
      className={cn(
        "flex min-h-11 shrink-0 flex-wrap items-center gap-x-4 gap-y-2 px-4 py-2.5 font-mono text-xs text-muted-foreground",
        edge === "bottom" ? "border-b" : "border-t",
        className,
      )}
    />
  );
}

export function Dot({ live, className, ...props }: ComponentProps<"span"> & { live?: boolean }) {
  return (
    <span
      aria-hidden
      {...props}
      className={cn(
        "size-1.5 shrink-0 rounded-full",
        live ? "bg-brand motion-safe:animate-pulse" : "bg-border",
        className,
      )}
    />
  );
}

/** Previous / next / today for a calendar whose view is fixed. Must render inside `<Kloq>`. */
export function Nav({ locale }: { locale?: string }) {
  const k = useKloq();
  const isClient = useIsClient();
  return (
    <div className="flex min-w-0 items-center gap-1">
      <Button variant="ghost" size="icon-xs" aria-label="Previous" onClick={() => k.step(-1)}>
        <ChevronLeft />
      </Button>
      <Button variant="ghost" size="icon-xs" aria-label="Next" onClick={() => k.step(1)}>
        <ChevronRight />
      </Button>
      <Button variant="ghost" size="xs" className={cn(k.atToday && "text-muted-foreground")} onClick={k.goToday}>
        Today
      </Button>
      <span className="ms-1 truncate text-sm font-medium text-foreground tabular-nums sm:text-xs">
        {isClient ? formatViewTitle(k.view, locale, { short: k.narrow }) : null}
      </span>
    </div>
  );
}