@meith/theme-phasebook 0.1.0

package/src/slots/forum-display.tsx

@@ -0,0 +1,108 @@
+import type { ForumDisplayModel } from '@meith/theme-kit'
+
+import {
+  Circle,
+  FEED,
+  NUMERIC,
+  PAGE,
+  PILL,
+  PILL_PRIMARY,
+  count,
+  isEmptyRegion,
+  plural,
+} from '../shared'
+
+export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }: ForumDisplayModel) {
+  return (
+    <div className={`${PAGE} py-4 sm:py-6`}>
+      <div className={`${FEED} flex flex-col gap-4`}>
+        <section className="overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-elevation">
+          <div className="h-24 bg-primary/12" />
+
+          <div className="px-4 pb-4">
+            <div className="-mt-10 flex flex-wrap items-end justify-between gap-x-4 gap-y-3">
+              <div className="flex min-w-0 items-end gap-3">
+                <Circle name={forum.title} size={72} className="ring-4 ring-card" />
+
+                <div className="min-w-0">
+                  <h1 className="text-xl leading-tight font-bold tracking-tight text-balance">
+                    {forum.title}
+                  </h1>
+                  {forum.type !== 'link' && (
+                    <p className={`mt-0.5 text-xs text-muted-foreground ${NUMERIC}`}>
+                      {count(forum.threadCount)} {plural(forum.threadCount, 'thread', 'threads')} ·{' '}
+                      {count(forum.postCount)} {plural(forum.postCount, 'post', 'posts')}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              {markReadAction !== null && (
+                <form action={markReadAction} method="post" className="shrink-0">
+                  <button type="submit" className={PILL}>
+                    Mark read
+                  </button>
+                </form>
+              )}
+            </div>
+
+            {forum.description !== null && (
+              <p className="mt-3 text-sm text-muted-foreground">{forum.description}</p>
+            )}
+          </div>
+        </section>
+
+        {newThreadHref !== null && (
+          <div className="flex items-center gap-2.5 rounded-lg border border-border bg-card px-4 py-3 shadow-elevation">
+            <Circle name={forum.title} size={40} />
+            <a
+              href={newThreadHref}
+              className="min-w-0 flex-1 truncate rounded-full bg-secondary px-4 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent"
+            >
+              Start a thread in {forum.title}…
+            </a>
+            <a href={newThreadHref} className={`hidden sm:inline-flex ${PILL_PRIMARY}`}>
+              New thread
+            </a>
+          </div>
+        )}
+
+        {regions.tools !== undefined && (
+          <div className="flex flex-col gap-3 empty:hidden">{regions.tools}</div>
+        )}
+
+        {regions.announcements !== undefined && (
+          <div className="flex flex-col gap-4 empty:hidden">{regions.announcements}</div>
+        )}
+
+        {regions.subforums}
+
+        {isEmptyRegion(regions.threads) ? (
+          <div className="rounded-lg border border-border bg-card px-4 py-10 text-center shadow-elevation">
+            <p className="text-base font-semibold">No threads here yet</p>
+            <p className="mt-1 text-sm text-muted-foreground">
+              {newThreadHref === null
+                ? 'Nothing has been posted in this forum.'
+                : 'Nothing has been posted in this forum. Yours would be the first.'}
+            </p>
+            {newThreadHref !== null && (
+              <a href={newThreadHref} className={`mt-4 ${PILL_PRIMARY}`}>
+                Start the first thread
+              </a>
+            )}
+          </div>
+        ) : (
+          <ul className="flex flex-col gap-3">{regions.threads}</ul>
+        )}
+
+        {regions.pagination}
+
+        {regions.afterContent !== undefined && (
+          <div className="flex flex-wrap items-center justify-between gap-x-8 gap-y-3 rounded-lg border border-border bg-card px-4 py-3 shadow-elevation empty:hidden">
+            {regions.afterContent}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/slots/forum-jump.tsx

@@ -0,0 +1,48 @@
+import type { ForumJumpModel } from '@meith/theme-kit'
+
+import { PAGE, PILL } from '../shared'
+
+export function ForumJump({ action, field, forums, submitLabel, label }: ForumJumpModel) {
+  if (forums.length === 0) return null
+
+  const id = `forum-jump-${field}`
+
+  return (
+    <div className="bg-background">
+      <form
+        method="get"
+        action={action}
+        className={`${PAGE} flex flex-wrap items-center gap-2 pb-4 sm:justify-end`}
+      >
+        <label htmlFor={id} className="text-xs font-semibold text-muted-foreground">
+          {label}
+        </label>
+
+        <select
+          id={id}
+          name={field}
+          defaultValue={forums.find((forum) => forum.isSelected)?.value ?? ''}
+          className="h-9 w-auto min-w-48 flex-1 rounded-full border border-input bg-card px-3 text-xs text-foreground sm:flex-none"
+        >
+          {forums.map((forum) => {
+            const indented = `${'  '.repeat(forum.depth)}${forum.label}`
+            return (
+              <option
+                key={forum.value}
+                value={forum.value}
+                disabled={forum.isCategory}
+                label={indented}
+              >
+                {indented}
+              </option>
+            )
+          })}
+        </select>
+
+        <button type="submit" className={PILL}>
+          {submitLabel}
+        </button>
+      </form>
+    </div>
+  )
+}

package/src/slots/forum-row.tsx

@@ -0,0 +1,79 @@
+import type { ForumRowSlotModel } from '@meith/theme-kit'
+
+import { Circle, MUTED_LINK, NUMERIC, Stamp, UserRef, count, plural } from '../shared'
+
+export function ForumRow({ forum }: ForumRowSlotModel) {
+  const isLink = forum.type === 'link'
+
+  return (
+    <li
+      data-unread={forum.isUnread ? '' : undefined}
+      className="flex items-start gap-3 px-4 py-3 transition-colors hover:bg-accent"
+    >
+      <span className="relative shrink-0">
+        <Circle name={forum.title} size={40} />
+        {forum.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-baseline justify-between gap-x-3 gap-y-0.5">
+          <a
+            href={forum.href}
+            className={`text-[0.9375rem] hover:underline ${forum.isUnread ? 'font-bold text-foreground' : 'font-semibold text-foreground'}`}
+          >
+            {forum.title}
+          </a>
+          {forum.isUnread && <span className="sr-only"> (new posts)</span>}
+
+          {!isLink && (
+            <span className={`shrink-0 text-xs text-muted-foreground ${NUMERIC}`}>
+              {count(forum.threadCount)} {plural(forum.threadCount, 'thread', 'threads')} ·{' '}
+              {count(forum.postCount)} {plural(forum.postCount, 'post', 'posts')}
+            </span>
+          )}
+        </div>
+
+        {forum.description !== null && (
+          <p className="mt-0.5 text-sm text-muted-foreground">{forum.description}</p>
+        )}
+
+        {forum.subforums.length > 0 && (
+          <p className="mt-1.5 flex flex-wrap items-center gap-1.5">
+            {forum.subforums.map((sub) => (
+              <a
+                key={sub.href}
+                href={sub.href}
+                className="rounded-full bg-secondary px-2 py-0.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+              >
+                {sub.label}
+              </a>
+            ))}
+          </p>
+        )}
+
+        {!isLink && (
+          <p className="mt-1.5 truncate text-xs text-muted-foreground">
+            {forum.lastPost === null ? (
+              <span className="text-forum-read">No posts yet</span>
+            ) : (
+              <>
+                <a href={forum.lastPost.href} className={`font-semibold ${MUTED_LINK}`}>
+                  {forum.lastPost.threadTitle}
+                </a>
+                {' — '}
+                <UserRef user={forum.lastPost.author} className="text-xs font-medium" />
+                {' · '}
+                <Stamp at={forum.lastPost.at} />
+              </>
+            )}
+          </p>
+        )}
+      </div>
+    </li>
+  )
+}

package/src/slots/header.tsx

@@ -0,0 +1,90 @@
+import type { HeaderModel } from '@meith/theme-kit'
+
+import { PAGE } from '../shared'
+
+function BoardMark({ boardTitle, logo }: Pick<HeaderModel, 'boardTitle' | 'logo'>) {
+  if (logo === undefined) {
+    const initial = (Array.from(boardTitle.trim())[0] ?? '?').toUpperCase()
+    return (
+      <span
+        aria-hidden="true"
+        className="inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-xl font-bold text-primary-foreground"
+      >
+        {initial}
+      </span>
+    )
+  }
+
+  const image = (
+    <img
+      src={logo.src}
+      alt=""
+      aria-hidden="true"
+      className="size-10 shrink-0 rounded-full object-cover"
+      decoding="async"
+    />
+  )
+
+  if (logo.darkSrc === null) return image
+
+  return (
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcSet={logo.darkSrc} />
+      {image}
+    </picture>
+  )
+}
+
+export function Header({ boardTitle, homeHref, navigation, logo, children }: HeaderModel) {
+  return (
+    <header className="sticky top-0 z-30 border-b border-border bg-card shadow-elevation">
+      <div className={`${PAGE} flex h-14 items-center justify-between gap-3`}>
+        <a
+          href={homeHref}
+          className="flex min-w-0 shrink-0 items-center gap-2 rounded-full transition-opacity hover:opacity-80"
+        >
+          <BoardMark boardTitle={boardTitle} logo={logo} />
+          <span className="hidden truncate text-lg font-bold tracking-tight text-foreground sm:inline">
+            {boardTitle}
+          </span>
+        </a>
+
+        {navigation.length > 0 && (
+          <nav aria-label="Board sections" className="hidden min-w-0 flex-1 justify-center lg:flex">
+            <ul className="flex items-center gap-1">
+              {navigation.map((item) => (
+                <li key={item.href}>
+                  <a
+                    href={item.href}
+                    className="inline-flex h-11 items-center rounded-lg px-6 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )}
+
+        <div className="flex shrink-0 items-center justify-end">{children}</div>
+      </div>
+
+      {navigation.length > 0 && (
+        <nav aria-label="Board sections" className="border-t border-border lg:hidden">
+          <ul className={`${PAGE} flex items-center gap-1 overflow-x-auto py-1`}>
+            {navigation.map((item) => (
+              <li key={item.href} className="shrink-0">
+                <a
+                  href={item.href}
+                  className="inline-flex h-9 items-center rounded-full px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+                >
+                  {item.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      )}
+    </header>
+  )
+}

package/src/slots/latest-posts.tsx

@@ -0,0 +1,58 @@
+import type { LatestPostsModel } from '@meith/theme-kit'
+
+import { Circle, MUTED_LINK, NUMERIC, Rail, Stamp, UserRef } from '../shared'
+
+export function LatestPosts({ posts, capturedAt }: LatestPostsModel) {
+  return (
+    <Rail
+      title="Latest posts"
+      titleId="latest-posts-heading"
+      action={
+        <span className={`text-xs text-muted-foreground ${NUMERIC}`}>
+          <Stamp at={capturedAt} />
+        </span>
+      }
+    >
+      {posts.length === 0 ? (
+        <p className="px-3 pt-1 pb-3 text-xs text-muted-foreground">
+          The newest posts you can see will appear here.
+        </p>
+      ) : (
+        <ul className="px-1 pt-1 pb-1">
+          {posts.map((post) => (
+            <li key={post.href} className="rounded-lg px-2 py-1.5 transition-colors hover:bg-accent">
+              <div className="flex items-start gap-2.5">
+                <Circle name={post.author.username} size={32} className="mt-0.5" />
+
+                <div className="min-w-0 flex-1">
+                  <a
+                    href={post.href}
+                    className="line-clamp-2 text-sm font-semibold text-foreground hover:underline"
+                  >
+                    {post.threadTitle}
+                  </a>
+
+                  {post.excerpt !== '' && (
+                    <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
+                      {post.excerpt}
+                    </p>
+                  )}
+
+                  <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                    <UserRef user={post.author} className="text-xs font-medium" />
+                    {' in '}
+                    <a href={post.forum.href} className={MUTED_LINK}>
+                      {post.forum.label}
+                    </a>
+                    {' · '}
+                    <Stamp at={post.postedAt} />
+                  </p>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </Rail>
+  )
+}

package/src/slots/latest-threads.tsx

@@ -0,0 +1,55 @@
+import type { LatestThreadsModel } from '@meith/theme-kit'
+
+import { Circle, MUTED_LINK, NUMERIC, Rail, Stamp, UserRef, count, plural } from '../shared'
+
+export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
+  return (
+    <Rail
+      title="Latest threads"
+      titleId="latest-threads-heading"
+      action={
+        <span className={`text-xs text-muted-foreground ${NUMERIC}`}>
+          <Stamp at={capturedAt} />
+        </span>
+      }
+    >
+      {threads.length === 0 ? (
+        <p className="px-3 pt-1 pb-3 text-xs text-muted-foreground">
+          The newest threads you can see will appear here.
+        </p>
+      ) : (
+        <ul className="px-1 pt-1 pb-1">
+          {threads.map((thread) => (
+            <li key={thread.href} className="rounded-lg px-2 py-1.5 transition-colors hover:bg-accent">
+              <div className="flex items-start gap-2.5">
+                <Circle name={thread.author.username} size={32} className="mt-0.5" />
+
+                <div className="min-w-0 flex-1">
+                  <a
+                    href={thread.href}
+                    className="line-clamp-2 text-sm font-semibold text-foreground hover:underline"
+                  >
+                    {thread.title}
+                  </a>
+
+                  <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                    <UserRef user={thread.author} className="text-xs font-medium" />
+                    {' in '}
+                    <a href={thread.forum.href} className={MUTED_LINK}>
+                      {thread.forum.label}
+                    </a>
+                  </p>
+
+                  <p className={`mt-0.5 truncate text-xs text-muted-foreground ${NUMERIC}`}>
+                    {count(thread.replyCount)} {plural(thread.replyCount, 'reply', 'replies')} ·{' '}
+                    <Stamp at={thread.startedAt} />
+                  </p>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </Rail>
+  )
+}

package/src/slots/member-profile.tsx

@@ -0,0 +1,130 @@
+import { cn } from '@meith/ui'
+import type { MemberProfileModel } from '@meith/theme-kit'
+
+import { Circle, FEED, NUMERIC, PAGE, PILL, PILL_PRIMARY, Stamp, count } from '../shared'
+
+export function MemberProfile({
+  user,
+  avatarUrl,
+  title,
+  joinedAt,
+  lastVisitAt,
+  postCount,
+  signatureHtml,
+  fields,
+  actions,
+  regions,
+}: MemberProfileModel) {
+  return (
+    <div className={`${PAGE} py-4 sm:py-6`}>
+      <div className={`${FEED} flex flex-col gap-4`}>
+        <section className="overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-elevation">
+          <div className="h-32 bg-primary/12 sm:h-40" />
+
+          <div className="flex flex-col items-center gap-3 px-4 pb-4 sm:flex-row sm:items-end sm:justify-between">
+            <div className="-mt-12 flex flex-col items-center gap-3 sm:flex-row sm:items-end">
+              <Circle
+                src={avatarUrl}
+                name={user.username}
+                size={112}
+                className="ring-4 ring-card"
+              />
+
+              <div className="min-w-0 pb-1 text-center sm:text-left">
+                <h1
+                  className={cn(
+                    'text-2xl leading-tight font-bold tracking-tight break-words',
+                    user.nameClass,
+                  )}
+                >
+                  {user.username}
+                </h1>
+                {title !== null && <p className="text-sm text-muted-foreground">{title}</p>}
+              </div>
+            </div>
+
+            {actions.length > 0 && (
+              <nav
+                aria-label="Member actions"
+                className="flex shrink-0 flex-wrap items-center justify-center gap-2"
+              >
+                {actions.map((action, index) => (
+                  <a
+                    key={action.href}
+                    href={action.href}
+                    className={index === 0 ? PILL_PRIMARY : PILL}
+                  >
+                    {action.label}
+                  </a>
+                ))}
+              </nav>
+            )}
+          </div>
+
+          <dl className="grid grid-cols-3 gap-2 border-t border-border px-4 py-3 text-center">
+            <div>
+              <dd className={`text-lg font-bold text-foreground ${NUMERIC}`}>
+                {count(postCount)}
+              </dd>
+              <dt className="text-xs text-muted-foreground">Posts</dt>
+            </div>
+            <div>
+              <dd className="text-sm font-semibold text-foreground">
+                <Stamp at={joinedAt} />
+              </dd>
+              <dt className="text-xs text-muted-foreground">Joined</dt>
+            </div>
+            <div>
+              <dd className="text-sm font-semibold text-foreground">
+                {lastVisitAt === null ? 'Never' : <Stamp at={lastVisitAt} />}
+              </dd>
+              <dt className="text-xs text-muted-foreground">Last visit</dt>
+            </div>
+          </dl>
+        </section>
+
+        {fields.length > 0 && (
+          <section
+            aria-labelledby="profile-fields-heading"
+            className="rounded-lg border border-border bg-card text-card-foreground shadow-elevation"
+          >
+            <h2
+              id="profile-fields-heading"
+              className="px-4 pt-3 pb-1 text-[1.0625rem] font-bold tracking-tight"
+            >
+              About
+            </h2>
+            <dl className="grid gap-x-6 gap-y-3 px-4 pt-2 pb-4 sm:grid-cols-2">
+              {fields.map((field) => (
+                <div key={field.label}>
+                  <dt className="text-xs text-muted-foreground">{field.label}</dt>
+                  <dd className="text-sm break-words">{field.value}</dd>
+                </div>
+              ))}
+            </dl>
+          </section>
+        )}
+
+        {signatureHtml !== null && (
+          <section
+            aria-labelledby="profile-signature-heading"
+            className="rounded-lg border border-border bg-card text-card-foreground shadow-elevation"
+          >
+            <h2
+              id="profile-signature-heading"
+              className="px-4 pt-3 pb-1 text-[1.0625rem] font-bold tracking-tight"
+            >
+              Signature
+            </h2>
+            <div
+              className="prose-md px-4 pt-2 pb-4 text-sm text-muted-foreground"
+              dangerouslySetInnerHTML={{ __html: signatureHtml }}
+            />
+          </section>
+        )}
+
+        {regions?.plugins}
+      </div>
+    </div>
+  )
+}

package/src/slots/navigation.tsx

@@ -0,0 +1,43 @@
+import type { NavigationModel } from '@meith/theme-kit'
+
+import { PAGE } from '../shared'
+
+export function Navigation({ items }: NavigationModel) {
+  if (items.length === 0) return null
+
+  return (
+    <nav aria-label="Breadcrumb" className="bg-background">
+      <ol
+        className={`${PAGE} flex items-center gap-1 overflow-x-auto pt-3 text-sm whitespace-nowrap text-muted-foreground`}
+      >
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1
+          return (
+            <li key={item.href} className="flex shrink-0 items-center gap-1">
+              {index > 0 && (
+                <span aria-hidden="true" className="select-none opacity-50">
+                  ›
+                </span>
+              )}
+              {isLast ? (
+                <span
+                  aria-current="page"
+                  className="max-w-[24ch] truncate font-semibold text-foreground sm:max-w-none"
+                >
+                  {item.label}
+                </span>
+              ) : (
+                <a
+                  href={item.href}
+                  className="rounded-full px-2 py-0.5 font-medium transition-colors hover:bg-accent hover:text-foreground"
+                >
+                  {item.label}
+                </a>
+              )}
+            </li>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}

package/src/slots/notice.tsx

@@ -0,0 +1,62 @@
+import { cn } from '@meith/ui'
+import type { NoticeModel } from '@meith/theme-kit'
+
+const KIND = {
+  info: {
+    label: 'Notice',
+    className: 'border-primary/30 bg-primary/8 text-foreground',
+    mark: 'bg-primary text-primary-foreground',
+  },
+  success: {
+    label: 'Done',
+    className: 'border-moderation-approved/30 bg-moderation-approved/8 text-foreground',
+    mark: 'bg-moderation-approved text-card',
+  },
+  warning: {
+    label: 'Warning',
+    className: 'border-thread-pinned/30 bg-thread-pinned/8 text-foreground',
+    mark: 'bg-thread-pinned text-card',
+  },
+  error: {
+    label: 'Error',
+    className: 'border-destructive/30 bg-destructive/8 text-foreground',
+    mark: 'bg-destructive text-destructive-foreground',
+  },
+} as const
+
+export function Notice({ kind, message, dismissHref }: NoticeModel) {
+  const tone = KIND[kind]
+
+  return (
+    <div
+      role={kind === 'error' ? 'alert' : 'status'}
+      className={cn(
+        'flex items-center gap-3 rounded-lg border px-3 py-2.5 text-sm shadow-elevation',
+        tone.className,
+      )}
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          'inline-flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-bold',
+          tone.mark,
+        )}
+      >
+        {kind === 'error' || kind === 'warning' ? '!' : 'i'}
+      </span>
+
+      <p className="min-w-0 flex-1">
+        <span className="font-semibold">{tone.label}:</span> {message}
+      </p>
+
+      {dismissHref !== null && (
+        <a
+          href={dismissHref}
+          className="shrink-0 rounded-full px-2 py-1 text-xs font-semibold text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+        >
+          Dismiss
+        </a>
+      )}
+    </div>
+  )
+}