@meith/theme-clubhouse 0.7.0 → 0.8.0

package/src/slots/post-bit.tsx

@@ -1,5 +1,6 @@
+import type { PostBitSlotModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Alert, AlertDescription, AlertTitle, Avatar, Card } from '@meith/ui'
-import type { PostBitSlotModel } from '@meith/theme-kit'
 
 import { HEADING, LINK, MICRO, MICRO_BARE, MUTED_LINK, NUMERIC, Stamp, UserRef } from '../shared'
 
@@ -9,9 +10,17 @@ const VISIBILITY_TINT = {
   deleted: 'border-thread-deleted/50 bg-destructive/5',
 } as const
 
-function StatusBanner({ visibility }: { visibility: PostBitSlotModel['post']['visibility'] }) {
+function StatusBanner({
+  visibility,
+  copy,
+}: {
+  visibility: PostBitSlotModel['post']['visibility']
+  copy: SlotCopy
+}) {
   if (visibility === 'visible') return null
 
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.postBit.${key}`)
+
   return (
     <Alert
       tone={visibility === 'deleted' ? 'error' : 'warning'}
@@ -19,9 +28,9 @@ function StatusBanner({ visibility }: { visibility: PostBitSlotModel['post']['vi
     >
       <AlertDescription>
         <AlertTitle>
-          {visibility === 'deleted' ? 'Deleted post.' : 'Waiting for approval.'}
+          {visibility === 'deleted' ? c('deletedPost') : c('waitingApproval')}
         </AlertTitle>{' '}
-        Only moderators can see this.
+        {c('staffOnly')}
       </AlertDescription>
     </Alert>
   )
@@ -65,10 +74,14 @@ function StatLine({ label, children }: { label: string; children: React.ReactNod
 function AuthorBlock({
   author,
   badges,
+  copy,
 }: {
   author: PostBitSlotModel['post']['author']
   badges: React.ReactNode
+  copy: SlotCopy
 }) {
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.postBit.${key}`)
+
   return (
     <>
       <div aria-hidden="true" className="h-12 border-b-2 border-b-secondary bg-primary" />
@@ -90,7 +103,7 @@ function AuthorBlock({
         {author.isOnline && (
           <p className="mt-1 flex items-center gap-1.5 text-xs text-moderation-approved">
             <span aria-hidden="true" className="size-1.5 rounded-full bg-moderation-approved" />
-            Online
+            {c('online')}
           </p>
         )}
 
@@ -104,12 +117,12 @@ function AuthorBlock({
       </div>
 
       <dl className="mt-2.5 space-y-1 border-t border-border px-4 py-2.5">
-        <StatLine label="Posts">{author.postCount.toLocaleString('en')}</StatLine>
+        <StatLine label={c('posts')}>{author.postCount.label}</StatLine>
         {author.reputation != null && (
-          <StatLine label="Rep">{author.reputation.toLocaleString('en')}</StatLine>
+          <StatLine label={c('rep')}>{author.reputation.label}</StatLine>
         )}
         {author.joinedAt !== null && (
-          <StatLine label="Joined">
+          <StatLine label={c('joined')}>
             <Stamp at={author.joinedAt} />
           </StatLine>
         )}
@@ -123,7 +136,9 @@ function AuthorBlock({
   )
 }
 
-export function PostBit({ post, select, regions }: PostBitSlotModel) {
+export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.postBit.${key}`)
+
   return (
     <Card
       as="article"
@@ -132,11 +147,11 @@ export function PostBit({ post, select, regions }: PostBitSlotModel) {
       data-visibility={post.visibility}
       className={`target:bg-post-highlight ${VISIBILITY_TINT[post.visibility]}`}
     >
-      <StatusBanner visibility={post.visibility} />
+      <StatusBanner visibility={post.visibility} copy={copy} />
 
       <div className="grid grid-cols-1 sm:grid-cols-[11rem_minmax(0,1fr)]">
         <div className="border-b border-border bg-surface pb-1 sm:border-r sm:border-b-0">
-          <AuthorBlock author={post.author} badges={regions.pluginBadges} />
+          <AuthorBlock author={post.author} badges={regions.pluginBadges} copy={copy} />
         </div>
 
         <div className="min-w-0">
@@ -159,7 +174,7 @@ export function PostBit({ post, select, regions }: PostBitSlotModel) {
                 <span
                   className={`${MICRO_BARE} rounded-sm bg-primary px-1.5 py-0.5 text-primary-foreground`}
                 >
-                  Opening post
+                  {c('openingPost')}
                 </span>
               )}
 
@@ -173,11 +188,11 @@ export function PostBit({ post, select, regions }: PostBitSlotModel) {
 
           {post.ignored !== null ? (
             <div className="px-4 py-5 text-sm text-muted-foreground">
-              You are ignoring{' '}
-              <span className="font-semibold text-foreground">{post.ignored.authorUsername}</span>.
-              This post is hidden.{' '}
+              {c('ignoring')}{' '}
+              <span className="font-semibold text-foreground">{post.ignored.authorUsername}</span>.{' '}
+              {c('postHidden')}{' '}
               <a href={post.ignored.revealHref} className={`font-semibold text-foreground ${LINK}`}>
-                Show it anyway
+                {c('showAnyway')}
               </a>
             </div>
           ) : (
@@ -199,7 +214,7 @@ export function PostBit({ post, select, regions }: PostBitSlotModel) {
             <div className="border-t border-border px-4 py-3">
               <h4 className={`${MICRO} mb-2`}>
                 {post.attachments.length}{' '}
-                {post.attachments.length === 1 ? 'attachment' : 'attachments'}
+                {post.attachments.length === 1 ? c('attachment.one') : c('attachment.other')}
               </h4>
               <ul className="flex flex-wrap gap-3">
                 {post.attachments.map((file) => (

package/src/slots/shell.tsx

@@ -1,6 +1,7 @@
-import type { ShellModel } from '@meith/theme-kit'
+import type { ShellModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
-export function Shell({ viewer, children }: ShellModel) {
+export function Shell({ viewer, children, copy }: ShellModel & { copy: SlotCopy }) {
   return (
     <div
       className="flex min-h-dvh flex-col bg-background text-foreground"
@@ -10,7 +11,7 @@ export function Shell({ viewer, children }: ShellModel) {
         href="#board-content"
         className="sr-only focus-visible:not-sr-only focus-visible:absolute focus-visible:top-4 focus-visible:left-4 focus-visible:z-50 focus-visible:inline-flex focus-visible:h-9 focus-visible:items-center focus-visible:rounded-full focus-visible:border focus-visible:border-border focus-visible:bg-card focus-visible:px-4 focus-visible:text-sm focus-visible:font-semibold focus-visible:text-foreground focus-visible:shadow-elevation"
       >
-        Skip to content
+        {fromSlotCopy(copy, 'clubhouse.shell.skipToContent')}
       </a>
 
       {children}

package/src/slots/subforum-list.tsx

@@ -1,14 +1,17 @@
+import type { SlotCopy, SubforumListModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Card, CardContent } from '@meith/ui'
-import type { SubforumListModel } from '@meith/theme-kit'
 
 import { HEADING, LINK, MICRO, NUMERIC, PanelHead } from '../shared'
 
-export function SubforumList({ forums }: SubforumListModel) {
+export function SubforumList({ forums, copy }: SubforumListModel & { copy: SlotCopy }) {
   if (forums.length === 0) return null
 
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.subforumList.${key}`)
+
   return (
     <Card aria-labelledby="subforums-heading">
-      <PanelHead id="subforums-heading" title="Subforums" />
+      <PanelHead id="subforums-heading" title={c('title')} />
 
       <CardContent className="px-4 py-3">
         <ul className="flex flex-wrap gap-x-6 gap-y-2 text-sm">
@@ -19,8 +22,7 @@ export function SubforumList({ forums }: SubforumListModel) {
               </a>
               {forum.type !== 'link' && (
                 <p className={`${MICRO} ${NUMERIC} mt-0.5`}>
-                  {forum.threadCount.toLocaleString('en')} threads ·{' '}
-                  {forum.postCount.toLocaleString('en')} posts
+                  {forum.threadCount.label} {c('threads')} · {forum.postCount.label} {c('posts')}
                 </p>
               )}
             </li>

package/src/slots/thread-row.tsx

@@ -1,9 +1,12 @@
+import type { SlotCopy, ThreadRowSlotModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Badge } from '@meith/ui'
-import type { ThreadRowSlotModel } from '@meith/theme-kit'
 
 import { HEADING, LINK, MICRO, Prefix, ReadMark, Stamp, TABLE_ROW, Tally, UserRef } from '../shared'
 
-export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
+export function ThreadRow({ thread, select, copy }: ThreadRowSlotModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.threadRow.${key}`)
+
   return (
     <li
       data-unread={thread.isUnread ? '' : undefined}
@@ -29,9 +32,9 @@ export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
       <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>}
+          {thread.isSticky && <Badge tone="pinned">{c('pinned')}</Badge>}
+          {thread.isLocked && <Badge tone="locked">{c('locked')}</Badge>}
+          {thread.isMoved && <Badge tone="moved">{c('moved')}</Badge>}
 
           <a
             href={thread.href}
@@ -39,35 +42,35 @@ export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
           >
             {thread.title}
           </a>
-          {thread.isUnread && <span className="sr-only"> (new posts)</span>}
+          {thread.isUnread && <span className="sr-only"> {c('newPosts')}</span>}
         </div>
 
         <p className="mt-0.5 text-xs text-muted-foreground">
-          Started by <UserRef user={thread.author} className="font-medium" />
+          {c('startedBy')} <UserRef user={thread.author} className="font-medium" />
         </p>
       </div>
 
       <span className="col-start-2 md:col-start-3 md:block md:text-right">
-        <Tally value={thread.replyCount} label="replies" />
+        <Tally value={thread.replyCount} label={c('replies')} />
         <span className="ms-3 md:hidden">
-          <Tally value={thread.viewCount} label="views" />
+          <Tally value={thread.viewCount} label={c('views')} />
         </span>
       </span>
 
       <span className="hidden md:block md:text-right">
-        <Tally value={thread.viewCount} label="views" />
+        <Tally value={thread.viewCount} label={c('views')} />
       </span>
 
       <div className="col-start-2 min-w-0 text-xs text-muted-foreground md:col-start-5">
         {thread.lastPost === null ? (
-          <span className={MICRO}>No replies yet</span>
+          <span className={MICRO}>{c('noRepliesYet')}</span>
         ) : (
           <>
             <a
               href={thread.lastPost.href}
               className={`block font-semibold text-foreground ${LINK}`}
             >
-              Latest reply
+              {c('latestReply')}
             </a>
             <span className="mt-0.5 block truncate">
               <UserRef user={thread.lastPost.author} className="font-medium" />

package/src/slots/thread-view.tsx

@@ -1,9 +1,19 @@
+import type { SlotCopy, ThreadViewModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Badge, cn } from '@meith/ui'
-import type { ThreadViewModel } from '@meith/theme-kit'
 
 import { BUTTON, HEADING, MICRO, MUTED_LINK, NUMERIC, PAGE_BODY, PageHead, Prefix } from '../shared'
 
-export function ThreadView({ thread, forum, replyHref, markReadAction, regions }: ThreadViewModel) {
+export function ThreadView({
+  thread,
+  forum,
+  replyHref,
+  markReadAction,
+  regions,
+  copy,
+}: ThreadViewModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.threadView.${key}`)
+
   return (
     <div className={PAGE_BODY}>
       <PageHead
@@ -18,7 +28,7 @@ export function ThreadView({ thread, forum, replyHref, markReadAction, regions }
                     'bg-secondary text-secondary-foreground hover:bg-secondary/80',
                   )}
                 >
-                  Mark read
+                  {c('markRead')}
                 </button>
               </form>
             )}
@@ -27,7 +37,7 @@ export function ThreadView({ thread, forum, replyHref, markReadAction, regions }
                 href={replyHref}
                 className={cn(BUTTON, 'bg-primary text-primary-foreground hover:bg-primary-hover')}
               >
-                Reply
+                {c('reply')}
               </a>
             )}
           </>
@@ -41,13 +51,12 @@ export function ThreadView({ thread, forum, replyHref, markReadAction, regions }
 
         <div className="mt-1 flex flex-wrap items-center 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 — no new replies</Badge>}
-          {thread.isMoved && <Badge tone="moved">Moved</Badge>}
+          {thread.isSticky && <Badge tone="pinned">{c('pinned')}</Badge>}
+          {thread.isLocked && <Badge tone="locked">{c('lockedNoReplies')}</Badge>}
+          {thread.isMoved && <Badge tone="moved">{c('moved')}</Badge>}
 
           <span className={`${MICRO} ${NUMERIC}`}>
-            {thread.replyCount.toLocaleString('en')} replies ·{' '}
-            {thread.viewCount.toLocaleString('en')} views
+            {thread.replyCount.label} {c('replies')} · {thread.viewCount.label} {c('views')}
           </span>
         </div>
       </PageHead>

package/src/slots/user-panel.tsx

@@ -1,6 +1,7 @@
+import type { LinkModel, SlotCopy, UserPanelModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Avatar, cn } from '@meith/ui'
 import { Menu } from '@meith/ui/menu'
-import type { LinkModel, UserPanelModel } from '@meith/theme-kit'
 
 import { BUTTON, MUTED_LINK } from '../shared'
 
@@ -36,7 +37,10 @@ export function UserPanel({
   notificationsHref,
   messagesHref,
   children,
-}: UserPanelModel) {
+  copy,
+}: UserPanelModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.userPanel.${key}`)
+
   if (viewer.isGuest) {
     return (
       <div className="flex items-center gap-2">
@@ -58,7 +62,7 @@ export function UserPanel({
     )
   }
 
-  const name = viewer.username ?? 'Signed in'
+  const name = viewer.username ?? c('signedIn')
 
   return (
     <div className="flex min-w-0 flex-col items-start gap-1 sm:items-end">
@@ -70,24 +74,24 @@ export function UserPanel({
       />
 
       <div className="flex min-w-0 items-center gap-2">
-        {unreadNotifications > 0 && (
+        {unreadNotifications.value > 0 && (
           <Count href={notificationsHref} className="bg-primary text-primary-foreground">
-            {unreadNotifications}
-            <span className="sr-only"> unread notifications</span>
-            <span aria-hidden="true">new</span>
+            {unreadNotifications.label}
+            <span className="sr-only"> {c('unreadNotifications')}</span>
+            <span aria-hidden="true">{c('new')}</span>
           </Count>
         )}
-        {unreadMessages > 0 && (
+        {unreadMessages.value > 0 && (
           <Count href={messagesHref} className="border border-border text-foreground">
-            {unreadMessages}
-            <span className="sr-only"> unread messages</span>
-            <span aria-hidden="true">unread</span>
+            {unreadMessages.label}
+            <span className="sr-only"> {c('unreadMessages')}</span>
+            <span aria-hidden="true">{c('unread')}</span>
           </Count>
         )}
 
         <span data-account="menu" className="flex min-w-0 items-center">
           <Menu
-            label="Your account"
+            label={c('yourAccount')}
             items={links}
             triggerClassName="rounded-full px-2 py-1"
             trigger={
@@ -124,7 +128,7 @@ export function UserPanel({
       <nav
         data-account="plain"
         style={{ display: 'none' }}
-        aria-label="Your account"
+        aria-label={c('yourAccount')}
         className="flex-wrap items-center gap-x-3 gap-y-1 text-xs sm:justify-end"
       >
         <span className="font-semibold text-foreground">{name}</span>

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

@@ -1,5 +1,6 @@
+import type { OnlineMemberModel, SlotCopy, WhoIsOnlineModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Badge } from '@meith/ui'
-import type { OnlineMemberModel, WhoIsOnlineModel } from '@meith/theme-kit'
 
 import { LINK, MICRO, NUMERIC, Stamp, UserRef } from '../shared'
 
@@ -8,39 +9,44 @@ const VISIBLE_NAMES = 12
 export function WhoIsOnline({
   guestCount,
   members,
+  memberCount,
   total,
   recordCount,
   recordAt,
   fullListHref,
-}: WhoIsOnlineModel) {
+  copy,
+}: WhoIsOnlineModel & { copy: SlotCopy }) {
   const shown = members.slice(0, VISIBLE_NAMES)
   const rest = members.slice(VISIBLE_NAMES)
 
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.whoIsOnline.${key}`)
+
   return (
     <section
       aria-labelledby="who-is-online-heading"
       className="flex flex-col gap-1.5 text-xs text-muted-foreground"
     >
       <h2 id="who-is-online-heading" className={MICRO}>
-        In the clubhouse
+        {c('heading')}
       </h2>
 
       <p className={NUMERIC}>
-        <span className="font-semibold text-foreground">{total.toLocaleString('en')}</span> online —{' '}
-        {members.length.toLocaleString('en')} {members.length === 1 ? 'member' : 'members'},{' '}
-        {guestCount.toLocaleString('en')} {guestCount === 1 ? 'guest' : 'guests'}
+        <span className="font-semibold text-foreground">{total.label}</span> {c('online')}{' '}
+        {memberCount.label} {memberCount.value === 1 ? c('member.one') : c('member.other')},{' '}
+        {guestCount.label} {guestCount.value === 1 ? c('guest.one') : c('guest.other')}
       </p>
 
-      {members.length === 0 ? (
-        <p>
-          {guestCount === 0
-            ? 'Nobody is reading the board right now.'
-            : 'Only guests are reading the board right now.'}
-        </p>
+      {memberCount.value === 0 ? (
+        <p>{guestCount.value === 0 ? c('nobody') : c('onlyGuests')}</p>
       ) : (
         <p className="min-w-0">
           {shown.map((member, index) => (
-            <Name key={member.userId ?? member.username} member={member} first={index === 0} />
+            <Name
+              key={member.userId ?? member.username}
+              member={member}
+              first={index === 0}
+              copy={copy}
+            />
           ))}
 
           {rest.length > 0 && (
@@ -48,12 +54,17 @@ export function WhoIsOnline({
               <summary
                 className={`inline cursor-default list-none ${LINK} [&::-webkit-details-marker]:hidden [&::marker]:content-none`}
               >
-                {' and '}
-                <span className={NUMERIC}>{rest.length.toLocaleString('en')}</span> more
+                {' '}
+                {c('and')} <span className={NUMERIC}>{rest.length}</span> {c('more')}
               </summary>
               {': '}
               {rest.map((member, index) => (
-                <Name key={member.userId ?? member.username} member={member} first={index === 0} />
+                <Name
+                  key={member.userId ?? member.username}
+                  member={member}
+                  first={index === 0}
+                  copy={copy}
+                />
               ))}
             </details>
           )}
@@ -62,11 +73,11 @@ export function WhoIsOnline({
 
       <p className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
         <a href={fullListHref} className={`font-semibold text-foreground ${LINK}`}>
-          See everyone online
+          {c('seeEveryone')}
         </a>
         {recordAt !== null && (
           <span className={`ms-auto ${NUMERIC}`}>
-            Record: {recordCount.toLocaleString('en')} on <Stamp at={recordAt} />
+            {c('record')} {recordCount.label} on <Stamp at={recordAt} />
           </span>
         )}
       </p>
@@ -74,7 +85,15 @@ export function WhoIsOnline({
   )
 }
 
-function Name({ member, first }: { member: OnlineMemberModel; first: boolean }) {
+function Name({
+  member,
+  first,
+  copy,
+}: {
+  member: OnlineMemberModel
+  first: boolean
+  copy: SlotCopy
+}) {
   return (
     <>
       {!first && ', '}
@@ -82,7 +101,7 @@ function Name({ member, first }: { member: OnlineMemberModel; first: boolean })
       {member.isInvisible && (
         <>
           {' '}
-          <Badge tone="neutral">Invisible</Badge>
+          <Badge tone="neutral">{fromSlotCopy(copy, 'clubhouse.whoIsOnline.invisible')}</Badge>
         </>
       )}
     </>

package/src/theme.ts

@@ -1,6 +1,30 @@
 import { defaultTheme } from '@meith/theme-default'
 import { defineTheme } from '@meith/theme-kit'
 
+import {
+  announcementCopy,
+  boardIndexCopy,
+  boardStatsCopy,
+  categoryBlockCopy,
+  footerCopy,
+  forumDisplayCopy,
+  forumRowCopy,
+  headerCopy,
+  latestPostsCopy,
+  latestThreadsCopy,
+  memberProfileCopy,
+  navigationCopy,
+  noticeCopy,
+  paginationCopy,
+  postActionsCopy,
+  postBitCopy,
+  shellCopy,
+  subforumListCopy,
+  threadRowCopy,
+  threadViewCopy,
+  userPanelCopy,
+  whoIsOnlineCopy,
+} from './copy'
 import { Announcement } from './slots/announcement'
 import { BoardIndex } from './slots/board-index'
 import { BoardStats } from './slots/board-stats'
@@ -56,4 +80,28 @@ export const clubhouseTheme = defineTheme({
 
     MemberProfile,
   },
+  copy: {
+    Announcement: announcementCopy,
+    BoardIndex: boardIndexCopy,
+    BoardStats: boardStatsCopy,
+    CategoryBlock: categoryBlockCopy,
+    Footer: footerCopy,
+    ForumDisplay: forumDisplayCopy,
+    ForumRow: forumRowCopy,
+    Header: headerCopy,
+    LatestPosts: latestPostsCopy,
+    LatestThreads: latestThreadsCopy,
+    MemberProfile: memberProfileCopy,
+    Navigation: navigationCopy,
+    Notice: noticeCopy,
+    Pagination: paginationCopy,
+    PostActions: postActionsCopy,
+    PostBit: postBitCopy,
+    Shell: shellCopy,
+    SubforumList: subforumListCopy,
+    ThreadRow: threadRowCopy,
+    ThreadView: threadViewCopy,
+    UserPanel: userPanelCopy,
+    WhoIsOnline: whoIsOnlineCopy,
+  },
 })