Files
vibn-frontend/app/api/projects/[projectId]/design-surfaces/route.ts
Mark Henderson 62731af91f feat: design surfaces page with two-phase theme picker
Phase 1: user picks which surfaces their product needs (Web App,
Marketing Site, Admin, Mobile, Email, Docs). Phase 2: per-surface
horizontal card gallery with mini visual previews of each UI library.
Lock in confirms the choice; locked themes are saved to DB and shown
to the AI coder. Surfaces and themes stored in fs_projects.data.

Made-with: Cursor
2026-03-01 21:14:20 -08:00

85 lines
2.9 KiB
TypeScript

import { NextResponse } from 'next/server';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/lib/auth/authOptions';
import { query } from '@/lib/db-postgres';
async function getProject(projectId: string, email: string) {
const rows = await query<{ data: Record<string, unknown> }>(
`SELECT p.data FROM fs_projects p
JOIN fs_users u ON u.id = p.user_id
WHERE p.id = $1 AND u.data->>'email' = $2 LIMIT 1`,
[projectId, email]
);
return rows[0] ?? null;
}
/**
* GET — returns surfaces[] and surfaceThemes{} for the project.
* surfaces: string[] — which design surfaces are active (set by Atlas or manually)
* surfaceThemes: Record<surfaceId, themeId> — locked-in theme per surface
*/
export async function GET(
_req: Request,
{ params }: { params: Promise<{ projectId: string }> }
) {
const { projectId } = await params;
const session = await getServerSession(authOptions);
if (!session?.user?.email) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
const row = await getProject(projectId, session.user.email);
if (!row) return NextResponse.json({ error: 'Project not found' }, { status: 404 });
const data = row.data ?? {};
return NextResponse.json({
surfaces: (data.surfaces ?? []) as string[],
surfaceThemes: (data.surfaceThemes ?? {}) as Record<string, string>,
});
}
/**
* PATCH — two operations:
* { surfaces: string[] } — save the active surface list
* { surface: string, theme: string } — lock in a theme for one surface
*/
export async function PATCH(
req: Request,
{ params }: { params: Promise<{ projectId: string }> }
) {
const { projectId } = await params;
const session = await getServerSession(authOptions);
if (!session?.user?.email) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
const body = await req.json() as
| { surfaces: string[] }
| { surface: string; theme: string };
if ('surfaces' in body) {
// Save the surface list
await query(
`UPDATE fs_projects p
SET data = data || jsonb_build_object('surfaces', $3::jsonb),
updated_at = NOW()
FROM fs_users u
WHERE p.id = $1 AND p.user_id = u.id AND u.data->>'email' = $2`,
[projectId, session.user.email, JSON.stringify(body.surfaces)]
);
} else if ('surface' in body && 'theme' in body) {
// Lock in a theme for one surface
await query(
`UPDATE fs_projects p
SET data = data || jsonb_build_object(
'surfaceThemes',
COALESCE(data->'surfaceThemes', '{}'::jsonb) || jsonb_build_object($3, $4)
),
updated_at = NOW()
FROM fs_users u
WHERE p.id = $1 AND p.user_id = u.id AND u.data->>'email' = $2`,
[projectId, session.user.email, body.surface, body.theme]
);
} else {
return NextResponse.json({ error: 'Invalid body' }, { status: 400 });
}
return NextResponse.json({ success: true });
}