@meith/web 0.16.0

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

@@ -0,0 +1,225 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import {
+  clearPluginHealthAction,
+  savePluginSettingsAction,
+  setPluginEnabledAction,
+} from '@/server/plugin-admin-actions'
+
+import { FormError, SubmitButton } from '../auth/form-controls'
+import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+import { INPUT } from './form-bits'
+
+export interface PluginSettingField {
+  readonly key: string
+  readonly label: string
+  readonly description: string | null
+  readonly advanced: boolean
+  readonly kind: 'string' | 'secret' | 'number' | 'boolean' | 'select'
+  readonly default: string | number | boolean
+  readonly value: string | number | boolean
+  readonly source: 'environment' | 'board' | 'default'
+  readonly set: boolean
+  readonly options: readonly { readonly value: string; readonly label: string }[]
+  readonly envName: string | null
+  readonly problem: string | null
+}
+
+export function PluginEnableForm({
+  pluginKey,
+  enabled,
+  copy,
+}: {
+  pluginKey: string
+  enabled: boolean
+  copy: Copy
+}) {
+  const [state, action] = useActionState(setPluginEnabledAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-2">
+      <FormError message={state.error} />
+      <input type="hidden" name="key" value={pluginKey} />
+      <input type="hidden" name="enabled" value={enabled ? '0' : '1'} />
+      <button
+        type="submit"
+        className="inline-flex h-9 items-center justify-center rounded-md border border-border px-3 text-sm"
+      >
+        {enabled
+          ? fromCopy(copy, 'adminPanel.plugin.disable')
+          : fromCopy(copy, 'adminPanel.plugin.enable')}
+      </button>
+    </form>
+  )
+}
+
+export function PluginHealthResetForm({ pluginKey, copy }: { pluginKey: string; copy: Copy }) {
+  const [state, action] = useActionState(clearPluginHealthAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-2">
+      <FormError message={state.error} />
+      <input type="hidden" name="key" value={pluginKey} />
+      <button
+        type="submit"
+        className="inline-flex h-9 items-center justify-center rounded-md border border-border px-3 text-sm"
+      >
+        {fromCopy(copy, 'adminPanel.plugin.clearFailures')}
+      </button>
+    </form>
+  )
+}
+
+export function PluginSettingsForm({
+  pluginKey,
+  settings,
+  copy,
+}: {
+  pluginKey: string
+  settings: readonly PluginSettingField[]
+  copy: Copy
+}) {
+  const [state, action] = useActionState(savePluginSettingsAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-4" noValidate>
+      <FormError message={state.error} />
+      {state.notice === 'saved' && (
+        <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
+          {fromCopy(copy, 'adminPanel.plugin.saved')}
+        </p>
+      )}
+
+      <input type="hidden" name="key" value={pluginKey} />
+
+      <div className="flex flex-col divide-y divide-border">
+        {settings.map((setting) => {
+          const fromEnvironment = setting.source === 'environment'
+
+          return (
+            <div key={setting.key} className="flex flex-col gap-1 py-3">
+              {setting.kind === 'boolean' ? (
+                <label className="flex items-start gap-2 text-sm">
+                  <input
+                    type="checkbox"
+                    name={`setting.${setting.key}`}
+                    value="1"
+                    defaultChecked={setting.value === true}
+                    disabled={fromEnvironment}
+                    className="mt-1"
+                  />
+                  <span className="flex flex-col gap-0.5">
+                    <span className="font-medium">{setting.label}</span>
+                    {setting.description !== null && (
+                      <span className="text-xs text-muted-foreground">{setting.description}</span>
+                    )}
+                  </span>
+                </label>
+              ) : setting.kind === 'select' ? (
+                <label className="flex flex-col gap-1 text-sm">
+                  <span className="font-medium">{setting.label}</span>
+                  <select
+                    name={`setting.${setting.key}`}
+                    defaultValue={String(setting.value)}
+                    disabled={fromEnvironment}
+                    className={INPUT}
+                  >
+                    {setting.options.map((option) => (
+                      <option key={option.value} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
+                  </select>
+                  {setting.description !== null && (
+                    <span className="text-xs text-muted-foreground">{setting.description}</span>
+                  )}
+                </label>
+              ) : setting.kind === 'secret' ? (
+                <label className="flex flex-col gap-1 text-sm">
+                  <span className="font-medium">{setting.label}</span>
+                  <input
+                    name={`setting.${setting.key}`}
+                    type="password"
+                    autoComplete="new-password"
+                    defaultValue=""
+                    placeholder={
+                      fromEnvironment
+                        ? fromCopy(copy, 'adminPanel.plugin.secretFromEnvPlaceholder')
+                        : setting.set
+                          ? fromCopy(copy, 'adminPanel.plugin.secretSetPlaceholder')
+                          : fromCopy(copy, 'adminPanel.plugin.secretNotSetPlaceholder')
+                    }
+                    disabled={fromEnvironment}
+                    className={INPUT}
+                  />
+                  {setting.description !== null && (
+                    <span className="text-xs text-muted-foreground">{setting.description}</span>
+                  )}
+                </label>
+              ) : (
+                <label className="flex flex-col gap-1 text-sm">
+                  <span className="font-medium">{setting.label}</span>
+                  <input
+                    name={`setting.${setting.key}`}
+                    type={setting.kind === 'number' ? 'number' : 'text'}
+                    defaultValue={String(setting.value)}
+                    disabled={fromEnvironment}
+                    className={INPUT}
+                  />
+                  {setting.description !== null && (
+                    <span className="text-xs text-muted-foreground">{setting.description}</span>
+                  )}
+                </label>
+              )}
+
+              {setting.problem !== null && (
+                <span className="rounded-md border border-destructive/40 bg-destructive/10 px-2 py-1 text-xs">
+                  {setting.problem}
+                </span>
+              )}
+
+              <span className="text-xs text-muted-foreground">
+                <code className="text-xs">
+                  plugin.{pluginKey}.{setting.key}
+                </code>
+                {fromEnvironment && setting.envName !== null && (
+                  <>
+                    {copy['adminPanel.plugin.envInertLead']}
+                    <code className="text-xs">{setting.envName}</code>
+                    {copy['adminPanel.plugin.envInertTail']}
+                  </>
+                )}
+                {!fromEnvironment && setting.envName !== null && (
+                  <>
+                    {copy['adminPanel.plugin.envOverridesLead']}
+                    <code className="text-xs">{setting.envName}</code>
+                    {copy['adminPanel.plugin.envOverridesTail']}
+                  </>
+                )}
+                {setting.kind !== 'secret' &&
+                  formatFromCopy(copy, 'adminPanel.plugin.shipsAs', {
+                    value:
+                      typeof setting.default === 'boolean'
+                        ? setting.default
+                          ? fromCopy(copy, 'adminPanel.plugin.on')
+                          : fromCopy(copy, 'adminPanel.plugin.off')
+                        : String(setting.default) === ''
+                          ? fromCopy(copy, 'adminPanel.plugin.empty')
+                          : String(setting.default),
+                  })}
+                {setting.advanced && fromCopy(copy, 'adminPanel.plugin.advanced')}
+              </span>
+            </div>
+          )
+        })}
+      </div>
+
+      <span className="min-w-40 max-w-48">
+        <SubmitButton>{fromCopy(copy, 'adminPanel.plugin.save')}</SubmitButton>
+      </span>
+    </form>
+  )
+}

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

@@ -0,0 +1,148 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { saveAdminSettingsAction } from '@/server/admin-settings-actions'
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import type { SettingFieldModel, SettingGroupModel } from '@/view/admin-settings'
+
+import { FormError, SubmitButton } from '../auth/form-controls'
+import { type Copy, fromCopy } from '../shell/copy'
+import { INPUT } from './form-bits'
+
+function Control({ setting, copy }: { setting: SettingFieldModel; copy: Copy }) {
+  const { field, key, value } = setting
+
+  switch (field.kind) {
+    case 'boolean':
+      return (
+        <input
+          id={key}
+          type="checkbox"
+          name={key}
+          value="1"
+          defaultChecked={setting.checked}
+          className="size-4"
+        />
+      )
+    case 'number':
+      return (
+        <input
+          id={key}
+          type="number"
+          name={key}
+          defaultValue={value}
+          min={field.min}
+          max={field.max}
+          className={INPUT}
+        />
+      )
+    case 'textarea':
+      return <textarea id={key} name={key} rows={4} defaultValue={value} className={INPUT} />
+    case 'select':
+      return (
+        <select id={key} name={key} defaultValue={value} className={INPUT}>
+          {field.options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      )
+    case 'secret':
+      return (
+        <div className="flex flex-col gap-1">
+          <input
+            id={key}
+            type="password"
+            name={key}
+            placeholder={fromCopy(copy, 'adminPanel.setting.unchangedPlaceholder')}
+            autoComplete="off"
+            className={INPUT}
+          />
+          {setting.clearName !== null && (
+            <label className="flex items-center gap-2 text-xs text-muted-foreground">
+              <input type="checkbox" name={setting.clearName} value="1" className="size-4" />
+              <span>{fromCopy(copy, 'adminPanel.setting.clearStored')}</span>
+            </label>
+          )}
+        </div>
+      )
+    default:
+      return <input id={key} type="text" name={key} defaultValue={value} className={INPUT} />
+  }
+}
+
+export function AdminSettingsForm({
+  groups,
+  copy,
+}: {
+  groups: readonly SettingGroupModel[]
+  copy: Copy
+}) {
+  const [state, action] = useActionState(saveAdminSettingsAction, EMPTY_STATE)
+
+  const keys = groups.flatMap((group) => group.settings.map((setting) => setting.key))
+
+  if (keys.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        {fromCopy(copy, 'adminPanel.setting.noMatches')}
+      </p>
+    )
+  }
+
+  return (
+    <form action={action} className="flex flex-col gap-8" noValidate>
+      <FormError message={state.error} />
+      {state.notice === 'saved' && (
+        <p className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
+          {fromCopy(copy, 'adminPanel.setting.saved')}
+        </p>
+      )}
+      {state.notice === 'unchanged' && (
+        <p className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
+          {fromCopy(copy, 'adminPanel.setting.unchanged')}
+        </p>
+      )}
+
+      <input type="hidden" name="keys" value={keys.join(',')} />
+
+      {groups.map((group) => (
+        <section key={group.group} className="flex flex-col gap-4">
+          <h2 className="text-lg font-semibold tracking-tight">{group.label}</h2>
+          <div className="flex flex-col gap-5">
+            {group.settings.map((setting) => (
+              <div key={setting.key} className="flex flex-col gap-1">
+                <label
+                  htmlFor={setting.key}
+                  className="flex items-center gap-2 text-sm font-medium"
+                >
+                  {setting.field.kind === 'boolean' && <Control setting={setting} copy={copy} />}
+                  <span>{setting.label}</span>
+                  {setting.advanced && (
+                    <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground">
+                      {fromCopy(copy, 'adminPanel.setting.advanced')}
+                    </span>
+                  )}
+                  {!setting.isDefault && (
+                    <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                      {fromCopy(copy, 'adminPanel.setting.changed')}
+                    </span>
+                  )}
+                </label>
+                {setting.field.kind !== 'boolean' && <Control setting={setting} copy={copy} />}
+                <p className="text-xs text-muted-foreground">{setting.description}</p>
+                <code className="text-[10px] text-muted-foreground">{setting.key}</code>
+              </div>
+            ))}
+          </div>
+        </section>
+      ))}
+
+      <div>
+        <SubmitButton>{fromCopy(copy, 'adminPanel.setting.save')}</SubmitButton>
+      </div>
+    </form>
+  )
+}

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

@@ -0,0 +1,169 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import {
+  clearCacheAction,
+  pruneSessionsAction,
+  pruneTokensAction,
+  recountAction,
+  reindexSearchAction,
+  retryJobAction,
+} from '@/server/system-admin-actions'
+
+import { FormError, SubmitButton } from '../auth/form-controls'
+import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+
+function Result({ children }: { children: React.ReactNode }) {
+  return (
+    <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
+      {children}
+    </p>
+  )
+}
+
+export function PruneSessionsForm({ prunable, copy }: { prunable: number; copy: Copy }) {
+  const [state, action] = useActionState(pruneSessionsAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-2">
+      <FormError message={state.error} />
+      {state.notice === 'pruned' && (
+        <Result>
+          {formatFromCopy(copy, 'adminPanel.system.sessionsRemoved', {
+            removed: state.values?.removed ?? '',
+          })}
+        </Result>
+      )}
+      <div>
+        <SubmitButton>
+          {formatFromCopy(copy, 'adminPanel.system.pruneSessions', { prunable })}
+        </SubmitButton>
+      </div>
+    </form>
+  )
+}
+
+export function PruneTokensForm({ copy }: { copy: Copy }) {
+  const [state, action] = useActionState(pruneTokensAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-2">
+      <FormError message={state.error} />
+      {state.notice === 'pruned' && (
+        <Result>
+          {formatFromCopy(copy, 'adminPanel.system.tokensRemoved', {
+            removed: state.values?.removed ?? '',
+          })}
+        </Result>
+      )}
+      <div>
+        <SubmitButton>{fromCopy(copy, 'adminPanel.system.pruneTokens')}</SubmitButton>
+      </div>
+    </form>
+  )
+}
+
+export function RecountForm({ copy }: { copy: Copy }) {
+  const [state, action] = useActionState(recountAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-2">
+      <FormError message={state.error} />
+      {state.notice === 'ran' && (
+        <Result>
+          {formatFromCopy(copy, 'adminPanel.system.recountResult', {
+            corrected: Number(state.values?.corrected ?? 0),
+          })}
+        </Result>
+      )}
+      <div>
+        <SubmitButton>{fromCopy(copy, 'adminPanel.system.recountRun')}</SubmitButton>
+      </div>
+    </form>
+  )
+}
+
+export function ClearCacheForm({ copy }: { copy: Copy }) {
+  const [state, action] = useActionState(clearCacheAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-2">
+      <FormError message={state.error} />
+      {state.notice === 'cleared' && (
+        <Result>
+          {formatFromCopy(copy, 'adminPanel.system.cleared', { tag: state.values?.tag ?? '' })}
+        </Result>
+      )}
+
+      <input type="hidden" name="what" value="forums" />
+      <p className="text-xs text-muted-foreground">
+        {fromCopy(copy, 'adminPanel.system.clearNote')}
+      </p>
+
+      <div>
+        <SubmitButton>{fromCopy(copy, 'adminPanel.system.clearForumTree')}</SubmitButton>
+      </div>
+    </form>
+  )
+}
+
+export function RetryJobForm({ copy }: { copy: Copy }) {
+  const [state, action] = useActionState(retryJobAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-2" noValidate>
+      <FormError message={state.error} />
+      {state.notice === 'retried' && <Result>{fromCopy(copy, 'adminPanel.system.retried')}</Result>}
+
+      <label className="flex flex-col gap-1 text-sm">
+        <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"
+          required
+        />
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'adminPanel.system.jobIdHint')}
+        </span>
+      </label>
+
+      <div>
+        <SubmitButton>{fromCopy(copy, 'adminPanel.system.retry')}</SubmitButton>
+      </div>
+    </form>
+  )
+}
+
+export function ReindexSearchForm({ pending, copy }: { pending: number; copy: Copy }) {
+  const [state, action] = useActionState(reindexSearchAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-2">
+      <FormError message={state.error} />
+      {state.notice === 'finished' && (
+        <Result>
+          {formatFromCopy(copy, 'adminPanel.system.indexFinished', {
+            indexed: state.values?.indexed ?? '',
+          })}
+        </Result>
+      )}
+      {state.notice === 'more' && (
+        <Result>
+          {formatFromCopy(copy, 'adminPanel.system.indexMore', {
+            indexed: state.values?.indexed ?? '',
+            pending: state.values?.pending ?? '',
+          })}
+        </Result>
+      )}
+      <div>
+        <SubmitButton>
+          {pending === 0
+            ? fromCopy(copy, 'adminPanel.system.nothingToIndex')
+            : formatFromCopy(copy, 'adminPanel.system.indexNext', { pending })}
+        </SubmitButton>
+      </div>
+    </form>
+  )
+}