@meith/web 0.30.1 → 0.32.0

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

@@ -10,6 +10,7 @@ import {
 } from '@/server/navigation-admin-actions'
 
 import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
+import { ConfirmDialog } from '../shell/confirm-dialog'
 import { type Copy, fromCopy } from '../shell/copy'
 import { INPUT, Saved } from './form-bits'
 
@@ -161,43 +162,59 @@ export function NavigationItemRowForm({
   groups,
   parents,
   copy,
+  summary,
+  className,
+  style,
 }: {
   item: NavigationItemValues
   audiences: readonly AudienceChoice[]
   groups: readonly GroupChoice[]
   parents: readonly ParentChoice[]
   copy: Copy
+  summary: React.ReactNode
+  className?: string
+  style?: React.CSSProperties
 }) {
   const [state, action] = useActionState(updateNavigationItemAction, EMPTY_STATE)
   const [removeState, removeAction] = useActionState(deleteNavigationItemAction, EMPTY_STATE)
 
   return (
-    <div className="flex flex-col gap-3 py-4">
-      <FormError message={state.error ?? removeState.error} />
-      <Saved when={state.notice === 'saved'}>{fromCopy(copy, 'admin.saved')}</Saved>
-
-      <form action={action} className="flex flex-col gap-3" noValidate>
-        <input type="hidden" name="id" value={item.id} />
-        <NavigationFields
-          audiences={audiences}
-          groups={groups}
-          parents={parents}
-          values={item}
-          copy={copy}
-        />
-
-        <span className="min-w-28">
-          <SubmitButton>{fromCopy(copy, 'adminContent.save')}</SubmitButton>
-        </span>
-      </form>
-
-      <form action={removeAction}>
-        <input type="hidden" name="id" value={item.id} />
-        <PendingButton showWorking className="text-xs text-destructive hover:underline">
-          {fromCopy(copy, 'adminNavigation.removeThis')}
-        </PendingButton>
-      </form>
-    </div>
+    <>
+      <details className={className} style={style}>
+        <summary className="cursor-pointer py-2 text-xs font-medium text-muted-foreground hover:text-foreground">
+          {summary}
+        </summary>
+
+        <div className="flex flex-col gap-3 py-4">
+          <FormError message={state.error ?? removeState.error} />
+          <Saved when={state.notice === 'saved'}>{fromCopy(copy, 'admin.saved')}</Saved>
+
+          <form action={action} className="flex flex-col gap-3" noValidate>
+            <input type="hidden" name="id" value={item.id} />
+            <NavigationFields
+              audiences={audiences}
+              groups={groups}
+              parents={parents}
+              values={item}
+              copy={copy}
+            />
+
+            <span className="min-w-28">
+              <SubmitButton>{fromCopy(copy, 'adminContent.save')}</SubmitButton>
+            </span>
+          </form>
+
+          <form action={removeAction}>
+            <input type="hidden" name="id" value={item.id} />
+            <PendingButton showWorking className="text-xs text-destructive hover:underline">
+              {fromCopy(copy, 'adminNavigation.removeThis')}
+            </PendingButton>
+          </form>
+        </div>
+      </details>
+
+      <ConfirmDialog confirm={removeState.confirm} action={removeAction} />
+    </>
   )
 }
 

package/src/components/admin/navigation-tree.tsx

@@ -404,21 +404,16 @@ export function NavigationTree({
                 </form>
               </div>
 
-              <details
+              <NavigationItemRowForm
+                item={row}
+                audiences={audiences}
+                groups={groups}
+                parents={parents}
+                copy={copy}
+                summary={formatFromCopy(copy, 'adminNavigation.tree.edit', { name: row.name })}
                 className="rounded-md border border-border bg-card px-3"
                 style={{ marginLeft: `${row.depth * INDENT_PX}px` }}
-              >
-                <summary className="cursor-pointer py-2 text-xs font-medium text-muted-foreground hover:text-foreground">
-                  {formatFromCopy(copy, 'adminNavigation.tree.edit', { name: row.name })}
-                </summary>
-                <NavigationItemRowForm
-                  item={row}
-                  audiences={audiences}
-                  groups={groups}
-                  parents={parents}
-                  copy={copy}
-                />
-              </details>
+              />
             </li>
           )
         })}

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

@@ -10,6 +10,7 @@ import {
   parseColour,
   rgbToHex,
 } from '@meith/theme-kit'
+import { textLinkVariants } from '@meith/ui'
 
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 
@@ -167,7 +168,7 @@ export function OklchPicker({
               <button
                 type="button"
                 onClick={() => onChange('')}
-                className="text-xs font-medium underline decoration-border underline-offset-2 hover:decoration-foreground"
+                className={textLinkVariants({ tone: 'inherit', size: 'xs' })}
               >
                 {fromCopy(copy, 'adminTheme.oklch.clear')}
               </button>

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

@@ -1,5 +1,7 @@
 'use client'
 
+import { textLinkVariants } from '@meith/ui'
+
 import { type ContrastCheck, checkContrast, contrastGrade, formatRatio } from '@/view/contrast'
 import {
   changeCounts,
@@ -14,8 +16,7 @@ import {
 
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 
-const LINK =
-  'text-xs font-medium underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const LINK = `${textLinkVariants({ tone: 'inherit', size: 'xs' })} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`
 
 function StateBadge({ change, copy }: { change: TokenChange; copy: Copy }) {
   const [label, tone] =

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

@@ -2,6 +2,8 @@
 
 import { useActionState, useEffect, useState } from 'react'
 
+import { textLinkVariants } from '@meith/ui'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import {
   importThemeAction,
@@ -43,8 +45,7 @@ const INPUT =
 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'
 
-const LINK =
-  'text-xs font-medium underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const LINK = `${textLinkVariants({ tone: 'inherit', size: 'xs' })} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`
 
 export type TokenValue = EditableToken
 

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

@@ -0,0 +1,137 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import {
+  createWebhookAction,
+  deleteWebhookAction,
+  toggleWebhookAction,
+} from '@/server/webhook-actions'
+
+import { FormError, SubmitButton } from '../auth/form-controls'
+import { type Copy, fromCopy } from '../shell/copy'
+
+export function CreateWebhookForm({
+  topics,
+  formats,
+  copy,
+}: {
+  topics: readonly string[]
+  formats: readonly string[]
+  copy: Copy
+}) {
+  const [state, action] = useActionState(createWebhookAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-4">
+      <FormError message={state.error} />
+
+      {state.notice === 'created' && state.values?.secret !== undefined && (
+        <div
+          role="status"
+          className="flex flex-col gap-2 rounded-md border border-accent bg-post-highlight px-3 py-3"
+        >
+          <p className="text-sm font-semibold">{fromCopy(copy, 'adminPanel.webhook.copyNow')}</p>
+          <code className="block overflow-x-auto rounded-sm bg-card px-2 py-1 font-mono text-sm">
+            {state.values.secret}
+          </code>
+        </div>
+      )}
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'adminPanel.webhook.url')}</span>
+        <input
+          name="url"
+          type="url"
+          required
+          placeholder={fromCopy(copy, 'adminPanel.webhook.urlPlaceholder')}
+          className="rounded-sm border border-input bg-card px-2 py-1"
+        />
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'adminPanel.webhook.urlHint')}
+        </span>
+      </label>
+
+      <fieldset className="flex flex-col gap-2">
+        <legend className="text-sm font-medium">
+          {fromCopy(copy, 'adminPanel.webhook.topics')}
+        </legend>
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'adminPanel.webhook.topicsHint')}
+        </span>
+        <div className="flex flex-wrap gap-x-4 gap-y-2">
+          {topics.map((topic) => (
+            <label key={topic} className="flex items-center gap-2 text-sm">
+              <input type="checkbox" name="topics" value={topic} />
+              <code className="font-mono text-xs">{topic}</code>
+            </label>
+          ))}
+        </div>
+      </fieldset>
+
+      <fieldset className="flex flex-col gap-2">
+        <legend className="text-sm font-medium">
+          {fromCopy(copy, 'adminPanel.webhook.format')}
+        </legend>
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'adminPanel.webhook.formatHint')}
+        </span>
+        <div className="flex flex-wrap gap-x-4 gap-y-2">
+          {formats.map((format, index) => (
+            <label key={format} className="flex items-center gap-2 text-sm">
+              <input type="radio" name="format" value={format} defaultChecked={index === 0} />
+              <span>{fromCopy(copy, `adminPanel.webhook.format.${format}`)}</span>
+            </label>
+          ))}
+        </div>
+      </fieldset>
+
+      <label className="flex items-center gap-2 text-sm">
+        <input type="checkbox" name="active" value="true" defaultChecked />
+        <span className="font-medium">{fromCopy(copy, 'adminPanel.webhook.active')}</span>
+      </label>
+
+      <SubmitButton>{fromCopy(copy, 'adminPanel.webhook.create')}</SubmitButton>
+    </form>
+  )
+}
+
+export function ToggleWebhookForm({
+  webhookId,
+  active,
+  copy,
+}: {
+  webhookId: number
+  active: boolean
+  copy: Copy
+}) {
+  const [state, action] = useActionState(toggleWebhookAction, EMPTY_STATE)
+
+  return (
+    <form action={action}>
+      <input type="hidden" name="webhookId" value={webhookId} />
+      <input type="hidden" name="active" value={active ? 'false' : 'true'} />
+      <SubmitButton>
+        {fromCopy(copy, active ? 'adminPanel.webhook.disable' : 'adminPanel.webhook.enable')}
+      </SubmitButton>
+      {state.error !== undefined && (
+        <span className="ml-2 text-xs text-destructive">{state.error}</span>
+      )}
+    </form>
+  )
+}
+
+export function DeleteWebhookForm({ webhookId, copy }: { webhookId: number; copy: Copy }) {
+  const [state, action] = useActionState(deleteWebhookAction, EMPTY_STATE)
+
+  return (
+    <form action={action}>
+      <input type="hidden" name="webhookId" value={webhookId} />
+      <SubmitButton>{fromCopy(copy, 'adminPanel.webhook.delete')}</SubmitButton>
+      {state.error !== undefined && (
+        <span className="ml-2 text-xs text-destructive">{state.error}</span>
+      )}
+    </form>
+  )
+}

package/src/components/auth/register-form.tsx

@@ -2,6 +2,8 @@
 
 import { useActionState } from 'react'
 
+import { TextLink } from '@meith/ui'
+
 import { registerAction } from '@/server/auth-actions'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 
@@ -135,14 +137,9 @@ export function RegisterForm({
           />
           <span>
             {copy['authForm.register.termsLead']}
-            <a
-              href={terms.href}
-              target="_blank"
-              rel="noreferrer"
-              className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-            >
+            <TextLink href={terms.href} target="_blank" rel="noreferrer">
               {terms.label}
-            </a>
+            </TextLink>
             {copy['authForm.register.termsTail']}
           </span>
         </label>

package/src/components/board/live-region.tsx

@@ -2,6 +2,8 @@
 
 import { type ReactNode, useEffect, useRef, useState } from 'react'
 
+import { textLinkVariants } from '@meith/ui'
+
 export interface LiveRegionProps {
   readonly children: ReactNode
   readonly refresh: () => Promise<ReactNode>
@@ -63,7 +65,7 @@ export function LiveRegion({ children, refresh, seconds, label }: LiveRegionProp
           <button
             type="button"
             onClick={() => setPaused((was) => !was)}
-            className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+            className={textLinkVariants()}
           >
             {paused ? 'Resume' : 'Pause'}
           </button>

package/src/components/content/attachment-field.tsx

@@ -1,45 +1,116 @@
 'use client'
 
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 
 import { maxBytesFor, maxPerPostFor, type UploadLimits } from '@meith/attachments/limits'
 import { ACCEPTED_EXTENSIONS, ATTACHMENT_FIELD } from '@meith/attachments/types'
+import { cn } from '@meith/ui'
 
 import { formatBytes } from '@/view/attachments'
 
 import { formatFromCopy, fromCopy, useCopy } from '../shell/copy'
 
+interface ChosenFile {
+  readonly id: string
+  readonly file: File
+}
+
+function filesFrom(input: HTMLInputElement | null): readonly File[] {
+  return input === null ? [] : Array.from(input.files ?? [])
+}
+
 export function AttachmentField({ limits }: { limits: UploadLimits }) {
   const input = useRef<HTMLInputElement>(null)
   const copy = useCopy()
   const perPost = maxPerPostFor(limits)
   const maxBytes = maxBytesFor(limits)
 
+  const [chosen, setChosen] = useState<readonly ChosenFile[]>([])
+  const [dragging, setDragging] = useState(false)
+
+  function sync(): void {
+    setChosen(filesFrom(input.current).map((file) => ({ id: crypto.randomUUID(), file })))
+  }
+
+  function addFiles(added: FileList): void {
+    if (input.current === null) return
+    const next = new DataTransfer()
+    for (const file of filesFrom(input.current)) next.items.add(file)
+    for (const file of added) next.items.add(file)
+    input.current.files = next.files
+    sync()
+  }
+
+  function removeChosen(id: string): void {
+    if (input.current === null) return
+    const next = new DataTransfer()
+    for (const entry of chosen) {
+      if (entry.id !== id) next.items.add(entry.file)
+    }
+    input.current.files = next.files
+    sync()
+  }
+
   return (
-    <div
-      className="flex flex-col gap-1 text-sm"
-      onDragOver={(event) => event.preventDefault()}
-      onDrop={(event) => {
-        event.preventDefault()
-        if (input.current === null) return
-        const files = new DataTransfer()
-        for (const file of event.dataTransfer.files) files.items.add(file)
-        input.current.files = files.files
-      }}
-    >
+    <div className="flex flex-col gap-1 text-sm">
       <label htmlFor={ATTACHMENT_FIELD} className="font-medium">
         {fromCopy(copy, 'composer.attachments.label')}
       </label>
-      <input
-        ref={input}
-        id={ATTACHMENT_FIELD}
-        type="file"
-        name={ATTACHMENT_FIELD}
-        multiple
-        aria-describedby={`${ATTACHMENT_FIELD}-limits`}
-        accept={ACCEPTED_EXTENSIONS.map((extension) => `.${extension}`).join(',')}
-        className="rounded-md border border-input bg-card px-3 py-1.5 text-sm file:mr-3 file:rounded file:border-0 file:bg-muted file:px-3 file:py-1 file:text-sm"
-      />
+
+      <div
+        className={cn(
+          'flex flex-col gap-2 rounded-md border-2 border-dashed p-3 transition-colors',
+          dragging ? 'border-ring bg-muted/50' : 'border-input',
+        )}
+        onDragOver={(event) => {
+          event.preventDefault()
+          setDragging(true)
+        }}
+        onDragLeave={() => setDragging(false)}
+        onDrop={(event) => {
+          event.preventDefault()
+          setDragging(false)
+          addFiles(event.dataTransfer.files)
+        }}
+      >
+        <input
+          ref={input}
+          id={ATTACHMENT_FIELD}
+          type="file"
+          name={ATTACHMENT_FIELD}
+          multiple
+          aria-describedby={`${ATTACHMENT_FIELD}-limits`}
+          accept={ACCEPTED_EXTENSIONS.map((extension) => `.${extension}`).join(',')}
+          onChange={sync}
+          className="rounded-md border border-input bg-card px-3 py-1.5 text-sm file:mr-3 file:rounded file:border-0 file:bg-muted file:px-3 file:py-1 file:text-sm"
+        />
+
+        {chosen.length > 0 && (
+          <ul className="flex flex-col gap-1">
+            {chosen.map((entry) => (
+              <li
+                key={entry.id}
+                className="flex items-center justify-between gap-2 rounded bg-card px-2 py-1 text-xs"
+              >
+                <span className="min-w-0 truncate">
+                  {entry.file.name} · {formatBytes(entry.file.size)}
+                </span>
+                <button
+                  type="button"
+                  onClick={() => removeChosen(entry.id)}
+                  aria-label={formatFromCopy(copy, 'composer.attachments.removeChosen', {
+                    name: entry.file.name,
+                  })}
+                  className="shrink-0 text-muted-foreground hover:text-destructive"
+                >
+                  {fromCopy(copy, 'composer.attachments.remove')}
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
       <p id={`${ATTACHMENT_FIELD}-limits`} className="text-xs text-muted-foreground">
         {formatFromCopy(copy, 'composer.attachments.hint', {
           count: perPost,

package/src/components/content/combobox-keys.ts

@@ -0,0 +1,38 @@
+export interface ComboboxKeyEvent {
+  readonly key: string
+  readonly metaKey: boolean
+  readonly ctrlKey: boolean
+}
+
+export interface ComboboxState {
+  readonly count: number
+  readonly active: number
+}
+
+export type ComboboxKeyAction =
+  | { readonly type: 'move'; readonly active: number }
+  | { readonly type: 'choose'; readonly index: number }
+  | { readonly type: 'dismiss' }
+  | null
+
+export function comboboxKeyAction(
+  event: ComboboxKeyEvent,
+  state: ComboboxState,
+): ComboboxKeyAction {
+  const { count, active } = state
+  if (count <= 0) return null
+
+  switch (event.key) {
+    case 'ArrowDown':
+      return { type: 'move', active: (active + 1) % count }
+    case 'ArrowUp':
+      return { type: 'move', active: (active - 1 + count) % count }
+    case 'Escape':
+      return { type: 'dismiss' }
+    case 'Enter':
+    case 'Tab':
+      return event.metaKey || event.ctrlKey ? null : { type: 'choose', index: active }
+    default:
+      return null
+  }
+}

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

@@ -3,18 +3,86 @@
 import type { ReactNode } from 'react'
 import { useActionState } from 'react'
 
+import type { UploadLimits } from '@meith/attachments/limits'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { deletePostAction, editPostAction, restorePostAction } from '@/server/content-actions'
+import type { EditableAttachment } from '@/view/attachments'
 
 import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
-import { type Copy, fromCopy } from '../shell/copy'
+import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+import { AttachmentField } from './attachment-field'
 import { MarkdownEditor } from './markdown-editor'
 
+function ExistingAttachments({
+  attachments,
+  copy,
+}: {
+  attachments: readonly EditableAttachment[]
+  copy: Copy
+}) {
+  if (attachments.length === 0) return null
+
+  return (
+    <fieldset className="flex flex-col gap-2 text-sm">
+      <legend className="font-medium">{fromCopy(copy, 'composer.edit.attachments')}</legend>
+      <ul className="flex flex-col gap-2">
+        {attachments.map((attachment) => (
+          <li
+            key={attachment.id}
+            className="flex items-center gap-3 rounded-md border border-border bg-card p-2"
+          >
+            {attachment.thumbnailHref !== null ? (
+              <img
+                src={attachment.thumbnailHref}
+                alt=""
+                className="size-10 shrink-0 rounded object-cover"
+              />
+            ) : (
+              <span
+                aria-hidden="true"
+                className="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-sm text-muted-foreground"
+              >
+                {attachment.status === 'failed' ? '!' : attachment.status === 'pending' ? '…' : '·'}
+              </span>
+            )}
+
+            <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+              <span className="truncate font-medium">{attachment.filename}</span>
+              <span className="text-xs text-muted-foreground">
+                {attachment.status === 'pending' &&
+                  fromCopy(copy, 'composer.edit.attachmentProcessing')}
+                {attachment.status === 'failed' && fromCopy(copy, 'composer.edit.attachmentFailed')}
+                {attachment.status === 'ready' && attachment.size}
+              </span>
+            </span>
+
+            <label className="flex shrink-0 items-center gap-1.5 text-xs">
+              <input
+                type="checkbox"
+                name="removeAttachmentIds"
+                value={attachment.id}
+                aria-label={formatFromCopy(copy, 'composer.edit.removeAttachment', {
+                  name: attachment.filename,
+                })}
+                className="size-4"
+              />
+              <span aria-hidden="true">{fromCopy(copy, 'composer.edit.remove')}</span>
+            </label>
+          </li>
+        ))}
+      </ul>
+    </fieldset>
+  )
+}
+
 export function EditPostForm({
   threadId,
   postId,
   message,
   reason,
+  attachments,
+  attachmentLimits,
   toolbar,
   copy,
 }: {
@@ -22,6 +90,8 @@ export function EditPostForm({
   postId: number
   message: string
   reason: string | null
+  attachments: readonly EditableAttachment[]
+  attachmentLimits: UploadLimits | null
   toolbar?: ReactNode
   copy: Copy
 }) {
@@ -51,6 +121,10 @@ export function EditPostForm({
         />
       </label>
 
+      <ExistingAttachments attachments={attachments} copy={copy} />
+
+      {attachmentLimits !== null && <AttachmentField limits={attachmentLimits} />}
+
       <div className="flex flex-wrap gap-3">
         <SubmitButton>{fromCopy(copy, 'composer.edit.submit')}</SubmitButton>
         <PendingButton