@meith/web 0.16.0

package/src/components/shell/notification-menu.tsx

@@ -0,0 +1,361 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { Popover } from '@meith/ui/popover'
+import { Tabs } from '@meith/ui/tabs'
+
+import type { FormState } from '@/server/auth-form-state'
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import {
+  markAllNotificationsSeenAction,
+  markMessagesSeenAction,
+  markNotificationSeenAction,
+} from '@/server/notification-menu-actions'
+import type {
+  NotificationMenuModel,
+  NotificationMenuRow,
+  NotificationMenuTab,
+  NotificationMenuTabKind,
+} from '@/view/notification-menu'
+
+import { type Copy, formatFromCopy, fromCopy } from './copy'
+
+const UNREAD_KEY: Readonly<Record<NotificationMenuTabKind, string>> = {
+  notifications: 'board.notificationMenu.unreadNotifications',
+  messages: 'board.notificationMenu.unreadMessages',
+  mod: 'board.notificationMenu.unreadMod',
+}
+
+function BellIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 20 20"
+      className="size-5"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M10 2.5a4.5 4.5 0 0 0-4.5 4.5c0 3.5-1.5 4.5-1.5 4.5h12s-1.5-1-1.5-4.5A4.5 4.5 0 0 0 10 2.5Z" />
+      <path d="M8.5 14.5a1.75 1.75 0 0 0 3 0" />
+    </svg>
+  )
+}
+
+function CountPill({ value }: { value: number }) {
+  return (
+    <span
+      aria-hidden="true"
+      className="inline-flex min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[0.625rem] font-semibold leading-4 text-primary-foreground tabular-nums"
+    >
+      {value > 99 ? '99+' : value}
+    </span>
+  )
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 16 16"
+      className="size-4"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="m3.5 8.5 3 3 6-7" />
+    </svg>
+  )
+}
+
+function HiddenFields({
+  fields,
+}: {
+  fields: readonly { readonly name: string; readonly value: number }[]
+}) {
+  return (
+    <>
+      {fields.map((field) => (
+        <input
+          key={`${field.name}-${field.value}`}
+          type="hidden"
+          name={field.name}
+          value={field.value}
+        />
+      ))}
+    </>
+  )
+}
+
+function SeenIconForm({
+  action,
+  hidden,
+  label,
+}: {
+  action: (prev: FormState, form: FormData) => Promise<FormState>
+  hidden: readonly { readonly name: string; readonly value: number }[]
+  label: string
+}) {
+  const [, formAction, isPending] = useActionState(action, EMPTY_STATE)
+
+  return (
+    <form action={formAction} className="shrink-0">
+      <HiddenFields fields={hidden} />
+      <button
+        type="submit"
+        disabled={isPending}
+        title={label}
+        className="inline-flex size-7 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:opacity-60"
+      >
+        <span className="sr-only">{label}</span>
+        <CheckIcon />
+      </button>
+    </form>
+  )
+}
+
+function SeenForm({
+  action,
+  hidden,
+  label,
+  working,
+}: {
+  action: (prev: FormState, form: FormData) => Promise<FormState>
+  hidden: readonly { readonly name: string; readonly value: number }[]
+  label: string
+  working: string
+}) {
+  const [, formAction, isPending] = useActionState(action, EMPTY_STATE)
+
+  return (
+    <form action={formAction}>
+      <HiddenFields fields={hidden} />
+      <button
+        type="submit"
+        disabled={isPending}
+        className="shrink-0 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:opacity-60"
+      >
+        {isPending ? working : label}
+      </button>
+    </form>
+  )
+}
+
+function Row({
+  row,
+  kind,
+  copy,
+}: {
+  row: NotificationMenuRow
+  kind: NotificationMenuTabKind
+  copy: Copy
+}) {
+  const body = (
+    <>
+      <span className="flex items-baseline justify-between gap-2">
+        <span className="truncate text-sm font-medium text-foreground">
+          {row.tag !== null && (
+            <span className="mr-1.5 text-[0.625rem] font-semibold uppercase tracking-wide text-muted-foreground">
+              {row.tag}
+            </span>
+          )}
+          {row.subject}
+        </span>
+        <time dateTime={row.at.iso} className="shrink-0 text-[0.6875rem] text-muted-foreground">
+          {row.at.label}
+        </time>
+      </span>
+      {row.meta !== null && (
+        <span className="mt-0.5 block truncate text-xs text-muted-foreground">{row.meta}</span>
+      )}
+    </>
+  )
+
+  return (
+    <li className="flex items-center gap-1 rounded-md pr-1">
+      {row.href === null ? (
+        <span className="min-w-0 flex-1 px-2 py-2">{body}</span>
+      ) : (
+        <a
+          href={row.href}
+          className="min-w-0 flex-1 rounded-md px-2 py-2 hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        >
+          {body}
+        </a>
+      )}
+
+      {row.isUnread && row.seenId !== null && (
+        <SeenIconForm
+          action={kind === 'messages' ? markMessagesSeenAction : markNotificationSeenAction}
+          hidden={[
+            kind === 'messages'
+              ? { name: 'copyId', value: row.seenId }
+              : { name: 'notificationId', value: row.seenId },
+          ]}
+          label={fromCopy(copy, 'board.notificationMenu.markSeen')}
+        />
+      )}
+    </li>
+  )
+}
+
+function Panel({ tab, copy }: { tab: NotificationMenuTab; copy: Copy }) {
+  const unreadRows = tab.rows.filter((row) => row.isUnread && row.seenId !== null)
+
+  return (
+    <Tabs.Panel
+      value={tab.kind}
+      className="flex flex-col gap-1 px-1 pb-1 focus-visible:outline-none"
+    >
+      {tab.rows.length === 0 ? (
+        <p className="px-3 py-6 text-center text-sm text-muted-foreground">{tab.emptyLabel}</p>
+      ) : (
+        <ul className="flex max-h-80 flex-col gap-0.5 overflow-y-auto">
+          {tab.rows.map((row) => (
+            <Row key={row.key} row={row} kind={tab.kind} copy={copy} />
+          ))}
+        </ul>
+      )}
+
+      <div className="flex items-center justify-between gap-2 border-t border-border px-2 pt-2">
+        <a
+          href={tab.allHref}
+          className="rounded-md px-2 py-1 text-xs font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        >
+          {fromCopy(copy, 'board.notificationMenu.viewAll')}
+        </a>
+
+        {unreadRows.length > 0 && (
+          <SeenForm
+            action={
+              tab.kind === 'messages' ? markMessagesSeenAction : markAllNotificationsSeenAction
+            }
+            hidden={
+              tab.kind === 'messages'
+                ? unreadRows.flatMap((row) =>
+                    row.seenId === null ? [] : [{ name: 'copyId', value: row.seenId }],
+                  )
+                : []
+            }
+            label={fromCopy(copy, 'board.notificationMenu.markAllSeen')}
+            working={fromCopy(copy, 'form.working')}
+          />
+        )}
+      </div>
+    </Tabs.Panel>
+  )
+}
+
+export function NotificationMenu({ model, copy }: { model: NotificationMenuModel; copy: Copy }) {
+  const first = model.tabs[0]?.kind ?? 'notifications'
+
+  return (
+    <div className="flex items-center">
+      <noscript
+        dangerouslySetInnerHTML={{
+          __html:
+            '<style>[data-notif="menu"]{display:none}[data-notif="plain"]{display:flex!important}</style>',
+        }}
+      />
+
+      <span data-notif="menu" className="flex items-center">
+        <Popover.Root>
+          <Popover.Trigger className="relative inline-flex size-9 items-center justify-center rounded-md border border-transparent text-muted-foreground transition-colors hover:bg-muted hover:text-foreground data-[popup-open]:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring">
+            <BellIcon />
+            {model.total > 0 && (
+              <span className="absolute -right-0.5 -top-0.5">
+                <CountPill value={model.total} />
+              </span>
+            )}
+            <span className="sr-only">
+              {model.total > 0
+                ? formatFromCopy(copy, 'board.notificationMenu.totalUnread', { count: model.total })
+                : fromCopy(copy, 'board.notificationMenu.trigger')}
+            </span>
+          </Popover.Trigger>
+
+          <Popover.Portal>
+            <Popover.Positioner
+              align="end"
+              sideOffset={8}
+              collisionPadding={8}
+              className="z-50 outline-none"
+            >
+              <Popover.Popup className="w-[min(22rem,calc(100vw-1rem))] origin-[var(--transform-origin)] overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-lg transition-[opacity,transform] duration-100 ease-out data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0">
+                <div className="flex items-center justify-between border-b border-border px-3 py-2">
+                  <Popover.Title className="text-sm font-semibold">
+                    {fromCopy(copy, 'board.notificationMenu.heading')}
+                  </Popover.Title>
+                  <Popover.Close className="rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring">
+                    <span className="sr-only">
+                      {fromCopy(copy, 'board.notificationMenu.close')}
+                    </span>
+                    <svg
+                      aria-hidden="true"
+                      viewBox="0 0 14 14"
+                      className="size-3.5"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.6"
+                      strokeLinecap="round"
+                    >
+                      <path d="m3.5 3.5 7 7m0-7-7 7" />
+                    </svg>
+                  </Popover.Close>
+                </div>
+
+                <Tabs.Root defaultValue={first}>
+                  <Tabs.List className="flex gap-1 border-b border-border p-2">
+                    {model.tabs.map((tab) => (
+                      <Tabs.Tab
+                        key={tab.kind}
+                        value={tab.kind}
+                        className="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+                      >
+                        {tab.label}
+                        {tab.unread > 0 && (
+                          <span className="inline-flex min-w-4 items-center justify-center rounded-full bg-current/20 px-1 text-[0.625rem] font-semibold leading-4 tabular-nums">
+                            {tab.unread > 99 ? '99+' : tab.unread}
+                          </span>
+                        )}
+                      </Tabs.Tab>
+                    ))}
+                  </Tabs.List>
+
+                  {model.tabs.map((tab) => (
+                    <Panel key={tab.kind} tab={tab} copy={copy} />
+                  ))}
+                </Tabs.Root>
+              </Popover.Popup>
+            </Popover.Positioner>
+          </Popover.Portal>
+        </Popover.Root>
+      </span>
+
+      <nav
+        data-notif="plain"
+        style={{ display: 'none' }}
+        aria-label={fromCopy(copy, 'board.notificationMenu.trigger')}
+        className="flex-wrap items-center gap-x-2 gap-y-1"
+      >
+        {model.tabs
+          .filter((tab) => tab.unread > 0)
+          .map((tab) => (
+            <a
+              key={tab.kind}
+              href={tab.allHref}
+              className="inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-xs font-medium text-foreground hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+            >
+              <span className="tabular-nums">{tab.unread}</span>
+              <span className="sr-only"> {fromCopy(copy, UNREAD_KEY[tab.kind])}</span>
+            </a>
+          ))}
+      </nav>
+    </div>
+  )
+}

package/src/components/shell/offline-notice.tsx

@@ -0,0 +1,29 @@
+import { buttonVariants, Card, CardContent } from '@meith/ui'
+
+import { type Copy, fromCopy } from './copy-record'
+
+export function OfflineNotice({ message, copy }: { message: string; copy: Copy }) {
+  return (
+    <main
+      id="board-content"
+      tabIndex={-1}
+      className="flex min-h-screen flex-1 items-center justify-center px-6 py-12"
+    >
+      <Card className="w-full max-w-lg">
+        <CardContent className="p-6">
+          <p className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
+            {fromCopy(copy, 'offline.kicker')}
+          </p>
+          <h1 className="mt-1 text-2xl font-semibold tracking-tight text-balance">
+            {fromCopy(copy, 'offline.title')}
+          </h1>
+          <p className="mt-2 text-sm whitespace-pre-line text-muted-foreground">{message}</p>
+
+          <a href="/login" className={`mt-5 ${buttonVariants({ variant: 'primary' })}`}>
+            {fromCopy(copy, 'offline.logIn')}
+          </a>
+        </CardContent>
+      </Card>
+    </main>
+  )
+}

package/src/components/shell/onboarding-banner.tsx

@@ -0,0 +1,39 @@
+import { BOARD_MEASURE } from '@/components/shell/measure'
+import type { OnboardingNoticeModel } from '@/server/onboarding'
+import { dismissOnboardingAction } from '@/server/onboarding-actions'
+
+export function OnboardingBanner({
+  panel,
+  message,
+  ctaHref,
+  ctaLabel,
+  dismissLabel,
+}: OnboardingNoticeModel) {
+  return (
+    <div className="border-b border-border bg-muted text-sm text-foreground">
+      <div className={`${BOARD_MEASURE} flex flex-wrap items-center justify-between gap-3 py-2`}>
+        <p>
+          {message}
+          {ctaHref !== null && ctaLabel !== null && (
+            <>
+              {' '}
+              <a
+                href={ctaHref}
+                className="font-medium underline underline-offset-2 hover:no-underline"
+              >
+                {ctaLabel}
+              </a>
+            </>
+          )}
+        </p>
+
+        <form action={dismissOnboardingAction}>
+          <input type="hidden" name="panel" value={panel} />
+          <button type="submit" className="text-xs text-muted-foreground hover:text-foreground">
+            {dismissLabel}
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,167 @@
+import type { Actor } from '@meith/authorization'
+import { currentRequestId } from '@meith/core/logger'
+import { requireSlot, slotCopy } from '@meith/theme-kit'
+
+import { LogoutForm } from '@/components/account/logout-form'
+import { NotificationMenu } from '@/components/shell/notification-menu'
+import { OnboardingBanner } from '@/components/shell/onboarding-banner'
+import { ThemeSwitcher } from '@/components/shell/theme-switcher'
+import { avatarsFor } from '@/server/avatars'
+import { currentLogo } from '@/server/branding'
+import { getContainer } from '@/server/container'
+import { getTranslator } from '@/server/i18n'
+import { legalFooterLinks } from '@/server/legal'
+import { unreadMessageCount } from '@/server/messages'
+import { boardNavigation } from '@/server/navigation'
+import { buildNotificationMenuModel } from '@/server/notification-menu'
+import { unreadNotificationCount } from '@/server/notifications'
+import { onboardingBanner } from '@/server/onboarding'
+import { boardRegion, filterView, viewerRef } from '@/server/plugin-view'
+import { touchCurrentLocation } from '@/server/presence'
+import { registrationOpen } from '@/server/registration'
+import { touchActivity } from '@/server/relations'
+import { getSettings } from '@/server/settings'
+import { currentTheme } from '@/server/theme'
+import { getViewerPreferences } from '@/server/viewer-preferences'
+import { buildForumJumpModel } from '@/view/forum-jump'
+import { notificationMenuCopy } from '@/view/notification-menu'
+import {
+  buildFooterModel,
+  buildHeaderModel,
+  buildUserPanelModel,
+  buildViewerModel,
+} from '@/view/shell'
+
+async function buildJumpModel(actor: Actor) {
+  const { authorizer, forums } = getContainer()
+  const [rows, visible] = await Promise.all([
+    forums.listAll(),
+    authorizer.forumIdsWhere(actor, 'forum.view'),
+  ])
+
+  return buildForumJumpModel({ rows, visibleForumIds: new Set(visible), t: await getTranslator() })
+}
+
+export async function PageShell({ actor, children }: { actor: Actor; children: React.ReactNode }) {
+  const theme = await currentTheme()
+  const Shell = requireSlot(theme, 'Shell')
+  const Header = requireSlot(theme, 'Header')
+  const UserPanel = requireSlot(theme, 'UserPanel')
+  const Footer = requireSlot(theme, 'Footer')
+  const ForumJump = requireSlot(theme, 'ForumJump')
+
+  const settings = await getSettings()
+  const boardTitle = settings.get('board.name')
+
+  const displayName =
+    actor.userId === null
+      ? null
+      : ((
+          await getContainer()
+            .memberProfiles.findPublicById(actor.userId)
+            .catch(() => null)
+        )?.username ?? null)
+
+  const ownAvatar =
+    actor.userId === null ? null : ((await avatarsFor([actor.userId])).get(actor.userId) ?? null)
+
+  const viewer = buildViewerModel(actor, {
+    displayName,
+    canAccessAdminCp: actor.global.canAccessAdminCp === true,
+    canAccessModCp: actor.global.canAccessModCp === true,
+    avatarUrl: ownAvatar,
+  })
+  const header = buildHeaderModel(
+    viewer,
+    await boardNavigation(actor, viewer),
+    boardTitle,
+    await currentLogo(boardTitle),
+  )
+
+  const unreadNotifications = await unreadNotificationCount(actor.userId)
+
+  const unreadMessages = await unreadMessageCount(actor.userId)
+
+  const notificationMenu = viewer.isGuest ? null : await buildNotificationMenuModel(actor)
+
+  await touchActivity(actor.userId)
+
+  await touchCurrentLocation()
+
+  const preferences = await getViewerPreferences()
+
+  const pluginContext = { ...viewerRef(actor), requestId: currentRequestId() ?? null }
+
+  const shellModel = await filterView('view.shell', { boardTitle, viewer }, pluginContext)
+  const headerModel = await filterView('view.header', header, pluginContext)
+  const userPanelModel = await filterView(
+    'view.user-panel',
+    buildUserPanelModel(viewer, {
+      unreadNotifications,
+      unreadMessages,
+      registrationOpen: await registrationOpen(),
+      t: await getTranslator(),
+    }),
+    pluginContext,
+  )
+  const footerModel = await filterView(
+    'view.footer',
+    buildFooterModel(
+      await legalFooterLinks(),
+      boardTitle,
+      preferences.timezone,
+      await getTranslator(),
+    ),
+    pluginContext,
+  )
+
+  const built = await buildJumpModel(actor).catch(() => null)
+  const jump = built === null ? null : await filterView('view.forum-jump', built, pluginContext)
+
+  const onboarding = await onboardingBanner(actor).catch(() => null)
+
+  const translator = await getTranslator()
+
+  return (
+    <Shell
+      boardTitle={shellModel.boardTitle}
+      viewer={shellModel.viewer}
+      copy={slotCopy(theme, 'Shell', translator)}
+    >
+      <Header {...headerModel} copy={slotCopy(theme, 'Header', translator)}>
+        <UserPanel
+          {...userPanelModel}
+          {...(notificationMenu === null
+            ? {}
+            : {
+                regions: {
+                  notifications: (
+                    <NotificationMenu
+                      model={notificationMenu}
+                      copy={notificationMenuCopy(translator)}
+                    />
+                  ),
+                },
+              })}
+          copy={slotCopy(theme, 'UserPanel', translator)}
+        >
+          {viewer.isGuest ? null : <LogoutForm label={translator.t('nav.logOut')} />}
+        </UserPanel>
+      </Header>
+
+      {await boardRegion('header.notice', actor)}
+
+      {onboarding !== null && <OnboardingBanner {...onboarding} />}
+
+      {children}
+
+      {jump !== null && jump.forums.length > 0 && (
+        <ForumJump {...jump} copy={slotCopy(theme, 'ForumJump', translator)} />
+      )}
+
+      <ThemeSwitcher />
+
+      <Footer {...footerModel} copy={slotCopy(theme, 'Footer', translator)} />
+    </Shell>
+  )
+}

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

@@ -0,0 +1,95 @@
+import { buttonVariants, cn, Empty, EmptyDescription, EmptyTitle } from '@meith/ui'
+
+export const PANEL_LIST =
+  'flex flex-col divide-y divide-border overflow-hidden rounded-xl border border-border bg-card shadow-elevation'
+
+export const PANEL_ROW =
+  'flex flex-wrap items-center justify-between gap-x-3 gap-y-2 px-4 py-3 transition-colors hover:bg-muted/40'
+
+export const PANEL_CARD =
+  'flex flex-col gap-3 rounded-xl border border-border bg-card p-4 shadow-elevation'
+
+export const PANEL_NOTE =
+  'rounded-xl border border-border bg-card p-4 text-sm text-muted-foreground shadow-elevation'
+
+export function PanelList({
+  children,
+  className,
+  label,
+}: {
+  readonly children: React.ReactNode
+  readonly className?: string
+  readonly label?: string
+}) {
+  return (
+    <ul
+      className={cn(PANEL_LIST, className)}
+      {...(label === undefined ? {} : { 'aria-label': label })}
+    >
+      {children}
+    </ul>
+  )
+}
+
+export function PanelRow({
+  title,
+  meta,
+  badges,
+  actions,
+  className,
+}: {
+  readonly title: React.ReactNode
+  readonly meta?: React.ReactNode
+  readonly badges?: React.ReactNode
+  readonly actions?: React.ReactNode
+  readonly className?: string
+}) {
+  return (
+    <li className={cn(PANEL_ROW, className)}>
+      <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <span className="flex min-w-0 flex-wrap items-center gap-2">
+          <span className="truncate text-sm font-medium text-foreground">{title}</span>
+          {badges}
+        </span>
+        {meta !== undefined && <span className="text-xs text-muted-foreground">{meta}</span>}
+      </span>
+
+      {actions !== undefined && (
+        <span className="flex shrink-0 flex-wrap items-center gap-2 text-sm">{actions}</span>
+      )}
+    </li>
+  )
+}
+
+export function PanelActionLink({
+  href,
+  children,
+  variant = 'outline',
+}: {
+  readonly href: string
+  readonly children: React.ReactNode
+  readonly variant?: 'outline' | 'primary' | 'ghost'
+}) {
+  return (
+    <a href={href} className={buttonVariants({ variant, size: 'sm' })}>
+      {children}
+    </a>
+  )
+}
+
+export function PanelEmpty({
+  title,
+  description,
+}: {
+  readonly title: string
+  readonly description?: React.ReactNode
+}) {
+  return (
+    <div className="rounded-xl border border-border bg-card shadow-elevation">
+      <Empty className="py-10">
+        <EmptyTitle>{title}</EmptyTitle>
+        {description !== undefined && <EmptyDescription>{description}</EmptyDescription>}
+      </Empty>
+    </div>
+  )
+}