@meith/theme-clubhouse 0.3.2

package/src/slots/forum-display.tsx

@@ -0,0 +1,107 @@
+import { Card, CardRows, Empty, EmptyAction, EmptyDescription, EmptyTitle, cn } from '@meith/ui'
+import type { ForumDisplayModel } from '@meith/theme-kit'
+
+import {
+  BUTTON,
+  ColumnHeads,
+  HEADING,
+  MICRO,
+  NUMERIC,
+  PAGE_BODY,
+  PageHead,
+  isEmptyRegion,
+} from '../shared'
+
+export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }: ForumDisplayModel) {
+  return (
+    <div className={PAGE_BODY}>
+      <PageHead
+        actions={
+          <>
+            {markReadAction !== null && (
+              <form action={markReadAction} method="post">
+                <button
+                  type="submit"
+                  className={cn(
+                    BUTTON,
+                    'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+                  )}
+                >
+                  Mark read
+                </button>
+              </form>
+            )}
+            {newThreadHref !== null && (
+              <a
+                href={newThreadHref}
+                className={cn(BUTTON, 'bg-primary text-primary-foreground hover:bg-primary-hover')}
+              >
+                New thread
+              </a>
+            )}
+          </>
+        }
+      >
+        <h1 className={`${HEADING} text-xl text-balance`}>{forum.title}</h1>
+        <p className="mt-0.5 flex flex-wrap items-baseline gap-x-2 text-xs text-muted-foreground">
+          {forum.type !== 'link' && (
+            <span className={`${MICRO} ${NUMERIC}`}>
+              {forum.threadCount.toLocaleString('en')} threads ·{' '}
+              {forum.postCount.toLocaleString('en')} posts
+            </span>
+          )}
+          {forum.description !== null && <span>{forum.description}</span>}
+        </p>
+      </PageHead>
+
+      {regions.tools !== undefined && (
+        <div className="flex flex-col gap-3 empty:hidden">{regions.tools}</div>
+      )}
+
+      {regions.announcements !== undefined && (
+        <div className="flex flex-col gap-3">{regions.announcements}</div>
+      )}
+
+      {regions.subforums}
+
+      <Card>
+        {isEmptyRegion(regions.threads) ? (
+          <Empty>
+            <EmptyTitle>No threads here yet</EmptyTitle>
+            <EmptyDescription>
+              {newThreadHref === null
+                ? 'Nothing has been posted in this forum.'
+                : 'Nothing has been posted in this forum. Yours would be the first.'}
+            </EmptyDescription>
+            {newThreadHref !== null && (
+              <EmptyAction>
+                <a
+                  href={newThreadHref}
+                  className={cn(
+                    BUTTON,
+                    'bg-primary text-primary-foreground hover:bg-primary-hover',
+                  )}
+                >
+                  Start the first thread
+                </a>
+              </EmptyAction>
+            )}
+          </Empty>
+        ) : (
+          <>
+            <ColumnHeads first="Thread" counts={['Replies', 'Views']} last="Latest" />
+            <CardRows>{regions.threads}</CardRows>
+          </>
+        )}
+      </Card>
+
+      {regions.pagination}
+
+      {regions.afterContent !== undefined && (
+        <div className="flex flex-wrap items-center justify-between gap-x-8 gap-y-3 border-t border-border pt-4 empty:hidden">
+          {regions.afterContent}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/slots/forum-row.tsx

@@ -0,0 +1,76 @@
+import type { ForumRowSlotModel } from '@meith/theme-kit'
+
+import { CHIP, HEADING, LINK, MICRO, ReadMark, Stamp, TABLE_ROW, Tally, UserRef } from '../shared'
+
+export function ForumRow({ forum }: ForumRowSlotModel) {
+  const isLink = forum.type === 'link'
+
+  return (
+    <li
+      data-unread={forum.isUnread ? '' : undefined}
+      className={`${TABLE_ROW} transition-colors hover:bg-accent`}
+    >
+      <ReadMark unread={forum.isUnread} />
+
+      <div className="min-w-0">
+        <a
+          href={forum.href}
+          className={`${HEADING} text-sm ${forum.isUnread ? 'text-forum-unread' : 'text-forum-read'} ${LINK}`}
+        >
+          {forum.title}
+        </a>
+        {forum.isUnread && <span className="sr-only"> (new posts)</span>}
+        {isLink && <span className={`${MICRO} ml-2`}>Link</span>}
+
+        {forum.description !== null && (
+          <p className="mt-0.5 text-xs text-muted-foreground">{forum.description}</p>
+        )}
+
+        {forum.subforums.length > 0 && (
+          <p className="mt-1.5 flex flex-wrap items-center gap-1">
+            {forum.subforums.map((sub) => (
+              <a key={sub.href} href={sub.href} className={CHIP}>
+                {sub.label}
+              </a>
+            ))}
+          </p>
+        )}
+      </div>
+
+      {!isLink && (
+        <>
+          <span className="col-start-2 md:col-start-3 md:block md:text-right">
+            <Tally value={forum.threadCount} label="threads" />
+            <span className="ms-3 md:hidden">
+              <Tally value={forum.postCount} label="posts" />
+            </span>
+          </span>
+
+          <span className="hidden md:block md:text-right">
+            <Tally value={forum.postCount} label="posts" />
+          </span>
+
+          <div className="col-start-2 min-w-0 text-xs text-muted-foreground md:col-start-5">
+            {forum.lastPost === null ? (
+              <span className={MICRO}>No posts yet</span>
+            ) : (
+              <>
+                <a
+                  href={forum.lastPost.href}
+                  className={`block truncate font-semibold text-foreground ${LINK}`}
+                >
+                  {forum.lastPost.threadTitle}
+                </a>
+                <span className="mt-0.5 block truncate">
+                  <UserRef user={forum.lastPost.author} className="font-medium" />
+                  {' · '}
+                  <Stamp at={forum.lastPost.at} />
+                </span>
+              </>
+            )}
+          </div>
+        </>
+      )}
+    </li>
+  )
+}

package/src/slots/header.tsx

@@ -0,0 +1,71 @@
+import type { HeaderModel } from '@meith/theme-kit'
+
+import { ClubRule, Crest, HEADING, PAGE, TAB } from '../shared'
+
+function BoardMark({ boardTitle, logo }: Pick<HeaderModel, 'boardTitle' | 'logo'>) {
+  if (logo === undefined) {
+    return (
+      <>
+        <Crest title={boardTitle} />
+        <span className={`${HEADING} text-lg leading-none text-balance sm:text-xl`}>
+          {boardTitle}
+        </span>
+      </>
+    )
+  }
+
+  const image = (
+    <img
+      src={logo.src}
+      alt={logo.alt}
+      className="h-9 w-auto max-w-48 object-contain"
+      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="bg-card">
+      <div className={`${PAGE} flex flex-wrap items-center justify-between gap-x-6 gap-y-3 py-3`}>
+        <a
+          href={homeHref}
+          className="inline-flex min-w-0 items-center gap-3 text-foreground underline-offset-4 hover:underline"
+        >
+          <BoardMark boardTitle={boardTitle} logo={logo} />
+        </a>
+        {children}
+      </div>
+
+      <ClubRule />
+
+      {navigation.length > 0 && (
+        <nav aria-label="Board sections" className="border-b border-border bg-surface">
+          <div className={PAGE}>
+            <ul className="-mx-4 flex items-stretch overflow-x-auto px-4 sm:-mx-6 sm:px-6">
+              {navigation.map((item) => (
+                <li key={item.href} className="shrink-0">
+                  <a
+                    href={item.href}
+                    className={`${TAB} border-b-2 border-b-transparent text-muted-foreground hover:border-b-secondary hover:bg-primary hover:text-primary-foreground`}
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </nav>
+      )}
+    </header>
+  )
+}

package/src/slots/latest-posts.tsx

@@ -0,0 +1,56 @@
+import { Card, CardContent, Empty, EmptyDescription, EmptyTitle } from '@meith/ui'
+import type { LatestPostsModel } from '@meith/theme-kit'
+
+import { LINK, MICRO, MUTED_LINK, PanelHead, Stamp, UserRef } from '../shared'
+
+export function LatestPosts({ posts, capturedAt }: LatestPostsModel) {
+  return (
+    <Card aria-labelledby="latest-posts-heading">
+      <PanelHead
+        id="latest-posts-heading"
+        title="Latest posts"
+        aside={
+          <span className={MICRO}>
+            As of <Stamp at={capturedAt} />
+          </span>
+        }
+      />
+
+      {posts.length === 0 ? (
+        <Empty className="py-5">
+          <EmptyTitle>Nothing said yet</EmptyTitle>
+          <EmptyDescription>The newest posts you can see will appear here.</EmptyDescription>
+        </Empty>
+      ) : (
+        <CardContent className="px-0 py-0">
+          <ul className="divide-y divide-border">
+            {posts.map((post) => (
+              <li key={post.href} className="flex flex-col gap-0.5 px-4 py-2">
+                <a
+                  href={post.href}
+                  className={`truncate text-sm font-semibold text-foreground ${LINK}`}
+                >
+                  {post.threadTitle}
+                </a>
+
+                {post.excerpt !== '' && (
+                  <p className="line-clamp-2 text-xs text-muted-foreground">{post.excerpt}</p>
+                )}
+
+                <p className="truncate text-xs text-muted-foreground">
+                  <UserRef user={post.author} className="font-medium" />
+                  {' in '}
+                  <a href={post.forum.href} className={MUTED_LINK}>
+                    {post.forum.label}
+                  </a>
+                  {' · '}
+                  <Stamp at={post.postedAt} />
+                </p>
+              </li>
+            ))}
+          </ul>
+        </CardContent>
+      )}
+    </Card>
+  )
+}

package/src/slots/latest-threads.tsx

@@ -0,0 +1,57 @@
+import { Card, CardContent, Empty, EmptyDescription, EmptyTitle } from '@meith/ui'
+import type { LatestThreadsModel } from '@meith/theme-kit'
+
+import { LINK, MICRO, MUTED_LINK, NUMERIC, PanelHead, Stamp, UserRef } from '../shared'
+
+export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
+  return (
+    <Card aria-labelledby="latest-threads-heading">
+      <PanelHead
+        id="latest-threads-heading"
+        title="Latest threads"
+        aside={
+          <span className={MICRO}>
+            As of <Stamp at={capturedAt} />
+          </span>
+        }
+      />
+
+      {threads.length === 0 ? (
+        <Empty className="py-5">
+          <EmptyTitle>Nothing started yet</EmptyTitle>
+          <EmptyDescription>The newest threads you can see will appear here.</EmptyDescription>
+        </Empty>
+      ) : (
+        <CardContent className="px-0 py-0">
+          <ul className="divide-y divide-border">
+            {threads.map((thread) => (
+              <li key={thread.href} className="flex flex-col gap-0.5 px-4 py-2">
+                <div className="flex items-baseline justify-between gap-2">
+                  <a
+                    href={thread.href}
+                    className={`truncate text-sm font-semibold text-foreground ${LINK}`}
+                  >
+                    {thread.title}
+                  </a>
+                  <span className={`shrink-0 text-xs text-muted-foreground ${NUMERIC}`}>
+                    {thread.replyCount.toLocaleString('en')}
+                  </span>
+                </div>
+
+                <p className="truncate text-xs text-muted-foreground">
+                  <UserRef user={thread.author} className="font-medium" />
+                  {' in '}
+                  <a href={thread.forum.href} className={MUTED_LINK}>
+                    {thread.forum.label}
+                  </a>
+                  {' · '}
+                  <Stamp at={thread.startedAt} />
+                </p>
+              </li>
+            ))}
+          </ul>
+        </CardContent>
+      )}
+    </Card>
+  )
+}

package/src/slots/member-profile.tsx

@@ -0,0 +1,118 @@
+import { Avatar, Card, CardContent, cn } from '@meith/ui'
+import type { MemberProfileModel } from '@meith/theme-kit'
+
+import { BUTTON, ClubBar, HEADING, MICRO, NUMERIC, PAGE_BODY, PanelHead, Stamp } from '../shared'
+
+export function MemberProfile({
+  user,
+  avatarUrl,
+  title,
+  joinedAt,
+  lastVisitAt,
+  postCount,
+  signatureHtml,
+  fields,
+  actions,
+  regions,
+}: MemberProfileModel) {
+  return (
+    <div className={PAGE_BODY}>
+      <Card className="flex items-stretch">
+        <ClubBar />
+
+        <div className="min-w-0 flex-1">
+          <CardContent className="flex flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex min-w-0 items-center gap-3">
+              <Avatar
+                src={avatarUrl}
+                name={user.username}
+                size={56}
+                className="rounded-sm border-border"
+              />
+
+              <div className="min-w-0">
+                <h1 className={cn(HEADING, 'text-xl break-words', user.nameClass)}>
+                  {user.username}
+                </h1>
+                {title !== null && <p className={`${MICRO} mt-0.5`}>{title}</p>}
+              </div>
+            </div>
+
+            {actions.length > 0 && (
+              <nav
+                aria-label="Member actions"
+                className="flex shrink-0 flex-wrap items-center gap-2"
+              >
+                {actions.map((action, index) => (
+                  <a
+                    key={action.href}
+                    href={action.href}
+                    className={cn(
+                      BUTTON,
+                      index === 0
+                        ? 'bg-primary text-primary-foreground hover:bg-primary-hover'
+                        : 'border border-border text-muted-foreground hover:bg-accent hover:text-foreground',
+                    )}
+                  >
+                    {action.label}
+                  </a>
+                ))}
+              </nav>
+            )}
+          </CardContent>
+
+          <dl className="flex flex-wrap gap-x-6 gap-y-1 border-t-2 border-t-secondary bg-surface px-4 py-2.5 text-xs">
+            <div className="flex items-baseline gap-1.5">
+              <dt className={MICRO}>Posts</dt>
+              <dd className={`${NUMERIC} font-semibold text-foreground`}>
+                {postCount.toLocaleString('en')}
+              </dd>
+            </div>
+            <div className="flex items-baseline gap-1.5">
+              <dt className={MICRO}>Joined</dt>
+              <dd className="font-semibold text-foreground">
+                <Stamp at={joinedAt} />
+              </dd>
+            </div>
+            <div className="flex items-baseline gap-1.5">
+              <dt className={MICRO}>Last visit</dt>
+              <dd className="font-semibold text-foreground">
+                {lastVisitAt === null ? 'Never' : <Stamp at={lastVisitAt} />}
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </Card>
+
+      {fields.length > 0 && (
+        <Card aria-labelledby="profile-fields-heading">
+          <PanelHead id="profile-fields-heading" title="About" />
+          <CardContent className="px-4 py-3">
+            <dl className="grid gap-x-6 gap-y-2.5 sm:grid-cols-2">
+              {fields.map((field) => (
+                <div key={field.label}>
+                  <dt className={MICRO}>{field.label}</dt>
+                  <dd className="text-sm break-words">{field.value}</dd>
+                </div>
+              ))}
+            </dl>
+          </CardContent>
+        </Card>
+      )}
+
+      {signatureHtml !== null && (
+        <Card aria-labelledby="profile-signature-heading">
+          <PanelHead id="profile-signature-heading" title="Signature" />
+          <CardContent className="px-4 py-3">
+            <div
+              className="prose-md text-sm text-muted-foreground"
+              dangerouslySetInnerHTML={{ __html: signatureHtml }}
+            />
+          </CardContent>
+        </Card>
+      )}
+
+      {regions?.plugins}
+    </div>
+  )
+}

package/src/slots/navigation.tsx

@@ -0,0 +1,40 @@
+import type { NavigationModel } from '@meith/theme-kit'
+
+import { MICRO, MUTED_LINK, PAGE } from '../shared'
+
+export function Navigation({ items }: NavigationModel) {
+  if (items.length === 0) return null
+
+  return (
+    <nav aria-label="Breadcrumb" className="border-b border-border bg-card">
+      <ol
+        className={`${PAGE} flex items-center gap-2 overflow-x-auto py-2 whitespace-nowrap ${MICRO}`}
+      >
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1
+          return (
+            <li key={item.href} className="flex shrink-0 items-center gap-2">
+              {index > 0 && (
+                <span aria-hidden="true" className="text-border select-none">
+                  /
+                </span>
+              )}
+              {isLast ? (
+                <span
+                  aria-current="page"
+                  className="max-w-[26ch] truncate text-foreground sm:max-w-none"
+                >
+                  {item.label}
+                </span>
+              ) : (
+                <a href={item.href} className={MUTED_LINK}>
+                  {item.label}
+                </a>
+              )}
+            </li>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}

package/src/slots/notice.tsx

@@ -0,0 +1,27 @@
+import { Alert, AlertDescription, AlertTitle } from '@meith/ui'
+import type { NoticeModel } from '@meith/theme-kit'
+
+import { MICRO, MUTED_LINK } from '../shared'
+
+const KIND_LABELS: Record<NoticeModel['kind'], string> = {
+  info: 'Notice',
+  success: 'Done',
+  warning: 'Warning',
+  error: 'Error',
+}
+
+export function Notice({ kind, message, dismissHref }: NoticeModel) {
+  return (
+    <Alert tone={kind}>
+      <AlertDescription>
+        <AlertTitle className={MICRO}>{KIND_LABELS[kind]}</AlertTitle> {message}
+      </AlertDescription>
+
+      {dismissHref !== null && (
+        <a href={dismissHref} className={`shrink-0 text-xs ${MUTED_LINK}`}>
+          Dismiss
+        </a>
+      )}
+    </Alert>
+  )
+}

package/src/slots/pagination.tsx

@@ -0,0 +1,74 @@
+import { cn } from '@meith/ui'
+import type { PaginationModel } from '@meith/theme-kit'
+
+import { BUTTON, MICRO, NUMERIC } from '../shared'
+
+export function Pagination({ page, pageCount, pages, previousHref, nextHref }: PaginationModel) {
+  if (pageCount <= 1 && previousHref === null && nextHref === null) return null
+
+  const step = cn(BUTTON, 'min-w-20 justify-center border border-border bg-card hover:bg-accent')
+  const stepDisabled = cn(step, 'pointer-events-none opacity-40')
+
+  return (
+    <nav aria-label="Pagination" className="flex flex-wrap items-center justify-between gap-3">
+      {previousHref === null ? (
+        <span className={stepDisabled} aria-hidden="true">
+          Previous
+        </span>
+      ) : (
+        <a href={previousHref} rel="prev" className={step}>
+          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(
+                  BUTTON,
+                  'min-w-8 justify-center px-2.5',
+                  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-2 whitespace-nowrap ${MICRO}`}>
+          <span className="sr-only">Page </span>
+          <span className={NUMERIC}>
+            {page} of {pageCount}
+          </span>
+        </li>
+      </ol>
+
+      {nextHref === null ? (
+        <span className={stepDisabled} aria-hidden="true">
+          Next
+        </span>
+      ) : (
+        <a href={nextHref} rel="next" className={step}>
+          Next
+        </a>
+      )}
+    </nav>
+  )
+}

package/src/slots/post-actions.tsx

@@ -0,0 +1,55 @@
+import { Separator, cn } from '@meith/ui'
+import type { PostActionsSlotModel } from '@meith/theme-kit'
+
+import { BUTTON, isEmptyRegion } from '../shared'
+
+interface Action {
+  readonly href: string
+  readonly label: string
+}
+
+const ACTION = cn(BUTTON, 'h-7 px-2.5 text-muted-foreground 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)
+
+  const extra = isEmptyRegion(children) ? null : children
+
+  if (reader.length === 0 && staff.length === 0 && extra === null) return null
+
+  return (
+    <nav
+      aria-label="Post actions"
+      className="flex flex-wrap items-center gap-1 border-t border-border bg-surface px-3 py-1.5 empty:hidden"
+    >
+      {reader.map((action) => (
+        <a key={action.href} href={action.href} className={ACTION}>
+          {action.label}
+        </a>
+      ))}
+
+      {reader.length > 0 && staff.length > 0 && (
+        <Separator orientation="vertical" className="mx-1.5" />
+      )}
+
+      {staff.map((action) => (
+        <a key={action.href} href={action.href} className={ACTION}>
+          {action.label}
+        </a>
+      ))}
+
+      {extra}
+    </nav>
+  )
+}