feat(F-055): completed feature

project/apps/admin/src/app/(dashboard)/products/page.tsx

@@ -159,7 +159,7 @@ export default function ProductsPage() {
                       <div className="flex items-center gap-3">
                         {p.imageUrl ? (
                           <img
-                            src={p.imageUrl}
+                            src={p.imageUrl.replace('/uploads/', '/uploads/40/')}
                             alt={p.name}
                             className="w-10 h-10 rounded-lg object-cover bg-gray-100 flex-shrink-0"
                           />

project/apps/admin/src/app/uploads/[filename]/route.ts

@@ -1,49 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { readFile } from 'fs/promises';
-import path from 'path';
-
-const MIME: Record<string, string> = {
-  '.jpg': 'image/jpeg',
-  '.jpeg': 'image/jpeg',
-  '.png': 'image/png',
-  '.webp': 'image/webp',
-  '.avif': 'image/avif',
-  '.gif': 'image/gif',
-};
-
-/**
- * Serves uploaded files dynamically from disk on every request.
- *
- * Next.js production mode caches the public/ directory listing at build/start
- * time, so files uploaded after startup return 404 when served as static
- * assets. This route handler reads the file fresh from disk each time,
- * making newly uploaded images immediately available without a restart.
- */
-export async function GET(
-  _request: NextRequest,
-  { params }: { params: Promise<{ filename: string }> },
-) {
-  const { filename } = await params;
-
-  // Prevent path traversal
-  const safe = path.basename(filename);
-  if (safe !== filename || filename.includes('..')) {
-    return NextResponse.json({ error: 'Invalid filename' }, { status: 400 });
-  }
-
-  const ext = path.extname(safe).toLowerCase();
-  const filePath = path.join(process.cwd(), 'public', 'uploads', safe);
-
-  try {
-    const buffer = await readFile(filePath);
-    return new NextResponse(buffer, {
-      headers: {
-        'Content-Type': MIME[ext] ?? 'application/octet-stream',
-        'Cache-Control': 'public, max-age=31536000, immutable',
-        'X-Content-Type-Options': 'nosniff',
-      },
-    });
-  } catch {
-    return NextResponse.json({ error: 'Not found' }, { status: 404 });
-  }
-}

project/apps/admin/src/features/products/components/sections/ImagesSection.tsx

@@ -173,8 +173,9 @@ export function ImagesSection({ productId }: ImagesSectionProps) {
         <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
           {images.map((img, idx) => (
             <div key={img.id} className="relative group">
+              {/* Use 200px thumbnail for editor preview to reduce bandwidth */}
               <img
-                src={img.url}
+                src={img.url.replace('/uploads/', '/uploads/200/')}
                 alt={img.altText ?? img.url}
                 className="w-full aspect-square object-cover rounded-xl bg-gray-100"
               />