Initial Mebbling hub implementation

app/dashboard/webhook-control.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useState } from "react";
+
+export function WebhookControl({ sourceId, configured }: { sourceId: number; configured: boolean }) {
+  const [url, setUrl] = useState(""); const [error, setError] = useState(""); const [busy, setBusy] = useState(false);
+  async function generate() {
+    setBusy(true); setError("");
+    try {
+      const response = await fetch(`/api/sources/${sourceId}/webhook`, { method: "POST", headers: { Accept: "application/json" } });
+      const body = await response.json(); if (!response.ok) throw new Error(body.error || "無法產生 webhook URL"); setUrl(body.url);
+    } catch (reason) { setError(reason instanceof Error ? reason.message : "無法產生 webhook URL"); }
+    finally { setBusy(false); }
+  }
+  async function copy() { if (url) await navigator.clipboard.writeText(url); }
+  return <div className="webhook-control"><p className="meta">Webhook：{configured ? "已設定" : "尚未設定"}</p>
+    {url ? <><label className="sr-only" htmlFor={`webhook-${sourceId}`}>Webhook URL</label><input id={`webhook-${sourceId}`} readOnly value={url} onFocus={(event) => event.currentTarget.select()} /><div className="row"><button type="button" onClick={copy}>複製 URL</button><button type="button" className="danger" onClick={generate} disabled={busy}>重新產生</button></div><p className="meta">請立即複製到 Memos；重新整理後完整密鑰不會再顯示。</p></> : <button type="button" onClick={generate} disabled={busy}>{busy ? "產生中…" : configured ? "重新產生 webhook URL" : "產生 webhook URL"}</button>}
+    {error && <p className="error">{error}</p>}
+  </div>;
+}