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,8 +347,30 @@ 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
+          className={cn(
+            "shrink-0 flex flex-col border-l border-border transition-all duration-200",
+            commentsOpen ? "w-80 xl:w-96" : "w-10"
+          )}
+        >
+          {/* Collapse toggle */}
+          <button
+            onClick={() => setCommentsOpen((o) => !o)}
+            className="flex items-center justify-center h-10 w-full border-b border-border hover:bg-muted/50 transition-colors shrink-0"
+            title={commentsOpen ? "Collapse comments" : "Expand comments"}
+          >
+            {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}
@@ -357,6 +383,7 @@ export function ReviewPageClient({
               currentUserId={currentUserId}
               isAdmin={userRole === "ADMIN"}
             />
+          )}
         </div>
       </div>