Update web/src/components/LeftSidebar.tsx

web/src/components/LeftSidebar.tsx

@@ -3,16 +3,40 @@ import React, { useEffect, useRef, useState } from "react";
 import { LearningModeSelector } from "./LearningModeSelector";
 import { Label } from "./ui/label";
 import { Button } from "./ui/button";
-import { LogIn, Bookmark, Download, Copy, MessageSquare, Trash2, Edit2, Check, X as XIcon } from "lucide-react";
+import {
+  LogIn,
+  Bookmark,
+  Download,
+  Copy,
+  MessageSquare,
+  Trash2,
+  Edit2,
+  Check,
+  X as XIcon,
+} from "lucide-react";
 import { Separator } from "./ui/separator";
 import { GroupMembers } from "./GroupMembers";
 import { Card } from "./ui/card";
 import { Input } from "./ui/input";
-import type { LearningMode, Language, SpaceType, GroupMember, User as UserType, SavedItem, SavedChat } from "../App";
+import type {
+  LearningMode,
+  Language,
+  SpaceType,
+  GroupMember,
+  User as UserType,
+  SavedItem,
+  SavedChat,
+} from "../App";
 import { toast } from "sonner";
 import { Document, HeadingLevel, Packer, Paragraph, TextRun } from "docx";
 import { jsPDF } from "jspdf";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
 import type { CourseInfo } from "../App";
 
 // ================================
@@ -71,7 +95,11 @@ function SavedChatItem({
 
   const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
     const relatedTarget = e.relatedTarget as HTMLElement;
-    if (relatedTarget && (cancelButtonRef.current?.contains(relatedTarget) || saveButtonRef.current?.contains(relatedTarget))) {
+    if (
+      relatedTarget &&
+      (cancelButtonRef.current?.contains(relatedTarget) ||
+        saveButtonRef.current?.contains(relatedTarget))
+    ) {
       return;
     }
     if (editTitle.trim() && editTitle !== originalTitle && onRenameSavedChat) {
@@ -97,7 +125,10 @@ function SavedChatItem({
   };
 
   return (
-    <Card className="p-3 cursor-pointer hover:bg-muted/50 transition-all bg-muted/30" onClick={() => !isEditing && onLoadChat(chat)}>
+    <Card
+      className="p-3 cursor-pointer hover:bg-muted/50 transition-all bg-muted/30"
+      onClick={() => !isEditing && onLoadChat(chat)}
+    >
       <div className="flex items-start gap-2">
         <MessageSquare className="h-3.5 w-3.5 mt-0.5 flex-shrink-0 text-muted-foreground" />
         <div className="flex-1 min-w-0">
@@ -193,7 +224,12 @@ function SavedChatItem({
           </div>
 
           <p className="text-xs text-muted-foreground mt-1">
-            {chat.chatMode === "ask" ? "Ask" : chat.chatMode === "review" ? "Review" : "Quiz"} • {chat.timestamp.toLocaleDateString()}
+            {chat.chatMode === "ask"
+              ? "Ask"
+              : chat.chatMode === "review"
+              ? "Review"
+              : "Quiz"}{" "}
+            • {chat.timestamp.toLocaleDateString()}
           </p>
           <p className="text-xs text-muted-foreground/70 mt-1">
             {chat.messages.length} message{chat.messages.length !== 1 ? "s" : ""}
@@ -275,29 +311,8 @@ export function LeftSidebar({
   const [isDownloading, setIsDownloading] = useState(false);
   const [copied, setCopied] = useState(false);
 
-  // ✅ NEW: ref for Saved scroll area
   const savedScrollRef = useRef<HTMLDivElement>(null);
 
-  // ✅ NEW: hard-stop scroll chaining from Saved area to outer containers
-  useEffect(() => {
-    const el = savedScrollRef.current;
-    if (!el) return;
-
-    const onWheel = (e: WheelEvent) => {
-      e.stopPropagation();
-
-      const atTop = el.scrollTop <= 0;
-      const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
-
-      if ((atTop && e.deltaY < 0) || (atBottom && e.deltaY > 0)) {
-        e.preventDefault();
-      }
-    };
-
-    el.addEventListener("wheel", onWheel, { passive: false });
-    return () => el.removeEventListener("wheel", onWheel);
-  }, []);
-
   const handleLogin = () => {
     if (!name.trim() || !email.trim()) {
       toast.error("Please fill in all fields");
@@ -335,7 +350,8 @@ export function LeftSidebar({
   };
 
   const getDefaultFilenameBase = (item: SavedItem) => {
-    const kind = item.type === "export" ? "export" : item.type === "summary" ? "summary" : "quiz";
+    const kind =
+      item.type === "export" ? "export" : item.type === "summary" ? "summary" : "quiz";
     return `clare-${kind}-${formatDateStamp(item.timestamp)}`;
   };
 
@@ -347,6 +363,7 @@ export function LeftSidebar({
       downloadBlob(blob, `${getDefaultFilenameBase(item)}.md`);
       toast.success("Downloaded .md");
     } catch (e) {
+      // eslint-disable-next-line no-console
       console.error(e);
       toast.error("Failed to download .md");
     } finally {
@@ -362,9 +379,21 @@ export function LeftSidebar({
       const paragraphs: Paragraph[] = lines.map((line) => {
         const trimmed = line.trim();
         if (!trimmed) return new Paragraph({ text: "" });
-        if (trimmed.startsWith("### ")) return new Paragraph({ text: trimmed.replace(/^###\s+/, ""), heading: HeadingLevel.HEADING_3 });
-        if (trimmed.startsWith("## ")) return new Paragraph({ text: trimmed.replace(/^##\s+/, ""), heading: HeadingLevel.HEADING_2 });
-        if (trimmed.startsWith("# ")) return new Paragraph({ text: trimmed.replace(/^#\s+/, ""), heading: HeadingLevel.HEADING_1 });
+        if (trimmed.startsWith("### "))
+          return new Paragraph({
+            text: trimmed.replace(/^###\s+/, ""),
+            heading: HeadingLevel.HEADING_3,
+          });
+        if (trimmed.startsWith("## "))
+          return new Paragraph({
+            text: trimmed.replace(/^##\s+/, ""),
+            heading: HeadingLevel.HEADING_2,
+          });
+        if (trimmed.startsWith("# "))
+          return new Paragraph({
+            text: trimmed.replace(/^#\s+/, ""),
+            heading: HeadingLevel.HEADING_1,
+          });
         return new Paragraph({ children: [new TextRun({ text: line })] });
       });
 
@@ -373,6 +402,7 @@ export function LeftSidebar({
       downloadBlob(blob, `${getDefaultFilenameBase(item)}.docx`);
       toast.success("Downloaded .docx");
     } catch (e) {
+      // eslint-disable-next-line no-console
       console.error(e);
       toast.error("Failed to download .docx");
     } finally {
@@ -405,6 +435,7 @@ export function LeftSidebar({
       doc.save(`${getDefaultFilenameBase(item)}.pdf`);
       toast.success("Downloaded .pdf");
     } catch (e) {
+      // eslint-disable-next-line no-console
       console.error(e);
       toast.error("Failed to download .pdf");
     } finally {
@@ -432,7 +463,9 @@ export function LeftSidebar({
 
   useEffect(() => {
     if (selectedItem && isDialogOpen) {
-      const updatedItem = savedItems.find((item) => item.content === selectedItem.content && item.type === selectedItem.type);
+      const updatedItem = savedItems.find(
+        (item) => item.content === selectedItem.content && item.type === selectedItem.type
+      );
       if (updatedItem && updatedItem.id !== selectedItem.id) setSelectedItem(updatedItem);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -444,7 +477,8 @@ export function LeftSidebar({
     if (isItemSaved) {
       const itemToUnsave = savedItems.find(
         (item) =>
-          (selectedItem.id && item.id === selectedItem.id) || (item.content === selectedItem.content && item.type === selectedItem.type)
+          (selectedItem.id && item.id === selectedItem.id) ||
+          (item.content === selectedItem.content && item.type === selectedItem.type)
       );
       if (itemToUnsave) handleUnsaveItem(itemToUnsave.id);
     } else {
@@ -452,8 +486,6 @@ export function LeftSidebar({
     }
   };
 
-  const filteredSavedItems = savedItems.filter((item) => item.workspaceId === currentWorkspaceId);
-
   const defaultCourses = [
     { id: "course1", name: "Introduction to AI" },
     { id: "course2", name: "Machine Learning" },
@@ -521,7 +553,7 @@ export function LeftSidebar({
   const courseDisplayInfo = getCourseDisplayInfo();
 
   return (
-    // ✅ LeftSidebar itself never scrolls. Only the Saved list scrolls.
+    // LeftSidebar itself never scrolls; only Saved list scrolls.
     <div className="h-full min-h-0 flex flex-col overflow-hidden">
       {/* Top fixed blocks */}
       {isLoggedIn && courseDisplayInfo && (
@@ -532,13 +564,19 @@ export function LeftSidebar({
               <div className="space-y-2 text-sm">
                 <div>
                   <span className="text-muted-foreground">Instructor: </span>
-                  <a href={`mailto:${courseDisplayInfo.instructor.email}`} className="text-primary hover:underline">
+                  <a
+                    href={`mailto:${courseDisplayInfo.instructor.email}`}
+                    className="text-primary hover:underline"
+                  >
                     {courseDisplayInfo.instructor.name}
                   </a>
                 </div>
                 <div>
                   <span className="text-muted-foreground">TA: </span>
-                  <a href={`mailto:${courseDisplayInfo.teachingAssistant.email}`} className="text-primary hover:underline">
+                  <a
+                    href={`mailto:${courseDisplayInfo.teachingAssistant.email}`}
+                    className="text-primary hover:underline"
+                  >
                     {courseDisplayInfo.teachingAssistant.name}
                   </a>
                 </div>
@@ -559,7 +597,10 @@ export function LeftSidebar({
                     className="text-base font-semibold"
                   />
                 ) : (
-                  <h3 className="text-base font-semibold cursor-pointer hover:text-primary" onClick={() => setIsEditingTitle(true)}>
+                  <h3
+                    className="text-base font-semibold cursor-pointer hover:text-primary"
+                    onClick={() => setIsEditingTitle(true)}
+                  >
                     {editableTitle}
                   </h3>
                 )}
@@ -593,7 +634,9 @@ export function LeftSidebar({
                   className="w-20 h-20 rounded-full object-cover mb-4"
                 />
                 <h3 className="mb-2">Welcome to Clare!</h3>
-                <p className="text-sm text-muted-foreground text-center mb-4">Log in to start your personalized learning journey</p>
+                <p className="text-sm text-muted-foreground text-center mb-4">
+                  Log in to start your personalized learning journey
+                </p>
               </div>
 
               {!showLoginForm ? (
@@ -605,7 +648,12 @@ export function LeftSidebar({
                 <div className="space-y-3">
                   <div className="space-y-2">
                     <Label htmlFor="name">Name</Label>
-                    <Input id="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter your name" />
+                    <Input
+                      id="name"
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      placeholder="Enter your name"
+                    />
                   </div>
                   <div className="space-y-2">
                     <Label htmlFor="email">Email / Student ID</Label>
@@ -638,7 +686,7 @@ export function LeftSidebar({
         </div>
       )}
 
-      {/* ✅ Saved Chat: ONLY this list scrolls */}
+      {/* Saved Chat: ONLY this list scrolls */}
       {isLoggedIn && (
         <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
           <div className="p-4 border-b border-border flex-shrink-0">
@@ -673,14 +721,18 @@ export function LeftSidebar({
         </div>
       )}
 
-      {/* Saved Item Dialog (keep your logic) */}
+      {/* Saved Item Dialog */}
       <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
         <DialogContent className="max-w-4xl max-h-[85vh] flex flex-col">
           <DialogHeader>
             <DialogTitle>{selectedItem?.title}</DialogTitle>
             <DialogDescription>
-              {selectedItem?.type === "export" ? "Export" : selectedItem?.type === "quiz" ? "Quiz" : "Summary"} •{" "}
-              {selectedItem?.timestamp.toLocaleDateString()}
+              {selectedItem?.type === "export"
+                ? "Export"
+                : selectedItem?.type === "quiz"
+                ? "Quiz"
+                : "Summary"}{" "}
+              • {selectedItem?.timestamp.toLocaleDateString()}
             </DialogDescription>
           </DialogHeader>