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>
This commit is contained in:
parent
6c91f7fef0
commit
f9ae1afac1
12 changed files with 334 additions and 76 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
decoding="async"
|
||||
className="w-10 h-10 rounded-md shrink-0 bg-muted"
|
||||
unoptimized
|
||||
className="w-10 h-10 rounded-md shrink-0 bg-muted object-cover"
|
||||
/>
|
||||
) : (
|
||||
<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">
|
||||
{formatDownloads(result.downloads)} downloads
|
||||
</span>
|
||||
{result.author && (
|
||||
<span className="text-xs text-muted-foreground shrink-0">
|
||||
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">
|
||||
{new Date(snap.createdAt).toLocaleString()}
|
||||
<p
|
||||
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">
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
decoding="async"
|
||||
unoptimized
|
||||
onError={() => setFailed(true)}
|
||||
className={`rounded shrink-0 bg-muted ${className}`}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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 */}
|
||||
|
|
|
|||
|
|
@ -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 && (
|
||||
<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>
|
||||
)}
|
||||
{/* success/error surfaced via toast */}
|
||||
|
||||
<Separator />
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue