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/components/admin/import-error-banner.tsx

@@ -1,5 +1,6 @@
 import { AlertCircle } from "lucide-react";
 
+/** Shared destructive banner for the import/admin clients. */
 export function ImportErrorBanner({ error }: { error: string }) {
 	return (
 		<div

src/components/admin/media-grid.tsx

@@ -5,20 +5,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { deleteMedia, uploadMedia } from "@/actions/admin-media";
 import { useConfirmDialog } from "@/components/admin/confirm-dialog";
 import { formatDate } from "@/lib/format-date";
-
-type MediaFile = {
-	name: string;
-	url: string;
-	size: number;
-	uploaded: number;
-};
-
-function validImageUrl(url: string): string {
-	if (!url.startsWith("/")) return "";
-	if (/[<>"']/.test(url)) return "";
-	if (/(data|javascript|vbscript|file):/i.test(url)) return "";
-	return url;
-}
+import type { MediaFile } from "@/lib/media-files";
+import { loadMediaFiles, validImageUrl } from "@/lib/media-files";
 
 function formatSize(bytes: number): string {
 	if (bytes < 1024) return `${bytes} B`;
@@ -47,13 +35,7 @@ export function AdminMediaGrid() {
 
 	const load = useCallback(async () => {
 		setLoading(true);
-		try {
-			const res = await fetch("/api/media");
-			const data = await res.json();
-			setFiles(data.files ?? []);
-		} catch {
-			/* ignore */
-		}
+		setFiles(await loadMediaFiles());
 		setLoading(false);
 	}, []);
 

src/components/admin/search-input.tsx

@@ -0,0 +1,39 @@
+import { Search, X } from "lucide-react";
+import { Input } from "@/components/ui/input";
+
+type SearchInputProps = {
+	value: string;
+	onChange: (value: string) => void;
+	placeholder?: string;
+	onClear?: () => void;
+};
+
+/** Admin search field with a leading search icon and optional clear button. */
+export function SearchInput({
+	value,
+	onChange,
+	placeholder,
+	onClear,
+}: SearchInputProps) {
+	return (
+		<div className="relative">
+			<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+			<Input
+				placeholder={placeholder}
+				value={value}
+				onChange={(e) => onChange(e.target.value)}
+				className="pl-9 h-9"
+			/>
+			{value && onClear && (
+				<button
+					type="button"
+					onClick={onClear}
+					className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+					aria-label="Clear search"
+				>
+					<X className="h-4 w-4" />
+				</button>
+			)}
+		</div>
+	);
+}

src/components/ui/loading-spinner.tsx

@@ -0,0 +1,25 @@
+type LoadingSpinnerProps = {
+	className?: string;
+	accentVar?: string;
+};
+
+/** Centered pulsing spinner used across site and admin loading.tsx placeholders. */
+export function LoadingSpinner({
+	className,
+	accentVar = "var(--color-primary)",
+}: LoadingSpinnerProps) {
+	return (
+		<div
+			style={{ display: "flex", justifyContent: "center", padding: "4rem 0" }}
+			className={className}
+		>
+			<div
+				className="animate-spin w-8 h-8 border-4 rounded-full"
+				style={{
+					borderColor: accentVar,
+					borderTopColor: "transparent",
+				}}
+			/>
+		</div>
+	);
+}