@meith/web 0.35.1 → 0.36.0

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

@@ -2,6 +2,8 @@
 
 import { useActionState } from 'react'
 
+import { buttonVariants, controlVariants } from '@meith/ui'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { threadToolAction } from '@/server/thread-tool-actions'
 
@@ -9,10 +11,8 @@ import { FormError, PendingButton } from '../auth/form-controls'
 import { ConfirmDialog } from '../shell/confirm-dialog'
 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 BUTTON = buttonVariants({ variant: 'outline', size: 'sm' })
+const SELECT = controlVariants({ size: 'sm', className: 'w-auto max-w-full' })
 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'
 

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

@@ -2,17 +2,17 @@
 
 import { useActionState } from 'react'
 
+import { buttonVariants, controlVariants } from '@meith/ui'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { issueWarningAction, revokeWarningAction } from '@/server/warning-actions'
 
 import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
-const FIELD =
-  '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 FIELD = controlVariants()
 
-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'
+const BUTTON = buttonVariants({ variant: 'primary', size: 'default' })
 
 export interface WarningTypeOption {
   readonly id: number
@@ -45,7 +45,7 @@ export function IssueWarningForm({
       <input type="hidden" name="userId" value={userId} />
       {postId !== null && <input type="hidden" name="postId" value={postId} />}
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'moderationForm.warn.reason')}</span>
         <select name="typeId" className={FIELD} defaultValue="">
           <option value="">{fromCopy(copy, 'moderationForm.warn.somethingElse')}</option>
@@ -58,20 +58,20 @@ export function IssueWarningForm({
       </label>
 
       <div className="grid gap-4 sm:grid-cols-[1fr_8rem]">
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           <span className="font-medium">{fromCopy(copy, 'moderationForm.warn.titleLabel')}</span>
           <input type="text" name="title" maxLength={150} className={FIELD} />
           <span className="text-xs text-muted-foreground">
             {fromCopy(copy, 'moderationForm.warn.titleHint')}
           </span>
         </label>
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           <span className="font-medium">{fromCopy(copy, 'moderationForm.warn.points')}</span>
           <input type="number" name="points" min={1} max={100} className={FIELD} />
         </label>
       </div>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'moderationForm.warn.what')}</span>
         <textarea name="reason" rows={4} maxLength={2000} className={FIELD} required />
         <span className="text-xs text-muted-foreground">

package/src/components/shell/install-action.tsx

@@ -2,6 +2,8 @@
 
 import { useEffect, useState } from 'react'
 
+import { buttonVariants } from '@meith/ui'
+
 import { INSTALL_BANNER_COOKIE, INSTALL_BANNER_COOKIE_MAX_AGE } from '@/view/install-banner'
 
 interface InstallPrompt extends Event {
@@ -23,8 +25,7 @@ function isInstallPrompt(event: Event): event is InstallPrompt {
   return 'prompt' in event && 'userChoice' in event
 }
 
-const BUTTON =
-  'inline-flex h-8 items-center rounded-md border border-border bg-background px-3 text-xs font-medium text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const BUTTON = buttonVariants({ variant: 'outline', size: 'sm' })
 
 export function InstallAction({ label, how }: { label: string; how: string }) {
   const [pending, setPending] = useState<InstallPrompt | null>(null)

package/src/components/shell/nav-disclosure-enhancer.tsx

@@ -19,6 +19,9 @@ export function NavDisclosureEnhancer() {
       if (event.key !== 'Escape') return
 
       for (const details of document.querySelectorAll<HTMLDetailsElement>(OPEN_DISCLOSURES)) {
+        if (details.contains(document.activeElement)) {
+          details.querySelector('summary')?.focus()
+        }
         details.open = false
       }
     }

package/src/components/shell/scheme-toggle.tsx

@@ -55,7 +55,7 @@ export function SchemeToggle({
               title={labels[option]}
               aria-pressed={selected}
               onClick={() => applySchemeImmediately(option)}
-              className={`inline-flex h-8 items-center justify-center border-border px-2.5 transition-colors [&:not(:first-child)]:border-l focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring ${
+              className={`inline-flex h-8 pointer-coarse:min-h-11 pointer-coarse:min-w-11 items-center justify-center border-border px-2.5 transition-colors [&:not(:first-child)]:border-l focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring ${
                 selected
                   ? 'bg-primary text-primary-foreground'
                   : 'bg-background hover:bg-accent hover:text-accent-foreground'

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

@@ -1,3 +1,5 @@
+import { buttonVariants, cn, controlVariants } from '@meith/ui'
+
 import { PendingButton } from '@/components/auth/form-controls'
 import { MonitorIcon, MoonIcon, SunIcon } from '@/components/shell/appearance-icons'
 import { SchemeToggle } from '@/components/shell/scheme-toggle'
@@ -13,9 +15,6 @@ const SCHEME_LABEL_KEY: Record<ColourSchemePreference, string> = {
   dark: 'appearance.scheme.dark',
 }
 
-const CONTROL =
-  'h-8 rounded-md border border-border bg-background px-2 text-xs text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
-
 export async function ThemeSwitcher() {
   const [{ choices }, theme, scheme, t] = await Promise.all([
     getBoardThemeStyle(),
@@ -43,17 +42,19 @@ export async function ThemeSwitcher() {
           <label htmlFor="appearance-theme" className="text-xs text-muted-foreground">
             {t.t('appearance.theme')}
           </label>
-          <select id="appearance-theme" name="theme" defaultValue={theme} className={CONTROL}>
+          <select
+            id="appearance-theme"
+            name="theme"
+            defaultValue={theme}
+            className={cn(controlVariants({ size: 'sm' }), 'w-auto')}
+          >
             {choices.map((choice) => (
               <option key={choice.key} value={choice.key}>
                 {choice.title}
               </option>
             ))}
           </select>
-          <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"
-          >
+          <PendingButton showWorking className={buttonVariants({ variant: 'outline', size: 'sm' })}>
             {t.t('appearance.apply')}
           </PendingButton>
         </form>

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

@@ -1,65 +1 @@
-import { cn } from '@meith/ui'
-
-export interface ViewTab {
-  readonly href: string
-  readonly label: string
-  readonly isCurrent: boolean
-  readonly count?: number
-}
-
-export function ViewTabs({
-  label,
-  tabs,
-  aside,
-  className,
-}: {
-  label: string
-  tabs: readonly ViewTab[]
-  aside?: React.ReactNode
-  className?: string
-}) {
-  if (tabs.length === 0) return null
-
-  return (
-    <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-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-card font-semibold text-primary shadow-sm'
-                  : 'font-medium text-muted-foreground hover:text-foreground',
-              )}
-            >
-              {tab.label}
-              {tab.count !== undefined && tab.count > 0 && (
-                <span
-                  className={cn(
-                    'rounded px-1.5 text-xs font-semibold tabular-nums',
-                    tab.isCurrent
-                      ? 'bg-secondary text-secondary-foreground'
-                      : 'bg-muted text-muted-foreground',
-                  )}
-                >
-                  {tab.count}
-                </span>
-              )}
-            </a>
-          </li>
-        ))}
-      </ul>
-
-      {aside !== undefined && (
-        <span className="shrink-0 text-xs text-muted-foreground">{aside}</span>
-      )}
-    </nav>
-  )
-}
+export { type NavTab as ViewTab, NavTabs as ViewTabs } from '@meith/ui'

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.35.1'
+export const CODE_VERSION = '0.36.0'
 
 export interface UpgradeApplied {
   readonly plugins: readonly string[]

package/src/styles/globals.css

@@ -436,7 +436,12 @@
     border-color: var(--border);
   }
 
+  html {
+    scrollbar-gutter: stable;
+  }
+
   body {
+    -webkit-font-smoothing: antialiased;
     background-color: var(--background);
     color: var(--foreground);
   }
@@ -465,6 +470,7 @@
   h3,
   h4 {
     text-wrap: balance;
+    overflow-wrap: anywhere;
   }
 
   /*
@@ -1000,3 +1006,60 @@ select:not([multiple], [size]):disabled {
     font-size: 1rem;
   }
 }
+
+[data-slot="navigation-drawer"] {
+  translate: 100% 0;
+  transition:
+    translate 180ms ease-out,
+    display 180ms allow-discrete,
+    overlay 180ms allow-discrete;
+}
+
+[dir="rtl"] [data-slot="navigation-drawer"] {
+  translate: -100% 0;
+}
+
+[data-slot="navigation-drawer"]:popover-open {
+  translate: 0 0;
+}
+
+@starting-style {
+  [data-slot="navigation-drawer"]:popover-open {
+    translate: 100% 0;
+  }
+
+  [dir="rtl"] [data-slot="navigation-drawer"]:popover-open {
+    translate: -100% 0;
+  }
+}
+
+@media (width < 64rem) {
+  html:has([data-slot="navigation-drawer"]:popover-open) {
+    overflow: hidden;
+  }
+}
+
+@media (width >= 64rem) {
+  [data-slot="navigation-drawer"]:popover-open {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="navigation-drawer"] {
+    transition: none;
+  }
+}
+
+[data-panel-nav-trigger] {
+  display: none;
+}
+
+body:has(#panel-usercp-navigation) [data-panel-nav-trigger="usercp"],
+body:has(#panel-modcp-navigation) [data-panel-nav-trigger="modcp"] {
+  display: inline-flex;
+}
+
+body:has(#panel-usercp-navigation, #panel-modcp-navigation) [data-main-navigation] > button {
+  display: none;
+}

package/src/view/copy.ts

@@ -21,6 +21,8 @@ export function patternCopy(
 }
 
 const CHROME_KEYS = [
+  'form.showPassword',
+  'form.hidePassword',
   'form.working',
   'form.notSaved',
   'confirm.confirm',

package/src/view/panel-nav.ts

@@ -178,16 +178,14 @@ export function buildPanelNavModel(input: {
       isRecord: false,
       isOpen,
       isOverview: section.href === input.overviewHref,
-      children: isOpen
-        ? visibleChildren(section, deepest).map((child) => ({
-            href: child.href,
-            title: panelText(t, child),
-            icon: null,
-            count: countFor(input.counts, child.href),
-            current: currentFor(input.location, child.href, deepest),
-            isRecord: child.record === true,
-          }))
-        : [],
+      children: visibleChildren(section, deepest).map((child) => ({
+        href: child.href,
+        title: panelText(t, child),
+        icon: null,
+        count: countFor(input.counts, child.href),
+        current: currentFor(input.location, child.href, deepest),
+        isRecord: child.record === true,
+      })),
     }
   })