@meith/theme-phasebook 0.1.0

package/src/slots/thread-view.tsx

@@ -0,0 +1,68 @@
+import type { ThreadViewModel } from '@meith/theme-kit'
+
+import { FEED, MUTED_LINK, NUMERIC, PAGE, PILL, PILL_PRIMARY, Prefix, Tag, count, plural } from '../shared'
+
+export function ThreadView({ thread, forum, replyHref, markReadAction, regions }: ThreadViewModel) {
+  return (
+    <div className={`${PAGE} py-4 sm:py-6`}>
+      <div className={`${FEED} flex flex-col gap-4`}>
+        <section className="rounded-lg border border-border bg-card text-card-foreground shadow-elevation">
+          <div className="flex flex-wrap items-start justify-between gap-3 px-4 py-3">
+            <div className="min-w-0">
+              <a href={forum.href} className={`text-xs font-semibold ${MUTED_LINK}`}>
+                {forum.label}
+              </a>
+
+              <h1 className="mt-0.5 text-xl leading-tight font-bold tracking-tight text-balance">
+                {thread.title}
+              </h1>
+
+              <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1">
+                {thread.prefix !== null && <Prefix prefix={thread.prefix} />}
+                {thread.isSticky && <Tag token="thread-pinned">Pinned</Tag>}
+                {thread.isLocked && <Tag token="thread-locked">Locked — no new replies</Tag>}
+                {thread.isMoved && <Tag token="thread-moved">Moved</Tag>}
+
+                <span className={`text-xs text-muted-foreground ${NUMERIC}`}>
+                  {count(thread.replyCount)} {plural(thread.replyCount, 'reply', 'replies')} ·{' '}
+                  {count(thread.viewCount)} {plural(thread.viewCount, 'view', 'views')}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex shrink-0 items-center gap-2">
+              {markReadAction !== null && (
+                <form action={markReadAction} method="post">
+                  <button type="submit" className={PILL}>
+                    Mark read
+                  </button>
+                </form>
+              )}
+              {replyHref !== null && (
+                <a href={replyHref} className={PILL_PRIMARY}>
+                  Reply
+                </a>
+              )}
+            </div>
+          </div>
+        </section>
+
+        {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 rounded-lg border border-border bg-card px-4 py-3 shadow-elevation empty:hidden">
+            {regions.afterContent}
+          </div>
+        )}
+
+        {regions.quickReply}
+      </div>
+    </div>
+  )
+}

package/src/slots/user-panel.tsx

@@ -0,0 +1,154 @@
+import { Menu } from '@meith/ui/menu'
+import type { UserPanelModel } from '@meith/theme-kit'
+
+import { Circle, ICON_BUTTON, MUTED_LINK, PILL, PILL_PRIMARY, count } from '../shared'
+
+function BellIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 20 20"
+      className="size-5"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M10 2.5a4.5 4.5 0 0 0-4.5 4.5c0 3.5-1.5 4.5-1.5 4.5h12s-1.5-1-1.5-4.5A4.5 4.5 0 0 0 10 2.5Z" />
+      <path d="M8.5 14.5a1.75 1.75 0 0 0 3 0" />
+    </svg>
+  )
+}
+
+function MessageIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 20 20"
+      className="size-5"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M10 3c4 0 7 2.8 7 6.3S14 15.5 10 15.5a8 8 0 0 1-2.2-.3L4 16.5l.9-2.8A6 6 0 0 1 3 9.3C3 5.8 6 3 10 3Z" />
+    </svg>
+  )
+}
+
+function IconButton({
+  href,
+  title,
+  children,
+}: {
+  href: string | null
+  title: string
+  children: React.ReactNode
+}) {
+  if (href === null) {
+    return (
+      <span className={`relative ${ICON_BUTTON}`} aria-hidden="true">
+        {children}
+      </span>
+    )
+  }
+
+  return (
+    <a href={href} title={title} className={`relative ${ICON_BUTTON}`}>
+      <span className="sr-only">{title}</span>
+      {children}
+    </a>
+  )
+}
+
+function CountBadge({ value, label }: { value: number; label: string }) {
+  return (
+    <span className="absolute -top-0.5 -right-0.5 inline-flex min-w-5 items-center justify-center rounded-full bg-destructive px-1 text-xs font-semibold text-destructive-foreground ring-2 ring-card">
+      <span aria-hidden="true">{value > 99 ? '99+' : value}</span>
+      <span className="sr-only">
+        {count(value)} {label}
+      </span>
+    </span>
+  )
+}
+
+export function UserPanel({
+  viewer,
+  links,
+  unreadNotifications,
+  unreadMessages,
+  children,
+}: UserPanelModel) {
+  if (viewer.isGuest) {
+    return (
+      <div className="flex items-center gap-2">
+        {links.map((link, index) => (
+          <a key={link.href} href={link.href} className={index === 0 ? PILL_PRIMARY : PILL}>
+            {link.label}
+          </a>
+        ))}
+      </div>
+    )
+  }
+
+  const name = viewer.username ?? 'Signed in'
+  const hrefFor = (label: string): string | null =>
+    links.find((link) => link.label === label)?.href ?? null
+
+  return (
+    <div className="flex items-center gap-2">
+      <noscript
+        dangerouslySetInnerHTML={{
+          __html:
+            '<style>[data-account="menu"]{display:none}[data-account="plain"]{display:flex!important}</style>',
+        }}
+      />
+
+      {unreadNotifications > 0 && (
+        <IconButton href={hrefFor('Notifications')} title="Notifications">
+          <BellIcon />
+          <CountBadge value={unreadNotifications} label="unread notifications" />
+        </IconButton>
+      )}
+
+      {unreadMessages > 0 && (
+        <IconButton href={hrefFor('Messages')} title="Messages">
+          <MessageIcon />
+          <CountBadge value={unreadMessages} label="unread messages" />
+        </IconButton>
+      )}
+
+      <div data-account="menu" className="flex min-w-0 items-center">
+        <Menu
+          label="Your account"
+          items={links}
+          trigger={
+            <>
+              <Circle src={viewer.avatarUrl} name={name} size={32} />
+              <span className="sr-only">{name}</span>
+            </>
+          }
+        >
+          {children}
+        </Menu>
+      </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"
+      >
+        <span className="font-semibold text-foreground">{name}</span>
+        {links.map((link) => (
+          <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,87 @@
+import type { OnlineMemberModel, WhoIsOnlineModel } from '@meith/theme-kit'
+
+import { Circle, MUTED_LINK, NUMERIC, OnlineDot, Rail, Stamp, Tag, UserRef, count, plural } from '../shared'
+
+const VISIBLE_NAMES = 8
+
+function Row({ member }: { member: OnlineMemberModel }) {
+  return (
+    <li className="flex items-center gap-2.5 rounded-lg px-2 py-1.5 transition-colors hover:bg-accent">
+      <span className="relative shrink-0">
+        <Circle name={member.username} size={32} />
+        <OnlineDot />
+      </span>
+
+      <span className="min-w-0 flex-1 truncate text-sm">
+        <UserRef user={member} className="text-sm" />
+        {member.location.href === null ? (
+          <span className="block truncate text-xs text-muted-foreground">
+            {member.location.label}
+          </span>
+        ) : (
+          <a href={member.location.href} className={`block truncate text-xs ${MUTED_LINK}`}>
+            {member.location.label}
+          </a>
+        )}
+      </span>
+
+      {member.isInvisible && <Tag>Invisible</Tag>}
+    </li>
+  )
+}
+
+export function WhoIsOnline({
+  guestCount,
+  members,
+  total,
+  recordCount,
+  recordAt,
+  fullListHref,
+}: WhoIsOnlineModel) {
+  const shown = members.slice(0, VISIBLE_NAMES)
+  const hidden = members.length - shown.length
+
+  return (
+    <Rail
+      title="Online now"
+      titleId="who-is-online-heading"
+      action={
+        <a href={fullListHref} className={`text-xs font-semibold ${MUTED_LINK}`}>
+          See all
+        </a>
+      }
+    >
+      <p className={`px-3 text-xs text-muted-foreground ${NUMERIC}`}>
+        {count(total)} online — {count(members.length)} {plural(members.length, 'member', 'members')}
+        , {count(guestCount)} {plural(guestCount, 'guest', 'guests')}
+      </p>
+
+      {members.length === 0 ? (
+        <p className="px-3 pt-2 pb-3 text-xs text-muted-foreground">
+          {guestCount === 0
+            ? 'Nobody is reading the board right now.'
+            : 'Only guests are reading the board right now.'}
+        </p>
+      ) : (
+        <ul className="px-1 pt-1 pb-1">
+          {shown.map((member) => (
+            <Row key={member.userId ?? member.username} member={member} />
+          ))}
+          {hidden > 0 && (
+            <li className="px-2 py-1.5">
+              <a href={fullListHref} className={`text-xs font-semibold ${MUTED_LINK}`}>
+                and {count(hidden)} more
+              </a>
+            </li>
+          )}
+        </ul>
+      )}
+
+      {recordAt !== null && (
+        <p className={`border-t border-border px-3 py-2 text-xs text-muted-foreground ${NUMERIC}`}>
+          Record: {count(recordCount)} on <Stamp at={recordAt} />
+        </p>
+      )}
+    </Rail>
+  )
+}

package/src/theme.ts

@@ -0,0 +1,72 @@
+import { defaultTheme } from '@meith/theme-default'
+import { defineTheme } from '@meith/theme-kit'
+
+import { Announcement } from './slots/announcement'
+import { BoardIndex } from './slots/board-index'
+import { BoardStats } from './slots/board-stats'
+import { CategoryBlock } from './slots/category-block'
+import { ErrorNotice } from './slots/error-notice'
+import { Footer } from './slots/footer'
+import { ForumJump } from './slots/forum-jump'
+import { ForumDisplay } from './slots/forum-display'
+import { ForumRow } from './slots/forum-row'
+import { Header } from './slots/header'
+import { LatestPosts } from './slots/latest-posts'
+import { LatestThreads } from './slots/latest-threads'
+import { MemberProfile } from './slots/member-profile'
+import { Navigation } from './slots/navigation'
+import { Notice } from './slots/notice'
+import { Pagination } from './slots/pagination'
+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 { Shell } from './slots/shell'
+import { SubforumList } from './slots/subforum-list'
+import { ThreadRow } from './slots/thread-row'
+import { ThreadView } from './slots/thread-view'
+import { UserPanel } from './slots/user-panel'
+import { WhoIsOnline } from './slots/who-is-online'
+
+export const phasebookTheme = defineTheme({
+  key: 'phasebook',
+  title: 'Phasebook',
+  extends: defaultTheme,
+  slots: {
+    Shell,
+    Header,
+    UserPanel,
+    Navigation,
+    Footer,
+    Notice,
+    Announcement,
+
+    BoardIndex,
+    CategoryBlock,
+    ForumRow,
+    BoardStats,
+    WhoIsOnline,
+    LatestThreads,
+    LatestPosts,
+
+    ForumDisplay,
+    ThreadRow,
+    SubforumList,
+    Pagination,
+
+    ThreadView,
+    PostBit,
+    PostActions,
+
+    PostForm,
+
+    MemberProfile,
+
+    SearchForm,
+    ForumJump,
+
+    RedirectNotice,
+    ErrorNotice,
+  },
+})

package/src/tokens.ts

@@ -0,0 +1,102 @@
+import type { TokenName } from '@meith/theme-default'
+
+export const LIGHT_TOKENS: Record<TokenName, string> = {
+  background: 'oklch(0.96 0.005 258.3)',
+  foreground: 'oklch(0.115 0 0)',
+  surface: 'oklch(0.925 0.007 268.5)',
+  card: 'oklch(1 0 0)',
+  'card-foreground': 'oklch(0.115 0 0)',
+  primary: 'oklch(0.562 0.196 258.2)',
+  'primary-foreground': 'oklch(1 0 0)',
+  'primary-hover': 'oklch(0.471 0.17 258.8)',
+  secondary: 'oklch(0.925 0.007 268.5)',
+  'secondary-foreground': 'oklch(0.115 0 0)',
+  muted: 'oklch(0.96 0.005 258.3)',
+  'muted-foreground': 'oklch(0.513 0.007 264.5)',
+  accent: 'oklch(0.961 0 0)',
+  'accent-foreground': 'oklch(0.115 0 0)',
+  destructive: 'oklch(0.54 0.219 26.3)',
+  'destructive-foreground': 'oklch(1 0 0)',
+  border: 'oklch(0.857 0.006 264.5)',
+  input: 'oklch(0.642 0.007 255.5)',
+  ring: 'oklch(0.562 0.196 258.2)',
+  'shadow-tint': 'oklch(0.115 0 0 / 12%)',
+  radius: '0.5rem',
+  'density-unit': '0.25rem',
+  'font-mono-stack': 'ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace',
+  'font-sans-stack':
+    'system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif',
+  'font-heading-stack': 'var(--font-sans-stack)',
+  elevation: '0 1px 2px var(--shadow-tint), 0 1px 3px -1px var(--shadow-tint)',
+  'forum-unread': 'oklch(0.562 0.196 258.2)',
+  'forum-read': 'oklch(0.561 0.007 255.5)',
+  'forum-locked': 'oklch(0.543 0.174 29.7)',
+  'thread-pinned': 'oklch(0.547 0.122 65.3)',
+  'thread-locked': 'oklch(0.543 0.174 29.7)',
+  'thread-moved': 'oklch(0.561 0.007 255.5)',
+  'thread-unapproved': 'oklch(0.519 0.106 90.3)',
+  'thread-deleted': 'oklch(0.54 0.219 26.3)',
+  'post-highlight': 'oklch(0.966 0.04 88.2)',
+  'post-own': 'oklch(0.966 0.014 264.5)',
+  'post-unapproved': 'oklch(0.965 0.036 89.4)',
+  'moderation-pending': 'oklch(0.547 0.122 65.3)',
+  'moderation-approved': 'oklch(0.522 0.14 146.9)',
+  'moderation-rejected': 'oklch(0.543 0.174 29.7)',
+  'group-admin': 'oklch(0.543 0.174 29.7)',
+  'group-supermod': 'oklch(0.509 0.191 301.4)',
+  'group-mod': 'oklch(0.562 0.196 258.2)',
+  'group-banned': 'oklch(0.561 0.007 255.5)',
+}
+
+export const DARK_TOKENS: Record<TokenName, string> = {
+  background: 'oklch(0.213 0.003 247.9)',
+  foreground: 'oklch(0.925 0.007 268.5)',
+  surface: 'oklch(0.313 0.002 247.9)',
+  card: 'oklch(0.264 0.002 247.9)',
+  'card-foreground': 'oklch(0.925 0.007 268.5)',
+  primary: 'oklch(0.663 0.181 256.2)',
+  'primary-foreground': 'oklch(0.196 0.029 251.5)',
+  'primary-hover': 'oklch(0.747 0.133 254.1)',
+  secondary: 'oklch(0.352 0.002 247.9)',
+  'secondary-foreground': 'oklch(0.925 0.007 268.5)',
+  muted: 'oklch(0.292 0.005 248)',
+  'muted-foreground': 'oklch(0.766 0.008 260.7)',
+  accent: 'oklch(0.352 0.002 247.9)',
+  'accent-foreground': 'oklch(0.925 0.007 268.5)',
+  destructive: 'oklch(0.716 0.181 13.8)',
+  'destructive-foreground': 'oklch(0.183 0.027 2.8)',
+  border: 'oklch(0.37 0.004 247.9)',
+  input: 'oklch(0.562 0.005 258.3)',
+  ring: 'oklch(0.663 0.181 256.2)',
+  'shadow-tint': 'oklch(0 0 0 / 50%)',
+  radius: '0.5rem',
+  'density-unit': '0.25rem',
+  'font-mono-stack': 'ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace',
+  'font-sans-stack':
+    'system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif',
+  'font-heading-stack': 'var(--font-sans-stack)',
+  elevation: '0 1px 2px var(--shadow-tint), 0 1px 3px -1px var(--shadow-tint)',
+  'forum-unread': 'oklch(0.663 0.181 256.2)',
+  'forum-read': 'oklch(0.642 0.007 255.5)',
+  'forum-locked': 'oklch(0.753 0.155 41.6)',
+  'thread-pinned': 'oklch(0.821 0.16 82.5)',
+  'thread-locked': 'oklch(0.753 0.155 41.6)',
+  'thread-moved': 'oklch(0.642 0.007 255.5)',
+  'thread-unapproved': 'oklch(0.84 0.154 87.4)',
+  'thread-deleted': 'oklch(0.716 0.181 13.8)',
+  'post-highlight': 'oklch(0.283 0.039 259.4)',
+  'post-own': 'oklch(0.26 0.037 261.8)',
+  'post-unapproved': 'oklch(0.299 0.03 90.8)',
+  'moderation-pending': 'oklch(0.821 0.16 82.5)',
+  'moderation-approved': 'oklch(0.71 0.168 148.3)',
+  'moderation-rejected': 'oklch(0.753 0.155 41.6)',
+  'group-admin': 'oklch(0.716 0.181 13.8)',
+  'group-supermod': 'oklch(0.764 0.145 301.5)',
+  'group-mod': 'oklch(0.72 0.147 257.7)',
+  'group-banned': 'oklch(0.642 0.007 255.5)',
+}
+
+export const BROWSER_THEME_COLOR = {
+  light: '#f0f2f5',
+  dark: '#18191a',
+} as const