@acms-subir/core 0.3.6 → 0.3.8

package/src/components/editor/PostEditor.tsx

@@ -16,6 +16,7 @@ import { PostListCard } from './extensions/postList';
 import { ToggleCard } from './extensions/toggle';
 import { TocCard } from './extensions/toc';
 import { CalendarCard } from './extensions/calendar';
+import { FormCard } from './extensions/form';
 import { EventCard } from './extensions/events';
 import { InfoCards } from './extensions/infoCards';
 import { SlashMenu, type SlashSnippet } from './extensions/slash';
@@ -30,7 +31,10 @@ import { CONTENT, collectionUrl } from '../../lib/content';
 import { I18N, localeHomeUrl } from '../../lib/i18n';
 import { mergeEventDraft, mergePageDraft, mergePostDraft } from '../../lib/drafts';
 import { CALENDAR, eventUrl, type EventFieldConfig } from '../../lib/calendar/config';
-import { EventPanel, eventWhenLabel, type CalendarOption, type EventMeta } from './EventPanel';
+import type { CalendarOption, EventMeta } from './EventPanel';
+import { EventSheet } from './event/EventSheet';
+import { focusEventCard } from './event/Section';
+import type { MapsStatus } from '../../lib/maps/types';
 import { fetchRoomStatus, NO_HOLD, RoomConflictDialog } from '../calendar/RoomHolds';
 
 // The Ghost-style writing surface, shared by posts AND pages: distraction-free
@@ -53,6 +57,8 @@ interface Props {
   calendars?: CalendarOption[];
   eventFields?: EventFieldConfig[];
   siteTimezone?: string;
+  // the site's maps provider (address suggestions, static map images)
+  maps?: MapsStatus;
   initialHTML: string;
   unsplashEnabled: boolean;
   previewPath: string;
@@ -146,14 +152,17 @@ type TrField = 'title' | 'excerpt' | 'bodyHtml' | 'seoTitle' | 'seoDesc' | 'loca
 const emptyTr = () => ({ title: '', excerpt: '', bodyHtml: '', seoTitle: '', seoDesc: '', slug: '', locationName: '', ctaLabel: '', meta: {} as Record<string, { state: 'ai' | 'reviewed'; src: string }> });
 const TR_STATE: Record<string, string> = { missing: 'not translated', ai: 'AI draft', reviewed: 'reviewed', outdated: 'English changed' };
 
+const NO_LOCATION: EventMeta['location'] = { name: '', address: '', url: '', lat: null, lng: null, placeId: '', showMap: true, mapImage: '', mapImageDark: '' };
+const NO_MAPS: MapsStatus = { enabled: false, provider: '', label: '', search: false, staticMaps: false };
+
 const NO_EVENT: EventMeta = {
   start: '', end: '', allDay: false, timezone: '', rrule: '', exdates: [], cancelled: false,
-  location: { name: '', address: '', url: '' }, cta: { label: '', href: '', style: 'primary' }, calendarIds: [], fields: {},
+  location: NO_LOCATION, cta: { label: '', href: '', style: 'primary' }, calendarIds: [], fields: {},
   rsvp: { enabled: false, capacity: 0, autoConfirm: true, maxSeats: 4 },
   roomHold: NO_HOLD,
 };
 
-export default function PostEditor({ kind = 'post', post, page, event, calendars = [], eventFields = [], siteTimezone = '', initialHTML, unsplashEnabled, previewPath, sharePath, livePath: livePathProp, templates = [], site = { title: '', url: '' }, languages = [], mainLanguage, translationDrafts = false }: Props) {
+export default function PostEditor({ kind = 'post', post, page, event, calendars = [], eventFields = [], siteTimezone = '', maps = NO_MAPS, initialHTML, unsplashEnabled, previewPath, sharePath, livePath: livePathProp, templates = [], site = { title: '', url: '' }, languages = [], mainLanguage, translationDrafts = false }: Props) {
   const doc = (kind === 'page' ? page : kind === 'event' ? event : post)!;
   // posts and events share the feature image, excerpt, tags and "featured"
   const postLike = kind !== 'page';
@@ -177,7 +186,7 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
           status: event!.status, featured: event!.featured, isHome: false, locale: '', authorId: null, authorIds: [],
           template: event!.template, publishedAt: event!.publishedAt, scheduledAt: event!.scheduledAt,
           start: event!.start, end: event!.end, allDay: event!.allDay, timezone: event!.timezone, rrule: event!.rrule,
-          exdates: event!.exdates, cancelled: event!.cancelled, location: event!.location, cta: event!.cta,
+          exdates: event!.exdates, cancelled: event!.cancelled, location: { ...NO_LOCATION, ...event!.location }, cta: event!.cta,
           calendarIds: event!.calendarIds, fields: event!.fields, rsvp: event!.rsvp, roomHold: event!.roomHold,
         }
       : {
@@ -196,6 +205,8 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
     : kind === 'page' ? CONTENT.posts : (CONTENT.collections[meta.collection] ?? CONTENT.posts);
   const listHref = kind === 'page' ? '/admin/pages' : kind === 'event' ? '/admin/calendar' : `/admin/c/${meta.collection}`;
   const noun = kind === 'page' ? 'page' : col.singular.toLowerCase();
+  // events keep their settings on the page; the sidebar is just URL & SEO
+  const sidebarLabel = kind === 'page' ? 'Page settings' : kind === 'event' ? 'URL & SEO' : `${col.singular} settings`;
 
   const [authors, setAuthors] = useState<AuthorOption[]>([]);
   const [tagSuggestions, setTagSuggestions] = useState<string[]>([]);
@@ -211,8 +222,8 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
   const [leaveBusy, setLeaveBusy] = useState('');
   const [saveState, setSaveState] = useState<SaveState>('saved');
   const saveStateRef = useRef<SaveState>('saved');
-  // a fresh event opens with its settings showing: the date is the point
-  const [sidebarOpen, setSidebarOpen] = useState(() => kind === 'event' && event!.createdAt === event!.updatedAt);
+  // events show their settings on the page; the sidebar is URL & SEO only
+  const [sidebarOpen, setSidebarOpen] = useState(false);
   const [publishOpen, setPublishOpen] = useState(false);
   const [previewOpen, setPreviewOpen] = useState(false);
   const [split, setSplit] = useState(() => {
@@ -295,6 +306,7 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
       TocCard,
       CalendarCard,
       EventCard,
+      FormCard,
       InfoCards,
       FileCard,
       BookmarkCard,
@@ -417,6 +429,15 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
       if (r.error) {
         setSave('error');
         setSaveError(r.error.message);
+        // point at the section the problem is in, unless the person is
+        // typing in the settings already (autosave would yank the caret)
+        const msg = r.error.message.toLowerCase();
+        const typing = document.activeElement?.closest('.pe-evs');
+        if (!typing) {
+          if (/\b(button|cta|rsvp|seats?)\b/.test(msg)) focusEventCard('ev-registration');
+          else if (/\b(location|map|place|meeting)\b/.test(msg)) focusEventCard('ev-where');
+          else if (/\b(rrule|repeats?|dates?|times?|ends?|zone|timezone)\b|\bstart (date|time)|\bstarts\b/.test(msg)) focusEventCard('ev-when');
+        }
         return;
       }
       setSaveError('');
@@ -424,7 +445,12 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
       const ev = mergeEventDraft(r.data.event);
       setPending(Boolean(r.data.event.draft));
       setMetaState((prev) => {
-        const next = { ...prev, slug: ev.slug, start: ev.start, end: ev.end, publishedAt: ev.publishedAt };
+        // map images are made server-side for the saved pin; take them only
+        // if the pin hasn't moved since this save started
+        const loc = { ...NO_LOCATION, ...ev.location };
+        const samePin = loc.lat === prev.location.lat && loc.lng === prev.location.lng;
+        const location = samePin ? { ...prev.location, mapImage: loc.mapImage, mapImageDark: loc.mapImageDark } : prev.location;
+        const next = { ...prev, slug: ev.slug, start: ev.start, end: ev.end, publishedAt: ev.publishedAt, location };
         metaRef.current = next;
         return next;
       });
@@ -619,7 +645,8 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
   }, []);
 
   // Authors load up front (the byline under the title names the primary one);
-  // the tag registry only matters once the settings sidebar opens.
+  // the tag registry only matters once tags are on screen (sidebar, or the
+  // event sheet's Organize card).
   useEffect(() => {
     if (kind !== 'post') return;
     actions.users.list({}).then((r) => {
@@ -628,7 +655,7 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
   }, [kind]);
   const tagsLoaded = useRef(false);
   useEffect(() => {
-    if (!postLike || !sidebarOpen || tagsLoaded.current) return;
+    if (!postLike || (!sidebarOpen && kind !== 'event') || tagsLoaded.current) return;
     tagsLoaded.current = true;
     actions.tags.list({}).then((r) => {
       if (!r.error) setTagSuggestions(r.data.tags.map((t) => t.name));
@@ -1098,8 +1125,8 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
           <button
             type="button"
             className={`pe-btn ghost sm pe-icon-btn pe-sidebar-toggle ${sidebarOpen ? 'is-active' : ''}`}
-            title={kind === 'page' ? 'Page settings' : `${col.singular} settings`}
-            aria-label={kind === 'page' ? 'Page settings' : `${col.singular} settings`}
+            title={sidebarLabel}
+            aria-label={sidebarLabel}
             onClick={() => setSidebarOpen((v) => !v)}
           >
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
@@ -1112,7 +1139,24 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
       <div className="pe-body">
         <section className="pe-editor-pane">
         <main className="pe-main">
-          <div className="pe-column">
+          {kind === 'event' && (
+            <div className="pe-evs-wrap">
+              <EventSheet
+                meta={meta}
+                onChange={(patch) => setMeta(patch)}
+                calendars={calendars}
+                fields={eventFields}
+                siteTimezone={siteTimezone}
+                maps={maps}
+                eventId={docId}
+                title={meta.title}
+                status={meta.status}
+                tags={<TagInput tags={meta.tags} suggestions={tagSuggestions} onChange={(tags) => setMeta({ tags })} />}
+              />
+            </div>
+          )}
+          <div className={`pe-column ${kind === 'event' ? 'pe-ev-column' : ''}`}>
+            {kind === 'event' && <div className="pe-evs-divider" id="ev-page"><span>Event page</span></div>}
             {postLike && (meta.cover ? (
               <figure className="pe-feature">
                 <img src={meta.cover} alt={meta.coverAlt} />
@@ -1213,24 +1257,6 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
               />
             )}
 
-            {kind === 'event' && (
-              <div className="pe-byline pe-ev-byline">
-                <button type="button" className={`pe-ev-when ${meta.cancelled ? 'is-cancelled' : ''}`} title="Edit date & time" onClick={() => setSidebarOpen(true)}>
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="4.5" width="18" height="16" rx="2" /><path d="M3 9.5h18M8 2.5v4M16 2.5v4" /></svg>
-                  {meta.cancelled && <b>Cancelled · </b>}{eventWhenLabel(meta)}
-                </button>
-                {meta.rrule && <span className="pe-byline-meta">Repeats</span>}
-                {meta.location.name ? (
-                  <button type="button" className="pe-byline-tag" title="Edit location" onClick={() => setSidebarOpen(true)}>{meta.location.name}</button>
-                ) : (
-                  <button type="button" className="pe-byline-add" onClick={() => setSidebarOpen(true)}>+ Location</button>
-                )}
-                {calendars.filter((c) => meta.calendarIds.includes(c.id)).map((c) => (
-                  <button key={c.id} type="button" className="pe-byline-tag pe-ev-cal" onClick={() => setSidebarOpen(true)}><i style={{ background: c.color }} aria-hidden="true" />{c.name}</button>
-                ))}
-              </div>
-            )}
-
             {kind === 'post' && (
               <div className="pe-byline">
                 {primaryAuthor && <span className="pe-byline-author"><i aria-hidden="true">{primaryAuthor.slice(0, 1).toUpperCase()}</i>{primaryAuthor}</span>}
@@ -1428,9 +1454,9 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
       </div>
 
       {sidebarOpen && (
-        <aside className="pe-sidebar" aria-label={kind === 'page' ? 'Page settings' : `${col.singular} settings`}>
+        <aside className="pe-sidebar" aria-label={sidebarLabel}>
           <div className="pe-sidebar-head">
-            <span>{kind === 'page' ? 'Page settings' : `${col.singular} settings`}</span>
+            <span>{sidebarLabel}</span>
             <button type="button" className="pe-btn ghost sm pe-icon-btn" aria-label="Close settings" onClick={() => setSidebarOpen(false)}>
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6 6 18" /></svg>
             </button>
@@ -1467,7 +1493,7 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
               </div>
             )}
 
-            {postLike && (
+            {postLike && kind !== 'event' && (
               <label className="pe-field">
                 <span>Tags</span>
                 <TagInput tags={meta.tags} suggestions={tagSuggestions} onChange={(tags) => setMeta({ tags })} />
@@ -1561,19 +1587,6 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
             )}
           </section>
 
-          {kind === 'event' && (
-            <EventPanel
-              eventId={docId}
-              meta={meta}
-              onChange={(patch) => setMeta(patch)}
-              calendars={calendars}
-              fields={eventFields}
-              siteTimezone={siteTimezone}
-              title={meta.title}
-              status={meta.status}
-            />
-          )}
-
           {postLike && (
             <section className="pe-sb-section">
               <h3 className="pe-sb-title">Feature image &amp; excerpt</h3>

package/src/components/editor/PreviewOverlay.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { useFrameAway } from './frameNav';
 
 // Full-screen draft preview. Three views of the same draft:
 //   Page   — live iframe of the public route at desktop / tablet / phone width
@@ -58,6 +59,8 @@ export function PreviewOverlay({ open, url, shareUrl, meta, site, isPost, startV
   const [copied, setCopied] = useState(false);
   const [shareOpen, setShareOpen] = useState(false);
   const [refreshKey, setRefreshKey] = useState(0);
+  const pvFrame = useRef<HTMLIFrameElement>(null);
+  const pvNav = useFrameAway(pvFrame, url);
   const titleRef = useRef<HTMLInputElement>(null);
   const descRef = useRef<HTMLTextAreaElement>(null);
   const altRef = useRef<HTMLInputElement>(null);
@@ -203,6 +206,7 @@ export function PreviewOverlay({ open, url, shareUrl, meta, site, isPost, startV
               </div>
             )}
           </div>
+          {view === 'page' && pvNav.away && <button type="button" className="pe-btn sm" onClick={pvNav.back} title={`Viewing ${pvNav.away}`}>← Back to page</button>}
           <a className="pe-btn ghost sm pe-hide-sm" href={url} target="_blank" rel="noopener">Open ↗</a>
         </div>
       </div>
@@ -210,8 +214,10 @@ export function PreviewOverlay({ open, url, shareUrl, meta, site, isPost, startV
         <div className={`pe-preview-stage view-${view}`}>
           {view === 'page' && (
             <iframe
-              key={refreshKey}
+              ref={pvFrame}
+              key={`${refreshKey}-${pvNav.nav}`}
               src={url}
+              onLoad={pvNav.check}
               title="Preview"
               style={{ width: device.width }}
               className={device.key !== 'desktop' ? 'is-framed' : ''}

package/src/components/editor/event/EventSheet.tsx

@@ -0,0 +1,136 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { actions } from 'astro:actions';
+import type { Place } from '../../../lib/schema';
+import type { EventFieldConfig } from '../../../lib/calendar/config';
+import type { MapsStatus } from '../../../lib/maps/types';
+import { describeRepeat } from '../../../lib/calendar/rrule';
+import RoomHolds from '../../calendar/RoomHolds';
+import { eventWhenLabel, type CalendarOption, type EventMeta } from '../EventPanel';
+import { Section } from './Section';
+import { LocationField } from './LocationField';
+import { OrganizeCard, StatusSection } from './OrganizeCard';
+import { RegistrationCard } from './RegistrationCard';
+import { WhenCard } from './WhenCard';
+import { registrationMode } from './registration';
+
+// Every event setting, on the page above the event's own content, as one
+// settings column: When · Where · CTA · Organize · Status, with a
+// sticky index. Wide panes put the index at the side; narrower panes turn it
+// into a jump bar and stack each section's label over its controls
+// (container queries on the editor pane, so Split mode counts).
+
+interface Props {
+  meta: EventMeta;
+  onChange: (patch: Partial<EventMeta>) => void;
+  calendars: CalendarOption[];
+  fields: EventFieldConfig[];
+  siteTimezone: string;
+  maps: MapsStatus;
+  eventId: string;
+  title: string;
+  status: string;
+  tags?: ReactNode;
+}
+
+const SECTIONS = [
+  { id: 'ev-when', label: 'When' },
+  { id: 'ev-where', label: 'Where' },
+  { id: 'ev-registration', label: 'CTA' },
+  { id: 'ev-organize', label: 'Organize' },
+  { id: 'ev-status', label: 'Status' },
+] as const;
+
+const jump = (id: string) => document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+export function EventSheet({ meta, onChange, calendars, fields, siteTimezone, maps, eventId, title, status, tags }: Props) {
+  const [places, setPlaces] = useState<Place[]>([]);
+  const [current, setCurrent] = useState<string>(SECTIONS[0].id);
+  const root = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    let live = true;
+    actions.places.list().then((r) => { if (live && r.data) setPlaces(r.data.places); }).catch(() => {});
+    return () => { live = false; };
+  }, []);
+
+  // the index follows the section nearest the top of the editor pane
+  useEffect(() => {
+    const el = root.current;
+    if (!el) return;
+    const scroller = el.closest('.pe-main');
+    // the current section is the last one whose top has passed a line 30%
+    // down the pane; observing every section re-checks as they move
+    const pick = () => {
+      const box = scroller?.getBoundingClientRect() ?? { top: 0, height: window.innerHeight };
+      const line = box.top + Math.min(box.height * 0.3, 240);
+      let id: string = SECTIONS[0].id;
+      for (const s of SECTIONS) { const n = document.getElementById(s.id); if (n && n.getBoundingClientRect().top <= line) id = s.id; }
+      setCurrent(id);
+    };
+    const io = new IntersectionObserver(pick, { root: scroller, threshold: [0, 0.25, 0.5, 0.75, 1] });
+    for (const s of SECTIONS) { const n = document.getElementById(s.id); if (n) io.observe(n); }
+    // tall sections can cross the line between thresholds
+    let raf = 0;
+    const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(pick); };
+    scroller?.addEventListener('scroll', onScroll, { passive: true });
+    return () => { io.disconnect(); cancelAnimationFrame(raf); scroller?.removeEventListener('scroll', onScroll); };
+  }, []);
+
+  const mode = registrationMode(meta);
+  const when = eventWhenLabel(meta);
+  const repeats = describeRepeat(meta.rrule, meta.start);
+  const regLabel = mode === 'rsvp' ? `Form${meta.rsvp.capacity ? ` · ${meta.rsvp.capacity}` : ''}` : mode === 'link' ? meta.cta.label || 'Link' : 'None';
+  const cals = calendars.filter((c) => meta.calendarIds.includes(c.id));
+  const values: Record<string, string> = {
+    'ev-when': when.split(' · ')[0],
+    'ev-where': meta.location.name || 'Not set',
+    'ev-registration': regLabel,
+    'ev-organize': cals.length ? `${cals[0].name}${cals.length > 1 ? ` +${cals.length - 1}` : ''}` : 'Main calendar',
+    'ev-status': meta.cancelled ? 'Cancelled' : 'Going ahead',
+  };
+  const summary = [when, repeats, meta.location.name, mode === 'rsvp' ? 'Built-in form' : mode === 'link' ? meta.cta.label || 'CTA link' : ''].filter(Boolean);
+
+  return (
+    <div className="pe-evs" aria-label="Event settings" role="group" ref={root}>
+      <nav className="pe-evs-index" aria-label="Event settings sections">
+        {SECTIONS.map((s) => (
+          <button key={s.id} type="button" className={current === s.id ? 'is-current' : ''} aria-current={current === s.id ? 'true' : undefined} onClick={() => jump(s.id)}>
+            <b>{s.label}</b>
+            <small className={s.id === 'ev-status' && meta.cancelled ? 'is-cancelled' : ''}>{values[s.id]}</small>
+          </button>
+        ))}
+        <button type="button" className="pe-evs-index-page" onClick={() => jump('ev-page')}>Event page ↓</button>
+      </nav>
+      <div className="pe-evs-col">
+        <p className={`pe-evs-sum ${meta.cancelled ? 'is-cancelled' : ''}`}>
+          <b>{title || 'Untitled event'}</b>
+          <span>{meta.cancelled && <em>Cancelled · </em>}{summary.join(' · ')}</span>
+        </p>
+        <WhenCard meta={meta} onChange={onChange} siteTimezone={siteTimezone} eventId={eventId} />
+        <Section
+          id="ev-where"
+          title="Where"
+          help={<>Pick a saved place, paste a map link, or type an address. <a href="/admin/calendar/settings#places" target="_blank" rel="noopener">Manage places ↗</a></>}
+        >
+          <LocationField
+            location={meta.location}
+            onChange={(location) => onChange({ location })}
+            maps={maps}
+            places={places}
+            onPlaceSaved={(p) => setPlaces((list) => [...list.filter((x) => x.id !== p.id), p])}
+          />
+          <RoomHolds
+            times={{ eventId, title, start: meta.start, end: meta.end, allDay: meta.allDay, timezone: meta.timezone, rrule: meta.rrule, exdates: meta.exdates }}
+            hold={meta.roomHold}
+            status={status}
+            locationName={meta.location.name}
+            onChange={(roomHold) => onChange({ roomHold })}
+            onLocation={(name) => onChange({ location: { ...meta.location, name, placeId: '' } })}
+          />
+        </Section>
+        <RegistrationCard meta={meta} onChange={onChange} eventId={eventId} title={title} />
+        <OrganizeCard meta={meta} onChange={onChange} calendars={calendars} fields={fields} tags={tags} />
+        <StatusSection meta={meta} onChange={onChange} />
+      </div>
+    </div>
+  );
+}