Collapseable Comments section

app/client/[token]/review/[versionId]/page.tsx

@@ -116,6 +116,7 @@ export default function ClientReviewPage({
   const [prevReview, setPrevReview] = useState<{ versionId: string; label: string } | null>(null);
   const [copiedTaskName, setCopiedTaskName] = useState(false);
   const [downloadingHighRes, setDownloadingHighRes] = useState(false);
+  const [commentsOpen, setCommentsOpen] = useState(true);
 
   const playerRef = useRef<ReviewPlayerRef>(null);
   const { toast } = useToast();
@@ -465,19 +466,40 @@ export default function ClientReviewPage({
           />
         </div>
 
-        {/* Comment panel */}
+        {/* Comment panel — collapsible */}
-        <div className="h-64 md:h-auto md:w-72 xl:w-80 shrink-0 flex flex-col border-t md:border-t-0 md:border-l border-zinc-800 bg-zinc-900">
+        <div
-          <div className="px-4 py-3 border-b border-zinc-800 flex items-center justify-between">
+          className={cn(
-            <h3 className="text-sm font-semibold text-white flex items-center gap-2">
+            "shrink-0 flex flex-col border-t md:border-t-0 md:border-l border-zinc-800 bg-zinc-900 transition-all duration-200",
+            commentsOpen ? "h-64 md:h-auto md:w-72 xl:w-80" : "h-10 md:h-auto md:w-10"
+          )}
+        >
+          {/* Collapse toggle */}
+          <button
+            onClick={() => setCommentsOpen((o) => !o)}
+            className="flex items-center justify-center h-10 w-full border-b border-zinc-800 hover:bg-zinc-800/60 transition-colors shrink-0"
+            title={commentsOpen ? "Collapse notes" : "Expand notes"}
+          >
+            {commentsOpen ? (
+              <ChevronRight className="h-4 w-4 text-zinc-400" />
+            ) : (
+              <ChevronLeft className="h-4 w-4 text-zinc-400" />
+            )}
+            {!commentsOpen && (
+              <MessageSquare className="h-4 w-4 text-zinc-400 mt-1" />
+            )}
+          </button>
+
+          {commentsOpen && (
+            <div className="px-4 py-3 border-b border-zinc-800 flex items-center gap-2 shrink-0">
               <MessageSquare className="h-4 w-4 text-zinc-400" />
-              Notes
+              <h3 className="text-sm font-semibold text-white">Notes</h3>
               {comments.length > 0 && (
                 <span className="text-xs text-zinc-500">({comments.length})</span>
               )}
-            </h3>
             </div>
+          )}
 
-          <ScrollArea className="flex-1 px-4 py-3">
+          {commentsOpen && <ScrollArea className="flex-1 px-4 py-3">
             {comments.length === 0 ? (
               <div className="text-center py-8 text-zinc-500 text-sm">
                 <MessageSquare className="h-8 w-8 mx-auto mb-2 opacity-30" />
@@ -520,10 +542,9 @@ export default function ClientReviewPage({
                 ))}
               </div>
             )}
-          </ScrollArea>
+          </ScrollArea>}
 
-          {/* Add note */}
+          {commentsOpen && commentFrame !== null ? (
-          {commentFrame !== null ? (
             <div className="border-t border-zinc-800 p-3 space-y-2">
               <p className="text-xs text-zinc-500 font-mono">
                 Frame {commentFrame} · {frameToTimecode(commentFrame, version.fps)}
@@ -559,7 +580,7 @@ export default function ClientReviewPage({
                 </Button>
               </div>
             </div>
-          ) : (
+          ) : commentsOpen ? (
             <div className="border-t border-zinc-800 p-3">
               <Button
                 variant="outline"
@@ -573,7 +594,7 @@ export default function ClientReviewPage({
                 Add Note at Current Frame
               </Button>
             </div>
-          )}
+          ) : null}
         </div>
       </div>