@meith/web 0.16.0

package/src/components/shell/panel-nav.tsx

@@ -0,0 +1,40 @@
+import type { PanelKind } from '@meith/theme-kit'
+import { requireSlot, slotCopy } from '@meith/theme-kit'
+
+import { getActor } from '@/server/context'
+import { currentLocation } from '@/server/current-location'
+import { getTranslator } from '@/server/i18n'
+import { filterView, viewerRef } from '@/server/plugin-view'
+import { currentTheme } from '@/server/theme'
+import { buildPanelNavModel, type PanelCounts, type PanelNav } from '@/view/panel-nav'
+
+export interface PanelNavProps {
+  readonly panel: PanelKind
+  readonly nav: PanelNav
+  readonly overviewHref: string
+  readonly fallbackHref?: string
+  readonly counts?: PanelCounts
+}
+
+export async function PanelNavRegion(props: PanelNavProps) {
+  const theme = await currentTheme()
+  const Nav = requireSlot(theme, 'PanelNav')
+  const translator = await getTranslator()
+
+  const model = buildPanelNavModel({
+    panel: props.panel,
+    nav: props.nav,
+    overviewHref: props.overviewHref,
+    location: await currentLocation(),
+    fallbackHref: props.fallbackHref,
+    counts: props.counts,
+    t: translator,
+  })
+
+  return (
+    <Nav
+      {...(await filterView('view.panel-nav', model, viewerRef(await getActor())))}
+      copy={slotCopy(theme, 'PanelNav', translator)}
+    />
+  )
+}

package/src/components/shell/panel-overview.tsx

@@ -0,0 +1,81 @@
+import { buttonVariants, Card, CardContent, Empty, EmptyDescription, EmptyTitle } from '@meith/ui'
+
+import type { PanelSectionCopy } from '@/view/panel-nav'
+
+export interface WaitingItem {
+  readonly count: number
+  readonly one: string
+  readonly many: string
+  readonly href: string
+  readonly action: string
+}
+
+function PanelWaiting({ item }: { item: WaitingItem }) {
+  return (
+    <Card className="flex-1 border-moderation-pending/50">
+      <CardContent className="flex items-center justify-between gap-4 p-4">
+        <div>
+          <p className="text-2xl font-semibold tabular-nums text-foreground">{item.count}</p>
+          <p className="text-sm text-muted-foreground">{item.count === 1 ? item.one : item.many}</p>
+        </div>
+        <a href={item.href} className={buttonVariants({ variant: 'outline', size: 'sm' })}>
+          {item.action}
+        </a>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function PanelWaitingList({
+  items,
+  emptyTitle,
+  emptyDescription,
+}: {
+  readonly items: readonly WaitingItem[]
+  readonly emptyTitle: string
+  readonly emptyDescription: string
+}) {
+  const waiting = items.filter((item) => item.count > 0)
+
+  if (waiting.length === 0) {
+    return (
+      <Card>
+        <Empty className="py-8">
+          <EmptyTitle>{emptyTitle}</EmptyTitle>
+          <EmptyDescription>{emptyDescription}</EmptyDescription>
+        </Empty>
+      </Card>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-3 sm:flex-row">
+      {waiting.map((item) => (
+        <PanelWaiting key={item.href} item={item} />
+      ))}
+    </div>
+  )
+}
+
+export function PanelSectionGrid({ sections }: { sections: readonly PanelSectionCopy[] }) {
+  return (
+    <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+      {sections.map((section) => (
+        <li key={section.href}>
+          <Card className="relative h-full transition-colors hover:bg-muted/50">
+            <CardContent className="flex flex-col gap-0.5 p-4">
+              <a
+                href={section.href}
+                className="text-sm font-medium text-foreground underline-offset-2 hover:underline"
+              >
+                <span className="absolute inset-0" />
+                {section.title}
+              </a>
+              <p className="text-xs text-muted-foreground">{section.blurb}</p>
+            </CardContent>
+          </Card>
+        </li>
+      ))}
+    </ul>
+  )
+}

package/src/components/shell/panel-page.tsx

@@ -0,0 +1,96 @@
+import type { PanelKind } from '@meith/theme-kit'
+import { requireSlot, slotCopy } from '@meith/theme-kit'
+
+import { getActor } from '@/server/context'
+import { getTranslator } from '@/server/i18n'
+import { filterView, viewerRef } from '@/server/plugin-view'
+import { currentTheme } from '@/server/theme'
+
+export interface PanelPageProps {
+  readonly title: string
+  readonly panel?: PanelKind
+  readonly frame?: 'panel' | 'standalone'
+  readonly back?: { readonly href: string; readonly label: string }
+  readonly lede?: React.ReactNode
+  readonly meta?: React.ReactNode
+  readonly actions?: React.ReactNode
+  readonly width?: 'reading' | 'wide'
+  readonly gap?: 'normal' | 'loose'
+  readonly children: React.ReactNode
+}
+
+export async function PanelPage({
+  title,
+  panel,
+  frame = 'panel',
+  back,
+  lede,
+  meta,
+  actions,
+  width = 'reading',
+  gap = 'normal',
+  children,
+}: PanelPageProps) {
+  const theme = await currentTheme()
+  const Page = requireSlot(theme, 'PanelPage')
+
+  const model = await filterView(
+    'view.panel-page',
+    {
+      title,
+      panel: panel ?? null,
+      frame,
+      back: back ?? null,
+      width,
+      gap,
+      regions: {
+        ...(lede === undefined ? {} : { lede }),
+        ...(meta === undefined ? {} : { meta }),
+        ...(actions === undefined ? {} : { actions }),
+      },
+    },
+    viewerRef(await getActor()),
+  )
+
+  return (
+    <Page {...model} copy={slotCopy(theme, 'PanelPage', await getTranslator())}>
+      {children}
+    </Page>
+  )
+}
+
+export async function PanelSection({
+  title,
+  description,
+  actions,
+  id,
+  children,
+}: {
+  readonly title: string
+  readonly description?: React.ReactNode
+  readonly actions?: React.ReactNode
+  readonly id: string
+  readonly children: React.ReactNode
+}) {
+  const theme = await currentTheme()
+  const Section = requireSlot(theme, 'PanelSection')
+
+  const model = await filterView(
+    'view.panel-section',
+    {
+      title,
+      headingId: id,
+      regions: {
+        ...(description === undefined ? {} : { description }),
+        ...(actions === undefined ? {} : { actions }),
+      },
+    },
+    viewerRef(await getActor()),
+  )
+
+  return (
+    <Section {...model} copy={slotCopy(theme, 'PanelSection', await getTranslator())}>
+      {children}
+    </Section>
+  )
+}

package/src/components/shell/panel-pagination.tsx

@@ -0,0 +1,28 @@
+import { requireSlot, slotCopy } from '@meith/theme-kit'
+
+import { getActor } from '@/server/context'
+import { getTranslator } from '@/server/i18n'
+import { filterView, viewerRef } from '@/server/plugin-view'
+import { currentTheme } from '@/server/theme'
+import { buildOffsetPager, buildPager, type OffsetPagerInput, type PagerInput } from '@/view/pager'
+
+export type PanelPaginationProps = OffsetPagerInput | PagerInput
+
+function isNumbered(input: PanelPaginationProps): input is OffsetPagerInput {
+  return 'total' in input && typeof input.total === 'number' && 'page' in input
+}
+
+export async function PanelPagination(input: PanelPaginationProps) {
+  const model = isNumbered(input) ? buildOffsetPager(input) : buildPager(input)
+  if (model.previousHref === null && model.nextHref === null) return null
+
+  const theme = await currentTheme()
+  const Pagination = requireSlot(theme, 'Pagination')
+
+  return (
+    <Pagination
+      {...(await filterView('view.pagination', model, viewerRef(await getActor())))}
+      copy={slotCopy(theme, 'Pagination', await getTranslator())}
+    />
+  )
+}

package/src/components/shell/panel-shell.tsx

@@ -0,0 +1,31 @@
+import type { LinkModel, PanelKind } from '@meith/theme-kit'
+import { requireSlot, slotCopy } from '@meith/theme-kit'
+
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { filterView, viewerRef } from '@/server/plugin-view'
+import { currentTheme } from '@/server/theme'
+
+export interface PanelShellProps {
+  readonly panel: PanelKind
+  readonly nav: React.ReactNode
+  readonly links?: readonly LinkModel[]
+  readonly children: React.ReactNode
+}
+
+export async function PanelShell({ panel, nav, links = [], children }: PanelShellProps) {
+  const theme = await currentTheme()
+  const Shell = requireSlot(theme, 'PanelShell')
+
+  const model = await filterView(
+    'view.panel-shell',
+    { panel, links, linksLabel: await tr('panel.otherPanels'), regions: { nav } },
+    viewerRef(await getActor()),
+  )
+
+  return (
+    <Shell {...model} copy={slotCopy(theme, 'PanelShell', await getTranslator())}>
+      {children}
+    </Shell>
+  )
+}

package/src/components/shell/theme-runtime-style.tsx

@@ -0,0 +1,6 @@
+import { getBoardThemeStyle } from '@/server/theme-runtime'
+
+export async function ThemeRuntimeStyle() {
+  const { css } = await getBoardThemeStyle()
+  return css === '' ? null : <style id="forum-theme-overrides">{css}</style>
+}

package/src/components/shell/theme-switcher.tsx

@@ -0,0 +1,97 @@
+import { MonitorIcon, MoonIcon, SunIcon } from '@/components/shell/appearance-icons'
+import { BOARD_MEASURE } from '@/components/shell/measure'
+import { setAppearanceAction } from '@/server/appearance-actions'
+import { getTranslator } from '@/server/i18n'
+import { currentColourScheme, currentThemeKey } from '@/server/theme'
+import { getBoardThemeStyle } from '@/server/theme-runtime'
+import { COLOUR_SCHEMES, type ColourSchemePreference } from '@/view/theme-preference'
+
+const SCHEME_ICON: Record<ColourSchemePreference, () => React.ReactNode> = {
+  light: SunIcon,
+  system: MonitorIcon,
+  dark: MoonIcon,
+}
+
+const SCHEME_LABEL_KEY: Record<ColourSchemePreference, string> = {
+  system: 'appearance.scheme.system',
+  light: 'appearance.scheme.light',
+  dark: 'appearance.scheme.dark',
+}
+
+const CONTROL =
+  'h-8 rounded-md border border-border bg-background px-2 text-xs text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export async function ThemeSwitcher() {
+  const [{ choices }, theme, scheme, t] = await Promise.all([
+    getBoardThemeStyle(),
+    currentThemeKey(),
+    currentColourScheme(),
+    getTranslator(),
+  ])
+
+  return (
+    <div className="border-t border-border bg-card text-card-foreground">
+      <div
+        className={`${BOARD_MEASURE} flex flex-wrap items-center justify-end gap-x-4 gap-y-2 py-2`}
+      >
+        <section
+          aria-label={t.t('appearance.section')}
+          className="flex flex-wrap items-center justify-end gap-x-4 gap-y-2"
+        >
+          {choices.length > 1 && (
+            <form action={setAppearanceAction} className="flex items-center gap-2">
+              <label htmlFor="appearance-theme" className="text-xs text-muted-foreground">
+                {t.t('appearance.theme')}
+              </label>
+              <select id="appearance-theme" name="theme" defaultValue={theme} className={CONTROL}>
+                {choices.map((choice) => (
+                  <option key={choice.key} value={choice.key}>
+                    {choice.title}
+                  </option>
+                ))}
+              </select>
+              <button
+                type="submit"
+                className="h-8 rounded-md border border-border px-2.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+              >
+                {t.t('appearance.apply')}
+              </button>
+            </form>
+          )}
+
+          <form action={setAppearanceAction}>
+            <span
+              role="group"
+              aria-label={t.t('appearance.schemeGroup')}
+              className="inline-flex items-center overflow-hidden rounded-md border border-border text-muted-foreground"
+            >
+              {COLOUR_SCHEMES.map((option) => {
+                const Icon = SCHEME_ICON[option]
+                const label = t.t(SCHEME_LABEL_KEY[option])
+                const selected = scheme === option
+                return (
+                  <button
+                    key={option}
+                    type="submit"
+                    name="scheme"
+                    value={option}
+                    title={label}
+                    aria-pressed={selected}
+                    className={`inline-flex h-8 items-center justify-center border-border px-2.5 transition-colors [&:not(:first-child)]:border-l focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring ${
+                      selected
+                        ? 'bg-primary text-primary-foreground'
+                        : 'bg-background hover:bg-accent hover:text-accent-foreground'
+                    }`}
+                  >
+                    <Icon />
+                    <span className="sr-only">{label}</span>
+                  </button>
+                )
+              })}
+            </span>
+          </form>
+        </section>
+      </div>
+    </div>
+  )
+}

package/src/components/shell/timezone-probe.tsx

@@ -0,0 +1,45 @@
+import { cspNonce } from '@/server/nonce'
+import { getViewerPreferences } from '@/server/viewer-preferences'
+import { TIMEZONE_COOKIE } from '@/view/timezone'
+
+const COOKIE_MAX_AGE = 60 * 60 * 24 * 365
+
+function probe(applied: string, automatic: boolean): string {
+  const name = JSON.stringify(TIMEZONE_COOKIE)
+
+  return `(function(){try{
+var n=${name},a=${JSON.stringify(applied)},auto=${automatic ? 'true' : 'false'};
+var zone=Intl.DateTimeFormat().resolvedOptions().timeZone;
+if(!zone)return;
+var read=function(){
+var m=document.cookie.match(new RegExp('(^|; )'+n+'=([^;]*)'));
+return m?decodeURIComponent(m[2]):null;
+};
+if(read()!==zone){
+document.cookie=n+'='+encodeURIComponent(zone)+';path=/;max-age=${COOKIE_MAX_AGE};samesite=lax'+(location.protocol==='https:'?';secure':'');
+}
+if(!auto||a===zone||read()!==zone)return;
+var k=n+'.reloaded';
+if(sessionStorage.getItem(k)===zone)return;
+sessionStorage.setItem(k,zone);
+location.reload();
+}catch(e){}})();`
+}
+
+export async function TimezoneProbe() {
+  let preferences: Awaited<ReturnType<typeof getViewerPreferences>>
+  try {
+    preferences = await getViewerPreferences()
+  } catch {
+    return null
+  }
+
+  return (
+    <script
+      nonce={await cspNonce()}
+      dangerouslySetInnerHTML={{
+        __html: probe(preferences.timezone, preferences.timezoneIsAutomatic),
+      }}
+    />
+  )
+}

package/src/components/shell/view-tabs.tsx

@@ -0,0 +1,60 @@
+import { cn } from '@meith/ui'
+
+export interface ViewTab {
+  readonly href: string
+  readonly label: string
+  readonly isCurrent: boolean
+  readonly count?: number
+}
+
+export function ViewTabs({
+  label,
+  tabs,
+  aside,
+  className,
+}: {
+  label: string
+  tabs: readonly ViewTab[]
+  aside?: React.ReactNode
+  className?: string
+}) {
+  if (tabs.length === 0) return null
+
+  return (
+    <nav aria-label={label} className={cn('flex items-center gap-x-3', className)}>
+      <ul className="-my-1.5 flex min-w-0 flex-1 items-center gap-1 overflow-x-auto py-1.5">
+        {tabs.map((tab) => (
+          <li key={tab.href} className="shrink-0">
+            <a
+              href={tab.href}
+              {...(tab.isCurrent ? { 'aria-current': 'page' as const } : {})}
+              className={cn(
+                'inline-flex h-9 items-center gap-1.5 rounded-full px-3.5 text-sm font-medium whitespace-nowrap transition-colors',
+                'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+                tab.isCurrent
+                  ? 'bg-primary font-semibold text-primary-foreground'
+                  : 'text-muted-foreground hover:bg-accent hover:text-foreground',
+              )}
+            >
+              {tab.label}
+              {tab.count !== undefined && tab.count > 0 && (
+                <span
+                  className={cn(
+                    'rounded-full px-1.5 text-xs font-semibold tabular-nums',
+                    tab.isCurrent ? 'bg-primary-foreground/20' : 'bg-secondary',
+                  )}
+                >
+                  {tab.count}
+                </span>
+              )}
+            </a>
+          </li>
+        ))}
+      </ul>
+
+      {aside !== undefined && (
+        <span className="shrink-0 text-xs text-muted-foreground">{aside}</span>
+      )}
+    </nav>
+  )
+}

package/src/config.ts

@@ -0,0 +1,13 @@
+/**
+ * `@meith/web/config` — the surface a board's own `community.config.ts`
+ * builds against.
+ *
+ * A scaffolded board depends on `@meith/web` for the app itself, and imports
+ * its board-time registry through this subpath rather than reaching into
+ * `@meith/core` directly. That indirection is what lets `@meith/web` change
+ * which package actually defines `defineForumConfig` without every board's
+ * `community.config.ts` following along.
+ */
+
+export type { ForumConfig, InstalledPlugin, InstalledTheme, MessageBundle } from '@meith/core'
+export { defineForumConfig } from '@meith/core'

package/src/server/absent-services.ts

@@ -0,0 +1,29 @@
+export const ABSENT_SERVICES = {
+  threadWrites: null,
+  postWrites: null,
+  moderationQueue: null,
+  reports: null,
+  threadTools: null,
+  threadSurgery: null,
+  inlineModeration: null,
+  warnings: null,
+  warningBans: null,
+  modcp: null,
+  notifications: null,
+  subscriptions: null,
+  memberSettings: null,
+  profileFields: null,
+  messages: null,
+  relations: null,
+  reputation: null,
+  polls: null,
+  drafts: null,
+  signatures: null,
+  adminSessions: null,
+  adminLog: null,
+  attachments: null,
+  avatars: null,
+  readState: null,
+  threadViews: null,
+  scheduler: null,
+} as const