@meith/theme-clubhouse 0.3.2

package/src/slots/post-bit.tsx

@@ -0,0 +1,251 @@
+import { Alert, AlertDescription, AlertTitle, Avatar, Card } from '@meith/ui'
+import type { PostBitSlotModel } from '@meith/theme-kit'
+
+import { HEADING, LINK, MICRO, MICRO_BARE, MUTED_LINK, NUMERIC, Stamp, UserRef } from '../shared'
+
+const VISIBILITY_TINT = {
+  visible: '',
+  unapproved: 'border-thread-unapproved/50 bg-post-unapproved/40',
+  deleted: 'border-thread-deleted/50 bg-destructive/5',
+} as const
+
+function StatusBanner({ visibility }: { visibility: PostBitSlotModel['post']['visibility'] }) {
+  if (visibility === 'visible') return null
+
+  return (
+    <Alert
+      tone={visibility === 'deleted' ? 'error' : 'warning'}
+      className="rounded-none border-t-0 border-r-0"
+    >
+      <AlertDescription>
+        <AlertTitle>
+          {visibility === 'deleted' ? 'Deleted post.' : 'Waiting for approval.'}
+        </AlertTitle>{' '}
+        Only moderators can see this.
+      </AlertDescription>
+    </Alert>
+  )
+}
+
+function GroupBadge({
+  badge,
+}: {
+  badge: NonNullable<PostBitSlotModel['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 StatLine({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-baseline justify-between gap-2">
+      <dt className={MICRO}>{label}</dt>
+      <dd className={`${NUMERIC} text-xs font-semibold text-foreground`}>{children}</dd>
+    </div>
+  )
+}
+
+function AuthorBlock({
+  author,
+  badges,
+}: {
+  author: PostBitSlotModel['post']['author']
+  badges: React.ReactNode
+}) {
+  return (
+    <>
+      <div aria-hidden="true" className="h-12 border-b-2 border-b-secondary bg-primary" />
+
+      <div className="relative z-10 -mt-7 px-4">
+        <Avatar
+          src={author.avatarUrl}
+          name={author.username}
+          size={52}
+          className="rounded-sm border-2 border-card"
+        />
+
+        <p className="mt-1.5 truncate">
+          <UserRef user={author} className={`${HEADING} text-sm`} />
+        </p>
+
+        {author.title !== null && <p className={`${MICRO} mt-0.5 truncate`}>{author.title}</p>}
+
+        {author.isOnline && (
+          <p className="mt-1 flex items-center gap-1.5 text-xs text-moderation-approved">
+            <span aria-hidden="true" className="size-1.5 rounded-full bg-moderation-approved" />
+            Online
+          </p>
+        )}
+
+        {author.badge != null && (
+          <p className="mt-2">
+            <GroupBadge badge={author.badge} />
+          </p>
+        )}
+
+        {badges}
+      </div>
+
+      <dl className="mt-2.5 space-y-1 border-t border-border px-4 py-2.5">
+        <StatLine label="Posts">{author.postCount.toLocaleString('en')}</StatLine>
+        {author.reputation != null && (
+          <StatLine label="Rep">{author.reputation.toLocaleString('en')}</StatLine>
+        )}
+        {author.joinedAt !== null && (
+          <StatLine label="Joined">
+            <Stamp at={author.joinedAt} />
+          </StatLine>
+        )}
+        {author.fields.map((field) => (
+          <StatLine key={field.label} label={field.label}>
+            <span className="truncate">{field.value}</span>
+          </StatLine>
+        ))}
+      </dl>
+    </>
+  )
+}
+
+export function PostBit({ post, select, regions }: PostBitSlotModel) {
+  return (
+    <Card
+      as="article"
+      id={`post-${post.number}`}
+      data-post-id={post.id}
+      data-visibility={post.visibility}
+      className={`target:bg-post-highlight ${VISIBILITY_TINT[post.visibility]}`}
+    >
+      <StatusBanner visibility={post.visibility} />
+
+      <div className="grid grid-cols-1 sm:grid-cols-[11rem_minmax(0,1fr)]">
+        <div className="border-b border-border bg-surface pb-1 sm:border-r sm:border-b-0">
+          <AuthorBlock author={post.author} badges={regions.pluginBadges} />
+        </div>
+
+        <div className="min-w-0">
+          <div className="flex items-center justify-between gap-3 border-b border-border px-4 py-1.5 text-xs text-muted-foreground">
+            <span className="flex items-center gap-2">
+              {select !== null && (
+                <label className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    name={select.name}
+                    value={select.value}
+                    form={select.formId}
+                    className="size-3.5 accent-primary"
+                  />
+                  <span className="sr-only">{select.label}</span>
+                </label>
+              )}
+
+              {post.isFirstPost && (
+                <span
+                  className={`${MICRO_BARE} rounded-sm bg-primary px-1.5 py-0.5 text-primary-foreground`}
+                >
+                  Opening post
+                </span>
+              )}
+
+              <Stamp at={post.postedAt} />
+            </span>
+
+            <a href={post.permalink} className={`${NUMERIC} ${MUTED_LINK}`}>
+              #{post.number}
+            </a>
+          </div>
+
+          {post.ignored !== null ? (
+            <div className="px-4 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={`font-semibold text-foreground ${LINK}`}>
+                Show it anyway
+              </a>
+            </div>
+          ) : (
+            <div className="px-4 py-3.5">
+              <div
+                className="prose-md text-sm"
+                dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
+              />
+
+              {post.editedNote !== null && (
+                <p className="mt-3 border-t border-border pt-2 text-xs text-muted-foreground">
+                  {post.editedNote}
+                </p>
+              )}
+            </div>
+          )}
+
+          {post.attachments.length > 0 && (
+            <div className="border-t border-border px-4 py-3">
+              <h4 className={`${MICRO} mb-2`}>
+                {post.attachments.length}{' '}
+                {post.attachments.length === 1 ? 'attachment' : 'attachments'}
+              </h4>
+              <ul className="flex flex-wrap gap-3">
+                {post.attachments.map((file) => (
+                  <li key={file.id} className="max-w-full">
+                    <a
+                      href={file.href}
+                      className="group block max-w-full text-xs text-muted-foreground hover:text-foreground"
+                    >
+                      {file.isImage ? (
+                        <img
+                          src={file.thumbnailHref ?? file.href}
+                          alt={file.filename}
+                          width={file.width ?? undefined}
+                          height={file.height ?? undefined}
+                          loading="lazy"
+                          decoding="async"
+                          className="mb-1 max-h-56 w-auto rounded-sm border border-border object-contain"
+                        />
+                      ) : null}
+                      <span className="block truncate">
+                        <span className="font-semibold group-hover:underline">{file.filename}</span>{' '}
+                        <span className="opacity-70">({file.size})</span>
+                      </span>
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {post.ignored === null && post.author.signatureHtml !== null && (
+            <div
+              className="prose-md border-t border-border px-4 py-2 text-xs text-muted-foreground"
+              dangerouslySetInnerHTML={{ __html: post.author.signatureHtml }}
+            />
+          )}
+
+          {regions.pluginFooter !== undefined && regions.pluginFooter !== null && (
+            <div className="border-t border-border px-4 py-2 text-xs empty:hidden">
+              {regions.pluginFooter}
+            </div>
+          )}
+
+          {regions.actions !== null && <footer>{regions.actions}</footer>}
+        </div>
+      </div>
+    </Card>
+  )
+}

package/src/slots/shell.tsx

@@ -0,0 +1,19 @@
+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-4 focus-visible:left-4 focus-visible:z-50 focus-visible:inline-flex focus-visible:h-9 focus-visible:items-center focus-visible:rounded-full focus-visible:border focus-visible:border-border focus-visible:bg-card focus-visible:px-4 focus-visible:text-sm focus-visible:font-semibold focus-visible:text-foreground focus-visible:shadow-elevation"
+      >
+        Skip to content
+      </a>
+
+      {children}
+    </div>
+  )
+}

package/src/slots/subforum-list.tsx

@@ -0,0 +1,32 @@
+import { Card, CardContent } from '@meith/ui'
+import type { SubforumListModel } from '@meith/theme-kit'
+
+import { HEADING, LINK, MICRO, NUMERIC, PanelHead } from '../shared'
+
+export function SubforumList({ forums }: SubforumListModel) {
+  if (forums.length === 0) return null
+
+  return (
+    <Card aria-labelledby="subforums-heading">
+      <PanelHead id="subforums-heading" title="Subforums" />
+
+      <CardContent className="px-4 py-3">
+        <ul className="flex flex-wrap gap-x-6 gap-y-2 text-sm">
+          {forums.map((forum) => (
+            <li key={forum.id} className="min-w-0">
+              <a href={forum.href} className={`${HEADING} text-sm text-foreground ${LINK}`}>
+                {forum.title}
+              </a>
+              {forum.type !== 'link' && (
+                <p className={`${MICRO} ${NUMERIC} mt-0.5`}>
+                  {forum.threadCount.toLocaleString('en')} threads ·{' '}
+                  {forum.postCount.toLocaleString('en')} posts
+                </p>
+              )}
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  )
+}

package/src/slots/thread-row.tsx

@@ -0,0 +1,82 @@
+import { Badge } from '@meith/ui'
+import type { ThreadRowSlotModel } from '@meith/theme-kit'
+
+import { HEADING, LINK, MICRO, Prefix, ReadMark, Stamp, TABLE_ROW, Tally, UserRef } from '../shared'
+
+export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
+  return (
+    <li
+      data-unread={thread.isUnread ? '' : undefined}
+      className={`${TABLE_ROW} transition-colors hover:bg-accent`}
+    >
+      <span className="flex items-start gap-2">
+        {select !== null && (
+          <label className="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="mt-0.5 size-3.5 accent-primary"
+            />
+          </label>
+        )}
+
+        <ReadMark unread={thread.isUnread} />
+      </span>
+
+      <div className="min-w-0">
+        <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+          {thread.prefix !== null && <Prefix prefix={thread.prefix} />}
+          {thread.isSticky && <Badge tone="pinned">Pinned</Badge>}
+          {thread.isLocked && <Badge tone="locked">Locked</Badge>}
+          {thread.isMoved && <Badge tone="moved">Moved</Badge>}
+
+          <a
+            href={thread.href}
+            className={`${HEADING} text-sm ${thread.isUnread ? 'text-forum-unread' : 'text-forum-read'} ${LINK}`}
+          >
+            {thread.title}
+          </a>
+          {thread.isUnread && <span className="sr-only"> (new posts)</span>}
+        </div>
+
+        <p className="mt-0.5 text-xs text-muted-foreground">
+          Started by <UserRef user={thread.author} className="font-medium" />
+        </p>
+      </div>
+
+      <span className="col-start-2 md:col-start-3 md:block md:text-right">
+        <Tally value={thread.replyCount} label="replies" />
+        <span className="ms-3 md:hidden">
+          <Tally value={thread.viewCount} label="views" />
+        </span>
+      </span>
+
+      <span className="hidden md:block md:text-right">
+        <Tally value={thread.viewCount} label="views" />
+      </span>
+
+      <div className="col-start-2 min-w-0 text-xs text-muted-foreground md:col-start-5">
+        {thread.lastPost === null ? (
+          <span className={MICRO}>No replies yet</span>
+        ) : (
+          <>
+            <a
+              href={thread.lastPost.href}
+              className={`block font-semibold text-foreground ${LINK}`}
+            >
+              Latest reply
+            </a>
+            <span className="mt-0.5 block truncate">
+              <UserRef user={thread.lastPost.author} className="font-medium" />
+              {' · '}
+              <Stamp at={thread.lastPost.at} />
+            </span>
+          </>
+        )}
+      </div>
+    </li>
+  )
+}

package/src/slots/thread-view.tsx

@@ -0,0 +1,72 @@
+import { Badge, cn } from '@meith/ui'
+import type { ThreadViewModel } from '@meith/theme-kit'
+
+import { BUTTON, HEADING, MICRO, MUTED_LINK, NUMERIC, PAGE_BODY, PageHead, Prefix } from '../shared'
+
+export function ThreadView({ thread, forum, replyHref, markReadAction, regions }: ThreadViewModel) {
+  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>
+            )}
+            {replyHref !== null && (
+              <a
+                href={replyHref}
+                className={cn(BUTTON, 'bg-primary text-primary-foreground hover:bg-primary-hover')}
+              >
+                Reply
+              </a>
+            )}
+          </>
+        }
+      >
+        <a href={forum.href} className={`text-xs sm:hidden ${MUTED_LINK}`}>
+          {forum.label}
+        </a>
+
+        <h1 className={`${HEADING} text-xl text-balance`}>{thread.title}</h1>
+
+        <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1">
+          {thread.prefix !== null && <Prefix prefix={thread.prefix} />}
+          {thread.isSticky && <Badge tone="pinned">Pinned</Badge>}
+          {thread.isLocked && <Badge tone="locked">Locked — no new replies</Badge>}
+          {thread.isMoved && <Badge tone="moved">Moved</Badge>}
+
+          <span className={`${MICRO} ${NUMERIC}`}>
+            {thread.replyCount.toLocaleString('en')} replies ·{' '}
+            {thread.viewCount.toLocaleString('en')} views
+          </span>
+        </div>
+      </PageHead>
+
+      {regions.tools !== undefined && (
+        <div className="flex flex-col gap-3 empty:hidden">{regions.tools}</div>
+      )}
+
+      <div className="flex flex-col gap-3">{regions.posts}</div>
+
+      {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>
+      )}
+
+      {regions.quickReply}
+    </div>
+  )
+}

package/src/slots/user-panel.tsx

@@ -0,0 +1,140 @@
+import { Avatar, cn } from '@meith/ui'
+import { Menu } from '@meith/ui/menu'
+import type { LinkModel, UserPanelModel } from '@meith/theme-kit'
+
+import { BUTTON, MUTED_LINK } from '../shared'
+
+const COUNT =
+  'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-bold tabular-nums uppercase tracking-[0.08em]'
+
+function Count({
+  href,
+  className,
+  children,
+}: {
+  href?: string | undefined
+  className: string
+  children: React.ReactNode
+}) {
+  const badge = <span className={cn(COUNT, className)}>{children}</span>
+  if (href === undefined) return badge
+  return (
+    <a
+      href={href}
+      className="rounded-full outline-offset-2 focus-visible:outline-2 focus-visible:outline-ring"
+    >
+      {badge}
+    </a>
+  )
+}
+
+export function UserPanel({
+  viewer,
+  links,
+  unreadNotifications,
+  unreadMessages,
+  notificationsHref,
+  messagesHref,
+  children,
+}: UserPanelModel) {
+  if (viewer.isGuest) {
+    return (
+      <div className="flex items-center gap-2">
+        {links.map((link: LinkModel, index: number) => (
+          <a
+            key={link.href}
+            href={link.href}
+            className={cn(
+              BUTTON,
+              index === 0
+                ? 'bg-primary text-primary-foreground hover:bg-primary-hover'
+                : 'border border-border text-foreground hover:bg-accent',
+            )}
+          >
+            {link.label}
+          </a>
+        ))}
+      </div>
+    )
+  }
+
+  const name = viewer.username ?? 'Signed in'
+
+  return (
+    <div className="flex min-w-0 flex-col items-start gap-1 sm:items-end">
+      <noscript
+        dangerouslySetInnerHTML={{
+          __html:
+            '<style>[data-account="menu"]{display:none}[data-account="plain"]{display:flex!important}</style>',
+        }}
+      />
+
+      <div className="flex min-w-0 items-center gap-2">
+        {unreadNotifications > 0 && (
+          <Count href={notificationsHref} className="bg-primary text-primary-foreground">
+            {unreadNotifications}
+            <span className="sr-only"> unread notifications</span>
+            <span aria-hidden="true">new</span>
+          </Count>
+        )}
+        {unreadMessages > 0 && (
+          <Count href={messagesHref} className="border border-border text-foreground">
+            {unreadMessages}
+            <span className="sr-only"> unread messages</span>
+            <span aria-hidden="true">unread</span>
+          </Count>
+        )}
+
+        <span data-account="menu" className="flex min-w-0 items-center">
+          <Menu
+            label="Your account"
+            items={links}
+            triggerClassName="rounded-full px-2 py-1"
+            trigger={
+              <>
+                <Avatar
+                  src={viewer.avatarUrl}
+                  name={name}
+                  size={26}
+                  className="rounded-full border-primary/60"
+                />
+                <span className="max-w-40 truncate text-sm font-semibold text-foreground">
+                  {name}
+                </span>
+                <svg
+                  aria-hidden="true"
+                  viewBox="0 0 12 12"
+                  className="size-3 shrink-0 text-muted-foreground"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="m3 4.5 3 3 3-3" />
+                </svg>
+              </>
+            }
+          >
+            {children}
+          </Menu>
+        </span>
+      </div>
+
+      <nav
+        data-account="plain"
+        style={{ display: 'none' }}
+        aria-label="Your account"
+        className="flex-wrap items-center gap-x-3 gap-y-1 text-xs sm:justify-end"
+      >
+        <span className="font-semibold text-foreground">{name}</span>
+        {links.map((link: LinkModel) => (
+          <a key={link.href} href={link.href} className={MUTED_LINK}>
+            {link.label}
+          </a>
+        ))}
+        {children}
+      </nav>
+    </div>
+  )
+}

package/src/slots/who-is-online.tsx

@@ -0,0 +1,90 @@
+import { Badge } from '@meith/ui'
+import type { OnlineMemberModel, WhoIsOnlineModel } from '@meith/theme-kit'
+
+import { LINK, MICRO, NUMERIC, Stamp, UserRef } from '../shared'
+
+const VISIBLE_NAMES = 12
+
+export function WhoIsOnline({
+  guestCount,
+  members,
+  total,
+  recordCount,
+  recordAt,
+  fullListHref,
+}: WhoIsOnlineModel) {
+  const shown = members.slice(0, VISIBLE_NAMES)
+  const rest = members.slice(VISIBLE_NAMES)
+
+  return (
+    <section
+      aria-labelledby="who-is-online-heading"
+      className="flex flex-col gap-1.5 text-xs text-muted-foreground"
+    >
+      <h2 id="who-is-online-heading" className={MICRO}>
+        In the clubhouse
+      </h2>
+
+      <p className={NUMERIC}>
+        <span className="font-semibold text-foreground">{total.toLocaleString('en')}</span> online —{' '}
+        {members.length.toLocaleString('en')} {members.length === 1 ? 'member' : 'members'},{' '}
+        {guestCount.toLocaleString('en')} {guestCount === 1 ? 'guest' : 'guests'}
+      </p>
+
+      {members.length === 0 ? (
+        <p>
+          {guestCount === 0
+            ? 'Nobody is reading the board right now.'
+            : 'Only guests are reading the board right now.'}
+        </p>
+      ) : (
+        <p className="min-w-0">
+          {shown.map((member, index) => (
+            <Name key={member.userId ?? member.username} member={member} first={index === 0} />
+          ))}
+
+          {rest.length > 0 && (
+            <details className="inline">
+              <summary
+                className={`inline cursor-default list-none ${LINK} [&::-webkit-details-marker]:hidden [&::marker]:content-none`}
+              >
+                {' and '}
+                <span className={NUMERIC}>{rest.length.toLocaleString('en')}</span> more
+              </summary>
+              {': '}
+              {rest.map((member, index) => (
+                <Name key={member.userId ?? member.username} member={member} first={index === 0} />
+              ))}
+            </details>
+          )}
+        </p>
+      )}
+
+      <p className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+        <a href={fullListHref} className={`font-semibold text-foreground ${LINK}`}>
+          See everyone online
+        </a>
+        {recordAt !== null && (
+          <span className={`ms-auto ${NUMERIC}`}>
+            Record: {recordCount.toLocaleString('en')} on <Stamp at={recordAt} />
+          </span>
+        )}
+      </p>
+    </section>
+  )
+}
+
+function Name({ member, first }: { member: OnlineMemberModel; first: boolean }) {
+  return (
+    <>
+      {!first && ', '}
+      <UserRef user={member} className="font-medium" />
+      {member.isInvisible && (
+        <>
+          {' '}
+          <Badge tone="neutral">Invisible</Badge>
+        </>
+      )}
+    </>
+  )
+}