@meith/theme-midnight 0.6.0 → 0.8.0

package/src/slots/latest-posts.tsx

@@ -1,19 +1,22 @@
-import type { LatestPostsModel } from '@meith/theme-kit'
+import type { LatestPostsModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { UserRef } from '../shared'
 
-export function LatestPosts({ posts, capturedAt }: LatestPostsModel) {
+export function LatestPosts({ posts, capturedAt, copy }: LatestPostsModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `midnight.latestPosts.${key}`)
+
   return (
     <section aria-labelledby="latest-posts-heading" className="border border-border">
       <h2
         id="latest-posts-heading"
         className="border-b border-border bg-secondary px-3 py-1 font-mono text-xs uppercase tracking-wide"
       >
-        Latest posts
+        {c('heading')}
       </h2>
 
       {posts.length === 0 ? (
-        <p className="px-3 py-2 font-mono text-xs text-muted-foreground">nothing said yet</p>
+        <p className="px-3 py-2 font-mono text-xs text-muted-foreground">{c('empty')}</p>
       ) : (
         <ul className="divide-y divide-border font-mono text-xs">
           {posts.map((post) => (
@@ -39,7 +42,7 @@ export function LatestPosts({ posts, capturedAt }: LatestPostsModel) {
       )}
 
       <p className="border-t border-border px-3 py-1 font-mono text-xs text-muted-foreground">
-        as of <time dateTime={capturedAt.iso}>{capturedAt.label}</time>
+        {c('asOf')} <time dateTime={capturedAt.iso}>{capturedAt.label}</time>
       </p>
     </section>
   )

package/src/slots/latest-threads.tsx

@@ -1,19 +1,26 @@
-import type { LatestThreadsModel } from '@meith/theme-kit'
+import type { LatestThreadsModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { UserRef } from '../shared'
 
-export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
+export function LatestThreads({
+  threads,
+  capturedAt,
+  copy,
+}: LatestThreadsModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `midnight.latestThreads.${key}`)
+
   return (
     <section aria-labelledby="latest-threads-heading" className="border border-border">
       <h2
         id="latest-threads-heading"
         className="border-b border-border bg-secondary px-3 py-1 font-mono text-xs uppercase tracking-wide"
       >
-        Latest threads
+        {c('heading')}
       </h2>
 
       {threads.length === 0 ? (
-        <p className="px-3 py-2 font-mono text-xs text-muted-foreground">nothing started yet</p>
+        <p className="px-3 py-2 font-mono text-xs text-muted-foreground">{c('empty')}</p>
       ) : (
         <ul className="divide-y divide-border font-mono text-xs">
           {threads.map((thread) => (
@@ -36,7 +43,7 @@ export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
       )}
 
       <p className="border-t border-border px-3 py-1 font-mono text-xs text-muted-foreground">
-        as of <time dateTime={capturedAt.iso}>{capturedAt.label}</time>
+        {c('asOf')} <time dateTime={capturedAt.iso}>{capturedAt.label}</time>
       </p>
     </section>
   )

package/src/slots/member-profile.tsx

@@ -1,4 +1,5 @@
-import type { MemberProfileModel } from '@meith/theme-kit'
+import type { MemberProfileModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 export function MemberProfile({
   user,
@@ -11,7 +12,10 @@ export function MemberProfile({
   fields,
   actions,
   regions,
-}: MemberProfileModel) {
+  copy,
+}: MemberProfileModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `midnight.memberProfile.${key}`)
+
   return (
     <article className="flex flex-col gap-3 p-3">
       <header className="flex items-start gap-3 border border-border bg-secondary p-3">
@@ -38,24 +42,24 @@ export function MemberProfile({
 
       <dl className="grid grid-cols-2 gap-x-4 gap-y-1 border border-border p-3 font-mono text-xs sm:grid-cols-3">
         <div>
-          <dt className="text-muted-foreground">joined</dt>
+          <dt className="text-muted-foreground">{c('joined')}</dt>
           <dd>
             <time dateTime={joinedAt.iso}>{joinedAt.label}</time>
           </dd>
         </div>
         <div>
-          <dt className="text-muted-foreground">last visit</dt>
+          <dt className="text-muted-foreground">{c('lastVisit')}</dt>
           <dd>
             {lastVisitAt === null ? (
-              'never'
+              c('never')
             ) : (
               <time dateTime={lastVisitAt.iso}>{lastVisitAt.label}</time>
             )}
           </dd>
         </div>
         <div>
-          <dt className="text-muted-foreground">posts</dt>
-          <dd>{postCount}</dd>
+          <dt className="text-muted-foreground">{c('posts')}</dt>
+          <dd>{postCount.label}</dd>
         </div>
         {fields.map((field) => (
           <div key={field.label}>
@@ -66,7 +70,7 @@ export function MemberProfile({
       </dl>
 
       {signatureHtml !== null && (
-        <section aria-label="Signature" className="border border-border p-3 text-sm">
+        <section aria-label={c('signatureLabel')} className="border border-border p-3 text-sm">
           <div className="prose-md" dangerouslySetInnerHTML={{ __html: signatureHtml }} />
         </section>
       )}
@@ -74,7 +78,7 @@ export function MemberProfile({
       {regions?.plugins}
 
       {actions.length > 0 && (
-        <nav aria-label="Member actions" className="flex flex-wrap gap-2 font-mono text-xs">
+        <nav aria-label={c('actionsLabel')} className="flex flex-wrap gap-2 font-mono text-xs">
           {actions.map((action) => (
             <a
               key={action.href}

package/src/slots/navigation.tsx

@@ -1,8 +1,11 @@
-import type { NavigationModel } from '@meith/theme-kit'
+import type { NavigationModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
+
+export function Navigation({ items, copy }: NavigationModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `midnight.navigation.${key}`)
 
-export function Navigation({ items }: NavigationModel) {
   return (
-    <nav aria-label="Breadcrumb" className="border-b border-border bg-muted px-4 py-1.5">
+    <nav aria-label={c('breadcrumbLabel')} className="border-b border-border bg-muted px-4 py-1.5">
       <ol className="flex flex-wrap items-center gap-1 font-mono text-xs text-muted-foreground">
         {items.map((item, index) => {
           const isLast = index === items.length - 1

package/src/slots/notice.tsx

@@ -1,4 +1,5 @@
-import type { NoticeModel } from '@meith/theme-kit'
+import type { NoticeModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 const EDGE: Record<NoticeModel['kind'], string> = {
   info: 'border-l-primary',
@@ -7,7 +8,9 @@ const EDGE: Record<NoticeModel['kind'], string> = {
   error: 'border-l-destructive',
 }
 
-export function Notice({ kind, message, dismissHref }: NoticeModel) {
+export function Notice({ kind, message, dismissHref, copy }: NoticeModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `midnight.notice.${key}`)
+
   return (
     <div
       role={kind === 'error' ? 'alert' : undefined}
@@ -15,14 +18,17 @@ export function Notice({ kind, message, dismissHref }: NoticeModel) {
     >
       <p>
         <span className="font-mono text-xs uppercase tracking-wide text-muted-foreground">
-          {kind}
+          {c(`kind.${kind}`)}
           {': '}
         </span>
         {message}
       </p>
       {dismissHref !== null && (
-        <a href={dismissHref} className="font-mono text-xs text-muted-foreground hover:text-foreground">
-          dismiss
+        <a
+          href={dismissHref}
+          className="font-mono text-xs text-muted-foreground hover:text-foreground"
+        >
+          {c('dismiss')}
         </a>
       )}
     </div>

package/src/slots/pagination.tsx

@@ -1,4 +1,5 @@
-import type { PaginationModel } from '@meith/theme-kit'
+import type { PaginationModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 export function Pagination({
   page,
@@ -7,14 +8,20 @@ export function Pagination({
   pages,
   previousHref,
   nextHref,
-}: PaginationModel) {
+  copy,
+}: PaginationModel & { copy: SlotCopy }) {
   if (pageCount <= 1 && previousHref === null && nextHref === null) return null
 
+  const c = (key: string) => fromSlotCopy(copy, `midnight.pagination.${key}`)
+
   return (
-    <nav aria-label="Pagination" className="flex flex-wrap items-center gap-1 font-mono text-xs">
+    <nav
+      aria-label={c('ariaLabel')}
+      className="flex flex-wrap items-center gap-1 font-mono text-xs"
+    >
       {previousHref !== null && (
         <a href={previousHref} rel="prev" className="border border-border px-2 py-1 hover:bg-muted">
-          prev
+          {c('prev')}
         </a>
       )}
       {pages.map((entry) =>
@@ -27,18 +34,22 @@ export function Pagination({
             {entry.page}
           </span>
         ) : (
-          <a key={entry.href} href={entry.href} className="border border-border px-2 py-1 hover:bg-muted">
+          <a
+            key={entry.href}
+            href={entry.href}
+            className="border border-border px-2 py-1 hover:bg-muted"
+          >
             {entry.page}
           </a>
         ),
       )}
       {nextHref !== null && (
         <a href={nextHref} rel="next" className="border border-border px-2 py-1 hover:bg-muted">
-          next
+          {c('next')}
         </a>
       )}
       <span className="ml-2 text-muted-foreground">
-        page {pageCountIsExact ? `${page} of ${pageCount}` : page}
+        {c('page')} {pageCountIsExact ? `${page} ${c('pageOf')} ${pageCount}` : page}
       </span>
     </nav>
   )

package/src/slots/post-actions.tsx

@@ -1,20 +1,27 @@
-import type { PostActionsSlotModel } from '@meith/theme-kit'
+import type { PostActionsSlotModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
+
+export function PostActions({
+  actions,
+  children,
+  copy,
+}: PostActionsSlotModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `midnight.postActions.${key}`)
 
-export function PostActions({ actions, children }: PostActionsSlotModel) {
   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 gap-3 font-mono text-xs">
+    <nav aria-label={c('ariaLabel')} className="flex flex-wrap gap-3 font-mono text-xs">
       {items.map((item) => (
         <a key={item.label} href={item.href} className="text-muted-foreground hover:text-primary">
           {item.label}

package/src/slots/post-bit.tsx

@@ -1,8 +1,13 @@
-import type { PostBitSlotModel } from '@meith/theme-kit'
+import type { PostBitSlotModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { 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}
@@ -24,21 +29,28 @@ 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, `midnight.postBit.${key}`)
   return (
     <p className="border-b border-border bg-muted px-3 py-1 font-mono text-xs text-muted-foreground">
-      {visibility === 'deleted'
-        ? 'deleted — visible to moderators only'
-        : 'awaiting approval — visible to moderators only'}
+      {visibility === 'deleted' ? c('deleted') : c('unapproved')}
     </p>
   )
 }
 
-export function PostBit({ post, select, regions }: PostBitSlotModel) {
+export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `midnight.postBit.${key}`)
+
   return (
     <article id={`post-${post.number}`} data-post-id={post.id} className="border border-border">
-      <StatusBanner visibility={post.visibility} />
+      <StatusBanner visibility={post.visibility} copy={copy} />
 
       <div className="grid grid-cols-1 sm:grid-cols-[11rem_1fr]">
         <div className="border-b border-border bg-secondary px-3 py-2 sm:border-b-0 sm:border-r">
@@ -84,12 +96,12 @@ export function PostBit({ post, select, regions }: PostBitSlotModel) {
           )}
           <dl className="mt-2 font-mono text-xs text-muted-foreground">
             <div className="flex gap-1">
-              <dt>posts</dt>
-              <dd className="text-foreground">{post.author.postCount}</dd>
+              <dt>{c('posts')}</dt>
+              <dd className="text-foreground">{post.author.postCount.label}</dd>
             </div>
             {post.author.joinedAt !== null && (
               <div className="flex gap-1">
-                <dt>joined</dt>
+                <dt>{c('joined')}</dt>
                 <dd>
                   <time dateTime={post.author.joinedAt.iso}>{post.author.joinedAt.label}</time>
                 </dd>
@@ -97,11 +109,11 @@ export function PostBit({ post, select, regions }: PostBitSlotModel) {
             )}
             {post.author.reputation != null && (
               <div className="flex gap-1">
-                <dt>rep</dt>
-                <dd className="text-foreground">{post.author.reputation}</dd>
+                <dt>{c('rep')}</dt>
+                <dd className="text-foreground">{post.author.reputation.label}</dd>
               </div>
             )}
-            {post.author.isOnline && <div className="text-forum-unread">online</div>}
+            {post.author.isOnline && <div className="text-forum-unread">{c('online')}</div>}
           </dl>
 
           {post.author.fields.length > 0 && (
@@ -126,9 +138,10 @@ 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/shell.tsx

@@ -1,6 +1,9 @@
-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, copy }: ShellModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `midnight.shell.${key}`)
 
-export function Shell({ viewer, children }: ShellModel) {
   return (
     <div
       className="min-h-dvh bg-background text-foreground"
@@ -10,7 +13,7 @@ export function Shell({ viewer, children }: ShellModel) {
         href="#board-content"
         className="sr-only focus:not-sr-only focus:absolute focus:left-2 focus:top-2 focus:z-50 focus:border focus:border-primary focus:bg-card focus:px-3 focus:py-2 focus:text-sm"
       >
-        Skip to content
+        {c('skipToContent')}
       </a>
       <div className="mx-auto flex min-h-dvh w-full max-w-6xl flex-col border-x border-border bg-card">
         {children}

package/src/slots/subforum-list.tsx

@@ -1,14 +1,20 @@
-import type { SubforumListModel } from '@meith/theme-kit'
+import type { SlotCopy, SubforumListModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
-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, `midnight.subforumList.${key}`)
+
   return (
-    <nav aria-label="Subforums" className="flex flex-wrap gap-x-3 gap-y-1 border border-border bg-muted px-3 py-2 font-mono text-xs">
+    <nav
+      aria-label={c('ariaLabel')}
+      className="flex flex-wrap gap-x-3 gap-y-1 border border-border bg-muted px-3 py-2 font-mono text-xs"
+    >
       {forums.map((forum) => (
         <a key={forum.href} href={forum.href} className="text-primary hover:underline">
           {forum.title}
-          <span className="ml-1 text-muted-foreground">({forum.threadCount})</span>
+          <span className="ml-1 text-muted-foreground">({forum.threadCount.label})</span>
         </a>
       ))}
     </nav>

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 { UserRef } from '../shared'
 
-export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
+export function ThreadRow({ thread, select, copy }: ThreadRowSlotModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `midnight.threadRow.${key}`)
+
   return (
     <tr className="border-t border-border align-top odd:bg-card even:bg-muted/40">
       <td className="px-3 py-2">
@@ -30,20 +33,26 @@ export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
           <a href={thread.href} className="font-medium hover:text-primary">
             {thread.title}
           </a>
-          {thread.isUnread && <span className="sr-only">(new posts)</span>}
-          {thread.isSticky && <span className="font-mono text-xs text-thread-pinned">pinned</span>}
-          {thread.isLocked && <span className="font-mono text-xs text-thread-locked">locked</span>}
-          {thread.isMoved && <span className="font-mono text-xs text-thread-moved">moved</span>}
+          {thread.isUnread && <span className="sr-only">{c('newPosts')}</span>}
+          {thread.isSticky && (
+            <span className="font-mono text-xs text-thread-pinned">{c('pinned')}</span>
+          )}
+          {thread.isLocked && (
+            <span className="font-mono text-xs text-thread-locked">{c('locked')}</span>
+          )}
+          {thread.isMoved && (
+            <span className="font-mono text-xs text-thread-moved">{c('moved')}</span>
+          )}
         </div>
         <p className="mt-0.5 font-mono text-xs text-muted-foreground">
           <UserRef user={thread.author} className="hover:text-foreground" />
         </p>
       </td>
       <td className="w-16 px-2 py-2 text-right font-mono text-xs text-muted-foreground">
-        {thread.replyCount}
+        {thread.replyCount.label}
       </td>
       <td className="w-16 px-2 py-2 text-right font-mono text-xs text-muted-foreground">
-        {thread.viewCount}
+        {thread.viewCount.label}
       </td>
       <td className="w-56 px-3 py-2 text-xs text-muted-foreground">
         {thread.lastPost === null ? (
@@ -52,7 +61,7 @@ export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
           <a href={thread.lastPost.href} className="hover:text-primary">
             <time dateTime={thread.lastPost.at.iso}>{thread.lastPost.at.label}</time>
             <span className="block">
-              by <UserRef user={thread.lastPost.author} linked={false} />
+              {c('by')} <UserRef user={thread.lastPost.author} linked={false} />
             </span>
           </a>
         )}

package/src/slots/thread-view.tsx

@@ -1,13 +1,23 @@
-import type { ThreadViewModel } from '@meith/theme-kit'
+import type { SlotCopy, ThreadViewModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
+
+export function ThreadView({
+  thread,
+  forum,
+  replyHref,
+  markReadAction,
+  regions,
+  copy,
+}: ThreadViewModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `midnight.threadView.${key}`)
 
-export function ThreadView({ thread, forum, replyHref, markReadAction, regions }: ThreadViewModel) {
   const reply =
     replyHref === null ? null : (
       <a
         href={replyHref}
         className="border border-primary bg-primary px-3 py-1 font-mono text-xs text-primary-foreground hover:opacity-90"
       >
-        reply
+        {c('reply')}
       </a>
     )
 
@@ -17,7 +27,10 @@ export function ThreadView({ thread, forum, replyHref, markReadAction, regions }
         <div>
           <h1 className="font-mono text-lg font-semibold">{thread.title}</h1>
           <p className="font-mono text-xs text-muted-foreground">
-            in <a href={forum.href} className="hover:text-primary">{forum.label}</a>
+            {c('in')}{' '}
+            <a href={forum.href} className="hover:text-primary">
+              {forum.label}
+            </a>
           </p>
         </div>
         {reply}
@@ -45,7 +58,7 @@ export function ThreadView({ thread, forum, replyHref, markReadAction, regions }
               type="submit"
               className="border border-border px-2 py-1 font-mono text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
             >
-              mark read
+              {c('markRead')}
             </button>
           </form>
         )}

package/src/slots/user-panel.tsx

@@ -1,4 +1,5 @@
-import type { UserPanelModel } from '@meith/theme-kit'
+import type { SlotCopy, UserPanelModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 export function UserPanel({
   viewer,
@@ -8,23 +9,25 @@ export function UserPanel({
   notificationsHref,
   messagesHref,
   children,
-}: UserPanelModel) {
+  copy,
+}: UserPanelModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `midnight.userPanel.${key}`)
+
   return (
     <div className="flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-xs">
       <span className="text-muted-foreground">
-        {viewer.isGuest ? 'guest' : (viewer.username ?? 'signed in')}
+        {viewer.isGuest ? c('guest') : (viewer.username ?? c('signedIn'))}
       </span>
 
-      {unreadNotifications > 0 && (
+      {unreadNotifications.value > 0 && (
         <a href={notificationsHref} className="text-accent hover:underline">
-          [{unreadNotifications} new]
-          <span className="sr-only"> notifications</span>
+          [{unreadNotifications.label} {c('new')}]
+          <span className="sr-only"> {c('notificationsSrOnly')}</span>
         </a>
       )}
-      {unreadMessages > 0 && (
+      {unreadMessages.value > 0 && (
         <a href={messagesHref} className="text-accent hover:underline">
-          [{unreadMessages} pm]
-          <span className="sr-only"> unread messages</span>
+          [{unreadMessages.label} {c('pm')}]<span className="sr-only"> {c('messagesSrOnly')}</span>
         </a>
       )}
 

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

@@ -1,52 +1,57 @@
-import type { WhoIsOnlineModel } from '@meith/theme-kit'
+import type { SlotCopy, WhoIsOnlineModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { UserRef } from '../shared'
 
 export function WhoIsOnline({
   guestCount,
   members,
+  memberCount,
   total,
   recordCount,
   recordAt,
   fullListHref,
-}: WhoIsOnlineModel) {
+  copy,
+}: WhoIsOnlineModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `midnight.whoIsOnline.${key}`)
+
   return (
     <section aria-labelledby="who-is-online-heading" className="border border-border">
       <h2
         id="who-is-online-heading"
         className="border-b border-border bg-secondary px-3 py-1 font-mono text-xs uppercase tracking-wide"
       >
-        Online now — {total}
+        {c('onlineNow')} {total.label}
       </h2>
       <p className="px-3 py-2 text-xs">
-        {members.length === 0 ? (
-          <span className="text-muted-foreground">no members</span>
+        {memberCount.value === 0 ? (
+          <span className="text-muted-foreground">{c('noMembers')}</span>
         ) : (
           members.map((member, index) => (
             <span key={member.username}>
               {index > 0 && ', '}
               <UserRef user={member} className="text-primary hover:underline" />
               {member.isInvisible && (
-                <span className="ml-1 font-mono text-muted-foreground">(hidden)</span>
+                <span className="ml-1 font-mono text-muted-foreground">{c('hidden')}</span>
               )}
             </span>
           ))
         )}
         <span className="text-muted-foreground">
           {' · '}
-          {guestCount} guests
+          {guestCount.label} {c('guests')}
         </span>
       </p>
       <p className="border-t border-border px-3 py-1 font-mono text-xs text-muted-foreground">
         <a href={fullListHref} className="hover:text-foreground">
-          full list
+          {c('fullList')}
         </a>
-        {' · record '}
-        {recordCount}
+        {' · '}
+        {c('record')} {recordCount.label}
         {recordAt !== null && (
           <>
-            {' on '}
-            <time dateTime={recordAt.iso}>{recordAt.label}</time>
+            {' '}
+            {c('on')} <time dateTime={recordAt.iso}>{recordAt.label}</time>
           </>
         )}
       </p>