@meith/theme-phasebook 0.6.0 → 0.8.0

package/src/slots/thread-view.tsx

@@ -1,8 +1,29 @@
-import type { ThreadViewModel } from '@meith/theme-kit'
+import type { SlotCopy, ThreadViewModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
-import { FEED, MUTED_LINK, NUMERIC, PAGE, PILL, PILL_PRIMARY, Prefix, Tag, count, plural } from '../shared'
+import {
+  count,
+  FEED,
+  MUTED_LINK,
+  NUMERIC,
+  PAGE,
+  PILL,
+  PILL_PRIMARY,
+  Prefix,
+  plural,
+  Tag,
+} from '../shared'
+
+export function ThreadView({
+  thread,
+  forum,
+  replyHref,
+  markReadAction,
+  regions,
+  copy,
+}: ThreadViewModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.threadView.${key}`)
 
-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`}>
@@ -19,13 +40,15 @@ export function ThreadView({ thread, forum, replyHref, markReadAction, regions }
 
               <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>}
+                {thread.isSticky && <Tag token="thread-pinned">{c('pinned')}</Tag>}
+                {thread.isLocked && <Tag token="thread-locked">{c('locked')}</Tag>}
+                {thread.isMoved && <Tag token="thread-moved">{c('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')}
+                  {count(thread.replyCount)}{' '}
+                  {plural(thread.replyCount, c('reply.one'), c('reply.other'))} ·{' '}
+                  {count(thread.viewCount)}{' '}
+                  {plural(thread.viewCount, c('view.one'), c('view.other'))}
                 </span>
               </div>
             </div>
@@ -34,13 +57,13 @@ export function ThreadView({ thread, forum, replyHref, markReadAction, regions }
               {markReadAction !== null && (
                 <form action={markReadAction} method="post">
                   <button type="submit" className={PILL}>
-                    Mark read
+                    {c('markRead')}
                   </button>
                 </form>
               )}
               {replyHref !== null && (
                 <a href={replyHref} className={PILL_PRIMARY}>
-                  Reply
+                  {c('replyAction')}
                 </a>
               )}
             </div>

package/src/slots/user-panel.tsx

@@ -1,7 +1,8 @@
+import type { CountModel, SlotCopy, UserPanelModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 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'
+import { Circle, count, ICON_BUTTON, MUTED_LINK, PILL, PILL_PRIMARY } from '../shared'
 
 function BellIcon() {
   return (
@@ -63,10 +64,10 @@ function IconButton({
   )
 }
 
-function CountBadge({ value, label }: { value: number; label: string }) {
+function CountBadge({ value, label }: { value: CountModel; 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 aria-hidden="true">{value.value > 99 ? '99+' : value.label}</span>
       <span className="sr-only">
         {count(value)} {label}
       </span>
@@ -82,7 +83,10 @@ export function UserPanel({
   notificationsHref,
   messagesHref,
   children,
-}: UserPanelModel) {
+  copy,
+}: UserPanelModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.userPanel.${key}`)
+
   if (viewer.isGuest) {
     return (
       <div className="flex items-center gap-2">
@@ -95,7 +99,7 @@ export function UserPanel({
     )
   }
 
-  const name = viewer.username ?? 'Signed in'
+  const name = viewer.username ?? c('signedIn')
 
   return (
     <div className="flex items-center gap-2">
@@ -106,23 +110,23 @@ export function UserPanel({
         }}
       />
 
-      {unreadNotifications > 0 && (
-        <IconButton href={notificationsHref ?? null} title="Notifications">
+      {unreadNotifications.value > 0 && (
+        <IconButton href={notificationsHref ?? null} title={c('notifications')}>
           <BellIcon />
-          <CountBadge value={unreadNotifications} label="unread notifications" />
+          <CountBadge value={unreadNotifications} label={c('unreadNotifications')} />
         </IconButton>
       )}
 
-      {unreadMessages > 0 && (
-        <IconButton href={messagesHref ?? null} title="Messages">
+      {unreadMessages.value > 0 && (
+        <IconButton href={messagesHref ?? null} title={c('messages')}>
           <MessageIcon />
-          <CountBadge value={unreadMessages} label="unread messages" />
+          <CountBadge value={unreadMessages} label={c('unreadMessages')} />
         </IconButton>
       )}
 
       <div data-account="menu" className="flex min-w-0 items-center">
         <Menu
-          label="Your account"
+          label={c('accountAriaLabel')}
           items={links}
           trigger={
             <>
@@ -138,7 +142,7 @@ export function UserPanel({
       <nav
         data-account="plain"
         style={{ display: 'none' }}
-        aria-label="Your account"
+        aria-label={c('accountAriaLabel')}
         className="flex-wrap items-center gap-x-3 gap-y-1 text-xs"
       >
         <span className="font-semibold text-foreground">{name}</span>

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

@@ -1,10 +1,24 @@
-import type { OnlineMemberModel, WhoIsOnlineModel } from '@meith/theme-kit'
+import type { OnlineMemberModel, SlotCopy, WhoIsOnlineModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
-import { Circle, MUTED_LINK, NUMERIC, OnlineDot, Rail, Stamp, Tag, UserRef, count, plural } from '../shared'
+import {
+  Circle,
+  count,
+  MUTED_LINK,
+  NUMERIC,
+  OnlineDot,
+  plural,
+  Rail,
+  Stamp,
+  Tag,
+  UserRef,
+} from '../shared'
 
 const VISIBLE_NAMES = 8
 
-function Row({ member }: { member: OnlineMemberModel }) {
+function Row({ member, copy }: { member: OnlineMemberModel; copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.whoIsOnline.${key}`)
+
   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">
@@ -25,7 +39,7 @@ function Row({ member }: { member: OnlineMemberModel }) {
         )}
       </span>
 
-      {member.isInvisible && <Tag>Invisible</Tag>}
+      {member.isInvisible && <Tag>{c('invisible')}</Tag>}
     </li>
   )
 }
@@ -33,44 +47,47 @@ function Row({ member }: { member: OnlineMemberModel }) {
 export function WhoIsOnline({
   guestCount,
   members,
+  memberCount,
   total,
   recordCount,
   recordAt,
   fullListHref,
-}: WhoIsOnlineModel) {
+  copy,
+}: WhoIsOnlineModel & { copy: SlotCopy }) {
   const shown = members.slice(0, VISIBLE_NAMES)
   const hidden = members.length - shown.length
 
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.whoIsOnline.${key}`)
+
   return (
     <Rail
-      title="Online now"
+      title={c('title')}
       titleId="who-is-online-heading"
       action={
         <a href={fullListHref} className={`text-xs font-semibold ${MUTED_LINK}`}>
-          See all
+          {c('seeAll')}
         </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')}
+        {count(total)} {c('online')} {count(memberCount)}{' '}
+        {plural(memberCount, c('member.one'), c('member.other'))}, {count(guestCount)}{' '}
+        {plural(guestCount, c('guest.one'), c('guest.other'))}
       </p>
 
-      {members.length === 0 ? (
+      {memberCount.value === 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.'}
+          {guestCount.value === 0 ? c('nobody') : c('onlyGuests')}
         </p>
       ) : (
         <ul className="px-1 pt-1 pb-1">
           {shown.map((member) => (
-            <Row key={member.userId ?? member.username} member={member} />
+            <Row key={member.userId ?? member.username} member={member} copy={copy} />
           ))}
           {hidden > 0 && (
             <li className="px-2 py-1.5">
               <a href={fullListHref} className={`text-xs font-semibold ${MUTED_LINK}`}>
-                and {count(hidden)} more
+                {c('and')} {hidden} {c('more')}
               </a>
             </li>
           )}
@@ -79,7 +96,7 @@ export function WhoIsOnline({
 
       {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} />
+          {c('record')} {count(recordCount)} {c('on')} <Stamp at={recordAt} />
         </p>
       )}
     </Rail>

package/src/theme.ts

@@ -1,6 +1,36 @@
 import { defaultTheme } from '@meith/theme-default'
 import { defineTheme } from '@meith/theme-kit'
 
+import {
+  announcementCopy,
+  boardIndexCopy,
+  boardStatsCopy,
+  discoveryViewCopy,
+  errorNoticeCopy,
+  footerCopy,
+  forumDisplayCopy,
+  forumRowCopy,
+  headerCopy,
+  latestPostsCopy,
+  latestThreadsCopy,
+  memberProfileCopy,
+  navigationCopy,
+  noticeCopy,
+  paginationCopy,
+  panelNavCopy,
+  postActionsCopy,
+  postBitCopy,
+  postFormCopy,
+  redirectNoticeCopy,
+  searchFormCopy,
+  searchResultsCopy,
+  shellCopy,
+  subforumListCopy,
+  threadRowCopy,
+  threadViewCopy,
+  userPanelCopy,
+  whoIsOnlineCopy,
+} from './copy'
 import { Announcement } from './slots/announcement'
 import { AuthPage } from './slots/auth-page'
 import { BoardIndex } from './slots/board-index'
@@ -9,8 +39,8 @@ 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'
 import { ForumDisplay } from './slots/forum-display'
+import { ForumJump } from './slots/forum-jump'
 import { ForumRow } from './slots/forum-row'
 import { Header } from './slots/header'
 import { LatestPosts } from './slots/latest-posts'
@@ -86,4 +116,34 @@ export const phasebookTheme = defineTheme({
     RedirectNotice,
     ErrorNotice,
   },
+  copy: {
+    Announcement: announcementCopy,
+    BoardIndex: boardIndexCopy,
+    BoardStats: boardStatsCopy,
+    DiscoveryView: discoveryViewCopy,
+    ErrorNotice: errorNoticeCopy,
+    Footer: footerCopy,
+    ForumDisplay: forumDisplayCopy,
+    ForumRow: forumRowCopy,
+    Header: headerCopy,
+    LatestPosts: latestPostsCopy,
+    LatestThreads: latestThreadsCopy,
+    MemberProfile: memberProfileCopy,
+    Navigation: navigationCopy,
+    Notice: noticeCopy,
+    Pagination: paginationCopy,
+    PanelNav: panelNavCopy,
+    PostActions: postActionsCopy,
+    PostBit: postBitCopy,
+    PostForm: postFormCopy,
+    RedirectNotice: redirectNoticeCopy,
+    SearchForm: searchFormCopy,
+    SearchResults: searchResultsCopy,
+    Shell: shellCopy,
+    SubforumList: subforumListCopy,
+    ThreadRow: threadRowCopy,
+    ThreadView: threadViewCopy,
+    UserPanel: userPanelCopy,
+    WhoIsOnline: whoIsOnlineCopy,
+  },
 })