feat: add thumbnail previews to admin panel for albums and hero images

- Add /api/admin/thumbnail/[id] proxy endpoint for serving Immich thumbnails
- Show album cover thumbnails in AlbumCard components (subpages + standalone)
- Show actual image thumbnails in AlbumPicker modal instead of emoji placeholders
- Show small thumbnail previews for hero image entries
- Add corresponding CSS styles for all thumbnail elements
This commit is contained in:
ralksta
2026-05-29 17:14:58 +02:00
parent 9b053e1648
commit 4a0b57b932
4 changed files with 125 additions and 2 deletions

View File

@@ -0,0 +1,62 @@
/**
* Admin-only thumbnail proxy — serves small thumbnails for the admin panel
* using raw Immich asset UUIDs (no token encoding needed since admin is authenticated).
*/
import { NextRequest, NextResponse } from 'next/server';
import { isAdminAuthenticated, isAdminEnabled } from '@/lib/admin/auth';
import { getConfig } from '@/lib/config';
export async function GET(
request: NextRequest,
{ params }: { params: Promise<{ id: string }> },
) {
if (!isAdminEnabled()) {
return NextResponse.json({ error: 'Admin not enabled' }, { status: 403 });
}
if (!(await isAdminAuthenticated())) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
const config = getConfig();
if (config.needsSetup) {
return NextResponse.json({ error: 'Not configured' }, { status: 503 });
}
const { id: assetId } = await params;
// Validate it looks like a UUID
const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
if (!uuidRegex.test(assetId)) {
return NextResponse.json({ error: 'Invalid asset ID' }, { status: 400 });
}
try {
const res = await fetch(
`${config.immich.apiUrl}/assets/${assetId}/thumbnail?size=thumbnail`,
{
headers: {
'x-api-key': config.immich.apiKey,
Accept: 'application/octet-stream',
},
},
);
if (!res.ok) {
return NextResponse.json({ error: 'Asset not found' }, { status: 404 });
}
const contentType = res.headers.get('content-type') || 'image/jpeg';
const body = res.body;
return new NextResponse(body, {
headers: {
'Content-Type': contentType,
'Cache-Control': 'private, max-age=3600',
},
});
} catch (err) {
console.error('[Admin Thumbnail] Failed to fetch:', err);
return NextResponse.json({ error: 'Failed to fetch thumbnail' }, { status: 502 });
}
}