diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..67f6b0d --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +.next/ +node_modules/ +prisma/migrations/ +bun.lock diff --git a/.prettierrc b/.prettierrc index 075c59e..95c5299 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,6 +1,6 @@ { "semi": true, - "singleQuote": false, + "singleQuote": true, "tabWidth": 2, "useTabs": false, "trailingComma": "es5", diff --git a/AGENTS.md b/AGENTS.md index f53fc1c..f10d06c 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,15 +1,18 @@ # AGENTS.md ## Must-follow constraints + - Use `bun` only. Do not use `npm` or `pnpm`. - Do not start the dev server (`bun run dev`); assume it is already running. - If you change `prisma/schema.prisma`, run `bun run db:generate`. - In App Router dynamic routes, keep `params` typed as `Promise<...>` and `await params` in handlers/pages. ## Validation before finishing + - Run `bun run check`. ## Repo-specific conventions + - Use `auth()` from `@/lib/auth` for server-side session reads. - Use `checkProjectAccess()` / `checkWorkspaceAccess()` for authorization instead of ad-hoc role checks. - For API responses, use `successResponse` / `apiErrors` from `@/lib/api-response`. @@ -17,10 +20,12 @@ - In Prisma raw SQL, use `$executeRaw` for statements that return no rows (e.g. `pg_advisory_xact_lock`). Using `$queryRaw` on void-returning functions causes a Prisma deserialization error (`Failed to deserialize column of type 'void'`). ## Important locations + - Custom SQL managed by Prisma migrations: `prisma/migrations/*/migration.sql`. - Shared API response helpers: `lib/api-response.ts`. - Auth + access-control helpers: `lib/auth.ts`. ## Change safety rules + - Prefer backward-compatible API changes unless explicitly asked to break contracts. - For multi-step DB writes, use Prisma transactions. diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx index 4d74432..4bbe51a 100644 --- a/app/(auth)/layout.tsx +++ b/app/(auth)/layout.tsx @@ -1,11 +1,7 @@ import { redirect } from 'next/navigation'; import { auth } from '@/lib/auth'; -export default async function AuthLayout({ - children, -}: { - children: React.ReactNode; -}) { +export default async function AuthLayout({ children }: { children: React.ReactNode }) { const session = await auth(); // If already logged in, redirect to dashboard diff --git a/app/(auth)/login/login-form.tsx b/app/(auth)/login/login-form.tsx index b3fbddf..2237429 100644 --- a/app/(auth)/login/login-form.tsx +++ b/app/(auth)/login/login-form.tsx @@ -27,7 +27,8 @@ const ERROR_MESSAGES: Record = { // Generic message — avoid confirming whether a credentials account exists for this email OAuthAccountNotLinked: 'Sign-in failed. Please try a different method or contact support.', OAuthCallbackError: 'OAuth sign-in failed. Please try again.', - OAuthEmailNotVerified: 'Your OAuth account email is not verified. Please verify it with your provider and try again.', + OAuthEmailNotVerified: + 'Your OAuth account email is not verified. Please verify it with your provider and try again.', InvalidVerificationToken: 'The verification link is invalid or has expired.', VerificationFailed: 'Email verification failed. Please try again.', Default: 'Something went wrong. Please try again.', @@ -109,7 +110,8 @@ function LoginFormInner({ googleEnabled, githubEnabled }: LoginFormInnerProps) { {showSuccess && (
- Account created successfully! Please check your email to verify your address before signing in. + Account created successfully! Please check your email to verify your address before + signing in.
)} @@ -172,7 +174,12 @@ function LoginFormInner({ googleEnabled, githubEnabled }: LoginFormInnerProps) { {oauthLoading === 'github' ? ( ) : ( -
@@ -26,12 +22,15 @@ export default function LoginPage() {

By continuing, you agree to our{' '} - Terms of Service - {' '}and{' '} - Privacy Policy + + Terms of Service + {' '} + and{' '} + + Privacy Policy +

); } - diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx index 0351415..6e310c0 100644 --- a/app/(auth)/register/page.tsx +++ b/app/(auth)/register/page.tsx @@ -2,12 +2,8 @@ import { isInviteCodeRequired } from '@/lib/feature-flags'; import RegisterPageClient from './register-page-client'; export default function RegisterPage() { - const googleEnabled = Boolean( - process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET, - ); - const githubEnabled = Boolean( - process.env.GITHUB_CLIENT_ID && process.env.GITHUB_CLIENT_SECRET, - ); + const googleEnabled = Boolean(process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET); + const githubEnabled = Boolean(process.env.GITHUB_CLIENT_ID && process.env.GITHUB_CLIENT_SECRET); return ( searchParams.get('invitationToken') || '', [searchParams]); @@ -122,9 +126,7 @@ export default function RegisterPageClient({ requireInviteCode, googleEnabled, g Create Account - - Join OpenFrame to collaborate on video projects - + Join OpenFrame to collaborate on video projects {/* OAuth Buttons */} @@ -142,10 +144,22 @@ export default function RegisterPageClient({ requireInviteCode, googleEnabled, g ) : ( )} Continue with Google @@ -162,7 +176,12 @@ export default function RegisterPageClient({ requireInviteCode, googleEnabled, g {oauthLoading === 'github' ? ( ) : ( -

By continuing, you agree to our{' '} - Terms of Service - {' '}and{' '} - Privacy Policy + + Terms of Service + {' '} + and{' '} + + Privacy Policy +

diff --git a/app/(auth)/verify-email/page.tsx b/app/(auth)/verify-email/page.tsx index b9b8640..0cd6cde 100644 --- a/app/(auth)/verify-email/page.tsx +++ b/app/(auth)/verify-email/page.tsx @@ -55,8 +55,8 @@ function VerifyEmailContent() { We sent a verification link to{' '} - {emailParam ? {emailParam} : 'your email address'}. - Click the link to activate your account. + {emailParam ? {emailParam} : 'your email address'}. Click the link to + activate your account. @@ -75,7 +75,9 @@ function VerifyEmailContent() {
- Didn't receive it? + + Didn't receive it? +
diff --git a/app/(dashboard)/dashboard/loading.tsx b/app/(dashboard)/dashboard/loading.tsx index c395cae..fff3ecf 100644 --- a/app/(dashboard)/dashboard/loading.tsx +++ b/app/(dashboard)/dashboard/loading.tsx @@ -1,5 +1,5 @@ -import { Skeleton } from "@/components/ui/skeleton" -import { Card, CardHeader, CardContent } from "@/components/ui/card" +import { Skeleton } from '@/components/ui/skeleton'; +import { Card, CardHeader, CardContent } from '@/components/ui/card'; function ProjectCardSkeleton() { return ( @@ -24,7 +24,7 @@ function ProjectCardSkeleton() { - ) + ); } export default function DashboardLoading() { @@ -44,5 +44,5 @@ export default function DashboardLoading() { ))} - ) + ); } diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx index bc2768e..60b5a17 100644 --- a/app/(dashboard)/dashboard/page.tsx +++ b/app/(dashboard)/dashboard/page.tsx @@ -2,162 +2,162 @@ import { auth } from '@/lib/auth'; import { redirect } from 'next/navigation'; import { db } from '@/lib/db'; import { Prisma } from '@prisma/client'; -import { hasCollaboratorBillingBackedAccess, requireBillingAccessOrRedirect } from '@/lib/route-access'; +import { + hasCollaboratorBillingBackedAccess, + requireBillingAccessOrRedirect, +} from '@/lib/route-access'; import { DashboardClient } from './dashboard-client'; import { buildBillingAccessWhereInput } from '@/lib/billing'; import { isBunnyUploadsEnabled } from '@/lib/feature-flags'; export default async function DashboardPage({ - searchParams, + searchParams, }: { - searchParams: Promise<{ ws?: string; sort?: string; page?: string }> + searchParams: Promise<{ ws?: string; sort?: string; page?: string }>; }) { - const session = await auth(); - if (!session?.user?.id) { - redirect('/login'); - } + const session = await auth(); + if (!session?.user?.id) { + redirect('/login'); + } - const hasCollaboratorAccess = await hasCollaboratorBillingBackedAccess(session.user.id); - if (!hasCollaboratorAccess) { - await requireBillingAccessOrRedirect({ userId: session.user.id }); - } + const hasCollaboratorAccess = await hasCollaboratorBillingBackedAccess(session.user.id); + if (!hasCollaboratorAccess) { + await requireBillingAccessOrRedirect({ userId: session.user.id }); + } - const userOnboarding = await db.user.findUnique({ - where: { id: session.user.id }, - select: { onboardingCompletedAt: true }, - }); - if (!userOnboarding?.onboardingCompletedAt) { - redirect('/onboarding'); - } + const userOnboarding = await db.user.findUnique({ + where: { id: session.user.id }, + select: { onboardingCompletedAt: true }, + }); + if (!userOnboarding?.onboardingCompletedAt) { + redirect('/onboarding'); + } - const resolvedSearchParams = await searchParams; - const { ws, sort, page: pageParam } = resolvedSearchParams || {}; + const resolvedSearchParams = await searchParams; + const { ws, sort, page: pageParam } = resolvedSearchParams || {}; - const page = Number(pageParam) || 1; - const pageSize = 20; - const skip = (page - 1) * pageSize; - const orderByDirection = sort === 'asc' ? 'asc' : 'desc'; + const page = Number(pageParam) || 1; + const pageSize = 20; + const skip = (page - 1) * pageSize; + const orderByDirection = sort === 'asc' ? 'asc' : 'desc'; - // Base permission where clause - const baseWhere: Prisma.ProjectWhereInput = { - OR: [ - { ownerId: session.user.id }, - { members: { some: { userId: session.user.id } } }, - { - workspace: { - owner: buildBillingAccessWhereInput(), - OR: [ - { ownerId: session.user.id }, - { members: { some: { userId: session.user.id } } }, - ], - }, - }, - ], + // Base permission where clause + const baseWhere: Prisma.ProjectWhereInput = { + OR: [ + { ownerId: session.user.id }, + { members: { some: { userId: session.user.id } } }, + { workspace: { - owner: buildBillingAccessWhereInput(), + owner: buildBillingAccessWhereInput(), + OR: [{ ownerId: session.user.id }, { members: { some: { userId: session.user.id } } }], }, - }; + }, + ], + workspace: { + owner: buildBillingAccessWhereInput(), + }, + }; - // Build unique workspace list for filter (Needs an unbounded list of accessible workspaces) - const accessibleProjects = await db.project.findMany({ - where: baseWhere, - select: { + // Build unique workspace list for filter (Needs an unbounded list of accessible workspaces) + const accessibleProjects = await db.project.findMany({ + where: baseWhere, + select: { + workspace: { + select: { id: true, name: true }, + }, + }, + distinct: ['workspaceId'], + }); + + const [creatableWorkspaces, editableProject] = await Promise.all([ + db.workspace.count({ + where: { + OR: [ + { ownerId: session.user.id }, + { members: { some: { userId: session.user.id, role: 'ADMIN' } } }, + ], + }, + }), + db.project.findFirst({ + where: { + OR: [ + { ownerId: session.user.id }, + { members: { some: { userId: session.user.id, role: 'ADMIN' } } }, + { workspace: { - select: { id: true, name: true } - } - }, - distinct: ['workspaceId'] - }); - - const [creatableWorkspaces, editableProject] = await Promise.all([ - db.workspace.count({ - where: { - OR: [ - { ownerId: session.user.id }, - { members: { some: { userId: session.user.id, role: 'ADMIN' } } }, - ], + OR: [ + { ownerId: session.user.id }, + { members: { some: { userId: session.user.id, role: 'ADMIN' } } }, + ], }, - }), - db.project.findFirst({ - where: { - OR: [ - { ownerId: session.user.id }, - { members: { some: { userId: session.user.id, role: 'ADMIN' } } }, - { - workspace: { - OR: [ - { ownerId: session.user.id }, - { members: { some: { userId: session.user.id, role: 'ADMIN' } } }, - ], - }, - }, - ], - }, - select: { id: true }, - }), - ]); - const canCreateProjects = creatableWorkspaces > 0; - const canUploadVideos = Boolean(editableProject); + }, + ], + }, + select: { id: true }, + }), + ]); + const canCreateProjects = creatableWorkspaces > 0; + const canUploadVideos = Boolean(editableProject); - const workspaceMap = new Map(); - for (const project of accessibleProjects) { - if (project.workspace) { - workspaceMap.set(project.workspace.id, project.workspace.name); - } + const workspaceMap = new Map(); + for (const project of accessibleProjects) { + if (project.workspace) { + workspaceMap.set(project.workspace.id, project.workspace.name); } - const workspaces = Array.from(workspaceMap, ([id, name]) => ({ id, name })); + } + const workspaces = Array.from(workspaceMap, ([id, name]) => ({ id, name })); - // Final query constraints - const queryWhere: Prisma.ProjectWhereInput = { - ...baseWhere, - ...(ws && ws !== 'all' ? { workspaceId: ws } : {}) - }; + // Final query constraints + const queryWhere: Prisma.ProjectWhereInput = { + ...baseWhere, + ...(ws && ws !== 'all' ? { workspaceId: ws } : {}), + }; - const [projects, totalProjects] = await Promise.all([ - db.project.findMany({ - skip, - take: pageSize, - where: queryWhere, - include: { - workspace: { - select: { id: true, name: true }, - }, - _count: { - select: { - videos: true, - members: true, - }, - }, - }, - orderBy: { updatedAt: orderByDirection }, - }), - db.project.count({ - where: queryWhere - }) - ]); + const [projects, totalProjects] = await Promise.all([ + db.project.findMany({ + skip, + take: pageSize, + where: queryWhere, + include: { + workspace: { + select: { id: true, name: true }, + }, + _count: { + select: { + videos: true, + members: true, + }, + }, + }, + orderBy: { updatedAt: orderByDirection }, + }), + db.project.count({ + where: queryWhere, + }), + ]); - const totalPages = Math.ceil(totalProjects / pageSize); + const totalPages = Math.ceil(totalProjects / pageSize); - const serializedProjects = projects.map((p) => ({ - id: p.id, - name: p.name, - description: p.description, - visibility: p.visibility, - updatedAt: p.updatedAt.toISOString(), - workspaceId: p.workspace?.id ?? null, - workspaceName: p.workspace?.name ?? null, - memberCount: p._count.members + 1, - videoCount: p._count.videos, - })); + const serializedProjects = projects.map((p) => ({ + id: p.id, + name: p.name, + description: p.description, + visibility: p.visibility, + updatedAt: p.updatedAt.toISOString(), + workspaceId: p.workspace?.id ?? null, + workspaceName: p.workspace?.name ?? null, + memberCount: p._count.members + 1, + videoCount: p._count.videos, + })); - return ( - - ); + return ( + + ); } diff --git a/app/(dashboard)/dashboard/project-filter.tsx b/app/(dashboard)/dashboard/project-filter.tsx index c9c5cb6..ebe3165 100644 --- a/app/(dashboard)/dashboard/project-filter.tsx +++ b/app/(dashboard)/dashboard/project-filter.tsx @@ -3,7 +3,18 @@ import { useCallback } from 'react'; import { useRouter, usePathname, useSearchParams } from 'next/navigation'; import Link from 'next/link'; -import { Plus, FolderOpen, Clock, Users, Globe, Lock, UserPlus, Building2, ArrowUp, ArrowDown } from 'lucide-react'; +import { + Plus, + FolderOpen, + Clock, + Users, + Globe, + Lock, + UserPlus, + Building2, + ArrowUp, + ArrowDown, +} from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; @@ -62,13 +73,18 @@ function VisibilityIcon({ visibility }: { visibility: string }) { type SortOrder = 'desc' | 'asc'; -export function ProjectFilter({ projects, workspaces, totalPages, canCreateProjects }: ProjectFilterProps) { +export function ProjectFilter({ + projects, + workspaces, + totalPages, + canCreateProjects, +}: ProjectFilterProps) { const router = useRouter(); const pathname = usePathname(); const searchParams = useSearchParams(); const selectedWorkspace = searchParams.get('ws') || 'all'; - const sortOrder = searchParams.get('sort') as SortOrder || 'desc'; + const sortOrder = (searchParams.get('sort') as SortOrder) || 'desc'; const page = Number(searchParams.get('page')) || 1; const createQueryString = useCallback( diff --git a/app/(dashboard)/error.tsx b/app/(dashboard)/error.tsx index db3b0ce..39c3624 100644 --- a/app/(dashboard)/error.tsx +++ b/app/(dashboard)/error.tsx @@ -1,8 +1,8 @@ -"use client"; +'use client'; -import { useEffect } from "react"; -import { Button } from "@/components/ui/button"; -import { AlertTriangle } from "lucide-react"; +import { useEffect } from 'react'; +import { Button } from '@/components/ui/button'; +import { AlertTriangle } from 'lucide-react'; export default function DashboardError({ error, @@ -12,7 +12,7 @@ export default function DashboardError({ reset: () => void; }) { useEffect(() => { - console.error("Dashboard error:", error); + console.error('Dashboard error:', error); }, [error]); return ( @@ -23,17 +23,13 @@ export default function DashboardError({

Something went wrong loading the dashboard. Your projects and videos are safe.

- {error.digest && ( -

- Error ID: {error.digest} -

- )} + {error.digest &&

Error ID: {error.digest}

}
-
diff --git a/app/(dashboard)/feedback/feedback-page-client.tsx b/app/(dashboard)/feedback/feedback-page-client.tsx index bcae3d8..1e1281a 100644 --- a/app/(dashboard)/feedback/feedback-page-client.tsx +++ b/app/(dashboard)/feedback/feedback-page-client.tsx @@ -10,7 +10,13 @@ import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Textarea } from '@/components/ui/textarea'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; type FeedbackCategory = 'BUG' | 'FEATURE' | 'OTHER'; type TabValue = 'feedback' | 'review'; @@ -70,7 +76,10 @@ export default function FeedbackPage() { for (const file of allowedFiles) { const isImage = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'].includes(file.type); if (!isImage) { - setStatus({ type: 'error', message: 'Unsupported screenshot format. Use JPG, PNG, WEBP, or GIF.' }); + setStatus({ + type: 'error', + message: 'Unsupported screenshot format. Use JPG, PNG, WEBP, or GIF.', + }); continue; } if (file.size > 10 * 1024 * 1024) { @@ -92,7 +101,9 @@ export default function FeedbackPage() { const targetUrl = feedbackScreenshotPreviewUrls[index]; if (targetUrl) URL.revokeObjectURL(targetUrl); setFeedbackScreenshotFiles((prev) => prev.filter((_, currentIndex) => currentIndex !== index)); - setFeedbackScreenshotPreviewUrls((prev) => prev.filter((_, currentIndex) => currentIndex !== index)); + setFeedbackScreenshotPreviewUrls((prev) => + prev.filter((_, currentIndex) => currentIndex !== index) + ); }; const clearFeedbackScreenshots = () => { @@ -169,7 +180,10 @@ export default function FeedbackPage() { setReviewMessage(''); setReviewRating('5'); setAllowShowcase(false); - setStatus({ type: 'success', message: 'Review submitted. Thank you for sharing your experience.' }); + setStatus({ + type: 'success', + message: 'Review submitted. Thank you for sharing your experience.', + }); } catch { setStatus({ type: 'error', message: 'Failed to submit review' }); } finally { @@ -180,7 +194,10 @@ export default function FeedbackPage() { return (
- + Back to Dashboard @@ -189,7 +206,8 @@ export default function FeedbackPage() { Feedback & Review - Send product feedback, report bugs, or share a review we can feature on the landing page. + Send product feedback, report bugs, or share a review we can feature on the landing + page. @@ -205,7 +223,11 @@ export default function FeedbackPage() {
)} - setActiveTab(value as TabValue)} className="w-full"> + setActiveTab(value as TabValue)} + className="w-full" + > @@ -308,7 +330,11 @@ export default function FeedbackPage() {
@@ -332,7 +358,11 @@ export default function FeedbackPage() {
- @@ -369,11 +399,17 @@ export default function FeedbackPage() { onChange={(event) => setAllowShowcase(event.target.checked)} disabled={isSubmittingReview} /> - I allow OpenFrame to potentially showcase this review on the landing page. + + I allow OpenFrame to potentially showcase this review on the landing page. + diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx index fcf000c..b186a81 100644 --- a/app/(dashboard)/layout.tsx +++ b/app/(dashboard)/layout.tsx @@ -2,11 +2,7 @@ import { Header } from '@/components/layout'; import { auth } from '@/lib/auth'; import { hasAppNavigationAccess } from '@/lib/route-access'; -export default async function DashboardLayout({ - children, -}: { - children: React.ReactNode; -}) { +export default async function DashboardLayout({ children }: { children: React.ReactNode }) { const session = await auth(); const showAppNavigation = session?.user?.id ? await hasAppNavigationAccess(session.user.id) diff --git a/app/(dashboard)/not-found.tsx b/app/(dashboard)/not-found.tsx index dcee26c..1427824 100644 --- a/app/(dashboard)/not-found.tsx +++ b/app/(dashboard)/not-found.tsx @@ -1,6 +1,6 @@ -import Link from "next/link"; -import { Button } from "@/components/ui/button"; -import { FileQuestion } from "lucide-react"; +import Link from 'next/link'; +import { Button } from '@/components/ui/button'; +import { FileQuestion } from 'lucide-react'; export default function DashboardNotFound() { return ( diff --git a/app/(dashboard)/projects/[projectId]/loading.tsx b/app/(dashboard)/projects/[projectId]/loading.tsx index 1313c16..6f2e682 100644 --- a/app/(dashboard)/projects/[projectId]/loading.tsx +++ b/app/(dashboard)/projects/[projectId]/loading.tsx @@ -1,5 +1,5 @@ -import { Skeleton } from "@/components/ui/skeleton" -import { Card, CardContent } from "@/components/ui/card" +import { Skeleton } from '@/components/ui/skeleton'; +import { Card, CardContent } from '@/components/ui/card'; function VideoCardSkeleton() { return ( @@ -14,7 +14,7 @@ function VideoCardSkeleton() {
- ) + ); } export default function ProjectLoading() { @@ -49,5 +49,5 @@ export default function ProjectLoading() { ))} - ) + ); } diff --git a/app/(dashboard)/projects/[projectId]/not-found.tsx b/app/(dashboard)/projects/[projectId]/not-found.tsx index f04dbb8..afc3de6 100644 --- a/app/(dashboard)/projects/[projectId]/not-found.tsx +++ b/app/(dashboard)/projects/[projectId]/not-found.tsx @@ -1,6 +1,6 @@ -import Link from "next/link"; -import { Button } from "@/components/ui/button"; -import { FolderX } from "lucide-react"; +import Link from 'next/link'; +import { Button } from '@/components/ui/button'; +import { FolderX } from 'lucide-react'; export default function ProjectNotFound() { return ( @@ -9,7 +9,8 @@ export default function ProjectNotFound() {

Project Not Found

- The project you're looking for doesn't exist or you don't have access to it. + The project you're looking for doesn't exist or you don't have access to + it.

diff --git a/app/(dashboard)/projects/[projectId]/page.tsx b/app/(dashboard)/projects/[projectId]/page.tsx index f359c55..087634d 100644 --- a/app/(dashboard)/projects/[projectId]/page.tsx +++ b/app/(dashboard)/projects/[projectId]/page.tsx @@ -1,8 +1,6 @@ import Link from 'next/link'; import { notFound, redirect } from 'next/navigation'; -import { - ArrowLeft, -} from 'lucide-react'; +import { ArrowLeft } from 'lucide-react'; import { GuestGate } from '@/components/guest-gate'; import { auth, checkProjectAccess } from '@/lib/auth'; import { db } from '@/lib/db'; @@ -120,8 +118,8 @@ export default async function ProjectPage({ params, searchParams }: ProjectPageP }, }), db.video.count({ - where: { projectId: project.id } - }) + where: { projectId: project.id }, + }), ]); const totalPages = Math.ceil(totalVideos / pageSize); @@ -132,7 +130,8 @@ export default async function ProjectPage({ params, searchParams }: ProjectPageP return { id: video.id, title: video.title, - thumbnailUrl: activeVersion?.thumbnailUrl || 'https://via.placeholder.com/320x180?text=No+Thumbnail', + thumbnailUrl: + activeVersion?.thumbnailUrl || 'https://via.placeholder.com/320x180?text=No+Thumbnail', currentVersion: video._count.versions, commentCount: activeVersion?._count.comments || 0, duration: formatDuration(activeVersion?.duration), @@ -141,7 +140,12 @@ export default async function ProjectPage({ params, searchParams }: ProjectPageP }; }); - const canEdit = access.canEdit && (isOwner || project.members[0]?.role === 'ADMIN' || workspaceRole === 'OWNER' || workspaceRole === 'ADMIN'); + const canEdit = + access.canEdit && + (isOwner || + project.members[0]?.role === 'ADMIN' || + workspaceRole === 'OWNER' || + workspaceRole === 'ADMIN'); const isAuthenticated = !!session?.user?.id; const projectData = { diff --git a/app/(dashboard)/projects/[projectId]/project-content-client.tsx b/app/(dashboard)/projects/[projectId]/project-content-client.tsx index ef56c0d..c02edb8 100644 --- a/app/(dashboard)/projects/[projectId]/project-content-client.tsx +++ b/app/(dashboard)/projects/[projectId]/project-content-client.tsx @@ -57,7 +57,7 @@ export function ProjectContentClient({ canEdit, isOwner, totalPages, - currentPage + currentPage, }: ProjectContentClientProps) { const router = useRouter(); const searchParams = useSearchParams(); @@ -115,7 +115,10 @@ export function ProjectContentClient({
{project.workspace && ( - + {project.workspace.name} @@ -221,16 +224,13 @@ export function ProjectContentClient({ {/* Pagination */} {totalPages > 1 && (
- @@ -245,7 +245,7 @@ export function ProjectContentClient({ {currentPage < totalPages ? ( Next ) : ( - "Next" + 'Next' )}
diff --git a/app/(dashboard)/projects/[projectId]/settings/loading.tsx b/app/(dashboard)/projects/[projectId]/settings/loading.tsx index da924ee..a112fc9 100644 --- a/app/(dashboard)/projects/[projectId]/settings/loading.tsx +++ b/app/(dashboard)/projects/[projectId]/settings/loading.tsx @@ -1,5 +1,5 @@ -import { Skeleton } from "@/components/ui/skeleton" -import { Card, CardHeader, CardContent } from "@/components/ui/card" +import { Skeleton } from '@/components/ui/skeleton'; +import { Card, CardHeader, CardContent } from '@/components/ui/card'; export default function ProjectSettingsLoading() { return ( @@ -63,5 +63,5 @@ export default function ProjectSettingsLoading() {
- ) + ); } diff --git a/app/(dashboard)/projects/[projectId]/settings/project-settings-page-client.tsx b/app/(dashboard)/projects/[projectId]/settings/project-settings-page-client.tsx index 44a27c8..be96574 100644 --- a/app/(dashboard)/projects/[projectId]/settings/project-settings-page-client.tsx +++ b/app/(dashboard)/projects/[projectId]/settings/project-settings-page-client.tsx @@ -3,507 +3,544 @@ import { useState, useEffect } from 'react'; import { useRouter } from 'next/navigation'; import Link from 'next/link'; -import { ArrowLeft, Loader2, Globe, Lock, UserPlus, Trash2, AlertTriangle, Settings, Save, Tag, Plus, X } from 'lucide-react'; +import { + ArrowLeft, + Loader2, + Globe, + Lock, + UserPlus, + Trash2, + AlertTriangle, + Settings, + Save, + Tag, + Plus, + X, +} from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Textarea } from '@/components/ui/textarea'; import { - AlertDialog, - AlertDialogAction, - AlertDialogCancel, - AlertDialogContent, - AlertDialogDescription, - AlertDialogFooter, - AlertDialogHeader, - AlertDialogTitle, - AlertDialogTrigger, + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, } from '@/components/ui/alert-dialog'; type Visibility = 'PRIVATE' | 'INVITE' | 'PUBLIC'; -const visibilityOptions: { value: Visibility; label: string; description: string; icon: React.ReactNode }[] = [ - { - value: 'PRIVATE', - label: 'Private', - description: 'Only you can access this project', - icon: , - }, - { - value: 'INVITE', - label: 'Invite Only', - description: 'Share with specific people via email', - icon: , - }, - { - value: 'PUBLIC', - label: 'Public', - description: 'Anyone with the link can view', - icon: , - }, +const visibilityOptions: { + value: Visibility; + label: string; + description: string; + icon: React.ReactNode; +}[] = [ + { + value: 'PRIVATE', + label: 'Private', + description: 'Only you can access this project', + icon: , + }, + { + value: 'INVITE', + label: 'Invite Only', + description: 'Share with specific people via email', + icon: , + }, + { + value: 'PUBLIC', + label: 'Public', + description: 'Anyone with the link can view', + icon: , + }, ]; interface ProjectSettingsPageProps { - projectId: string; + projectId: string; } interface CommentTag { - id: string; - name: string; - color: string; - position: number; + id: string; + name: string; + color: string; + position: number; } export default function ProjectSettingsPageClient({ projectId }: ProjectSettingsPageProps) { - const router = useRouter(); - const [isLoading, setIsLoading] = useState(true); - const [isSaving, setIsSaving] = useState(false); - const [isDeleting, setIsDeleting] = useState(false); - const [error, setError] = useState(''); - const [success, setSuccess] = useState(''); - const [deleteConfirmation, setDeleteConfirmation] = useState(''); - const [formData, setFormData] = useState({ - name: '', - description: '', - visibility: 'PRIVATE' as Visibility, - }); + const router = useRouter(); + const [isLoading, setIsLoading] = useState(true); + const [isSaving, setIsSaving] = useState(false); + const [isDeleting, setIsDeleting] = useState(false); + const [error, setError] = useState(''); + const [success, setSuccess] = useState(''); + const [deleteConfirmation, setDeleteConfirmation] = useState(''); + const [formData, setFormData] = useState({ + name: '', + description: '', + visibility: 'PRIVATE' as Visibility, + }); - // Tag management state - const [tags, setTags] = useState([]); - const [newTagName, setNewTagName] = useState(''); - const [newTagColor, setNewTagColor] = useState('#3B82F6'); - const [isAddingTag, setIsAddingTag] = useState(false); - const [editingTagId, setEditingTagId] = useState(null); - const [editTagName, setEditTagName] = useState(''); - const [editTagColor, setEditTagColor] = useState(''); + // Tag management state + const [tags, setTags] = useState([]); + const [newTagName, setNewTagName] = useState(''); + const [newTagColor, setNewTagColor] = useState('#3B82F6'); + const [isAddingTag, setIsAddingTag] = useState(false); + const [editingTagId, setEditingTagId] = useState(null); + const [editTagName, setEditTagName] = useState(''); + const [editTagColor, setEditTagColor] = useState(''); - useEffect(() => { - // Fetch project data - fetch(`/api/projects/${projectId}`) - .then((res) => res.json()) - .then((data) => { - if (data.error) { - setError(data.error); - } else { - const project = data.data; - setFormData({ - name: project.name || '', - description: project.description || '', - visibility: project.visibility || 'PRIVATE', - }); - } - }) - .catch(() => setError('Failed to load project')) - .finally(() => setIsLoading(false)); - - // Fetch tags - fetch(`/api/projects/${projectId}/tags`) - .then((res) => res.json()) - .then((data) => { - if (Array.isArray(data.data)) { - setTags(data.data); - } - }) - .catch(() => { /* Silent fail - tags are optional */ }); - }, [projectId]); - - const handleSave = async (e: React.FormEvent) => { - e.preventDefault(); - setIsSaving(true); - setError(''); - setSuccess(''); - - try { - const response = await fetch(`/api/projects/${projectId}`, { - method: 'PATCH', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(formData), - }); - - const data = await response.json(); - - if (!response.ok) { - setError(data.error || 'Failed to update project'); - return; - } - - setSuccess('Project settings saved successfully'); - setTimeout(() => setSuccess(''), 3000); - } catch { - setError('Something went wrong. Please try again.'); - } finally { - setIsSaving(false); + useEffect(() => { + // Fetch project data + fetch(`/api/projects/${projectId}`) + .then((res) => res.json()) + .then((data) => { + if (data.error) { + setError(data.error); + } else { + const project = data.data; + setFormData({ + name: project.name || '', + description: project.description || '', + visibility: project.visibility || 'PRIVATE', + }); } - }; + }) + .catch(() => setError('Failed to load project')) + .finally(() => setIsLoading(false)); - const handleAddTag = async () => { - if (!newTagName.trim()) return; - setIsAddingTag(true); - try { - const res = await fetch(`/api/projects/${projectId}/tags`, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ name: newTagName.trim(), color: newTagColor }), - }); - if (res.ok) { - const data = await res.json(); - const newTag = data.data; - setTags([...tags, newTag]); - setNewTagName(''); - setNewTagColor('#3B82F6'); - } - } catch { - // Silent fail - } finally { - setIsAddingTag(false); + // Fetch tags + fetch(`/api/projects/${projectId}/tags`) + .then((res) => res.json()) + .then((data) => { + if (Array.isArray(data.data)) { + setTags(data.data); } - }; + }) + .catch(() => { + /* Silent fail - tags are optional */ + }); + }, [projectId]); - const handleUpdateTag = async (tagId: string) => { - if (!editTagName.trim()) return; - try { - const res = await fetch(`/api/projects/${projectId}/tags/${tagId}`, { - method: 'PATCH', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ name: editTagName.trim(), color: editTagColor }), - }); - if (res.ok) { - const data = await res.json(); - const updated = data.data; - setTags(tags.map((t) => (t.id === tagId ? updated : t))); - setEditingTagId(null); - } - } catch { - // Silent fail - } - }; + const handleSave = async (e: React.FormEvent) => { + e.preventDefault(); + setIsSaving(true); + setError(''); + setSuccess(''); - const handleDeleteTag = async (tagId: string) => { - try { - const res = await fetch(`/api/projects/${projectId}/tags/${tagId}`, { - method: 'DELETE', - }); - if (res.ok) { - setTags(tags.filter((t) => t.id !== tagId)); - } - } catch { - // Silent fail - } - }; + try { + const response = await fetch(`/api/projects/${projectId}`, { + method: 'PATCH', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(formData), + }); - const handleDelete = async () => { - if (deleteConfirmation !== formData.name) { - setError('Project name does not match'); - return; - } + const data = await response.json(); - setIsDeleting(true); - setError(''); + if (!response.ok) { + setError(data.error || 'Failed to update project'); + return; + } - try { - const response = await fetch(`/api/projects/${projectId}`, { - method: 'DELETE', - }); + setSuccess('Project settings saved successfully'); + setTimeout(() => setSuccess(''), 3000); + } catch { + setError('Something went wrong. Please try again.'); + } finally { + setIsSaving(false); + } + }; - if (!response.ok) { - const data = await response.json(); - setError(data.error || 'Failed to delete project'); - return; - } + const handleAddTag = async () => { + if (!newTagName.trim()) return; + setIsAddingTag(true); + try { + const res = await fetch(`/api/projects/${projectId}/tags`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ name: newTagName.trim(), color: newTagColor }), + }); + if (res.ok) { + const data = await res.json(); + const newTag = data.data; + setTags([...tags, newTag]); + setNewTagName(''); + setNewTagColor('#3B82F6'); + } + } catch { + // Silent fail + } finally { + setIsAddingTag(false); + } + }; - router.push('/dashboard'); - } catch { - setError('Something went wrong. Please try again.'); - } finally { - setIsDeleting(false); - } - }; + const handleUpdateTag = async (tagId: string) => { + if (!editTagName.trim()) return; + try { + const res = await fetch(`/api/projects/${projectId}/tags/${tagId}`, { + method: 'PATCH', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ name: editTagName.trim(), color: editTagColor }), + }); + if (res.ok) { + const data = await res.json(); + const updated = data.data; + setTags(tags.map((t) => (t.id === tagId ? updated : t))); + setEditingTagId(null); + } + } catch { + // Silent fail + } + }; - if (isLoading) { - return ( -
- -
- ); + const handleDeleteTag = async (tagId: string) => { + try { + const res = await fetch(`/api/projects/${projectId}/tags/${tagId}`, { + method: 'DELETE', + }); + if (res.ok) { + setTags(tags.filter((t) => t.id !== tagId)); + } + } catch { + // Silent fail + } + }; + + const handleDelete = async () => { + if (deleteConfirmation !== formData.name) { + setError('Project name does not match'); + return; } + setIsDeleting(true); + setError(''); + + try { + const response = await fetch(`/api/projects/${projectId}`, { + method: 'DELETE', + }); + + if (!response.ok) { + const data = await response.json(); + setError(data.error || 'Failed to delete project'); + return; + } + + router.push('/dashboard'); + } catch { + setError('Something went wrong. Please try again.'); + } finally { + setIsDeleting(false); + } + }; + + if (isLoading) { return ( -
-
-
- - - Back to Project - -
- -
- {/* General Settings */} - - -
- -
- Project Settings - - Update your project details and access settings - - - -
-
- - setFormData(prev => ({ ...prev, name: e.target.value }))} - required - disabled={isSaving} - className="h-11" - /> -
- -
- -