yusufipek/OpenFrame
1
0
Fork 0
mirror of https://github.com/yusufipk/OpenFrame.git synced 2026-09-11 17:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement robust error/not-found pages & UI components

Browse Source 
- Introduce dedicated error pages for dashboard and video routes
- Add specific not-found pages for dashboard, projects, videos, and settings
- Implement global `not-found.tsx` for general unhandled routes
- Integrate root and dashboard layouts with ErrorBoundary and Suspense
- Add new UI components: Accordion, Hover Card, Menubar, Navigation Menu, Select, Tabs
- Update Navbar to utilize the new Navigation Menu component
- Enhance `button` component with a `link` variant for better styling
- Refine existing UI components (dialog, dropdown, input, etc.)
- Update Tailwind config with new colors and animation extensions
This commit is contained in:
Yusuf İpek
2026-02-07 15:53:31 +03:00
parent 48ddb03995
commit 373aab964c
30 changed files with 846 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/api/projects/[projectId]/videos/[videoId]/route.ts
+16 -27
View File
@@ -1,9 +1,10 @@
import { NextRequest, NextResponse } from 'next/server';
import { NextRequest } from 'next/server';
import { db } from '@/lib/db';
import { auth } from '@/lib/auth';
import { ProjectMemberRole } from '@prisma/client';
import { rateLimit } from '@/lib/rate-limit';
import { cleanupVideoVoiceFiles } from '@/lib/r2-cleanup';
import { apiErrors, successResponse } from '@/lib/api-response';
type RouteParams = { params: Promise<{ projectId: string; videoId: string }> };
@@ -44,7 +45,7 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
});
if (!video) {
return NextResponse.json({ error: 'Video not found' }, { status: 404 });
return apiErrors.notFound('Video');
}
// Check access
@@ -53,19 +54,16 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
const isPublic = video.project.visibility === 'PUBLIC';
if (!isOwner && !isMember && !isPublic) {
return NextResponse.json({ error: 'Access denied' }, { status: 403 });
return apiErrors.forbidden('Access denied');
}
return NextResponse.json({
return successResponse({
...video,
isAuthenticated: !!session?.user?.id,
});
} catch (error) {
console.error('Error fetching video:', error);
return NextResponse.json(
{ error: 'Failed to fetch video' },
{ status: 500 }
);
return apiErrors.internalError('Failed to fetch video');
}
}
@@ -79,7 +77,7 @@ export async function PATCH(request: NextRequest, { params }: RouteParams) {
const { projectId, videoId } = await params;
if (!session?.user?.id) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
return apiErrors.unauthorized();
}
const video = await db.video.findFirst({
@@ -90,7 +88,7 @@ export async function PATCH(request: NextRequest, { params }: RouteParams) {
});
if (!video) {
return NextResponse.json({ error: 'Video not found' }, { status: 404 });
return apiErrors.notFound('Video');
}
const isOwner = video.project.ownerId === session.user.id;
@@ -99,7 +97,7 @@ export async function PATCH(request: NextRequest, { params }: RouteParams) {
membership?.role === ProjectMemberRole.ADMIN;
if (!canEdit) {
return NextResponse.json({ error: 'Access denied' }, { status: 403 });
return apiErrors.forbidden('Access denied');
}
const body = await request.json();
@@ -119,13 +117,10 @@ export async function PATCH(request: NextRequest, { params }: RouteParams) {
},
});
return NextResponse.json(updatedVideo);
return successResponse(updatedVideo);
} catch (error) {
console.error('Error updating video:', error);
return NextResponse.json(
{ error: 'Failed to update video' },
{ status: 500 }
);
return apiErrors.internalError('Failed to update video');
}
}
@@ -139,7 +134,7 @@ export async function DELETE(request: NextRequest, { params }: RouteParams) {
const { projectId, videoId } = await params;
if (!session?.user?.id) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
return apiErrors.unauthorized();
}
const video = await db.video.findFirst({
@@ -150,7 +145,7 @@ export async function DELETE(request: NextRequest, { params }: RouteParams) {
});
if (!video) {
return NextResponse.json({ error: 'Video not found' }, { status: 404 });
return apiErrors.notFound('Video');
}
const isOwner = video.project.ownerId === session.user.id;
@@ -159,10 +154,7 @@ export async function DELETE(request: NextRequest, { params }: RouteParams) {
const canDelete = isOwner || membership?.role === ProjectMemberRole.ADMIN;
if (!canDelete) {
return NextResponse.json(
{ error: 'Only project owner or admin can delete videos' },
{ status: 403 }
);
return apiErrors.forbidden('Only project owner or admin can delete videos');
}
// Clean up voice files from R2 before cascade delete removes comment rows
@@ -170,12 +162,9 @@ export async function DELETE(request: NextRequest, { params }: RouteParams) {
await db.video.delete({ where: { id: videoId } });
return NextResponse.json({ success: true, message: 'Video deleted' });
return successResponse({ message: 'Video deleted' });
} catch (error) {
console.error('Error deleting video:', error);
return NextResponse.json(
{ error: 'Failed to delete video' },
{ status: 500 }
);
return apiErrors.internalError('Failed to delete video');
}
}
app/api/projects/[projectId]/videos/[videoId]/versions/route.ts
+14 -22
View File
@@ -1,9 +1,10 @@
import { NextRequest, NextResponse } from 'next/server';
import { NextRequest } from 'next/server';
import { db } from '@/lib/db';
import { auth } from '@/lib/auth';
import { ProjectMemberRole } from '@prisma/client';
import { validateUrl, validateOptionalUrl } from '@/lib/validation';
import { rateLimit } from '@/lib/rate-limit';
import { apiErrors, successResponse } from '@/lib/api-response';
type RouteParams = { params: Promise<{ projectId: string; videoId: string }> };
@@ -23,7 +24,7 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
});
if (!video) {
return NextResponse.json({ error: 'Video not found' }, { status: 404 });
return apiErrors.notFound('Video');
}
const isOwner = session?.user?.id === video.project.ownerId;
@@ -31,7 +32,7 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
const isPublic = video.project.visibility === 'PUBLIC';
if (!isOwner && !isMember && !isPublic) {
return NextResponse.json({ error: 'Access denied' }, { status: 403 });
return apiErrors.forbidden('Access denied');
}
const versions = await db.videoVersion.findMany({
@@ -42,13 +43,10 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
},
});
return NextResponse.json({ versions });
return successResponse({ versions });
} catch (error) {
console.error('Error fetching versions:', error);
return NextResponse.json(
{ error: 'Failed to fetch versions' },
{ status: 500 }
);
return apiErrors.internalError('Failed to fetch versions');
}
}
@@ -62,7 +60,7 @@ export async function POST(request: NextRequest, { params }: RouteParams) {
const { projectId, videoId } = await params;
if (!session?.user?.id) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
return apiErrors.unauthorized();
}
const video = await db.video.findFirst({
@@ -74,7 +72,7 @@ export async function POST(request: NextRequest, { params }: RouteParams) {
});
if (!video) {
return NextResponse.json({ error: 'Video not found' }, { status: 404 });
return apiErrors.notFound('Video');
}
const isOwner = video.project.ownerId === session.user.id;
@@ -83,28 +81,25 @@ export async function POST(request: NextRequest, { params }: RouteParams) {
membership?.role === ProjectMemberRole.ADMIN;
if (!canEdit) {
return NextResponse.json({ error: 'Access denied' }, { status: 403 });
return apiErrors.forbidden('Access denied');
}
const body = await request.json();
const { videoUrl, providerId, providerVideoId, versionLabel, thumbnailUrl, duration, setActive } = body;
if (!videoUrl) {
return NextResponse.json(
{ error: 'Video URL is required' },
{ status: 400 }
);
return apiErrors.badRequest('Video URL is required');
}
// Validate URLs use safe schemes (http/https only)
const videoUrlError = validateUrl(videoUrl, 'Video URL');
if (videoUrlError) {
return NextResponse.json({ error: videoUrlError }, { status: 400 });
return apiErrors.badRequest(videoUrlError);
}
const thumbnailUrlError = validateOptionalUrl(thumbnailUrl, 'Thumbnail URL');
if (thumbnailUrlError) {
return NextResponse.json({ error: thumbnailUrlError }, { status: 400 });
return apiErrors.badRequest(thumbnailUrlError);
}
const nextVersionNumber = (video.versions[0]?.versionNumber || 0) + 1;
@@ -138,12 +133,9 @@ export async function POST(request: NextRequest, { params }: RouteParams) {
});
});
return NextResponse.json(version, { status: 201 });
return successResponse(version, 201);
} catch (error) {
console.error('Error creating version:', error);
return NextResponse.json(
{ error: 'Failed to create version' },
{ status: 500 }
);
return apiErrors.internalError('Failed to create version');
}
}