refactor: optimised UI and UX

- add tag style to status;
- add button style to action links of each domain;
- add Notiflix for better notification experiences

app/records/_components/ApplyButton.tsx

@@ -1,37 +1,44 @@
 "use client"
 
-import { useActionState } from "react"
+import { useActionState, useEffect } from "react"
 import type { ActionState } from "@/lib/action-state"
+import { notifyFailure, notifySuccess, notifyWarning } from "@/lib/notify"
 
 export interface ApplyButtonProps {
   action: (prev: ActionState, formData: FormData) => Promise<ActionState>
 }
 
+// Result messages now arrive as toasts instead of text under the button, so the card never
+// grows and nothing has to be dismissed by hand.
+const INITIAL: ActionState = { ok: false }
+
 export function ApplyButton({ action }: ApplyButtonProps) {
-  const [state, formAction, pending] = useActionState<ActionState, FormData>(action, { ok: false })
+  const [state, formAction, pending] = useActionState<ActionState, FormData>(action, INITIAL)
+
+  // Every run of the action returns a fresh object, so this fires exactly once per
+  // submission — and stays quiet on mount, where `state` carries no message yet.
+  useEffect(() => {
+    if (!state.message) return
+
+    // A success that also carries `detail` means the config was written but the restart was
+    // skipped (see applyConfigAction) — that deserves a warning, not a green tick. When the
+    // restart failed outright, the detail is the reason, so it joins the message.
+    if (state.ok) {
+      if (state.detail) notifyWarning(`${state.message}（${state.detail}）`)
+      else notifySuccess(state.message)
+      return
+    }
+    notifyFailure(state.detail ? `${state.message}：${state.detail}` : state.message)
+  }, [state])
 
   return (
-    <div className="space-y-2">
-      <form action={formAction}>
-        <button
-          type="submit"
-          disabled={pending}
-          className="rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-50 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-white">
-          {pending ? "应用中…" : "应用并重启 dnsmasq"}
-        </button>
-      </form>
-
-      {state.message ? (
-        <div className="space-y-1 text-sm">
-          <p
-            className={state.ok ? "text-emerald-700 dark:text-emerald-400" : "text-red-600 dark:text-red-400"}>
-            {state.message}
-          </p>
-          {state.detail ? (
-            <p className="text-xs text-zinc-500 dark:text-zinc-400">{state.detail}</p>
-          ) : null}
-        </div>
-      ) : null}
-    </div>
+    <form action={formAction}>
+      <button
+        type="submit"
+        disabled={pending}
+        className="rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-50 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-white">
+        {pending ? "应用中…" : "应用并重启 dnsmasq"}
+      </button>
+    </form>
   )
 }

app/records/_components/DeleteButton.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import { dangerButtonClass } from "./button-styles"
+
 export function DeleteButton() {
   return (
     <button
@@ -7,7 +9,7 @@ export function DeleteButton() {
       onClick={(event) => {
         if (!window.confirm("确定要删除这条记录吗？")) event.preventDefault()
       }}
-      className="text-sm text-red-600 transition-opacity hover:opacity-70 dark:text-red-400">
+      className={dangerButtonClass}>
       删除
     </button>
   )

app/records/_components/RecordForm.tsx

@@ -1,9 +1,10 @@
 "use client"
 
 import Link from "next/link"
-import { useActionState } from "react"
+import { useActionState, useEffect } from "react"
 import type { ActionState } from "@/lib/action-state"
 import type { DnsRecord } from "@/lib/db"
+import { notifyFailure } from "@/lib/notify"
 
 const fieldClass =
   "w-full rounded-md border border-black/10 bg-white px-3 py-2 text-sm text-zinc-900 outline-none focus:border-zinc-500 dark:border-white/15 dark:bg-white/5 dark:text-zinc-100"
@@ -27,16 +28,16 @@ export function RecordForm({ action, record, submitLabel, cancelHref }: RecordFo
   const [state, formAction, pending] = useActionState<ActionState, FormData>(action, { ok: false })
   const errors = state.fieldErrors ?? {}
 
+  // Form-level failures (e.g. the record was deleted before the save landed) go out as
+  // toasts; per-field errors stay inline next to the input they describe.
+  useEffect(() => {
+    if (state.message) notifyFailure(state.message)
+  }, [state])
+
   return (
     <form action={formAction} className="max-w-xl space-y-4">
       {record ? <input type="hidden" name="id" value={record.id} /> : null}
 
-      {state.message ? (
-        <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-700 dark:bg-red-500/10 dark:text-red-300">
-          {state.message}
-        </p>
-      ) : null}
-
       <div>
         <label className={labelClass} htmlFor="domain">
           域名

app/records/_components/button-styles.ts

@@ -0,0 +1,28 @@
+// Shared button styling for the records table actions.
+//
+// These live in one module because the same look is used by the server-rendered edit link and
+// toggle button in app/records/page.tsx and by the client DeleteButton component; keeping two
+// copies would drift the moment one is restyled.
+
+const base =
+  "inline-flex items-center rounded-md px-2.5 py-1 text-xs font-medium transition-colors disabled:opacity-50"
+
+/** Default action: edit, enable/disable. Bordered so it reads as clickable without shouting. */
+export const secondaryButtonClass = `${base} border border-black/10 bg-white text-zinc-700 hover:bg-zinc-50 dark:border-white/15 dark:bg-white/5 dark:text-zinc-300 dark:hover:bg-white/10`
+
+/**
+ * Toggle actions, tinted rather than outlined.
+ *
+ * The label flips with the record state, so colour follows what the click will *do* rather
+ * than what the row currently is: putting a record into service reads green, taking one out
+ * reads amber. Using the same white as `secondaryButtonClass` here made the two actions look
+ * like one row of identical buttons.
+ */
+export const enableButtonClass = `${base} border border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-400 dark:hover:bg-emerald-500/20`
+export const disableButtonClass = `${base} border border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-400 dark:hover:bg-amber-500/20`
+
+/**
+ * Destructive action. Deliberately outlined rather than filled: deletion is confirmed in a
+ * dialog first, and a solid red block would imply it is the primary action.
+ */
+export const dangerButtonClass = `${base} border border-red-200 bg-white text-red-600 hover:bg-red-50 dark:border-red-500/30 dark:bg-transparent dark:text-red-400 dark:hover:bg-red-500/10`

app/records/page.tsx

@@ -4,12 +4,27 @@ import { env } from "@/lib/env"
 import { listRecords } from "@/lib/records"
 import { applyConfigAction, deleteRecordAction, toggleRecordAction } from "./actions"
 import { ApplyButton } from "./_components/ApplyButton"
+import {
+  disableButtonClass,
+  enableButtonClass,
+  secondaryButtonClass,
+} from "./_components/button-styles"
 import { DeleteButton } from "./_components/DeleteButton"
 
 export const metadata = { title: "域名记录" }
 
 const cardClass = "rounded-lg border border-black/10 p-4 dark:border-white/15"
 
+// Status is shown as a tag rather than plain text so the column can be skimmed without
+// reading the label. The dot carries the same meaning for anyone who cannot tell the two
+// greens/zincs apart.
+const statusTagBase =
+  "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset"
+const statusTagEnabled = `${statusTagBase} bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-500/10 dark:text-emerald-400 dark:ring-emerald-500/20`
+const statusTagDisabled = `${statusTagBase} bg-zinc-100 text-zinc-600 ring-zinc-500/20 dark:bg-white/5 dark:text-zinc-400 dark:ring-white/15`
+const statusDotEnabled = "size-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400"
+const statusDotDisabled = "size-1.5 rounded-full bg-zinc-400 dark:bg-zinc-500"
+
 export default function RecordsPage() {
   return (
     <section className="space-y-6">
@@ -73,37 +88,40 @@ async function RecordTable() {
         <tbody className="divide-y divide-black/5 dark:divide-white/10">
           {records.map((record) => (
             <tr key={record.id}>
-              <td className="px-4 py-2 font-mono text-zinc-900 dark:text-zinc-100">{record.domain}</td>
+              <td className="px-4 py-2 font-mono text-zinc-900 dark:text-zinc-100">
+                {record.domain}
+              </td>
               <td className="px-4 py-2 text-zinc-600 dark:text-zinc-400">{record.type}</td>
-              <td className="px-4 py-2 font-mono text-zinc-600 dark:text-zinc-400">{record.value}</td>
+              <td className="px-4 py-2 font-mono text-zinc-600 dark:text-zinc-400">
+                {record.value}
+              </td>
               <td className="px-4 py-2">
-                <span
-                  className={
-                    record.enabled
-                      ? "text-emerald-700 dark:text-emerald-400"
-                      : "text-zinc-400 dark:text-zinc-500"
-                  }>
+                <span className={record.enabled ? statusTagEnabled : statusTagDisabled}>
+                  <span
+                    aria-hidden="true"
+                    className={record.enabled ? statusDotEnabled : statusDotDisabled}
+                  />
                   {record.enabled ? "已启用" : "已禁用"}
                 </span>
               </td>
-              <td className="px-4 py-2 text-zinc-600 dark:text-zinc-400">{record.comment || "—"}</td>
+              <td className="px-4 py-2 text-zinc-600 dark:text-zinc-400">
+                {record.comment || "—"}
+              </td>
               <td className="px-4 py-2">
-                <div className="flex items-center gap-3">
-                  <Link
-                    href={`/records/${record.id}`}
-                    className="text-sm text-zinc-700 transition-opacity hover:opacity-70 dark:text-zinc-300">
+                <div className="flex items-center gap-2">
+                  <Link href={`/records/${record.id}`} className={secondaryButtonClass}>
                     编辑
                   </Link>
-                  <form action={toggleRecordAction} className="inline">
+                  <form action={toggleRecordAction} className="inline-flex">
                     <input type="hidden" name="id" value={record.id} />
                     <input type="hidden" name="enabled" value={record.enabled ? "0" : "1"} />
                     <button
                       type="submit"
-                      className="text-sm text-zinc-700 transition-opacity hover:opacity-70 dark:text-zinc-300">
+                      className={record.enabled ? disableButtonClass : enableButtonClass}>
                       {record.enabled ? "禁用" : "启用"}
                     </button>
                   </form>
-                  <form action={deleteRecordAction} className="inline">
+                  <form action={deleteRecordAction} className="inline-flex">
                     <input type="hidden" name="id" value={record.id} />
                     <DeleteButton />
                   </form>