refactor(cms): deduplicate shared admin components and fix studio batch completion

- fix(studio): stop markBatchDone infinite recursion so batches complete
- refactor(api): merge api-response into api and drop the duplicate module
- refactor(media): extract shared media loader and URL validator
- refactor(ui): extract shared LoadingSpinner for site and admin groups
- refactor(dates): consolidate raw date formatting into formatDate util
- refactor(logs): share a single generic log-list loader across tables
- refactor(theme): merge both ColorField components and reuse contrast helpers
- refactor(import): extract shared ImportErrorBanner and SearchInput
- chore(): remove dead theme-editor-tabs after inlining tab components

src/app/admin/users/[id]/user-activity-log.tsx

@@ -2,6 +2,7 @@ import { MessageSquare, Terminal } from "lucide-react";
 import Link from "@/components/link";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { formatDate } from "@/lib/format-date";
 
 interface ChatMessage {
 	id: number;
@@ -25,13 +26,7 @@ interface UserActivityLogProps {
 
 function formatTime(ts: number) {
 	if (!ts) return "-";
-	const d = new Date(ts * 1000);
-	return d.toLocaleString(undefined, {
-		day: "2-digit",
-		month: "short",
-		hour: "2-digit",
-		minute: "2-digit",
-	});
+	return formatDate(new Date(ts * 1000));
 }
 
 export function UserActivityLog({

src/app/admin/users/[id]/user-ban-section.tsx

@@ -17,6 +17,7 @@ import {
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { useServerAction } from "@/hooks/use-server-action";
+import { formatDate } from "@/lib/format-date";
 
 interface BanInfo {
 	id: number;
@@ -110,7 +111,7 @@ export function UserBanSection({
 							By {activeBan.staffName} ·{" "}
 							{activeBan.banExpire === 0
 								? "Permanent"
-								: `Expires ${new Date(activeBan.banExpire * 1000).toLocaleString()}`}
+								: `Expires ${formatDate(new Date(activeBan.banExpire * 1000))}`}
 						</p>
 					</div>
 				)}
@@ -174,7 +175,7 @@ export function UserBanSection({
 									</span>
 								</div>
 								<span className="text-xs text-muted-foreground">
-									{new Date(ban.timestamp * 1000).toLocaleDateString()}
+									{formatDate(new Date(ban.timestamp * 1000), "date")}
 								</span>
 							</div>
 						))}

src/app/admin/users/_components/user-account-info.tsx

@@ -9,6 +9,7 @@ import {
 import Link from "@/components/link";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { formatDate } from "@/lib/format-date";
 
 interface UserAccountInfoProps {
 	user: {
@@ -36,14 +37,7 @@ export function UserAccountInfo({ user }: UserAccountInfoProps) {
 							<Calendar className="h-4 w-4 text-muted-foreground shrink-0" />
 							<span className="text-muted-foreground">Registered</span>
 							<span className="ml-auto font-medium">
-								{new Date(user.accountCreated * 1000).toLocaleDateString(
-									"it-IT",
-									{
-										day: "2-digit",
-										month: "short",
-										year: "numeric",
-									},
-								)}
+								{formatDate(new Date(user.accountCreated * 1000), "date")}
 							</span>
 						</div>
 						<div className="flex items-center gap-3 text-sm">
@@ -51,16 +45,7 @@ export function UserAccountInfo({ user }: UserAccountInfoProps) {
 							<span className="text-muted-foreground">Last Login</span>
 							<span className="ml-auto font-medium">
 								{user.lastLogin
-									? new Date(user.lastLogin * 1000).toLocaleDateString(
-											"it-IT",
-											{
-												day: "2-digit",
-												month: "short",
-												year: "numeric",
-												hour: "2-digit",
-												minute: "2-digit",
-											},
-										)
+									? formatDate(new Date(user.lastLogin * 1000))
 									: "Never"}
 							</span>
 						</div>

src/app/admin/users/users-table.tsx

@@ -1,8 +1,18 @@
 "use client";
 
-import { useSearchParams } from "next/navigation";
+import { Eye, Pencil, Wifi, WifiOff } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+	bulkAdjustCurrency,
+	bulkBan,
+	bulkGiveBadge,
+	bulkUnban,
+} from "@/actions/bulk-users";
 import { DataTable } from "@/components/admin/data-table";
+import Link from "@/components/link";
 import { CurrencyIcon } from "@/components/shared/currency-icon";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -21,9 +31,161 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import type { PaginatedResult } from "@/types/common";
-import { useUserBulkActions } from "./use-user-bulk-actions";
-import { getUserColumns, type UserRow } from "./user-columns";
+import { formatDate } from "@/lib/format-date";
+import { getAvatarUrl } from "@/lib/imager";
+import type { DataTableColumn, PaginatedResult } from "@/types/common";
+
+interface UserRow {
+	id: number;
+	username: string;
+	mail: string | null;
+	rank: number;
+	credits: number;
+	pixels: number;
+	online: string;
+	motto: string;
+	look: string;
+	ipRegister: string;
+	accountCreated: number;
+	lastLogin: number | null;
+}
+
+const RANK_LABELS: Record<number, string> = {
+	1: "User",
+	2: "Bronze",
+	3: "Silver",
+	4: "Gold",
+	5: "Moderator",
+	6: "Admin",
+	7: "Super Admin",
+};
+
+function getColumns(canEdit: boolean): DataTableColumn<UserRow>[] {
+	const cols: DataTableColumn<UserRow>[] = [
+		{ key: "id", label: "ID", sortable: true },
+		{
+			key: "username",
+			label: "User",
+			sortable: true,
+			render: (_, row) => (
+				<Link
+					href={`/admin/users/show/${row.id}`}
+					className="flex items-center gap-2.5 hover:opacity-80"
+				>
+					<img
+						src={getAvatarUrl(row.look, {
+							size: "m",
+							direction: 2,
+							headDirection: 2,
+						})}
+						alt=""
+						width={64}
+						height={110}
+						className="h-[110px] w-16 shrink-0"
+						style={{ imageRendering: "pixelated" }}
+					/>
+					<div className="min-w-0">
+						<span className="font-medium block">{row.username}</span>
+						{row.motto && (
+							<span className="text-xs text-muted-foreground truncate block max-w-[200px]">
+								{row.motto}
+							</span>
+						)}
+					</div>
+				</Link>
+			),
+		},
+		{ key: "mail", label: "Email", sortable: true },
+		{
+			key: "rank",
+			label: "Rank",
+			sortable: true,
+			filterKey: "filter_rank",
+			filterOptions: [
+				{ label: "User (1)", value: "1" },
+				{ label: "Bronze (2)", value: "2" },
+				{ label: "Silver (3)", value: "3" },
+				{ label: "Gold (4)", value: "4" },
+				{ label: "Moderator (5)", value: "5" },
+				{ label: "Admin (6)", value: "6" },
+				{ label: "Super Admin (7+)", value: "7" },
+			],
+			render: (value) => {
+				const r = Number(value);
+				return (
+					<Badge
+						variant={r >= 7 ? "default" : r >= 5 ? "secondary" : "outline"}
+					>
+						{RANK_LABELS[r] || `Rank ${r}`}
+					</Badge>
+				);
+			},
+		},
+		{
+			key: "credits",
+			label: "Credits",
+			sortable: true,
+			render: (value) => (
+				<span className="tabular-nums">{Number(value).toLocaleString()}</span>
+			),
+		},
+		{
+			key: "online",
+			label: "Status",
+			filterKey: "filter_online",
+			filterOptions: [
+				{ label: "Online", value: "1" },
+				{ label: "Offline", value: "0" },
+			],
+			render: (value) =>
+				value === "1" ? (
+					<span className="flex items-center gap-1.5 text-[var(--admin-success)]">
+						<Wifi className="h-3.5 w-3.5" /> Online
+					</span>
+				) : (
+					<span className="flex items-center gap-1.5 text-muted-foreground">
+						<WifiOff className="h-3.5 w-3.5" /> Offline
+					</span>
+				),
+		},
+		{
+			key: "accountCreated",
+			label: "Registered",
+			sortable: true,
+			render: (value) => {
+				const ts = Number(value);
+				if (!ts) return "-";
+				return (
+					<span className="text-xs text-muted-foreground">
+						{formatDate(new Date(ts * 1000), "date")}
+					</span>
+				);
+			},
+		},
+		{
+			key: "actions",
+			label: "",
+			render: (_, row) => (
+				<div className="flex items-center gap-1">
+					<Button variant="ghost" size="icon" asChild title="View">
+						<Link href={`/admin/users/show/${row.id}`}>
+							<Eye className="h-4 w-4" />
+						</Link>
+					</Button>
+					{canEdit && (
+						<Button variant="ghost" size="icon" asChild title="Edit">
+							<Link href={`/admin/users/edit/${row.id}`}>
+								<Pencil className="h-4 w-4" />
+							</Link>
+						</Button>
+					)}
+				</div>
+			),
+		},
+	];
+
+	return cols;
+}
 
 interface UsersTableProps {
 	data: PaginatedResult<UserRow>;
@@ -31,27 +193,144 @@ interface UsersTableProps {
 	canBan: boolean;
 }
 
+type PendingDialog =
+	| { kind: "ban"; ids: number[] }
+	| { kind: "give-currency"; ids: number[] }
+	| { kind: "give-badge"; ids: number[] }
+	| null;
+
 export function UsersTable({ data, canEdit, canBan }: UsersTableProps) {
-	const searchParams = useSearchParams();
-	const {
-		pending,
-		setPending,
-		busy,
-		banReason,
-		setBanReason,
-		banDuration,
-		setBanDuration,
-		currencyType,
-		setCurrencyType,
-		currencyAmount,
-		setCurrencyAmount,
-		badgeCode,
-		setBadgeCode,
-		handleBulkAction,
-		confirmBan,
-		confirmGiveCurrency,
-		confirmGiveBadge,
-	} = useUserBulkActions();
+	const [pending, setPending] = useState<PendingDialog>(null);
+	const [busy, setBusy] = useState(false);
+	const [banReason, setBanReason] = useState("Bulk ban");
+	const [banDuration, setBanDuration] = useState("-1");
+	const [currencyType, setCurrencyType] = useState<
+		"credits" | "pixels" | "points"
+	>("credits");
+	const [currencyAmount, setCurrencyAmount] = useState("100");
+	const [badgeCode, setBadgeCode] = useState("");
+
+	function reportResult(
+		label: string,
+		ok: number,
+		total: number,
+		failures = 0,
+	) {
+		if (ok > 0)
+			toast.success(
+				`${label}: ${ok}/${total}${failures ? ` · ${failures} failed` : ""}`,
+			);
+		if (failures > 0 && ok === 0)
+			toast.error(`${label} failed for ${failures} users`);
+	}
+
+	async function handleBulkAction(action: string, ids: (number | string)[]) {
+		const numericIds = ids.map((i) => Number(i));
+
+		if (action === "unban") {
+			setBusy(true);
+			try {
+				const result = await bulkUnban({ userIds: numericIds });
+				if (result.ok) {
+					const data = result.data as { unbanned: number; total: number };
+					reportResult("Unbanned", data.unbanned, data.total);
+				} else toast.error(result.error);
+			} finally {
+				setBusy(false);
+			}
+			return;
+		}
+
+		if (action === "ban") {
+			setPending({ kind: "ban", ids: numericIds });
+			return;
+		}
+
+		if (action === "give-currency") {
+			setPending({ kind: "give-currency", ids: numericIds });
+			return;
+		}
+
+		if (action === "give-badge") {
+			setPending({ kind: "give-badge", ids: numericIds });
+			return;
+		}
+	}
+
+	async function confirmBan() {
+		if (pending?.kind !== "ban") return;
+		setBusy(true);
+		try {
+			const result = await bulkBan({
+				userIds: pending.ids,
+				reason: banReason,
+				duration: Number(banDuration),
+			});
+			if (result.ok) {
+				const data = result.data as { banned: number };
+				reportResult("Banned", data.banned, pending.ids.length);
+			} else toast.error(result.error);
+			setPending(null);
+		} finally {
+			setBusy(false);
+		}
+	}
+
+	async function confirmGiveCurrency() {
+		if (pending?.kind !== "give-currency") return;
+		setBusy(true);
+		try {
+			const result = await bulkAdjustCurrency({
+				userIds: pending.ids,
+				amount: Number(currencyAmount),
+				type: currencyType,
+			});
+			if (result.ok) {
+				const data = result.data as {
+					adjusted: number;
+					total: number;
+					failedIds: { userId: number; reason: string }[];
+				};
+				reportResult(
+					`Adjusted ${currencyAmount} ${currencyType}`,
+					data.adjusted,
+					data.total,
+					data.failedIds.length,
+				);
+			} else toast.error(result.error);
+			setPending(null);
+		} finally {
+			setBusy(false);
+		}
+	}
+
+	async function confirmGiveBadge() {
+		if (pending?.kind !== "give-badge") return;
+		setBusy(true);
+		try {
+			const result = await bulkGiveBadge({
+				userIds: pending.ids,
+				badgeCode: badgeCode.trim().toUpperCase(),
+			});
+			if (result.ok) {
+				const data = result.data as {
+					given: number;
+					total: number;
+					failedIds: { userId: number; reason: string }[];
+				};
+				reportResult(
+					`Given badge ${badgeCode}`,
+					data.given,
+					data.total,
+					data.failedIds.length,
+				);
+			} else toast.error(result.error);
+			setPending(null);
+		} finally {
+			setBusy(false);
+		}
+	}
+
 	const bulkActions: {
 		label: string;
 		value: string;
@@ -70,7 +349,7 @@ export function UsersTable({ data, canEdit, canBan }: UsersTableProps) {
 		<>
 			<DataTable
 				data={data}
-				columns={getUserColumns(canEdit, searchParams.toString())}
+				columns={getColumns(canEdit)}
 				searchPlaceholder="Search by username, email or IP..."
 				presets={[
 					{ label: "Online now", params: { filter_online: "1" } },
@@ -84,9 +363,9 @@ export function UsersTable({ data, canEdit, canBan }: UsersTableProps) {
 
 			<Dialog
 				open={pending?.kind === "ban"}
-				onOpenChange={(o) => !o && !busy && setPending(null)}
+				onOpenChange={(o) => !o && setPending(null)}
 			>
-				<DialogContent className="max-h-[90dvh] overflow-y-auto">
+				<DialogContent>
 					<DialogHeader>
 						<DialogTitle>
 							Ban {pending?.kind === "ban" ? pending.ids.length : 0} users
@@ -139,7 +418,7 @@ export function UsersTable({ data, canEdit, canBan }: UsersTableProps) {
 				open={pending?.kind === "give-currency"}
 				onOpenChange={(o) => !o && setPending(null)}
 			>
-				<DialogContent className="max-h-[90dvh] overflow-y-auto">
+				<DialogContent>
 					<DialogHeader>
 						<DialogTitle>
 							Adjust currency for{" "}
@@ -210,7 +489,7 @@ export function UsersTable({ data, canEdit, canBan }: UsersTableProps) {
 				open={pending?.kind === "give-badge"}
 				onOpenChange={(o) => !o && setPending(null)}
 			>
-				<DialogContent className="max-h-[90dvh] overflow-y-auto">
+				<DialogContent>
 					<DialogHeader>
 						<DialogTitle>
 							Give badge to{" "}