@meith/theme-raidframe 0.2.0

package/src/slots/panel-nav.tsx

@@ -0,0 +1,110 @@
+import type { PanelNavItemModel, PanelNavModel } from '@meith/theme-kit'
+
+import { MICRO, NUMERIC, RULE } from '../shared'
+
+const ITEM =
+  'flex items-baseline gap-2 border-l-2 px-2.5 py-1.5 text-[0.8125rem] tracking-[0.02em]'
+
+const HERE = 'border-l-primary bg-secondary font-semibold text-foreground'
+const OPEN = 'border-l-primary/40 font-semibold text-foreground'
+const ELSEWHERE = 'border-l-transparent text-muted-foreground hover:border-l-border hover:text-primary'
+
+function Count({ count }: { count: number }) {
+  return (
+    <>
+      <span
+        aria-hidden="true"
+        className={`ml-auto border border-primary/50 bg-primary/15 px-1.5 text-[0.625rem] font-bold text-primary ${NUMERIC}`}
+      >
+        {count > 99 ? '99+' : count}
+      </span>
+      <span className="sr-only">({count} waiting)</span>
+    </>
+  )
+}
+
+function Item({ item, className }: { item: PanelNavItemModel; className: string }) {
+  const body = (
+    <>
+      <span className="min-w-0 flex-1">{item.title}</span>
+      {item.count !== null && <Count count={item.count} />}
+    </>
+  )
+
+  if (item.isRecord) {
+    return (
+      <span className={`${ITEM} ${HERE} ${className}`} aria-current="page">
+        {body}
+      </span>
+    )
+  }
+
+  return (
+    <a
+      href={item.href}
+      className={`${ITEM} ${className}`}
+      {...(item.current === null
+        ? {}
+        : { 'aria-current': item.current === 'here' ? ('page' as const) : ('true' as const) })}
+    >
+      {body}
+    </a>
+  )
+}
+
+function Sections({ label, sections }: Pick<PanelNavModel, 'label' | 'sections'>) {
+  return (
+    <nav aria-label={label}>
+      <ul className="flex flex-col">
+        {sections.map((section) => (
+          <li
+            key={section.href}
+            className={section.isOverview ? 'mb-1 border-b border-border pb-1' : undefined}
+          >
+            <Item
+              item={section}
+              className={section.current === 'here' ? HERE : section.isOpen ? OPEN : ELSEWHERE}
+            />
+
+            {section.isOpen && section.children.length > 0 && (
+              <ul className="my-0.5 ml-3 flex flex-col border-l border-border pl-1">
+                {section.children.map((child) => (
+                  <li key={child.href}>
+                    <Item item={child} className={child.current === 'here' ? HERE : ELSEWHERE} />
+                  </li>
+                ))}
+              </ul>
+            )}
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+export function PanelNav({ label, sections, currentTitle }: PanelNavModel) {
+  return (
+    <>
+      <details className="border border-border bg-card lg:hidden">
+        <summary className="flex cursor-pointer items-center justify-between gap-2 bg-surface px-3 py-2">
+          <span className={`${MICRO} text-foreground`}>{label}</span>
+          {currentTitle !== null && <span className={MICRO}>{currentTitle}</span>}
+        </summary>
+        <div className={RULE} aria-hidden="true" />
+        <div className="p-2">
+          <Sections label={label} sections={sections} />
+        </div>
+      </details>
+
+      <div className="hidden border border-border bg-card shadow-elevation lg:block">
+        <p className={`${MICRO} border-b border-border bg-surface px-3 py-2 text-foreground`}>
+          {label}
+        </p>
+        <div className={RULE} aria-hidden="true" />
+        <div className="p-2">
+          <Sections label={label} sections={sections} />
+        </div>
+      </div>
+    </>
+  )
+}

package/src/slots/panel-page.tsx

@@ -0,0 +1,72 @@
+import type { PanelKind, PanelPageModel, PanelSectionModel } from '@meith/theme-kit'
+
+import { HEADING, MICRO, RULE } from '../shared'
+
+const LABEL: Record<PanelKind, string> = {
+  usercp: 'your control panel',
+  modcp: 'moderator control panel',
+  admincp: 'control panel',
+}
+
+export function PanelPage({ panel, title, back, width, gap, regions, children }: PanelPageModel) {
+  return (
+    <main
+      id="board-content"
+      tabIndex={-1}
+      className={`flex w-full flex-col p-4 ${width === 'wide' ? 'max-w-none' : 'max-w-4xl'} ${
+        gap === 'loose' ? 'gap-6' : 'gap-4'
+      }`}
+    >
+      <div className="border border-border bg-card shadow-elevation">
+        <div className="flex flex-wrap items-start justify-between gap-x-6 gap-y-2 px-4 py-3">
+          <div className="flex min-w-0 flex-col gap-1">
+            {back !== null && (
+              <a href={back.href} className={`${MICRO} hover:text-primary`}>
+                ← {back.label}
+              </a>
+            )}
+
+            {panel !== null && back === null && <p className={MICRO}>{LABEL[panel]}</p>}
+
+            <h1 className={`${HEADING} text-xl text-foreground`}>{title}</h1>
+
+            {regions.lede !== undefined && (
+              <p className="text-sm text-muted-foreground">{regions.lede}</p>
+            )}
+            {regions.meta !== undefined && <p className={`${MICRO} normal-case`}>{regions.meta}</p>}
+          </div>
+
+          {regions.actions !== undefined && (
+            <div className="flex shrink-0 flex-wrap items-center gap-2">{regions.actions}</div>
+          )}
+        </div>
+        <div className={RULE} aria-hidden="true" />
+      </div>
+
+      {children}
+    </main>
+  )
+}
+
+export function PanelSection({ title, headingId, regions, children }: PanelSectionModel) {
+  return (
+    <section aria-labelledby={headingId} className="flex flex-col gap-3">
+      <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-1 border-b border-border pb-1.5">
+        <div className="flex min-w-0 flex-col gap-0.5">
+          <h2 id={headingId} className={`${HEADING} text-base text-foreground`}>
+            {title}
+          </h2>
+          {regions.description !== undefined && (
+            <p className="text-sm text-muted-foreground">{regions.description}</p>
+          )}
+        </div>
+
+        {regions.actions !== undefined && (
+          <div className="flex shrink-0 flex-wrap items-center gap-2">{regions.actions}</div>
+        )}
+      </div>
+
+      {children}
+    </section>
+  )
+}

package/src/slots/panel-shell.tsx

@@ -0,0 +1,33 @@
+import type { PanelShellModel } from '@meith/theme-kit'
+
+import { MICRO } from '../shared'
+
+export function PanelShell({ panel, links, linksLabel, regions, children }: PanelShellModel) {
+  return (
+    <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col lg:flex-row">
+      <aside
+        className={`flex flex-col gap-3 p-4 lg:sticky lg:w-56 lg:shrink-0 lg:self-start lg:pr-0 ${
+          panel === 'admincp' ? 'lg:top-14' : 'lg:top-4'
+        }`}
+      >
+        {regions.nav}
+
+        {links.length > 0 && (
+          <nav aria-label={linksLabel} className="border-t border-border pt-3">
+            <ul className="flex flex-col gap-1">
+              {links.map((link) => (
+                <li key={link.href}>
+                  <a href={link.href} className={`${MICRO} block hover:text-primary`}>
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )}
+      </aside>
+
+      <div className="min-w-0 flex-1">{children}</div>
+    </div>
+  )
+}

package/src/slots/post-actions.tsx

@@ -0,0 +1,29 @@
+import type { PostActionsSlotModel } from '@meith/theme-kit'
+
+const ACTION =
+  'font-mono text-[0.625rem] font-semibold uppercase tracking-[0.14em] text-muted-foreground hover:text-primary'
+
+export function PostActions({ actions, children }: PostActionsSlotModel) {
+  const items = [
+    { href: actions.quoteHref, label: 'quote' },
+    { href: actions.editHref, label: 'edit' },
+    { href: actions.restoreHref, label: 'restore' },
+    { href: actions.rateHref, label: 'rate' },
+    { href: actions.reportHref, label: 'report' },
+    { href: actions.warnHref, label: 'warn' },
+    { href: actions.moderateHref, label: 'moderate' },
+  ].filter((item): item is { href: string; label: string } => item.href !== null)
+
+  if (items.length === 0 && children === undefined) return null
+
+  return (
+    <nav aria-label="Post actions" className="flex flex-wrap items-center gap-x-4 gap-y-1">
+      {items.map((item) => (
+        <a key={item.label} href={item.href} className={ACTION}>
+          {item.label}
+        </a>
+      ))}
+      {children}
+    </nav>
+  )
+}

package/src/slots/post-bit.tsx

@@ -0,0 +1,225 @@
+import type { ReactNode } from 'react'
+
+import type { PostBitSlotModel } from '@meith/theme-kit'
+
+import { HEADING, MICRO, NUMERIC, Stamp, UserRef } from '../shared'
+
+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 StatusBanner({ visibility }: { visibility: PostBitSlotModel['post']['visibility'] }) {
+  if (visibility === 'visible') return null
+
+  return (
+    <p
+      className={`${MICRO} border-b border-border px-3 py-1.5 ${
+        visibility === 'deleted' ? 'bg-thread-deleted/10' : 'bg-post-unapproved'
+      }`}
+    >
+      {visibility === 'deleted'
+        ? 'deleted — visible to moderators only'
+        : 'awaiting approval — visible to moderators only'}
+    </p>
+  )
+}
+
+function StatLine({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="flex items-baseline justify-between gap-2 border-t border-border/60 py-0.5">
+      <dt className={MICRO}>{label}</dt>
+      <dd className={`${NUMERIC} text-[0.6875rem] text-foreground`}>{children}</dd>
+    </div>
+  )
+}
+
+export function PostBit({ post, select, regions }: PostBitSlotModel) {
+  return (
+    <article
+      id={`post-${post.number}`}
+      data-post-id={post.id}
+      className="relative border border-border bg-card shadow-elevation"
+    >
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute -top-px -left-px size-2 border-t-2 border-l-2 border-primary/70"
+      />
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute -right-px -bottom-px size-2 border-r-2 border-b-2 border-primary/70"
+      />
+
+      <StatusBanner visibility={post.visibility} />
+
+      <div className="grid grid-cols-1 sm:grid-cols-[12rem_1fr]">
+        <div className="border-b border-border bg-surface px-3 py-3 sm:border-r sm:border-b-0">
+          <div className="flex items-start gap-2">
+            {select !== null && (
+              <label className="flex items-center pt-1">
+                <span className="sr-only">{select.label}</span>
+                <input
+                  type="checkbox"
+                  name={select.name}
+                  value={select.value}
+                  form={select.formId}
+                  className="size-3.5 accent-primary"
+                />
+              </label>
+            )}
+
+            {post.author.avatarUrl !== null && (
+              <span className="relative inline-block shrink-0 border border-primary/50 p-0.5">
+                <img
+                  src={post.author.avatarUrl}
+                  alt=""
+                  width={48}
+                  height={48}
+                  className="size-12 object-cover"
+                />
+              </span>
+            )}
+
+            <div className="min-w-0">
+              <p>
+                <UserRef
+                  user={post.author}
+                  className={`${HEADING} text-sm ${
+                    post.author.profileHref === null ? '' : 'hover:text-primary'
+                  }`}
+                />
+              </p>
+              {post.author.title !== null && (
+                <p className={`${MICRO} mt-0.5 text-primary/90`}>{post.author.title}</p>
+              )}
+              {post.author.isOnline && (
+                <p className="mt-1 inline-flex items-center gap-1.5">
+                  <span
+                    aria-hidden="true"
+                    className="size-1.5 bg-moderation-approved shadow-[0_0_6px_var(--color-moderation-approved)]"
+                  />
+                  <span
+                    className={`${MICRO} text-moderation-approved`}
+                  >
+                    online
+                  </span>
+                </p>
+              )}
+            </div>
+          </div>
+
+          {regions.pluginBadges}
+
+          {post.author.badge != null && (
+            <p className="mt-2">
+              <GroupBadge badge={post.author.badge} />
+            </p>
+          )}
+
+          <dl className="mt-2.5">
+            <StatLine label="posts">{post.author.postCount}</StatLine>
+            {post.author.reputation != null && (
+              <StatLine label="rep">{post.author.reputation}</StatLine>
+            )}
+            {post.author.joinedAt !== null && (
+              <StatLine label="joined">
+                <Stamp at={post.author.joinedAt} />
+              </StatLine>
+            )}
+            {post.author.fields.map((field) => (
+              <StatLine key={field.label} label={field.label}>
+                {field.value}
+              </StatLine>
+            ))}
+          </dl>
+        </div>
+
+        <div className="min-w-0">
+          <div className="flex items-center justify-between gap-2 border-b border-border bg-card px-3 py-1.5">
+            <Stamp at={post.postedAt} className={`${MICRO} normal-case`} />
+            <a
+              href={post.permalink}
+              className={`${NUMERIC} text-[0.6875rem] font-bold text-primary hover:underline`}
+            >
+              #{post.number}
+            </a>
+          </div>
+
+          {post.ignored !== null ? (
+            <p className="px-3 py-3 text-sm text-muted-foreground">
+              Post from {post.ignored.authorUsername}, who you are ignoring.{' '}
+              <a href={post.ignored.revealHref} className="text-primary hover:underline">
+                Show it
+              </a>
+            </p>
+          ) : (
+            <>
+              <div
+                className="prose-md px-3 py-3 text-sm"
+                dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
+              />
+
+              {post.attachments.length > 0 && (
+                <ul className="flex flex-wrap gap-2 border-t border-border px-3 py-2">
+                  {post.attachments.map((attachment) => (
+                    <li key={attachment.id}>
+                      <a
+                        href={attachment.href}
+                        className="inline-flex items-center gap-2 border border-border bg-surface px-2 py-1 font-mono text-[0.625rem] tracking-[0.1em] uppercase hover:border-primary/60 hover:text-primary"
+                      >
+                        {attachment.filename}
+                        <span className={`${NUMERIC} text-muted-foreground`}>
+                          {attachment.size}
+                        </span>
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              )}
+
+              {post.author.signatureHtml !== null && (
+                <div
+                  className="border-t border-border/60 px-3 py-2 text-xs text-muted-foreground"
+                  dangerouslySetInnerHTML={{ __html: post.author.signatureHtml }}
+                />
+              )}
+            </>
+          )}
+
+          {post.editedNote !== null && (
+            <p className={`${MICRO} border-t border-border px-3 py-1.5 normal-case`}>
+              {post.editedNote}
+            </p>
+          )}
+
+          {regions.pluginFooter !== undefined && regions.pluginFooter !== null && (
+            <div className="border-t border-border px-3 py-1.5 text-xs">{regions.pluginFooter}</div>
+          )}
+
+          {regions.actions !== null && (
+            <div className="border-t border-border bg-surface/60 px-3 py-1.5 empty:hidden">
+              {regions.actions}
+            </div>
+          )}
+        </div>
+      </div>
+    </article>
+  )
+}

package/src/slots/post-form.tsx

@@ -0,0 +1,44 @@
+import type { PostFormModel } from '@meith/theme-kit'
+
+import { BUTTON, HEADING, MICRO, RULE } from '../shared'
+
+export function PostForm({
+  mode,
+  heading,
+  cancelHref,
+  cancelLabel,
+  errorMessage,
+  regions,
+}: PostFormModel) {
+  return (
+    <div className="mx-auto flex w-full max-w-4xl flex-col gap-4 p-4">
+      {errorMessage !== null && (
+        <p
+          role="alert"
+          className="border border-l-[3px] border-border border-l-destructive bg-card px-3 py-2 text-sm"
+        >
+          <span className={`${MICRO} mr-2 text-destructive`}>cannot post</span>
+          {errorMessage}
+        </p>
+      )}
+
+      <section className="border border-border bg-card shadow-elevation">
+        <div className="flex flex-wrap items-center justify-between gap-3 px-4 py-3">
+          <div>
+            <p className={MICRO}>{mode === 'edit' ? 'edit' : mode === 'reply' ? 'reply' : 'new thread'}</p>
+            <h1 className={`${HEADING} text-lg text-foreground`}>{heading}</h1>
+          </div>
+          <a href={cancelHref} className={BUTTON}>
+            {cancelLabel}
+          </a>
+        </div>
+
+        <div className={RULE} aria-hidden="true" />
+
+        {regions.toolbar}
+
+        <div className="px-4 py-4">{regions.form}</div>
+      </section>
+    </div>
+  )
+}

package/src/slots/redirect-notice.tsx

@@ -0,0 +1,26 @@
+import type { RedirectNoticeModel } from '@meith/theme-kit'
+
+import { BUTTON_PRIMARY, Frame, HEADING, MICRO, NUMERIC } from '../shared'
+
+export function RedirectNotice({ message, targetHref, delaySeconds }: RedirectNoticeModel) {
+  return (
+    <Frame className="w-full max-w-lg">
+      <div className="px-5 py-5">
+        <p className={`${MICRO} text-primary`}>redirecting</p>
+        <h1 className={`${HEADING} mt-1 text-2xl text-foreground`}>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={BUTTON_PRIMARY}>
+            continue now
+          </a>
+          <span className={`${MICRO} normal-case`}>
+            <span className="uppercase">continuing in</span>{' '}
+            <span className={NUMERIC}>{delaySeconds}</span>
+            {delaySeconds === 1 ? ' second' : ' seconds'}
+          </span>
+        </div>
+      </div>
+    </Frame>
+  )
+}

package/src/slots/search-form.tsx

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