@meith/web 0.33.3 → 0.33.4

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

@@ -644,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/web",
-  "version": "0.33.3",
+  "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.3",
-    "@meith/admin": "0.33.3",
-    "@meith/antispam": "0.33.3",
-    "@meith/api": "0.33.3",
-    "@meith/attachments": "0.33.3",
-    "@meith/authorization": "0.33.3",
-    "@meith/avatars": "0.33.3",
-    "@meith/board-digest": "0.33.3",
-    "@meith/core": "0.33.3",
-    "@meith/db": "0.33.3",
-    "@meith/demo": "0.33.3",
-    "@meith/drafts": "0.33.3",
-    "@meith/drivers": "0.33.3",
-    "@meith/events": "0.33.3",
-    "@meith/forums": "0.33.3",
-    "@meith/groups": "0.33.3",
-    "@meith/i18n": "0.33.3",
-    "@meith/import": "0.33.3",
-    "@meith/install": "0.33.3",
-    "@meith/mail": "0.33.3",
-    "@meith/markdown": "0.33.3",
-    "@meith/marketplace": "0.33.3",
-    "@meith/messages": "0.33.3",
-    "@meith/moderation": "0.33.3",
-    "@meith/notifications": "0.33.3",
-    "@meith/plugin-calendar": "0.33.3",
-    "@meith/plugin-dues": "0.33.3",
-    "@meith/plugin-kit": "0.33.3",
-    "@meith/polls": "0.33.3",
-    "@meith/posts": "0.33.3",
-    "@meith/profile-fields": "0.33.3",
-    "@meith/reputation": "0.33.3",
-    "@meith/relations": "0.33.3",
-    "@meith/runtime": "0.33.3",
-    "@meith/search": "0.33.3",
-    "@meith/settings": "0.33.3",
-    "@meith/signatures": "0.33.3",
-    "@meith/subscriptions": "0.33.3",
-    "@meith/tasks": "0.33.3",
-    "@meith/theme-default": "0.33.3",
-    "@meith/theme-clubhouse": "0.33.3",
-    "@meith/theme-kit": "0.33.3",
-    "@meith/theme-midnight": "0.33.3",
-    "@meith/theme-phasebook": "0.33.3",
-    "@meith/theme-raidframe": "0.33.3",
-    "@meith/threads": "0.33.3",
-    "@meith/ui": "0.33.3",
-    "@meith/upgrade": "0.33.3"
+    "@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/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/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/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.3'
+export const CODE_VERSION = '0.33.4'
 
 export interface UpgradeApplied {
   readonly plugins: readonly string[]

package/src/styles/globals.css

@@ -486,11 +486,11 @@
    * 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. The
-   * default theme's header is sticky — 3.5rem on a phone, 6.25rem with its
-   * navigation row on a desktop — so the margin clears it with room to spare.
+   * default theme's header is sticky and 3.5rem tall, so the margin clears it
+   * with room to spare.
    */
   :target {
-    scroll-margin-block-start: 7.5rem;
+    scroll-margin-block-start: 5rem;
   }
 
   ::selection {

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: [],
   }))
 }