@meith/theme-raidframe 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-raidframe",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A gaming theme for Meith — guild, raid and match boards — built on the default theme's slots.",
   "license": "LGPL-3.0-or-later",
   "repository": {
@@ -20,9 +20,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/theme-default": "^0.7.0",
-    "@meith/theme-kit": "^0.7.0",
-    "@meith/ui": "^0.7.0"
+    "@meith/theme-default": "^0.8.0",
+    "@meith/ui": "^0.8.0",
+    "@meith/theme-kit": "^0.8.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/copy.ts

@@ -0,0 +1,286 @@
+import type { SlotCopy, Translator } from '@meith/theme-kit'
+
+function copyFor(t: Translator, keys: readonly string[]): SlotCopy {
+  const copy: Record<string, string> = {}
+  for (const key of keys) copy[key] = t.t(key)
+  return copy
+}
+
+export function announcementCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.announcement.kicker',
+    'raidframe.announcement.postedFallback',
+    'raidframe.announcement.postedByPrefix',
+    'raidframe.announcement.separator',
+  ])
+}
+
+export function authPageCopy(t: Translator): SlotCopy {
+  return copyFor(t, ['raidframe.authPage.kicker'])
+}
+
+export function boardIndexCopy(t: Translator): SlotCopy {
+  return copyFor(t, ['raidframe.boardIndex.markAllRead'])
+}
+
+export function boardStatsCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.boardStats.heading',
+    'raidframe.boardStats.threads',
+    'raidframe.boardStats.posts',
+    'raidframe.boardStats.members',
+    'raidframe.boardStats.newestMember',
+    'raidframe.boardStats.none',
+    'raidframe.boardStats.notCountedYet',
+    'raidframe.boardStats.counted',
+  ])
+}
+
+export function categoryBlockCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.categoryBlock.forum',
+    'raidframe.categoryBlock.threads',
+    'raidframe.categoryBlock.posts',
+    'raidframe.categoryBlock.lastPost',
+  ])
+}
+
+export function discoveryViewCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.discoveryView.kicker',
+    'raidframe.discoveryView.reply.one',
+    'raidframe.discoveryView.reply.other',
+    'raidframe.discoveryView.startedBy',
+    'raidframe.discoveryView.lastPostByPrefix',
+  ])
+}
+
+export function errorNoticeCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.errorNotice.errorLabel',
+    'raidframe.errorNotice.forumHome',
+    'raidframe.errorNotice.requestId',
+  ])
+}
+
+export function footerCopy(t: Translator): SlotCopy {
+  return copyFor(t, ['raidframe.footer.linksAriaLabel', 'raidframe.footer.allTimesPrefix'])
+}
+
+export function forumDisplayCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.forumDisplay.kicker',
+    'raidframe.forumDisplay.threadHeader',
+    'raidframe.forumDisplay.repliesHeader',
+    'raidframe.forumDisplay.viewsHeader',
+    'raidframe.forumDisplay.lastPostHeader',
+    'raidframe.forumDisplay.threads',
+    'raidframe.forumDisplay.posts',
+    'raidframe.forumDisplay.newThread',
+    'raidframe.forumDisplay.markRead',
+  ])
+}
+
+export function forumRowCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.forumRow.newPosts',
+    'raidframe.forumRow.linkBadge',
+    'raidframe.forumRow.none',
+    'raidframe.forumRow.noPostsYet',
+    'raidframe.forumRow.separator',
+  ])
+}
+
+export function headerCopy(t: Translator): SlotCopy {
+  return copyFor(t, ['raidframe.header.sectionsAriaLabel'])
+}
+
+export function latestPostsCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.latestPosts.heading',
+    'raidframe.latestPosts.empty',
+    'raidframe.latestPosts.asOf',
+  ])
+}
+
+export function latestThreadsCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.latestThreads.heading',
+    'raidframe.latestThreads.empty',
+    'raidframe.latestThreads.asOf',
+    'raidframe.latestThreads.replies',
+  ])
+}
+
+export function memberProfileCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.memberProfile.kicker',
+    'raidframe.memberProfile.statsHeading',
+    'raidframe.memberProfile.posts',
+    'raidframe.memberProfile.joined',
+    'raidframe.memberProfile.lastVisit',
+    'raidframe.memberProfile.never',
+    'raidframe.memberProfile.signatureHeading',
+    'raidframe.memberProfile.actionsAriaLabel',
+  ])
+}
+
+export function navigationCopy(t: Translator): SlotCopy {
+  return copyFor(t, ['raidframe.navigation.ariaLabel'])
+}
+
+export function noticeCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.notice.info',
+    'raidframe.notice.success',
+    'raidframe.notice.warning',
+    'raidframe.notice.error',
+    'raidframe.notice.dismiss',
+  ])
+}
+
+export function paginationCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.pagination.ariaLabel',
+    'raidframe.pagination.prev',
+    'raidframe.pagination.next',
+    'raidframe.pagination.page',
+  ])
+}
+
+export function panelNavCopy(t: Translator): SlotCopy {
+  return copyFor(t, ['raidframe.panelNav.waiting'])
+}
+
+export function panelPageCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.panelPage.panelLabel.usercp',
+    'raidframe.panelPage.panelLabel.modcp',
+    'raidframe.panelPage.panelLabel.admincp',
+  ])
+}
+
+export function postActionsCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.postActions.quote',
+    'raidframe.postActions.edit',
+    'raidframe.postActions.restore',
+    'raidframe.postActions.rate',
+    'raidframe.postActions.report',
+    'raidframe.postActions.warn',
+    'raidframe.postActions.moderate',
+    'raidframe.postActions.ariaLabel',
+  ])
+}
+
+export function postBitCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.postBit.deletedNotice',
+    'raidframe.postBit.awaitingApprovalNotice',
+    'raidframe.postBit.posts',
+    'raidframe.postBit.rep',
+    'raidframe.postBit.joined',
+    'raidframe.postBit.online',
+    'raidframe.postBit.ignoredPrefix',
+    'raidframe.postBit.ignoredSuffix',
+    'raidframe.postBit.showIt',
+  ])
+}
+
+export function postFormCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.postForm.mode.edit',
+    'raidframe.postForm.mode.reply',
+    'raidframe.postForm.mode.newThread',
+    'raidframe.postForm.cannotPost',
+  ])
+}
+
+export function redirectNoticeCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.redirectNotice.kicker',
+    'raidframe.redirectNotice.title',
+    'raidframe.redirectNotice.continueNow',
+    'raidframe.redirectNotice.continuingIn',
+    'raidframe.redirectNotice.second.one',
+    'raidframe.redirectNotice.second.other',
+  ])
+}
+
+export function searchFormCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.searchForm.heading',
+    'raidframe.searchForm.searchForLabel',
+    'raidframe.searchForm.placeholder',
+    'raidframe.searchForm.inLabel',
+    'raidframe.searchForm.sortByLabel',
+    'raidframe.searchForm.submit',
+  ])
+}
+
+export function searchResultsCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.searchResults.kicker',
+    'raidframe.searchResults.resultsForPrefix',
+    'raidframe.searchResults.resultsForSuffix',
+    'raidframe.searchResults.run',
+    'raidframe.searchResults.accessNotice',
+    'raidframe.searchResults.nothingMatched',
+    'raidframe.searchResults.nothingMatchedHint',
+    'raidframe.searchResults.startNewSearch',
+    'raidframe.searchResults.removeFilter',
+    'raidframe.searchResults.clearFilters',
+  ])
+}
+
+export function shellCopy(t: Translator): SlotCopy {
+  return copyFor(t, ['raidframe.shell.skipToContent'])
+}
+
+export function subforumListCopy(t: Translator): SlotCopy {
+  return copyFor(t, ['raidframe.subforumList.ariaLabel', 'raidframe.subforumList.label'])
+}
+
+export function threadRowCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.threadRow.newPosts',
+    'raidframe.threadRow.pinned',
+    'raidframe.threadRow.locked',
+    'raidframe.threadRow.moved',
+    'raidframe.threadRow.startedBy',
+    'raidframe.threadRow.none',
+    'raidframe.threadRow.byPrefix',
+  ])
+}
+
+export function threadViewCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.threadView.postReply',
+    'raidframe.threadView.pinned',
+    'raidframe.threadView.locked',
+    'raidframe.threadView.replies',
+    'raidframe.threadView.views',
+    'raidframe.threadView.markRead',
+  ])
+}
+
+export function userPanelCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.userPanel.signedIn',
+    'raidframe.userPanel.new',
+    'raidframe.userPanel.pm',
+    'raidframe.userPanel.accountLabel',
+  ])
+}
+
+export function whoIsOnlineCopy(t: Translator): SlotCopy {
+  return copyFor(t, [
+    'raidframe.whoIsOnline.heading',
+    'raidframe.whoIsOnline.onlineSuffix',
+    'raidframe.whoIsOnline.noMembers',
+    'raidframe.whoIsOnline.hidden',
+    'raidframe.whoIsOnline.fullList',
+    'raidframe.whoIsOnline.guests',
+    'raidframe.whoIsOnline.record',
+  ])
+}

package/src/index.ts

@@ -1,3 +1,3 @@
-export { LIGHT_TOKENS, DARK_TOKENS, BROWSER_THEME_COLOR } from './tokens'
-
+export { raidframeMessages } from './messages'
 export { raidframeTheme } from './theme'
+export { BROWSER_THEME_COLOR, DARK_TOKENS, LIGHT_TOKENS } from './tokens'

package/src/messages/en.json

@@ -0,0 +1,144 @@
+{
+  "raidframe.announcement.kicker": "announcement",
+  "raidframe.announcement.postedByPrefix": "posted by ",
+  "raidframe.announcement.postedFallback": "posted",
+  "raidframe.announcement.separator": " · ",
+  "raidframe.authPage.kicker": "access",
+  "raidframe.boardIndex.markAllRead": "mark all read",
+  "raidframe.boardStats.counted": "counted",
+  "raidframe.boardStats.heading": "Board statistics",
+  "raidframe.boardStats.members": "members",
+  "raidframe.boardStats.newestMember": "newest member",
+  "raidframe.boardStats.none": "—",
+  "raidframe.boardStats.notCountedYet": "not counted yet",
+  "raidframe.boardStats.posts": "posts",
+  "raidframe.boardStats.threads": "threads",
+  "raidframe.categoryBlock.forum": "Forum",
+  "raidframe.categoryBlock.lastPost": "Last post",
+  "raidframe.categoryBlock.posts": "Posts",
+  "raidframe.categoryBlock.threads": "Threads",
+  "raidframe.discoveryView.kicker": "listing",
+  "raidframe.discoveryView.lastPostByPrefix": " by ",
+  "raidframe.discoveryView.reply.one": "reply",
+  "raidframe.discoveryView.reply.other": "replies",
+  "raidframe.discoveryView.startedBy": "started by",
+  "raidframe.errorNotice.errorLabel": "error",
+  "raidframe.errorNotice.forumHome": "forum home",
+  "raidframe.errorNotice.requestId": "request id",
+  "raidframe.footer.allTimesPrefix": "all times ",
+  "raidframe.footer.linksAriaLabel": "Board links",
+  "raidframe.forumDisplay.kicker": "forum",
+  "raidframe.forumDisplay.lastPostHeader": "Last post",
+  "raidframe.forumDisplay.markRead": "mark this forum read",
+  "raidframe.forumDisplay.newThread": "new thread",
+  "raidframe.forumDisplay.posts": "posts",
+  "raidframe.forumDisplay.repliesHeader": "Replies",
+  "raidframe.forumDisplay.threadHeader": "Thread",
+  "raidframe.forumDisplay.threads": "threads",
+  "raidframe.forumDisplay.viewsHeader": "Views",
+  "raidframe.forumRow.linkBadge": "link",
+  "raidframe.forumRow.newPosts": "(new posts)",
+  "raidframe.forumRow.noPostsYet": "no posts yet",
+  "raidframe.forumRow.none": "—",
+  "raidframe.forumRow.separator": " · ",
+  "raidframe.header.sectionsAriaLabel": "Board sections",
+  "raidframe.latestPosts.asOf": "as of",
+  "raidframe.latestPosts.empty": "nothing said yet",
+  "raidframe.latestPosts.heading": "Latest posts",
+  "raidframe.latestThreads.asOf": "as of",
+  "raidframe.latestThreads.empty": "nothing started yet",
+  "raidframe.latestThreads.heading": "Latest threads",
+  "raidframe.latestThreads.replies": " replies",
+  "raidframe.memberProfile.actionsAriaLabel": "Member actions",
+  "raidframe.memberProfile.joined": "joined",
+  "raidframe.memberProfile.kicker": "profile",
+  "raidframe.memberProfile.lastVisit": "last visit",
+  "raidframe.memberProfile.never": "never",
+  "raidframe.memberProfile.posts": "posts",
+  "raidframe.memberProfile.signatureHeading": "Signature",
+  "raidframe.memberProfile.statsHeading": "Statistics",
+  "raidframe.navigation.ariaLabel": "Breadcrumb",
+  "raidframe.notice.dismiss": "dismiss",
+  "raidframe.notice.error": "error",
+  "raidframe.notice.info": "info",
+  "raidframe.notice.success": "success",
+  "raidframe.notice.warning": "warning",
+  "raidframe.pagination.ariaLabel": "Pagination",
+  "raidframe.pagination.next": "next",
+  "raidframe.pagination.page": "page",
+  "raidframe.pagination.prev": "prev",
+  "raidframe.panelNav.waiting": "waiting",
+  "raidframe.panelPage.panelLabel.admincp": "control panel",
+  "raidframe.panelPage.panelLabel.modcp": "moderator control panel",
+  "raidframe.panelPage.panelLabel.usercp": "your control panel",
+  "raidframe.postActions.ariaLabel": "Post actions",
+  "raidframe.postActions.edit": "edit",
+  "raidframe.postActions.moderate": "moderate",
+  "raidframe.postActions.quote": "quote",
+  "raidframe.postActions.rate": "rate",
+  "raidframe.postActions.report": "report",
+  "raidframe.postActions.restore": "restore",
+  "raidframe.postActions.warn": "warn",
+  "raidframe.postBit.awaitingApprovalNotice": "awaiting approval — visible to moderators only",
+  "raidframe.postBit.deletedNotice": "deleted — visible to moderators only",
+  "raidframe.postBit.ignoredPrefix": "Post from ",
+  "raidframe.postBit.ignoredSuffix": ", who you are ignoring.",
+  "raidframe.postBit.joined": "joined",
+  "raidframe.postBit.online": "online",
+  "raidframe.postBit.posts": "posts",
+  "raidframe.postBit.rep": "rep",
+  "raidframe.postBit.showIt": "Show it",
+  "raidframe.postForm.cannotPost": "cannot post",
+  "raidframe.postForm.mode.edit": "edit",
+  "raidframe.postForm.mode.newThread": "new thread",
+  "raidframe.postForm.mode.reply": "reply",
+  "raidframe.redirectNotice.continueNow": "continue now",
+  "raidframe.redirectNotice.continuingIn": "continuing in",
+  "raidframe.redirectNotice.kicker": "redirecting",
+  "raidframe.redirectNotice.second.one": "second",
+  "raidframe.redirectNotice.second.other": "seconds",
+  "raidframe.redirectNotice.title": "Please wait",
+  "raidframe.searchForm.heading": "Search",
+  "raidframe.searchForm.inLabel": "In",
+  "raidframe.searchForm.placeholder": "Words in a subject or a post",
+  "raidframe.searchForm.searchForLabel": "Search for",
+  "raidframe.searchForm.sortByLabel": "Sort by",
+  "raidframe.searchForm.submit": "search",
+  "raidframe.searchResults.accessNotice": "checked against your access every time this page is opened",
+  "raidframe.searchResults.clearFilters": "clear filters",
+  "raidframe.searchResults.kicker": "search",
+  "raidframe.searchResults.nothingMatched": "Nothing matched",
+  "raidframe.searchResults.nothingMatchedHint": "Or nothing you can see does. Try fewer words, or a different spelling.",
+  "raidframe.searchResults.removeFilter": "— remove this filter",
+  "raidframe.searchResults.resultsForPrefix": "Results for “",
+  "raidframe.searchResults.resultsForSuffix": "”",
+  "raidframe.searchResults.run": "run",
+  "raidframe.searchResults.startNewSearch": "start a new search",
+  "raidframe.shell.skipToContent": "Skip to content",
+  "raidframe.subforumList.ariaLabel": "Subforums",
+  "raidframe.subforumList.label": "subforums",
+  "raidframe.threadRow.byPrefix": "by ",
+  "raidframe.threadRow.locked": "locked",
+  "raidframe.threadRow.moved": "moved",
+  "raidframe.threadRow.newPosts": "(new posts)",
+  "raidframe.threadRow.none": "—",
+  "raidframe.threadRow.pinned": "pinned",
+  "raidframe.threadRow.startedBy": "started by",
+  "raidframe.threadView.locked": "locked",
+  "raidframe.threadView.markRead": "mark read",
+  "raidframe.threadView.pinned": "pinned",
+  "raidframe.threadView.postReply": "post reply",
+  "raidframe.threadView.replies": "replies",
+  "raidframe.threadView.views": "views",
+  "raidframe.userPanel.accountLabel": "Your account",
+  "raidframe.userPanel.new": "new",
+  "raidframe.userPanel.pm": "pm",
+  "raidframe.userPanel.signedIn": "signed in",
+  "raidframe.whoIsOnline.fullList": "full list",
+  "raidframe.whoIsOnline.guests": "guests",
+  "raidframe.whoIsOnline.heading": "Online now",
+  "raidframe.whoIsOnline.hidden": "hidden",
+  "raidframe.whoIsOnline.noMembers": "no members",
+  "raidframe.whoIsOnline.onlineSuffix": "online",
+  "raidframe.whoIsOnline.record": "record"
+}

package/src/messages/index.ts

@@ -0,0 +1,5 @@
+import type { CatalogBundle } from '@meith/theme-kit'
+
+import en from './en.json'
+
+export const raidframeMessages: CatalogBundle = { en }

package/src/shared.tsx

@@ -22,8 +22,7 @@ export const BUTTON_PRIMARY =
 export const CHIP =
   'inline-flex items-center gap-1 border border-border bg-surface px-1.5 py-0.5 font-mono text-[0.625rem] font-semibold uppercase tracking-[0.12em]'
 
-export const RULE =
-  'h-px w-full bg-gradient-to-r from-primary/70 via-primary/15 to-transparent'
+export const RULE = 'h-px w-full bg-gradient-to-r from-primary/70 via-primary/15 to-transparent'
 
 export function Frame({
   children,

package/src/slots/announcement.tsx

@@ -1,12 +1,22 @@
-import type { AnnouncementModel } from '@meith/theme-kit'
+import type { AnnouncementModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { Frame, HEADING, MICRO, Stamp, UserRef } from '../shared'
 
-export function Announcement({ title, bodyHtml, postedBy, postedAt, forum }: AnnouncementModel) {
+export function Announcement({
+  title,
+  bodyHtml,
+  postedBy,
+  postedAt,
+  forum,
+  copy,
+}: AnnouncementModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.announcement.${key}`)
+
   return (
     <Frame as="article">
       <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border bg-surface px-3 py-2">
-        <span className={`${MICRO} text-primary`}>announcement</span>
+        <span className={`${MICRO} text-primary`}>{c('kicker')}</span>
         {forum !== null && (
           <a href={forum.href} className={`${MICRO} hover:text-primary`}>
             {forum.label}
@@ -24,14 +34,14 @@ export function Announcement({ title, bodyHtml, postedBy, postedAt, forum }: Ann
 
         <p className={MICRO}>
           {postedBy === null ? (
-            'posted'
+            c('postedFallback')
           ) : (
             <>
-              {'posted by '}
+              {c('postedByPrefix')}
               <UserRef user={postedBy} className="text-primary hover:underline" />
             </>
           )}
-          {' · '}
+          {c('separator')}
           <Stamp at={postedAt} />
         </p>
       </div>

package/src/slots/auth-page.tsx

@@ -1,8 +1,17 @@
-import type { AuthPageModel } from '@meith/theme-kit'
+import type { AuthPageModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { Frame, HEADING, MICRO } from '../shared'
 
-export function AuthPage({ title, alert, links, regions }: AuthPageModel) {
+export function AuthPage({
+  title,
+  alert,
+  links,
+  regions,
+  copy,
+}: AuthPageModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.authPage.${key}`)
+
   return (
     <main
       id="board-content"
@@ -12,7 +21,7 @@ export function AuthPage({ title, alert, links, regions }: AuthPageModel) {
       <Frame className="w-full max-w-sm">
         <div className="flex flex-col gap-5 px-5 py-5">
           <div className="flex flex-col gap-1">
-            <p className={`${MICRO} text-primary`}>access</p>
+            <p className={`${MICRO} text-primary`}>{c('kicker')}</p>
             <h1 className={`${HEADING} text-2xl text-foreground`}>{title}</h1>
             {regions.lede !== undefined && (
               <p className="text-sm text-muted-foreground">{regions.lede}</p>

package/src/slots/board-index.tsx

@@ -1,8 +1,15 @@
-import type { BoardIndexModel } from '@meith/theme-kit'
+import type { BoardIndexModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { BUTTON } from '../shared'
 
-export function BoardIndex({ markAllReadAction, regions }: BoardIndexModel) {
+export function BoardIndex({
+  markAllReadAction,
+  regions,
+  copy,
+}: BoardIndexModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.boardIndex.${key}`)
+
   const latest = regions.latest ?? null
 
   return (
@@ -26,7 +33,7 @@ export function BoardIndex({ markAllReadAction, regions }: BoardIndexModel) {
       {markAllReadAction !== null && (
         <form action={markAllReadAction} method="post">
           <button type="submit" className={BUTTON}>
-            mark all read
+            {c('markAllRead')}
           </button>
         </form>
       )}

package/src/slots/board-stats.tsx

@@ -1,12 +1,15 @@
-import type { BoardStatsModel } from '@meith/theme-kit'
+import type { BoardStatsModel, CountModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { Frame, MICRO, NUMERIC, PanelHead, Stamp, UserRef } from '../shared'
 
-function Stat({ label, value }: { label: string; value: number }) {
+function Stat({ label, value }: { label: string; value: CountModel }) {
   return (
     <div className="border border-border bg-surface px-2 py-1.5">
       <dt className={MICRO}>{label}</dt>
-      <dd className={`${NUMERIC} text-lg leading-tight font-semibold text-foreground`}>{value}</dd>
+      <dd className={`${NUMERIC} text-lg leading-tight font-semibold text-foreground`}>
+        {value.label}
+      </dd>
     </div>
   )
 }
@@ -17,22 +20,25 @@ export function BoardStats({
   memberCount,
   newestMember,
   computedAt,
-}: BoardStatsModel) {
+  copy,
+}: BoardStatsModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.boardStats.${key}`)
+
   return (
     <Frame aria-labelledby="board-stats-heading">
-      <PanelHead id="board-stats-heading" title="Board statistics" />
+      <PanelHead id="board-stats-heading" title={c('heading')} />
 
       <dl className="grid grid-cols-3 gap-1.5 px-3 py-3">
-        <Stat label="threads" value={threadCount} />
-        <Stat label="posts" value={postCount} />
-        <Stat label="members" value={memberCount} />
+        <Stat label={c('threads')} value={threadCount} />
+        <Stat label={c('posts')} value={postCount} />
+        <Stat label={c('members')} value={memberCount} />
       </dl>
 
       <p className={`${MICRO} border-t border-border px-3 py-2 normal-case`}>
-        <span className="uppercase">newest member</span>
+        <span className="uppercase">{c('newestMember')}</span>
         {': '}
         {newestMember === null ? (
-          '—'
+          c('none')
         ) : (
           <UserRef user={newestMember} className="text-primary hover:underline" />
         )}
@@ -40,10 +46,10 @@ export function BoardStats({
 
       <p className={`${MICRO} border-t border-border px-3 py-1.5 normal-case`}>
         {computedAt === null ? (
-          <span className="uppercase">not counted yet</span>
+          <span className="uppercase">{c('notCountedYet')}</span>
         ) : (
           <>
-            <span className="uppercase">counted</span> <Stamp at={computedAt} />
+            <span className="uppercase">{c('counted')}</span> <Stamp at={computedAt} />
           </>
         )}
       </p>