@meith/theme-phasebook 0.1.0

package/src/slots/pagination.tsx

@@ -0,0 +1,73 @@
+import { cn } from '@meith/ui'
+import type { PaginationModel } from '@meith/theme-kit'
+
+import { NUMERIC, PILL } from '../shared'
+
+export function Pagination({ page, pageCount, pages, previousHref, nextHref }: PaginationModel) {
+  if (pageCount <= 1 && previousHref === null && nextHref === null) return null
+
+  const disabled = cn(PILL, 'pointer-events-none opacity-40')
+
+  return (
+    <nav
+      aria-label="Pagination"
+      className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-card px-3 py-2.5 shadow-elevation"
+    >
+      {previousHref === null ? (
+        <span className={disabled} aria-hidden="true">
+          Previous
+        </span>
+      ) : (
+        <a href={previousHref} rel="prev" className={PILL}>
+          Previous
+        </a>
+      )}
+
+      <ol className="flex items-center gap-1">
+        {pages.map((entry, index) => {
+          const previous = pages[index - 1]
+          const gap = previous !== undefined && entry.page - previous.page > 1
+
+          return (
+            <li key={entry.page} className="flex items-center gap-1">
+              {gap && (
+                <span aria-hidden="true" className="px-1 text-sm text-muted-foreground">
+                  …
+                </span>
+              )}
+              <a
+                href={entry.href}
+                aria-current={entry.isCurrent ? 'page' : undefined}
+                aria-label={`Page ${entry.page}`}
+                className={cn(
+                  'inline-flex size-9 items-center justify-center rounded-full text-sm font-semibold transition-colors',
+                  NUMERIC,
+                  entry.isCurrent
+                    ? 'bg-primary text-primary-foreground'
+                    : 'hidden text-muted-foreground hover:bg-accent hover:text-foreground sm:inline-flex',
+                )}
+              >
+                {entry.page}
+              </a>
+            </li>
+          )
+        })}
+
+        <li className={`ml-1 text-xs whitespace-nowrap text-muted-foreground ${NUMERIC}`}>
+          <span className="sr-only">Page </span>
+          {page} of {pageCount}
+        </li>
+      </ol>
+
+      {nextHref === null ? (
+        <span className={disabled} aria-hidden="true">
+          Next
+        </span>
+      ) : (
+        <a href={nextHref} rel="next" className={PILL}>
+          Next
+        </a>
+      )}
+    </nav>
+  )
+}

package/src/slots/post-actions.tsx

@@ -0,0 +1,45 @@
+import type { PostActionsSlotModel } from '@meith/theme-kit'
+
+interface Action {
+  readonly href: string
+  readonly label: string
+}
+
+const ACTION =
+  'inline-flex h-8 flex-1 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-semibold ' +
+  'text-muted-foreground transition-colors hover:bg-accent hover:text-foreground'
+
+export function PostActions({ actions, children }: PostActionsSlotModel) {
+  const reader: Action[] = [
+    actions.quoteHref === null ? null : { href: actions.quoteHref, label: 'Quote' },
+    actions.editHref === null ? null : { href: actions.editHref, label: 'Edit' },
+    actions.rateHref === null ? null : { href: actions.rateHref, label: 'Rate' },
+    actions.reportHref === null ? null : { href: actions.reportHref, label: 'Report' },
+  ].filter((action): action is Action => action !== null)
+
+  const staff: Action[] = [
+    actions.restoreHref === null ? null : { href: actions.restoreHref, label: 'Restore' },
+    actions.warnHref === null ? null : { href: actions.warnHref, label: 'Warn' },
+    actions.moderateHref === null ? null : { href: actions.moderateHref, label: 'Moderate' },
+  ].filter((action): action is Action => action !== null)
+
+  if (reader.length === 0 && staff.length === 0 && children === undefined) return null
+
+  return (
+    <nav aria-label="Post actions" className="flex flex-wrap items-center gap-1">
+      {reader.map((action) => (
+        <a key={action.href} href={action.href} className={ACTION}>
+          {action.label}
+        </a>
+      ))}
+
+      {staff.map((action) => (
+        <a key={action.href} href={action.href} className={ACTION}>
+          {action.label}
+        </a>
+      ))}
+
+      {children !== undefined && <span className="ms-auto empty:hidden">{children}</span>}
+    </nav>
+  )
+}

package/src/slots/post-bit.tsx

@@ -0,0 +1,243 @@
+import { cn } from '@meith/ui'
+import type { PostBitSlotModel } from '@meith/theme-kit'
+
+import {
+  Circle,
+  LINK,
+  MUTED_LINK,
+  NUMERIC,
+  OnlineDot,
+  Stamp,
+  Tag,
+  UserRef,
+  count,
+  plural,
+} from '../shared'
+
+type Post = PostBitSlotModel['post']
+
+const VISIBILITY_TINT = {
+  visible: '',
+  unapproved: 'border-thread-unapproved/50 bg-post-unapproved',
+  deleted: 'border-thread-deleted/50 bg-destructive/5',
+} as const
+
+function StatusBanner({ visibility }: { visibility: Post['visibility'] }) {
+  if (visibility === 'visible') return null
+
+  const deleted = visibility === 'deleted'
+
+  return (
+    <p
+      className={cn(
+        'flex items-center gap-2 border-b px-4 py-2 text-xs font-semibold',
+        deleted
+          ? 'border-thread-deleted/30 text-thread-deleted'
+          : 'border-thread-unapproved/30 text-thread-unapproved',
+      )}
+    >
+      {deleted ? 'Deleted post.' : 'Waiting for approval.'}
+      <span className="font-normal text-muted-foreground">Only moderators can see this.</span>
+    </p>
+  )
+}
+
+function GroupBadge({ badge }: { badge: NonNullable<Post['author']['badge']> }) {
+  const image = (
+    <img
+      src={badge.src}
+      alt=""
+      aria-hidden="true"
+      className="h-4 w-auto max-w-full object-contain"
+      loading="lazy"
+      decoding="async"
+    />
+  )
+
+  if (badge.darkSrc === null) return image
+
+  return (
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcSet={badge.darkSrc} />
+      {image}
+    </picture>
+  )
+}
+
+function Attachments({ files }: { files: Post['attachments'] }) {
+  const images = files.filter((file) => file.isImage)
+  const rest = files.filter((file) => !file.isImage)
+
+  return (
+    <>
+      {images.length > 0 && (
+        <ul
+          className={cn(
+            'grid gap-0.5 border-y border-border',
+            images.length === 1 ? 'grid-cols-1' : 'grid-cols-2',
+          )}
+        >
+          {images.map((file) => (
+            <li key={file.id} className="min-w-0">
+              <a href={file.href} className="block">
+                <img
+                  src={file.thumbnailHref ?? file.href}
+                  alt={file.filename}
+                  width={file.width ?? undefined}
+                  height={file.height ?? undefined}
+                  loading="lazy"
+                  decoding="async"
+                  className="max-h-96 w-full bg-surface object-cover"
+                />
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {rest.length > 0 && (
+        <ul className="flex flex-col gap-1 px-4 py-2.5">
+          {rest.map((file) => (
+            <li key={file.id} className="min-w-0">
+              <a
+                href={file.href}
+                className="flex items-center gap-2 rounded-lg bg-secondary px-3 py-2 text-xs transition-colors hover:bg-accent"
+              >
+                <span className="truncate font-semibold text-foreground">{file.filename}</span>
+                <span className="shrink-0 text-muted-foreground">{file.size}</span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </>
+  )
+}
+
+export function PostBit({ post, select, regions }: PostBitSlotModel) {
+  const { author } = post
+
+  return (
+    <article
+      id={`post-${post.number}`}
+      data-post-id={post.id}
+      data-visibility={post.visibility}
+      className={cn(
+        'overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-elevation',
+        VISIBILITY_TINT[post.visibility],
+      )}
+    >
+      <StatusBanner visibility={post.visibility} />
+
+      <header className="flex items-start gap-3.5 px-5 pt-4">
+        {select !== null && (
+          <label className="mt-3 flex shrink-0 items-start">
+            <span className="sr-only">{select.label}</span>
+            <input
+              type="checkbox"
+              name={select.name}
+              value={select.value}
+              form={select.formId}
+              className="size-4 accent-primary"
+            />
+          </label>
+        )}
+
+        <span className="relative shrink-0">
+          <Circle src={author.avatarUrl} name={author.username} size={48} />
+          {author.isOnline && <OnlineDot />}
+        </span>
+
+        <div className="min-w-0 flex-1">
+          <p className="flex flex-wrap items-center gap-x-2 gap-y-1.5 text-[0.9375rem] leading-snug">
+            <UserRef user={author} className="text-[0.9375rem]" />
+            {author.badge != null && <GroupBadge badge={author.badge} />}
+            {author.title !== null && <Tag>{author.title}</Tag>}
+          </p>
+
+          <p className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
+            <a href={post.permalink} className={MUTED_LINK}>
+              <Stamp at={post.postedAt} />
+            </a>
+            <span aria-hidden="true">·</span>
+            <span className={NUMERIC}>#{post.number}</span>
+            {author.isOnline && (
+              <>
+                <span aria-hidden="true">·</span>
+                <span className="text-moderation-approved">Online</span>
+              </>
+            )}
+          </p>
+
+          {regions.pluginBadges !== undefined && (
+            <p className="mt-2 flex flex-wrap items-center gap-1.5 empty:hidden">
+              {regions.pluginBadges}
+            </p>
+          )}
+        </div>
+
+        <p className={`shrink-0 text-right text-xs leading-relaxed text-muted-foreground ${NUMERIC}`}>
+          {count(author.postCount)} {plural(author.postCount, 'post', 'posts')}
+          {author.reputation != null && (
+            <>
+              <br />
+              {count(author.reputation)} rep
+            </>
+          )}
+        </p>
+      </header>
+
+      {post.ignored !== null ? (
+        <p className="px-5 py-5 text-sm text-muted-foreground">
+          You are ignoring{' '}
+          <span className="font-semibold text-foreground">{post.ignored.authorUsername}</span>. This
+          post is hidden.{' '}
+          <a href={post.ignored.revealHref} className={LINK}>
+            Show it anyway
+          </a>
+        </p>
+      ) : (
+        <div className="px-5 pt-3 pb-4">
+          <div
+            className="prose-md text-[0.9375rem]"
+            dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
+          />
+
+          {post.editedNote !== null && (
+            <p className="mt-3 text-xs text-muted-foreground">{post.editedNote}</p>
+          )}
+        </div>
+      )}
+
+      {post.attachments.length > 0 && <Attachments files={post.attachments} />}
+
+      {post.ignored === null && author.signatureHtml !== null && (
+        <div
+          className="prose-md border-t border-border px-4 py-2 text-xs text-muted-foreground"
+          dangerouslySetInnerHTML={{ __html: author.signatureHtml }}
+        />
+      )}
+
+      {author.fields.length > 0 && post.ignored === null && (
+        <dl className="flex flex-wrap gap-x-4 gap-y-0.5 border-t border-border px-4 py-2 text-xs text-muted-foreground">
+          {author.fields.map((field) => (
+            <div key={field.label} className="flex gap-1">
+              <dt className="font-semibold">{field.label}:</dt>
+              <dd className="truncate">{field.value}</dd>
+            </div>
+          ))}
+        </dl>
+      )}
+
+      {regions.pluginFooter !== undefined && (
+        <div className="border-t border-border px-4 py-2 text-xs empty:hidden">
+          {regions.pluginFooter}
+        </div>
+      )}
+
+      {regions.actions !== null && (
+        <footer className="border-t border-border px-2 py-1 empty:hidden">{regions.actions}</footer>
+      )}
+    </article>
+  )
+}

package/src/slots/post-form.tsx

@@ -0,0 +1,41 @@
+import type { PostFormModel } from '@meith/theme-kit'
+
+import { FEED, PAGE, PILL } from '../shared'
+
+export function PostForm({
+  heading,
+  cancelHref,
+  cancelLabel,
+  errorMessage,
+  regions,
+}: PostFormModel) {
+  return (
+    <div className={`${PAGE} py-4 sm:py-6`}>
+      <div className={`${FEED} flex flex-col gap-4`}>
+        {errorMessage !== null && (
+          <p
+            role="alert"
+            className="rounded-lg border border-destructive/30 bg-destructive/8 px-4 py-3 text-sm shadow-elevation"
+          >
+            <span className="font-semibold">Cannot post.</span> {errorMessage}
+          </p>
+        )}
+
+        <section className="overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-elevation">
+          <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3">
+            <h1 className="text-lg leading-tight font-bold tracking-tight text-balance">
+              {heading}
+            </h1>
+            <a href={cancelHref} className={PILL}>
+              {cancelLabel}
+            </a>
+          </div>
+
+          {regions.toolbar}
+
+          <div className="px-4 py-4">{regions.form}</div>
+        </section>
+      </div>
+    </div>
+  )
+}

package/src/slots/redirect-notice.tsx

@@ -0,0 +1,24 @@
+import type { RedirectNoticeModel } from '@meith/theme-kit'
+
+import { NUMERIC, PILL_PRIMARY } from '../shared'
+
+export function RedirectNotice({ message, targetHref, delaySeconds }: RedirectNoticeModel) {
+  return (
+    <section className="w-full max-w-lg rounded-lg border border-border bg-card text-card-foreground shadow-elevation">
+      <div className="px-5 py-6">
+        <p className="text-xs font-semibold text-muted-foreground">Redirecting</p>
+        <h1 className="mt-1 text-2xl leading-tight font-bold tracking-tight">Please wait</h1>
+        <p className="mt-2 text-sm text-muted-foreground">{message}</p>
+
+        <div className="mt-5 flex flex-wrap items-center gap-3">
+          <a href={targetHref} className={PILL_PRIMARY}>
+            Continue now
+          </a>
+          <span className={`text-xs text-muted-foreground ${NUMERIC}`}>
+            Continuing on its own in {delaySeconds} {delaySeconds === 1 ? 'second' : 'seconds'}.
+          </span>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/slots/search-form.tsx

@@ -0,0 +1,99 @@
+import type { OptionModel, SearchFormModel } from '@meith/theme-kit'
+
+import { PILL_PRIMARY } from '../shared'
+
+const LABEL = 'mb-1 block text-sm font-semibold text-foreground'
+
+const SELECT =
+  'w-full rounded-lg border border-input bg-surface px-3 py-2 text-sm text-foreground transition-colors focus-visible:border-ring'
+
+function Choice({
+  id,
+  label,
+  name,
+  options,
+}: {
+  id: string
+  label: string
+  name: string
+  options: readonly OptionModel[]
+}) {
+  const selected = options.find((option) => option.isSelected)
+
+  return (
+    <div>
+      <label htmlFor={id} className={LABEL}>
+        {label}
+      </label>
+      <select id={id} name={name} defaultValue={selected?.value ?? ''} className={SELECT}>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
+
+export function SearchForm({
+  action,
+  fields,
+  query,
+  maxQueryLength,
+  forums,
+  sorts,
+  hint,
+  errorMessage,
+}: SearchFormModel) {
+  const described = [hint === null ? null : 'search-hint', errorMessage === null ? null : 'search-error']
+    .filter((id): id is string => id !== null)
+    .join(' ')
+
+  return (
+    <section className="rounded-lg border border-border bg-card text-card-foreground shadow-elevation">
+      <form method="get" action={action} className="flex flex-col gap-4 px-4 py-4">
+        <div>
+          <label htmlFor="search-query" className={LABEL}>
+            Search for
+          </label>
+          <input
+            id="search-query"
+            type="search"
+            name={fields.query}
+            defaultValue={query}
+            maxLength={maxQueryLength}
+            autoComplete="off"
+            placeholder="Words in a subject or a post"
+            aria-invalid={errorMessage === null ? undefined : true}
+            {...(described === '' ? {} : { 'aria-describedby': described })}
+            className="w-full rounded-full border border-input bg-surface px-4 py-2.5 text-sm text-foreground transition-colors focus-visible:border-ring"
+          />
+
+          {hint !== null && (
+            <p id="search-hint" className="mt-1.5 text-xs text-muted-foreground">
+              {hint}
+            </p>
+          )}
+
+          {errorMessage !== null && (
+            <p id="search-error" className="mt-1.5 text-xs font-semibold text-destructive">
+              {errorMessage}
+            </p>
+          )}
+        </div>
+
+        <div className="grid gap-4 sm:grid-cols-2">
+          <Choice id="search-forum" label="In" name={fields.forum} options={forums} />
+          <Choice id="search-sort" label="Sort by" name={fields.sort} options={sorts} />
+        </div>
+
+        <div>
+          <button type="submit" className={PILL_PRIMARY}>
+            Search
+          </button>
+        </div>
+      </form>
+    </section>
+  )
+}

package/src/slots/shell.tsx

@@ -0,0 +1,18 @@
+import type { ShellModel } from '@meith/theme-kit'
+
+export function Shell({ viewer, children }: ShellModel) {
+  return (
+    <div
+      className="flex min-h-dvh flex-col bg-background text-foreground"
+      data-viewer={viewer.isGuest ? 'guest' : 'member'}
+    >
+      <a
+        href="#board-content"
+        className="sr-only focus-visible:not-sr-only focus-visible:absolute focus-visible:top-3 focus-visible:left-3 focus-visible:z-50 focus-visible:inline-flex focus-visible:h-9 focus-visible:items-center focus-visible:rounded-full focus-visible:bg-primary focus-visible:px-4 focus-visible:text-sm focus-visible:font-semibold focus-visible:text-primary-foreground focus-visible:shadow-elevation"
+      >
+        Skip to content
+      </a>
+      {children}
+    </div>
+  )
+}

package/src/slots/subforum-list.tsx

@@ -0,0 +1,39 @@
+import type { SubforumListModel } from '@meith/theme-kit'
+
+import { NUMERIC, count, plural } from '../shared'
+
+export function SubforumList({ forums }: SubforumListModel) {
+  if (forums.length === 0) return null
+
+  return (
+    <section
+      aria-labelledby="subforums-heading"
+      className="rounded-lg border border-border bg-card text-card-foreground shadow-elevation"
+    >
+      <h2
+        id="subforums-heading"
+        className="px-4 pt-3 pb-1 text-[0.9375rem] font-semibold text-muted-foreground"
+      >
+        Subforums
+      </h2>
+
+      <ul className="flex flex-wrap gap-2 px-4 pt-1 pb-3">
+        {forums.map((forum) => (
+          <li key={forum.id}>
+            <a
+              href={forum.href}
+              className="inline-flex items-baseline gap-1.5 rounded-full bg-secondary px-3 py-1.5 text-sm font-semibold text-foreground transition-colors hover:bg-accent"
+            >
+              {forum.title}
+              {forum.type !== 'link' && (
+                <span className={`text-xs font-medium text-muted-foreground ${NUMERIC}`}>
+                  {count(forum.threadCount)} {plural(forum.threadCount, 'thread', 'threads')}
+                </span>
+              )}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}

package/src/slots/thread-row.tsx

@@ -0,0 +1,81 @@
+import type { ThreadRowSlotModel } from '@meith/theme-kit'
+
+import { Circle, MUTED_LINK, NUMERIC, Prefix, Stamp, Tag, UserRef, count, plural } from '../shared'
+
+export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
+  return (
+    <li
+      data-unread={thread.isUnread ? '' : undefined}
+      className="overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-elevation transition-colors hover:border-input"
+    >
+      <div className="flex items-start gap-3 px-4 py-3">
+        {select !== null && (
+          <label className="mt-2.5 flex shrink-0 items-start">
+            <span className="sr-only">{select.label}</span>
+            <input
+              type="checkbox"
+              name={select.name}
+              value={select.value}
+              form={select.formId}
+              className="size-4 accent-primary"
+            />
+          </label>
+        )}
+
+        <span className="relative shrink-0">
+          <Circle name={thread.author.username} size={40} />
+          {thread.isUnread && (
+            <span
+              aria-hidden="true"
+              className="absolute -top-0.5 -right-0.5 size-3 rounded-full bg-forum-unread ring-2 ring-card"
+            />
+          )}
+        </span>
+
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+            {thread.prefix !== null && <Prefix prefix={thread.prefix} />}
+            {thread.isSticky && <Tag token="thread-pinned">Pinned</Tag>}
+            {thread.isLocked && <Tag token="thread-locked">Locked</Tag>}
+            {thread.isMoved && <Tag token="thread-moved">Moved</Tag>}
+          </div>
+
+          <a
+            href={thread.href}
+            className={`mt-0.5 block text-[0.9375rem] leading-snug hover:underline ${thread.isUnread ? 'font-bold' : 'font-semibold'}`}
+          >
+            {thread.title}
+          </a>
+          {thread.isUnread && <span className="sr-only"> (new posts)</span>}
+
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            Started by <UserRef user={thread.author} className="text-xs font-medium" />
+          </p>
+        </div>
+      </div>
+
+      <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 border-t border-border px-4 py-2 text-xs text-muted-foreground">
+        <span className={NUMERIC}>
+          {count(thread.replyCount)} {plural(thread.replyCount, 'reply', 'replies')} ·{' '}
+          {count(thread.viewCount)} {plural(thread.viewCount, 'view', 'views')}
+        </span>
+
+        <span className="min-w-0 truncate">
+          {thread.lastPost === null ? (
+            <span className="text-thread-moved">No replies yet</span>
+          ) : (
+            <>
+              <a href={thread.lastPost.href} className={`font-semibold ${MUTED_LINK}`}>
+                Latest reply
+              </a>
+              {' by '}
+              <UserRef user={thread.lastPost.author} className="text-xs font-medium" />
+              {' · '}
+              <Stamp at={thread.lastPost.at} />
+            </>
+          )}
+        </span>
+      </div>
+    </li>
+  )
+}