@meith/theme-default 0.33.1 → 0.33.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-default",
-  "version": "0.33.1",
+  "version": "0.33.3",
   "description": "Meith's default theme — every slot and every token, and the reference for what a complete theme fills.",
   "license": "MIT",
   "repository": {
@@ -20,8 +20,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/theme-kit": "^0.33.1",
-    "@meith/ui": "^0.33.1"
+    "@meith/theme-kit": "^0.33.3",
+    "@meith/ui": "^0.33.3"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/shared.tsx

@@ -11,7 +11,7 @@ const PAGE_WIDTH = 'max-w-6xl'
 
 export const PAGE = `mx-auto w-full ${PAGE_WIDTH} px-4 sm:px-6`
 
-export const PAGE_BODY = `${PAGE} flex w-full flex-col gap-5 py-6 sm:py-8`
+export const PAGE_BODY = `${PAGE} flex w-full flex-col gap-5 py-5 sm:py-6`
 
 export function pageAt(width: 'max-w-3xl' | 'max-w-4xl'): string {
   return `mx-auto w-full ${width} px-4 sm:px-6`
@@ -24,6 +24,22 @@ export const PRIMARY_HEADER = 'border-b-primary/15 bg-primary/6'
 
 export const MUTED_LINK = `text-muted-foreground ${LINK}`
 
+export const HEADER_HEIGHT = 'h-14'
+
+export const BELOW_HEADER = 'top-14'
+
+export const BELOW_DESKTOP_HEADER = 'lg:top-[6.5rem]'
+
+export const PAGE_TITLE =
+  'font-heading text-xl font-semibold tracking-tight text-balance sm:text-2xl'
+
+export const SECTION_TITLE = 'font-heading text-lg font-semibold tracking-tight text-foreground'
+
+export const EYEBROW = 'text-xs font-semibold tracking-wide text-muted-foreground uppercase'
+
+export const PILL =
+  'inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground'
+
 export function UserRef({ user, className }: { user: UserRefModel; className?: string }) {
   const classes = cn(
     'font-medium',
@@ -49,14 +65,48 @@ export function Stamp({ at, className }: { at: TimeModel; className?: string })
   )
 }
 
-export function UnreadDot() {
-  return <span aria-hidden="true" className="mt-1.5 size-2 shrink-0 rounded-full bg-forum-unread" />
+export function UnreadDot({ className }: { className?: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn('size-2 shrink-0 rounded-full bg-primary ring-4 ring-primary/15', className)}
+    />
+  )
 }
 
 export function ReadSpacer() {
   return <span aria-hidden="true" className="mt-1.5 size-2 shrink-0" />
 }
 
+export function Tile({
+  label,
+  unread,
+  className,
+  children,
+}: {
+  label: string
+  unread?: boolean
+  className?: string
+  children?: React.ReactNode
+}) {
+  const initial = (Array.from(label.trim())[0] ?? '?').toUpperCase()
+
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        'flex size-10 shrink-0 items-center justify-center rounded-lg text-base font-semibold select-none',
+        unread
+          ? 'bg-primary text-primary-foreground shadow-sm'
+          : 'bg-primary/10 text-primary ring-1 ring-primary/15 ring-inset',
+        className,
+      )}
+    >
+      {children ?? initial}
+    </span>
+  )
+}
+
 export function isEmptyRegion(node: React.ReactNode): boolean {
   if (node === null || node === undefined || node === false || node === '') return true
   return Array.isArray(node) && node.every((child) => isEmptyRegion(child))
@@ -104,7 +154,25 @@ export function Counts({ items, className }: { items: readonly CountItem[]; clas
         <div key={item.label}>
           <dt className="sr-only">{item.label}</dt>
           <dd>
-            <span className={cn('font-semibold text-primary', NUMERIC)}>{item.value.label}</span>{' '}
+            <span className={cn('font-semibold text-foreground', NUMERIC)}>{item.value.label}</span>{' '}
+            {item.value.value === 1 ? item.one : item.many}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  )
+}
+
+export function Figures({ items, className }: { items: readonly CountItem[]; className?: string }) {
+  return (
+    <dl className={cn('grid grid-cols-2 gap-x-5 text-center', className)}>
+      {items.map((item) => (
+        <div key={item.label} className="flex flex-col">
+          <dt className="sr-only">{item.label}</dt>
+          <dd className={cn('text-sm font-semibold text-foreground', NUMERIC)}>
+            {item.value.label}
+          </dd>
+          <dd className="text-[0.6875rem] leading-4 text-muted-foreground">
             {item.value.value === 1 ? item.one : item.many}
           </dd>
         </div>

package/src/slots/announcement.tsx

@@ -15,14 +15,14 @@ export function Announcement({
   const c = (key: string) => fromSlotCopy(copy, `default.announcement.${key}`)
 
   return (
-    <Card as="article" className="border-l-4 border-l-primary">
-      <CardContent className="flex flex-col gap-2 p-4">
-        <h2 className="text-lg font-semibold tracking-tight text-balance">{title}</h2>
+    <Card as="article" className="rounded-xl border-l-4 border-l-primary">
+      <CardContent className="flex flex-col gap-2 p-5">
+        <h2 className="font-heading text-lg font-semibold tracking-tight text-balance">{title}</h2>
 
         <div className="prose-md text-sm" dangerouslySetInnerHTML={{ __html: bodyHtml }} />
       </CardContent>
 
-      <CardFooter>
+      <CardFooter className="px-5">
         <span>
           {postedBy === null ? (
             c('posted')

package/src/slots/auth-page.tsx

@@ -7,11 +7,13 @@ export function AuthPage({ title, alert, links, regions }: AuthPageModel) {
     <main
       id="board-content"
       tabIndex={-1}
-      className="flex flex-1 flex-col items-center justify-center px-6 py-12"
+      className="flex flex-1 flex-col items-center justify-center px-4 py-10 sm:px-6 sm:py-14"
     >
-      <div className="flex w-full max-w-sm flex-col gap-6 rounded-lg border border-border bg-card p-6 text-card-foreground shadow-elevation">
+      <div className="flex w-full max-w-sm flex-col gap-6 rounded-2xl border border-border bg-card p-6 text-card-foreground shadow-elevation sm:p-8">
         <div className="flex flex-col gap-1">
-          <h1 className="font-heading text-2xl font-semibold text-foreground">{title}</h1>
+          <h1 className="font-heading text-2xl font-semibold tracking-tight text-foreground">
+            {title}
+          </h1>
           {regions.lede !== undefined && (
             <p className="text-sm text-muted-foreground">{regions.lede}</p>
           )}
@@ -20,7 +22,7 @@ export function AuthPage({ title, alert, links, regions }: AuthPageModel) {
         {alert !== null && (
           <p
             role="alert"
-            className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm"
+            className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm"
           >
             {alert}
           </p>
@@ -33,7 +35,7 @@ export function AuthPage({ title, alert, links, regions }: AuthPageModel) {
         {regions.form}
 
         {links.length > 0 && (
-          <div className="flex flex-col gap-1 text-sm text-muted-foreground">
+          <div className="flex flex-col gap-1.5 border-t border-border pt-5 text-sm text-muted-foreground">
             {links.map((link) => (
               <span key={link.href}>
                 {link.lead === null ? null : `${link.lead} `}

package/src/slots/board-index.tsx

@@ -22,8 +22,8 @@ export function BoardIndex({
       )}
 
       {markAllReadAction !== null && (
-        <form action={markAllReadAction} method="post" className="-mb-2 self-end">
-          <button type="submit" className={buttonVariants({ variant: 'outline', size: 'sm' })}>
+        <form action={markAllReadAction} method="post" className="-mb-3 self-end">
+          <button type="submit" className={buttonVariants({ variant: 'ghost', size: 'sm' })}>
             {c('markAllRead')}
           </button>
         </form>
@@ -32,14 +32,14 @@ export function BoardIndex({
       <div
         className={
           rail
-            ? 'grid gap-4 lg:grid-cols-[minmax(0,1fr)_20rem] lg:items-start'
-            : 'flex min-w-0 flex-col gap-4'
+            ? 'grid gap-6 lg:grid-cols-[minmax(0,1fr)_19rem] lg:items-start'
+            : 'flex min-w-0 flex-col gap-5'
         }
       >
-        <div className="flex min-w-0 flex-col gap-4">{regions.categories}</div>
+        <div className="flex min-w-0 flex-col gap-5">{regions.categories}</div>
 
         {rail && (
-          <aside aria-label={c('boardActivity')} className="flex min-w-0 flex-col gap-4">
+          <aside aria-label={c('boardActivity')} className="flex min-w-0 flex-col gap-5">
             {latest}
             {regions.stats}
           </aside>
@@ -47,7 +47,7 @@ export function BoardIndex({
       </div>
 
       {footer && (
-        <div className="flex flex-col gap-1.5 border-t border-border pt-4 text-xs text-muted-foreground">
+        <div className="flex flex-col gap-1.5 rounded-xl border border-border bg-card px-4 py-3 text-xs text-muted-foreground shadow-elevation">
           {regions.online}
         </div>
       )}

package/src/slots/board-stats.tsx

@@ -2,7 +2,7 @@ import type { BoardStatsModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
 import { Card, CardContent, CardHeader, CardTitle } from '@meith/ui'
 
-import { NUMERIC, PRIMARY_HEADER, Stamp, UserRef } from '../shared'
+import { NUMERIC, Stamp, UserRef } from '../shared'
 
 export function BoardStats({
   threadCount,
@@ -15,14 +15,14 @@ export function BoardStats({
   const c = (key: string) => fromSlotCopy(copy, `default.boardStats.${key}`)
 
   return (
-    <Card aria-labelledby="board-stats-heading">
-      <CardHeader className={PRIMARY_HEADER}>
-        <CardTitle id="board-stats-heading" className="text-primary">
+    <Card aria-labelledby="board-stats-heading" className="rounded-xl">
+      <CardHeader className="bg-card">
+        <CardTitle id="board-stats-heading" className="text-sm">
           {c('heading')}
         </CardTitle>
       </CardHeader>
 
-      <CardContent className="flex flex-col gap-3">
+      <CardContent className="flex flex-col gap-3 px-5 py-4">
         {computedAt === null ? (
           <p className="text-xs text-muted-foreground">{c('notComputed')}</p>
         ) : (
@@ -33,11 +33,13 @@ export function BoardStats({
                 { label: c('posts'), value: postCount },
                 { label: c('members'), value: memberCount },
               ].map((figure) => (
-                <div key={figure.label}>
-                  <dd className={`text-sm font-medium text-foreground ${NUMERIC}`}>
+                <div key={figure.label} className="rounded-lg bg-muted/60 px-2 py-2.5">
+                  <dd className={`text-lg font-semibold text-foreground ${NUMERIC}`}>
                     {figure.value.label}
                   </dd>
-                  <dt className="text-xs text-muted-foreground">{figure.label}</dt>
+                  <dt className="text-[0.6875rem] text-muted-foreground uppercase">
+                    {figure.label}
+                  </dt>
                 </div>
               ))}
             </dl>

package/src/slots/category-block.tsx

@@ -1,21 +1,22 @@
 import type { CategoryBlockModel } from '@meith/theme-kit'
 import { Card, CardDescription, CardHeader, CardRows, CardTitle } from '@meith/ui'
 
-import { LINK, PRIMARY_HEADER } from '../shared'
+import { LINK } from '../shared'
 
 export function CategoryBlock({ category, children }: CategoryBlockModel) {
   const headingId = `category-${category.id}`
 
   return (
-    <Card aria-labelledby={headingId}>
-      <CardHeader className={`flex-col items-start gap-0.5 ${PRIMARY_HEADER}`}>
-        <CardTitle id={headingId} className="text-primary">
-          <a href={category.href} className={`${LINK} hover:text-primary-hover`}>
+    <Card aria-labelledby={headingId} className="rounded-xl">
+      <CardHeader className="flex-col items-start gap-0 bg-card px-5 py-3">
+        <CardTitle id={headingId} className="flex items-center gap-2.5 text-base">
+          <span aria-hidden="true" className="h-4 w-1 rounded-full bg-primary" />
+          <a href={category.href} className={`${LINK} text-foreground`}>
             {category.title}
           </a>
         </CardTitle>
         {category.description !== null && (
-          <CardDescription className="text-xs">{category.description}</CardDescription>
+          <CardDescription className="pl-3.5 text-xs">{category.description}</CardDescription>
         )}
       </CardHeader>
 

package/src/slots/discovery-view.tsx

@@ -1,8 +1,8 @@
 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 { Avatar, buttonVariants, Card, CardRows, cn, Empty, EmptyDescription } from '@meith/ui'
 
-import { LINK, NUMERIC, pageAt, Stamp } from '../shared'
+import { LINK, NUMERIC, PAGE_TITLE, PILL, pageAt, Stamp } from '../shared'
 
 const TAB =
   'inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-sm whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
@@ -52,62 +52,65 @@ export function DiscoveryView({
     <main
       id="board-content"
       tabIndex={-1}
-      className={`${pageAt('max-w-4xl')} flex flex-1 flex-col gap-6 py-8`}
+      className={`${pageAt('max-w-4xl')} flex flex-1 flex-col gap-6 py-6 sm:py-8`}
     >
       <div className="flex flex-col gap-1">
-        <h1 className="font-heading text-2xl font-semibold">{title}</h1>
+        <h1 className={PAGE_TITLE}>{title}</h1>
         <p className="text-sm text-muted-foreground">{blurb}</p>
       </div>
 
       <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-lg border border-border bg-card px-4 py-3 text-sm">
           {refusal.message}{' '}
           <a href={refusal.signInHref} className={`font-medium text-foreground ${LINK}`}>
             {refusal.signInLabel}
           </a>
         </p>
       ) : rows.length === 0 ? (
-        <Card>
+        <Card className="rounded-xl">
           <Empty>
             <EmptyDescription>{emptyMessage}</EmptyDescription>
           </Empty>
         </Card>
       ) : (
-        <Card>
+        <Card className="rounded-xl">
           <CardRows>
             {rows.map((row) => (
               <li
                 key={row.threadId}
-                className="flex flex-col gap-1.5 px-4 py-3.5 transition-colors hover:bg-muted/60 sm:flex-row sm:items-center sm:justify-between sm:gap-6"
+                className="flex gap-3.5 px-4 py-3.5 transition-colors hover:bg-muted/50 sm:items-center sm:px-5"
               >
-                <div className="flex min-w-0 flex-col gap-1">
-                  <a
-                    href={row.href}
-                    className="truncate text-[0.9375rem] font-semibold text-foreground hover:underline"
-                  >
-                    {row.title}
-                  </a>
-                  <p className="truncate text-xs text-muted-foreground">
-                    {c('in')}{' '}
-                    <a href={row.forum.href} className="font-medium hover:underline">
-                      {row.forum.label}
-                    </a>{' '}
-                    {c('dot')} {c('startedBy')} {row.authorUsername}
+                <Avatar src={null} name={row.authorUsername} size={36} className="rounded-full" />
+
+                <div className="flex min-w-0 flex-1 flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
+                  <div className="flex min-w-0 flex-col gap-0.5">
+                    <a
+                      href={row.href}
+                      className={`truncate text-[0.9375rem] font-medium text-foreground ${LINK}`}
+                    >
+                      {row.title}
+                    </a>
+                    <p className="truncate text-xs text-muted-foreground">
+                      {c('startedBy')} {row.authorUsername} {c('in')}{' '}
+                      <a href={row.forum.href} className="font-medium hover:underline">
+                        {row.forum.label}
+                      </a>
+                    </p>
+                  </div>
+
+                  <p className="flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground sm:flex-col sm:items-end sm:gap-0.5">
+                    <span className={`${PILL} ${NUMERIC}`}>
+                      {row.replyCount.label}{' '}
+                      {row.replyCount.value === 1 ? c('reply.one') : c('reply.other')}
+                    </span>
+                    <span>
+                      {c('lastPost')} <Stamp at={row.lastPostAt} />
+                      {row.lastPostUsername === null ? null : ` ${c('by')} ${row.lastPostUsername}`}
+                    </span>
                   </p>
                 </div>
-
-                <p className="shrink-0 text-xs text-muted-foreground sm:text-right">
-                  <span className={cn('font-semibold text-foreground', NUMERIC)}>
-                    {row.replyCount.label}
-                  </span>{' '}
-                  {row.replyCount.value === 1 ? c('reply.one') : c('reply.other')}
-                  <span className="block">
-                    {c('lastPost')} <Stamp at={row.lastPostAt} />
-                    {row.lastPostUsername === null ? null : ` ${c('by')} ${row.lastPostUsername}`}
-                  </span>
-                </p>
               </li>
             ))}
           </CardRows>
@@ -117,7 +120,7 @@ export function DiscoveryView({
       {nextHref !== null && (
         <a
           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"
+          className={cn(buttonVariants({ variant: 'secondary' }), 'w-fit rounded-full')}
         >
           {nextLabel} {c('nextArrow')}
         </a>

package/src/slots/editor-toolbar.tsx

@@ -26,7 +26,7 @@ const GLYPHS: Readonly<Record<EditorTag, string>> = {
 }
 
 const BUTTON =
-  'min-w-8 rounded px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-background hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+  'min-w-8 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-card hover:text-foreground hover:shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
 function runButton(textareaId: string, button: EditorToolbarButtonModel): void {
   const field = document.getElementById(textareaId)
@@ -54,7 +54,7 @@ export function EditorToolbar({
     <div
       role="group"
       aria-label={groupLabel}
-      className="flex flex-wrap gap-0.5 border-b border-border bg-muted/40 p-2"
+      className="flex flex-wrap gap-0.5 border-b border-border bg-surface/60 p-2"
     >
       {buttons.map((button, index) => (
         <button

package/src/slots/footer.tsx

@@ -23,9 +23,9 @@ export function Footer({
         </div>
       )}
       <div
-        className={`${PAGE} flex flex-col gap-3 py-5 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between sm:gap-6`}
+        className={`${PAGE} flex flex-col gap-3 py-6 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between sm:gap-6`}
       >
-        <span className="font-semibold text-primary">{boardTitle}</span>
+        <span className="font-semibold text-foreground">{boardTitle}</span>
 
         {links.length > 0 && (
           <nav aria-label={c('nav')} className="flex flex-wrap gap-x-4 gap-y-1">

package/src/slots/forum-display.tsx

@@ -11,7 +11,7 @@ import {
   EmptyTitle,
 } from '@meith/ui'
 
-import { Counts, isEmptyRegion, PAGE_BODY } from '../shared'
+import { Counts, isEmptyRegion, PAGE_BODY, PAGE_TITLE } from '../shared'
 
 export function ForumDisplay({
   forum,
@@ -24,37 +24,36 @@ export function ForumDisplay({
 
   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="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
         <div className="min-w-0">
-          <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>
-          )}
-          {forum.type !== 'link' && (
-            <Counts
-              className="mt-2"
-              items={[
-                {
-                  label: c('threadsLabel'),
-                  value: forum.threadCount,
-                  one: c('thread.one'),
-                  many: c('thread.other'),
-                },
-                {
-                  label: c('postsLabel'),
-                  value: forum.postCount,
-                  one: c('post.one'),
-                  many: c('post.other'),
-                },
-              ]}
-            />
-          )}
+          <h1 className={PAGE_TITLE}>{forum.title}</h1>
+          <div className="mt-1 flex flex-wrap items-baseline gap-x-3 gap-y-1 text-sm text-muted-foreground">
+            {forum.description !== null && <p className="max-w-prose">{forum.description}</p>}
+            {forum.type !== 'link' && (
+              <Counts
+                items={[
+                  {
+                    label: c('threadsLabel'),
+                    value: forum.threadCount,
+                    one: c('thread.one'),
+                    many: c('thread.other'),
+                  },
+                  {
+                    label: c('postsLabel'),
+                    value: forum.postCount,
+                    one: c('post.one'),
+                    many: c('post.other'),
+                  },
+                ]}
+              />
+            )}
+          </div>
         </div>
 
         <div className="flex shrink-0 flex-wrap items-center gap-2">
           {markReadAction !== null && (
             <form action={markReadAction} method="post">
-              <button type="submit" className={buttonVariants({ variant: 'outline' })}>
+              <button type="submit" className={buttonVariants({ variant: 'ghost' })}>
                 {c('markRead')}
               </button>
             </form>
@@ -70,17 +69,17 @@ export function ForumDisplay({
         </div>
       </div>
 
-      {regions.tools !== undefined && (
-        <div className="flex flex-col gap-3 empty:hidden">{regions.tools}</div>
-      )}
-
       {regions.announcements !== undefined && (
         <div className="flex flex-col gap-3">{regions.announcements}</div>
       )}
 
       {regions.subforums}
 
-      <Card>
+      {regions.tools !== undefined && (
+        <div className="-mb-2 flex flex-col gap-3 empty:hidden">{regions.tools}</div>
+      )}
+
+      <Card className="rounded-xl">
         {isEmptyRegion(regions.threads) ? (
           <Empty>
             <EmptyTitle>{c('noThreadsYet')}</EmptyTitle>

package/src/slots/forum-row.tsx

@@ -1,7 +1,24 @@
 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'
+import { Figures, LINK, Stamp, Tile, UserRef } from '../shared'
+
+function LinkGlyph() {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 16 16"
+      className="size-4"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M6.5 3.5h6v6M12.5 3.5 4 12" />
+    </svg>
+  )
+}
 
 export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }) {
   const isLink = forum.type === 'link'
@@ -12,18 +29,20 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
     <li
       data-unread={forum.isUnread ? '' : undefined}
       className={
-        'grid grid-cols-[auto_minmax(0,1fr)] gap-x-2.5 gap-y-1.5 px-4 py-3 transition-colors hover:bg-muted/60' +
-        (isLink ? '' : ' md:grid-cols-[auto_minmax(0,1fr)_9rem_15rem] md:items-center md:gap-x-4')
+        'grid grid-cols-[auto_minmax(0,1fr)] gap-x-3.5 gap-y-2 px-4 py-3.5 transition-colors hover:bg-muted/50 sm:px-5' +
+        (isLink ? '' : ' md:grid-cols-[auto_minmax(0,1fr)_9rem_16rem] md:items-center md:gap-x-5')
       }
     >
-      {forum.isUnread ? <UnreadDot /> : <ReadSpacer />}
+      <Tile label={forum.title} unread={forum.isUnread} className="mt-0.5 md:mt-0">
+        {isLink ? <LinkGlyph /> : undefined}
+      </Tile>
 
       <div className="min-w-0">
         <a
           href={forum.href}
           className={
             (forum.isUnread ? 'font-semibold text-foreground' : 'font-medium text-foreground') +
-            ` ${LINK}`
+            ` text-[0.9375rem] ${LINK}`
           }
         >
           {forum.title}
@@ -35,10 +54,14 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
         )}
 
         {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">{c('subforums')}</span>
+          <p className="mt-2 flex flex-wrap items-center gap-1.5 text-xs">
+            <span className="sr-only">{c('subforums')}</span>
             {forum.subforums.map((sub) => (
-              <a key={sub.href} href={sub.href} className={MUTED_LINK}>
+              <a
+                key={sub.href}
+                href={sub.href}
+                className="rounded-md bg-muted px-2 py-0.5 font-medium text-muted-foreground transition-colors hover:bg-primary/10 hover:text-primary"
+              >
                 {sub.label}
               </a>
             ))}
@@ -47,9 +70,9 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
       </div>
 
       {!isLink && (
-        <div className="col-start-2 flex min-w-0 flex-wrap items-baseline gap-x-4 gap-y-1 text-xs text-muted-foreground md:contents">
-          <Counts
-            className="md:col-start-3 md:justify-end"
+        <div className="col-start-2 flex min-w-0 flex-wrap items-center gap-x-5 gap-y-1 text-xs text-muted-foreground md:contents">
+          <Figures
+            className="md:col-start-3 md:justify-self-end"
             items={[
               {
                 label: c('threadsLabel'),
@@ -66,7 +89,7 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
             ]}
           />
 
-          <div className="flex min-w-0 max-w-full flex-wrap gap-x-1 md:col-start-4 md:block">
+          <div className="flex min-w-0 max-w-full flex-wrap gap-x-1 md:col-start-4 md:block md:border-l md:border-border md:pl-5">
             {forum.lastPost === null ? (
               <span className="text-forum-read">{c('noPostsYet')}</span>
             ) : (