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/BackupManager.tsx

@@ -2,8 +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 { Alert, AlertDescription } from "@/components/ui/alert";
+import { timeAgo } from "@/lib/time";
 import {
   Card,
   CardContent,
@@ -22,7 +24,6 @@ export function BackupManager() {
   const queryClient = useQueryClient();
   const [confirmRestore, setConfirmRestore] = useState<string | null>(null);
   const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
-  const [result, setResult] = useState<{ ok: boolean; message: string } | null>(null);
 
   const { data: backups = [] } = useQuery<Backup[]>({
     queryKey: ["backups"],
@@ -36,11 +37,11 @@ export function BackupManager() {
       return res.json();
     },
     onSuccess: (data) => {
-      setResult({ ok: true, message: data.message || "Backup created" });
+      toast.success(data.message || "Backup created");
       queryClient.invalidateQueries({ queryKey: ["backups"] });
     },
     onError: (err) => {
-      setResult({ ok: false, message: err.message });
+      toast.error("Backup failed", { description: err.message });
     },
   });
 
@@ -55,11 +56,11 @@ export function BackupManager() {
       return res.json();
     },
     onSuccess: (data) => {
-      setResult({ ok: data.success, message: data.message });
+      (data.success ? toast.success : toast.error)(data.message);
       queryClient.invalidateQueries({ queryKey: ["status"] });
     },
     onError: (err) => {
-      setResult({ ok: false, message: err.message });
+      toast.error("Restore failed", { description: err.message });
     },
   });
 
@@ -72,8 +73,12 @@ export function BackupManager() {
       });
     },
     onSuccess: () => {
+      toast.success("Backup deleted");
       queryClient.invalidateQueries({ queryKey: ["backups"] });
     },
+    onError: (err) => {
+      toast.error("Delete failed", { description: err.message });
+    },
   });
 
   const isBusy = createBackup.isPending || restore.isPending;
@@ -97,14 +102,6 @@ export function BackupManager() {
         </div>
       </CardHeader>
       <CardContent className="space-y-4">
-        {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>
-        )}
-
         {restore.isPending && (
           <Alert className="border-blue-500/20 bg-blue-500/5">
             <AlertDescription className="text-blue-300 flex items-center gap-2">
@@ -127,8 +124,11 @@ export function BackupManager() {
               >
                 <div className="min-w-0">
                   <p className="text-sm font-medium truncate">{b.name}</p>
-                  <p className="text-xs text-muted-foreground">
-                    {new Date(b.createdAt).toLocaleString()} — {b.size}
+                  <p
+                    className="text-xs text-muted-foreground"
+                    title={new Date(b.createdAt).toLocaleString()}
+                  >
+                    {timeAgo(b.createdAt)} — {b.size}
                   </p>
                 </div>
                 <div className="flex gap-1 shrink-0 flex-wrap justify-end">