Update web/src/components/LeftSidebar.tsx

web/src/components/LeftSidebar.tsx

@@ -2,12 +2,33 @@ import React, { useState, useRef, useEffect } from 'react';
 import { LearningModeSelector } from './LearningModeSelector';
 import { Label } from './ui/label';
 import { Button } from './ui/button';
-import { LogIn, LogOut, Bookmark, Download, Copy, Search, X, MessageSquare, Trash2, Edit2, Check, X as XIcon } from 'lucide-react';
+import {
+  LogIn,
+  LogOut,
+  Bookmark,
+  Download,
+  Copy,
+  Search,
+  X,
+  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, Message as MessageType } 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';
@@ -20,7 +41,9 @@ import {
 } from './ui/dialog';
 import type { CourseInfo } from '../App';
 
-// Saved Chat Item Component with rename functionality
+// ----------------------------
+// Saved Chat Item Component (rename supported)
+// ----------------------------
 function SavedChatItem({
   chat,
   onLoadChat,
@@ -39,7 +62,6 @@ function SavedChatItem({
   const cancelButtonRef = useRef<HTMLButtonElement>(null);
   const saveButtonRef = useRef<HTMLButtonElement>(null);
 
-  // Update originalTitle when chat.title changes (e.g., from external rename)
   useEffect(() => {
     if (!isEditing) {
       setOriginalTitle(chat.title);
@@ -68,25 +90,20 @@ function SavedChatItem({
   const handleCancelEdit = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    // Reset to original title when canceling
     setEditTitle(originalTitle);
     setIsEditing(false);
-    // Prevent onBlur from firing
-    if (inputRef.current) {
-      inputRef.current.blur();
-    }
+    inputRef.current?.blur();
   };
 
   const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    // Check if the blur is caused by clicking cancel or save button
     const relatedTarget = e.relatedTarget as HTMLElement;
-    if (relatedTarget && (
-      cancelButtonRef.current?.contains(relatedTarget) ||
-      saveButtonRef.current?.contains(relatedTarget)
-    )) {
-      return; // Don't save if clicking cancel or save button
+    if (
+      relatedTarget &&
+      (cancelButtonRef.current?.contains(relatedTarget) ||
+        saveButtonRef.current?.contains(relatedTarget))
+    ) {
+      return;
     }
-    // Save on blur if title changed
     if (editTitle.trim() && editTitle !== originalTitle && onRenameSavedChat) {
       onRenameSavedChat(chat.id, editTitle.trim());
     }
@@ -130,21 +147,20 @@ function SavedChatItem({
                 style={{ height: 'auto' }}
               />
             ) : (
-              <h4 
+              <h4
                 className="text-sm font-medium truncate flex-1 cursor-text"
                 onDoubleClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
                   handleStartEdit(e);
                 }}
-                onClick={(e) => {
-                  e.stopPropagation();
-                }}
+                onClick={(e) => e.stopPropagation()}
                 title="Double click to rename"
               >
                 {chat.title}
               </h4>
             )}
+
             <div className="flex items-center gap-1 flex-shrink-0">
               {isEditing ? (
                 <>
@@ -188,6 +204,7 @@ function SavedChatItem({
                       className="h-5 w-5 flex-shrink-0 hover:bg-muted"
                       onClick={handleStartEdit}
                       title="Rename chat"
+                      type="button"
                     >
                       <Edit2 className="h-3 w-3" />
                     </Button>
@@ -201,6 +218,7 @@ function SavedChatItem({
                       onDeleteSavedChat(chat.id);
                     }}
                     title="Delete chat"
+                    type="button"
                   >
                     <Trash2 className="h-3 w-3" />
                   </Button>
@@ -208,8 +226,10 @@ function SavedChatItem({
               )}
             </div>
           </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' : ''}
@@ -220,6 +240,9 @@ function SavedChatItem({
   );
 }
 
+// ----------------------------
+// LeftSidebar
+// ----------------------------
 interface LeftSidebarProps {
   learningMode: LearningMode;
   language: Language;
@@ -241,7 +264,16 @@ interface LeftSidebarProps {
   onDeleteSavedChat: (id: string) => void;
   onRenameSavedChat?: (id: string, newTitle: string) => void;
   currentWorkspaceId: string;
-  workspaces?: Array<{ id: string; type: SpaceType; category?: 'course' | 'personal'; courseName?: string; courseInfo?: CourseInfo; members?: GroupMember[]; isEditable?: boolean; name?: string }>;
+  workspaces?: Array<{
+    id: string;
+    type: SpaceType;
+    category?: 'course' | 'personal';
+    courseName?: string;
+    courseInfo?: CourseInfo;
+    members?: GroupMember[];
+    isEditable?: boolean;
+    name?: string;
+  }>;
   selectedCourse?: string;
   courses?: Array<{ id: string; name: string }>;
   availableCourses?: CourseInfo[];
@@ -276,17 +308,25 @@ export function LeftSidebar({
   const [showLoginForm, setShowLoginForm] = useState(false);
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
+
   const [selectedItem, setSelectedItem] = useState<SavedItem | null>(null);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+
   const [showSearch, setShowSearch] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
 
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  // personal workspace title
+  const [editableTitle, setEditableTitle] = useState('Untitled');
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+
   const handleLogin = () => {
     if (!name.trim() || !email.trim()) {
       toast.error('Please fill in all fields');
       return;
     }
-
     onLogin({ name: name.trim(), email: email.trim() });
     setShowLoginForm(false);
     setName('');
@@ -300,10 +340,6 @@ export function LeftSidebar({
     toast.success('Logged out successfully');
   };
 
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const [isDownloading, setIsDownloading] = useState(false);
-  const [copied, setCopied] = useState(false);
-
   const downloadBlob = (blob: Blob, filename: string) => {
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
@@ -361,9 +397,8 @@ export function LeftSidebar({
         }
         return new Paragraph({ children: [new TextRun({ text: line })] });
       });
-      const doc = new Document({
-        sections: [{ properties: {}, children: paragraphs }],
-      });
+
+      const doc = new Document({ sections: [{ properties: {}, children: paragraphs }] });
       const blob = await Packer.toBlob(doc);
       downloadBlob(blob, `${getDefaultFilenameBase(item)}.docx`);
       toast.success('Downloaded .docx');
@@ -397,8 +432,7 @@ export function LeftSidebar({
         y += lineHeight;
       });
 
-      const filenameBase = getDefaultFilenameBase(item);
-      doc.save(`${filenameBase}.pdf`);
+      doc.save(`${getDefaultFilenameBase(item)}.pdf`);
       toast.success('Downloaded .pdf');
     } catch (e) {
       console.error(e);
@@ -417,28 +451,22 @@ export function LeftSidebar({
 
   const handleUnsaveItem = (id: string) => {
     onUnsave(id);
-    // Don't close the dialog when unsaving - keep the window open
   };
 
-  // Check if selectedItem is still in savedItems (by id if it has one, or by content+type)
-  const isItemSaved = selectedItem 
-    ? savedItems.some(item => {
-        // First try to match by id if selectedItem has one
+  // selected item still saved?
+  const isItemSaved = selectedItem
+    ? savedItems.some((item) => {
         if (selectedItem.id && item.id === selectedItem.id) return true;
-        // Otherwise match by content and type
         return item.content === selectedItem.content && item.type === selectedItem.type;
       })
     : false;
 
-  // Update selectedItem when savedItems changes (e.g., after saving)
   useEffect(() => {
     if (selectedItem && isDialogOpen) {
-      // Find the item in savedItems by content and type
-      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) {
-        // Update selectedItem to have the correct id from savedItems (only if id changed)
         setSelectedItem(updatedItem);
       }
     }
@@ -447,63 +475,33 @@ export function LeftSidebar({
 
   const handleToggleSave = () => {
     if (!selectedItem) return;
-    
+
     if (isItemSaved) {
-      // Unsave the item - find it by id or content+type
-      const itemToUnsave = savedItems.find(item => 
-        (selectedItem.id && item.id === selectedItem.id) || 
-        (item.content === selectedItem.content && item.type === selectedItem.type)
+      const itemToUnsave = savedItems.find(
+        (item) =>
+          (selectedItem.id && item.id === selectedItem.id) ||
+          (item.content === selectedItem.content && item.type === selectedItem.type)
       );
-      if (itemToUnsave) {
-        handleUnsaveItem(itemToUnsave.id);
-      }
+      if (itemToUnsave) handleUnsaveItem(itemToUnsave.id);
     } else {
-      // Save the item
       onSave(selectedItem.content, selectedItem.type);
     }
   };
 
-  // Filter saved items based on search query
-  const filteredSavedItems = savedItems.filter(item => {
-    if (!searchQuery.trim()) return true;
-    const query = searchQuery.toLowerCase();
-    return (
-      item.title.toLowerCase().includes(query) ||
-      item.content.toLowerCase().includes(query) ||
-      item.type.toLowerCase().includes(query)
-    );
-  }).filter(item => item.workspaceId === currentWorkspaceId);
-
-  // Use native event listeners to prevent scroll propagation
-  useEffect(() => {
-    const container = scrollContainerRef.current;
-    if (!container) return;
-
-    const handleWheel = (e: WheelEvent) => {
-      // Always stop propagation to prevent scrolling other panels
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-      
-      // Only prevent default if we're at the boundaries
-      const { scrollTop, scrollHeight, clientHeight } = container;
-      const isScrollable = scrollHeight > clientHeight;
-      const isAtTop = scrollTop === 0;
-      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
-
-      // If scrolling up at top or down at bottom, prevent default to stop propagation
-      if (isScrollable && ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0))) {
-        e.preventDefault();
-      }
-    };
-
-    container.addEventListener('wheel', handleWheel, { passive: false, capture: true });
-    
-    return () => {
-      container.removeEventListener('wheel', handleWheel, { capture: true });
-    };
-  }, []);
+  // Filter saved items based on search query + workspaceId
+  const filteredSavedItems = savedItems
+    .filter((item) => item.workspaceId === currentWorkspaceId)
+    .filter((item) => {
+      if (!searchQuery.trim()) return true;
+      const q = searchQuery.toLowerCase();
+      return (
+        item.title.toLowerCase().includes(q) ||
+        item.content.toLowerCase().includes(q) ||
+        item.type.toLowerCase().includes(q)
+      );
+    });
 
-  // Sample courses - same as ChatArea
+  // Courses
   const defaultCourses = [
     { id: 'course1', name: 'Introduction to AI' },
     { id: 'course2', name: 'Machine Learning' },
@@ -512,18 +510,12 @@ export function LeftSidebar({
   ];
   const coursesList = courses.length > 0 ? courses : defaultCourses;
 
-  // Get current workspace
-  const currentWorkspace = workspaces?.find(w => w.id === currentWorkspaceId);
-  
-  // State for editable workspace title (for personal interest workspaces)
-  const [editableTitle, setEditableTitle] = useState('Untitled');
-  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  // Current workspace display info
+  const currentWorkspace = workspaces?.find((w) => w.id === currentWorkspaceId);
 
-  // Determine what to display based on workspace type
   const getCourseDisplayInfo = () => {
     if (!currentWorkspace) return null;
-    
-    // Group workspace with course
+
     if (currentWorkspace.type === 'group' && currentWorkspace.category === 'course') {
       if (currentWorkspace.courseInfo) {
         return {
@@ -533,7 +525,6 @@ export function LeftSidebar({
           teachingAssistant: currentWorkspace.courseInfo.teachingAssistant,
         };
       }
-      // Fallback if courseInfo is missing
       return {
         type: 'course' as const,
         name: currentWorkspace.courseName || 'Unknown Course',
@@ -541,8 +532,7 @@ export function LeftSidebar({
         teachingAssistant: { name: 'Unknown', email: '' },
       };
     }
-    
-    // Group workspace with personal interest
+
     if (currentWorkspace.type === 'group' && currentWorkspace.category === 'personal') {
       return {
         type: 'personal' as const,
@@ -550,11 +540,10 @@ export function LeftSidebar({
         members: currentWorkspace.members || [],
       };
     }
-    
-    // Individual workspace (My Space)
+
     if (currentWorkspace.type === 'individual') {
       const saved = selectedCourse || localStorage.getItem('myspace_selected_course') || 'course1';
-      const courseInfo = availableCourses?.find(c => c.id === saved);
+      const courseInfo = availableCourses?.find((c) => c.id === saved);
       if (courseInfo) {
         return {
           type: 'course' as const,
@@ -563,7 +552,7 @@ export function LeftSidebar({
           teachingAssistant: courseInfo.teachingAssistant,
         };
       }
-      const course = coursesList.find(c => c.id === saved);
+      const course = coursesList.find((c) => c.id === saved);
       return {
         type: 'course' as const,
         name: course?.name || saved,
@@ -571,18 +560,16 @@ export function LeftSidebar({
         teachingAssistant: { name: 'Unknown', email: '' },
       };
     }
-    
+
     return null;
   };
 
   const courseDisplayInfo = getCourseDisplayInfo();
 
   return (
-    <div 
-      ref={scrollContainerRef}
-      className="flex-1 overflow-auto overscroll-contain flex flex-col" 
-      style={{ overscrollBehavior: 'contain' }}
-    >
+    // ✅ IMPORTANT: LeftSidebar root should NOT be scroll container.
+    // The scroll container is provided by App.tsx wrapper: <div className="flex-1 min-h-0 overflow-y-auto">.
+    <div className="flex flex-col h-full min-h-0">
       {/* Course Information Section */}
       {isLoggedIn && courseDisplayInfo && (
         <div className="p-4 border-b border-border flex-shrink-0">
@@ -592,19 +579,13 @@ 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>
@@ -612,7 +593,6 @@ export function LeftSidebar({
             </>
           ) : (
             <>
-              {/* Personal Interest Workspace - Editable Title */}
               <div className="mb-4">
                 {isEditingTitle ? (
                   <Input
@@ -620,18 +600,13 @@ export function LeftSidebar({
                     onChange={(e) => setEditableTitle(e.target.value)}
                     onBlur={() => setIsEditingTitle(false)}
                     onKeyDown={(e) => {
-                      if (e.key === 'Enter') {
-                        setIsEditingTitle(false);
-                      }
+                      if (e.key === 'Enter') setIsEditingTitle(false);
                     }}
                     autoFocus
                     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>
                 )}
@@ -641,10 +616,7 @@ export function LeftSidebar({
                 {courseDisplayInfo.members.map((member, idx) => (
                   <div key={member.id}>
                     <span className="text-muted-foreground">{idx === 0 ? 'Creator: ' : 'Member: '}</span>
-                    <a 
-                      href={`mailto:${member.email}`}
-                      className="text-primary hover:underline"
-                    >
+                    <a href={`mailto:${member.email}`} className="text-primary hover:underline">
                       {member.name}
                     </a>
                   </div>
@@ -655,7 +627,7 @@ export function LeftSidebar({
         </div>
       )}
 
-      {/* Login Section - Only show when not logged in */}
+      {/* Login Section */}
       {!isLoggedIn && (
         <div className="p-4 border-b border-border flex-shrink-0">
           <h3 className="text-base font-medium mb-4">Login</h3>
@@ -682,33 +654,15 @@ 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>
-                    <Input
-                      id="email"
-                      type="email"
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                      placeholder="Enter your email or ID"
-                    />
+                    <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Enter your email or ID" />
                   </div>
                   <div className="flex gap-2">
-                    <Button onClick={handleLogin} className="flex-1">
-                      Enter
-                    </Button>
-                    <Button
-                      variant="outline"
-                      onClick={() => setShowLoginForm(false)}
-                    >
-                      Cancel
-                    </Button>
+                    <Button onClick={handleLogin} className="flex-1">Enter</Button>
+                    <Button variant="outline" onClick={() => setShowLoginForm(false)}>Cancel</Button>
                   </div>
                 </div>
               )}
@@ -717,17 +671,18 @@ export function LeftSidebar({
         </div>
       )}
 
-      {/* Group Members - Only show in group mode */}
+      {/* Group members */}
       {spaceType === 'group' && (
         <div className="p-4 border-b border-border flex-shrink-0">
           <GroupMembers members={groupMembers} />
         </div>
       )}
 
-      {/* Saved Chat Section - Above Saved Files */}
+      {/* ✅ Saved Chat Section: only the list scrolls */}
       {isLoggedIn && (
         <div className="border-b border-border p-4 flex-1 min-h-0 flex flex-col">
           <h3 className="text-base font-medium mb-4 flex-shrink-0">Saved Chat</h3>
+
           {savedChats.length === 0 ? (
             <div className="text-sm text-muted-foreground text-center py-4 flex-shrink-0">
               <MessageSquare className="h-8 w-8 mx-auto mb-2 opacity-50" />
@@ -735,7 +690,10 @@ export function LeftSidebar({
               <p className="text-xs mt-1">Save conversations to view them here</p>
             </div>
           ) : (
-            <div className="space-y-2 overflow-y-auto flex-1 min-h-0">
+            <div
+              className="space-y-2 overflow-y-auto flex-1 min-h-0"
+              style={{ overscrollBehavior: 'contain' }}
+            >
               {savedChats.map((chat) => (
                 <div key={chat.id}>
                   <SavedChatItem
@@ -757,9 +715,11 @@ export function LeftSidebar({
           <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>
+
           <div className="flex flex-col flex-1 min-h-0 space-y-4 mt-4">
             {selectedItem && (
               <>
@@ -775,6 +735,7 @@ export function LeftSidebar({
                     <Download className="h-3 w-3" />
                     .md
                   </Button>
+
                   <Button
                     variant="outline"
                     size="sm"
@@ -786,6 +747,7 @@ export function LeftSidebar({
                     <Download className="h-3 w-3" />
                     .docx
                   </Button>
+
                   {selectedItem.format === 'pdf' && (
                     <Button
                       variant="outline"
@@ -799,6 +761,7 @@ export function LeftSidebar({
                       .pdf
                     </Button>
                   )}
+
                   <Button
                     variant="outline"
                     size="sm"
@@ -809,6 +772,7 @@ export function LeftSidebar({
                   >
                     <Copy className={`h-3 w-3 ${copied ? 'text-green-600' : ''}`} />
                   </Button>
+
                   <Button
                     variant="outline"
                     size="sm"
@@ -820,7 +784,9 @@ export function LeftSidebar({
                     <Bookmark className={`h-3 w-3 ${isItemSaved ? 'fill-red-600 text-red-600' : ''}`} />
                   </Button>
                 </div>
+
                 <Separator className="flex-shrink-0" />
+
                 <div className="text-sm whitespace-pre-wrap text-foreground overflow-y-auto flex-1 min-h-0">
                   {selectedItem.content}
                 </div>