Collapseable Comments section

app/review/[versionId]/ReviewPageClient.tsx

@@ -33,9 +33,12 @@ import {
   XCircle,
   AlertCircle,
   ChevronDown,
+  ChevronRight,
+  ChevronLeft,
   ArrowLeft,
   Film,
   ShieldCheck,
+  MessageSquare,
 } from "lucide-react";
 
 interface ReviewPageClientProps {
@@ -120,6 +123,7 @@ export function ReviewPageClient({
   const [isSubmittingApproval, setIsSubmittingApproval] = useState(false);
   const [isInternallyApproving, setIsInternallyApproving] = useState(false);
   const [showVersions, setShowVersions] = useState(false);
+  const [commentsOpen, setCommentsOpen] = useState(true);
 
   const playerRef = useRef<ReviewPlayerRef>(null);
   const { toast } = useToast();
@@ -343,20 +347,43 @@ export function ReviewPageClient({
           />
         </div>
 
-        {/* Comment panel — 30%, min 280px */}
+        {/* Comment panel — collapsible */}
-        <div className="w-80 xl:w-96 shrink-0 flex flex-col border-l border-border">
+        <div
-          <CommentPanel
+          className={cn(
-            versionId={version.id}
+            "shrink-0 flex flex-col border-l border-border transition-all duration-200",
-            fps={version.fps}
+            commentsOpen ? "w-80 xl:w-96" : "w-10"
-            comments={comments}
+          )}
-            onCommentsChange={handleCommentsChange}
+        >
-            onAnnotationDeleted={handleAnnotationSaved}
+          {/* Collapse toggle */}
-            pendingFrame={pendingFrame}
+          <button
-            onPendingFrameCleared={() => setPendingFrame(null)}
+            onClick={() => setCommentsOpen((o) => !o)}
-            onSeekToFrame={(frame) => playerRef.current?.seekToFrame(frame)}
+            className="flex items-center justify-center h-10 w-full border-b border-border hover:bg-muted/50 transition-colors shrink-0"
-            currentUserId={currentUserId}
+            title={commentsOpen ? "Collapse comments" : "Expand comments"}
-            isAdmin={userRole === "ADMIN"}
+          >
-          />
+            {commentsOpen ? (
+              <ChevronRight className="h-4 w-4 text-muted-foreground" />
+            ) : (
+              <ChevronLeft className="h-4 w-4 text-muted-foreground" />
+            )}
+            {!commentsOpen && (
+              <MessageSquare className="h-4 w-4 text-muted-foreground mt-1" />
+            )}
+          </button>
+
+          {commentsOpen && (
+            <CommentPanel
+              versionId={version.id}
+              fps={version.fps}
+              comments={comments}
+              onCommentsChange={handleCommentsChange}
+              onAnnotationDeleted={handleAnnotationSaved}
+              pendingFrame={pendingFrame}
+              onPendingFrameCleared={() => setPendingFrame(null)}
+              onSeekToFrame={(frame) => playerRef.current?.seekToFrame(frame)}
+              currentUserId={currentUserId}
+              isAdmin={userRole === "ADMIN"}
+            />
+          )}
         </div>
       </div>