Apply full refactor updates plus pipeline/email UX confirmations

src/components/jury/project-files-section.tsx

@@ -1,92 +1,92 @@
-'use client'
-
-import { trpc } from '@/lib/trpc/client'
-import { FileViewer } from '@/components/shared/file-viewer'
-import { Skeleton } from '@/components/ui/skeleton'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { AlertCircle, FileX } from 'lucide-react'
-
-interface ProjectFilesSectionProps {
-  projectId: string
-  stageId: string
-}
-
-export function ProjectFilesSection({ projectId, stageId }: ProjectFilesSectionProps) {
-  const { data: groupedFiles, isLoading, error } = trpc.file.listByProjectForStage.useQuery({
-    projectId,
-    stageId,
-  })
-
-  if (isLoading) {
-    return <ProjectFilesSectionSkeleton />
-  }
-
-  if (error) {
-    return (
-      <Card>
-        <CardContent className="flex flex-col items-center justify-center py-8 text-center">
-          <AlertCircle className="h-12 w-12 text-destructive/50" />
-          <p className="mt-2 font-medium text-destructive">Failed to load files</p>
-          <p className="text-sm text-muted-foreground">
-            {error.message || 'An error occurred while loading project files'}
-          </p>
-        </CardContent>
-      </Card>
-    )
-  }
-
-  if (!groupedFiles || groupedFiles.length === 0) {
-    return (
-      <Card>
-        <CardContent className="flex flex-col items-center justify-center py-8 text-center">
-          <FileX className="h-12 w-12 text-muted-foreground/50" />
-          <p className="mt-2 font-medium">No files available</p>
-          <p className="text-sm text-muted-foreground">
-            This project has no files uploaded yet
-          </p>
-        </CardContent>
-      </Card>
-    )
-  }
-
-  // Flatten all files from all stage groups for FileViewer
-  const allFiles = groupedFiles.flatMap((group) => group.files)
-
-  return (
-    <div className="space-y-4">
-      {groupedFiles.map((group) => (
-        <div key={group.stageId || 'general'} className="space-y-2">
-          <div className="flex items-center gap-2">
-            <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide">
-              {group.stageName}
-            </h3>
-            <div className="flex-1 h-px bg-border" />
-          </div>
-          <FileViewer files={group.files} />
-        </div>
-      ))}
-    </div>
-  )
-}
-
-function ProjectFilesSectionSkeleton() {
-  return (
-    <Card>
-      <CardHeader>
-        <Skeleton className="h-5 w-28" />
-      </CardHeader>
-      <CardContent className="space-y-3">
-        {[1, 2, 3].map((i) => (
-          <div key={i} className="flex items-center gap-3 rounded-lg border p-3">
-            <Skeleton className="h-10 w-10 rounded-lg" />
-            <div className="flex-1 space-y-2">
-              <Skeleton className="h-4 w-48" />
-              <Skeleton className="h-3 w-24" />
-            </div>
-            <Skeleton className="h-9 w-20" />
-          </div>
-        ))}
-      </CardContent>
-    </Card>
-  )
-}
+'use client'
+
+import { trpc } from '@/lib/trpc/client'
+import { FileViewer } from '@/components/shared/file-viewer'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { AlertCircle, FileX } from 'lucide-react'
+
+interface ProjectFilesSectionProps {
+  projectId: string
+  stageId: string
+}
+
+export function ProjectFilesSection({ projectId, stageId }: ProjectFilesSectionProps) {
+  const { data: groupedFiles, isLoading, error } = trpc.file.listByProjectForStage.useQuery({
+    projectId,
+    stageId,
+  })
+
+  if (isLoading) {
+    return <ProjectFilesSectionSkeleton />
+  }
+
+  if (error) {
+    return (
+      <Card>
+        <CardContent className="flex flex-col items-center justify-center py-8 text-center">
+          <AlertCircle className="h-12 w-12 text-destructive/50" />
+          <p className="mt-2 font-medium text-destructive">Failed to load files</p>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An error occurred while loading project files'}
+          </p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (!groupedFiles || groupedFiles.length === 0) {
+    return (
+      <Card>
+        <CardContent className="flex flex-col items-center justify-center py-8 text-center">
+          <FileX className="h-12 w-12 text-muted-foreground/50" />
+          <p className="mt-2 font-medium">No files available</p>
+          <p className="text-sm text-muted-foreground">
+            This project has no files uploaded yet
+          </p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  // Flatten all files from all stage groups for FileViewer
+  const allFiles = groupedFiles.flatMap((group) => group.files)
+
+  return (
+    <div className="space-y-4">
+      {groupedFiles.map((group) => (
+        <div key={group.stageId || 'general'} className="space-y-2">
+          <div className="flex items-center gap-2">
+            <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide">
+              {group.stageName}
+            </h3>
+            <div className="flex-1 h-px bg-border" />
+          </div>
+          <FileViewer files={group.files} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function ProjectFilesSectionSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <Skeleton className="h-5 w-28" />
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="flex items-center gap-3 rounded-lg border p-3">
+            <Skeleton className="h-10 w-10 rounded-lg" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-4 w-48" />
+              <Skeleton className="h-3 w-24" />
+            </div>
+            <Skeleton className="h-9 w-20" />
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}