@meith/theme-raidframe 0.7.0 → 0.8.0

package/src/slots/panel-nav.tsx

@@ -1,15 +1,18 @@
-import type { PanelNavItemModel, PanelNavModel } from '@meith/theme-kit'
+import type { PanelNavItemModel, PanelNavModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { MICRO, NUMERIC, RULE } from '../shared'
 
-const ITEM =
-  'flex items-baseline gap-2 border-l-2 px-2.5 py-1.5 text-[0.8125rem] tracking-[0.02em]'
+const ITEM = 'flex items-baseline gap-2 border-l-2 px-2.5 py-1.5 text-[0.8125rem] tracking-[0.02em]'
 
 const HERE = 'border-l-primary bg-secondary font-semibold text-foreground'
 const OPEN = 'border-l-primary/40 font-semibold text-foreground'
-const ELSEWHERE = 'border-l-transparent text-muted-foreground hover:border-l-border hover:text-primary'
+const ELSEWHERE =
+  'border-l-transparent text-muted-foreground hover:border-l-border hover:text-primary'
+
+function Count({ count, copy }: { count: number; copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.panelNav.${key}`)
 
-function Count({ count }: { count: number }) {
   return (
     <>
       <span
@@ -18,16 +21,26 @@ function Count({ count }: { count: number }) {
       >
         {count > 99 ? '99+' : count}
       </span>
-      <span className="sr-only">({count} waiting)</span>
+      <span className="sr-only">
+        ({count} {c('waiting')})
+      </span>
     </>
   )
 }
 
-function Item({ item, className }: { item: PanelNavItemModel; className: string }) {
+function Item({
+  item,
+  className,
+  copy,
+}: {
+  item: PanelNavItemModel
+  className: string
+  copy: SlotCopy
+}) {
   const body = (
     <>
       <span className="min-w-0 flex-1">{item.title}</span>
-      {item.count !== null && <Count count={item.count} />}
+      {item.count !== null && <Count count={item.count} copy={copy} />}
     </>
   )
 
@@ -52,7 +65,11 @@ function Item({ item, className }: { item: PanelNavItemModel; className: string
   )
 }
 
-function Sections({ label, sections }: Pick<PanelNavModel, 'label' | 'sections'>) {
+function Sections({
+  label,
+  sections,
+  copy,
+}: Pick<PanelNavModel, 'label' | 'sections'> & { copy: SlotCopy }) {
   return (
     <nav aria-label={label}>
       <ul className="flex flex-col">
@@ -64,13 +81,18 @@ function Sections({ label, sections }: Pick<PanelNavModel, 'label' | 'sections'>
             <Item
               item={section}
               className={section.current === 'here' ? HERE : section.isOpen ? OPEN : ELSEWHERE}
+              copy={copy}
             />
 
             {section.isOpen && section.children.length > 0 && (
               <ul className="my-0.5 ml-3 flex flex-col border-l border-border pl-1">
                 {section.children.map((child) => (
                   <li key={child.href}>
-                    <Item item={child} className={child.current === 'here' ? HERE : ELSEWHERE} />
+                    <Item
+                      item={child}
+                      className={child.current === 'here' ? HERE : ELSEWHERE}
+                      copy={copy}
+                    />
                   </li>
                 ))}
               </ul>
@@ -82,7 +104,12 @@ function Sections({ label, sections }: Pick<PanelNavModel, 'label' | 'sections'>
   )
 }
 
-export function PanelNav({ label, sections, currentTitle }: PanelNavModel) {
+export function PanelNav({
+  label,
+  sections,
+  currentTitle,
+  copy,
+}: PanelNavModel & { copy: SlotCopy }) {
   return (
     <>
       <details className="border border-border bg-card lg:hidden">
@@ -92,7 +119,7 @@ export function PanelNav({ label, sections, currentTitle }: PanelNavModel) {
         </summary>
         <div className={RULE} aria-hidden="true" />
         <div className="p-2">
-          <Sections label={label} sections={sections} />
+          <Sections label={label} sections={sections} copy={copy} />
         </div>
       </details>
 
@@ -102,7 +129,7 @@ export function PanelNav({ label, sections, currentTitle }: PanelNavModel) {
         </p>
         <div className={RULE} aria-hidden="true" />
         <div className="p-2">
-          <Sections label={label} sections={sections} />
+          <Sections label={label} sections={sections} copy={copy} />
         </div>
       </div>
     </>

package/src/slots/panel-page.tsx

@@ -1,13 +1,8 @@
-import type { PanelKind, PanelPageModel, PanelSectionModel } from '@meith/theme-kit'
+import type { PanelKind, PanelPageModel, PanelSectionModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { HEADING, MICRO, RULE } from '../shared'
 
-const LABEL: Record<PanelKind, string> = {
-  usercp: 'your control panel',
-  modcp: 'moderator control panel',
-  admincp: 'control panel',
-}
-
 export function PanelPage({
   panel,
   title,
@@ -17,16 +12,22 @@ export function PanelPage({
   gap,
   regions,
   children,
-}: PanelPageModel) {
+  copy,
+}: PanelPageModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.panelPage.${key}`)
+  const LABEL: Record<PanelKind, string> = {
+    usercp: c('panelLabel.usercp'),
+    modcp: c('panelLabel.modcp'),
+    admincp: c('panelLabel.admincp'),
+  }
+
   return (
     <main
       id="board-content"
       tabIndex={-1}
       className={`flex w-full flex-col p-4 ${
         frame === 'standalone' ? 'mx-auto flex-1' : ''
-      } ${width === 'wide' ? 'max-w-none' : 'max-w-4xl'} ${
-        gap === 'loose' ? 'gap-6' : 'gap-4'
-      }`}
+      } ${width === 'wide' ? 'max-w-none' : 'max-w-4xl'} ${gap === 'loose' ? 'gap-6' : 'gap-4'}`}
     >
       <div className="border border-border bg-card shadow-elevation">
         <div className="flex flex-wrap items-start justify-between gap-x-6 gap-y-2 px-4 py-3">

package/src/slots/post-actions.tsx

@@ -1,23 +1,30 @@
-import type { PostActionsSlotModel } from '@meith/theme-kit'
+import type { PostActionsSlotModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 const ACTION =
   'font-mono text-[0.625rem] font-semibold uppercase tracking-[0.14em] text-muted-foreground hover:text-primary'
 
-export function PostActions({ actions, children }: PostActionsSlotModel) {
+export function PostActions({
+  actions,
+  children,
+  copy,
+}: PostActionsSlotModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.postActions.${key}`)
+
   const items = [
-    { href: actions.quoteHref, label: 'quote' },
-    { href: actions.editHref, label: 'edit' },
-    { href: actions.restoreHref, label: 'restore' },
-    { href: actions.rateHref, label: 'rate' },
-    { href: actions.reportHref, label: 'report' },
-    { href: actions.warnHref, label: 'warn' },
-    { href: actions.moderateHref, label: 'moderate' },
+    { href: actions.quoteHref, label: c('quote') },
+    { href: actions.editHref, label: c('edit') },
+    { href: actions.restoreHref, label: c('restore') },
+    { href: actions.rateHref, label: c('rate') },
+    { href: actions.reportHref, label: c('report') },
+    { href: actions.warnHref, label: c('warn') },
+    { href: actions.moderateHref, label: c('moderate') },
   ].filter((item): item is { href: string; label: string } => item.href !== null)
 
   if (items.length === 0 && children === undefined) return null
 
   return (
-    <nav aria-label="Post actions" className="flex flex-wrap items-center gap-x-4 gap-y-1">
+    <nav aria-label={c('ariaLabel')} className="flex flex-wrap items-center gap-x-4 gap-y-1">
       {items.map((item) => (
         <a key={item.label} href={item.href} className={ACTION}>
           {item.label}

package/src/slots/post-bit.tsx

@@ -1,10 +1,15 @@
 import type { ReactNode } from 'react'
 
-import type { PostBitSlotModel } from '@meith/theme-kit'
+import type { PostBitSlotModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { HEADING, MICRO, NUMERIC, Stamp, UserRef } from '../shared'
 
-function GroupBadge({ badge }: { badge: NonNullable<PostBitSlotModel['post']['author']['badge']> }) {
+function GroupBadge({
+  badge,
+}: {
+  badge: NonNullable<PostBitSlotModel['post']['author']['badge']>
+}) {
   const image = (
     <img
       src={badge.src}
@@ -26,18 +31,24 @@ function GroupBadge({ badge }: { badge: NonNullable<PostBitSlotModel['post']['au
   )
 }
 
-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, `raidframe.postBit.${key}`)
+
   return (
     <p
       className={`${MICRO} border-b border-border px-3 py-1.5 ${
         visibility === 'deleted' ? 'bg-thread-deleted/10' : 'bg-post-unapproved'
       }`}
     >
-      {visibility === 'deleted'
-        ? 'deleted — visible to moderators only'
-        : 'awaiting approval — visible to moderators only'}
+      {visibility === 'deleted' ? c('deletedNotice') : c('awaitingApprovalNotice')}
     </p>
   )
 }
@@ -51,7 +62,9 @@ function StatLine({ label, children }: { label: string; children: ReactNode }) {
   )
 }
 
-export function PostBit({ post, select, regions }: PostBitSlotModel) {
+export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.postBit.${key}`)
+
   return (
     <article
       id={`post-${post.number}`}
@@ -67,7 +80,7 @@ export function PostBit({ post, select, regions }: PostBitSlotModel) {
         className="pointer-events-none absolute -right-px -bottom-px size-2 border-r-2 border-b-2 border-primary/70"
       />
 
-      <StatusBanner visibility={post.visibility} />
+      <StatusBanner visibility={post.visibility} copy={copy} />
 
       <div className="grid grid-cols-1 sm:grid-cols-[12rem_1fr]">
         <div className="border-b border-border bg-surface px-3 py-3 sm:border-r sm:border-b-0">
@@ -115,11 +128,7 @@ export function PostBit({ post, select, regions }: PostBitSlotModel) {
                     aria-hidden="true"
                     className="size-1.5 bg-moderation-approved shadow-[0_0_6px_var(--color-moderation-approved)]"
                   />
-                  <span
-                    className={`${MICRO} text-moderation-approved`}
-                  >
-                    online
-                  </span>
+                  <span className={`${MICRO} text-moderation-approved`}>{c('online')}</span>
                 </p>
               )}
             </div>
@@ -134,12 +143,12 @@ export function PostBit({ post, select, regions }: PostBitSlotModel) {
           )}
 
           <dl className="mt-2.5">
-            <StatLine label="posts">{post.author.postCount}</StatLine>
+            <StatLine label={c('posts')}>{post.author.postCount.label}</StatLine>
             {post.author.reputation != null && (
-              <StatLine label="rep">{post.author.reputation}</StatLine>
+              <StatLine label={c('rep')}>{post.author.reputation.label}</StatLine>
             )}
             {post.author.joinedAt !== null && (
-              <StatLine label="joined">
+              <StatLine label={c('joined')}>
                 <Stamp at={post.author.joinedAt} />
               </StatLine>
             )}
@@ -164,9 +173,11 @@ export function PostBit({ post, select, regions }: PostBitSlotModel) {
 
           {post.ignored !== null ? (
             <p className="px-3 py-3 text-sm text-muted-foreground">
-              Post from {post.ignored.authorUsername}, who you are ignoring.{' '}
+              {c('ignoredPrefix')}
+              {post.ignored.authorUsername}
+              {c('ignoredSuffix')}{' '}
               <a href={post.ignored.revealHref} className="text-primary hover:underline">
-                Show it
+                {c('showIt')}
               </a>
             </p>
           ) : (

package/src/slots/post-form.tsx

@@ -1,4 +1,5 @@
-import type { PostFormModel } from '@meith/theme-kit'
+import type { PostFormModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { BUTTON, HEADING, MICRO, RULE } from '../shared'
 
@@ -9,7 +10,10 @@ export function PostForm({
   cancelLabel,
   errorMessage,
   regions,
-}: PostFormModel) {
+  copy,
+}: PostFormModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.postForm.${key}`)
+
   return (
     <div className="mx-auto flex w-full max-w-4xl flex-col gap-4 p-4">
       {errorMessage !== null && (
@@ -17,7 +21,7 @@ export function PostForm({
           role="alert"
           className="border border-l-[3px] border-border border-l-destructive bg-card px-3 py-2 text-sm"
         >
-          <span className={`${MICRO} mr-2 text-destructive`}>cannot post</span>
+          <span className={`${MICRO} mr-2 text-destructive`}>{c('cannotPost')}</span>
           {errorMessage}
         </p>
       )}
@@ -25,7 +29,13 @@ export function PostForm({
       <section className="border border-border bg-card shadow-elevation">
         <div className="flex flex-wrap items-center justify-between gap-3 px-4 py-3">
           <div>
-            <p className={MICRO}>{mode === 'edit' ? 'edit' : mode === 'reply' ? 'reply' : 'new thread'}</p>
+            <p className={MICRO}>
+              {mode === 'edit'
+                ? c('mode.edit')
+                : mode === 'reply'
+                  ? c('mode.reply')
+                  : c('mode.newThread')}
+            </p>
             <h1 className={`${HEADING} text-lg text-foreground`}>{heading}</h1>
           </div>
           <a href={cancelHref} className={BUTTON}>

package/src/slots/redirect-notice.tsx

@@ -1,23 +1,31 @@
-import type { RedirectNoticeModel } from '@meith/theme-kit'
+import type { RedirectNoticeModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { BUTTON_PRIMARY, Frame, HEADING, MICRO, NUMERIC } from '../shared'
 
-export function RedirectNotice({ message, targetHref, delaySeconds }: RedirectNoticeModel) {
+export function RedirectNotice({
+  message,
+  targetHref,
+  delaySeconds,
+  copy,
+}: RedirectNoticeModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.redirectNotice.${key}`)
+
   return (
     <Frame className="w-full max-w-lg">
       <div className="px-5 py-5">
-        <p className={`${MICRO} text-primary`}>redirecting</p>
-        <h1 className={`${HEADING} mt-1 text-2xl text-foreground`}>Please wait</h1>
+        <p className={`${MICRO} text-primary`}>{c('kicker')}</p>
+        <h1 className={`${HEADING} mt-1 text-2xl text-foreground`}>{c('title')}</h1>
         <p className="mt-2 text-sm text-muted-foreground">{message}</p>
 
         <div className="mt-5 flex flex-wrap items-center gap-3">
           <a href={targetHref} className={BUTTON_PRIMARY}>
-            continue now
+            {c('continueNow')}
           </a>
           <span className={`${MICRO} normal-case`}>
-            <span className="uppercase">continuing in</span>{' '}
-            <span className={NUMERIC}>{delaySeconds}</span>
-            {delaySeconds === 1 ? ' second' : ' seconds'}
+            <span className="uppercase">{c('continuingIn')}</span>{' '}
+            <span className={NUMERIC}>{delaySeconds}</span>{' '}
+            {delaySeconds === 1 ? c('second.one') : c('second.other')}
           </span>
         </div>
       </div>

package/src/slots/search-form.tsx

@@ -1,4 +1,5 @@
-import type { OptionModel, SearchAdvancedModel, SearchFormModel } from '@meith/theme-kit'
+import type { OptionModel, SearchAdvancedModel, SearchFormModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { BUTTON_PRIMARY, Frame, MICRO, PanelHead } from '../shared'
 
@@ -98,7 +99,10 @@ export function SearchForm({
   hint,
   errorMessage,
   advanced,
-}: SearchFormModel) {
+  copy,
+}: SearchFormModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.searchForm.${key}`)
+
   const described = [
     hint === null ? null : 'search-hint',
     errorMessage === null ? null : 'search-error',
@@ -108,12 +112,12 @@ export function SearchForm({
 
   return (
     <Frame aria-labelledby="search-heading">
-      <PanelHead id="search-heading" title="Search" />
+      <PanelHead id="search-heading" title={c('heading')} />
 
       <form method="get" action={action} className="flex flex-col gap-4 px-4 py-4">
         <div>
           <label htmlFor="search-query" className={`${MICRO} mb-1 block`}>
-            Search for
+            {c('searchForLabel')}
           </label>
           <input
             id="search-query"
@@ -122,7 +126,7 @@ export function SearchForm({
             defaultValue={query}
             maxLength={maxQueryLength}
             autoComplete="off"
-            placeholder="Words in a subject or a post"
+            placeholder={c('placeholder')}
             aria-invalid={errorMessage === null ? undefined : true}
             {...(described === '' ? {} : { 'aria-describedby': described })}
             className={CONTROL}
@@ -142,15 +146,15 @@ export function SearchForm({
         </div>
 
         <div className="grid gap-4 sm:grid-cols-2">
-          <Choice id="search-forum" label="In" name={fields.forum} options={forums} />
-          <Choice id="search-sort" label="Sort by" name={fields.sort} options={sorts} />
+          <Choice id="search-forum" label={c('inLabel')} name={fields.forum} options={forums} />
+          <Choice id="search-sort" label={c('sortByLabel')} name={fields.sort} options={sorts} />
         </div>
 
         {advanced !== undefined && <Advanced {...advanced} />}
 
         <div>
           <button type="submit" className={BUTTON_PRIMARY}>
-            search
+            {c('submit')}
           </button>
         </div>
       </form>

package/src/slots/search-results.tsx

@@ -1,4 +1,5 @@
-import type { OptionModel, SearchRefineModel, SearchResultsModel } from '@meith/theme-kit'
+import type { OptionModel, SearchRefineModel, SearchResultsModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { BUTTON_PRIMARY, Frame, HEADING, MICRO, RULE, Stamp } from '../shared'
 
@@ -15,7 +16,10 @@ export function SearchResults({
   within,
   refine,
   regions,
-}: SearchResultsModel) {
+  copy,
+}: SearchResultsModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.searchResults.${key}`)
+
   return (
     <main
       id="board-content"
@@ -24,34 +28,37 @@ export function SearchResults({
     >
       <div className="border border-border bg-card shadow-elevation">
         <div className="px-4 py-3">
-          <p className={MICRO}>search</p>
+          <p className={MICRO}>{c('kicker')}</p>
           <h1 className={`${HEADING} text-xl text-foreground`}>
-            Results for &ldquo;{terms}&rdquo;
+            {c('resultsForPrefix')}
+            {terms}
+            {c('resultsForSuffix')}
           </h1>
           <p className={`${MICRO} mt-1 normal-case`}>
-            <span className="uppercase">run</span> <Stamp at={searchedAt} />
+            <span className="uppercase">{c('run')}</span> <Stamp at={searchedAt} />
             <span className="text-border">{' | '}</span>
-            <span>checked against your access every time this page is opened</span>
+            <span>{c('accessNotice')}</span>
           </p>
         </div>
         <div className={RULE} aria-hidden="true" />
       </div>
 
-      {refine !== undefined && <Refine {...refine} />}
+      {refine !== undefined && <Refine {...refine} copy={copy} />}
 
       <Frame>
         {hits.length === 0 ? (
           <div className="px-4 py-6 text-center">
-            <p className={`${HEADING} text-sm text-foreground`}>Nothing matched</p>
-            <p className="mt-1 text-sm text-muted-foreground">
-              Or nothing you can see does. Try fewer words, or a different spelling.
-            </p>
+            <p className={`${HEADING} text-sm text-foreground`}>{c('nothingMatched')}</p>
+            <p className="mt-1 text-sm text-muted-foreground">{c('nothingMatchedHint')}</p>
           </div>
         ) : (
           <ul className="divide-y divide-border">
             {hits.map((hit) => (
               <li key={hit.postId} className="flex flex-col gap-1 px-4 py-3 hover:bg-secondary/50">
-                <a href={hit.href} className="text-sm font-medium text-foreground hover:text-primary">
+                <a
+                  href={hit.href}
+                  className="text-sm font-medium text-foreground hover:text-primary"
+                >
                   {hit.threadTitle}
                 </a>
                 <p
@@ -120,7 +127,7 @@ export function SearchResults({
 
       <p>
         <a href={newSearchHref} className={`${MICRO} hover:text-primary`}>
-          start a new search
+          {c('startNewSearch')}
         </a>
       </p>
     </main>
@@ -138,7 +145,10 @@ function Refine({
   submitLabel,
   applied,
   clearHref,
-}: SearchRefineModel) {
+  copy,
+}: SearchRefineModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.searchResults.${key}`)
+
   return (
     <section
       aria-label={label}
@@ -172,7 +182,7 @@ function Refine({
           >
             {chip.label}
             <span aria-hidden="true">×</span>
-            <span className="sr-only">— remove this filter</span>
+            <span className="sr-only">{c('removeFilter')}</span>
           </a>
         ))}
       </div>
@@ -192,7 +202,7 @@ function Refine({
 
         {clearHref !== null && (
           <a href={clearHref} className={`${MICRO} hover:text-primary`}>
-            clear filters
+            {c('clearFilters')}
           </a>
         )}
       </form>

package/src/slots/shell.tsx

@@ -1,4 +1,5 @@
-import type { ShellModel } from '@meith/theme-kit'
+import type { ShellModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 const APP_REGIONS = `
 [data-theme-raidframe] .font-heading:not([class*="tracking-"]) {
@@ -7,7 +8,9 @@ const APP_REGIONS = `
 }
 `
 
-export function Shell({ viewer, children }: ShellModel) {
+export function Shell({ viewer, children, copy }: ShellModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.shell.${key}`)
+
   return (
     <div
       className="relative min-h-dvh bg-background text-foreground"
@@ -29,7 +32,7 @@ export function Shell({ viewer, children }: ShellModel) {
         href="#board-content"
         className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:border focus:border-primary focus:bg-card focus:px-3 focus:py-2 focus:font-mono focus:text-xs focus:uppercase"
       >
-        Skip to content
+        {c('skipToContent')}
       </a>
 
       <div className="relative mx-auto flex min-h-dvh w-full max-w-6xl flex-col border-x border-border bg-background/80">

package/src/slots/subforum-list.tsx

@@ -1,16 +1,19 @@
-import type { SubforumListModel } from '@meith/theme-kit'
+import type { SlotCopy, SubforumListModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { MICRO, NUMERIC } 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, `raidframe.subforumList.${key}`)
+
   return (
     <nav
-      aria-label="Subforums"
+      aria-label={c('ariaLabel')}
       className="flex flex-wrap items-center gap-2 border border-border bg-card px-3 py-2"
     >
-      <span className={MICRO}>subforums</span>
+      <span className={MICRO}>{c('label')}</span>
       {forums.map((forum) => (
         <a
           key={forum.href}
@@ -18,7 +21,7 @@ export function SubforumList({ forums }: SubforumListModel) {
           className="inline-flex items-center gap-1.5 border border-border bg-surface px-2 py-0.5 font-mono text-[0.625rem] tracking-[0.1em] text-foreground uppercase hover:border-primary/60 hover:text-primary"
         >
           {forum.title}
-          <span className={`${NUMERIC} text-muted-foreground`}>{forum.threadCount}</span>
+          <span className={`${NUMERIC} text-muted-foreground`}>{forum.threadCount.label}</span>
         </a>
       ))}
     </nav>