@meith/theme-default 0.33.2 → 0.33.4

package/src/slots/panel-shell.tsx

@@ -1,32 +1,48 @@
 import type { PanelShellModel } from '@meith/theme-kit'
 
-import { MUTED_LINK } from '../shared'
+import { EYEBROW, MUTED_LINK } from '../shared'
 
 const RAIL =
-  'flex flex-col gap-4 px-4 pt-4 sm:px-6 lg:sticky lg:w-60 lg:shrink-0 lg:self-start lg:py-8 lg:pr-0'
+  'flex flex-col gap-4 px-4 pt-5 sm:px-6 lg:sticky lg:w-64 lg:shrink-0 lg:self-start lg:pt-8 lg:pr-0'
 
-export function PanelShell({ panel, links, linksLabel, regions, children }: PanelShellModel) {
+function SwitchGlyph() {
   return (
-    <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col lg:flex-row">
-      <aside className={`${RAIL} ${panel === 'admincp' ? 'lg:top-14' : 'lg:top-6'}`}>
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 16 16"
+      className="size-3.5 shrink-0 text-muted-foreground/70"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M6 3.5 9.5 7 6 10.5M3 7h6.5M13 3v8" />
+    </svg>
+  )
+}
+
+export function PanelShell({ links, linksLabel, regions, children }: PanelShellModel) {
+  return (
+    <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col lg:flex-row lg:gap-8">
+      <aside className={`${RAIL} lg:top-14`}>
         {regions.nav}
 
         {links.length > 0 && (
           <nav
             aria-label={linksLabel}
-            className="hidden rounded-lg border border-border bg-card p-2 shadow-elevation lg:block"
+            className="hidden rounded-xl border border-border bg-card p-2 shadow-elevation lg:block"
           >
-            <p className="px-2.5 pt-1 pb-1.5 text-xs font-medium tracking-wide text-muted-foreground uppercase">
-              {linksLabel}
-            </p>
+            <p className={`${EYEBROW} px-3 pt-1.5 pb-1.5`}>{linksLabel}</p>
             <ul className="flex flex-col gap-0.5 text-sm">
               {links.map((link) => (
                 <li key={link.href}>
                   <a
                     href={link.href}
-                    className={`block rounded-lg px-2.5 py-1.5 ${MUTED_LINK} hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`}
+                    className={`flex items-center gap-2.5 rounded-lg px-3 py-2 ${MUTED_LINK} hover:bg-muted hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`}
                   >
-                    {link.label}
+                    <SwitchGlyph />
+                    <span className="min-w-0 flex-1 truncate">{link.label}</span>
                   </a>
                 </li>
               ))}
@@ -40,10 +56,16 @@ export function PanelShell({ panel, links, linksLabel, regions, children }: Pane
       {links.length > 0 && (
         <nav
           aria-label={linksLabel}
-          className="flex flex-wrap gap-x-4 gap-y-1 px-4 pt-2 text-sm sm:px-6 lg:hidden"
+          className="flex flex-wrap items-center gap-x-2 gap-y-2 px-4 pt-2 pb-6 text-sm sm:px-6 lg:hidden"
         >
+          <span className={`${EYEBROW} me-1`}>{linksLabel}</span>
           {links.map((link) => (
-            <a key={link.href} href={link.href} className={MUTED_LINK}>
+            <a
+              key={link.href}
+              href={link.href}
+              className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1 text-xs font-medium text-muted-foreground transition-colors hover:border-primary/40 hover:text-primary"
+            >
+              <SwitchGlyph />
               {link.label}
             </a>
           ))}

package/src/slots/post-bit.tsx

@@ -10,7 +10,7 @@ const VISIBILITY_TINT = {
   deleted: 'border-thread-deleted/50 bg-destructive/5',
 } as const
 
-const BODY_X = 'px-4 sm:px-5'
+const BODY_X = 'px-4 sm:px-6'
 
 function StatusBanner({
   visibility,
@@ -76,8 +76,27 @@ function AuthorBlock({
   const c = (key: string) => fromSlotCopy(copy, `default.postBit.${key}`)
 
   return (
-    <div className="flex items-center gap-3 sm:flex-col sm:items-stretch sm:gap-2 sm:text-center">
-      <Avatar src={author.avatarUrl} name={author.username} size={48} className="sm:self-center" />
+    <div className="flex items-center gap-3 sm:flex-col sm:items-stretch sm:gap-2.5 sm:text-center">
+      <span className="relative shrink-0 sm:self-center">
+        <Avatar
+          src={author.avatarUrl}
+          name={author.username}
+          size={40}
+          className="rounded-full sm:hidden"
+        />
+        <Avatar
+          src={author.avatarUrl}
+          name={author.username}
+          size={64}
+          className="hidden rounded-2xl sm:inline-flex"
+        />
+        {author.isOnline && (
+          <span
+            aria-hidden="true"
+            className="absolute right-0 bottom-0 size-3 rounded-full border-2 border-card bg-moderation-approved"
+          />
+        )}
+      </span>
 
       <div className="min-w-0 flex-1 sm:flex-none">
         <p className="truncate text-sm">
@@ -90,51 +109,55 @@ function AuthorBlock({
           </p>
         )}
 
-        {groupTags(author.groups, author.title).map((group) => (
-          <p key={group.title} className="truncate text-xs text-muted-foreground">
-            <span className={group.nameClass ?? undefined}>{group.title}</span>
-          </p>
-        ))}
+        <p className="mt-1 flex flex-wrap gap-1 sm:justify-center">
+          {groupTags(author.groups, author.title).map((group) => (
+            <span
+              key={group.title}
+              className={cn(
+                'inline-flex max-w-full items-center truncate rounded-full bg-muted px-2 py-0.5 text-[0.6875rem] font-medium leading-4 text-muted-foreground',
+                group.nameClass,
+              )}
+            >
+              {group.title}
+            </span>
+          ))}
+        </p>
 
-        {author.isOnline && (
-          <p className="mt-1 flex items-center gap-1.5 text-xs text-moderation-approved sm:justify-center">
-            <span aria-hidden="true" className="size-1.5 rounded-full bg-moderation-approved" />
-            {c('online')}
-          </p>
-        )}
+        {author.isOnline && <p className="sr-only">{c('online')}</p>}
 
         {badges}
 
         <dl
-          className={`mt-1 flex flex-wrap gap-x-2 text-xs text-muted-foreground sm:mt-2 sm:flex-col sm:gap-x-0 sm:gap-y-0.5 ${NUMERIC}`}
+          className={`mt-1.5 flex flex-wrap gap-x-3 text-xs text-muted-foreground sm:mt-2.5 sm:flex-col sm:gap-x-0 sm:gap-y-0.5 sm:border-t sm:border-border sm:pt-2.5 ${NUMERIC}`}
         >
           <div className="flex gap-1 sm:justify-center">
             <dt className="sr-only">{c('postsLabel')}</dt>
             <dd>
-              {author.postCount.label}{' '}
+              <span className="font-medium text-foreground">{author.postCount.label}</span>{' '}
               {author.postCount.value === 1 ? c('post.one') : c('post.other')}
             </dd>
           </div>
-          {author.joinedAt !== null && (
+          {author.reputation != null && (
             <div className="flex gap-1 sm:justify-center">
-              <dt className="sr-only">{c('joined')}</dt>
+              <dt className="sr-only">{c('reputationLabel')}</dt>
               <dd>
-                {c('joined')} <Stamp at={author.joinedAt} />
+                <span className="font-medium text-foreground">{author.reputation.label}</span>{' '}
+                {c('reputation')}
               </dd>
             </div>
           )}
-          {author.reputation != null && (
+          {author.joinedAt !== null && (
             <div className="flex gap-1 sm:justify-center">
-              <dt className="sr-only">{c('reputationLabel')}</dt>
+              <dt className="sr-only">{c('joined')}</dt>
               <dd>
-                {author.reputation.label} {c('reputation')}
+                {c('joined')} <Stamp at={author.joinedAt} />
               </dd>
             </div>
           )}
         </dl>
 
         {author.fields.length > 0 && (
-          <dl className="mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-muted-foreground sm:mt-1.5 sm:flex-col sm:gap-x-0">
+          <dl className="mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-muted-foreground sm:mt-2 sm:flex-col sm:gap-x-0">
             {author.fields.map((field) => (
               <div key={field.label} className="flex min-w-0 gap-1 sm:justify-center">
                 <dt className="font-medium">{field.label}:</dt>
@@ -161,19 +184,19 @@ export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { co
       data-post-id={post.id}
       data-visibility={post.visibility}
       className={cn(
-        'target:border-primary/60 target:ring-2 target:ring-primary/20',
+        'rounded-xl target:border-primary/60 target:ring-2 target:ring-primary/20',
         VISIBILITY_TINT[post.visibility],
       )}
     >
       <StatusBanner visibility={post.visibility} copy={copy} />
 
-      <div className="grid grid-cols-[minmax(0,1fr)_auto] sm:grid-cols-[10.5rem_minmax(0,1fr)] sm:grid-rows-[auto_minmax(0,1fr)]">
-        <div className="col-start-1 row-start-1 min-w-0 border-b border-border py-3 pl-4 sm:row-span-2 sm:border-r sm:border-b-0 sm:bg-surface/60 sm:px-4 sm:py-4">
+      <div className="grid grid-cols-[minmax(0,1fr)_auto] sm:grid-cols-[11.5rem_minmax(0,1fr)] sm:grid-rows-[auto_minmax(0,1fr)]">
+        <div className="col-start-1 row-start-1 min-w-0 border-b border-border py-3 pl-4 sm:row-span-2 sm:border-r sm:border-b-0 sm:bg-surface/50 sm:px-4 sm:py-5">
           <AuthorBlock author={post.author} badges={regions.pluginBadges} copy={copy} />
         </div>
 
         <div
-          className={`col-start-2 row-start-1 flex flex-col-reverse items-end justify-center gap-1.5 border-b border-border py-3 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between sm:py-1.5 ${BODY_X}`}
+          className={`col-start-2 row-start-1 flex flex-col-reverse items-end justify-center gap-1.5 border-b border-border py-3 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between sm:py-2 ${BODY_X}`}
         >
           {select === null ? (
             <span className="hidden sm:block" />
@@ -192,16 +215,18 @@ export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { co
 
           <a
             href={post.permalink}
-            className={`inline-flex min-h-8 items-center gap-2 ${MUTED_LINK} ${NUMERIC}`}
+            className={`inline-flex min-h-7 items-center gap-2 ${MUTED_LINK} ${NUMERIC}`}
           >
             <Stamp at={post.postedAt} />
-            <span className="font-semibold text-primary">#{post.number}</span>
+            <span className="rounded-full bg-muted px-2 py-0.5 font-semibold text-foreground">
+              #{post.number}
+            </span>
           </a>
         </div>
 
-        <div className="col-span-2 row-start-2 min-w-0 sm:col-span-1 sm:col-start-2">
+        <div className="col-span-2 row-start-2 flex min-w-0 flex-col sm:col-span-1 sm:col-start-2">
           {post.ignored !== null ? (
-            <div className={`py-5 text-sm text-muted-foreground ${BODY_X}`}>
+            <div className={`flex-1 py-5 text-sm text-muted-foreground ${BODY_X}`}>
               {c('ignoringPrefix')}{' '}
               <span className="font-medium text-foreground">{post.ignored.authorUsername}</span>.{' '}
               {c('hiddenNotice')}{' '}
@@ -210,7 +235,7 @@ export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { co
               </a>
             </div>
           ) : (
-            <div className={`py-4 sm:py-5 ${BODY_X}`}>
+            <div className={`flex-1 py-4 sm:py-5 ${BODY_X}`}>
               <div
                 className="prose-md text-[0.9375rem] sm:text-base"
                 dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
@@ -245,7 +270,7 @@ export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { co
                           height={file.height ?? undefined}
                           loading="lazy"
                           decoding="async"
-                          className="mb-1 max-h-56 w-auto rounded-md border border-border object-contain"
+                          className="mb-1 max-h-56 w-auto rounded-lg border border-border object-contain"
                         />
                       ) : null}
                       <span className="block truncate">
@@ -273,7 +298,9 @@ export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { co
           )}
 
           {actions && (
-            <footer className={`border-t border-border py-1.5 empty:hidden ${BODY_X}`}>
+            <footer
+              className={`border-t border-border bg-surface/40 py-1.5 empty:hidden ${BODY_X}`}
+            >
               {regions.actions}
             </footer>
           )}

package/src/slots/post-form.tsx

@@ -1,8 +1,8 @@
 import type { PostFormModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { Alert, AlertDescription, AlertTitle, Card } from '@meith/ui'
+import { Alert, AlertDescription, AlertTitle, buttonVariants, Card, cn } from '@meith/ui'
 
-import { MUTED_LINK, pageAt } from '../shared'
+import { PAGE_TITLE, pageAt } from '../shared'
 
 export function PostForm({
   heading,
@@ -16,9 +16,9 @@ export function PostForm({
 
   return (
     <div className={`${pageAt('max-w-3xl')} flex w-full flex-col gap-5 py-6 sm:py-8`}>
-      <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2">
-        <h1 className="text-2xl font-semibold tracking-tight text-balance">{heading}</h1>
-        <a href={cancelHref} className={`text-sm ${MUTED_LINK}`}>
+      <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
+        <h1 className={PAGE_TITLE}>{heading}</h1>
+        <a href={cancelHref} className={cn(buttonVariants({ variant: 'ghost', size: 'sm' }))}>
           {cancelLabel}
         </a>
       </div>
@@ -31,9 +31,9 @@ export function PostForm({
         </Alert>
       )}
 
-      <Card>
+      <Card className="rounded-xl">
         {regions.toolbar}
-        <div className="p-4 sm:p-5">{regions.form}</div>
+        <div className="p-4 sm:p-6">{regions.form}</div>
       </Card>
     </div>
   )

package/src/slots/subforum-list.tsx

@@ -1,8 +1,8 @@
 import type { SlotCopy, SubforumListModel } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { Card, CardContent, CardHeader, CardTitle } from '@meith/ui'
+import { Card, CardRows } from '@meith/ui'
 
-import { Counts, LINK } from '../shared'
+import { EYEBROW, Figures, LINK, Tile } from '../shared'
 
 export function SubforumList({ forums, copy }: SubforumListModel & { copy: SlotCopy }) {
   if (forums.length === 0) return null
@@ -10,42 +10,48 @@ export function SubforumList({ forums, copy }: SubforumListModel & { copy: SlotC
   const c = (key: string) => fromSlotCopy(copy, `default.subforumList.${key}`)
 
   return (
-    <Card aria-labelledby="subforums-heading">
-      <CardHeader>
-        <CardTitle id="subforums-heading" className="text-sm">
-          {c('heading')}
-        </CardTitle>
-      </CardHeader>
+    <Card aria-labelledby="subforums-heading" className="rounded-xl">
+      <h2 id="subforums-heading" className={`${EYEBROW} border-b border-border px-5 py-2.5`}>
+        {c('heading')}
+      </h2>
 
-      <CardContent>
-        <ul className="flex flex-wrap gap-x-6 gap-y-2 text-sm">
-          {forums.map((forum) => (
-            <li key={forum.id} className="min-w-0">
-              <a href={forum.href} className={`font-medium text-foreground ${LINK}`}>
+      <CardRows className="grid sm:grid-cols-2 sm:divide-y-0">
+        {forums.map((forum) => (
+          <li
+            key={forum.id}
+            className="flex min-w-0 items-center gap-3 px-5 py-3 transition-colors hover:bg-muted/50"
+          >
+            <Tile label={forum.title} className="size-9 text-sm" />
+            <span className="min-w-0 flex-1">
+              <a
+                href={forum.href}
+                className={`block truncate text-sm font-medium text-foreground ${LINK}`}
+              >
                 {forum.title}
               </a>
-              {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'),
-                    },
-                  ]}
-                />
-              )}
-            </li>
-          ))}
-        </ul>
-      </CardContent>
+            </span>
+            {forum.type !== 'link' && (
+              <Figures
+                className="shrink-0"
+                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'),
+                  },
+                ]}
+              />
+            )}
+          </li>
+        ))}
+      </CardRows>
     </Card>
   )
 }

package/src/slots/thread-row.tsx

@@ -1,8 +1,8 @@
 import type { SlotCopy, ThreadRowSlotModel } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { Badge } from '@meith/ui'
+import { Avatar, Badge } from '@meith/ui'
 
-import { Counts, LINK, Prefix, ReadSpacer, Stamp, UnreadDot, UserRef } from '../shared'
+import { Figures, LINK, Prefix, Stamp, UnreadDot, UserRef } from '../shared'
 
 export function ThreadRow({
   thread,
@@ -19,11 +19,11 @@ export function ThreadRow({
     <li
       data-unread={thread.isUnread ? '' : undefined}
       data-visibility={hidden ? thread.visibility : 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 md:grid-cols-[auto_minmax(0,1fr)_9rem_14rem] md:items-center md:gap-x-4 ${hidden ? tint : ''}`}
+      className={`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 md:grid-cols-[auto_minmax(0,1fr)_9rem_15rem] md:items-center md:gap-x-5 ${hidden ? tint : ''}`}
     >
-      <span className="flex items-start gap-2">
+      <span className="flex items-center gap-2.5">
         {select !== null && (
-          <label className="mt-0.5 flex shrink-0 items-start">
+          <label className="flex shrink-0 items-center">
             <span className="sr-only">{select.label}</span>
             <input
               type="checkbox"
@@ -35,11 +35,14 @@ export function ThreadRow({
           </label>
         )}
 
-        {thread.isUnread ? <UnreadDot /> : <ReadSpacer />}
+        <span className="relative shrink-0">
+          <Avatar src={null} name={thread.author.username} size={36} className="rounded-full" />
+          {thread.isUnread && <UnreadDot className="absolute -top-0.5 -right-0.5" />}
+        </span>
       </span>
 
       <div className="min-w-0">
-        <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
           {thread.prefix !== null && <Prefix prefix={thread.prefix} />}
           {thread.isSticky && <Badge tone="pinned">{c('pinned')}</Badge>}
           {thread.isLocked && <Badge tone="locked">{c('locked')}</Badge>}
@@ -51,7 +54,7 @@ export function ThreadRow({
             href={thread.href}
             className={
               (thread.isUnread ? 'font-semibold text-foreground' : 'font-medium text-foreground') +
-              ` ${LINK}`
+              ` text-[0.9375rem] ${LINK}`
             }
           >
             {thread.title}
@@ -65,9 +68,9 @@ export function ThreadRow({
         </p>
       </div>
 
-      <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-col gap-y-1 text-xs text-muted-foreground md:contents">
+        <Figures
+          className="md:col-start-3 md:justify-self-end"
           items={[
             {
               label: c('repliesLabel'),
@@ -84,7 +87,7 @@ export function ThreadRow({
           ]}
         />
 
-        <div className="flex min-w-0 max-w-full flex-wrap gap-x-1 md:col-start-4 md:block">
+        <div className="order-first flex min-w-0 max-w-full flex-wrap gap-x-1 md:order-none md:col-start-4 md:block md:border-l md:border-border md:pl-5">
           {thread.lastPost === null ? (
             <span className="text-thread-moved">{c('noRepliesYet')}</span>
           ) : (

package/src/slots/thread-view.tsx

@@ -2,7 +2,7 @@ import type { SlotCopy, ThreadViewModel } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
 import { Badge, buttonVariants, cn } from '@meith/ui'
 
-import { Counts, PAGE_BODY, Prefix } from '../shared'
+import { Counts, PAGE_BODY, PAGE_TITLE, Prefix } from '../shared'
 
 export function ThreadView({
   thread,
@@ -18,7 +18,7 @@ export function ThreadView({
     <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">{thread.title}</h1>
+          <h1 className={PAGE_TITLE}>{thread.title}</h1>
 
           <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-2">
             {thread.prefix !== null && <Prefix prefix={thread.prefix} />}
@@ -78,10 +78,10 @@ export function ThreadView({
       </div>
 
       {regions.tools !== undefined && (
-        <div className="flex flex-col gap-3 empty:hidden">{regions.tools}</div>
+        <div className="-mb-1 flex flex-col gap-3 empty:hidden">{regions.tools}</div>
       )}
 
-      <div className="flex flex-col gap-3">{regions.posts}</div>
+      <div className="flex flex-col gap-4">{regions.posts}</div>
 
       {regions.pagination}
 

package/src/slots/user-panel.tsx

@@ -1,6 +1,6 @@
 import type { SlotCopy, UserPanelModel } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { Avatar, Badge, buttonVariants } from '@meith/ui'
+import { Avatar, Badge, buttonVariants, cn } from '@meith/ui'
 import { Menu } from '@meith/ui/menu'
 
 import { MUTED_LINK } from '../shared'
@@ -28,10 +28,10 @@ export function UserPanel({
           <a
             key={link.href}
             href={link.href}
-            className={buttonVariants({
-              variant: index === 0 ? 'primary' : 'outline',
-              size: 'sm',
-            })}
+            className={cn(
+              buttonVariants({ variant: index === 0 ? 'primary' : 'ghost', size: 'sm' }),
+              index > 0 && 'hidden sm:inline-flex',
+            )}
           >
             {link.label}
           </a>
@@ -51,12 +51,12 @@ export function UserPanel({
         }}
       />
 
-      <div className="flex min-w-0 items-center gap-2">
+      <div className="flex min-w-0 items-center gap-1.5 sm:gap-2">
         {regions?.notifications ?? (
           <>
             {unreadNotifications.value > 0 && (
               <a href={notificationsHref} className={COUNT_LINK}>
-                <Badge tone="solid">
+                <Badge tone="solid" className="rounded-full">
                   {unreadNotifications.label}
                   <span className="sr-only"> {c('unreadNotifications')}</span>
                   <span aria-hidden="true"> {c('new')}</span>
@@ -65,7 +65,7 @@ export function UserPanel({
             )}
             {unreadMessages.value > 0 && (
               <a href={messagesHref} className={COUNT_LINK}>
-                <Badge tone="outline">
+                <Badge tone="outline" className="rounded-full">
                   {unreadMessages.label}
                   <span className="sr-only"> {c('unreadMessages')}</span>
                   <span aria-hidden="true"> {c('unread')}</span>
@@ -79,10 +79,13 @@ export function UserPanel({
           <Menu
             label={c('yourAccount')}
             items={links}
+            triggerClassName="rounded-full py-0.5 pl-0.5 pr-2"
             trigger={
               <>
-                <Avatar src={viewer.avatarUrl} name={name} size={24} />
-                <span className="max-w-40 truncate font-medium text-foreground">{name}</span>
+                <Avatar src={viewer.avatarUrl} name={name} size={28} className="rounded-full" />
+                <span className="hidden max-w-40 truncate text-sm font-medium text-foreground sm:inline">
+                  {name}
+                </span>
                 <svg
                   aria-hidden="true"
                   viewBox="0 0 12 12"

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

@@ -30,11 +30,17 @@ export function WhoIsOnline({
         {c('heading')}
       </h2>
 
-      <span className={NUMERIC}>
-        <span className="font-medium text-foreground">{total.label}</span> {c('online')}{' '}
-        {memberCount.label} {memberCount.value === 1 ? c('member.one') : c('member.other')}
-        {', '}
-        {guestCount.label} {guestCount.value === 1 ? c('guest.one') : c('guest.other')}
+      <span className={`inline-flex items-baseline gap-1.5 ${NUMERIC}`}>
+        <span
+          aria-hidden="true"
+          className="size-2 translate-y-px rounded-full bg-moderation-approved"
+        />
+        <span>
+          <span className="font-semibold text-foreground">{total.label}</span> {c('online')}{' '}
+          {memberCount.label} {memberCount.value === 1 ? c('member.one') : c('member.other')}
+          {', '}
+          {guestCount.label} {guestCount.value === 1 ? c('guest.one') : c('guest.other')}
+        </span>
       </span>
 
       {memberCount.value === 0 ? (

package/src/theme.ts

@@ -70,7 +70,7 @@ import { WhoIsOnline } from './slots/who-is-online'
 export const defaultTheme = defineTheme({
   key: 'default',
   title: 'Default',
-  version: '0.33.2',
+  version: '0.33.4',
   slots: {
     Shell,
     Header,