Update web/src/components/LeftSidebar.tsx

web/src/components/LeftSidebar.tsx

@@ -1,6 +1,5 @@
 // web/src/components/LeftSidebar.tsx
-import React, { useEffect, useRef, useState } from "react";
-import { LearningModeSelector } from "./LearningModeSelector";
+import React, { useEffect, useState } from "react";
 import { Label } from "./ui/label";
 import { Button } from "./ui/button";
 import { LogIn, Bookmark, Download, Copy } from "lucide-react";
@@ -20,16 +19,10 @@ import type {
 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";
 
-// ✅ NEW: extracted section
+// ✅ extracted section
 import { SavedChatSection } from "./sidebar/SavedChatSection";
 
 interface LeftSidebarProps {
@@ -37,21 +30,26 @@ interface LeftSidebarProps {
   language: Language;
   onLearningModeChange: (mode: LearningMode) => void;
   onLanguageChange: (lang: Language) => void;
+
   spaceType: SpaceType;
   groupMembers: GroupMember[];
+
   user: UserType | null;
   onLogin: (user: UserType) => void;
   onLogout: () => void;
   isLoggedIn: boolean;
   onEditProfile: () => void;
+
   savedItems: SavedItem[];
   recentlySavedId: string | null;
   onUnsave: (id: string) => void;
   onSave: (content: string, type: "export" | "quiz" | "summary") => void;
+
   savedChats: SavedChat[];
   onLoadChat: (chat: SavedChat) => void;
   onDeleteSavedChat: (id: string) => void;
   onRenameSavedChat?: (id: string, newTitle: string) => void;
+
   currentWorkspaceId: string;
   workspaces?: Array<{
     id: string;
@@ -63,6 +61,7 @@ interface LeftSidebarProps {
     isEditable?: boolean;
     name?: string;
   }>;
+
   selectedCourse?: string;
   courses?: Array<{ id: string; name: string }>;
   availableCourses?: CourseInfo[];
@@ -97,12 +96,16 @@ 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 [isDownloading, setIsDownloading] = useState(false);
   const [copied, setCopied] = useState(false);
 
+  const [editableTitle, setEditableTitle] = useState("Untitled");
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+
   const handleLogin = () => {
     if (!name.trim() || !email.trim()) {
       toast.error("Please fill in all fields");
@@ -140,8 +143,7 @@ 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)}`;
   };
 
@@ -240,9 +242,7 @@ export function LeftSidebar({
     setTimeout(() => setCopied(false), 2000);
   };
 
-  const handleUnsaveItem = (id: string) => {
-    onUnsave(id);
-  };
+  const handleUnsaveItem = (id: string) => onUnsave(id);
 
   const isItemSaved = selectedItem
     ? savedItems.some((item) => {
@@ -286,9 +286,6 @@ export function LeftSidebar({
 
   const currentWorkspace = workspaces?.find((w) => w.id === currentWorkspaceId);
 
-  const [editableTitle, setEditableTitle] = useState("Untitled");
-  const [isEditingTitle, setIsEditingTitle] = useState(false);
-
   const getCourseDisplayInfo = () => {
     if (!currentWorkspace) return null;
 
@@ -343,9 +340,9 @@ export function LeftSidebar({
   const courseDisplayInfo = getCourseDisplayInfo();
 
   return (
-    // LeftSidebar itself never scrolls; only Saved list scrolls.
+    // Sidebar itself does NOT scroll; only the Saved Chat list section scrolls.
     <div className="h-full min-h-0 flex flex-col overflow-hidden">
-      {/* Top fixed blocks */}
+      {/* ========== FIXED TOP (no scroll) ========== */}
       {isLoggedIn && courseDisplayInfo && (
         <div className="p-4 border-b border-border flex-shrink-0">
           {courseDisplayInfo.type === "course" ? (
@@ -354,19 +351,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>
@@ -476,14 +467,16 @@ export function LeftSidebar({
         </div>
       )}
 
-      {/* ✅ Saved Chat moved out (only this scrolls) */}
-      <SavedChatSection
-        isLoggedIn={isLoggedIn}
-        savedChats={savedChats}
-        onLoadChat={onLoadChat}
-        onDeleteSavedChat={onDeleteSavedChat}
-        onRenameSavedChat={onRenameSavedChat}
-      />
+      {/* ========== SCROLL AREA (Saved Chats ONLY) ========== */}
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        <SavedChatSection
+          isLoggedIn={isLoggedIn}
+          savedChats={savedChats}
+          onLoadChat={onLoadChat}
+          onDeleteSavedChat={onDeleteSavedChat}
+          onRenameSavedChat={onRenameSavedChat}
+        />
+      </div>
 
       {/* Saved Item Dialog (unchanged) */}
       <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
@@ -491,12 +484,8 @@ 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>