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>

app/api/mods/updates/route.ts

@@ -0,0 +1,87 @@
+import { NextResponse } from "next/server";
+import { readFileSync } from "fs";
+import { auth } from "@/lib/auth";
+import { MOD_METADATA_FILE } from "@/lib/constants";
+import { memoAsync } from "@/lib/cache";
+
+export const dynamic = "force-dynamic";
+
+const API = "https://api.modrinth.com/v2";
+const GAME_VERSION = "1.20.1";
+const LOADER = "forge";
+const UA = "HurkiCorgiMC/1.0 (minecraft.hurkicorgi.com)";
+
+type ModMetadataEntry = { projectId: string; side: string };
+
+type UpdateInfo = {
+  filename: string;
+  projectId: string;
+  latestFilename: string;
+  latestVersionId: string;
+  dateModified: string;
+  hasUpdate: boolean;
+};
+
+async function checkUpdates(): Promise<UpdateInfo[]> {
+  let metadata: Record<string, ModMetadataEntry>;
+  try {
+    metadata = JSON.parse(readFileSync(MOD_METADATA_FILE, "utf8"));
+  } catch {
+    return [];
+  }
+
+  const entries = Object.entries(metadata).filter(([, m]) => m?.projectId);
+  if (entries.length === 0) return [];
+
+  const results = await Promise.all(
+    entries.map(async ([filename, entry]) => {
+      try {
+        const url = `${API}/project/${entry.projectId}/version?game_versions=["${GAME_VERSION}"]&loaders=["${LOADER}"]`;
+        const res = await fetch(url, {
+          headers: { "User-Agent": UA },
+          signal: AbortSignal.timeout(10_000),
+        });
+        if (!res.ok) return null;
+        const versions: Array<{
+          id: string;
+          date_published: string;
+          files: Array<{ filename: string }>;
+        }> = await res.json();
+        const latest = versions[0];
+        if (!latest || !latest.files?.[0]) return null;
+        const latestFilename = latest.files[0].filename;
+        return {
+          filename,
+          projectId: entry.projectId,
+          latestFilename,
+          latestVersionId: latest.id,
+          dateModified: latest.date_published,
+          hasUpdate: latestFilename !== filename,
+        } satisfies UpdateInfo;
+      } catch {
+        return null;
+      }
+    })
+  );
+
+  return results.filter((r): r is UpdateInfo => r !== null && r.hasUpdate);
+}
+
+export async function GET() {
+  const session = await auth();
+  if (!session) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 403 });
+  }
+
+  try {
+    const updates = await memoAsync("mods:updates", 30 * 60 * 1000, checkUpdates);
+    return NextResponse.json(updates, {
+      headers: { "Cache-Control": "private, max-age=300" },
+    });
+  } catch (e) {
+    return NextResponse.json(
+      { error: (e as Error).message },
+      { status: 500 }
+    );
+  }
+}

app/login/page.tsx

@@ -1,18 +1,32 @@
 "use client";
 
 import { signIn } from "next-auth/react";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
-import { useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
-export default function LoginPage() {
+const ERROR_MESSAGES: Record<string, string> = {
+  CredentialsSignin: "Invalid username or password.",
+  SessionRequired: "Please sign in to continue.",
+  Verification: "Sign-in link is invalid or expired.",
+  AccessDenied: "You don't have access.",
+  Configuration: "Auth configuration error — contact the server admin.",
+};
+
+function LoginInner() {
   const router = useRouter();
+  const params = useSearchParams();
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
 
+  useEffect(() => {
+    const qErr = params.get("error");
+    if (qErr) setError(ERROR_MESSAGES[qErr] || `Sign-in failed (${qErr}).`);
+  }, [params]);
+
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     setLoading(true);
@@ -27,10 +41,11 @@ export default function LoginPage() {
     });
 
     if (res?.error) {
-      setError("Invalid credentials");
+      setError(ERROR_MESSAGES[res.error] || "Invalid credentials.");
       setLoading(false);
     } else {
-      router.push("/admin");
+      const callback = params.get("callbackUrl") || "/admin";
+      router.push(callback);
     }
   }
 
@@ -44,16 +59,34 @@ export default function LoginPage() {
           <form onSubmit={handleSubmit} className="space-y-4">
             <div className="space-y-2">
               <Label htmlFor="username">Username</Label>
-              <Input id="username" name="username" type="text" required />
+              <Input
+                id="username"
+                name="username"
+                type="text"
+                autoComplete="username"
+                required
+                autoFocus
+              />
             </div>
 
             <div className="space-y-2">
               <Label htmlFor="password">Password</Label>
-              <Input id="password" name="password" type="password" required />
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="current-password"
+                required
+              />
             </div>
 
             {error && (
-              <p className="text-destructive text-sm text-center">{error}</p>
+              <div
+                role="alert"
+                className="rounded-md border border-red-500/30 bg-red-500/5 p-2.5 text-destructive text-sm text-center"
+              >
+                {error}
+              </div>
             )}
 
             <Button type="submit" disabled={loading} className="w-full">
@@ -74,3 +107,11 @@ export default function LoginPage() {
     </div>
   );
 }
+
+export default function LoginPage() {
+  return (
+    <Suspense fallback={null}>
+      <LoginInner />
+    </Suspense>
+  );
+}

app/providers.tsx

@@ -2,7 +2,8 @@
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { SessionProvider } from "next-auth/react";
-import { useState } from "react";
+import { Toaster } from "sonner";
+import { useEffect, useState } from "react";
 
 export function Providers({ children }: { children: React.ReactNode }) {
   const [queryClient] = useState(
@@ -16,9 +17,29 @@ export function Providers({ children }: { children: React.ReactNode }) {
       })
   );
 
+  const [theme, setTheme] = useState<"light" | "dark">("dark");
+  useEffect(() => {
+    const sync = () => {
+      setTheme(document.documentElement.classList.contains("dark") ? "dark" : "light");
+    };
+    sync();
+    const obs = new MutationObserver(sync);
+    obs.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => obs.disconnect();
+  }, []);
+
   return (
     <SessionProvider>
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      <QueryClientProvider client={queryClient}>
+        {children}
+        <Toaster
+          theme={theme}
+          position="bottom-right"
+          richColors
+          closeButton
+          toastOptions={{ duration: 4000 }}
+        />
+      </QueryClientProvider>
     </SessionProvider>
   );
 }

bun.lock

@@ -19,6 +19,7 @@
         "react": "19.2.4",
         "react-dom": "19.2.4",
         "shadcn": "^4.2.0",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^3.5.0",
         "tw-animate-css": "^1.4.0",
       },
@@ -1162,6 +1163,8 @@
 
     "sisteransi": ["sisteransi@1.0.5", "", {}, "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="],
 
+    "sonner": ["sonner@2.0.7", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w=="],
+
     "source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],

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">
+                  <p
-                    {new Date(b.createdAt).toLocaleString()} — {b.size}
+                    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">

components/ModManager.tsx

@@ -2,12 +2,15 @@
 
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useState, useCallback, useRef, useEffect } from "react";
+import Image from "next/image";
+import { toast } from "sonner";
 import { CheckCircle2, XCircle, Circle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
+import { timeAgo } from "@/lib/time";
 import {
   Card,
   CardContent,
@@ -36,6 +39,9 @@ type SearchResult = {
   icon_url: string;
   downloads: number;
   project_id: string;
+  author: string;
+  date_modified: string;
+  follows: number;
 };
 
 type ModDownload = {
@@ -133,6 +139,17 @@ export function ModManager() {
     staleTime: 30_000,
   });
 
+  // Updates available (from Modrinth)
+  const { data: updates = [] } = useQuery<{ filename: string; latestFilename: string; dateModified: string }[]>({
+    queryKey: ["mod-updates"],
+    queryFn: () =>
+      fetch("/api/mods/updates").then((r) => (r.ok ? r.json() : [])),
+    staleTime: 15 * 60 * 1000,
+    refetchOnMount: false,
+  });
+
+  const updateMap = new Map(updates.map((u) => [u.filename, u]));
+
   // Search (debounced)
   const [debouncedQuery, setDebouncedQuery] = useState("");
 
@@ -258,6 +275,11 @@ export function ModManager() {
         if (data.installed?.length) {
           setNewlyInstalled(new Set(data.installed));
         }
+        toast.success(data.message || "Mods installed");
+      } else {
+        toast.error(data.message || "Install failed", {
+          description: data.rolledBack ? "Changes rolled back." : undefined,
+        });
       }
       queryClient.invalidateQueries({ queryKey: ["mods"] });
       queryClient.invalidateQueries({ queryKey: ["status"] });
@@ -267,6 +289,7 @@ export function ModManager() {
       setInstallStatus("");
       setTimelineSteps([]);
       setInstallResult({ success: false, message: err.message });
+      toast.error("Install failed", { description: err.message });
     },
   });
 
@@ -283,10 +306,12 @@ export function ModManager() {
     },
     onSuccess: (data) => {
       setInstallResult(data);
+      (data.success ? toast.success : toast.error)(data.message || "Mod removed");
       queryClient.invalidateQueries({ queryKey: ["mods"] });
       queryClient.invalidateQueries({ queryKey: ["status"] });
       queryClient.invalidateQueries({ queryKey: ["snapshots"] });
     },
+    onError: (err) => toast.error("Remove failed", { description: err.message }),
   });
 
   // Restore snapshot
@@ -302,10 +327,12 @@ export function ModManager() {
     },
     onSuccess: (data) => {
       setInstallResult(data);
+      (data.success ? toast.success : toast.error)(data.message || "Snapshot restored");
       queryClient.invalidateQueries({ queryKey: ["mods"] });
       queryClient.invalidateQueries({ queryKey: ["status"] });
       queryClient.invalidateQueries({ queryKey: ["snapshots"] });
     },
+    onError: (err) => toast.error("Restore failed", { description: err.message }),
   });
 
   // Delete snapshot
@@ -318,8 +345,10 @@ export function ModManager() {
       });
     },
     onSuccess: () => {
+      toast.success("Snapshot deleted");
       queryClient.invalidateQueries({ queryKey: ["snapshots"] });
     },
+    onError: (err) => toast.error("Delete failed", { description: err.message }),
   });
 
   const toggleSelect = useCallback((result: SearchResult) => {
@@ -488,30 +517,42 @@ export function ModManager() {
                         }`}
                       >
                         {result.icon_url ? (
-                          <img
+                          <Image
                             src={result.icon_url}
                             alt=""
                             width={40}
                             height={40}
-                            loading="lazy"
+                            unoptimized
-                            decoding="async"
+                            className="w-10 h-10 rounded-md shrink-0 bg-muted object-cover"
-                            className="w-10 h-10 rounded-md shrink-0 bg-muted"
                           />
                         ) : (
                           <div className="w-10 h-10 rounded-md bg-muted shrink-0" />
                         )}
                         <div className="flex-1 min-w-0">
-                          <div className="flex items-center gap-2">
+                          <div className="flex items-center gap-2 flex-wrap">
                             <span className="text-sm font-medium truncate">
                               {result.title}
                             </span>
-                            <span className="text-xs text-muted-foreground shrink-0">
+                            {result.author && (
-                              {formatDownloads(result.downloads)} downloads
+                              <span className="text-xs text-muted-foreground shrink-0">
-                            </span>
+                                by {result.author}
+                              </span>
+                            )}
                           </div>
                           <p className="text-xs text-muted-foreground truncate">
                             {result.description}
                           </p>
+                          <div className="flex items-center gap-2 mt-0.5 text-[10px] text-muted-foreground/80 tabular-nums">
+                            <span>{formatDownloads(result.downloads)} downloads</span>
+                            {result.date_modified && (
+                              <>
+                                <span aria-hidden>·</span>
+                                <span title={new Date(result.date_modified).toLocaleString()}>
+                                  updated {timeAgo(result.date_modified)}
+                                </span>
+                              </>
+                            )}
+                          </div>
                         </div>
                         {isSelected && (
                           <Badge variant="default" className="shrink-0 text-xs">
@@ -766,6 +807,15 @@ export function ModManager() {
                               New
                             </Badge>
                           )}
+                          {updateMap.has(mod.filename) && (
+                            <Badge
+                              variant="outline"
+                              className="text-xs px-1.5 py-0 border-amber-500/40 text-amber-300"
+                              title={`Latest: ${updateMap.get(mod.filename)?.latestFilename}`}
+                            >
+                              Update available
+                            </Badge>
+                          )}
                         </div>
                         <p className="text-xs text-muted-foreground truncate">
                           {mod.filename} — {mod.size}
@@ -838,8 +888,11 @@ export function ModManager() {
                         {snap.modCount} mods
                       </Badge>
                     </div>
-                    <p className="text-xs text-muted-foreground">
+                    <p
-                      {new Date(snap.createdAt).toLocaleString()}
+                      className="text-xs text-muted-foreground"
+                      title={new Date(snap.createdAt).toLocaleString()}
+                    >
+                      {timeAgo(snap.createdAt)}
                     </p>
                   </div>
                   <div className="flex gap-1 shrink-0 flex-wrap justify-end">

components/PlayerAvatar.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import { useState } from "react";
 
 export function PlayerAvatar({
@@ -28,13 +29,12 @@ export function PlayerAvatar({
   }
 
   return (
-    <img
+    <Image
       src={`https://mc-heads.net/avatar/${encodeURIComponent(name)}/${size}`}
       alt=""
       width={size}
       height={size}
-      loading="lazy"
+      unoptimized
-      decoding="async"
       onError={() => setFailed(true)}
       className={`rounded shrink-0 bg-muted ${className}`}
     />

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) => {
+    onError: (err, _vars, ctx) => {
-      setResult({ ok: false, message: err.message });
+      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 */}

components/ServerControls.tsx

@@ -2,6 +2,7 @@
 
 import { useMutation, useQuery, 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 { Separator } from "@/components/ui/separator";
@@ -51,16 +52,21 @@ export function ServerControls() {
       }
       return { ...(await res.json()), act };
     },
-    onSuccess: () => {
+    onSuccess: (_, act) => {
+      toast.success(`${ACTION_LABEL[act]} command sent`, {
+        description: "Status will update in a few seconds.",
+      });
       setTimeout(
         () => queryClient.invalidateQueries({ queryKey: ["status"] }),
         3000
       );
     },
+    onError: (err, act) => {
+      toast.error(`${ACTION_LABEL[act]} failed`, { description: err.message });
+    },
   });
 
   const isOnline = status?.online ?? false;
-  const lastAction = action.data?.act as Action | undefined;
 
   const trigger = (act: Action) => {
     if (act === "start") {
@@ -179,20 +185,7 @@ export function ServerControls() {
             </AlertDescription>
           </Alert>
         )}
-        {action.isSuccess && !action.isPending && (
+        {/* success/error surfaced via toast */}
-          <Alert className="border-emerald-500/20 bg-emerald-500/5">
-            <AlertDescription className="text-emerald-300">
-              {lastAction ? `${ACTION_LABEL[lastAction]} command sent.` : "Command sent."} Status updates in a few seconds.
-            </AlertDescription>
-          </Alert>
-        )}
-        {action.isError && (
-          <Alert className="border-red-500/20 bg-red-500/5">
-            <AlertDescription className="text-red-300">
-              {action.error.message}
-            </AlertDescription>
-          </Alert>
-        )}
 
         <Separator />
 

lib/modrinth.ts

@@ -16,6 +16,9 @@ export type SearchResult = {
   icon_url: string;
   downloads: number;
   project_id: string;
+  author: string;
+  date_modified: string;
+  follows: number;
 };
 
 export type ModDownload = {
@@ -53,12 +56,15 @@ export async function searchMods(query: string): Promise<SearchResult[]> {
 
   const data = await res.json();
   return data.hits.map((h: Record<string, unknown>) => ({
-    slug: h.slug,
+    slug: h.slug as string,
-    title: h.title,
+    title: h.title as string,
-    description: h.description,
+    description: h.description as string,
-    icon_url: h.icon_url || "",
+    icon_url: (h.icon_url as string) || "",
-    downloads: h.downloads,
+    downloads: (h.downloads as number) ?? 0,
-    project_id: h.project_id,
+    project_id: h.project_id as string,
+    author: (h.author as string) || "",
+    date_modified: (h.date_modified as string) || "",
+    follows: (h.follows as number) ?? 0,
   }));
 }
 

lib/time.ts

@@ -0,0 +1,23 @@
+export function timeAgo(iso: string | number | Date): string {
+  const d = typeof iso === "string" || typeof iso === "number" ? new Date(iso) : iso;
+  const sec = Math.round((Date.now() - d.getTime()) / 1000);
+  if (!isFinite(sec) || sec < 0) return "";
+  if (sec < 45) return "just now";
+  const min = Math.round(sec / 60);
+  if (min < 60) return `${min}m ago`;
+  const hr = Math.round(min / 60);
+  if (hr < 24) return `${hr}h ago`;
+  const day = Math.round(hr / 24);
+  if (day < 30) return `${day}d ago`;
+  const mo = Math.round(day / 30);
+  if (mo < 12) return `${mo}mo ago`;
+  const yr = Math.round(mo / 12);
+  return `${yr}y ago`;
+}
+
+export function formatBytes(n: number): string {
+  if (!isFinite(n) || n <= 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.min(Math.floor(Math.log(n) / Math.log(1024)), units.length - 1);
+  return `${(n / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+}

package.json

@@ -23,6 +23,7 @@
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "shadcn": "^4.2.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0"
   },