@meith/web 0.33.2 → 0.33.4

package/app/(board)/members/page.tsx

@@ -22,7 +22,7 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 const INPUT =
-  'rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+  'rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
 export default async function MembersPage({
   searchParams,

package/app/(board)/thread/[slug]/page.tsx

@@ -1,6 +1,5 @@
 import type { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
-import { after as scheduleAfterResponse } from 'next/server'
 
 import { currentRequestId } from '@meith/core/logger'
 import { acceptsThreads, canHoldThreads } from '@meith/forums'
@@ -268,14 +267,11 @@ export default async function ThreadPage({
   })
 
   if (readState !== null && actor.userId !== null) {
-    const readerId = actor.userId
     const lastRenderedPostId = postPage.rows.at(-1)?.id
     if (lastRenderedPostId !== undefined) {
-      scheduleAfterResponse(() =>
-        readState
-          .markThreadRead(readerId, thread.id, lastRenderedPostId, new Date())
-          .catch(() => undefined),
-      )
+      await readState
+        .markThreadRead(actor.userId, thread.id, lastRenderedPostId, new Date())
+        .catch(() => undefined)
     }
   }
 
@@ -648,6 +644,7 @@ export default async function ThreadPage({
             rights={toolRights}
             moveTargets={moveTargets}
             heading={threadToolsHeading(appointment.isForumModerator, await getTranslator())}
+            open={toolNotice !== undefined}
           >
             <ThreadSurgeryForm
               copy={moderationFormsCopy(await getTranslator())}

package/app/admin/content/attachments/page.tsx

@@ -111,7 +111,7 @@ export default async function AdminAttachmentsPage({
           <input
             name="filename"
             defaultValue={filename ?? ''}
-            className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
+            className="w-full rounded-md border border-input bg-card px-3 py-2 text-sm"
           />
         </label>
 
@@ -120,7 +120,7 @@ export default async function AdminAttachmentsPage({
           <select
             name="status"
             defaultValue={status ?? ''}
-            className="rounded-md border border-border bg-background px-3 py-2 text-sm"
+            className="rounded-md border border-input bg-card px-3 py-2 text-sm"
           >
             <option value="">{translator.t('adminAttachments.any')}</option>
             <option value="ready">{translator.t('adminAttachments.ready')}</option>

package/app/admin/layout.tsx

@@ -73,13 +73,30 @@ export default async function AdminLayout({ children }: { children: React.ReactN
         {await tr('page.skip-content')}
       </a>
 
-      <header className="sticky top-0 z-30 border-b border-border bg-card">
-        <div className="mx-auto flex min-h-14 w-full max-w-6xl items-center gap-x-3 px-4 py-2 sm:gap-x-4 sm:px-6">
+      <header className="sticky top-0 z-30 border-b border-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/85">
+        <div className="mx-auto flex h-14 w-full max-w-6xl items-center gap-x-3 px-4 sm:gap-x-4 sm:px-6">
           <a
             href="/admin"
-            className="min-w-0 truncate font-heading text-base font-semibold whitespace-nowrap text-foreground sm:text-lg"
+            className="flex min-w-0 items-center gap-2.5 font-heading text-base font-semibold whitespace-nowrap text-foreground sm:text-lg"
           >
-            {await tr('page.control-panel')}
+            <span
+              aria-hidden="true"
+              className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm"
+            >
+              <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="M3 4.5h10M3 8h10M3 11.5h10M6 3v3M10.5 6.5v3M5 10v3" />
+              </svg>
+            </span>
+            <span className="truncate">{await tr('page.control-panel')}</span>
           </a>
           <div className="ml-auto flex shrink-0 items-center gap-3 text-sm whitespace-nowrap sm:gap-4">
             <AdminSignOutForm copy={adminFormsCopy(t)} />

package/app/admin/users/[id]/merge/page.tsx

@@ -17,7 +17,7 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 const INPUT =
-  'w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+  'w-full rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
 export default async function AdminMergePage({
   params,

package/app/admin/users/page.tsx

@@ -24,7 +24,7 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 const INPUT =
-  'w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+  'w-full rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
 export default async function AdminUsersPage({
   searchParams,

package/app/admin/users/prune/page.tsx

@@ -16,7 +16,7 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 const INPUT =
-  'w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+  'w-full rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
 export default async function AdminPrunePage({
   searchParams,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/web",
-  "version": "0.33.2",
+  "version": "0.33.4",
   "description": "The board itself: the Next.js app, and the forum-web bin that materializes it into an external board workspace.",
   "license": "MIT",
   "repository": {
@@ -43,54 +43,54 @@
     "react-dom": "19.2.8",
     "tailwindcss": "^4.3.3",
     "typescript": "7.0.2",
-    "@meith/accounts": "0.33.2",
-    "@meith/admin": "0.33.2",
-    "@meith/antispam": "0.33.2",
-    "@meith/api": "0.33.2",
-    "@meith/attachments": "0.33.2",
-    "@meith/authorization": "0.33.2",
-    "@meith/avatars": "0.33.2",
-    "@meith/board-digest": "0.33.2",
-    "@meith/core": "0.33.2",
-    "@meith/db": "0.33.2",
-    "@meith/demo": "0.33.2",
-    "@meith/drafts": "0.33.2",
-    "@meith/drivers": "0.33.2",
-    "@meith/events": "0.33.2",
-    "@meith/forums": "0.33.2",
-    "@meith/groups": "0.33.2",
-    "@meith/i18n": "0.33.2",
-    "@meith/import": "0.33.2",
-    "@meith/install": "0.33.2",
-    "@meith/mail": "0.33.2",
-    "@meith/markdown": "0.33.2",
-    "@meith/marketplace": "0.33.2",
-    "@meith/messages": "0.33.2",
-    "@meith/moderation": "0.33.2",
-    "@meith/notifications": "0.33.2",
-    "@meith/plugin-calendar": "0.33.2",
-    "@meith/plugin-dues": "0.33.2",
-    "@meith/plugin-kit": "0.33.2",
-    "@meith/polls": "0.33.2",
-    "@meith/posts": "0.33.2",
-    "@meith/profile-fields": "0.33.2",
-    "@meith/relations": "0.33.2",
-    "@meith/reputation": "0.33.2",
-    "@meith/runtime": "0.33.2",
-    "@meith/search": "0.33.2",
-    "@meith/settings": "0.33.2",
-    "@meith/signatures": "0.33.2",
-    "@meith/subscriptions": "0.33.2",
-    "@meith/tasks": "0.33.2",
-    "@meith/theme-clubhouse": "0.33.2",
-    "@meith/theme-default": "0.33.2",
-    "@meith/theme-kit": "0.33.2",
-    "@meith/theme-midnight": "0.33.2",
-    "@meith/theme-phasebook": "0.33.2",
-    "@meith/theme-raidframe": "0.33.2",
-    "@meith/threads": "0.33.2",
-    "@meith/ui": "0.33.2",
-    "@meith/upgrade": "0.33.2"
+    "@meith/accounts": "0.33.4",
+    "@meith/admin": "0.33.4",
+    "@meith/antispam": "0.33.4",
+    "@meith/api": "0.33.4",
+    "@meith/attachments": "0.33.4",
+    "@meith/authorization": "0.33.4",
+    "@meith/avatars": "0.33.4",
+    "@meith/board-digest": "0.33.4",
+    "@meith/core": "0.33.4",
+    "@meith/db": "0.33.4",
+    "@meith/demo": "0.33.4",
+    "@meith/drivers": "0.33.4",
+    "@meith/drafts": "0.33.4",
+    "@meith/events": "0.33.4",
+    "@meith/forums": "0.33.4",
+    "@meith/groups": "0.33.4",
+    "@meith/i18n": "0.33.4",
+    "@meith/import": "0.33.4",
+    "@meith/install": "0.33.4",
+    "@meith/mail": "0.33.4",
+    "@meith/markdown": "0.33.4",
+    "@meith/marketplace": "0.33.4",
+    "@meith/messages": "0.33.4",
+    "@meith/moderation": "0.33.4",
+    "@meith/notifications": "0.33.4",
+    "@meith/plugin-calendar": "0.33.4",
+    "@meith/plugin-dues": "0.33.4",
+    "@meith/plugin-kit": "0.33.4",
+    "@meith/polls": "0.33.4",
+    "@meith/posts": "0.33.4",
+    "@meith/profile-fields": "0.33.4",
+    "@meith/relations": "0.33.4",
+    "@meith/reputation": "0.33.4",
+    "@meith/runtime": "0.33.4",
+    "@meith/search": "0.33.4",
+    "@meith/settings": "0.33.4",
+    "@meith/signatures": "0.33.4",
+    "@meith/subscriptions": "0.33.4",
+    "@meith/tasks": "0.33.4",
+    "@meith/theme-clubhouse": "0.33.4",
+    "@meith/theme-default": "0.33.4",
+    "@meith/theme-kit": "0.33.4",
+    "@meith/theme-midnight": "0.33.4",
+    "@meith/theme-phasebook": "0.33.4",
+    "@meith/theme-raidframe": "0.33.4",
+    "@meith/threads": "0.33.4",
+    "@meith/ui": "0.33.4",
+    "@meith/upgrade": "0.33.4"
   },
   "scripts": {
     "dev": "next dev",

package/src/components/account/avatar-form.tsx

@@ -92,7 +92,7 @@ export function AvatarForm({
             type="file"
             name="avatar"
             accept=".png,.jpg,.jpeg"
-            className="rounded-md border border-border bg-background px-3 py-2 text-sm file:mr-3 file:rounded file:border-0 file:bg-muted file:px-3 file:py-1 file:text-sm"
+            className="rounded-md border border-input bg-card px-3 py-2 text-sm file:mr-3 file:rounded file:border-0 file:bg-muted file:px-3 file:py-1 file:text-sm"
           />
           <span className="text-xs text-muted-foreground">
             {fromCopy(copy, 'accountForm.avatar.hint')}

package/src/components/account/notification-forms.tsx

@@ -204,7 +204,7 @@ export function AnnouncementsOptInForm({ optedIn, copy }: { optedIn: boolean; co
 }
 
 const FIELD =
-  'w-full max-w-xs rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+  'w-full max-w-xs rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
 export function BoardDigestCadenceForm({ cadence, copy }: { cadence: string; copy: Copy }) {
   const [state, action] = useActionState(saveBoardDigestCadenceAction, EMPTY_STATE)

package/src/components/account/reputation-forms.tsx

@@ -9,7 +9,7 @@ import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
 const FIELD =
-  'w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+  'w-full rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
 const CARD = 'flex flex-col gap-3 rounded-lg border border-border bg-card p-5'
 

package/src/components/account/usercp-forms.tsx

@@ -22,7 +22,7 @@ import { type Copy, fromCopy } from '../shell/copy'
 export type { CustomFieldInput }
 
 const FIELD =
-  'w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+  'w-full rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
 const BUTTON =
   'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'

package/src/components/admin/form-bits.tsx

@@ -1,7 +1,7 @@
 import { Alert, AlertDescription } from '@meith/ui'
 
 export const INPUT =
-  'w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+  'w-full rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
 export function Saved({ when = true, children }: { when?: boolean; children: React.ReactNode }) {
   if (!when) return null

package/src/components/admin/forum-forms.tsx

@@ -368,7 +368,10 @@ function MatrixSection({
           </thead>
           <tbody>
             {rows.map((row) => (
-              <tr key={row.key} className="border-b border-border/60 last:border-b-0">
+              <tr
+                key={row.key}
+                className="scroll-mt-16 scroll-mb-24 border-b border-border/60 last:border-b-0"
+              >
                 <th
                   scope="row"
                   title={row.description}

package/src/components/admin/oklch-picker.tsx

@@ -120,7 +120,7 @@ export function OklchPicker({
           value={value}
           onChange={(event) => onChange(event.target.value)}
           placeholder={shipped}
-          className="w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          className="w-full rounded-md border border-input bg-card px-3 py-2 font-mono text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
         />
       </div>
 

package/src/components/admin/system-forms.tsx

@@ -135,7 +135,7 @@ export function RetryJobForm({ copy }: { copy: Copy }) {
         <span className="font-medium">{fromCopy(copy, 'adminPanel.system.jobId')}</span>
         <input
           name="jobId"
-          className="w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-xs"
+          className="w-full rounded-md border border-input bg-card px-3 py-2 font-mono text-xs"
           required
         />
         <span className="text-xs text-muted-foreground">

package/src/components/admin/theme-forms.tsx

@@ -40,7 +40,7 @@ import { type CellState, PaletteGrid } from './theme-palette'
 import { ThemePreview, ValidatedSample } from './theme-preview'
 
 const INPUT =
-  'w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+  'w-full rounded-md border border-input bg-card px-3 py-2 font-mono text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
 const GHOST_BUTTON =
   'inline-flex h-8 items-center justify-center rounded-md border border-border px-3 text-xs font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
@@ -348,7 +348,7 @@ export function ThemeEditorForm({
                   value={query}
                   onChange={(event) => setQuery(event.target.value)}
                   placeholder={fromCopy(copy, 'adminTheme.find.placeholder')}
-                  className="w-full rounded-md border border-border bg-background px-3 py-2 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+                  className="w-full rounded-md border border-input bg-card px-3 py-2 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
                 />
               </label>
 

package/src/components/content/edit-post-form.tsx

@@ -117,7 +117,7 @@ export function EditPostForm({
           name="reason"
           maxLength={200}
           defaultValue={state.values?.reason ?? reason ?? ''}
-          className="rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          className="rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
         />
       </label>
 

package/src/components/content/new-thread-form.tsx

@@ -128,7 +128,7 @@ export function NewThreadForm({
           <select
             name="prefixId"
             defaultValue={state.values?.prefixId ?? draft?.prefixId?.toString() ?? ''}
-            className="h-10 rounded-md border border-border bg-background px-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+            className="h-10 rounded-md border border-input bg-card px-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
           >
             <option value="">
               {requiresPrefix
@@ -183,7 +183,7 @@ export function NewThreadForm({
               min={0}
               step={1}
               defaultValue={pollDraft?.maxOptions ?? '1'}
-              className="h-10 rounded-md border border-border bg-background px-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+              className="h-10 rounded-md border border-input bg-card px-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
             />
             <span className="text-xs text-muted-foreground">
               {fromCopy(copy, 'composer.newThread.pollChoicesHint')}
@@ -215,7 +215,7 @@ export function NewThreadForm({
               type="datetime-local"
               name="pollClosesAt"
               defaultValue={pollDraft?.closesAt ?? ''}
-              className="h-10 rounded-md border border-border bg-background px-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+              className="h-10 rounded-md border border-input bg-card px-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
             />
             <span className="text-xs text-muted-foreground">
               {fromCopy(copy, 'pollEdit.closesAtHint')}

package/src/components/messages/message-forms.tsx

@@ -12,7 +12,7 @@ import { type Copy, fromCopy } from '../shell/copy'
 import { RecipientField } from './recipient-field'
 
 const FIELD =
-  'w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+  'w-full rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
 const BUTTON =
   'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'

package/src/components/moderation/thread-surgery-form.tsx

@@ -11,7 +11,8 @@ import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 const BUTTON =
   'inline-flex h-8 items-center rounded-md border border-border px-3 text-xs font-medium hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 const FIELD =
-  'h-8 rounded-md border border-border bg-background px-2 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+  'h-8 min-w-0 max-w-full rounded-md border border-border bg-background px-2 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const LABEL = 'flex min-w-0 max-w-full items-center text-xs'
 
 export interface SplitPoint {
   readonly id: number
@@ -39,9 +40,9 @@ export function ThreadSurgeryForm({
         <form action={splitAction} className="flex flex-col gap-2">
           <div className="flex flex-wrap items-center gap-2">
             <input type="hidden" name="threadId" value={threadId} />
-            <label className="flex items-center gap-2 text-xs">
+            <label className={LABEL}>
               <span className="sr-only">{fromCopy(copy, 'moderationForm.surgery.fromSr')}</span>
-              <select name="fromPostId" className={FIELD}>
+              <select name="fromPostId" className={`${FIELD} sm:max-w-64`}>
                 {splitPoints.map((point) => (
                   <option key={point.id} value={point.id}>
                     {formatFromCopy(copy, 'moderationForm.surgery.splitPoint', {
@@ -52,7 +53,7 @@ export function ThreadSurgeryForm({
                 ))}
               </select>
             </label>
-            <label className="flex items-center gap-2 text-xs">
+            <label className={LABEL}>
               <span className="sr-only">{fromCopy(copy, 'moderationForm.surgery.titleSr')}</span>
               <input
                 type="text"
@@ -76,7 +77,7 @@ export function ThreadSurgeryForm({
         <form action={mergeAction} className="flex flex-col gap-2">
           <div className="flex flex-wrap items-center gap-2">
             <input type="hidden" name="threadId" value={threadId} />
-            <label className="flex items-center gap-2 text-xs">
+            <label className={LABEL}>
               <span className="sr-only">{fromCopy(copy, 'moderationForm.surgery.mergeSr')}</span>
               <input
                 type="number"

package/src/components/moderation/thread-tools-form.tsx

@@ -11,6 +11,27 @@ import { type Copy, fromCopy } from '../shell/copy'
 
 const BUTTON =
   'inline-flex h-8 items-center rounded-md border border-border px-3 text-xs font-medium hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const SELECT =
+  'h-8 min-w-0 max-w-full rounded-md border border-border bg-background px-2 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const SUMMARY =
+  'flex cursor-pointer list-none items-center gap-2 rounded-lg px-4 py-3 text-xs font-medium text-muted-foreground select-none hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden'
+
+function Chevron() {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 12 12"
+      className="size-3 shrink-0 transition-transform group-open/tools:rotate-90"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="m4.5 3 3 3-3 3" />
+    </svg>
+  )
+}
 
 export interface MoveOption {
   readonly id: number
@@ -25,6 +46,7 @@ export function ThreadToolsForm({
   moveTargets,
   heading,
   copy,
+  open = false,
   children,
 }: {
   threadId: number
@@ -34,74 +56,75 @@ export function ThreadToolsForm({
   moveTargets: readonly MoveOption[]
   heading: string
   copy: Copy
+  open?: boolean
   children?: React.ReactNode
 }) {
   const [state, action] = useActionState(threadToolAction, EMPTY_STATE)
 
   return (
-    <section
-      aria-label={heading}
-      className="flex flex-col gap-2 rounded-lg border border-border bg-secondary px-4 py-3"
-    >
-      <div className="flex flex-wrap items-center gap-3">
-        <span className="text-xs font-medium text-muted-foreground">{heading}</span>
-
-        <form action={action} className="flex flex-wrap items-center gap-3">
-          <input type="hidden" name="threadId" value={threadId} />
+    <section aria-label={heading} className="rounded-lg border border-border bg-secondary">
+      <details className="group/tools" open={open || state.error !== undefined ? true : undefined}>
+        <summary className={SUMMARY}>
+          <Chevron />
+          {heading}
+        </summary>
 
-          {rights.lock && (
-            <PendingButton name="tool" value={isLocked ? 'unlock' : 'lock'} className={BUTTON}>
-              {isLocked
-                ? fromCopy(copy, 'moderationForm.tool.unlock')
-                : fromCopy(copy, 'moderationForm.tool.lock')}
-            </PendingButton>
-          )}
-          {rights.stick && (
-            <PendingButton name="tool" value={isSticky ? 'unstick' : 'stick'} className={BUTTON}>
-              {isSticky
-                ? fromCopy(copy, 'moderationForm.tool.unpin')
-                : fromCopy(copy, 'moderationForm.tool.pin')}
-            </PendingButton>
-          )}
-          {rights.delete && (
-            <PendingButton
-              name="tool"
-              value="delete"
-              className={`${BUTTON} border-destructive/40 text-destructive`}
-            >
-              {fromCopy(copy, 'moderationForm.tool.deleteThread')}
-            </PendingButton>
-          )}
+        <div className="flex flex-col gap-2 px-4 pb-3">
+          <form action={action} className="flex flex-wrap items-center gap-2">
+            <input type="hidden" name="threadId" value={threadId} />
 
-          {rights.move && moveTargets.length > 0 && (
-            <span className="flex items-center gap-2">
-              <label className="flex items-center gap-2 text-xs">
-                <span className="sr-only">{fromCopy(copy, 'moderationForm.moveTo')}</span>
-                <select
-                  name="toForumId"
-                  className="h-8 rounded-md border border-border bg-background px-2 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-                >
-                  {moveTargets.map((forum) => (
-                    <option key={forum.id} value={forum.id}>
-                      {forum.title}
-                    </option>
-                  ))}
-                </select>
-              </label>
-              <PendingButton name="tool" value="move" className={BUTTON}>
-                {fromCopy(copy, 'moderationForm.tool.move')}
+            {rights.lock && (
+              <PendingButton name="tool" value={isLocked ? 'unlock' : 'lock'} className={BUTTON}>
+                {isLocked
+                  ? fromCopy(copy, 'moderationForm.tool.unlock')
+                  : fromCopy(copy, 'moderationForm.tool.lock')}
+              </PendingButton>
+            )}
+            {rights.stick && (
+              <PendingButton name="tool" value={isSticky ? 'unstick' : 'stick'} className={BUTTON}>
+                {isSticky
+                  ? fromCopy(copy, 'moderationForm.tool.unpin')
+                  : fromCopy(copy, 'moderationForm.tool.pin')}
               </PendingButton>
-              <PendingButton name="tool" value="copy" className={BUTTON}>
-                {fromCopy(copy, 'moderationForm.tool.copy')}
+            )}
+            {rights.delete && (
+              <PendingButton
+                name="tool"
+                value="delete"
+                className={`${BUTTON} border-destructive/40 text-destructive`}
+              >
+                {fromCopy(copy, 'moderationForm.tool.deleteThread')}
               </PendingButton>
-            </span>
-          )}
-        </form>
+            )}
+
+            {rights.move && moveTargets.length > 0 && (
+              <span className="flex min-w-0 max-w-full basis-full flex-wrap items-center gap-2 sm:basis-auto">
+                <label className="flex min-w-0 max-w-full flex-1 items-center text-xs sm:flex-none">
+                  <span className="sr-only">{fromCopy(copy, 'moderationForm.moveTo')}</span>
+                  <select name="toForumId" className={`${SELECT} w-full sm:w-auto sm:max-w-56`}>
+                    {moveTargets.map((forum) => (
+                      <option key={forum.id} value={forum.id}>
+                        {forum.title}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+                <PendingButton name="tool" value="move" className={BUTTON}>
+                  {fromCopy(copy, 'moderationForm.tool.move')}
+                </PendingButton>
+                <PendingButton name="tool" value="copy" className={BUTTON}>
+                  {fromCopy(copy, 'moderationForm.tool.copy')}
+                </PendingButton>
+              </span>
+            )}
+          </form>
+
+          {children}
 
-        {children}
-      </div>
+          <FormError message={state.error} />
+        </div>
+      </details>
 
-      <FormError message={state.error} />
       <ConfirmDialog confirm={state.confirm} action={action} />
     </section>
   )

package/src/components/moderation/warning-forms.tsx

@@ -9,7 +9,7 @@ import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
 const FIELD =
-  'w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+  'w-full rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
 const BUTTON =
   'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'

package/src/components/shell/header-peek-enhancer.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { useEffect } from 'react'
+
+const PEEKING_HEADER = '[data-header-peek]'
+
+const SETTLE = 8
+
+function peek(header: HTMLElement): () => void {
+  let last = window.scrollY
+  let ticking = false
+
+  function settle() {
+    ticking = false
+    const y = Math.max(0, window.scrollY)
+    const delta = y - last
+
+    if (y <= header.offsetHeight) {
+      header.removeAttribute('data-peek')
+    } else if (delta > SETTLE) {
+      header.setAttribute('data-peek', '')
+    } else if (delta < -SETTLE) {
+      header.removeAttribute('data-peek')
+    } else {
+      return
+    }
+    last = y
+  }
+
+  function onScroll() {
+    if (ticking) return
+    ticking = true
+    window.requestAnimationFrame(settle)
+  }
+
+  function onFocusIn() {
+    header.removeAttribute('data-peek')
+  }
+
+  window.addEventListener('scroll', onScroll, { passive: true })
+  header.addEventListener('focusin', onFocusIn)
+
+  return () => {
+    window.removeEventListener('scroll', onScroll)
+    header.removeEventListener('focusin', onFocusIn)
+    header.removeAttribute('data-peek')
+  }
+}
+
+export function HeaderPeekEnhancer() {
+  useEffect(() => {
+    const header = document.querySelector<HTMLElement>(PEEKING_HEADER)
+    if (header === null) return
+    return peek(header)
+  }, [])
+
+  return null
+}

package/src/components/shell/page-shell.tsx

@@ -3,6 +3,7 @@ import { currentRequestId } from '@meith/core/logger'
 import { requireSlot, slotCopy } from '@meith/theme-kit'
 
 import { LogoutForm } from '@/components/account/logout-form'
+import { HeaderPeekEnhancer } from '@/components/shell/header-peek-enhancer'
 import { InstallBanner } from '@/components/shell/install-banner'
 import { NavDisclosureEnhancer } from '@/components/shell/nav-disclosure-enhancer'
 import { NotificationMenu } from '@/components/shell/notification-menu'
@@ -154,6 +155,7 @@ export async function PageShell({ actor, children }: { actor: Actor; children: R
       </Header>
 
       <NavDisclosureEnhancer />
+      <HeaderPeekEnhancer />
 
       {await boardRegion('header.notice', actor)}
 

package/src/components/shell/panel-list.tsx

@@ -4,13 +4,13 @@ export const PANEL_LIST =
   'flex flex-col divide-y divide-border overflow-hidden rounded-xl border border-border bg-card shadow-elevation'
 
 export const PANEL_ROW =
-  'flex flex-wrap items-center justify-between gap-x-3 gap-y-2 px-4 py-3 transition-colors hover:bg-muted/40'
+  'flex flex-wrap items-center justify-between gap-x-3 gap-y-2 px-4 py-3 transition-colors hover:bg-muted/40 sm:px-5'
 
 export const PANEL_CARD =
-  'flex flex-col gap-3 rounded-xl border border-border bg-card p-4 shadow-elevation'
+  'flex flex-col gap-4 rounded-xl border border-border bg-card p-5 shadow-elevation sm:p-6'
 
 export const PANEL_NOTE =
-  'rounded-xl border border-border bg-card p-4 text-sm text-muted-foreground shadow-elevation'
+  'rounded-xl border border-border bg-card px-5 py-4 text-sm text-muted-foreground shadow-elevation'
 
 export function PanelList({
   children,
@@ -85,7 +85,7 @@ export function PanelEmpty({
   readonly description?: React.ReactNode
 }) {
   return (
-    <div className="rounded-xl border border-border bg-card shadow-elevation">
+    <div className="rounded-xl border border-dashed border-border bg-card/60">
       <Empty className="py-10">
         <EmptyTitle>{title}</EmptyTitle>
         {description !== undefined && <EmptyDescription>{description}</EmptyDescription>}

package/src/components/shell/panel-overview.tsx

@@ -12,13 +12,15 @@ export interface WaitingItem {
 
 function PanelWaiting({ item }: { item: WaitingItem }) {
   return (
-    <Card className="flex-1 border-moderation-pending/50">
-      <CardContent className="flex items-center justify-between gap-4 p-4">
+    <Card className="flex-1 rounded-xl border-l-4 border-l-thread-pinned">
+      <CardContent className="flex items-center justify-between gap-4 p-5">
         <div>
-          <p className="text-2xl font-semibold tabular-nums text-foreground">{item.count}</p>
+          <p className="text-3xl font-semibold tracking-tight tabular-nums text-foreground">
+            {item.count}
+          </p>
           <p className="text-sm text-muted-foreground">{item.count === 1 ? item.one : item.many}</p>
         </div>
-        <a href={item.href} className={buttonVariants({ variant: 'outline', size: 'sm' })}>
+        <a href={item.href} className={buttonVariants({ variant: 'primary', size: 'sm' })}>
           {item.action}
         </a>
       </CardContent>
@@ -39,12 +41,29 @@ export function PanelWaitingList({
 
   if (waiting.length === 0) {
     return (
-      <Card>
+      <div className="rounded-xl border border-dashed border-border bg-card/60">
         <Empty className="py-8">
+          <span
+            aria-hidden="true"
+            className="mb-1 flex size-9 items-center justify-center rounded-full bg-moderation-approved/10 text-moderation-approved"
+          >
+            <svg
+              aria-hidden="true"
+              viewBox="0 0 16 16"
+              className="size-4"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.75"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="m3.5 8.5 3 3 6-7" />
+            </svg>
+          </span>
           <EmptyTitle>{emptyTitle}</EmptyTitle>
           <EmptyDescription>{emptyDescription}</EmptyDescription>
         </Empty>
-      </Card>
+      </div>
     )
   }
 
@@ -62,15 +81,29 @@ export function PanelSectionGrid({ sections }: { sections: readonly PanelSection
     <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
       {sections.map((section) => (
         <li key={section.href}>
-          <Card className="relative h-full transition-colors hover:bg-muted/50">
-            <CardContent className="flex flex-col gap-0.5 p-4">
-              <a
-                href={section.href}
-                className="text-sm font-medium text-foreground underline-offset-2 hover:underline"
-              >
-                <span className="absolute inset-0" />
-                {section.title}
-              </a>
+          <Card className="group relative h-full rounded-xl transition-[border-color,box-shadow] hover:border-primary/40 hover:shadow-lg">
+            <CardContent className="flex h-full flex-col gap-1 p-4">
+              <span className="flex items-center justify-between gap-2">
+                <a
+                  href={section.href}
+                  className="text-sm font-semibold text-foreground underline-offset-2 group-hover:text-primary"
+                >
+                  <span className="absolute inset-0" />
+                  {section.title}
+                </a>
+                <svg
+                  aria-hidden="true"
+                  viewBox="0 0 16 16"
+                  className="size-4 shrink-0 text-muted-foreground/60 transition-[color,transform] group-hover:translate-x-0.5 group-hover:text-primary"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M3.5 8h9M8.5 4l4 4-4 4" />
+                </svg>
+              </span>
               <p className="text-xs text-muted-foreground">{section.blurb}</p>
             </CardContent>
           </Card>

package/src/server/upgrade-notice.ts

@@ -17,7 +17,7 @@ import { planUpgrade, type UpgradeState, upgradeNotice } from '@meith/upgrade'
 
 import { activeDefinitions } from './plugin-host'
 
-export const CODE_VERSION = '0.33.2'
+export const CODE_VERSION = '0.33.4'
 
 export interface UpgradeApplied {
   readonly plugins: readonly string[]

package/src/styles/globals.css

@@ -485,10 +485,12 @@
   /*
    * A permalink to `#post-12` otherwise lands the post flush against the top
    * of the viewport, with its own header cropped and the previous post's footer
-   * nowhere — the reader cannot tell they arrived at the right one.
+   * nowhere — the reader cannot tell they arrived at the right one. The
+   * default theme's header is sticky and 3.5rem tall, so the margin clears it
+   * with room to spare.
    */
   :target {
-    scroll-margin-block-start: 1.5rem;
+    scroll-margin-block-start: 5rem;
   }
 
   ::selection {
@@ -954,6 +956,34 @@ div.md-directive {
   margin-block-end: 0;
 }
 
+/*
+ * A themed arrow on every single-choice <select>.
+ *
+ * The browser's own arrow ignores the palette — it stays the platform grey in
+ * both schemes and sits hard against the field's edge. `appearance: none`
+ * removes it, and two small gradient squares draw a chevron in
+ * `--muted-foreground` instead, so it follows a runtime token override like
+ * everything else. Gradients rather than an SVG data URI because a URI cannot
+ * read a custom property, and this file never hardcodes a colour twice.
+ * Multi-selects and list boxes keep their native rendering: they have no arrow.
+ */
+select:not([multiple], [size]) {
+  appearance: none;
+  padding-inline-end: 2.25rem;
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),
+    linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
+  background-position:
+    calc(100% - 1.05rem) 50%,
+    calc(100% - 0.75rem) 50%;
+  background-size: 0.3rem 0.3rem;
+  background-repeat: no-repeat;
+}
+
+select:not([multiple], [size]):disabled {
+  opacity: 0.6;
+}
+
 @media (pointer: coarse) {
   input:not(
     [type="checkbox"],

package/src/view/navigation.ts

@@ -22,27 +22,36 @@ export interface BuiltInNavigationItem {
   readonly messageKey: string
   readonly href: string
   readonly audience: NavigationAudience
+  readonly shown: boolean
 }
 
 export const BUILT_IN_NAVIGATION: readonly BuiltInNavigationItem[] = [
-  { key: 'home', messageKey: 'nav.home', href: '/', audience: 'all' },
-  { key: 'new-posts', messageKey: 'nav.newPosts', href: '/discover/new', audience: 'all' },
+  { key: 'home', messageKey: 'nav.home', href: '/', audience: 'all', shown: true },
+  {
+    key: 'new-posts',
+    messageKey: 'nav.newPosts',
+    href: '/discover/new',
+    audience: 'all',
+    shown: true,
+  },
   {
     key: 'unanswered',
     messageKey: 'nav.unanswered',
     href: '/discover/unanswered',
     audience: 'all',
+    shown: false,
   },
   {
     key: 'my-posts',
     messageKey: 'nav.myPosts',
     href: '/discover/participated',
     audience: 'members',
+    shown: false,
   },
-  { key: 'search', messageKey: 'nav.search', href: '/search', audience: 'all' },
-  { key: 'online', messageKey: 'nav.online', href: '/online', audience: 'all' },
-  { key: 'members', messageKey: 'nav.members', href: '/members', audience: 'all' },
-  { key: 'staff', messageKey: 'nav.staff', href: '/staff', audience: 'all' },
+  { key: 'search', messageKey: 'nav.search', href: '/search', audience: 'all', shown: true },
+  { key: 'online', messageKey: 'nav.online', href: '/online', audience: 'all', shown: false },
+  { key: 'members', messageKey: 'nav.members', href: '/members', audience: 'all', shown: false },
+  { key: 'staff', messageKey: 'nav.staff', href: '/staff', audience: 'all', shown: false },
 ]
 
 const SEARCH_KEY = 'search'
@@ -64,7 +73,7 @@ export function defaultNavigationItems(): readonly NavigationItemRow[] {
     displayOrder: index * 10,
     audience: item.audience,
     newTab: false,
-    enabled: true,
+    enabled: item.shown,
     visibleToGroups: [],
   }))
 }