@meith/theme-phasebook 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-phasebook",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A theme for Meith with a familiar social shape, built on the default theme's slots.",
   "license": "LGPL-3.0-or-later",
   "repository": {
@@ -20,14 +20,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/theme-kit": "^0.1.0",
-    "@meith/theme-default": "^0.1.0",
-    "@meith/ui": "^0.1.0"
+    "@meith/theme-default": "^0.2.0",
+    "@meith/theme-kit": "^0.2.0",
+    "@meith/ui": "^0.2.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.3"
+    "@types/react": "^19.2.18"
   }
 }

package/src/slots/auth-page.tsx

@@ -0,0 +1,50 @@
+import type { AuthPageModel } from '@meith/theme-kit'
+
+import { LINK } from '../shared'
+
+export function AuthPage({ title, alert, links, regions }: AuthPageModel) {
+  return (
+    <main
+      id="board-content"
+      tabIndex={-1}
+      className="flex flex-1 flex-col items-center justify-center px-3 py-8 sm:px-4"
+    >
+      <div className="flex w-full max-w-sm flex-col gap-4 rounded-lg border border-border bg-card p-5 text-card-foreground shadow-elevation">
+        <div className="flex flex-col gap-1">
+          <h1 className="text-xl leading-tight font-bold tracking-tight">{title}</h1>
+          {regions.lede !== undefined && (
+            <p className="text-sm text-muted-foreground">{regions.lede}</p>
+          )}
+        </div>
+
+        {alert !== null && (
+          <p
+            role="alert"
+            className="rounded-lg bg-destructive/12 px-3 py-2 text-sm font-semibold text-destructive"
+          >
+            {alert}
+          </p>
+        )}
+
+        {regions.note !== undefined && (
+          <p className="text-sm text-muted-foreground">{regions.note}</p>
+        )}
+
+        {regions.form}
+
+        {links.length > 0 && (
+          <div className="flex flex-col gap-1 border-t border-border pt-3 text-sm text-muted-foreground">
+            {links.map((link) => (
+              <span key={link.href}>
+                {link.lead === null ? null : `${link.lead} `}
+                <a href={link.href} className={`font-semibold ${LINK}`}>
+                  {link.label}
+                </a>
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    </main>
+  )
+}

package/src/slots/discovery-view.tsx

@@ -0,0 +1,111 @@
+import { cn } from '@meith/ui'
+import type { DiscoveryViewModel, TabModel } from '@meith/theme-kit'
+
+import { Chip, FEED, LINK, PAGE, PILL, Stamp, count, plural } from '../shared'
+
+function Tabs({ label, tabs }: { label: string; tabs: readonly TabModel[] }) {
+  if (tabs.length === 0) return null
+
+  return (
+    <nav
+      aria-label={label}
+      className="overflow-hidden rounded-lg border border-border bg-card shadow-elevation"
+    >
+      <ul className="flex overflow-x-auto">
+        {tabs.map((tab) => (
+          <li key={tab.href} className="shrink-0">
+            <a
+              href={tab.href}
+              {...(tab.isCurrent ? { 'aria-current': 'page' as const } : {})}
+              className={cn(
+                'inline-flex h-11 items-center px-4 text-sm font-semibold whitespace-nowrap transition-colors',
+                tab.isCurrent
+                  ? 'border-b-2 border-primary text-primary'
+                  : 'border-b-2 border-transparent text-muted-foreground hover:bg-accent hover:text-foreground',
+              )}
+            >
+              {tab.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+export function DiscoveryView({
+  title,
+  blurb,
+  tabsLabel,
+  tabs,
+  rows,
+  nextHref,
+  nextLabel,
+  emptyMessage,
+  refusal,
+}: DiscoveryViewModel) {
+  return (
+    <main id="board-content" tabIndex={-1} className={`${PAGE} flex-1 py-4 sm:py-6`}>
+      <div className={`${FEED} flex flex-col gap-4`}>
+        <header className="rounded-lg border border-border bg-card px-4 py-3.5 shadow-elevation">
+          <h1 className="text-xl leading-tight font-bold tracking-tight">{title}</h1>
+          <p className="mt-1 text-sm text-muted-foreground">{blurb}</p>
+        </header>
+
+        <Tabs label={tabsLabel} tabs={tabs} />
+
+        {refusal !== null ? (
+          <p
+            role="alert"
+            className="rounded-lg border border-border bg-card px-4 py-3.5 text-sm shadow-elevation"
+          >
+            {refusal.message}{' '}
+            <a href={refusal.signInHref} className={`font-semibold ${LINK}`}>
+              {refusal.signInLabel}
+            </a>
+          </p>
+        ) : rows.length === 0 ? (
+          <p className="rounded-lg border border-border bg-card px-4 py-6 text-center text-sm text-muted-foreground shadow-elevation">
+            {emptyMessage}
+          </p>
+        ) : (
+          <ul className="flex flex-col gap-3">
+            {rows.map((row) => (
+              <li
+                key={row.threadId}
+                className="rounded-lg border border-border bg-card px-4 py-3.5 shadow-elevation"
+              >
+                <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
+                  <a
+                    href={row.href}
+                    className="min-w-0 text-[0.9375rem] font-semibold hover:underline"
+                  >
+                    {row.title}
+                  </a>
+                  <Chip>
+                    {count(row.replyCount)} {plural(row.replyCount, 'reply', 'replies')}
+                  </Chip>
+                </div>
+
+                <p className="mt-1 text-xs text-muted-foreground">
+                  in{' '}
+                  <a href={row.forum.href} className={LINK}>
+                    {row.forum.label}
+                  </a>{' '}
+                  · started by {row.authorUsername} · last post <Stamp at={row.lastPostAt} />
+                  {row.lastPostUsername === null ? null : ` by ${row.lastPostUsername}`}
+                </p>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {nextHref !== null && (
+          <a href={nextHref} className={PILL}>
+            {nextLabel} →
+          </a>
+        )}
+      </div>
+    </main>
+  )
+}

package/src/slots/panel-nav.tsx

@@ -0,0 +1,100 @@
+import { Disclosure, cn } from '@meith/ui'
+import type { PanelNavItemModel, PanelNavModel } from '@meith/theme-kit'
+
+import { Chip } from '../shared'
+
+const ITEM =
+  'flex items-center gap-2 rounded-full px-3 py-2 text-sm font-semibold transition-colors duration-100'
+
+const HERE = 'bg-primary/12 text-primary'
+const OPEN = 'text-foreground hover:bg-accent'
+const ELSEWHERE = 'text-muted-foreground hover:bg-accent hover:text-foreground'
+
+function Item({ item, className }: { item: PanelNavItemModel; className: string }) {
+  const body = (
+    <>
+      <span className="min-w-0 flex-1 truncate">{item.title}</span>
+      {item.count !== null && (
+        <Chip className="bg-primary/12 text-primary">
+          {item.count > 99 ? '99+' : item.count}
+          <span className="sr-only"> waiting</span>
+        </Chip>
+      )}
+    </>
+  )
+
+  if (item.isRecord) {
+    return (
+      <span className={cn(ITEM, HERE, className)} aria-current="page">
+        {body}
+      </span>
+    )
+  }
+
+  return (
+    <a
+      href={item.href}
+      className={cn(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={cn(section.isOverview && 'mb-1 border-b border-border pb-1')}
+          >
+            <Item
+              item={section}
+              className={section.current === 'here' ? HERE : section.isOpen ? OPEN : ELSEWHERE}
+            />
+
+            {section.isOpen && section.children.length > 0 && (
+              <ul className="mt-1 ml-4 flex flex-col border-l border-border pl-2">
+                {section.children.map((child) => (
+                  <li key={child.href}>
+                    <Item
+                      item={child}
+                      className={cn(
+                        'text-[0.8125rem]',
+                        child.current === 'here' ? HERE : ELSEWHERE,
+                      )}
+                    />
+                  </li>
+                ))}
+              </ul>
+            )}
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+export function PanelNav({ label, sections, currentTitle }: PanelNavModel) {
+  return (
+    <>
+      <Disclosure
+        summary={label}
+        className="lg:hidden"
+        contentClassName="p-2"
+        {...(currentTitle === null ? {} : { aside: currentTitle })}
+      >
+        <Sections label={label} sections={sections} />
+      </Disclosure>
+
+      <div className="hidden rounded-lg border border-border bg-card p-2 shadow-elevation lg:block">
+        <Sections label={label} sections={sections} />
+      </div>
+    </>
+  )
+}

package/src/slots/panel-page.tsx

@@ -0,0 +1,73 @@
+import { cn } from '@meith/ui'
+import type { PanelPageModel, PanelSectionModel } from '@meith/theme-kit'
+
+import { MUTED_LINK } from '../shared'
+
+export function PanelPage({ title, back, width, gap, regions, children }: PanelPageModel) {
+  return (
+    <main
+      id="board-content"
+      tabIndex={-1}
+      className={cn(
+        'flex w-full flex-col',
+        width === 'wide' ? 'max-w-none' : 'max-w-4xl',
+        gap === 'loose' ? 'gap-4' : 'gap-3',
+      )}
+    >
+      <header className="rounded-lg border border-border bg-card px-4 py-3.5 shadow-elevation">
+        <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-2">
+          <div className="flex min-w-0 flex-col gap-1">
+            {back !== null && (
+              <a href={back.href} className={`text-xs font-semibold ${MUTED_LINK}`}>
+                ← {back.label}
+              </a>
+            )}
+
+            <h1 className="text-xl leading-tight font-bold tracking-tight text-balance">
+              {title}
+            </h1>
+
+            {regions.lede !== undefined && (
+              <p className="text-sm text-muted-foreground">{regions.lede}</p>
+            )}
+            {regions.meta !== undefined && (
+              <p className="text-xs text-muted-foreground">{regions.meta}</p>
+            )}
+          </div>
+
+          {regions.actions !== undefined && (
+            <div className="flex shrink-0 flex-wrap items-center gap-2">{regions.actions}</div>
+          )}
+        </div>
+      </header>
+
+      {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 px-1">
+        <div className="flex min-w-0 flex-col gap-0.5">
+          <h2
+            id={headingId}
+            className="text-[0.9375rem] font-semibold text-muted-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,39 @@
+import type { PanelShellModel } from '@meith/theme-kit'
+
+import { MUTED_LINK } 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 gap-4 px-3 py-4 sm:px-4 lg:flex-row lg:py-6">
+      <aside
+        className={`flex flex-col gap-3 lg:sticky lg:w-60 lg:shrink-0 lg:self-start ${
+          panel === 'admincp' ? 'lg:top-16' : 'lg:top-4'
+        }`}
+      >
+        {regions.nav}
+
+        {links.length > 0 && (
+          <nav
+            aria-label={linksLabel}
+            className="rounded-lg border border-border bg-card p-2 text-sm shadow-elevation"
+          >
+            <ul className="flex flex-col">
+              {links.map((link) => (
+                <li key={link.href}>
+                  <a
+                    href={link.href}
+                    className={`block rounded-full px-3 py-2 font-semibold ${MUTED_LINK} hover:bg-accent hover:text-foreground hover:no-underline`}
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )}
+      </aside>
+
+      <div className="min-w-0 flex-1">{children}</div>
+    </div>
+  )
+}

package/src/slots/search-results.tsx

@@ -0,0 +1,101 @@
+import type { SearchResultsModel } from '@meith/theme-kit'
+
+import { FEED, LINK, PAGE, PILL, PILL_PRIMARY, Stamp } from '../shared'
+
+export function SearchResults({
+  terms,
+  searchedAt,
+  hits,
+  nextHref,
+  nextLabel,
+  newSearchHref,
+  within,
+}: SearchResultsModel) {
+  return (
+    <main id="board-content" tabIndex={-1} className={`${PAGE} flex-1 py-4 sm:py-6`}>
+      <div className={`${FEED} flex flex-col gap-4`}>
+        <header className="rounded-lg border border-border bg-card px-4 py-3.5 shadow-elevation">
+          <h1 className="text-xl leading-tight font-bold tracking-tight text-balance">
+            Results for &ldquo;{terms}&rdquo;
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Searched <Stamp at={searchedAt} />. Results are checked against your access
+            every time this page is opened, so they can change.
+          </p>
+        </header>
+
+        {hits.length === 0 ? (
+          <p className="rounded-lg border border-border bg-card px-4 py-6 text-center text-sm text-muted-foreground shadow-elevation">
+            Nothing matched — or nothing you can see does. Try fewer words, or a different
+            spelling.
+          </p>
+        ) : (
+          <ul className="flex flex-col gap-3">
+            {hits.map((hit) => (
+              <li
+                key={hit.postId}
+                className="rounded-lg border border-border bg-card px-4 py-3.5 shadow-elevation"
+              >
+                <a href={hit.href} className="text-[0.9375rem] font-semibold hover:underline">
+                  {hit.threadTitle}
+                </a>
+                <p
+                  className="mt-1 text-sm text-muted-foreground [&_b]:font-semibold [&_b]:text-foreground"
+                  dangerouslySetInnerHTML={{ __html: hit.excerptHtml }}
+                />
+                <p className="mt-1.5 text-xs text-muted-foreground">
+                  {hit.authorUsername} · <Stamp at={hit.postedAt} />
+                </p>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {nextHref !== null && (
+          <a href={nextHref} className={PILL}>
+            {nextLabel} →
+          </a>
+        )}
+
+        <section className="rounded-lg border border-border bg-card shadow-elevation">
+          <form
+            method="get"
+            action={within.action}
+            className="flex flex-col gap-3 px-4 py-4"
+          >
+            <div>
+              <label
+                htmlFor="search-within"
+                className="mb-1 block text-sm font-semibold text-foreground"
+              >
+                {within.label}
+              </label>
+              <input
+                id="search-within"
+                type="search"
+                name={within.field}
+                defaultValue={within.value}
+                autoComplete="off"
+                aria-describedby="search-within-hint"
+                className="w-full rounded-full border border-input bg-surface px-4 py-2.5 text-sm text-foreground transition-colors focus-visible:border-ring"
+              />
+              <p id="search-within-hint" className="mt-1.5 text-xs text-muted-foreground">
+                {within.hint}
+              </p>
+            </div>
+
+            <div>
+              <button type="submit" className={PILL_PRIMARY}>
+                {within.submitLabel}
+              </button>
+            </div>
+          </form>
+        </section>
+
+        <a href={newSearchHref} className={`text-sm font-semibold ${LINK}`}>
+          Start a new search
+        </a>
+      </div>
+    </main>
+  )
+}

package/src/theme.ts

@@ -2,9 +2,11 @@ import { defaultTheme } from '@meith/theme-default'
 import { defineTheme } from '@meith/theme-kit'
 
 import { Announcement } from './slots/announcement'
+import { AuthPage } from './slots/auth-page'
 import { BoardIndex } from './slots/board-index'
 import { BoardStats } from './slots/board-stats'
 import { CategoryBlock } from './slots/category-block'
+import { DiscoveryView } from './slots/discovery-view'
 import { ErrorNotice } from './slots/error-notice'
 import { Footer } from './slots/footer'
 import { ForumJump } from './slots/forum-jump'
@@ -17,11 +19,15 @@ import { MemberProfile } from './slots/member-profile'
 import { Navigation } from './slots/navigation'
 import { Notice } from './slots/notice'
 import { Pagination } from './slots/pagination'
+import { PanelNav } from './slots/panel-nav'
+import { PanelPage, PanelSection } from './slots/panel-page'
+import { PanelShell } from './slots/panel-shell'
 import { PostActions } from './slots/post-actions'
 import { PostBit } from './slots/post-bit'
 import { PostForm } from './slots/post-form'
 import { RedirectNotice } from './slots/redirect-notice'
 import { SearchForm } from './slots/search-form'
+import { SearchResults } from './slots/search-results'
 import { Shell } from './slots/shell'
 import { SubforumList } from './slots/subforum-list'
 import { ThreadRow } from './slots/thread-row'
@@ -63,7 +69,18 @@ export const phasebookTheme = defineTheme({
 
     MemberProfile,
 
+    AuthPage,
+
     SearchForm,
+    SearchResults,
+
+    DiscoveryView,
+
+    PanelShell,
+    PanelNav,
+    PanelPage,
+    PanelSection,
+
     ForumJump,
 
     RedirectNotice,