@acms-subir/core 0.3.52 → 0.3.54

package/src/pages/members/events/[id].astro

@@ -3,22 +3,24 @@ import Layout from '../_Layout.astro';
 import EventForm from '../_EventForm.astro';
 import { getRepo } from '../../../lib/repo';
 import { currentUser } from '../../../server';
-import { ApiError } from '../../../lib/api';
+import { coded } from '../../../lib/api';
 import { readForm } from '../../../lib/forms/http';
 import { MEMBERS, memberEventsPath, bodyToText, isHost, updateEventRequest, withdrawEventRequest } from '../../../lib/calendar/requests';
 import { eventFormValues, eventRequestInput, memberEventFields, readEventForm } from '../../../lib/calendar/member-form';
 import { mergeEventDraft } from '../../../lib/drafts';
-import { failure, keepPrivate, notFound, redirectTo, signInRedirect } from '../_http';
+import { failure, keepPrivate, memberLanguage, notFound, redirectTo, signInRedirect } from '../_http';
+import { fill } from '../../../lib/live/words';
 
 // Edit a request, or suggest changes to a live event the member hosts: the
 // form starts from the event with any changes already waiting merged in.
 // A live event stays as it is until the team approves (updateEventRequest).
 if (!MEMBERS.enabled) return notFound();
 const user = await currentUser(Astro);
-if (!user) return signInRedirect(Astro.url);
+if (!user) return signInRedirect(Astro.url, Astro.locals);
 keepPrivate(Astro.response.headers);
 const repo = await getRepo(Astro.locals);
-const home = memberEventsPath();
+const { w, lang, here } = memberLanguage(Astro, await repo.getSettings());
+const home = here(memberEventsPath());
 const hooks = { url: Astro.url, locals: Astro.locals };
 const id = Astro.params.id ?? '';
 const event = await repo.getEvent(id);
@@ -40,12 +42,12 @@ if (Astro.request.method === 'POST') {
       await withdrawEventRequest(repo, user, id, hooks);
       return redirectTo(`${home}?withdrawn=1`);
     }
-    if (op !== 'update') throw new ApiError(400, 'That action isn’t available here.');
+    if (op !== 'update') throw coded(400, 'unavailable', 'That action isn’t available here.');
     values = readEventForm(form, fields);
     await updateEventRequest(repo, user, id, eventRequestInput(values), hooks);
     return redirectTo(`${home}?${live ? 'changes' : 'updated'}=1`);
   } catch (err) {
-    const f = failure(err);
+    const f = failure(err, w, lang);
     error = f.message;
     Astro.response.status = f.status;
   }
@@ -53,34 +55,33 @@ if (Astro.request.method === 'POST') {
 
 const r = event.request;
 const canRequest = user.can('events.request');
-const heading = live ? 'Suggest changes' : 'Edit your request';
-const lede = live
-  ? `“${event.title}” stays as it is on the site until the team approves your changes.`
-  : r?.state === 'declined' ? 'Make your changes and send it again.'
-  : r ? 'It’s waiting for approval. Saving sends the updated request.'
-  : 'It isn’t on the calendar yet. Send it to the team when it’s ready.';
+const heading = live ? w.suggestTitle : w.editTitle;
+const lede = live ? fill(w.suggestLede, { title: event.title })
+  : r?.state === 'declined' ? w.declinedLede
+  : r ? w.waitingLede
+  : w.draftLede;
 const waiting = live && r?.kind === 'changes' && r.state === 'pending';
 const reply = r?.state === 'declined' ? r.reply : '';
 const canWithdraw = canRequest && r && !(r.kind === 'changes' && r.state === 'declined');
 ---
 
-<Layout title={heading} user={user}>
+<Layout title={heading} user={user} w={w}>
   <div>
-    <a class="pc-mem-back" href={home}>← My events</a>
+    <a class="pc-mem-back" href={home}>{w.back}</a>
     <div class="pc-mem-head"><h1>{heading}</h1></div>
     <p class="pc-mem-lede">{lede}</p>
   </div>
-  {waiting && <p class="pc-mem-reply">The changes you sent are waiting for approval; they’re filled in below. Sending again replaces them.</p>}
+  {waiting && <p class="pc-mem-reply">{w.changesWaitingNote}</p>}
   {r?.state === 'declined' && (
-    <p class="pc-mem-reply"><strong>{r.kind === 'changes' ? 'The team declined your last changes.' : 'The team declined this request.'}</strong>{reply && <> They said: {reply}</>}</p>
+    <p class="pc-mem-reply"><strong>{r.kind === 'changes' ? w.declinedChanges : w.declinedRequest}</strong>{reply && <> {w.theySaid} {reply}</>}</p>
   )}
   {canRequest
-    ? <EventForm values={values} calendars={calendars} fields={fields} op="update" submitLabel={live ? 'Send changes for approval' : 'Submit for approval'} error={error} />
-    : <p class="pc-bk-error" role="alert">Your role doesn’t include “Request events”. Ask the site’s team if you need it.</p>}
+    ? <EventForm values={values} calendars={calendars} fields={fields} op="update" submitLabel={live ? w.sendChanges : w.submit} error={error} w={w} lang={lang} />
+    : <p class="pc-bk-error" role="alert">{w.noRequestRole}</p>}
   {canWithdraw && (
-    <form method="post" onsubmit={r!.kind === 'new' ? "return confirm('Withdraw this request?')" : "return confirm('Withdraw these changes?')"}>
+    <form method="post" onsubmit={'return confirm(' + JSON.stringify(r!.kind === 'new' ? w.confirmWithdrawRequest : w.confirmWithdrawChanges) + ')'}>
       <input type="hidden" name="op" value="withdraw" />
-      <button class="pc-mem-btn is-danger" type="submit">{r!.kind === 'new' ? 'Withdraw request' : 'Withdraw changes'}</button>
+      <button class="pc-mem-btn is-danger" type="submit">{r!.kind === 'new' ? w.withdrawRequest : w.withdrawChanges}</button>
     </form>
   )}
 </Layout>

package/src/pages/members/events/index.astro

@@ -2,36 +2,72 @@
 import Layout from '../_Layout.astro';
 import { getRepo } from '../../../lib/repo';
 import { currentUser } from '../../../server';
-import { ApiError } from '../../../lib/api';
+import { coded } from '../../../lib/api';
 import { readForm } from '../../../lib/forms/http';
 import { MEMBERS, memberEventsPath, hostedEvents, withdrawEventRequest, dismissEventRequest, setHostedOccurrence } from '../../../lib/calendar/requests';
+import { dismissDateRequest, moveHostedDate, moveHostedDateBack, myDateRequests, requestDateMove, withdrawDateRequest, type MoveRequestData } from '../../../lib/calendar/host-requests';
 import { eventUrl } from '../../../lib/calendar/config';
-import { eventIsPublic, eventTimeZone, expandEvents, featuredOccurrence, formatOccurrence, type Occurrence } from '../../../lib/calendar/events';
+import { eventIsPublic, eventRoomIds, eventTimeZone, expandEvents, featuredOccurrence, findOccurrence, formatOccurrence, type Occurrence } from '../../../lib/calendar/events';
+import { tzParts } from '../../../lib/calendar/ics';
 import { describeRepeat } from '../../../lib/calendar/rrule';
 import { requestLabel } from '../../../lib/calendar/member-form';
 import { mergeEventDraft } from '../../../lib/drafts';
-import { siteLocale } from '../../../lib/dates';
-import type { CalEvent } from '../../../lib/schema';
-import { failure, keepPrivate, notFound, redirectTo, signInRedirect } from '../_http';
+import { fill } from '../../../lib/live/words';
+import { localizeDoc } from '../../../lib/translations';
+import type { CalEvent, RequestRecord } from '../../../lib/schema';
+import type { MoveInput } from '../../../lib/calendar/moves';
+import { failure, keepPrivate, memberLanguage, notFound, redirectTo, signInRedirect } from '../_http';
 
 // "My events": the person's requests, the events they host (each upcoming
-// date with a Cancel / Restore control) and their past events. The rules
-// live in lib/calendar/requests.ts; this page only shows them and posts.
-// A site replaces it with its own file at the same path.
+// date with Cancel / Restore, Move… and Move back) and their past events.
+// The rules live in lib/calendar/requests.ts and host-requests.ts; this page
+// only shows them and posts. It follows the page's language (/es/…). A site
+// replaces it with its own file at the same path.
 if (!MEMBERS.enabled) return notFound();
 const user = await currentUser(Astro);
-if (!user) return signInRedirect(Astro.url);
+if (!user) return signInRedirect(Astro.url, Astro.locals);
 keepPrivate(Astro.response.headers);
 const repo = await getRepo(Astro.locals);
-const home = memberEventsPath();
+const settings = await repo.getSettings();
+const { w, lang, locale: pageLocale, here, dateLocale } = memberLanguage(Astro, settings);
+const home = here(memberEventsPath());
 const hooks = { url: Astro.url, locals: Astro.locals };
+// a host's moves wait for staff with members.hostMoves 'approve' (staff who host move at once)
+const movesNeedApproval = MEMBERS.hostMoves === 'approve' && !user.can('content.edit');
+
+/** the move form's fields → MoveInput (times are wall-clock in the event's zone) */
+function moveInput(form: FormData, e: CalEvent | null): MoveInput {
+  const s = (name: string) => { const v = form.get(name); return typeof v === 'string' ? v.trim() : ''; };
+  const date = s('date');
+  // an end at or before the start runs past midnight
+  const endDay = s('endTime') && s('endTime') <= s('startTime') ? nextDay(date) : date;
+  const input: MoveInput = e?.allDay
+    ? { start: date }
+    : { start: `${date}T${s('startTime')}`, ...(s('endTime') ? { end: `${endDay}T${s('endTime')}` } : {}) };
+  // the rooms fieldset was on the form: what's ticked is the date's rooms
+  if (form.get('rooms') === '1') input.roomIds = form.getAll('roomIds').map(String).filter(Boolean);
+  if (form.get('note') !== null) input.note = s('note');
+  return input;
+}
+
+function nextDay(day: string): string {
+  const d = new Date(`${day}T00:00:00Z`);
+  if (Number.isNaN(+d)) return day;
+  d.setUTCDate(d.getUTCDate() + 1);
+  return d.toISOString().slice(0, 10);
+}
 
 let error = '';
+// a move refused because a room is taken: shown under its date, with "Send as a request"
+let clash: { id: string; key: string; back: boolean; message: string; input: MoveInput | null } | null = null;
+// the date whose move form was posted (re-opened with what was typed when it failed)
+let posted: { id: string; key: string; form: FormData } | null = null;
 if (Astro.request.method === 'POST') {
+  const form = await readForm(Astro.request);
+  const op = String(form.get('op') ?? '');
+  const id = String(form.get('id') ?? '');
+  const key = String(form.get('key') ?? '');
   try {
-    const form = await readForm(Astro.request);
-    const op = String(form.get('op') ?? '');
-    const id = String(form.get('id') ?? '');
     if (op === 'withdraw') {
       await withdrawEventRequest(repo, user, id, hooks);
       return redirectTo(`${home}?withdrawn=1`);
@@ -41,59 +77,118 @@ if (Astro.request.method === 'POST') {
       return redirectTo(home);
     }
     if (op === 'cancel-date' || op === 'restore-date') {
-      await setHostedOccurrence(repo, user, id, String(form.get('key') ?? ''), op === 'cancel-date', hooks);
+      await setHostedOccurrence(repo, user, id, key, op === 'cancel-date', hooks);
       return redirectTo(`${home}?${op === 'cancel-date' ? 'cancelled' : 'restored'}=1`);
     }
-    throw new ApiError(400, 'That action isn’t available here.');
+    if (op === 'move-date' || op === 'request-move') {
+      posted = { id, key, form };
+      const input = moveInput(form, await repo.getEvent(id));
+      if (op === 'request-move') {
+        await requestDateMove(repo, user, id, key, input, String(form.get('message') ?? ''), hooks);
+        return redirectTo(`${home}?moveSent=1`);
+      }
+      try {
+        const r = await moveHostedDate(repo, user, id, key, input, hooks);
+        return redirectTo(`${home}?${r.request ? 'moveSent' : 'moved'}=1`);
+      } catch (err) {
+        if ((err as { code?: string }).code !== 'room-taken') throw err;
+        clash = { id, key, back: false, message: failure(err, w, lang).message, input };
+        Astro.response.status = 409;
+      }
+    } else if (op === 'move-back' || op === 'request-back') {
+      if (op === 'request-back') {
+        await requestDateMove(repo, user, id, key, null, String(form.get('message') ?? ''), hooks);
+        return redirectTo(`${home}?moveSent=1`);
+      }
+      try {
+        const r = await moveHostedDateBack(repo, user, id, key, hooks);
+        return redirectTo(`${home}?${r.request ? 'moveSent' : 'movedBack'}=1`);
+      } catch (err) {
+        if ((err as { code?: string }).code !== 'room-taken') throw err;
+        clash = { id, key, back: true, message: failure(err, w, lang).message, input: null };
+        Astro.response.status = 409;
+      }
+    } else if (op === 'withdraw-request') {
+      await withdrawDateRequest(repo, user, String(form.get('request') ?? ''));
+      return redirectTo(`${home}?withdrawn=1`);
+    } else if (op === 'dismiss-request') {
+      await dismissDateRequest(repo, user, String(form.get('request') ?? ''));
+      return redirectTo(home);
+    } else throw coded(400, 'unavailable', 'That action isn’t available here.');
   } catch (err) {
-    const f = failure(err);
+    const f = failure(err, w, lang);
     error = f.message;
     Astro.response.status = f.status;
   }
 }
 
-const FLASH: [string, string][] = [
-  ['sent', 'Thanks! Your request is with the team. You’ll hear back once they’ve looked at it.'],
-  ['updated', 'Your request is updated and waiting for approval.'],
-  ['changes', 'Your changes are with the team. The event stays as it is until they approve them.'],
-  ['withdrawn', 'Request withdrawn.'],
-  ['cancelled', 'That date is cancelled. The calendar shows it as cancelled.'],
-  ['restored', 'That date is back on.'],
-];
-const flash = error ? '' : FLASH.find(([k]) => Astro.url.searchParams.has(k))?.[1] ?? '';
+const FLASH: [keyof typeof w.flash, string][] = (['sent', 'updated', 'changes', 'withdrawn', 'cancelled', 'restored', 'moved', 'movedBack', 'moveSent', 'fromDateSent'] as const).map((k) => [k, w.flash[k]]);
+const flash = error || clash ? '' : FLASH.find(([k]) => Astro.url.searchParams.has(k))?.[1] ?? '';
 
 const DAY = 86_400_000;
 const now = Date.now();
-const [settings, calendars, mine] = await Promise.all([repo.getSettings(), repo.listCalendars(), hostedEvents(repo, user.id)]);
+const [calendars, mine, dateRequests, resources] = await Promise.all([repo.listCalendars(), hostedEvents(repo, user.id), myDateRequests(repo, user.id), repo.listResources()]);
 const calById = new Map(calendars.map((c) => [c.id, c]));
 const siteTz = settings.timezone || 'UTC';
-const locale = siteLocale(settings);
 const canRequest = user.can('events.request');
 const isLive = (e: CalEvent) => e.status === 'published' || e.status === 'scheduled';
+// titles and places in the page's language when the event has them
+const shown = (e: CalEvent) => localizeDoc(e, pageLocale || undefined);
 
 const format = (opts: Intl.DateTimeFormatOptions, tz: string) => {
-  try { return new Intl.DateTimeFormat(locale, { ...opts, timeZone: tz }); }
+  try { return new Intl.DateTimeFormat(dateLocale, { ...opts, timeZone: tz }); }
   catch { return new Intl.DateTimeFormat('en-US', { ...opts, timeZone: 'UTC' }); }
 };
 /** "Tue, Oct 21 · 7:00 PM – 9:00 PM", or "Tue, Oct 21 · All day" */
-const when = (o: Occurrence) => {
+const when = (o: Pick<Occurrence, 'event' | 'start' | 'end' | 'allDay' | 'days'>) => {
   const tz = o.allDay ? siteTz : eventTimeZone(o.event, settings);
-  const f = formatOccurrence(o, tz, locale);
+  const f = formatOccurrence(o, tz, dateLocale);
   return o.allDay ? f.range : `${f.range} – ${format({ hour: 'numeric', minute: '2-digit' }, tz).format(o.end)}`;
 };
 const day = (ms: number) => format({ month: 'short', day: 'numeric' }, siteTz).format(ms);
 const meta = (...parts: string[]) => parts.filter(Boolean).join(' · ');
+const repeats = (e: CalEvent) => describeRepeat(e.rrule, e.start, undefined, lang);
+const pad = (n: number) => String(n).padStart(2, '0');
+/** an instant as the move form's date and time, in the event's zone */
+const wallParts = (e: CalEvent, ms: number) => {
+  const p = tzParts(ms, e.allDay ? siteTz : eventTimeZone(e, settings));
+  return { date: `${p.y}-${pad(p.m)}-${pad(p.d)}`, time: `${pad(p.hh)}:${pad(p.mm)}` };
+};
+const roomName = new Map(resources.map((r) => [r.id, r.name]));
+const requestable = resources.filter((r) => r.requestable).map((r) => r.id);
+/** the rooms a host may pick for a date: the event's own (and its dates'), and the requestable ones */
+const roomChoices = (e: CalEvent) => [...new Set([...eventRoomIds(e), ...requestable])].filter((id) => roomName.has(id)).map((id) => ({ id, name: roomName.get(id)! }));
+
+// a host's date request: where the date would go
+const byId = new Map(mine.map((e) => [e.id, e]));
+const requestTarget = (e: CalEvent, r: RequestRecord) => {
+  const d = r.data as MoveRequestData;
+  return d.back ? findOccurrence({ ...e, movedDates: {} }, r.key, settings)
+    : findOccurrence({ ...e, movedDates: { ...e.movedDates, [r.key]: { start: d.start, end: d.end, note: d.note, by: '', at: 0, ...(d.roomIds ? { roomIds: d.roomIds } : {}) } } }, r.key, settings);
+};
+// …worded for its card: "Thu, Jan 10 · 6:00 – 7:00 PM → Wed, Jan 9 · 5:00 – 6:00 PM" while it waits, else the date as it is
+const requestWhen = (r: RequestRecord) => {
+  const e = byId.get(r.eventId);
+  const at = e && findOccurrence(e, r.key, settings);
+  if (!e || !at) return '';
+  const to = r.state === 'pending' ? requestTarget(e, r) : null;
+  return to ? `${when(at)} → ${when(to)}` : when(at);
+};
+const waitingMove = new Map(dateRequests.filter((r) => r.kind === 'move' && r.state === 'pending').map((r) => [`${r.eventId}|${r.key}`, r]));
 
 // requests: waiting ones first, newest first; shown as they'd be once approved
-const requests = mine
-  .filter((e) => e.request)
-  .sort((a, b) => Number(b.request!.state === 'pending') - Number(a.request!.state === 'pending') || b.request!.at - a.request!.at)
-  .map((e) => {
+const requests = [
+  ...mine.filter((e) => e.request).map((e) => {
     // the host's own waiting changes, never staff's unpublished edits
-    const shown = e.request!.kind === 'changes' && e.request!.state === 'pending' ? mergeEventDraft(e) : e;
-    const o = featuredOccurrence(shown, settings, now);
-    return { e, r: e.request!, title: shown.title, line: meta(o ? when(o) : '', describeRepeat(shown.rrule, shown.start), shown.location.name) };
-  });
+    const s = shown(e.request!.kind === 'changes' && e.request!.state === 'pending' ? mergeEventDraft(e) : e);
+    const o = featuredOccurrence(s, settings, now);
+    return { kind: 'event' as const, e, state: e.request!.state, at: e.request!.at, label: requestLabel(e.request!, w), title: s.title, line: meta(o ? when(o) : '', describeRepeat(s.rrule, s.start, undefined, lang), s.location.name), reply: e.request!.reply, r: e.request! };
+  }),
+  // a host's date moves: waiting, and answered ones until dismissed (withdrawn ones drop off)
+  ...dateRequests.filter((r) => r.state !== 'withdrawn' && byId.has(r.eventId)).map((r) => ({
+    kind: 'date' as const, e: byId.get(r.eventId)!, state: r.state, at: r.createdAt, label: requestLabel(r, w), title: shown(byId.get(r.eventId)!).title, line: requestWhen(r), reply: r.reply, req: r,
+  })),
+].sort((a, b) => Number(b.state === 'pending') - Number(a.state === 'pending') || b.at - a.at);
 
 // live events they host: the next 8 dates, or (all dates over) the last one
 const win = { displayTz: siteTz, now, windowStartMs: now, windowEndMs: now + 366 * DAY };
@@ -112,43 +207,66 @@ for (const e of mine) {
 upcoming.sort((a, b) => a.dates[0].start - b.dates[0].start);
 past.sort((a, b) => (b.last?.start ?? b.e.startAt) - (a.last?.start ?? a.e.startAt));
 const pastShown = past.slice(0, 10);
+const confirm = (text: string) => 'return confirm(' + JSON.stringify(text) + ')';
+
+/** the move form's starting values: what was posted (a failed try), else the date as it is now */
+function moveValues(e: CalEvent, o: Occurrence) {
+  const typed = posted && posted.id === e.id && posted.key === o.key ? posted.form : null;
+  const start = wallParts(e, o.start), end = wallParts(e, e.allDay ? o.end - DAY : o.end);
+  const get = (name: string, fallback: string) => { const v = typed?.get(name); return typeof v === 'string' ? v : fallback; };
+  return {
+    date: get('date', start.date), startTime: get('startTime', start.time), endTime: get('endTime', end.time),
+    roomIds: typed && typed.get('rooms') === '1' ? typed.getAll('roomIds').map(String) : o.roomIds,
+    note: get('note', o.moved?.note ?? ''), message: get('message', ''),
+  };
+}
 ---
 
-<Layout title="My events" user={user}>
+<Layout title={w.myEvents} user={user} w={w}>
   <div class="pc-mem-head">
-    <h1>My events</h1>
-    {canRequest && <a class="pc-mem-btn is-primary" href={`${home}/new`}>Request an event</a>}
+    <h1>{w.myEvents}</h1>
+    {canRequest && <a class="pc-mem-btn is-primary" href={`${home}/new`}>{w.requestEvent}</a>}
   </div>
   {flash && <p class="pc-mem-flash" role="status">{flash}</p>}
   {error && <p class="pc-bk-error" role="alert">{error}</p>}
 
   {requests.length > 0 && (
     <section aria-labelledby="pc-mem-requests">
-      <h2 id="pc-mem-requests">Requests</h2>
+      <h2 id="pc-mem-requests">{w.requests}</h2>
       <ul class="pc-mem-list">
-        {requests.map(({ e, r, title, line }) => (
+        {requests.map((q) => (
           <li class="pc-mem-card">
-            <p class={`pc-mem-state is-${r.state}`}>{requestLabel(r)}</p>
-            <h3>{title}</h3>
-            {line && <p class="pc-mem-meta">{line}</p>}
-            <p class="pc-mem-meta">Sent {day(r.at)}</p>
-            {r.state === 'declined' && r.reply && <p class="pc-mem-reply"><strong>The team said:</strong> {r.reply}</p>}
-            <div class="pc-mem-actions">
-              {canRequest && <a class="pc-mem-btn is-small" href={`${home}/${e.id}`}>{r.kind === 'changes' && r.state === 'declined' ? 'Suggest changes again' : 'Edit'}</a>}
-              {r.kind === 'changes' && r.state === 'declined' ? (
-                <form method="post">
-                  <input type="hidden" name="op" value="dismiss" />
-                  <input type="hidden" name="id" value={e.id} />
-                  <button class="pc-mem-btn is-small" type="submit">Dismiss</button>
+            <p class={`pc-mem-state is-${q.state === 'approved' ? 'approved' : q.state}`}>{q.label}</p>
+            <h3>{q.title}</h3>
+            {q.line && <p class="pc-mem-meta">{q.line}</p>}
+            <p class="pc-mem-meta">{fill(w.sentOn, { date: day(q.at) })}</p>
+            {q.state === 'declined' && q.reply && <p class="pc-mem-reply"><strong>{w.teamSaid}</strong> {q.reply}</p>}
+            {q.kind === 'event' ? (
+              <div class="pc-mem-actions">
+                {canRequest && <a class="pc-mem-btn is-small" href={`${home}/${q.e.id}`}>{q.r.kind === 'changes' && q.r.state === 'declined' ? w.suggestAgain : w.edit}</a>}
+                {q.r.kind === 'changes' && q.r.state === 'declined' ? (
+                  <form method="post">
+                    <input type="hidden" name="op" value="dismiss" />
+                    <input type="hidden" name="id" value={q.e.id} />
+                    <button class="pc-mem-btn is-small" type="submit">{w.dismiss}</button>
+                  </form>
+                ) : canRequest && (
+                  <form method="post" onsubmit={confirm(q.r.kind === 'new' ? w.confirmWithdrawRequest : w.confirmWithdrawChanges)}>
+                    <input type="hidden" name="op" value="withdraw" />
+                    <input type="hidden" name="id" value={q.e.id} />
+                    <button class="pc-mem-btn is-small is-danger" type="submit">{w.withdraw}</button>
+                  </form>
+                )}
+              </div>
+            ) : (
+              <div class="pc-mem-actions">
+                <form method="post" onsubmit={q.state === 'pending' ? confirm(w.confirmWithdrawRequest) : undefined}>
+                  <input type="hidden" name="op" value={q.state === 'pending' ? 'withdraw-request' : 'dismiss-request'} />
+                  <input type="hidden" name="request" value={q.req.id} />
+                  <button class={`pc-mem-btn is-small${q.state === 'pending' ? ' is-danger' : ''}`} type="submit">{q.state === 'pending' ? w.withdraw : w.dismiss}</button>
                 </form>
-              ) : canRequest && (
-                <form method="post" onsubmit={r.kind === 'new' ? "return confirm('Withdraw this request?')" : "return confirm('Withdraw these changes?')"}>
-                  <input type="hidden" name="op" value="withdraw" />
-                  <input type="hidden" name="id" value={e.id} />
-                  <button class="pc-mem-btn is-small is-danger" type="submit">Withdraw</button>
-                </form>
-              )}
-            </div>
+              </div>
+            )}
           </li>
         ))}
       </ul>
@@ -156,62 +274,138 @@ const pastShown = past.slice(0, 10);
   )}
 
   <section aria-labelledby="pc-mem-upcoming">
-    <h2 id="pc-mem-upcoming">Upcoming</h2>
+    <h2 id="pc-mem-upcoming">{w.upcoming}</h2>
     {upcoming.length === 0 ? (
       <p class="pc-mem-empty">
-        You’re not hosting any upcoming events.
-        {canRequest && requests.length === 0 && <> <a href={`${home}/new`}>Request one</a> and the team will take a look.</>}
+        {w.noUpcoming}
+        {canRequest && requests.length === 0 && <> <a href={`${home}/new`}>{w.requestOne}</a>{w.requestOneRest}</>}
       </p>
     ) : (
       <ul class="pc-mem-list">
-        {upcoming.map(({ e, dates }) => (
-          <li class="pc-mem-card">
-            {e.cancelled ? <p class="pc-mem-state is-declined">Cancelled</p>
-              : e.status === 'scheduled' && <p class="pc-mem-state is-pending">{e.scheduledAt ? `Goes live ${day(e.scheduledAt)}` : 'Scheduled'}</p>}
-            <h3>{e.title}</h3>
-            {meta(describeRepeat(e.rrule, e.start), e.location.name) && <p class="pc-mem-meta">{meta(describeRepeat(e.rrule, e.start), e.location.name)}</p>}
-            <ul class="pc-mem-dates">
-              {dates.map((o) => {
-                const off = e.cancelledDates.includes(o.key);
-                return (
-                  <li class={o.cancelled ? 'is-cancelled' : undefined}>
-                    <span>{o.cancelled ? <s>{when(o)}</s> : when(o)}{o.cancelled && <em>Cancelled</em>}{o.moved && !o.cancelled && <em class="is-moved" title={o.moved.note || undefined}>Moved from {when({ ...o, start: o.moved.from.start, end: o.moved.from.end })}</em>}</span>
-                    {e.rrule && !e.cancelled && o.start > now && (
-                      <form method="post" onsubmit={off ? undefined : "return confirm('Cancel this date? It shows as cancelled straight away.')"}>
-                        <input type="hidden" name="op" value={off ? 'restore-date' : 'cancel-date'} />
-                        <input type="hidden" name="id" value={e.id} />
-                        <input type="hidden" name="key" value={o.key} />
-                        <button class={`pc-mem-btn is-small${off ? '' : ' is-danger'}`} type="submit" aria-label={`${off ? 'Restore' : 'Cancel'} ${when(o)}`}>{off ? 'Restore' : 'Cancel'}</button>
-                      </form>
-                    )}
-                  </li>
-                );
-              })}
-            </ul>
-            <div class="pc-mem-actions">
-              {canRequest && <a class="pc-mem-btn is-small" href={`${home}/${e.id}`}>Suggest changes</a>}
-              {eventIsPublic(e, calById) && <a class="pc-mem-btn is-small" href={eventUrl(e.slug)}>View</a>}
-            </div>
-          </li>
-        ))}
+        {upcoming.map(({ e, dates }) => {
+          const ev = shown(e);
+          const rooms = roomChoices(e);
+          return (
+            <li class="pc-mem-card">
+              {e.cancelled ? <p class="pc-mem-state is-declined">{w.cancelledState}</p>
+                : e.status === 'scheduled' && <p class="pc-mem-state is-pending">{e.scheduledAt ? fill(w.goesLive, { date: day(e.scheduledAt) }) : w.scheduled}</p>}
+              <h3>{ev.title}</h3>
+              {meta(repeats(e), ev.location.name) && <p class="pc-mem-meta">{meta(repeats(e), ev.location.name)}</p>}
+              <ul class="pc-mem-dates">
+                {dates.map((o) => {
+                  const off = e.cancelledDates.includes(o.key);
+                  const open = e.rrule && !e.cancelled && o.start > now;
+                  const waiting = waitingMove.get(`${e.id}|${o.key}`);
+                  const ownMove = o.moved && e.movedDates[o.key]?.by === user.id;
+                  const clashHere = clash && clash.id === e.id && clash.key === o.key ? clash : null;
+                  const target = waiting && requestTarget(e, waiting);
+                  const v = moveValues(e, o);
+                  const reopen = Boolean(posted && posted.id === e.id && posted.key === o.key && error);
+                  return (
+                    <li class={o.cancelled ? 'is-cancelled' : undefined}>
+                      <span>
+                        {o.cancelled ? <s>{when(o)}</s> : when(o)}
+                        {o.cancelled && <em>{w.cancelledDate}</em>}
+                        {o.moved && !o.cancelled && <em class="is-moved" title={o.moved.note || undefined}>{fill(w.movedFrom, { when: when({ ...o, start: o.moved.from.start, end: o.moved.from.end }) })}</em>}
+                        {waiting && <em class="is-pending">{(waiting.data as MoveRequestData).back ? w.moveBackRequested : fill(w.moveRequested, { when: target ? when(target) : '' })}</em>}
+                      </span>
+                      {open && (
+                        <span class="pc-mem-date-acts">
+                          {ownMove && !off && (
+                            <form method="post" onsubmit={confirm(w.confirmMoveBack)}>
+                              <input type="hidden" name="op" value="move-back" />
+                              <input type="hidden" name="id" value={e.id} />
+                              <input type="hidden" name="key" value={o.key} />
+                              <button class="pc-mem-btn is-small" type="submit">{w.moveBack}</button>
+                            </form>
+                          )}
+                          <form method="post" onsubmit={off ? undefined : confirm(w.confirmCancelDate)}>
+                            <input type="hidden" name="op" value={off ? 'restore-date' : 'cancel-date'} />
+                            <input type="hidden" name="id" value={e.id} />
+                            <input type="hidden" name="key" value={o.key} />
+                            <button class={`pc-mem-btn is-small${off ? '' : ' is-danger'}`} type="submit" aria-label={fill(off ? w.restoreLabel : w.cancelLabel, { when: when(o) })}>{off ? w.restore : w.cancel}</button>
+                          </form>
+                        </span>
+                      )}
+                      {clashHere && (
+                        <div class="pc-mem-clash pc-mem-move" role="alert">
+                          <p><strong>{clashHere.message}</strong></p>
+                          <p>{w.sendInstead}</p>
+                          <form method="post">
+                            <input type="hidden" name="op" value={clashHere.back ? 'request-back' : 'request-move'} />
+                            <input type="hidden" name="id" value={e.id} />
+                            <input type="hidden" name="key" value={o.key} />
+                            {!clashHere.back && (
+                              <>
+                                <input type="hidden" name="date" value={v.date} />
+                                <input type="hidden" name="startTime" value={v.startTime} />
+                                <input type="hidden" name="endTime" value={v.endTime} />
+                                <input type="hidden" name="note" value={v.note} />
+                                {posted?.form.get('rooms') === '1' && <input type="hidden" name="rooms" value="1" />}
+                                {posted?.form.get('rooms') === '1' && v.roomIds.map((r) => <input type="hidden" name="roomIds" value={r} />)}
+                              </>
+                            )}
+                            <label class="pc-bk-field"><span>{w.messageForTeam} <em>{w.form.optional}</em></span><textarea name="message" rows="2" maxlength="1000">{v.message}</textarea></label>
+                            <div class="pc-mem-actions"><button class="pc-mem-btn is-small is-primary" type="submit">{w.sendAsRequest}</button></div>
+                          </form>
+                        </div>
+                      )}
+                      {open && !off && !clashHere && (
+                        <details class="pc-mem-move" open={reopen}>
+                          <summary class="pc-mem-btn is-small" aria-label={fill(w.moveDateLabel, { when: when(o) })}>{w.moveDate}</summary>
+                          <form method="post">
+                            <input type="hidden" name="op" value={movesNeedApproval ? 'request-move' : 'move-date'} />
+                            <input type="hidden" name="id" value={e.id} />
+                            <input type="hidden" name="key" value={o.key} />
+                            <div class="pc-mem-row">
+                              <label class="pc-bk-field"><span>{w.date}</span><input type="date" name="date" required value={v.date} /></label>
+                              {!e.allDay && <label class="pc-bk-field"><span>{w.starts}</span><input type="time" name="startTime" required value={v.startTime} /></label>}
+                              {!e.allDay && <label class="pc-bk-field"><span>{w.ends}</span><input type="time" name="endTime" value={v.endTime} /></label>}
+                            </div>
+                            {rooms.length > 0 && (
+                              <fieldset>
+                                <legend>{w.rooms}</legend>
+                                <input type="hidden" name="rooms" value="1" />
+                                {rooms.map((r) => <label class="pc-bk-check"><input type="checkbox" name="roomIds" value={r.id} checked={v.roomIds.includes(r.id)} /> <span>{r.name}</span></label>)}
+                                <p class="pc-mem-hint" style="flex-basis:100%">{w.roomsHint}</p>
+                              </fieldset>
+                            )}
+                            <label class="pc-bk-field"><span>{w.publicNote} <em>{w.form.optional}</em></span><input name="note" maxlength="500" value={v.note} /><small>{w.publicNoteHint}</small></label>
+                            {movesNeedApproval && <label class="pc-bk-field"><span>{w.messageForTeam} <em>{w.form.optional}</em></span><textarea name="message" rows="2" maxlength="1000">{v.message}</textarea></label>}
+                            {movesNeedApproval && <p class="pc-mem-hint">{w.approvalHint}</p>}
+                            <div class="pc-mem-actions"><button class="pc-mem-btn is-small is-primary" type="submit">{movesNeedApproval ? w.sendForApproval : w.moveNow}</button></div>
+                          </form>
+                        </details>
+                      )}
+                    </li>
+                  );
+                })}
+              </ul>
+              <div class="pc-mem-actions">
+                {canRequest && <a class="pc-mem-btn is-small" href={`${home}/${e.id}`}>{w.suggestChanges}</a>}
+                {eventIsPublic(e, calById) && <a class="pc-mem-btn is-small" href={here(eventUrl(e.slug))}>{w.view}</a>}
+              </div>
+            </li>
+          );
+        })}
       </ul>
     )}
   </section>
 
   {past.length > 0 && (
-    <section aria-label="Past events">
+    <section aria-label={fill(w.pastEvents, { count: String(past.length) })}>
       <details class="pc-mem-past">
-        <summary>Past events ({past.length})</summary>
+        <summary>{fill(w.pastEvents, { count: String(past.length) })}</summary>
         <ul class="pc-mem-list">
           {pastShown.map(({ e, last }) => (
             <li class="pc-mem-card">
-              <h3>{e.title}</h3>
+              <h3>{shown(e).title}</h3>
               {last && <p class="pc-mem-meta">{when(last)}</p>}
-              {eventIsPublic(e, calById) && <div class="pc-mem-actions"><a class="pc-mem-btn is-small" href={eventUrl(e.slug)}>View</a></div>}
+              {eventIsPublic(e, calById) && <div class="pc-mem-actions"><a class="pc-mem-btn is-small" href={here(eventUrl(e.slug))}>{w.view}</a></div>}
             </li>
           ))}
         </ul>
-        {past.length > pastShown.length && <p class="pc-mem-hint">Showing the {pastShown.length} most recent.</p>}
+        {past.length > pastShown.length && <p class="pc-mem-hint">{fill(w.showingRecent, { count: String(pastShown.length) })}</p>}
       </details>
     </section>
   )}