feat: add sorting functionality to project videos and update search parameters

app/(dashboard)/projects/[projectId]/page.tsx

@@ -36,7 +36,7 @@ function formatRelativeTime(date: Date): string {
 
 interface ProjectPageProps {
   params: Promise<{ projectId: string }>;
-  searchParams: Promise<{ page?: string }>;
+  searchParams: Promise<{ page?: string; sort?: string }>;
 }
 
 export default async function ProjectPage({ params, searchParams }: ProjectPageProps) {
@@ -45,7 +45,8 @@ export default async function ProjectPage({ params, searchParams }: ProjectPageP
   const resolvedSearchParams = await searchParams;
 
   const page = Number(resolvedSearchParams?.page) || 1;
-  const pageSize = 20;
+  const sortOrder = resolvedSearchParams?.sort === 'asc' ? 'asc' : 'desc';
+  const pageSize = 21;
   const skip = (page - 1) * pageSize;
 
   // Fetch project with videos
@@ -107,7 +108,10 @@ export default async function ProjectPage({ params, searchParams }: ProjectPageP
       where: { projectId: project.id },
       skip,
       take: pageSize,
-      orderBy: { position: 'asc' },
+      orderBy: [
+        { updatedAt: sortOrder },
+        { id: sortOrder },
+      ],
       include: {
         versions: {
           where: { isActive: true },

app/(dashboard)/projects/[projectId]/project-content-client.tsx

@@ -82,12 +82,6 @@ export function ProjectContentClient({
     [searchParams]
   );
 
-  const sortedVideos = [...localVideos].sort((a, b) => {
-    const dateA = new Date(a.updatedAt).getTime();
-    const dateB = new Date(b.updatedAt).getTime();
-    return sortOrder === 'desc' ? dateB - dateA : dateA - dateB;
-  });
-
   const handleVideoDeleted = useCallback((videoId: string) => {
     setLocalVideos((prev) => prev.filter((video) => video.id !== videoId));
   }, []);
@@ -188,7 +182,7 @@ export function ProjectContentClient({
       {/* Videos Grid */}
       {localVideos.length > 0 ? (
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-          {sortedVideos.map((video) => (
+          {localVideos.map((video) => (
             <VideoCard
               key={video.id}
               video={video}