Improve media manager UI: search, delete, drag-and-drop, file meta

Add a richer media manager with filename search, per-file delete with
confirmation, drag-and-drop uploads, copy-URL feedback, file size/type/date
metadata, and server-side upload validation that returns errors to the UI.
Extend the /api/media listing with size and uploaded timestamps.

src/app/api/media/route.ts

@@ -1,5 +1,5 @@
-import { existsSync, readdirSync } from "node:fs";
-import path from "node:path";
+import { existsSync, readdirSync, statSync } from "node:fs";
+import { resolve } from "node:path";
 import { NextResponse } from "next/server";
 import { MEDIA_ROOT } from "@/lib/media-storage";
 
@@ -14,11 +14,16 @@ export async function GET() {
 	// eslint-disable-next-line security/detect-non-literal-fs-filename
 	const files = readdirSync(dir)
 		.filter((f) => /\.(png|jpg|jpeg|gif|webp|svg|bmp)$/i.test(f))
-		.map((f) => ({
-			name: f,
-			url: `/api/media/${f}`,
-		}))
-		.sort((a, b) => a.name.localeCompare(b.name));
+		.map((f) => {
+			const stat = statSync(resolve(dir, f));
+			return {
+				name: f,
+				url: `/api/media/${f}`,
+				size: stat.size,
+				uploaded: stat.mtimeMs,
+			};
+		})
+		.sort((a, b) => b.uploaded - a.uploaded);
 
 	return NextResponse.json({ files });
 }