@meith/theme-phasebook 0.6.0 → 0.8.0

package/src/slots/panel-nav.tsx

@@ -1,5 +1,6 @@
-import { Disclosure, cn } from '@meith/ui'
-import type { PanelNavItemModel, PanelNavModel } from '@meith/theme-kit'
+import type { PanelNavItemModel, PanelNavModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
+import { cn, Disclosure } from '@meith/ui'
 
 import { Chip } from '../shared'
 
@@ -10,14 +11,24 @@ const HERE = 'bg-primary/12 text-primary'
 const OPEN = 'text-foreground hover:bg-accent'
 const ELSEWHERE = 'text-muted-foreground hover:bg-accent hover:text-foreground'
 
-function Item({ item, className }: { item: PanelNavItemModel; className: string }) {
+function Item({
+  item,
+  className,
+  copy,
+}: {
+  item: PanelNavItemModel
+  className: string
+  copy: SlotCopy
+}) {
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.panelNav.${key}`)
+
   const body = (
     <>
       <span className="min-w-0 flex-1 truncate">{item.title}</span>
       {item.count !== null && (
         <Chip className="bg-primary/12 text-primary">
           {item.count > 99 ? '99+' : item.count}
-          <span className="sr-only"> waiting</span>
+          <span className="sr-only"> {c('waiting')}</span>
         </Chip>
       )}
     </>
@@ -44,7 +55,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">
@@ -56,6 +71,7 @@ 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 && (
@@ -68,6 +84,7 @@ function Sections({ label, sections }: Pick<PanelNavModel, 'label' | 'sections'>
                         'text-[0.8125rem]',
                         child.current === 'here' ? HERE : ELSEWHERE,
                       )}
+                      copy={copy}
                     />
                   </li>
                 ))}
@@ -80,7 +97,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 (
     <>
       <Disclosure
@@ -89,11 +111,11 @@ export function PanelNav({ label, sections, currentTitle }: PanelNavModel) {
         contentClassName="p-2"
         {...(currentTitle === null ? {} : { aside: currentTitle })}
       >
-        <Sections label={label} sections={sections} />
+        <Sections label={label} sections={sections} copy={copy} />
       </Disclosure>
 
       <div className="hidden rounded-lg border border-border bg-card p-2 shadow-elevation lg:block">
-        <Sections label={label} sections={sections} />
+        <Sections label={label} sections={sections} copy={copy} />
       </div>
     </>
   )

package/src/slots/panel-page.tsx

@@ -1,5 +1,5 @@
-import { cn } from '@meith/ui'
 import type { PanelPageModel, PanelSectionModel } from '@meith/theme-kit'
+import { cn } from '@meith/ui'
 
 import { MUTED_LINK } from '../shared'
 
@@ -29,9 +29,7 @@ export function PanelPage({ title, back, frame, width, gap, regions, children }:
               </a>
             )}
 
-            <h1 className="text-xl leading-tight font-bold tracking-tight text-balance">
-              {title}
-            </h1>
+            <h1 className="text-xl leading-tight font-bold tracking-tight text-balance">{title}</h1>
 
             {regions.lede !== undefined && (
               <p className="text-sm text-muted-foreground">{regions.lede}</p>
@@ -57,10 +55,7 @@ export function PanelSection({ title, headingId, regions, children }: PanelSecti
     <section aria-labelledby={headingId} className="flex flex-col gap-3">
       <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-1 px-1">
         <div className="flex min-w-0 flex-col gap-0.5">
-          <h2
-            id={headingId}
-            className="text-[0.9375rem] font-semibold text-muted-foreground"
-          >
+          <h2 id={headingId} className="text-[0.9375rem] font-semibold text-muted-foreground">
             {title}
           </h2>
           {regions.description !== undefined && (

package/src/slots/post-actions.tsx

@@ -1,4 +1,5 @@
-import type { PostActionsSlotModel } from '@meith/theme-kit'
+import type { PostActionsSlotModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 interface Action {
   readonly href: string
@@ -9,24 +10,30 @@ const ACTION =
   'inline-flex h-8 flex-1 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-semibold ' +
   'text-muted-foreground transition-colors hover:bg-accent hover:text-foreground'
 
-export function PostActions({ actions, children }: PostActionsSlotModel) {
+export function PostActions({
+  actions,
+  children,
+  copy,
+}: PostActionsSlotModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.postActions.${key}`)
+
   const reader: Action[] = [
-    actions.quoteHref === null ? null : { href: actions.quoteHref, label: 'Quote' },
-    actions.editHref === null ? null : { href: actions.editHref, label: 'Edit' },
-    actions.rateHref === null ? null : { href: actions.rateHref, label: 'Rate' },
-    actions.reportHref === null ? null : { href: actions.reportHref, label: 'Report' },
+    actions.quoteHref === null ? null : { href: actions.quoteHref, label: c('quote') },
+    actions.editHref === null ? null : { href: actions.editHref, label: c('edit') },
+    actions.rateHref === null ? null : { href: actions.rateHref, label: c('rate') },
+    actions.reportHref === null ? null : { href: actions.reportHref, label: c('report') },
   ].filter((action): action is Action => action !== null)
 
   const staff: Action[] = [
-    actions.restoreHref === null ? null : { href: actions.restoreHref, label: 'Restore' },
-    actions.warnHref === null ? null : { href: actions.warnHref, label: 'Warn' },
-    actions.moderateHref === null ? null : { href: actions.moderateHref, label: 'Moderate' },
+    actions.restoreHref === null ? null : { href: actions.restoreHref, label: c('restore') },
+    actions.warnHref === null ? null : { href: actions.warnHref, label: c('warn') },
+    actions.moderateHref === null ? null : { href: actions.moderateHref, label: c('moderate') },
   ].filter((action): action is Action => action !== null)
 
   if (reader.length === 0 && staff.length === 0 && children === undefined) return null
 
   return (
-    <nav aria-label="Post actions" className="flex flex-wrap items-center gap-1">
+    <nav aria-label={c('ariaLabel')} className="flex flex-wrap items-center gap-1">
       {reader.map((action) => (
         <a key={action.href} href={action.href} className={ACTION}>
           {action.label}

package/src/slots/post-bit.tsx

@@ -1,17 +1,18 @@
+import type { PostBitSlotModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { cn } from '@meith/ui'
-import type { PostBitSlotModel } from '@meith/theme-kit'
 
 import {
   Circle,
+  count,
   LINK,
   MUTED_LINK,
   NUMERIC,
   OnlineDot,
+  plural,
   Stamp,
   Tag,
   UserRef,
-  count,
-  plural,
 } from '../shared'
 
 type Post = PostBitSlotModel['post']
@@ -22,10 +23,11 @@ const VISIBILITY_TINT = {
   deleted: 'border-thread-deleted/50 bg-destructive/5',
 } as const
 
-function StatusBanner({ visibility }: { visibility: Post['visibility'] }) {
+function StatusBanner({ visibility, copy }: { visibility: Post['visibility']; copy: SlotCopy }) {
   if (visibility === 'visible') return null
 
   const deleted = visibility === 'deleted'
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.postBit.${key}`)
 
   return (
     <p
@@ -36,8 +38,8 @@ function StatusBanner({ visibility }: { visibility: Post['visibility'] }) {
           : 'border-thread-unapproved/30 text-thread-unapproved',
       )}
     >
-      {deleted ? 'Deleted post.' : 'Waiting for approval.'}
-      <span className="font-normal text-muted-foreground">Only moderators can see this.</span>
+      {deleted ? c('deletedPost') : c('waitingApproval')}
+      <span className="font-normal text-muted-foreground">{c('moderatorsOnly')}</span>
     </p>
   )
 }
@@ -114,8 +116,9 @@ function Attachments({ files }: { files: Post['attachments'] }) {
   )
 }
 
-export function PostBit({ post, select, regions }: PostBitSlotModel) {
+export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { copy: SlotCopy }) {
   const { author } = post
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.postBit.${key}`)
 
   return (
     <article
@@ -127,7 +130,7 @@ export function PostBit({ post, select, regions }: PostBitSlotModel) {
         VISIBILITY_TINT[post.visibility],
       )}
     >
-      <StatusBanner visibility={post.visibility} />
+      <StatusBanner visibility={post.visibility} copy={copy} />
 
       <header className="flex items-start gap-3.5 px-5 pt-4">
         {select !== null && (
@@ -164,7 +167,7 @@ export function PostBit({ post, select, regions }: PostBitSlotModel) {
             {author.isOnline && (
               <>
                 <span aria-hidden="true">·</span>
-                <span className="text-moderation-approved">Online</span>
+                <span className="text-moderation-approved">{c('online')}</span>
               </>
             )}
           </p>
@@ -176,12 +179,14 @@ export function PostBit({ post, select, regions }: PostBitSlotModel) {
           )}
         </div>
 
-        <p className={`shrink-0 text-right text-xs leading-relaxed text-muted-foreground ${NUMERIC}`}>
-          {count(author.postCount)} {plural(author.postCount, 'post', 'posts')}
+        <p
+          className={`shrink-0 text-right text-xs leading-relaxed text-muted-foreground ${NUMERIC}`}
+        >
+          {count(author.postCount)} {plural(author.postCount, c('post.one'), c('post.other'))}
           {author.reputation != null && (
             <>
               <br />
-              {count(author.reputation)} rep
+              {count(author.reputation)} {c('rep')}
             </>
           )}
         </p>
@@ -189,11 +194,11 @@ export function PostBit({ post, select, regions }: PostBitSlotModel) {
 
       {post.ignored !== null ? (
         <p className="px-5 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('hiddenNote')}{' '}
           <a href={post.ignored.revealHref} className={LINK}>
-            Show it anyway
+            {c('showAnyway')}
           </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 { FEED, PAGE, PILL } from '../shared'
 
@@ -8,7 +9,10 @@ export function PostForm({
   cancelLabel,
   errorMessage,
   regions,
-}: PostFormModel) {
+  copy,
+}: PostFormModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.postForm.${key}`)
+
   return (
     <div className={`${PAGE} py-4 sm:py-6`}>
       <div className={`${FEED} flex flex-col gap-4`}>
@@ -17,7 +21,7 @@ export function PostForm({
             role="alert"
             className="rounded-lg border border-destructive/30 bg-destructive/8 px-4 py-3 text-sm shadow-elevation"
           >
-            <span className="font-semibold">Cannot post.</span> {errorMessage}
+            <span className="font-semibold">{c('cannotPost')}</span> {errorMessage}
           </p>
         )}
 

package/src/slots/redirect-notice.tsx

@@ -1,21 +1,30 @@
-import type { RedirectNoticeModel } from '@meith/theme-kit'
+import type { RedirectNoticeModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { NUMERIC, PILL_PRIMARY } 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, `phasebook.redirectNotice.${key}`)
+
   return (
     <section className="w-full max-w-lg rounded-lg border border-border bg-card text-card-foreground shadow-elevation">
       <div className="px-5 py-6">
-        <p className="text-xs font-semibold text-muted-foreground">Redirecting</p>
-        <h1 className="mt-1 text-2xl leading-tight font-bold tracking-tight">Please wait</h1>
+        <p className="text-xs font-semibold text-muted-foreground">{c('redirecting')}</p>
+        <h1 className="mt-1 text-2xl leading-tight font-bold tracking-tight">{c('pleaseWait')}</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={PILL_PRIMARY}>
-            Continue now
+            {c('continueNow')}
           </a>
           <span className={`text-xs text-muted-foreground ${NUMERIC}`}>
-            Continuing on its own in {delaySeconds} {delaySeconds === 1 ? 'second' : 'seconds'}.
+            {c('continuing')} {delaySeconds}{' '}
+            {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 { PILL_PRIMARY } from '../shared'
 
@@ -102,17 +103,23 @@ export function SearchForm({
   hint,
   errorMessage,
   advanced,
-}: SearchFormModel) {
-  const described = [hint === null ? null : 'search-hint', errorMessage === null ? null : 'search-error']
+  copy,
+}: SearchFormModel & { copy: SlotCopy }) {
+  const described = [
+    hint === null ? null : 'search-hint',
+    errorMessage === null ? null : 'search-error',
+  ]
     .filter((id): id is string => id !== null)
     .join(' ')
 
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.searchForm.${key}`)
+
   return (
     <section className="rounded-lg border border-border bg-card text-card-foreground shadow-elevation">
       <form method="get" action={action} className="flex flex-col gap-4 px-4 py-4">
         <div>
           <label htmlFor="search-query" className={LABEL}>
-            Search for
+            {c('searchFor')}
           </label>
           <input
             id="search-query"
@@ -121,7 +128,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="w-full rounded-full border border-input bg-surface px-4 py-2.5 text-sm text-foreground transition-colors focus-visible:border-ring"
@@ -141,15 +148,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('in')} name={fields.forum} options={forums} />
+          <Choice id="search-sort" label={c('sortBy')} name={fields.sort} options={sorts} />
         </div>
 
         {advanced !== undefined && <Advanced {...advanced} />}
 
         <div>
           <button type="submit" className={PILL_PRIMARY}>
-            Search
+            {c('search')}
           </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 { FEED, LINK, PAGE, PILL, PILL_PRIMARY, Stamp } from '../shared'
 
@@ -12,26 +13,27 @@ export function SearchResults({
   within,
   refine,
   regions,
-}: SearchResultsModel) {
+  copy,
+}: SearchResultsModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.searchResults.${key}`)
+
   return (
     <main id="board-content" tabIndex={-1} className={`${PAGE} flex-1 py-4 sm:py-6`}>
       <div className={`${FEED} flex flex-col gap-4`}>
         <header className="rounded-lg border border-border bg-card px-4 py-3.5 shadow-elevation">
           <h1 className="text-xl leading-tight font-bold tracking-tight text-balance">
-            Results for &ldquo;{terms}&rdquo;
+            {c('resultsFor')} “{terms}”
           </h1>
           <p className="mt-1 text-sm text-muted-foreground">
-            Searched <Stamp at={searchedAt} />. Results are checked against your access
-            every time this page is opened, so they can change.
+            {c('searched')} <Stamp at={searchedAt} />. {c('searchedNote')}
           </p>
         </header>
 
-        {refine !== undefined && <Refine {...refine} />}
+        {refine !== undefined && <Refine {...refine} copy={copy} />}
 
         {hits.length === 0 ? (
           <p className="rounded-lg border border-border bg-card px-4 py-6 text-center text-sm text-muted-foreground shadow-elevation">
-            Nothing matched — or nothing you can see does. Try fewer words, or a different
-            spelling.
+            {c('noHits')}
           </p>
         ) : (
           <ul className="flex flex-col gap-3">
@@ -63,11 +65,7 @@ export function SearchResults({
           ))}
 
         <section className="rounded-lg border border-border bg-card shadow-elevation">
-          <form
-            method="get"
-            action={within.action}
-            className="flex flex-col gap-3 px-4 py-4"
-          >
+          <form method="get" action={within.action} className="flex flex-col gap-3 px-4 py-4">
             {(within.hidden ?? []).map((field) => (
               <input
                 key={`${field.name}-${field.value}`}
@@ -107,7 +105,7 @@ export function SearchResults({
         </section>
 
         <a href={newSearchHref} className={`text-sm font-semibold ${LINK}`}>
-          Start a new search
+          {c('newSearch')}
         </a>
       </div>
     </main>
@@ -125,7 +123,10 @@ function Refine({
   submitLabel,
   applied,
   clearHref,
-}: SearchRefineModel) {
+  copy,
+}: SearchRefineModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.searchResults.${key}`)
+
   return (
     <section
       aria-label={label}
@@ -162,7 +163,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>
@@ -182,7 +183,7 @@ function Refine({
 
         {clearHref !== null && (
           <a href={clearHref} className={`text-xs font-semibold ${LINK}`}>
-            Clear filters
+            {c('clearFilters')}
           </a>
         )}
       </form>

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-3 focus-visible:left-3 focus-visible:z-50 focus-visible:inline-flex focus-visible:h-9 focus-visible:items-center focus-visible:rounded-full focus-visible:bg-primary focus-visible:px-4 focus-visible:text-sm focus-visible:font-semibold focus-visible:text-primary-foreground focus-visible:shadow-elevation"
       >
-        Skip to content
+        {fromSlotCopy(copy, 'phasebook.shell.skipToContent')}
       </a>
       {children}
     </div>

package/src/slots/subforum-list.tsx

@@ -1,10 +1,13 @@
-import type { SubforumListModel } from '@meith/theme-kit'
+import type { SlotCopy, SubforumListModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
-import { NUMERIC, count, plural } from '../shared'
+import { count, NUMERIC, plural } 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, `phasebook.subforumList.${key}`)
+
   return (
     <section
       aria-labelledby="subforums-heading"
@@ -14,7 +17,7 @@ export function SubforumList({ forums }: SubforumListModel) {
         id="subforums-heading"
         className="px-4 pt-3 pb-1 text-[0.9375rem] font-semibold text-muted-foreground"
       >
-        Subforums
+        {c('title')}
       </h2>
 
       <ul className="flex flex-wrap gap-2 px-4 pt-1 pb-3">
@@ -27,7 +30,8 @@ export function SubforumList({ forums }: SubforumListModel) {
               {forum.title}
               {forum.type !== 'link' && (
                 <span className={`text-xs font-medium text-muted-foreground ${NUMERIC}`}>
-                  {count(forum.threadCount)} {plural(forum.threadCount, 'thread', 'threads')}
+                  {count(forum.threadCount)}{' '}
+                  {plural(forum.threadCount, c('thread.one'), c('thread.other'))}
                 </span>
               )}
             </a>

package/src/slots/thread-row.tsx

@@ -1,8 +1,11 @@
-import type { ThreadRowSlotModel } from '@meith/theme-kit'
+import type { SlotCopy, ThreadRowSlotModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
-import { Circle, MUTED_LINK, NUMERIC, Prefix, Stamp, Tag, UserRef, count, plural } from '../shared'
+import { Circle, count, MUTED_LINK, NUMERIC, Prefix, plural, Stamp, Tag, UserRef } from '../shared'
+
+export function ThreadRow({ thread, select, copy }: ThreadRowSlotModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.threadRow.${key}`)
 
-export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
   return (
     <li
       data-unread={thread.isUnread ? '' : undefined}
@@ -35,9 +38,9 @@ export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
         <div className="min-w-0 flex-1">
           <div className="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</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>}
           </div>
 
           <a
@@ -46,29 +49,29 @@ 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>}
 
           <p className="mt-0.5 text-xs text-muted-foreground">
-            Started by <UserRef user={thread.author} className="text-xs font-medium" />
+            {c('startedBy')} <UserRef user={thread.author} className="text-xs font-medium" />
           </p>
         </div>
       </div>
 
       <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 border-t border-border px-4 py-2 text-xs text-muted-foreground">
         <span className={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>
 
         <span className="min-w-0 truncate">
           {thread.lastPost === null ? (
-            <span className="text-thread-moved">No replies yet</span>
+            <span className="text-thread-moved">{c('noRepliesYet')}</span>
           ) : (
             <>
               <a href={thread.lastPost.href} className={`font-semibold ${MUTED_LINK}`}>
-                Latest reply
+                {c('latestReply')}
               </a>
-              {' by '}
+              {` ${c('by')} `}
               <UserRef user={thread.lastPost.author} className="text-xs font-medium" />
               {' · '}
               <Stamp at={thread.lastPost.at} />