From c6c1c4c370144a9ead4d76672de5b12919cd1da6 Mon Sep 17 00:00:00 2001
From: twotalesanimation <80506065+twotalesanimation@users.noreply.github.com>
Date: Wed, 15 Jul 2026 02:22:19 +0200
Subject: [PATCH] Collapseable Comments section

---
 app/review/[versionId]/ReviewPageClient.tsx | 55 +++++++++++++++------
 1 file changed, 41 insertions(+), 14 deletions(-)

diff --git a/app/review/[versionId]/ReviewPageClient.tsx b/app/review/[versionId]/ReviewPageClient.tsx
index 1aedad9..41ebbbd 100644
--- a/app/review/[versionId]/ReviewPageClient.tsx
+++ b/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 */}
-        <div className="w-80 xl:w-96 shrink-0 flex flex-col border-l border-border">
-          <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"}
-          />
+        {/* Comment panel — collapsible */}
+        <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}
+              comments={comments}
+              onCommentsChange={handleCommentsChange}
+              onAnnotationDeleted={handleAnnotationSaved}
+              pendingFrame={pendingFrame}
+              onPendingFrameCleared={() => setPendingFrame(null)}
+              onSeekToFrame={(frame) => playerRef.current?.seekToFrame(frame)}
+              currentUserId={currentUserId}
+              isAdmin={userRole === "ADMIN"}
+            />
+          )}
         </div>
       </div>