@meith/theme-default 0.7.0 → 0.9.0

package/src/slots/board-index.tsx

@@ -1,12 +1,19 @@
+import type { BoardIndexModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { buttonVariants } from '@meith/ui'
-import type { BoardIndexModel } from '@meith/theme-kit'
 
 import { PAGE_BODY } from '../shared'
 
-export function BoardIndex({ markAllReadAction, regions }: BoardIndexModel) {
+export function BoardIndex({
+  markAllReadAction,
+  regions,
+  copy,
+}: BoardIndexModel & { copy: SlotCopy }) {
   const rail = (regions.latest ?? null) !== null
   const footer = regions.stats !== null || regions.online !== null
 
+  const c = (key: string) => fromSlotCopy(copy, `default.boardIndex.${key}`)
+
   return (
     <div className={PAGE_BODY}>
       {regions.announcements !== undefined && (
@@ -16,7 +23,7 @@ export function BoardIndex({ markAllReadAction, regions }: BoardIndexModel) {
       {markAllReadAction !== null && (
         <form action={markAllReadAction} method="post" className="self-end">
           <button type="submit" className={buttonVariants({ variant: 'ghost', size: 'sm' })}>
-            Mark all forums read
+            {c('markAllRead')}
           </button>
         </form>
       )}
@@ -31,7 +38,7 @@ export function BoardIndex({ markAllReadAction, regions }: BoardIndexModel) {
         <div className="flex min-w-0 flex-col gap-4">{regions.categories}</div>
 
         {rail && (
-          <aside aria-label="Board activity" className="flex min-w-0 flex-col gap-4">
+          <aside aria-label={c('boardActivity')} className="flex min-w-0 flex-col gap-4">
             {regions.latest}
           </aside>
         )}

package/src/slots/board-stats.tsx

@@ -1,4 +1,5 @@
-import type { BoardStatsModel } from '@meith/theme-kit'
+import type { BoardStatsModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { NUMERIC, Stamp, UserRef } from '../shared'
 
@@ -8,41 +9,42 @@ export function BoardStats({
   memberCount,
   newestMember,
   computedAt,
-}: BoardStatsModel) {
+  copy,
+}: BoardStatsModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.boardStats.${key}`)
+
   return (
     <section
       aria-labelledby="board-stats-heading"
       className="flex flex-wrap items-baseline gap-x-3 gap-y-1"
     >
       <h2 id="board-stats-heading" className="sr-only">
-        Board statistics
+        {c('heading')}
       </h2>
 
       {computedAt === null ? (
-        <span>The board&rsquo;s totals are rolled up on a schedule, and the first run has not happened.</span>
+        <span>{c('notComputed')}</span>
       ) : (
         <>
           {[
-            { label: 'threads', value: threadCount },
-            { label: 'posts', value: postCount },
-            { label: 'members', value: memberCount },
+            { label: c('threads'), value: threadCount },
+            { label: c('posts'), value: postCount },
+            { label: c('members'), value: memberCount },
           ].map((figure) => (
             <span key={figure.label}>
-              <span className={`font-medium text-foreground ${NUMERIC}`}>
-                {figure.value.toLocaleString('en')}
-              </span>{' '}
+              <span className={`font-medium text-foreground ${NUMERIC}`}>{figure.value.label}</span>{' '}
               {figure.label}
             </span>
           ))}
 
           {newestMember !== null && (
             <span>
-              newest member <UserRef user={newestMember} className="text-foreground" />
+              {c('newestMember')} <UserRef user={newestMember} className="text-foreground" />
             </span>
           )}
 
           <span className={`ms-auto ${NUMERIC}`}>
-            Counted <Stamp at={computedAt} />
+            {c('counted')} <Stamp at={computedAt} />
           </span>
         </>
       )}

package/src/slots/category-block.tsx

@@ -1,5 +1,5 @@
-import { Card, CardDescription, CardHeader, CardRows, CardTitle } from '@meith/ui'
 import type { CategoryBlockModel } from '@meith/theme-kit'
+import { Card, CardDescription, CardHeader, CardRows, CardTitle } from '@meith/ui'
 
 import { LINK } from '../shared'
 

package/src/slots/discovery-view.tsx

@@ -1,7 +1,8 @@
-import { Card, CardRows, Empty, EmptyDescription, cn } from '@meith/ui'
-import type { DiscoveryViewModel, TabModel } from '@meith/theme-kit'
+import type { DiscoveryViewModel, SlotCopy, TabModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
+import { Card, CardRows, cn, Empty, EmptyDescription } from '@meith/ui'
 
-import { LINK, NUMERIC, Stamp, pageAt } from '../shared'
+import { LINK, NUMERIC, pageAt, Stamp } from '../shared'
 
 const TAB =
   'inline-flex h-9 items-center rounded-full px-3.5 text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
@@ -43,7 +44,10 @@ export function DiscoveryView({
   nextLabel,
   emptyMessage,
   refusal,
-}: DiscoveryViewModel) {
+  copy,
+}: DiscoveryViewModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.discoveryView.${key}`)
+
   return (
     <main
       id="board-content"
@@ -58,10 +62,7 @@ export function DiscoveryView({
       <Tabs label={tabsLabel} tabs={tabs} />
 
       {refusal !== null ? (
-        <p
-          role="alert"
-          className="rounded-md border border-border bg-muted px-3 py-2 text-sm"
-        >
+        <p role="alert" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
           {refusal.message}{' '}
           <a href={refusal.signInHref} className={`font-medium text-foreground ${LINK}`}>
             {refusal.signInLabel}
@@ -89,22 +90,22 @@ export function DiscoveryView({
                     {row.title}
                   </a>
                   <p className="truncate text-xs text-muted-foreground">
-                    in{' '}
+                    {c('in')}{' '}
                     <a href={row.forum.href} className="font-medium hover:underline">
                       {row.forum.label}
                     </a>{' '}
-                    · started by {row.authorUsername}
+                    {c('dot')} {c('startedBy')} {row.authorUsername}
                   </p>
                 </div>
 
                 <p className="shrink-0 text-xs text-muted-foreground sm:text-right">
                   <span className={cn('font-semibold text-foreground', NUMERIC)}>
-                    {row.replyCount}
+                    {row.replyCount.label}
                   </span>{' '}
-                  {row.replyCount === 1 ? 'reply' : 'replies'}
+                  {row.replyCount.value === 1 ? c('reply.one') : c('reply.other')}
                   <span className="block">
-                    last post <Stamp at={row.lastPostAt} />
-                    {row.lastPostUsername === null ? null : ` by ${row.lastPostUsername}`}
+                    {c('lastPost')} <Stamp at={row.lastPostAt} />
+                    {row.lastPostUsername === null ? null : ` ${c('by')} ${row.lastPostUsername}`}
                   </span>
                 </p>
               </li>
@@ -118,7 +119,7 @@ export function DiscoveryView({
           href={nextHref}
           className="inline-flex h-9 w-fit items-center rounded-full bg-secondary px-4 text-sm font-semibold text-secondary-foreground transition-colors hover:bg-accent"
         >
-          {nextLabel} →
+          {nextLabel} {c('nextArrow')}
         </a>
       )}
     </main>

package/src/slots/error-notice.tsx

@@ -1,29 +1,37 @@
-import { Card, CardContent, CardFooter, buttonVariants } from '@meith/ui'
-import type { ErrorNoticeModel } from '@meith/theme-kit'
+import type { ErrorNoticeModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
+import { buttonVariants, Card, CardContent, CardFooter } from '@meith/ui'
 
 import { NUMERIC } from '../shared'
 
-export function ErrorNotice({ status, title, message, homeHref, requestId }: ErrorNoticeModel) {
+export function ErrorNotice({
+  status,
+  title,
+  message,
+  homeHref,
+  requestId,
+  copy,
+}: ErrorNoticeModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.errorNotice.${key}`)
+
   return (
     <Card className="w-full max-w-lg">
       <CardContent className="p-6">
         <p className={`text-xs font-medium tracking-wide text-destructive uppercase ${NUMERIC}`}>
-          Error {status}
+          {c('error')} {status}
         </p>
-        <h1 className="mt-1 text-2xl font-semibold tracking-tight text-balance">
-          {title}
-        </h1>
+        <h1 className="mt-1 text-2xl font-semibold tracking-tight text-balance">{title}</h1>
         <p className="mt-2 text-sm text-muted-foreground">{message}</p>
 
         <a href={homeHref} className={`mt-5 ${buttonVariants({ variant: 'primary' })}`}>
-          Forum home
+          {c('forumHome')}
         </a>
       </CardContent>
 
       {requestId !== null && (
         <CardFooter>
           <span>
-            Quote this if you report it:{' '}
+            {c('quoteThis')}{' '}
             <code className="font-mono text-foreground select-all">{requestId}</code>
           </span>
         </CardFooter>

package/src/slots/footer.tsx

@@ -1,8 +1,17 @@
-import type { FooterModel } from '@meith/theme-kit'
+import type { FooterModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { MUTED_LINK, PAGE } from '../shared'
 
-export function Footer({ boardTitle, links, timezoneLabel, poweredBy }: FooterModel) {
+export function Footer({
+  boardTitle,
+  links,
+  timezoneLabel,
+  poweredBy,
+  copy,
+}: FooterModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.footer.${key}`)
+
   return (
     <footer className="mt-auto border-t border-border bg-card">
       <div
@@ -11,7 +20,7 @@ export function Footer({ boardTitle, links, timezoneLabel, poweredBy }: FooterMo
         <span className="font-medium text-foreground">{boardTitle}</span>
 
         {links.length > 0 && (
-          <nav aria-label="Footer" className="flex flex-wrap gap-x-4 gap-y-1">
+          <nav aria-label={c('nav')} className="flex flex-wrap gap-x-4 gap-y-1">
             {links.map((link) => (
               <a key={link.href} href={link.href} className={MUTED_LINK}>
                 {link.label}
@@ -21,7 +30,9 @@ export function Footer({ boardTitle, links, timezoneLabel, poweredBy }: FooterMo
         )}
 
         <span className="flex flex-wrap items-center gap-x-3 gap-y-1 sm:justify-end sm:text-right">
-          <span>Times are shown in {timezoneLabel}</span>
+          <span>
+            {c('timesShownIn')} {timezoneLabel}
+          </span>
           {poweredBy && (
             <a href={poweredBy.href} className={MUTED_LINK}>
               {poweredBy.label}

package/src/slots/forum-display.tsx

@@ -1,24 +1,31 @@
+import type { ForumDisplayModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import {
+  buttonVariants,
   Card,
   CardRows,
   Empty,
   EmptyAction,
   EmptyDescription,
   EmptyTitle,
-  buttonVariants,
 } from '@meith/ui'
-import type { ForumDisplayModel } from '@meith/theme-kit'
 
-import { Counts, PAGE_BODY, isEmptyRegion } from '../shared'
+import { Counts, isEmptyRegion, PAGE_BODY } from '../shared'
+
+export function ForumDisplay({
+  forum,
+  newThreadHref,
+  markReadAction,
+  regions,
+  copy,
+}: ForumDisplayModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.forumDisplay.${key}`)
 
-export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }: ForumDisplayModel) {
   return (
     <div className={PAGE_BODY}>
       <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
         <div className="min-w-0">
-          <h1 className="text-2xl font-semibold tracking-tight text-balance">
-            {forum.title}
-          </h1>
+          <h1 className="text-2xl font-semibold tracking-tight text-balance">{forum.title}</h1>
           {forum.description !== null && (
             <p className="mt-1 max-w-prose text-sm text-muted-foreground">{forum.description}</p>
           )}
@@ -27,16 +34,16 @@ export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }:
               className="mt-2"
               items={[
                 {
-                  label: 'Threads',
+                  label: c('threadsLabel'),
                   value: forum.threadCount,
-                  one: 'thread',
-                  many: 'threads',
+                  one: c('thread.one'),
+                  many: c('thread.other'),
                 },
                 {
-                  label: 'Posts',
+                  label: c('postsLabel'),
                   value: forum.postCount,
-                  one: 'post',
-                  many: 'posts',
+                  one: c('post.one'),
+                  many: c('post.other'),
                 },
               ]}
             />
@@ -47,13 +54,13 @@ export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }:
           {markReadAction !== null && (
             <form action={markReadAction} method="post">
               <button type="submit" className={buttonVariants({ variant: 'ghost' })}>
-                Mark read
+                {c('markRead')}
               </button>
             </form>
           )}
           {newThreadHref !== null && (
             <a href={newThreadHref} className={buttonVariants({ variant: 'primary' })}>
-              New thread
+              {c('newThread')}
             </a>
           )}
         </div>
@@ -72,16 +79,14 @@ export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }:
       <Card>
         {isEmptyRegion(regions.threads) ? (
           <Empty>
-            <EmptyTitle>No threads here yet</EmptyTitle>
+            <EmptyTitle>{c('noThreadsYet')}</EmptyTitle>
             <EmptyDescription>
-              {newThreadHref === null
-                ? 'Nothing has been posted in this forum.'
-                : 'Nothing has been posted in this forum. Yours would be the first.'}
+              {newThreadHref === null ? c('emptyNoThread') : c('emptyNoThreadFirst')}
             </EmptyDescription>
             {newThreadHref !== null && (
               <EmptyAction>
                 <a href={newThreadHref} className={buttonVariants({ variant: 'primary' })}>
-                  Start the first thread
+                  {c('startFirstThread')}
                 </a>
               </EmptyAction>
             )}

package/src/slots/forum-jump.tsx

@@ -1,5 +1,5 @@
-import { Label, NativeSelect, buttonVariants } from '@meith/ui'
 import type { ForumJumpModel } from '@meith/theme-kit'
+import { buttonVariants, Label, NativeSelect } from '@meith/ui'
 
 import { PAGE } from '../shared'
 

package/src/slots/forum-row.tsx

@@ -1,10 +1,13 @@
-import type { ForumRowSlotModel } from '@meith/theme-kit'
+import type { ForumRowSlotModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { Counts, LINK, MUTED_LINK, ReadSpacer, Stamp, UnreadDot, UserRef } from '../shared'
 
-export function ForumRow({ forum }: ForumRowSlotModel) {
+export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }) {
   const isLink = forum.type === 'link'
 
+  const c = (key: string) => fromSlotCopy(copy, `default.forumRow.${key}`)
+
   return (
     <li
       data-unread={forum.isUnread ? '' : undefined}
@@ -25,7 +28,7 @@ export function ForumRow({ forum }: ForumRowSlotModel) {
         >
           {forum.title}
         </a>
-        {forum.isUnread && <span className="sr-only"> (new posts)</span>}
+        {forum.isUnread && <span className="sr-only"> {c('newPosts')}</span>}
 
         {forum.description !== null && (
           <p className="mt-0.5 text-sm text-muted-foreground">{forum.description}</p>
@@ -33,7 +36,7 @@ export function ForumRow({ forum }: ForumRowSlotModel) {
 
         {forum.subforums.length > 0 && (
           <p className="mt-1.5 flex flex-wrap items-baseline gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
-            <span className="font-medium text-foreground">Subforums</span>
+            <span className="font-medium text-foreground">{c('subforums')}</span>
             {forum.subforums.map((sub) => (
               <a key={sub.href} href={sub.href} className={MUTED_LINK}>
                 {sub.label}
@@ -49,23 +52,23 @@ export function ForumRow({ forum }: ForumRowSlotModel) {
             className="col-start-2 md:col-start-3 md:justify-end"
             items={[
               {
-                label: 'Threads',
+                label: c('threadsLabel'),
                 value: forum.threadCount,
-                one: 'thread',
-                many: 'threads',
+                one: c('thread.one'),
+                many: c('thread.other'),
               },
               {
-                label: 'Posts',
+                label: c('postsLabel'),
                 value: forum.postCount,
-                one: 'post',
-                many: 'posts',
+                one: c('post.one'),
+                many: c('post.other'),
               },
             ]}
           />
 
           <div className="col-start-2 min-w-0 text-xs text-muted-foreground md:col-start-4">
             {forum.lastPost === null ? (
-              <span className="text-forum-read">No posts yet</span>
+              <span className="text-forum-read">{c('noPostsYet')}</span>
             ) : (
               <>
                 <a
@@ -75,10 +78,8 @@ export function ForumRow({ forum }: ForumRowSlotModel) {
                   {forum.lastPost.threadTitle}
                 </a>
                 <span className="mt-0.5 block truncate">
-                  {'by '}
-                  <UserRef user={forum.lastPost.author} className="font-normal" />
-                  {' · '}
-                  <Stamp at={forum.lastPost.at} />
+                  {c('by')} <UserRef user={forum.lastPost.author} className="font-normal" />{' '}
+                  {c('dot')} <Stamp at={forum.lastPost.at} />
                 </span>
               </>
             )}

package/src/slots/header.tsx

@@ -1,4 +1,5 @@
-import type { HeaderModel } from '@meith/theme-kit'
+import type { HeaderModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy, linkTarget } from '@meith/theme-kit'
 
 import { LINK, PAGE } from '../shared'
 
@@ -24,7 +25,38 @@ function BoardMark({ boardTitle, logo }: Pick<HeaderModel, 'boardTitle' | 'logo'
   )
 }
 
-export function Header({ boardTitle, homeHref, navigation, logo, children }: HeaderModel) {
+function Submenu({ items }: { items: HeaderModel['navigation'][number]['submenu'] }) {
+  if (items === undefined || items.length === 0) return null
+
+  return (
+    <ul className="invisible absolute top-full left-0 z-30 min-w-44 rounded-b-md border border-border bg-card py-1 opacity-0 shadow-elevation transition-opacity group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100">
+      {items.map((child) => (
+        <li key={child.href}>
+          <a
+            href={child.href}
+            {...linkTarget(child)}
+            className="block px-3 py-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+          >
+            {child.label}
+          </a>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export function Header({
+  boardTitle,
+  homeHref,
+  navigation,
+  logo,
+  children,
+  copy,
+}: HeaderModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.header.${key}`)
+
+  const opensMenus = navigation.some((item) => item.submenu !== undefined)
+
   return (
     <header className="border-b border-border bg-card">
       <div className={`${PAGE} flex flex-wrap items-center justify-between gap-x-6 gap-y-3 py-3`}>
@@ -38,17 +70,25 @@ export function Header({ boardTitle, homeHref, navigation, logo, children }: Hea
       </div>
 
       {navigation.length > 0 && (
-        <nav aria-label="Board sections" className="border-t border-border bg-surface">
+        <nav aria-label={c('sections')} className="border-t border-border bg-surface">
           <div className={PAGE}>
-            <ul className="-mx-4 flex items-stretch gap-1 overflow-x-auto px-4 text-sm [mask-image:linear-gradient(to_right,black_calc(100%-1.5rem),transparent)] sm:-mx-6 sm:px-6 sm:[mask-image:none]">
+            <ul
+              className={`-mx-4 flex items-stretch gap-1 px-4 text-sm sm:-mx-6 sm:px-6 ${
+                opensMenus
+                  ? 'flex-wrap'
+                  : 'overflow-x-auto [mask-image:linear-gradient(to_right,black_calc(100%-1.5rem),transparent)] sm:[mask-image:none]'
+              }`}
+            >
               {navigation.map((item) => (
-                <li key={item.href} className="shrink-0">
+                <li key={item.href} className="group relative shrink-0">
                   <a
                     href={item.href}
+                    {...linkTarget(item)}
                     className="inline-flex h-10 items-center rounded-t-md border-b-2 border-transparent px-2.5 font-medium text-muted-foreground transition-colors hover:border-border hover:text-foreground"
                   >
                     {item.label}
                   </a>
+                  <Submenu items={item.submenu} />
                 </li>
               ))}
             </ul>

package/src/slots/latest-posts.tsx

@@ -1,22 +1,33 @@
-import { Card, CardContent, CardHeader, CardTitle, Empty, EmptyDescription, EmptyTitle } from '@meith/ui'
-import type { LatestPostsModel } from '@meith/theme-kit'
+import type { LatestPostsModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Empty,
+  EmptyDescription,
+  EmptyTitle,
+} from '@meith/ui'
 
 import { LINK, MUTED_LINK, NUMERIC, Stamp, UserRef } from '../shared'
 
-export function LatestPosts({ posts, capturedAt }: LatestPostsModel) {
+export function LatestPosts({ posts, capturedAt, copy }: LatestPostsModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.latestPosts.${key}`)
+
   return (
     <Card aria-labelledby="latest-posts-heading">
       <CardHeader>
-        <CardTitle id="latest-posts-heading">Latest posts</CardTitle>
+        <CardTitle id="latest-posts-heading">{c('heading')}</CardTitle>
         <p className={`text-xs text-muted-foreground ${NUMERIC}`}>
-          As of <Stamp at={capturedAt} />
+          {c('asOf')} <Stamp at={capturedAt} />
         </p>
       </CardHeader>
 
       {posts.length === 0 ? (
         <Empty className="py-6">
-          <EmptyTitle>Nothing said yet</EmptyTitle>
-          <EmptyDescription>The newest posts you can see will appear here.</EmptyDescription>
+          <EmptyTitle>{c('nothingYet')}</EmptyTitle>
+          <EmptyDescription>{c('emptyDescription')}</EmptyDescription>
         </Empty>
       ) : (
         <CardContent className="px-0 py-0">
@@ -35,13 +46,11 @@ export function LatestPosts({ posts, capturedAt }: LatestPostsModel) {
                 )}
 
                 <p className="truncate text-xs text-muted-foreground">
-                  <UserRef user={post.author} className="font-normal" />
-                  {' in '}
+                  <UserRef user={post.author} className="font-normal" /> {c('in')}{' '}
                   <a href={post.forum.href} className={MUTED_LINK}>
                     {post.forum.label}
-                  </a>
-                  {' · '}
-                  <Stamp at={post.postedAt} />
+                  </a>{' '}
+                  {c('dot')} <Stamp at={post.postedAt} />
                 </p>
               </li>
             ))}

package/src/slots/latest-threads.tsx

@@ -1,24 +1,37 @@
-import { Card, CardContent, CardHeader, CardTitle, Empty, EmptyDescription, EmptyTitle } from '@meith/ui'
-import type { LatestThreadsModel } from '@meith/theme-kit'
+import type { LatestThreadsModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Empty,
+  EmptyDescription,
+  EmptyTitle,
+} from '@meith/ui'
 
 import { LINK, MUTED_LINK, NUMERIC, Stamp, UserRef } from '../shared'
 
-export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
+export function LatestThreads({
+  threads,
+  capturedAt,
+  copy,
+}: LatestThreadsModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.latestThreads.${key}`)
+
   return (
     <Card aria-labelledby="latest-threads-heading">
       <CardHeader>
-        <CardTitle id="latest-threads-heading">Latest threads</CardTitle>
+        <CardTitle id="latest-threads-heading">{c('heading')}</CardTitle>
         <p className={`text-xs text-muted-foreground ${NUMERIC}`}>
-          As of <Stamp at={capturedAt} />
+          {c('asOf')} <Stamp at={capturedAt} />
         </p>
       </CardHeader>
 
       {threads.length === 0 ? (
         <Empty className="py-6">
-          <EmptyTitle>Nothing started yet</EmptyTitle>
-          <EmptyDescription>
-            The newest threads you can see will appear here.
-          </EmptyDescription>
+          <EmptyTitle>{c('nothingYet')}</EmptyTitle>
+          <EmptyDescription>{c('emptyDescription')}</EmptyDescription>
         </Empty>
       ) : (
         <CardContent className="px-0 py-0">
@@ -33,19 +46,17 @@ export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
                     {thread.title}
                   </a>
                   <span className={`shrink-0 text-xs text-muted-foreground ${NUMERIC}`}>
-                    {thread.replyCount.toLocaleString('en')}{' '}
-                    {thread.replyCount === 1 ? 'reply' : 'replies'}
+                    {thread.replyCount.label}{' '}
+                    {thread.replyCount.value === 1 ? c('reply.one') : c('reply.other')}
                   </span>
                 </div>
 
                 <p className="truncate text-xs text-muted-foreground">
-                  <UserRef user={thread.author} className="font-normal" />
-                  {' in '}
+                  <UserRef user={thread.author} className="font-normal" /> {c('in')}{' '}
                   <a href={thread.forum.href} className={MUTED_LINK}>
                     {thread.forum.label}
-                  </a>
-                  {' · '}
-                  <Stamp at={thread.startedAt} />
+                  </a>{' '}
+                  {c('dot')} <Stamp at={thread.startedAt} />
                 </p>
               </li>
             ))}