@meith/web 0.25.0 → 0.26.0

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

@@ -5,7 +5,7 @@ import { useActionState } from 'react'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { messageBulkAction, sendMessageAction } from '@/server/message-actions'
 
-import { FormError } from '../auth/form-controls'
+import { FormError, PendingButton } from '../auth/form-controls'
 import { MarkdownEditor } from '../content/markdown-editor'
 import { type Copy, fromCopy } from '../shell/copy'
 
@@ -89,9 +89,9 @@ export function ComposeForm({
       </label>
 
       <div>
-        <button type="submit" className={BUTTON}>
+        <PendingButton className={BUTTON} showWorking>
           {fromCopy(copy, 'messageForm.send')}
-        </button>
+        </PendingButton>
       </div>
     </form>
   )
@@ -120,31 +120,31 @@ export function MessageActionBar({
 
         {folder === 'inbox' && (
           <>
-            <button type="submit" name="command" value="read" className={SECONDARY}>
+            <PendingButton name="command" value="read" className={SECONDARY}>
               {fromCopy(copy, 'messageForm.markRead')}
-            </button>
-            <button type="submit" name="command" value="unread" className={SECONDARY}>
+            </PendingButton>
+            <PendingButton name="command" value="unread" className={SECONDARY}>
               {fromCopy(copy, 'messageForm.markUnread')}
-            </button>
+            </PendingButton>
           </>
         )}
 
         {folder === 'trash' ? (
           <>
-            <button type="submit" name="command" value="restore" className={SECONDARY}>
+            <PendingButton name="command" value="restore" className={SECONDARY}>
               {fromCopy(copy, 'messageForm.restore')}
-            </button>
-            <button type="submit" name="command" value="delete" className={SECONDARY}>
+            </PendingButton>
+            <PendingButton name="command" value="delete" className={SECONDARY}>
               {fromCopy(copy, 'messageForm.deleteForever')}
-            </button>
-            <button type="submit" name="command" value="empty" className={SECONDARY}>
+            </PendingButton>
+            <PendingButton name="command" value="empty" className={SECONDARY}>
               {fromCopy(copy, 'messageForm.emptyTrash')}
-            </button>
+            </PendingButton>
           </>
         ) : (
-          <button type="submit" name="command" value="trash" className={SECONDARY}>
+          <PendingButton name="command" value="trash" className={SECONDARY}>
             {fromCopy(copy, 'messageForm.moveToTrash')}
-          </button>
+          </PendingButton>
         )}
       </div>
     </form>

package/src/components/moderation/inline-moderation-form.tsx

@@ -7,7 +7,7 @@ import { EMPTY_STATE } from '@/server/auth-form-state'
 import { inlineModerateAction } from '@/server/inline-moderation-actions'
 import { splitSelectedAction } from '@/server/surgery-actions'
 
-import { FormError } from '../auth/form-controls'
+import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
 const BUTTON =
@@ -70,34 +70,34 @@ export function InlineModerationForm({
         </span>
 
         {rights.approve && (
-          <button type="submit" name="tool" value="approve" className={BUTTON}>
+          <PendingButton name="tool" value="approve" className={BUTTON}>
             {fromCopy(copy, 'moderationForm.inline.approve')}
-          </button>
+          </PendingButton>
         )}
         {rights.lock && scope === 'threads' && (
           <>
-            <button type="submit" name="tool" value="lock" className={BUTTON}>
+            <PendingButton name="tool" value="lock" className={BUTTON}>
               {fromCopy(copy, 'moderationForm.tool.lock')}
-            </button>
-            <button type="submit" name="tool" value="unlock" className={BUTTON}>
+            </PendingButton>
+            <PendingButton name="tool" value="unlock" className={BUTTON}>
               {fromCopy(copy, 'moderationForm.tool.unlock')}
-            </button>
+            </PendingButton>
           </>
         )}
         {rights.stick && scope === 'threads' && (
           <>
-            <button type="submit" name="tool" value="stick" className={BUTTON}>
+            <PendingButton name="tool" value="stick" className={BUTTON}>
               {fromCopy(copy, 'moderationForm.tool.pin')}
-            </button>
-            <button type="submit" name="tool" value="unstick" className={BUTTON}>
+            </PendingButton>
+            <PendingButton name="tool" value="unstick" className={BUTTON}>
               {fromCopy(copy, 'moderationForm.tool.unpin')}
-            </button>
+            </PendingButton>
           </>
         )}
         {rights.restore && (
-          <button type="submit" name="tool" value="restore" className={BUTTON}>
+          <PendingButton name="tool" value="restore" className={BUTTON}>
             {fromCopy(copy, 'moderationForm.inline.restore')}
-          </button>
+          </PendingButton>
         )}
 
         {rights.move && scope === 'threads' && moveTargets.length > 0 && (
@@ -115,9 +115,9 @@ export function InlineModerationForm({
                 ))}
               </select>
             </label>
-            <button type="submit" name="tool" value="move" className={BUTTON}>
+            <PendingButton name="tool" value="move" className={BUTTON}>
               {fromCopy(copy, 'moderationForm.tool.move')}
-            </button>
+            </PendingButton>
           </span>
         )}
 
@@ -136,21 +136,20 @@ export function InlineModerationForm({
                 className="h-8 w-48 rounded-md border border-border bg-background px-2 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
               />
             </label>
-            <button type="submit" formAction={splitAction} className={BUTTON}>
+            <PendingButton formAction={splitAction} className={BUTTON}>
               {fromCopy(copy, 'moderationForm.inline.splitOut')}
-            </button>
+            </PendingButton>
           </span>
         )}
 
         {rights.delete && (
-          <button
-            type="submit"
+          <PendingButton
             name="tool"
             value="delete"
             className={`${BUTTON} border-destructive/40 text-destructive`}
           >
             {fromCopy(copy, 'moderationForm.inline.delete')}
-          </button>
+          </PendingButton>
         )}
       </form>
     </div>

package/src/components/moderation/queue-form.tsx

@@ -5,7 +5,7 @@ import { useActionState } from 'react'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { moderateQueueAction } from '@/server/moderation-actions'
 
-import { FormError } from '../auth/form-controls'
+import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 
 export interface QueueFormRow {
@@ -74,22 +74,20 @@ export function QueueForm({ rows, copy }: { rows: readonly QueueFormRow[]; copy:
       </ul>
 
       <div className="flex flex-wrap gap-3">
-        <button
-          type="submit"
+        <PendingButton
           name="decision"
           value="approve"
           className="inline-flex h-10 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"
         >
           {fromCopy(copy, 'moderationForm.queue.approve')}
-        </button>
-        <button
-          type="submit"
+        </PendingButton>
+        <PendingButton
           name="decision"
           value="reject"
           className="inline-flex h-10 items-center justify-center rounded-md border border-destructive/40 px-4 text-sm font-medium text-destructive transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
         >
           {fromCopy(copy, 'moderationForm.queue.reject')}
-        </button>
+        </PendingButton>
       </div>
     </form>
   )

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

@@ -7,7 +7,7 @@ import { Card, CardContent, Field, Textarea } from '@meith/ui'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { assignReportAction, closeReportAction, fileReportAction } from '@/server/report-actions'
 
-import { FormError, SubmitButton } from '../auth/form-controls'
+import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
 export function ReportForm({
@@ -66,14 +66,14 @@ export function AssignReportForm({
       <FormError message={state.error} />
       <input type="hidden" name="reportId" value={reportId} />
       <input type="hidden" name="take" value={mine ? '0' : '1'} />
-      <button
-        type="submit"
+      <PendingButton
+        showWorking
         className="text-xs font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
       >
         {mine
           ? fromCopy(copy, 'moderationForm.report.putBack')
           : fromCopy(copy, 'moderationForm.report.take')}
-      </button>
+      </PendingButton>
     </form>
   )
 }
@@ -98,22 +98,20 @@ export function CloseReportForm({ reportId, copy }: { reportId: number; copy: Co
         />
       </label>
       <div className="flex flex-wrap gap-2">
-        <button
-          type="submit"
+        <PendingButton
           name="status"
           value="resolved"
           className="inline-flex h-8 items-center rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
         >
           {fromCopy(copy, 'moderationForm.report.resolve')}
-        </button>
-        <button
-          type="submit"
+        </PendingButton>
+        <PendingButton
           name="status"
           value="rejected"
           className="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"
         >
           {fromCopy(copy, 'moderationForm.report.dismiss')}
-        </button>
+        </PendingButton>
       </div>
     </form>
   )

package/src/components/moderation/signature-lock-form.tsx

@@ -5,7 +5,7 @@ import { useActionState } from 'react'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { setAvatarLockAction, setSignatureLockAction } from '@/server/moderation-actions'
 
-import { FormError } from '../auth/form-controls'
+import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
 const REASON_INPUT = 'h-8 rounded-md border border-border bg-background px-2 text-xs'
@@ -38,11 +38,11 @@ export function SignatureLockForm({
         />
       )}
 
-      <button type="submit" className={LOCK_BUTTON}>
+      <PendingButton showWorking className={LOCK_BUTTON}>
         {locked
           ? fromCopy(copy, 'moderationForm.lock.unlockSignature')
           : fromCopy(copy, 'moderationForm.lock.signature')}
-      </button>
+      </PendingButton>
     </form>
   )
 }
@@ -73,11 +73,11 @@ export function AvatarLockForm({
         />
       )}
 
-      <button type="submit" className={LOCK_BUTTON}>
+      <PendingButton showWorking className={LOCK_BUTTON}>
         {locked
           ? fromCopy(copy, 'moderationForm.lock.unlockAvatar')
           : fromCopy(copy, 'moderationForm.lock.avatar')}
-      </button>
+      </PendingButton>
     </form>
   )
 }

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

@@ -5,7 +5,7 @@ import { useActionState } from 'react'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { mergeThreadAction, splitThreadAction } from '@/server/surgery-actions'
 
-import { FormError } from '../auth/form-controls'
+import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 
 const BUTTON =
@@ -64,9 +64,9 @@ export function ThreadSurgeryForm({
                 className={`${FIELD} w-48`}
               />
             </label>
-            <button type="submit" className={BUTTON}>
+            <PendingButton showWorking className={BUTTON}>
               {fromCopy(copy, 'moderationForm.surgery.split')}
-            </button>
+            </PendingButton>
           </div>
           <FormError message={splitState.error} />
         </form>
@@ -88,9 +88,12 @@ export function ThreadSurgeryForm({
                 className={`${FIELD} w-40`}
               />
             </label>
-            <button type="submit" className={`${BUTTON} border-destructive/40 text-destructive`}>
+            <PendingButton
+              showWorking
+              className={`${BUTTON} border-destructive/40 text-destructive`}
+            >
               {fromCopy(copy, 'moderationForm.surgery.merge')}
-            </button>
+            </PendingButton>
           </div>
           <FormError message={mergeState.error} />
         </form>

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

@@ -5,7 +5,7 @@ import { useActionState } from 'react'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { threadToolAction } from '@/server/thread-tool-actions'
 
-import { FormError } from '../auth/form-controls'
+import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
 const BUTTON =
@@ -49,38 +49,27 @@ export function ThreadToolsForm({
           <input type="hidden" name="threadId" value={threadId} />
 
           {rights.lock && (
-            <button
-              type="submit"
-              name="tool"
-              value={isLocked ? 'unlock' : 'lock'}
-              className={BUTTON}
-            >
+            <PendingButton name="tool" value={isLocked ? 'unlock' : 'lock'} className={BUTTON}>
               {isLocked
                 ? fromCopy(copy, 'moderationForm.tool.unlock')
                 : fromCopy(copy, 'moderationForm.tool.lock')}
-            </button>
+            </PendingButton>
           )}
           {rights.stick && (
-            <button
-              type="submit"
-              name="tool"
-              value={isSticky ? 'unstick' : 'stick'}
-              className={BUTTON}
-            >
+            <PendingButton name="tool" value={isSticky ? 'unstick' : 'stick'} className={BUTTON}>
               {isSticky
                 ? fromCopy(copy, 'moderationForm.tool.unpin')
                 : fromCopy(copy, 'moderationForm.tool.pin')}
-            </button>
+            </PendingButton>
           )}
           {rights.delete && (
-            <button
-              type="submit"
+            <PendingButton
               name="tool"
               value="delete"
               className={`${BUTTON} border-destructive/40 text-destructive`}
             >
               {fromCopy(copy, 'moderationForm.tool.deleteThread')}
-            </button>
+            </PendingButton>
           )}
 
           {rights.move && moveTargets.length > 0 && (
@@ -98,12 +87,12 @@ export function ThreadToolsForm({
                   ))}
                 </select>
               </label>
-              <button type="submit" name="tool" value="move" className={BUTTON}>
+              <PendingButton name="tool" value="move" className={BUTTON}>
                 {fromCopy(copy, 'moderationForm.tool.move')}
-              </button>
-              <button type="submit" name="tool" value="copy" className={BUTTON}>
+              </PendingButton>
+              <PendingButton name="tool" value="copy" className={BUTTON}>
                 {fromCopy(copy, 'moderationForm.tool.copy')}
-              </button>
+              </PendingButton>
             </span>
           )}
         </form>

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

@@ -5,7 +5,7 @@ import { useActionState } from 'react'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { issueWarningAction, revokeWarningAction } from '@/server/warning-actions'
 
-import { FormError } from '../auth/form-controls'
+import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
 const FIELD =
@@ -80,9 +80,9 @@ export function IssueWarningForm({
       </label>
 
       <div>
-        <button type="submit" className={BUTTON}>
+        <PendingButton showWorking className={BUTTON}>
           {fromCopy(copy, 'moderationForm.warn.submit')}
-        </button>
+        </PendingButton>
       </div>
     </form>
   )
@@ -114,12 +114,12 @@ export function RevokeWarningForm({
           className="h-8 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"
         />
       </label>
-      <button
-        type="submit"
+      <PendingButton
+        showWorking
         className="inline-flex h-8 shrink-0 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"
       >
         {fromCopy(copy, 'moderationForm.warn.revoke')}
-      </button>
+      </PendingButton>
     </form>
   )
 }

package/src/components/shell/onboarding-banner.tsx

@@ -1,3 +1,4 @@
+import { PendingButton } from '@/components/auth/form-controls'
 import { BOARD_MEASURE } from '@/components/shell/measure'
 import type { OnboardingNoticeModel } from '@/server/onboarding'
 import { dismissOnboardingAction } from '@/server/onboarding-actions'
@@ -29,9 +30,12 @@ export function OnboardingBanner({
 
         <form action={dismissOnboardingAction}>
           <input type="hidden" name="panel" value={panel} />
-          <button type="submit" className="text-xs text-muted-foreground hover:text-foreground">
+          <PendingButton
+            showWorking
+            className="text-xs text-muted-foreground hover:text-foreground"
+          >
             {dismissLabel}
-          </button>
+          </PendingButton>
         </form>
       </div>
     </div>

package/src/components/shell/theme-switcher.tsx

@@ -1,3 +1,4 @@
+import { PendingButton } from '@/components/auth/form-controls'
 import { MonitorIcon, MoonIcon, SunIcon } from '@/components/shell/appearance-icons'
 import { BOARD_MEASURE } from '@/components/shell/measure'
 import { setAppearanceAction } from '@/server/appearance-actions'
@@ -50,12 +51,12 @@ export async function ThemeSwitcher() {
                   </option>
                 ))}
               </select>
-              <button
-                type="submit"
+              <PendingButton
+                showWorking
                 className="h-8 rounded-md border border-border px-2.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
               >
                 {t.t('appearance.apply')}
-              </button>
+              </PendingButton>
             </form>
           )}
 
@@ -70,9 +71,8 @@ export async function ThemeSwitcher() {
                 const label = t.t(SCHEME_LABEL_KEY[option])
                 const selected = scheme === option
                 return (
-                  <button
+                  <PendingButton
                     key={option}
-                    type="submit"
                     name="scheme"
                     value={option}
                     title={label}
@@ -85,7 +85,7 @@ export async function ThemeSwitcher() {
                   >
                     <Icon />
                     <span className="sr-only">{label}</span>
-                  </button>
+                  </PendingButton>
                 )
               })}
             </span>

package/src/components/shell/view-tabs.tsx

@@ -21,27 +21,32 @@ export function ViewTabs({
   if (tabs.length === 0) return null
 
   return (
-    <nav aria-label={label} className={cn('flex items-center gap-x-3', className)}>
-      <ul className="-my-1.5 flex min-w-0 flex-1 items-center gap-1 overflow-x-auto py-1.5">
+    <nav
+      aria-label={label}
+      className={cn('flex flex-wrap items-center gap-x-3 gap-y-2', className)}
+    >
+      <ul className="inline-flex max-w-full items-center gap-1 overflow-x-auto rounded-lg border border-border bg-surface p-1">
         {tabs.map((tab) => (
           <li key={tab.href} className="shrink-0">
             <a
               href={tab.href}
               {...(tab.isCurrent ? { 'aria-current': 'page' as const } : {})}
               className={cn(
-                'inline-flex h-9 items-center gap-1.5 rounded-full px-3.5 text-sm font-medium whitespace-nowrap transition-colors',
+                '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',
                 tab.isCurrent
-                  ? 'bg-primary font-semibold text-primary-foreground'
-                  : 'text-muted-foreground hover:bg-accent hover:text-foreground',
+                  ? 'bg-card font-semibold text-foreground shadow-sm'
+                  : 'font-medium text-muted-foreground hover:text-foreground',
               )}
             >
               {tab.label}
               {tab.count !== undefined && tab.count > 0 && (
                 <span
                   className={cn(
-                    'rounded-full px-1.5 text-xs font-semibold tabular-nums',
-                    tab.isCurrent ? 'bg-primary-foreground/20' : 'bg-secondary',
+                    'rounded px-1.5 text-xs font-semibold tabular-nums',
+                    tab.isCurrent
+                      ? 'bg-secondary text-secondary-foreground'
+                      : 'bg-muted text-muted-foreground',
                   )}
                 >
                   {tab.count}

package/src/server/theme.ts

@@ -25,7 +25,7 @@ export const buildTheme: ResolvedTheme = RESOLVED.get(forumConfig.defaultTheme)!
 
 if (buildTheme === undefined) {
   throw new Error(
-    `community.config.ts: defaultTheme "${forumConfig.defaultTheme}" fills no slots, so this ` +
+    `meith.config.ts: defaultTheme "${forumConfig.defaultTheme}" fills no slots, so this ` +
       'board cannot render a page. A token-only theme is legitimate as an alternate, ' +
       'never as the theme a build is made of.',
   )

package/src/server/upgrade-notice.ts

@@ -6,7 +6,7 @@ import { planUpgrade, type UpgradeState, upgradeNotice } from '@meith/upgrade'
 
 import { activeDefinitions } from './plugin-host'
 
-export const CODE_VERSION = '0.25.0'
+export const CODE_VERSION = '0.26.0'
 
 export async function pendingUpgradeNotice(): Promise<string | null> {
   if (env.DATA_SOURCE !== 'postgres') return null