feat(admission): add scheduled group access

apps/web/src/components/admin-modal-form.tsx

@@ -29,6 +29,7 @@ export function AdminModalForm({
   const titleId = useId();
   const descriptionId = useId();
   const [submitting, setSubmitting] = useState(false);
+  const [dialogGeneration, setDialogGeneration] = useState(0);
   return (
     <>
       <button
@@ -36,7 +37,10 @@ export function AdminModalForm({
         aria-pressed={triggerPressed}
         className={triggerClassName ?? "font-mono text-[10px] font-bold uppercase underline underline-offset-4"}
         disabled={submitting}
-        onClick={() => dialogRef.current?.showModal()}
+        onClick={() => {
+          setDialogGeneration((generation) => generation + 1);
+          dialogRef.current?.showModal();
+        }}
         type="button"
       >
         {triggerLabel}
@@ -44,7 +48,7 @@ export function AdminModalForm({
       <dialog
         aria-describedby={descriptionId}
         aria-labelledby={titleId}
-        className="admin-modal m-auto w-[min(92vw,36rem)] border border-ink bg-panel p-0 text-ink shadow-[10px_10px_0_var(--color-shadow)] backdrop:bg-ink/70"
+        className="admin-modal m-auto max-h-[90vh] w-[min(92vw,36rem)] overflow-y-auto border border-ink bg-panel p-0 text-ink shadow-[10px_10px_0_var(--color-shadow)] backdrop:bg-ink/70"
         onCancel={(event) => { if (submitting) event.preventDefault(); }}
         ref={dialogRef}
       >
@@ -52,7 +56,7 @@ export function AdminModalForm({
           <p className="font-mono text-[9px] font-bold uppercase tracking-[0.2em] text-accent">Confirm operation</p>
           <h2 className="mt-3 font-display text-3xl font-black uppercase" id={titleId}>{title}</h2>
           <p className="mt-3 text-sm leading-6 text-muted" id={descriptionId}>{description}</p>
-          {children && <div className="mt-6">{children}</div>}
+          {children && <div className="mt-6" key={dialogGeneration}>{children}</div>}
           <ModalActions dialogRef={dialogRef} intent={intent} onPendingChange={setSubmitting} submitLabel={submitLabel} />
         </form>
       </dialog>

apps/web/src/components/group-schedule-editor.test.tsx

@@ -0,0 +1,55 @@
+// @vitest-environment jsdom
+
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { beforeEach, describe, expect, it } from "vitest";
+import { AdminModalForm } from "./admin-modal-form";
+import { GroupScheduleEditor, GroupScheduleSummary } from "./group-schedule-editor";
+
+beforeEach(() => {
+  HTMLDialogElement.prototype.showModal = function showModal() { this.open = true; };
+  HTMLDialogElement.prototype.close = function close() {
+    this.open = false;
+    this.dispatchEvent(new Event("close"));
+  };
+});
+
+describe("GroupScheduleEditor", () => {
+  it("shows UTC authority, browser-local equivalents, and repeatable windows", () => {
+    const { container } = render(<GroupScheduleEditor windows={[{
+      startMinuteOfWeek: 6960,
+      endMinuteOfWeek: 7199,
+    }]} />);
+
+    expect(screen.getByText(/stored and enforced in UTC/i)).toBeTruthy();
+    expect(screen.getAllByRole("group", { name: /access window/i })).toHaveLength(1);
+    expect(container.querySelectorAll('input[name="startMinuteOfWeek"]')).toHaveLength(1);
+
+    fireEvent.click(screen.getByRole("button", { name: /add window/i }));
+    expect(screen.getAllByRole("group", { name: /access window/i })).toHaveLength(2);
+    expect(container.querySelectorAll('input[name="startMinuteOfWeek"]')).toHaveLength(2);
+
+    fireEvent.click(screen.getAllByRole("button", { name: /remove window/i })[0]!);
+    expect(screen.getAllByRole("group", { name: /access window/i })).toHaveLength(1);
+  });
+
+  it("discards an abandoned draft when its confirmation dialog is reopened", () => {
+    render(<AdminModalForm action={async () => undefined} description="Confirm schedule." submitLabel="Save schedule" title="Schedule group" triggerLabel="Edit schedule"><GroupScheduleEditor windows={[{ startMinuteOfWeek: 6960, endMinuteOfWeek: 7200 }]} /></AdminModalForm>);
+    fireEvent.click(screen.getByRole("button", { name: "Edit schedule" }));
+    const dialog = screen.getByRole("dialog");
+    fireEvent.click(within(dialog).getByRole("button", { name: "Add window" }));
+    expect(within(dialog).getAllByRole("group", { name: /access window/i })).toHaveLength(2);
+    fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+
+    fireEvent.click(screen.getByRole("button", { name: "Edit schedule" }));
+    expect(within(dialog).getAllByRole("group", { name: /access window/i })).toHaveLength(1);
+  });
+
+  it("summarizes an unrestricted group and configured local equivalents", () => {
+    const { container, rerender } = render(<GroupScheduleSummary windows={[]} />);
+    expect(container.textContent).toMatch(/no schedule restrictions/i);
+
+    rerender(<GroupScheduleSummary windows={[{ startMinuteOfWeek: 6960, endMinuteOfWeek: 7199 }]} />);
+    expect(container.textContent).toMatch(/current browser-local equivalent/i);
+    expect(container.textContent).toContain("Friday 20:00 UTC");
+  });
+});

apps/web/src/components/group-schedule-editor.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { useRef, useState, useSyncExternalStore } from "react";
+import {
+  formatWeeklyMinute,
+  localWindowToUtc,
+  utcWindowToLocal,
+  type WeeklyAccessWindow,
+} from "@/lib/group-schedule";
+
+const DAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] as const;
+
+interface EditableWindow extends WeeklyAccessWindow {
+  key: number;
+}
+
+function minuteParts(minuteOfWeek: number) {
+  const day = Math.floor(minuteOfWeek / 1440);
+  const minute = minuteOfWeek % 1440;
+  return {
+    day,
+    time: `${String(Math.floor(minute / 60)).padStart(2, "0")}:${String(minute % 60).padStart(2, "0")}`,
+  };
+}
+
+function withDay(minuteOfWeek: number, day: number) {
+  return day * 1440 + (minuteOfWeek % 1440);
+}
+
+function withTime(minuteOfWeek: number, time: string) {
+  const [hour, minute] = time.split(":").map(Number);
+  return Math.floor(minuteOfWeek / 1440) * 1440 + (hour ?? 0) * 60 + (minute ?? 0);
+}
+
+const subscribeToBrowserClock = () => () => undefined;
+
+function useBrowserClock() {
+  const offset = useSyncExternalStore(
+    subscribeToBrowserClock,
+    () => new Date().getTimezoneOffset(),
+    () => 0,
+  );
+  const zone = useSyncExternalStore(
+    subscribeToBrowserClock,
+    () => Intl.DateTimeFormat().resolvedOptions().timeZone || "browser local time",
+    () => "UTC",
+  );
+  return { offset, zone };
+}
+
+export function GroupScheduleEditor({ windows }: { windows: WeeklyAccessWindow[] }) {
+  const { offset, zone } = useBrowserClock();
+  const [editable, setEditable] = useState<EditableWindow[]>(
+    windows.map((window, key) => ({ ...window, key })),
+  );
+  const nextKey = useRef(windows.length);
+
+  function update(key: number, field: "startMinuteOfWeek" | "endMinuteOfWeek", value: number) {
+    setEditable((current) => current.map((window) => {
+      if (window.key !== key) return window;
+      const local = { ...utcWindowToLocal(window, offset), [field]: value };
+      return { ...localWindowToUtc(local, offset), key };
+    }));
+  }
+
+  return (
+    <div className="space-y-5">
+      <p className="text-sm leading-6 text-muted">
+        Schedules are stored and enforced in UTC. The editor shows the current browser-local equivalent in <strong className="text-ink">{zone}</strong>; it may shift when your local daylight-saving offset changes.
+      </p>
+      {!editable.length && <p className="border-l-2 border-signal pl-4 text-sm">No windows means no schedule restrictions while Minecraft access is enabled.</p>}
+      {editable.map((window, index) => {
+        const local = utcWindowToLocal(window, offset);
+        const start = minuteParts(local.startMinuteOfWeek);
+        const end = minuteParts(local.endMinuteOfWeek);
+        return (
+          <fieldset aria-label={`Access window ${index + 1}`} className="border border-line p-4" key={window.key}>
+            <legend className="px-2 font-mono text-[10px] font-bold uppercase tracking-wider">Access window {index + 1}</legend>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <ScheduleBoundary day={start.day} label="Starts" onDay={(day) => update(window.key, "startMinuteOfWeek", withDay(local.startMinuteOfWeek, day))} onTime={(time) => update(window.key, "startMinuteOfWeek", withTime(local.startMinuteOfWeek, time))} time={start.time} />
+              <ScheduleBoundary day={end.day} label="Ends (exclusive)" onDay={(day) => update(window.key, "endMinuteOfWeek", withDay(local.endMinuteOfWeek, day))} onTime={(time) => update(window.key, "endMinuteOfWeek", withTime(local.endMinuteOfWeek, time))} time={end.time} />
+            </div>
+            <input name="startMinuteOfWeek" type="hidden" value={window.startMinuteOfWeek} />
+            <input name="endMinuteOfWeek" type="hidden" value={window.endMinuteOfWeek} />
+            <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
+              <p className="font-mono text-[9px] uppercase text-muted">UTC: {formatWeeklyMinute(window.startMinuteOfWeek)}–{formatWeeklyMinute(window.endMinuteOfWeek)}</p>
+              <button className="font-mono text-[10px] font-bold uppercase text-accent underline underline-offset-4" onClick={() => setEditable((current) => current.filter((item) => item.key !== window.key))} type="button">Remove window {index + 1}</button>
+            </div>
+          </fieldset>
+        );
+      })}
+      <button
+        className="border border-ink px-4 py-2 font-mono text-[10px] font-bold uppercase tracking-wider disabled:cursor-not-allowed disabled:opacity-50"
+        disabled={editable.length >= 50}
+        onClick={() => {
+          const key = nextKey.current++;
+          setEditable((current) => [...current, {
+            key,
+            ...localWindowToUtc({
+              startMinuteOfWeek: 4 * 1440 + 20 * 60,
+              endMinuteOfWeek: 5 * 1440,
+            }, offset),
+          }]);
+        }}
+        type="button"
+      >Add window</button>
+    </div>
+  );
+}
+
+function ScheduleBoundary({ day, label, onDay, onTime, time }: {
+  day: number;
+  label: string;
+  onDay: (day: number) => void;
+  onTime: (time: string) => void;
+  time: string;
+}) {
+  return (
+    <div>
+      <span className="block text-xs font-bold">{label}</span>
+      <div className="mt-2 grid grid-cols-[1fr_auto] gap-2">
+        <label><span className="sr-only">{label} weekday</span><select className="w-full border border-line bg-canvas px-3 py-2 text-sm" onChange={(event) => onDay(Number(event.target.value))} value={day}>{DAYS.map((name, value) => <option key={name} value={value}>{name}</option>)}</select></label>
+        <label><span className="sr-only">{label} time</span><input className="border border-line bg-canvas px-3 py-2 text-sm" onChange={(event) => onTime(event.target.value)} required type="time" value={time} /></label>
+      </div>
+    </div>
+  );
+}
+
+export function GroupScheduleSummary({ windows }: { windows: WeeklyAccessWindow[] }) {
+  const { offset, zone } = useBrowserClock();
+  if (!windows.length) return <p className="text-sm text-muted">No schedule restrictions. Enabled members may attempt to join at any time.</p>;
+  return (
+    <div>
+      <p className="text-xs text-muted">Current browser-local equivalent: {zone}. UTC remains authoritative.</p>
+      <ol className="mt-3 space-y-2">
+        {windows.map((window, index) => {
+          const local = utcWindowToLocal(window, offset);
+          return <li className="border-l-2 border-accent pl-3 text-sm" key={`${window.startMinuteOfWeek}-${window.endMinuteOfWeek}-${index}`}><span className="font-bold">{formatWeeklyMinute(local.startMinuteOfWeek)}–{formatWeeklyMinute(local.endMinuteOfWeek)}</span><span className="mt-1 block font-mono text-[9px] uppercase text-muted">{formatWeeklyMinute(window.startMinuteOfWeek)} UTC–{formatWeeklyMinute(window.endMinuteOfWeek)} UTC</span></li>;
+        })}
+      </ol>
+    </div>
+  );
+}