UX polish pass 2: toasts, optimistic updates, mod update detection

- Install sonner; <Toaster> mounted in Providers, auto-tracks theme.
- Toasts replace inline result Alerts across ServerControls, PlayerManager,
  BackupManager, ModManager (install/remove/restore/delete/start/stop).
- PlayerManager: optimistic op/deop/whitelist/ban/pardon via onMutate +
  rollback; UI updates instantly before RCON round-trip.
- Modrinth search results now show author + "updated Xd ago" with full
  timestamp on hover; downloads on its own row.
- New /api/mods/updates endpoint: per-installed-mod Modrinth latest-version
  lookup (parallel, 30min memo). Amber "Update available" badge rendered
  next to installed mod rows when filenames differ.
- PlayerAvatar + Modrinth icons migrated to next/image (unoptimized, size
  hints) — fewer layout shifts.
- Login page surfaces ?error= + NextAuth error codes (CredentialsSignin,
  SessionRequired, etc.), preserves callbackUrl, adds autocomplete hints
  and role="alert". Wrapped in Suspense per Next 16 requirement.
- Snapshots + backups show relative "Xh ago" with exact timestamp on hover
  via new lib/time.ts helper.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

components/PlayerManager.tsx

@@ -2,10 +2,10 @@
 
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
+import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
-import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Separator } from "@/components/ui/separator";
 import {
   Card,
@@ -29,7 +29,6 @@ export function PlayerManager() {
   const [tab, setTab] = useState<Tab>("ops");
   const [playerName, setPlayerName] = useState("");
   const [banReason, setBanReason] = useState("");
-  const [result, setResult] = useState<{ ok: boolean; message: string } | null>(null);
 
   const { data = { ops: [], whitelist: [], banned: [] } } = useQuery<PlayerData>({
     queryKey: ["players"],
@@ -53,14 +52,54 @@ export function PlayerManager() {
       if (!res.ok) throw new Error(data.error);
       return data;
     },
+    onMutate: async (params) => {
+      await queryClient.cancelQueries({ queryKey: ["players"] });
+      const prev = queryClient.getQueryData<PlayerData>(["players"]);
+      if (prev) {
+        const next: PlayerData = {
+          ops: [...prev.ops],
+          whitelist: [...prev.whitelist],
+          banned: [...prev.banned],
+        };
+        const name = params.player;
+        switch (params.action) {
+          case "op":
+            if (!next.ops.some((p) => p.name === name))
+              next.ops.push({ name, uuid: "", level: 4 });
+            break;
+          case "deop":
+            next.ops = next.ops.filter((p) => p.name !== name);
+            break;
+          case "whitelist add":
+            if (!next.whitelist.some((p) => p.name === name))
+              next.whitelist.push({ name, uuid: "" });
+            break;
+          case "whitelist remove":
+            next.whitelist = next.whitelist.filter((p) => p.name !== name);
+            break;
+          case "ban":
+            if (!next.banned.some((p) => p.name === name))
+              next.banned.push({ name, uuid: "", reason: params.reason || "" });
+            break;
+          case "pardon":
+            next.banned = next.banned.filter((p) => p.name !== name);
+            break;
+        }
+        queryClient.setQueryData(["players"], next);
+      }
+      return { prev };
+    },
     onSuccess: (data) => {
-      setResult({ ok: true, message: data.response || "Done" });
+      toast.success(data.response || "Done");
       setPlayerName("");
       setBanReason("");
-      queryClient.invalidateQueries({ queryKey: ["players"] });
     },
-    onError: (err) => {
-      setResult({ ok: false, message: err.message });
+    onError: (err, _vars, ctx) => {
+      if (ctx?.prev) queryClient.setQueryData(["players"], ctx.prev);
+      toast.error("Action failed", { description: err.message });
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["players"] });
     },
   });
 
@@ -101,7 +140,7 @@ export function PlayerManager() {
           {tabs.map((t) => (
             <button
               key={t.key}
-              onClick={() => { setTab(t.key); setResult(null); }}
+              onClick={() => setTab(t.key)}
               className={`flex-1 px-2 sm:px-3 py-2 rounded-md text-xs sm:text-sm font-medium transition min-h-[40px] ${
                 tab === t.key
                   ? "bg-background text-foreground shadow-sm"
@@ -161,15 +200,6 @@ export function PlayerManager() {
           </Button>
         </div>
 
-        {/* Feedback */}
-        {result && (
-          <Alert className={result.ok ? "border-emerald-500/20 bg-emerald-500/5" : "border-red-500/20 bg-red-500/5"}>
-            <AlertDescription className={result.ok ? "text-emerald-300" : "text-red-300"}>
-              {result.message}
-            </AlertDescription>
-          </Alert>
-        )}
-
         <Separator />
 
         {/* Player lists */}