hurkicorgi/mc-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
- 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:
hurkicorgi 2026-04-13 05:11:17 -06:00
parent 6c91f7fef0
commit f9ae1afac1
12 changed files with 334 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

87
app/api/mods/updates/route.ts Normal file
View file

@ -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 }
);
}
}

57
app/login/page.tsx
View file

@ -1,18 +1,32 @@
"use client";
import { signIn } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
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>
);
}

25
app/providers.tsx
View file

@ -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>
);
}

3
bun.lock
View file

@ -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=="],

30
components/BackupManager.tsx
View file

@ -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">

73
components/ModManager.tsx
View file

@ -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">

6
components/PlayerAvatar.tsx
View file

@ -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}`}
/>

62
components/PlayerManager.tsx
View file

@ -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 */}

25
components/ServerControls.tsx
View file

@ -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 />

18
lib/modrinth.ts
View file

@ -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,
title: h.title,
description: h.description,
icon_url: h.icon_url || "",
downloads: h.downloads,
project_id: h.project_id,
slug: h.slug as string,
title: h.title as string,
description: h.description as string,
icon_url: (h.icon_url as string) || "",
downloads: (h.downloads as number) ?? 0,
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,
}));
}

23
lib/time.ts Normal file
View file

@ -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]}`;
}

1
package.json
View file

@ -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"
},