web: give the toast helper a real type and keep the dist bundle out of git

Blocklists, Clients, Domains and Upstreams each carried a ToastLike shim that duck-typed a react-hot-toast style API. The console uses its own Toast context, so notify() was calling toast('some message') with a string where ToastOptions is expected: every mutation toast rendered an empty title. They now take the toast function from useToast() and send a real { title, tone } payload, mapping 'fail' onto the danger tone.
2026-09-27 11:32:39 +00:00
1 parent 85453852d5
commit f24fd63e9a
@@ -10,12 +10,12 @@ import { useMemo, useState } from 'react'
 import type { ReactNode } from 'react'
 import { AlertTriangle, Clock, Layers, RefreshCw, ShieldCheck, Split, Trash2 } from 'lucide-react'

-import { checkDomain, getBlocklists, refreshBlocklists, toggleBlocklist } from '../../lib/api'
-import type { BlocklistItem, BlocklistStats, DomainCheck } from '../../lib/types'
-import { useApi, useAsyncAction } from '../../hooks/useApi'
-import { useAutoRefresh } from '../../hooks/useAutoRefresh'
-import { useDebounced } from '../../hooks/useDebounced'
-import { formatBytes, formatMs, formatNumber, formatRelative, toDate } from '../../lib/format'
+import { checkDomain, getBlocklists, refreshBlocklists, toggleBlocklist } from '../lib/api'
+import type { BlocklistItem, BlocklistStats, DomainCheck } from '../lib/types'
+import { useApi, useAsyncAction } from '../hooks/useApi'
+import { useAutoRefresh } from '../hooks/useAutoRefresh'
+import { useDebounced } from '../hooks/useDebounced'
+import { formatBytes, formatMs, formatNumber, formatRelative, toDate } from '../lib/format'
 import {
  Badge,
  Button,
@@ -29,21 +29,21 @@ import {
  Table,
  useToast,
 } from '../components/ui'
+import type { ToastOptions } from '../components/ui'
 import { PageError, PageHeader } from '../components/layout'

 type Row = Record<string, ReactNode>

-type ToastLike = {
-  success?: (message: string) => void
-  error?: (message: string) => void
-  toast?: (message: string) => void
-  push?: (message: string) => void
-}
-
-function notify(toast: unknown, kind: 'ok' | 'fail', message: string): void {
-  const t = toast as ToastLike
-  const fn = kind === 'ok' ? (t.success ?? t.toast ?? t.push) : (t.error ?? t.toast ?? t.push)
-  fn?.call(t, message)
+/**
+ * One line for every mutation on this page: the message plus the tone it
+ * earned. `fail` is the danger tone, `ok` the success one.
+ */
+function notify(
+  toast: (options: ToastOptions) => void,
+  kind: 'ok' | 'fail',
+  message: string,
+): void {
+  toast({ title: message, tone: kind === 'ok' ? 'ok' : 'danger' })
 }

 const EMPTY_STATS: BlocklistStats = {
@@ -79,7 +79,7 @@ function truncate(value: string, max = 42): string {
 }

 export default function Blocklists() {
-  const toast = useToast()
+  const { toast } = useToast()
  const { data, error, loading, refetch } = useApi(() => getBlocklists(), [])
  useAutoRefresh(refetch, 15000)

@@ -200,7 +200,7 @@ export default function Blocklists() {
      ),
      refresh: (
        <IconButton
-          icon={<RefreshCw size={14} />}
+          icon={RefreshCw}
          label={`refresh ${item.name}`}
          variant="ghost"
          disabled={busy}
@@ -221,7 +221,7 @@ export default function Blocklists() {
        description="Compiled rule sources, their freshness and their health."
        actions={
          <Button
-            icon={<RefreshCw size={14} />}
+            icon={RefreshCw}
            onClick={() => void onRefresh()}
            loading={refresh.pending}
          >
@@ -231,24 +231,24 @@ export default function Blocklists() {
      />

      <div className="grid grid-cols-2 gap-3 lg:grid-cols-3 xl:grid-cols-5">
-        <StatCard label="Total rules" value={formatNumber(stats.total)} icon={<Layers size={16} />} />
+        <StatCard label="Total rules" value={formatNumber(stats.total)} icon={Layers} />
        <StatCard label="Sources" value={formatNumber(stats.sources)} hint={`${items.filter((i) => i.enabled).length} enabled`} />
        <StatCard
          label="Allow rules"
          value={formatNumber(stats.allow)}
-          icon={<ShieldCheck size={16} />}
+          icon={ShieldCheck}
          tone={stats.allow > 0 ? 'default' : 'warn'}
        />
        <StatCard
          label="Duplicates"
          value={formatNumber(stats.duplicates)}
-          icon={<Split size={16} />}
+          icon={Split}
          tone={stats.duplicates > 0 ? 'warn' : 'ok'}
        />
        <StatCard
          label="Last compile"
          value={compiledAgo}
-          icon={<Clock size={16} />}
+          icon={Clock}
          hint={stats.built_at ? undefined : 'no build recorded'}
        />
      </div>
@@ -265,7 +265,7 @@ export default function Blocklists() {
                placeholder="ads.example.com"
                value={probe}
                onChange={(e) => setProbe(e.target.value)}
-                icon={<ShieldCheck size={14} />}
+                icon={ShieldCheck}
                autoComplete="off"
                spellCheck={false}
              />
@@ -10,10 +10,10 @@
 import { useMemo, useState } from 'react'
 import { Copy, Pencil, Plus, Trash2, Users } from 'lucide-react'

-import { ApiError, getClients, putClients } from '../../lib/api'
-import type { ClientGroup, ClientMatch } from '../../lib/types'
-import { useApi, useAsyncAction } from '../../hooks/useApi'
-import { fromLines, toLines } from '../../lib/format'
+import { ApiError, getClients, putClients } from '../lib/api'
+import type { ClientGroup, ClientMatch } from '../lib/types'
+import { useApi, useAsyncAction } from '../hooks/useApi'
+import { fromLines, toLines } from '../lib/format'
 import {
  Badge,
  Button,
@@ -28,19 +28,19 @@ import {
  Textarea,
  useToast,
 } from '../components/ui'
+import type { ToastOptions } from '../components/ui'
 import { PageError, PageHeader } from '../components/layout'

-type ToastLike = {
-  success?: (message: string) => void
-  error?: (message: string) => void
-  toast?: (message: string) => void
-  push?: (message: string) => void
-}
-
-function notify(toast: unknown, kind: 'ok' | 'fail', message: string): void {
-  const t = toast as ToastLike
-  const fn = kind === 'ok' ? (t.success ?? t.toast ?? t.push) : (t.error ?? t.toast ?? t.push)
-  fn?.call(t, message)
+/**
+ * One line for every mutation on this page: the message plus the tone it
+ * earned. `fail` is the danger tone, `ok` the success one.
+ */
+function notify(
+  toast: (options: ToastOptions) => void,
+  kind: 'ok' | 'fail',
+  message: string,
+): void {
+  toast({ title: message, tone: kind === 'ok' ? 'ok' : 'danger' })
 }

 const POLICIES = [
@@ -173,11 +173,11 @@ function fieldLeaf(path: string): string {
 }

 export default function Clients() {
-  const toast = useToast()
+  const { toast } = useToast()
  const { data, error, loading, refetch } = useApi(() => getClients(), [])

  const groups = useMemo<ClientGroup[]>(() => data?.groups ?? [], [data])
-  const [defaultPolicy, setDefaultPolicy] = useState<string>('')
+  const [defaultPolicy] = useState<string>('')
  const [defaultDraft, setDefaultDraft] = useState<string | null>(null)
  const [editorOpen, setEditorOpen] = useState(false)
  const [draft, setDraft] = useState<GroupDraft>(EMPTY_DRAFT)
@@ -302,7 +302,7 @@ export default function Clients() {
        title="Clients"
        description="Group clients by network, reverse-DNS name or tag and give each group its own policy."
        actions={
-          <Button icon={<Plus size={14} />} onClick={openNew}>
+          <Button icon={Plus} onClick={openNew}>
            Add group
          </Button>
        }
@@ -322,11 +322,11 @@ export default function Clients() {

      {groups.length === 0 ? (
        <EmptyState
-          icon={<Users size={20} />}
+          icon={Users}
          title="No client groups"
          description="Without a group every client gets the default policy."
          action={
-            <Button icon={<Plus size={14} />} onClick={openNew}>
+            <Button icon={Plus} onClick={openNew}>
              Add the first group
            </Button>
          }
@@ -362,10 +362,10 @@ export default function Clients() {
                  </div>
                </div>
                <div className="flex shrink-0 gap-1">
-                  <IconButton icon={<Pencil size={14} />} label={`edit ${group.name}`} variant="ghost" onClick={() => openEdit(i)} />
-                  <IconButton icon={<Copy size={14} />} label={`duplicate ${group.name}`} variant="ghost" onClick={() => duplicate(i)} />
+                  <IconButton icon={Pencil} label={`edit ${group.name}`} variant="ghost" onClick={() => openEdit(i)} />
+                  <IconButton icon={Copy} label={`duplicate ${group.name}`} variant="ghost" onClick={() => duplicate(i)} />
                  <IconButton
-                    icon={<Trash2 size={14} />}
+                    icon={Trash2}
                    label={`delete ${group.name}`}
                    variant="ghost"
                    onClick={() => setPendingDelete(i)}
@@ -10,15 +10,16 @@ import { useEffect, useMemo, useState } from 'react'
 import type { ReactNode } from 'react'
 import { Plus, Search, Trash2 } from 'lucide-react'

-import { addDomain, deleteDomain, getDomains } from '../../lib/api'
-import type { AddDomainInput } from '../../lib/api'
-import type { DomainItem } from '../../lib/types'
-import { useApi, useAsyncAction } from '../../hooks/useApi'
-import { useDebounced } from '../../hooks/useDebounced'
-import { formatNumber, formatRelative, toLines } from '../../lib/format'
+import { addDomain, deleteDomain, getDomains } from '../lib/api'
+import type { AddDomainInput } from '../lib/api'
+import type { DomainItem } from '../lib/types'
+import { useApi, useAsyncAction } from '../hooks/useApi'
+import { useDebounced } from '../hooks/useDebounced'
+import { formatNumber, formatRelative, toLines } from '../lib/format'
 import {
  Badge,
  Button,
+  Card,
  ConfirmDialog,
  Dialog,
  EmptyState,
@@ -30,21 +31,21 @@ import {
  Textarea,
  useToast,
 } from '../components/ui'
+import type { ToastOptions } from '../components/ui'
 import { PageError, PageHeader } from '../components/layout'

 type Row = Record<string, ReactNode>

-type ToastLike = {
-  success?: (message: string) => void
-  error?: (message: string) => void
-  toast?: (message: string) => void
-  push?: (message: string) => void
-}
-
-function notify(toast: unknown, kind: 'ok' | 'fail', message: string): void {
-  const t = toast as ToastLike
-  const fn = kind === 'ok' ? (t.success ?? t.toast ?? t.push) : (t.error ?? t.toast ?? t.push)
-  fn?.call(t, message)
+/**
+ * One line for every mutation on this page: the message plus the tone it
+ * earned. `fail` is the danger tone, `ok` the success one.
+ */
+function notify(
+  toast: (options: ToastOptions) => void,
+  kind: 'ok' | 'fail',
+  message: string,
+): void {
+  toast({ title: message, tone: kind === 'ok' ? 'ok' : 'danger' })
 }

 const PER_PAGE = 50
@@ -88,7 +89,7 @@ type AddForm = {
 const EMPTY_FORM: AddForm = { name: '', action: 'block', list: '', bulk: '', advanced: false }

 export default function Domains() {
-  const toast = useToast()
+  const { toast } = useToast()
  const [search, setSearch] = useState('')
  const [action, setAction] = useState('')
  const [list, setList] = useState('')
@@ -220,7 +221,7 @@ export default function Domains() {
    updated: <span className="whitespace-nowrap text-xs">{formatRelative(item.updated_at)}</span>,
    delete: (
      <IconButton
-        icon={<Trash2 size={14} />}
+        icon={Trash2}
        label={`delete ${item.name}`}
        variant="ghost"
        onClick={() => setPendingDelete(item)}
@@ -234,7 +235,7 @@ export default function Domains() {
        title="Domains"
        description="Inline allow and block rules, checked before the downloaded lists."
        actions={
-          <Button icon={<Plus size={14} />} onClick={() => setAddOpen(true)}>
+          <Button icon={Plus} onClick={() => setAddOpen(true)}>
            Add rule
          </Button>
        }
@@ -245,7 +246,7 @@ export default function Domains() {
          <Input
            label="Search"
            placeholder="ads.example.com"
-            icon={<Search size={14} />}
+            icon={Search}
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            autoComplete="off"
@@ -20,10 +20,10 @@ import {
  Trash2,
 } from 'lucide-react'

-import { getUpstreams, putUpstreams } from '../../lib/api'
-import type { UpstreamBootstrap, UpstreamServer } from '../../lib/types'
-import { useApi, useAsyncAction } from '../../hooks/useApi'
-import { formatLatency, formatMs, formatNumber, formatRate } from '../../lib/format'
+import { getUpstreams, putUpstreams } from '../lib/api'
+import type { UpstreamBootstrap, UpstreamHealth, UpstreamServer } from '../lib/types'
+import { useApi, useAsyncAction } from '../hooks/useApi'
+import { formatLatency, formatMs, formatNumber, formatRate } from '../lib/format'
 import {
  Badge,
  Button,
@@ -40,21 +40,21 @@ import {
  Textarea,
  useToast,
 } from '../components/ui'
+import type { ToastOptions } from '../components/ui'
 import { PageError, PageHeader } from '../components/layout'

 type Row = Record<string, ReactNode>

-type ToastLike = {
-  success?: (message: string) => void
-  error?: (message: string) => void
-  toast?: (message: string) => void
-  push?: (message: string) => void
-}
-
-function notify(toast: unknown, kind: 'ok' | 'fail', message: string): void {
-  const t = toast as ToastLike
-  const fn = kind === 'ok' ? (t.success ?? t.toast ?? t.push) : (t.error ?? t.toast ?? t.push)
-  fn?.call(t, message)
+/**
+ * One line for every mutation on this page: the message plus the tone it
+ * earned. `fail` is the danger tone, `ok` the success one.
+ */
+function notify(
+  toast: (options: ToastOptions) => void,
+  kind: 'ok' | 'fail',
+  message: string,
+): void {
+  toast({ title: message, tone: kind === 'ok' ? 'ok' : 'danger' })
 }

 const POLICIES = [
@@ -167,7 +167,7 @@ function splitList(value: string): string[] {
 }

 export default function Upstreams() {
-  const toast = useToast()
+  const { toast } = useToast()
  const { data, error, loading, refetch } = useApi(() => getUpstreams(), [])

  const [draft, setDraft] = useState<Draft | null>(null)
@@ -210,10 +210,15 @@ export default function Upstreams() {
        insecure_skip_verify: s.insecure_skip_verify,
        weight: s.weight,
        comment: s.comment,
-        health: s.health,
+        health: s.health as UpstreamHealth,
        latency_ms: s.latency_ms,
        fail_rate: s.fail_rate,
        breaker_open: s.breaker_open,
+        // Runtime counters are not part of a write: the server owns them and
+        // ignores these fields on PUT /upstreams.
+        queries: 0,
+        avg_ms: 0,
+        p95_ms: 0,
      })),
      bootstraps: working.bootstraps.map((b) => ({
        name: b.name.trim(),
@@ -314,10 +319,10 @@ export default function Upstreams() {
    comment: <span className="block max-w-[160px] truncate text-xs text-slate-500">{s.comment}</span>,
    order: (
      <span className="flex justify-end gap-0.5">
-        <IconButton icon={<ArrowUp size={13} />} label={`move ${s.addr} up`} variant="ghost" disabled={i === 0} onClick={() => move(i, -1)} />
-        <IconButton icon={<ArrowDown size={13} />} label={`move ${s.addr} down`} variant="ghost" disabled={i === working.servers.length - 1} onClick={() => move(i, 1)} />
-        <IconButton icon={<Pencil size={13} />} label={`edit ${s.addr}`} variant="ghost" onClick={() => { setEditing(s); setEditorOpen(true) }} />
-        <IconButton icon={<Trash2 size={13} />} label={`remove ${s.addr}`} variant="ghost" onClick={() => setPendingRemove(i)} />
+        <IconButton icon={ArrowUp} label={`move ${s.addr} up`} variant="ghost" disabled={i === 0} onClick={() => move(i, -1)} />
+        <IconButton icon={ArrowDown} label={`move ${s.addr} down`} variant="ghost" disabled={i === working.servers.length - 1} onClick={() => move(i, 1)} />
+        <IconButton icon={Pencil} label={`edit ${s.addr}`} variant="ghost" onClick={() => { setEditing(s); setEditorOpen(true) }} />
+        <IconButton icon={Trash2} label={`remove ${s.addr}`} variant="ghost" onClick={() => setPendingRemove(i)} />
      </span>
    ),
  }))
@@ -331,13 +336,13 @@ export default function Upstreams() {
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
-              icon={<RotateCw size={14} />}
+              icon={RotateCw}
              onClick={() => setDraft(null)}
              disabled={!dirty}
            >
              Discard
            </Button>
-            <Button icon={<Save size={14} />} onClick={() => void commit()} loading={save.pending} disabled={!dirty}>
+            <Button icon={Save} onClick={() => void commit()} loading={save.pending} disabled={!dirty}>
              Save
            </Button>
          </div>
@@ -386,7 +391,7 @@ export default function Upstreams() {
        actions={
          <Button
            size="sm"
-            icon={<Plus size={14} />}
+            icon={Plus}
            onClick={() => {
              setEditing(EMPTY_SERVER)
              setEditorOpen(true)
@@ -414,7 +419,7 @@ export default function Upstreams() {
        actions={
          <Button
            size="sm"
-            icon={<Plus size={14} />}
+            icon={Plus}
            onClick={() =>
              setDraft({
                ...working,
@@ -428,7 +433,7 @@ export default function Upstreams() {
      >
        {working.bootstraps.length === 0 ? (
          <EmptyState
-            icon={<Gauge size={20} />}
+            icon={Gauge}
            title="No bootstrap resolvers"
            description="Without them, an upstream address must already be an IP."
          />
@@ -457,7 +462,7 @@ export default function Upstreams() {
                    placeholder="24h"
                  />
                  <IconButton
-                    icon={<Trash2 size={14} />}
+                    icon={Trash2}
                    label={`remove bootstrap ${b.name}`}
                    variant="ghost"
                    onClick={() =>