@@ -126,8 +150,6 @@ function FeedbackCard({ row, onChange, canWrite }) {
))}
-
- {error && {error}}
— right for a milestone, and right for
+ * a reference that's missing an id, which used to render as a link
+ * to a 404.
+ */
+export function hrefFor(item: TimelineItem): string | null {
+ if (item.href) return item.href
+
+ const ref = item.ref
+ if (!ref) return null
+
+ return refHref(ref.kind, ref.id, ref.orgKind)
+}
+
+/**
+ * The entry's image, resolved against the directory for whatever
+ * kind of record the filename came from.
+ */
+export function logoSrc(item: TimelineItem): string | null {
+ if (!item.logo) return null
+ return logoForKind(item.logo.kind, item.logo.file)
+}
+
+/**
+ * A roster member's photo. Same rule as everywhere else — the API
+ * sends a bare filename.
+ */
+export function photoSrc(photo?: string | null): string | null {
+ return personPhoto(photo)
+}
diff --git a/src/lib/useContent.ts b/src/lib/useContent.ts
new file mode 100644
index 0000000..f81cd06
--- /dev/null
+++ b/src/lib/useContent.ts
@@ -0,0 +1,243 @@
+/**
+ * The four detail endpoints, typed.
+ *
+ * Adding a fifth is a type and a one-line hook — useRecord owns
+ * the fetching, the caching and the 404.
+ *
+ * An id that is missing — or the literal string "undefined", which
+ * is what a template literal makes of a missing route param — never
+ * reaches the network. detailPath returns null and the hook reports
+ * notFound, which is what the visitor should see anyway, and
+ * hrefs.ts has already logged the component that produced it.
+ */
+
+import { detailPath } from './hrefs.ts'
+import { useRecord, type Resource } from './useRecord.ts'
+import type { EventType } from './eventTypes.ts'
+
+/* ── Shared shapes ───────────────────────────────────────────── */
+
+/** A content_blocks row with its `items` child, as shape.js sends it. */
+export type ContentBlock = {
+ id?: number | string
+ slot?: 'card' | 'body'
+ type:
+ | 'heading'
+ | 'subheading'
+ | 'paragraph'
+ | 'list'
+ | 'links'
+ | 'quote'
+ | 'image'
+ | 'divider'
+ text?: string | null
+ media?: string | null
+ href?: string | null
+ items?: Array<{ text: string; detail?: string | null; url?: string | null }>
+}
+
+export type Link = {
+ kind?: string
+ platform?: string | null
+ label: string
+ url: string
+ is_primary?: boolean
+}
+
+export type OrgRef = { id: string; name: string; kind?: string | null }
+
+/* One host of an event. `kind` says which table the id is in;
+ `org_kind` is the region/chapter/partner split that decides an
+ organization's route, and is null for a person. The triple is
+ exactly what refHref() in hrefs.ts takes. */
+export type EventHost = {
+ kind: 'organization' | 'person'
+ id: string
+ name: string
+ org_kind?: string | null
+}
+
+/* ── Events ──────────────────────────────────────────────────── */
+
+export type EventPerson = {
+ person_id: string
+ display_name: string
+ pronouns?: string | null
+ tagline?: string | null
+ photo?: string | null
+ role?: string | null
+ title?: string | null
+}
+
+export type EventAward = {
+ award: { id: string; name: string; logo?: string | null }
+ person: { id: string; name: string; photo?: string | null }
+ awarded_on?: string | null
+ citation?: string | null
+}
+
+export type EventRecord = {
+ id: string
+ /** Which band of the Retreats page this belongs to. */
+ section_id: string
+ /** What kind of gathering it is. Orthogonal to section_id. */
+ event_type: EventType
+ title: string
+ theme?: string | null
+ tagline?: string | null
+ starts_on?: string | null
+ ends_on?: string | null
+ date_label?: string | null
+ status: 'upcoming' | 'past' | 'cancelled'
+ location_label?: string | null
+ locality?: string | null
+ state_code?: string | null
+ country?: string | null
+ is_online: boolean
+ org_logo?: string | null
+ event_logo?: string | null
+ color?: string | null
+ gradient?: string | null
+ /* In billing order. The first is the one `color` and `org_logo`
+ fell back to when the event set neither. */
+ hosts: EventHost[]
+ description: string[]
+ links: Link[]
+ instagram?: Link | null
+ blocks: ContentBlock[]
+ people: EventPerson[]
+ awards: EventAward[]
+}
+
+export const useEvent = (id?: string): Resource =>
+ useRecord(detailPath('/events', id), 'event')
+
+/* ── Organizations ───────────────────────────────────────────── */
+
+export type Leader = {
+ person_id: string
+ display_name: string
+ pronouns?: string | null
+ title?: string | null
+ role?: string | null
+ is_owner: boolean
+ photo?: string | null
+ public_email?: string | null
+ team_id?: string | null
+ team_name?: string | null
+}
+
+export type OrgTeam = {
+ id: string
+ name: string
+ tagline?: string | null
+ color?: string | null
+ logo?: string | null
+}
+
+export type OrgAward = {
+ id: string
+ name: string
+ description?: string | null
+ logo?: string | null
+ recipient_count: number
+}
+
+export type OrgEvent = {
+ id: string
+ title: string
+ event_type: EventType
+ date_label?: string | null
+ status: string
+ location_label?: string | null
+ event_logo?: string | null
+ color?: string | null
+}
+
+export type OrganizationRecord = {
+ id: string
+ kind: 'national' | 'region' | 'chapter' | 'partner'
+ name: string
+ short_name?: string | null
+ tagline?: string | null
+ color?: string | null
+ logo?: string | null
+ venue?: string | null
+ address?: string | null
+ locality?: string | null
+ state_code?: string | null
+ country?: string | null
+ location_label?: string | null
+ is_online: boolean
+ description: string[]
+ blocks: ContentBlock[]
+ links: Link[]
+ socials: Link[]
+ website?: Link | null
+ email?: Link | null
+ instagram?: Link | null
+ /** Shape depends on `kind`; empty object for national and partner. */
+ details: {
+ scope?: string | null
+ map_note?: string | null
+ areas?: Array<{ area_code: string; share?: number | null; edge?: string | null; note?: string | null }>
+ chapters?: Array<{ id: string; name: string; location_label?: string | null; logo?: string | null }>
+ region_id?: string | null
+ region_name?: string | null
+ region_color?: string | null
+ meets?: string | null
+ started?: string | null
+ }
+ leadership: Leader[]
+ teams: OrgTeam[]
+ awards: OrgAward[]
+ events: OrgEvent[]
+}
+
+export const useOrganization = (id?: string): Resource =>
+ useRecord(detailPath('/organizations', id), 'organization')
+
+/* ── Teams ───────────────────────────────────────────────────── */
+
+/** No members here on purpose — PeopleTiles fetches
+ * /teams/:id/people itself. See the note in content.js. */
+export type TeamRecord = {
+ id: string
+ name: string
+ tagline?: string | null
+ color?: string | null
+ logo?: string | null
+ org: OrgRef
+ description: string[]
+ links: Link[]
+ socials: Link[]
+ instagram?: Link | null
+ blocks: ContentBlock[]
+}
+
+export const useTeam = (id?: string): Resource =>
+ useRecord(detailPath('/teams', id), 'team')
+
+/* ── Awards ──────────────────────────────────────────────────── */
+
+export type Recipient = {
+ id: string
+ name: string
+ photo?: string | null
+ tagline?: string | null
+ awarded_on?: string | null
+ citation?: string | null
+ event: { id: string; title: string } | null
+}
+
+export type AwardRecord = {
+ id: string
+ name: string
+ description?: string | null
+ logo?: string | null
+ org: OrgRef | null
+ recipients: Recipient[]
+}
+
+export const useAward = (id?: string): Resource =>
+ useRecord(detailPath('/awards', id), 'award')
diff --git a/src/lib/useHistory.ts b/src/lib/useHistory.ts
new file mode 100644
index 0000000..60f9cd1
--- /dev/null
+++ b/src/lib/useHistory.ts
@@ -0,0 +1,87 @@
+/**
+ * Loads the history timeline from `GET /api/history`.
+ *
+ * Goes through the shared client, so the request is deduped and cached
+ * for 60s like every other read. Two consequences worth knowing:
+ *
+ * · `reload` has to invalidate before it refetches. Without that, the
+ * retry button inside the TTL would hand back the same settled
+ * promise and look like it did nothing. A *failed* request is
+ * already evicted by the client, so this matters for the refresh
+ * case rather than the error case.
+ *
+ * · there's no AbortController. `get` shares one promise between
+ * callers, so aborting on unmount would cancel someone else's
+ * request. The `live` flag drops the result instead.
+ *
+ * No `fallback` on purpose. Handing this the mock data would render a
+ * plausible-looking history with no indication the server is down, and
+ * the wrong history is worse than a visible error — the same reason
+ * `fallback: EMPTY` came out elsewhere.
+ *
+ * `undated` is the number of published entries the API left out because
+ * nothing gave them a date. Not rendered publicly — a visitor can't act
+ * on it — but returned so it's reachable if you want a warning in the
+ * admin later.
+ */
+
+import { useCallback, useEffect, useState } from 'react'
+import { get, invalidate, ApiError } from './api.js'
+import type { TimelineItem } from './timeline'
+
+const PATH = '/history'
+
+type HistoryResponse = {
+ items?: TimelineItem[]
+ undated?: number
+}
+
+type State = {
+ items: TimelineItem[]
+ undated: number
+ loading: boolean
+ error: string | null
+ reload: () => void
+}
+
+export function useHistory(): State {
+ const [items, setItems] = useState([])
+ const [undated, setUndated] = useState(0)
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(null)
+ const [attempt, setAttempt] = useState(0)
+
+ const reload = useCallback(() => {
+ invalidate(PATH)
+ setAttempt((n) => n + 1)
+ }, [])
+
+ useEffect(() => {
+ let live = true
+
+ async function load() {
+ setLoading(true)
+ setError(null)
+ try {
+ const data: HistoryResponse = await get(PATH)
+ if (!live) return
+ setItems(Array.isArray(data?.items) ? data.items : [])
+ setUndated(Number(data?.undated) || 0)
+ } catch (err) {
+ if (!live) return
+ setError(
+ err instanceof ApiError ? err.message : "Couldn't reach the server.",
+ )
+ } finally {
+ if (live) setLoading(false)
+ }
+ }
+
+ load()
+ return () => {
+ live = false
+ }
+ }, [attempt])
+
+ return { items, undated, loading, error, reload }
+}
diff --git a/src/lib/useRecord.ts b/src/lib/useRecord.ts
new file mode 100644
index 0000000..bc26d16
--- /dev/null
+++ b/src/lib/useRecord.ts
@@ -0,0 +1,127 @@
+/**
+ * useRecord — one record from one endpoint, on the useHistory
+ * pattern.
+ *
+ * Named for what it returns, and deliberately not useResource:
+ * src/lib/useResource.js is a different hook — it hands back the
+ * whole response body and takes an options object — and a .ts file
+ * of the same name would sit one extension away from it. An import
+ * whose target goes missing then resolves to the other file without
+ * a word, and every detail page renders the wrapper object instead
+ * of the record. That is exactly how this file came to exist.
+ *
+ * Every detail route in content.js answers the same shape: 200 with
+ * a single top-level key, or 404 with `{ error }`. So the hook takes
+ * the path and the key, and the four callers in useContent.ts are
+ * one line each rather than four copies of this file.
+ *
+ * `key` is a string rather than a selector function on purpose. A
+ * selector passed inline would be a new identity every render, and
+ * putting it in the effect's deps would refetch forever; leaving it
+ * out would silently use a stale closure. A string has neither
+ * problem.
+ *
+ * Carried over from useHistory, and worth restating:
+ *
+ * · `reload` invalidates before it refetches. Without that, the
+ * retry button inside the 60s TTL hands back the same settled
+ * promise and looks like it did nothing. A *failed* request is
+ * already evicted by api.js, so this matters for the refresh
+ * case rather than the error case.
+ *
+ * · no AbortController. `get` shares one promise between callers,
+ * so aborting on unmount would cancel someone else's request.
+ * The `live` flag drops the result instead.
+ *
+ * · no `fallback`. Rendering plausible-looking content with no
+ * sign the server is down is worse than a visible error.
+ *
+ * `notFound` is separated from `error` because they are different
+ * pages: a 404 is a slug that doesn't exist and retrying won't help,
+ * anything else is worth a Try again button.
+ *
+ * A null `path` means there is nothing to ask for, and the hook
+ * reports notFound rather than loading forever. Callers build the
+ * path with detailPath() from hrefs.ts, which returns null for an
+ * id that could never be real — "undefined" chief among them.
+ */
+
+import { useCallback, useEffect, useState } from 'react'
+import { get, invalidate, ApiError } from './api.js'
+
+export type Resource = {
+ data: T | null
+ loading: boolean
+ error: string | null
+ notFound: boolean
+ reload: () => void
+}
+
+export function useRecord(path: string | null, key: string): Resource {
+ const [data, setData] = useState(null)
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(null)
+ const [notFound, setNotFound] = useState(false)
+ const [attempt, setAttempt] = useState(0)
+
+ const reload = useCallback(() => {
+ if (path) invalidate(path)
+ setAttempt((n) => n + 1)
+ }, [path])
+
+ useEffect(() => {
+ // Nothing to ask for. Distinguished from "not asked yet" by the
+ // caller: useContent passes null only when the id is unusable,
+ // and an unusable id is a 404 as far as the visitor is
+ // concerned.
+ if (!path) {
+ setData(null)
+ setError(null)
+ setNotFound(true)
+ setLoading(false)
+ return undefined
+ }
+
+ let live = true
+
+ async function load() {
+ setLoading(true)
+ setError(null)
+ setNotFound(false)
+ try {
+ const body = await get(path as string)
+ if (!live) return
+ // A 200 with the key absent is a server-side shaping bug,
+ // not an empty record. Say so rather than rendering a page
+ // full of blanks.
+ const record = body?.[key]
+ if (record === undefined) {
+ setError(`The server sent no "${key}".`)
+ setData(null)
+ return
+ }
+ setData(record as T)
+ } catch (err) {
+ if (!live) return
+ if (err instanceof ApiError && err.status === 404) {
+ setNotFound(true)
+ setData(null)
+ return
+ }
+ setError(
+ err instanceof ApiError ? err.message : "Couldn't reach the server.",
+ )
+ setData(null)
+ } finally {
+ if (live) setLoading(false)
+ }
+ }
+
+ load()
+ return () => {
+ live = false
+ }
+ }, [path, key, attempt])
+
+ return { data, loading, error, notFound, reload }
+}
diff --git a/src/lib/version.ts b/src/lib/version.ts
new file mode 100644
index 0000000..e7adbb4
--- /dev/null
+++ b/src/lib/version.ts
@@ -0,0 +1,10 @@
+/* ═══════════════════════════════════════════════════════════════
+ SITE VERSION — src/lib/version.ts
+
+ One string, bumped by hand when the working directory name
+ changes. The admin footer is the only thing reading it today;
+ keep it here rather than in a component so the panel, an about
+ box or a build banner can read the same value later.
+ ═══════════════════════════════════════════════════════════════ */
+
+export const SITE_VERSION = "NGU-Web.v1.5-history";
diff --git a/src/navConfig.js b/src/navConfig.js
index f44e06e..b00ae4e 100644
--- a/src/navConfig.js
+++ b/src/navConfig.js
@@ -7,6 +7,7 @@ export const PAGE_LINKS = [
{ label: "Community", path: "/community" },
{ label: "Leadership", path: "/leadership" },
{ label: "Resources", path: "/resources" },
+ { label: "History", path: "/history" },
];
// Sections belong to a page, keyed by that page's path.
@@ -38,6 +39,9 @@ export const PAGE_SECTIONS = {
{ label: "Branding & Marketing", hash: "#branding" },
{ label: "Partner Resources", hash: "#partner" },
],
+ "/history": [
+ { label: "Timeline", hash: "#timeline" },
+ ],
};
// Right-side actions. `variant` picks the styling, not the destination.
diff --git a/src/pages/AwardDetail.tsx b/src/pages/AwardDetail.tsx
new file mode 100644
index 0000000..e0e857b
--- /dev/null
+++ b/src/pages/AwardDetail.tsx
@@ -0,0 +1,178 @@
+/* ═══════════════════════════════════════════════════════════════
+ AWARD DETAIL — /awards/:id
+
+ The thinnest of the four, by design. `awards` has no links and no
+ content blocks — 'award' isn't in the owner_kind CHECK on either
+ polymorphic table, and widening it means rebuilding two STRICT
+ tables. `description` is the prose.
+
+ So the recipients are the page. They're rendered as a list rather
+ than as PeopleTiles because each one carries a citation, and a
+ citation is the point of an award — it doesn't belong folded
+ behind a chevron.
+
+ Note also that `awards` has no is_published column: every row
+ here is live the moment it's created. Worth an ADD COLUMN before
+ this ships.
+ ═══════════════════════════════════════════════════════════════ */
+
+import { Link, useParams } from 'react-router-dom'
+
+import PageShell from '../components/PageShell.tsx'
+import PageState from '../components/PageState.tsx'
+import { useAward, type Recipient } from '../lib/useContent.ts'
+import { eventHref, orgHref, personHref } from '../lib/hrefs.ts'
+import { awardLogo, initials, personPhoto } from '../lib/media.ts'
+
+const TEAL = '#138ba0'
+const BODY = '#4a6b72'
+
+export default function AwardDetail() {
+ const { id } = useParams()
+ const { data: award, loading, error, notFound, reload } = useAward(id)
+
+ if (!award) {
+ return (
+
+
+ ),
+ },
+ ]}
+ />
+ )
+}
+
+function RecipientRow({ recipient, accent }: { recipient: Recipient; accent: string }) {
+ const photo = personPhoto(recipient.photo)
+
+ return (
+
+ {logo && (
+ 
+ )}
+
+ {award.org && (
+
+ Given by{' '}
+
+ {award.org.name}
+
+
+ )}
+
+
+ {award.recipients.length}{' '}
+ {award.recipients.length === 1 ? 'recipient' : 'recipients'}
+
+
+
+ -
+ {award.recipients.map((recipient, index) => (
+
-
+
+
+ ))}
+
+ {photo ? (
+ 
+ ) : (
+
+ )}
+
+
+ )
+}
+
+/* awarded_on may be a partial date, so this takes the leading year
+ rather than parsing. A full date would be false precision on a
+ row backfilled from a programme booklet. */
+function year(date?: string | null): string | null {
+ if (!date) return null
+ const match = /^(\d{4})/.exec(date)
+ return match ? match[1] : date
+}
diff --git a/src/pages/EventDetail.tsx b/src/pages/EventDetail.tsx
new file mode 100644
index 0000000..c4460be
--- /dev/null
+++ b/src/pages/EventDetail.tsx
@@ -0,0 +1,352 @@
+/* ═══════════════════════════════════════════════════════════════
+ EVENT DETAIL — /retreats/:id
+
+ Reached from the cards on Retreats.tsx. The API has already
+ resolved the fallbacks — `color` is the event's own or its first
+ host's, `status` is derived from the dates when nobody set it —
+ so nothing here reimplements those rules.
+
+ Hosts arrive as a list in billing order, each one either an
+ organization or a person. refHref takes the kind and works out
+ the route, which is why this file doesn't branch on it.
+
+ People are grouped by their billing role rather than listed flat.
+ A retreat with four speakers and eleven volunteers reads as two
+ different things, and v_event_people already sorts within a role
+ by sort_order.
+ ═══════════════════════════════════════════════════════════════ */
+
+import { Link, useParams } from 'react-router-dom'
+
+import PageShell from '../components/PageShell.tsx'
+import PageState from '../components/PageState.tsx'
+import ContentBlocks from '../components/ContentBlocks.tsx'
+import PeopleTiles, { type PeopleGroupInput } from '../components/PeopleTiles.tsx'
+import {
+ useEvent,
+ type EventHost,
+ type EventPerson,
+ type EventRecord,
+} from '../lib/useContent.ts'
+import { awardHref, personHref, refHref } from '../lib/hrefs.ts'
+import { personPhoto } from '../lib/media.ts'
+import { eventTypeLabel } from '../lib/eventTypes.ts'
+
+const TEAL = '#138ba0'
+const BODY = '#4a6b72'
+
+/* Billing order. A role missing from here still renders, at the
+ end, under its own name — better than a speaker vanishing
+ because somebody added a role to the CHECK and not to this list. */
+const ROLE_ORDER = [
+ 'speaker',
+ 'leader',
+ 'facilitator',
+ 'host',
+ 'musician',
+ 'volunteer',
+ 'attendee',
+] as const
+
+const ROLE_LABEL: Record
+
+ + + {recipient.name} + +
+ ++ {[ + year(recipient.awarded_on), + recipient.tagline, + ] + .filter(Boolean) + .join(' · ')} + {recipient.event && ( + <> + {(recipient.awarded_on || recipient.tagline) && ' · '} + + {recipient.event.title} + + + )} +
+ + {recipient.citation && ( ++ {recipient.citation} +
+ )} +
+
+ ),
+ },
+ ]
+
+ if (groups.length > 0) {
+ sections.push({
+ id: 'people',
+ title: 'Who’s there',
+ accent,
+ background: '#eef9fb',
+ content: (
+ + {paragraph} +
+ ))} + +
+
+
+ {event.links.length > 0 && (
+
+ {event.links.map((link) => (
+
+ {link.label}
+
+ ))}
+
+ )}
+
+
+ ),
+ })
+ }
+
+ if (event.awards.length > 0) {
+ sections.push({
+ id: 'awards',
+ title: 'Presented here',
+ blurb: 'Awards given at this gathering.',
+ accent,
+ background: '#ffffff',
+ content: (
+
+ {event.awards.map((entry, index) => (
+
+ ),
+ })
+ }
+
+ return (
+
+
+ ))}
+
+
+ + + {entry.award.name} + +
++ + {entry.person.name} + +
+ {entry.citation && ( ++ {entry.citation} +
+ )} +
+
+ {STATUS_LABEL[event.status] ?? event.status}
+
+
+ {/* Outlined rather than filled: the status pill is the one
+ thing in this strip that should read as loud, and two
+ solid blocks side by side would compete. Shown
+ unconditionally — a card suppresses its own type badge in
+ a band of one kind, but here there is no band to make it
+ redundant. */}
+ {event.event_type && (
+
+ {eventTypeLabel(event.event_type)}
+
+ )}
+
+ {when && {when}}
+ {where && {where}}
+ {event.is_online && where !== 'Online' && (
+ Online too
+ )}
+
+ {(event.hosts?.length ?? 0) > 0 && (
+
+ Hosted by
+ )
+}
+
+/* One host reads as "Hosted by Northwest"; several read as a
+ sentence, so they're joined with commas and an "and" rather than
+ stacked. A host whose id didn't resolve to a route renders as
+ plain text — refHref returns null for that — because a dead link
+ is worse than a name. */
+function HostList({ hosts, accent }: { hosts: EventHost[]; accent: string }) {
+ return (
+ <>
+ {hosts.map((host, index) => {
+ const to = refHref(host.kind, host.id, host.org_kind)
+
+ return (
+
+ {index > 0 && (hosts.length > 2 ? ', ' : ' ')}
+ {index > 0 && index === hosts.length - 1 && 'and '}
+ {to ? (
+
+ {host.name}
+
+ ) : (
+ {host.name}
+ )}
+
+ )
+ })}
+
+ )
+}
+
+/* date_label is what a card shows and is free text — "March/April
+ 2026" is legitimate. This is only the fallback for an event that
+ has dates and no label. */
+function dateRange(start?: string | null, end?: string | null): string | null {
+ if (!start) return null
+ const from = new Date(`${start}T00:00:00`)
+ if (Number.isNaN(from.getTime())) return start
+
+ const full: Intl.DateTimeFormatOptions = {
+ month: 'long',
+ day: 'numeric',
+ year: 'numeric',
+ }
+
+ if (!end || end === start) return from.toLocaleDateString(undefined, full)
+
+ const to = new Date(`${end}T00:00:00`)
+ if (Number.isNaN(to.getTime())) return from.toLocaleDateString(undefined, full)
+
+ const sameYear = from.getFullYear() === to.getFullYear()
+ const sameMonth = sameYear && from.getMonth() === to.getMonth()
+
+ const left = from.toLocaleDateString(
+ undefined,
+ sameMonth
+ ? { month: 'long', day: 'numeric' }
+ : sameYear
+ ? { month: 'long', day: 'numeric' }
+ : full,
+ )
+
+ return `${left} – ${to.toLocaleDateString(undefined, full)}`
+}
+
+/* ── v_event_people → PeopleTiles groups ─────────────────────── */
+
+function peopleGroups(people: EventPerson[], accent: string): PeopleGroupInput[] {
+ if (!people.length) return []
+
+ const byRole = new Map
+ {children}
+
+ );
+
+ let content: React.ReactNode;
+
+ if (loading) {
+ content = wrap(
+ + Loading the timeline… +
, + ); + } else if (error) { + // Say what failed and offer the one action that might fix it. + // A history page that silently renders nothing looks like an + // organization with no history. + content = wrap( +
+
,
+ );
+ } else {
+ content = wrap(
+ Couldn’t load the timeline. {error}
+ +
+
+ ),
+ },
+ ]
+
+ const teamBlocks = groupLeadership(org)
+
+ if (teamBlocks.length > 0) {
+ sections.push({
+ id: 'leadership',
+ title: 'Who runs it',
+ accent,
+ background: '#eef9fb',
+ content: (
+ + {paragraph} +
+ ))} + +
+
+
+
+ {teamBlocks.map((block) => (
+
+ ),
+ })
+ }
+
+ if (org.kind === 'region' && (org.details.chapters?.length ?? 0) > 0) {
+ sections.push({
+ id: 'chapters',
+ title: 'Chapters',
+ blurb: org.details.map_note ?? undefined,
+ accent,
+ background: '#ffffff',
+ content: (
+
+ ({
+ id: leader.person_id,
+ name: leader.display_name,
+ title: leader.title,
+ pronouns: leader.pronouns,
+ public_email: leader.public_email,
+ photo: personPhoto(leader.photo),
+ is_owner: leader.is_owner,
+ }))}
+ />
+ ) : (
+
+ ))}
+
+ {block.teamId ? (
+
+
+ {block.people.length > 0 ? (
+ + + {block.label} + +
+ ) : ( + block.label && ( ++ {block.label} +
+ ) + )} + {block.tagline && ( ++ {block.tagline} +
+ )} ++ No members listed yet. +
+ )} +
+ {(org.details.chapters ?? []).map((chapter) => (
+
+
+ ),
+ })
+ }
+
+ if (org.awards.length > 0) {
+ sections.push({
+ id: 'awards',
+ title: 'Awards',
+ blurb: `Given by ${org.short_name || org.name}.`,
+ accent,
+ background: '#eef9fb',
+ content: (
+
+ {org.awards.map((award) => (
+
+
+ {award.name}
+
+ {award.description && (
+
+ {award.description}
+
+ )}
+
+ {award.recipient_count === 0
+ ? 'No recipients yet'
+ : `${award.recipient_count} recipient${award.recipient_count === 1 ? '' : 's'}`}
+
+
+ ))}
+
+ ),
+ })
+ }
+
+ // EventList-Cards fetches and renders this itself — its own
+ // docstring offers `host` for exactly this case, and a card there
+ // already knows about gradients, logos, past-event collapsing and
+ // the carousel. A second grid here was the same component written
+ // worse.
+ //
+ // `org.events` is still what decides whether the section exists at
+ // all: an organization that has never hosted anything shouldn't
+ // get a heading followed by "events coming soon".
+ if (org.events.length > 0) {
+ sections.push({
+ id: 'events',
+ title: 'Gatherings',
+ accent,
+ background: '#ffffff',
+ content: (
+
+ {where && {where}}
+
+ {org.kind === 'region' && org.details.scope && (
+ {org.details.scope}
+ )}
+
+ {org.kind === 'chapter' && org.details.region_id && (
+
+ Part of{' '}
+
+ {org.details.region_name}
+
+
+ )}
+
+ {org.kind === 'chapter' && org.details.meets && (
+ Meets {org.details.meets}
+ )}
+ {org.kind === 'chapter' && org.details.started && (
+ Since {org.details.started}
+ )}
+ {org.is_online && Online}
+
+
+ {back.label}
+
+
+ )
+}
+
+function Contact({ org, accent }: { org: OrganizationRecord; accent: string }) {
+ const hasAny =
+ org.links.length > 0 || org.socials.length > 0 || org.website || org.email
+
+ if (!hasAny) return null
+
+ return (
+
+ {org.links.map((link) => (
+
+ {link.label}
+
+ ))}
+
+ {[org.website, org.email, ...org.socials]
+ .filter((link): link is NonNullable => Boolean(link))
+ .map((link) => (
+
+ {link.label}
+
+ ))}
+
+ )
+}
+
+function Logo({
+ file,
+ name,
+ accent,
+}: {
+ file?: string | null
+ name: string
+ accent: string
+}) {
+ const src = orgLogo(file)
+ if (!src) {
+ return (
+
+ )
+ }
+ return
+
+ ),
+ })
+ }
+
+ sections.push({
+ id: 'members',
+ title: hasAbout ? 'Members' : team.name,
+ accent,
+ background: hasAbout ? '#eef9fb' : '#ffffff',
+ content: (
+ + {paragraph} +
+ ))} + +
+
+
+ {team.links.length > 0 && (
+
+ {team.links.map((link) => (
+
+ {link.label}
+
+ ))}
+
+ )}
+
+ {!hasAbout && (
+
+ ),
+ })
+
+ return (
+
+
+ A team of{' '}
+
+ {orgName}
+
+
+
+
+ Back to {orgName}
+
+
+ )
+}
diff --git a/src/pages/admin/AdminFeedback.tsx b/src/pages/admin/AdminFeedback.tsx
index 982b232..dbfbb3d 100644
--- a/src/pages/admin/AdminFeedback.tsx
+++ b/src/pages/admin/AdminFeedback.tsx
@@ -2,8 +2,15 @@
ADMIN — FEEDBACK TRIAGE
Reads /api/admin/feedback, writes status and notes back through
- PATCH. Deliberately a flat list rather than a table: the message
- is the content, and messages don't fit in a cell.
+ PATCH, and deletes through DELETE. Deliberately a flat list
+ rather than a table: the message is the content, and messages
+ don't fit in a cell.
+
+ Two capabilities, two ranks. Editors and above can change a
+ status or leave a note; deleting is admin and above, matching
+ requireRole on the server. Both come from the roles ladder
+ rather than an equality check — a superadmin is not role ===
+ "admin", and reading it that way is what hid these controls.
Every read passes ttl: 0. The api cache exists for public
content that changes weekly; a triage queue two people are
@@ -13,8 +20,9 @@
import { useCallback, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
-import { get, patch, ApiError } from "../../lib/api.js";
+import { del, get, patch, ApiError } from "../../lib/api.js";
import { isUnauthorized, useAuth } from "../../lib/auth.tsx";
+import { canWrite as roleCanWrite, canDelete } from "../../lib/roles.ts";
import { feedbackTypeLabel } from "../../data/feedbackTypes.js";
const STATUSES = ["new", "read", "actioned", "archived", "spam"];
@@ -44,10 +52,11 @@ function locationOf(row) {
/* ── One submission ──────────────────────────────────────────── */
-function FeedbackCard({ row, onChange, canWrite }) {
+function FeedbackCard({ row, onChange, onRemove, canWrite, canRemove }) {
const [note, setNote] = useState(row.admin_note ?? "");
const [busy, setBusy] = useState(false);
const [error, setError] = useState(null);
+ const [confirming, setConfirming] = useState(false);
const noteDirty = note !== (row.admin_note ?? "");
@@ -64,6 +73,21 @@ function FeedbackCard({ row, onChange, canWrite }) {
}
}
+ // On success this card unmounts, so there's no finally here:
+ // busy only needs clearing on the path where the row survives.
+ async function remove() {
+ setBusy(true);
+ setError(null);
+ try {
+ await del(`/admin/feedback/${row.id}`);
+ onRemove(row);
+ } catch (err) {
+ setError(err instanceof ApiError ? err.message : "Couldn't delete that.");
+ setConfirming(false);
+ setBusy(false);
+ }
+ }
+
return (