feat: vani of the day

app/(dashboard)/vani/page.tsx

@@ -36,6 +36,7 @@ export default function VaniPage() {
     rows: [],
   });
   const [busy, setBusy] = useState(false);
+  const [link, setLink] = useState("");
 
   const refresh = () =>
     vani
@@ -85,6 +86,27 @@ export default function VaniPage() {
     }
   };
 
+  // Pasting the link is the primary path: it names one exact item, where
+  // search can only match words. A slug searched as text finds its
+  // neighbours, not itself.
+  const pinByLink = async () => {
+    const url = link.trim();
+    if (!url) return;
+    setBusy(true);
+    try {
+      const pick = await vani.setByURL({ day, url });
+      toast.success(`Set ${pick.payload.title} for ${day}`);
+      setLink("");
+      await refresh();
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Could not use that link",
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
+
   const clear = async (pick: VaniPick) => {
     if (
       !window.confirm(
@@ -121,7 +143,29 @@ export default function VaniPage() {
       </header>
 
       <section className="space-y-3 rounded-xl border border-border p-4">
-        <div className="flex flex-wrap items-center gap-3">
+        <div className="flex flex-wrap items-center gap-2">
+          <input
+            value={link}
+            onChange={(e) => setLink(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && void pinByLink()}
+            placeholder="Paste a link — /transcriptions/720720sb-london"
+            className={`${field} min-w-0 flex-1`}
+          />
+          <button
+            type="button"
+            disabled={busy || !link.trim()}
+            onClick={pinByLink}
+            className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+          >
+            Use this link
+          </button>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Or search by words. A slug only matches its own words, so paste the
+          link when you know exactly which item you want.
+        </p>
+
+        <div className="flex flex-wrap items-center gap-3 border-t border-border pt-3">
           <label className="text-sm text-muted-foreground">
             Date
             <input