@meith/theme-default 0.1.0

package/src/slots/post-bit.tsx

@@ -0,0 +1,245 @@
+import { Alert, AlertDescription, AlertTitle, Avatar, Card } from '@meith/ui'
+import type { PostBitSlotModel } from '@meith/theme-kit'
+
+import { LINK, 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 AuthorBlock({
+  author,
+  badges,
+}: {
+  author: PostBitSlotModel['post']['author']
+  badges: React.ReactNode
+}) {
+  return (
+    <div className="flex gap-3 sm:flex-col sm:gap-2 sm:text-center">
+      <Avatar src={author.avatarUrl} name={author.username} size={48} className="sm:self-center" />
+
+      <div className="min-w-0 flex-1 sm:flex-none">
+        <p className="truncate text-sm">
+          <UserRef user={author} className="font-semibold text-foreground" />
+        </p>
+
+        {author.badge != null && (
+          <p className="mt-1 flex sm:justify-center">
+            <GroupBadge badge={author.badge} />
+          </p>
+        )}
+
+        {author.title !== null && (
+          <p className="truncate text-xs text-muted-foreground">{author.title}</p>
+        )}
+
+        {author.isOnline && (
+          <p className="mt-1 flex items-center gap-1.5 text-xs text-moderation-approved sm:justify-center">
+            <span aria-hidden="true" className="size-1.5 rounded-full bg-moderation-approved" />
+            Online
+          </p>
+        )}
+
+        {badges}
+
+        <dl className={`mt-1.5 text-xs text-muted-foreground ${NUMERIC}`}>
+          <div className="flex gap-1 sm:justify-center">
+            <dt className="sr-only">Posts</dt>
+            <dd>
+              {author.postCount.toLocaleString('en')} {author.postCount === 1 ? 'post' : 'posts'}
+            </dd>
+          </div>
+          {author.joinedAt !== null && (
+            <div className="flex gap-1 sm:justify-center">
+              <dt className="sr-only">Joined</dt>
+              <dd>
+                Joined <Stamp at={author.joinedAt} />
+              </dd>
+            </div>
+          )}
+          {author.reputation != null && (
+            <div className="flex gap-1 sm:justify-center">
+              <dt className="sr-only">Reputation</dt>
+              <dd>{author.reputation.toLocaleString('en')} reputation</dd>
+            </div>
+          )}
+        </dl>
+
+        {author.fields.length > 0 && (
+          <dl className="mt-1.5 space-y-0.5 text-xs text-muted-foreground">
+            {author.fields.map((field) => (
+              <div key={field.label} className="flex justify-center gap-1">
+                <dt className="font-medium">{field.label}:</dt>
+                <dd className="truncate">{field.value}</dd>
+              </div>
+            ))}
+          </dl>
+        )}
+      </div>
+    </div>
+  )
+}
+
+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={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 px-4 py-3 sm:border-r sm:border-b-0 sm:bg-muted/40">
+          <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-2 text-xs text-muted-foreground">
+            {select === null ? (
+              <span />
+            ) : (
+              <label className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  name={select.name}
+                  value={select.value}
+                  form={select.formId}
+                  className="size-4 accent-primary"
+                />
+                <span className="sr-only">{select.label}</span>
+              </label>
+            )}
+
+            <a href={post.permalink} className={MUTED_LINK}>
+              <Stamp at={post.postedAt} />
+              <span className={`ml-2 ${NUMERIC}`}>#{post.number}</span>
+            </a>
+          </div>
+
+          {post.ignored !== null ? (
+            <div className="px-4 py-5 text-sm text-muted-foreground">
+              You are ignoring{' '}
+              <span className="font-medium text-foreground">{post.ignored.authorUsername}</span>.
+              This post is hidden.{' '}
+              <a href={post.ignored.revealHref} className={`font-medium text-foreground ${LINK}`}>
+                Show it anyway
+              </a>
+            </div>
+          ) : (
+            <div className="px-4 py-4">
+              <div
+                className="prose-md text-sm"
+                dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
+              />
+
+              {post.editedNote !== null && (
+                <p className="mt-4 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="mb-2 text-xs font-semibold tracking-wide text-muted-foreground uppercase">
+                {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-md border border-border object-contain"
+                        />
+                      ) : null}
+                      <span className="block truncate">
+                        <span className="font-medium 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.5 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 className="border-t border-border px-4 py-2 empty:hidden">
+              {regions.actions}
+            </footer>
+          )}
+        </div>
+      </div>
+    </Card>
+  )
+}

package/src/slots/post-form.tsx

@@ -0,0 +1,36 @@
+import { Alert, AlertDescription, AlertTitle, Card } from '@meith/ui'
+import type { PostFormModel } from '@meith/theme-kit'
+
+import { MUTED_LINK, pageAt } from '../shared'
+
+export function PostForm({
+  heading,
+  cancelHref,
+  cancelLabel,
+  errorMessage,
+  regions,
+}: PostFormModel) {
+  return (
+    <div className={`${pageAt('max-w-3xl')} flex w-full flex-col gap-5 py-6 sm:py-8`}>
+      <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2">
+        <h1 className="text-2xl font-semibold tracking-tight text-balance">{heading}</h1>
+        <a href={cancelHref} className={`text-sm ${MUTED_LINK}`}>
+          {cancelLabel}
+        </a>
+      </div>
+
+      {errorMessage !== null && (
+        <Alert tone="error">
+          <AlertDescription>
+            <AlertTitle>Cannot post.</AlertTitle> {errorMessage}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <Card>
+        {regions.toolbar}
+        <div className="p-4 sm:p-5">{regions.form}</div>
+      </Card>
+    </div>
+  )
+}

package/src/slots/redirect-notice.tsx

@@ -0,0 +1,25 @@
+import { Card, CardContent, buttonVariants } from '@meith/ui'
+import type { RedirectNoticeModel } from '@meith/theme-kit'
+
+export function RedirectNotice({ message, targetHref, delaySeconds }: RedirectNoticeModel) {
+  return (
+    <Card className="w-full max-w-lg">
+      <CardContent className="p-6">
+        <p className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
+          Redirecting
+        </p>
+        <h1 className="mt-1 text-2xl font-semibold 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={buttonVariants({ variant: 'primary' })}>
+            Continue now
+          </a>
+          <span className="text-xs text-muted-foreground">
+            Continuing on its own in {delaySeconds} {delaySeconds === 1 ? 'second' : 'seconds'}.
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/src/slots/search-form.tsx

@@ -0,0 +1,94 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Card,
+  CardContent,
+  Field,
+  Input,
+  NativeSelect,
+  buttonVariants,
+} from '@meith/ui'
+import type { OptionModel, SearchFormModel } from '@meith/theme-kit'
+
+export function SearchForm({
+  action,
+  fields,
+  query,
+  maxQueryLength,
+  forums,
+  sorts,
+  hint,
+  errorMessage,
+}: SearchFormModel) {
+  return (
+    <Card>
+      <CardContent className="p-4 sm:p-5">
+        <form method="get" action={action} className="flex flex-col gap-4">
+          <Field
+            name={fields.query}
+            label="Search for"
+            error={errorMessage}
+            {...(hint === null ? {} : { description: hint })}
+          >
+            {(control) => (
+              <Input
+                {...control}
+                defaultValue={query}
+                maxLength={maxQueryLength}
+                type="search"
+                autoComplete="off"
+                placeholder="Words in a subject or a post"
+              />
+            )}
+          </Field>
+
+          <div className="grid gap-4 sm:grid-cols-2">
+            <Choice label="In" name={fields.forum} options={forums} />
+            <Choice label="Sort by" name={fields.sort} options={sorts} />
+          </div>
+
+          <div>
+            <button type="submit" className={buttonVariants({ variant: 'primary' })}>
+              Search
+            </button>
+          </div>
+        </form>
+
+        {errorMessage !== null && (
+          <Alert tone="error" className="mt-4">
+            <AlertDescription>
+              <AlertTitle>No results.</AlertTitle> {errorMessage}
+            </AlertDescription>
+          </Alert>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function Choice({
+  label,
+  name,
+  options,
+}: {
+  label: string
+  name: string
+  options: readonly OptionModel[]
+}) {
+  const selected = options.find((option) => option.isSelected)
+
+  return (
+    <Field name={name} label={label}>
+      {(control) => (
+        <NativeSelect {...control} defaultValue={selected?.value ?? ''}>
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </NativeSelect>
+      )}
+    </Field>
+  )
+}

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:left-4 focus-visible:top-4 focus-visible:z-50 focus-visible:inline-flex focus-visible:h-9 focus-visible:items-center focus-visible:rounded-md focus-visible:border focus-visible:border-border focus-visible:bg-card focus-visible:px-3 focus-visible:text-sm focus-visible:font-medium focus-visible:text-foreground focus-visible:shadow-lg"
+      >
+        Skip to content
+      </a>
+      {children}
+    </div>
+  )
+}

package/src/slots/subforum-list.tsx

@@ -0,0 +1,48 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@meith/ui'
+import type { SubforumListModel } from '@meith/theme-kit'
+
+import { Counts, LINK } from '../shared'
+
+export function SubforumList({ forums }: SubforumListModel) {
+  if (forums.length === 0) return null
+
+  return (
+    <Card aria-labelledby="subforums-heading">
+      <CardHeader>
+        <CardTitle id="subforums-heading" className="text-sm">
+          Subforums
+        </CardTitle>
+      </CardHeader>
+
+      <CardContent>
+        <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={`font-medium text-foreground ${LINK}`}>
+                {forum.title}
+              </a>
+              {forum.type !== 'link' && (
+                <Counts
+                  items={[
+                    {
+                      label: 'Threads',
+                      value: forum.threadCount,
+                      one: 'thread',
+                      many: 'threads',
+                    },
+                    {
+                      label: 'Posts',
+                      value: forum.postCount,
+                      one: 'post',
+                      many: 'posts',
+                    },
+                  ]}
+                />
+              )}
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  )
+}

package/src/slots/thread-row.tsx

@@ -0,0 +1,90 @@
+import { Badge } from '@meith/ui'
+import type { ThreadRowSlotModel } from '@meith/theme-kit'
+
+import { Counts, LINK, Prefix, ReadSpacer, Stamp, UnreadDot, UserRef } from '../shared'
+
+export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
+  return (
+    <li
+      data-unread={thread.isUnread ? '' : undefined}
+      className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-2.5 gap-y-2 px-4 py-3 transition-colors hover:bg-muted/60 md:grid-cols-[auto_minmax(0,1fr)_9rem_14rem] md:items-center md:gap-x-4"
+    >
+      <span className="flex items-start gap-2">
+        {select !== null && (
+          <label className="mt-0.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>
+        )}
+
+        {thread.isUnread ? <UnreadDot /> : <ReadSpacer />}
+      </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={
+              (thread.isUnread ? 'font-semibold text-foreground' : 'font-medium text-foreground') +
+              ` ${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-normal" />
+        </p>
+      </div>
+
+      <Counts
+        className="col-start-2 md:col-start-3 md:justify-end"
+        items={[
+          {
+            label: 'Replies',
+            value: thread.replyCount,
+            one: 'reply',
+            many: 'replies',
+          },
+          {
+            label: 'Views',
+            value: thread.viewCount,
+            one: 'view',
+            many: 'views',
+          },
+        ]}
+      />
+
+      <div className="col-start-2 min-w-0 text-xs text-muted-foreground md:col-start-4">
+        {thread.lastPost === null ? (
+          <span className="text-thread-moved">No replies yet</span>
+        ) : (
+          <>
+            <a href={thread.lastPost.href} className={`block font-medium text-foreground ${LINK}`}>
+              Latest reply
+            </a>
+            <span className="mt-0.5 block truncate">
+              {'by '}
+              <UserRef user={thread.lastPost.author} className="font-normal" />
+              {' · '}
+              <Stamp at={thread.lastPost.at} />
+            </span>
+          </>
+        )}
+      </div>
+    </li>
+  )
+}

package/src/slots/thread-view.tsx

@@ -0,0 +1,77 @@
+import { Badge, buttonVariants } from '@meith/ui'
+import type { ThreadViewModel } from '@meith/theme-kit'
+
+import { Counts, MUTED_LINK, PAGE_BODY, Prefix } from '../shared'
+
+export function ThreadView({ thread, forum, replyHref, markReadAction, regions }: ThreadViewModel) {
+  return (
+    <div className={PAGE_BODY}>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
+        <div className="min-w-0">
+          <a href={forum.href} className={`text-sm sm:hidden ${MUTED_LINK}`}>
+            {forum.label}
+          </a>
+
+          <h1 className="mt-1 text-2xl font-semibold tracking-tight text-balance sm:mt-0">
+            {thread.title}
+          </h1>
+
+          <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-2">
+            {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>}
+
+            <Counts
+              items={[
+                {
+                  label: 'Replies',
+                  value: thread.replyCount,
+                  one: 'reply',
+                  many: 'replies',
+                },
+                {
+                  label: 'Views',
+                  value: thread.viewCount,
+                  one: 'view',
+                  many: 'views',
+                },
+              ]}
+            />
+          </div>
+        </div>
+
+        <div className="flex shrink-0 items-center gap-2">
+          {markReadAction !== null && (
+            <form action={markReadAction} method="post">
+              <button type="submit" className={buttonVariants({ variant: 'ghost' })}>
+                Mark read
+              </button>
+            </form>
+          )}
+          {replyHref !== null && (
+            <a href={replyHref} className={buttonVariants({ variant: 'primary' })}>
+              Reply
+            </a>
+          )}
+        </div>
+      </div>
+
+      {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>
+  )
+}