feat: enhance user limits

app/(dashboard)/users/page.tsx

@@ -3,7 +3,12 @@
 import { useCallback, useState } from "react";
 import { Mail } from "lucide-react";
 import { toast } from "sonner";
-import { api, AdminError, type AdminUser } from "@/lib/api";
+import {
+  api,
+  AdminError,
+  type AdminUser,
+  type UserLimitsInput,
+} from "@/lib/api";
 import { GoogleIcon, FacebookIcon } from "@/components/ui/provider-icons";
 import { usePagedList } from "@/lib/use-paged-list";
 import { ListShell, EmptyRow } from "@/components/list-shell";
@@ -25,6 +30,7 @@ export default function UsersPage() {
   const list = usePagedList<AdminUser>(fetcher, [q]);
   const confirm = useConfirm();
   const [notify, setNotify] = useState<AdminUser | null>(null);
+  const [limitsUser, setLimitsUser] = useState<AdminUser | null>(null);
 
   async function toggleBan(u: AdminUser) {
     const banning = !u.banned_at;
@@ -51,6 +57,7 @@ export default function UsersPage() {
   function menuItems(u: AdminUser): MenuItem[] {
     const items: MenuItem[] = [
       { label: "Send notification", onClick: () => setNotify(u) },
+      { label: "Edit limits", onClick: () => setLimitsUser(u) },
     ];
     // No ban option for fellow admins (avoid locking each other out).
     if (u.role !== "admin") {
@@ -127,6 +134,11 @@ export default function UsersPage() {
       </Table>
 
       <NotifyModal user={notify} onClose={() => setNotify(null)} />
+      <LimitsModal
+        user={limitsUser}
+        onClose={() => setLimitsUser(null)}
+        onSaved={list.refresh}
+      />
     </ListShell>
   );
 }
@@ -163,6 +175,135 @@ function AuthIcons({ user }: { user: AdminUser }) {
   );
 }
 
+// An effective limit of -1 means "unlimited" (premium default) — shown as an
+// empty field. Saving an empty field sends null, which resets that limit to
+// the plan default on the server.
+function limitToField(v: number | undefined): string {
+  return v === undefined || v < 0 ? "" : String(v);
+}
+
+function LimitsModal({
+  user,
+  onClose,
+  onSaved,
+}: {
+  user: AdminUser | null;
+  onClose: () => void;
+  onSaved: () => void;
+}) {
+  const [bookmark, setBookmark] = useState("");
+  const [pub, setPub] = useState("");
+  const [priv, setPriv] = useState("");
+  const [busy, setBusy] = useState(false);
+  // Re-seed the fields whenever a different user's modal opens.
+  const [seededFor, setSeededFor] = useState<string | null>(null);
+  if (user && seededFor !== user.id) {
+    setSeededFor(user.id);
+    setBookmark(limitToField(user.bookmark_limit));
+    setPub(limitToField(user.public_collection_limit));
+    setPriv(limitToField(user.private_collection_limit));
+  }
+  if (!user && seededFor !== null) setSeededFor(null);
+
+  // "" → null (reset to plan default); a non-negative integer → that cap.
+  function parseField(raw: string): number | null | undefined {
+    const t = raw.trim();
+    if (t === "") return null;
+    const n = Number(t);
+    if (!Number.isInteger(n) || n < 0) return undefined; // invalid
+    return n;
+  }
+
+  async function save() {
+    if (!user) return;
+    const b = parseField(bookmark);
+    const p = parseField(pub);
+    const v = parseField(priv);
+    if (b === undefined || p === undefined || v === undefined) {
+      toast.error("Limits must be whole numbers (0 or more).");
+      return;
+    }
+    const limits: UserLimitsInput = {
+      bookmark_limit: b,
+      public_collection_limit: p,
+      private_collection_limit: v,
+    };
+    setBusy(true);
+    try {
+      await api.setUserLimits(user.id, limits);
+      toast.success(`Limits updated for @${user.handle}`);
+      onSaved();
+      onClose();
+    } catch (err) {
+      toast.error(err instanceof AdminError ? err.message : "Could not update.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Modal
+      open={!!user}
+      onClose={onClose}
+      title={user ? `Edit limits — @${user.handle}` : "Edit limits"}
+    >
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          How many of each this user can save. Leave a field blank to use their
+          plan default.
+        </p>
+        <LimitField
+          label="Bookmarks"
+          value={bookmark}
+          onChange={setBookmark}
+        />
+        <LimitField
+          label="Public collections"
+          value={pub}
+          onChange={setPub}
+        />
+        <LimitField
+          label="Private collections"
+          value={priv}
+          onChange={setPriv}
+        />
+        <div className="flex justify-end gap-2">
+          <Button variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={save} disabled={busy}>
+            {busy ? "Saving…" : "Save limits"}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+function LimitField({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <label className="block space-y-1.5">
+      <span className="text-sm font-medium">{label}</span>
+      <Input
+        type="number"
+        min={0}
+        inputMode="numeric"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="Plan default"
+      />
+    </label>
+  );
+}
+
 function NotifyModal({
   user,
   onClose,