Update web/src/components/LeftSidebar.tsx

web/src/components/LeftSidebar.tsx

@@ -1,818 +1,487 @@
 // web/src/components/LeftSidebar.tsx
-import React, { useEffect, useRef, useState } from "react";
-import { LearningModeSelector } from "./LearningModeSelector";
-import { Label } from "./ui/label";
+import React, { useMemo, useState } from "react";
 import { Button } from "./ui/button";
+import { Card } from "./ui/card";
+import { Separator } from "./ui/separator";
+import { Label } from "./ui/label";
+import { Input } from "./ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
 import {
-  LogIn,
+  LogOut,
+  User as UserIcon,
+  BookOpen,
+  Languages,
+  GraduationCap,
+  Users,
   Bookmark,
-  Download,
-  Copy,
   MessageSquare,
   Trash2,
-  Edit2,
+  Pencil,
   Check,
-  X as XIcon,
+  X,
 } 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,
+  User,
   SavedItem,
   SavedChat,
+  Workspace,
+  CourseInfo,
 } 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 type { CourseInfo } from "../App";
-
-// ================================
-// Saved Chat Item (unchanged)
-// ================================
-function SavedChatItem({
-  chat,
-  onLoadChat,
-  onDeleteSavedChat,
-  onRenameSavedChat,
-}: {
-  chat: SavedChat;
-  onLoadChat: (chat: SavedChat) => void;
-  onDeleteSavedChat: (id: string) => void;
-  onRenameSavedChat?: (id: string, newTitle: string) => void;
-}) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [editTitle, setEditTitle] = useState(chat.title);
-  const [originalTitle, setOriginalTitle] = useState(chat.title);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const cancelButtonRef = useRef<HTMLButtonElement>(null);
-  const saveButtonRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    if (!isEditing) {
-      setOriginalTitle(chat.title);
-      setEditTitle(chat.title);
-    }
-  }, [chat.title, isEditing]);
-
-  const handleStartEdit = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setOriginalTitle(chat.title);
-    setEditTitle(chat.title);
-    setIsEditing(true);
-    setTimeout(() => inputRef.current?.focus(), 0);
-  };
-
-  const handleSaveEdit = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (editTitle.trim() && onRenameSavedChat) {
-      onRenameSavedChat(chat.id, editTitle.trim());
-      setIsEditing(false);
-    }
-  };
-
-  const handleCancelEdit = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setEditTitle(originalTitle);
-    setIsEditing(false);
-    inputRef.current?.blur();
-  };
-
-  const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    const relatedTarget = e.relatedTarget as HTMLElement;
-    if (
-      relatedTarget &&
-      (cancelButtonRef.current?.contains(relatedTarget) ||
-        saveButtonRef.current?.contains(relatedTarget))
-    ) {
-      return;
-    }
-    if (editTitle.trim() && editTitle !== originalTitle && onRenameSavedChat) {
-      onRenameSavedChat(chat.id, editTitle.trim());
-    }
-    setIsEditing(false);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      e.stopPropagation();
-      if (editTitle.trim() && onRenameSavedChat) {
-        onRenameSavedChat(chat.id, editTitle.trim());
-        setIsEditing(false);
-      }
-    } else if (e.key === "Escape") {
-      e.preventDefault();
-      e.stopPropagation();
-      setEditTitle(originalTitle);
-      setIsEditing(false);
-    }
-  };
-
-  return (
-    <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">
-          <div className="flex items-start justify-between gap-2">
-            {isEditing ? (
-              <Input
-                ref={inputRef}
-                value={editTitle}
-                onChange={(e) => setEditTitle(e.target.value)}
-                onKeyDown={handleKeyDown}
-                onClick={(e) => e.stopPropagation()}
-                onBlur={handleInputBlur}
-                className="h-auto text-sm font-medium px-2 py-1 border border-border bg-background focus-visible:ring-2 focus-visible:ring-ring flex-1"
-                style={{ height: "auto" }}
-              />
-            ) : (
-              <h4
-                className="text-sm font-medium truncate flex-1 cursor-text"
-                onDoubleClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  handleStartEdit(e);
-                }}
-                onClick={(e) => e.stopPropagation()}
-                title="Double click to rename"
-              >
-                {chat.title}
-              </h4>
-            )}
-
-            <div className="flex items-center gap-1 flex-shrink-0">
-              {isEditing ? (
-                <>
-                  <Button
-                    ref={saveButtonRef}
-                    variant="ghost"
-                    size="icon"
-                    className="h-5 w-5 flex-shrink-0 hover:bg-green-500/20"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleSaveEdit(e);
-                    }}
-                    title="Save"
-                    type="button"
-                  >
-                    <Check className="h-3 w-3" />
-                  </Button>
-                  <Button
-                    ref={cancelButtonRef}
-                    variant="ghost"
-                    size="icon"
-                    className="h-5 w-5 flex-shrink-0 hover:bg-destructive/20"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleCancelEdit(e);
-                    }}
-                    title="Cancel"
-                    type="button"
-                  >
-                    <XIcon className="h-3 w-3" />
-                  </Button>
-                </>
-              ) : (
-                <>
-                  {onRenameSavedChat && (
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-5 w-5 flex-shrink-0 hover:bg-muted"
-                      onClick={handleStartEdit}
-                      title="Rename chat"
-                    >
-                      <Edit2 className="h-3 w-3" />
-                    </Button>
-                  )}
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-5 w-5 flex-shrink-0 hover:bg-destructive/20"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onDeleteSavedChat(chat.id);
-                    }}
-                    title="Delete chat"
-                  >
-                    <Trash2 className="h-3 w-3" />
-                  </Button>
-                </>
-              )}
-            </div>
-          </div>
-
-          <p className="text-xs text-muted-foreground mt-1">
-            {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" : ""}
-          </p>
-        </div>
-      </div>
-    </Card>
-  );
-}
 
-interface LeftSidebarProps {
+type Props = {
   learningMode: LearningMode;
   language: Language;
-  onLearningModeChange: (mode: LearningMode) => void;
-  onLanguageChange: (lang: Language) => void;
+  onLearningModeChange: (m: LearningMode) => void;
+  onLanguageChange: (l: Language) => void;
+
   spaceType: SpaceType;
   groupMembers: GroupMember[];
-  user: UserType | null;
-  onLogin: (user: UserType) => void;
+
+  user: User | null;
+  onLogin: (u: User | null) => void;
   onLogout: () => void;
   isLoggedIn: boolean;
-  onEditProfile: () => void;
+
+  onEditProfile?: () => void;
+
   savedItems: SavedItem[];
   recentlySavedId: string | null;
   onUnsave: (id: string) => void;
-  onSave: (content: string, type: "export" | "quiz" | "summary") => void;
+  onSave: (
+    content: string,
+    type: "export" | "quiz" | "summary",
+    saveAsChat?: boolean,
+    format?: "pdf" | "text",
+    workspaceId?: string
+  ) => void;
+
   savedChats: SavedChat[];
-  onLoadChat: (chat: SavedChat) => void;
+  onLoadChat: (c: SavedChat) => void;
   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;
-  }>;
-  selectedCourse?: string;
-  courses?: Array<{ id: string; name: string }>;
-  availableCourses?: CourseInfo[];
+  workspaces: Workspace[];
+
+  selectedCourse: string;
+  availableCourses: CourseInfo[];
+};
+
+const LEARNING_MODE_OPTIONS: Array<{ value: LearningMode; label: string }> = [
+  { value: "general", label: "General" },
+  { value: "concept", label: "Concept" },
+  { value: "socratic", label: "Socratic" },
+  { value: "exam", label: "Exam" },
+  { value: "assignment", label: "Assignment" },
+  { value: "summary", label: "Summary" },
+];
+
+const LANGUAGE_OPTIONS: Array<{ value: Language; label: string }> = [
+  { value: "auto", label: "Auto" },
+  { value: "en", label: "English" },
+  { value: "zh", label: "中文" },
+];
+
+function formatWhen(d: Date) {
+  try {
+    return new Date(d).toLocaleString();
+  } catch {
+    return "";
+  }
 }
 
-export function LeftSidebar({
-  learningMode,
-  language,
-  onLearningModeChange,
-  onLanguageChange,
-  spaceType,
-  groupMembers,
-  user,
-  onLogin,
-  onLogout,
-  isLoggedIn,
-  onEditProfile,
-  savedItems,
-  recentlySavedId,
-  onUnsave,
-  onSave,
-  savedChats,
-  onLoadChat,
-  onDeleteSavedChat,
-  onRenameSavedChat,
-  currentWorkspaceId,
-  workspaces = [],
-  selectedCourse,
-  courses = [],
-  availableCourses = [],
-}: LeftSidebarProps) {
-  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 savedScrollRef = useRef<HTMLDivElement>(null);
-
-  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("");
-    setEmail("");
-    toast.success(`Welcome, ${name}!`);
-  };
-
-  const handleLogout = () => {
-    onLogout();
-    setShowLoginForm(false);
-    toast.success("Logged out successfully");
-  };
+export function LeftSidebar(props: Props) {
+  const {
+    learningMode,
+    language,
+    onLearningModeChange,
+    onLanguageChange,
+    spaceType,
+    groupMembers,
+    user,
+    onLogout,
+    isLoggedIn,
+    onEditProfile,
+    savedItems,
+    recentlySavedId,
+    onUnsave,
+    savedChats,
+    onLoadChat,
+    onDeleteSavedChat,
+    onRenameSavedChat,
+    currentWorkspaceId,
+    workspaces,
+    selectedCourse,
+    availableCourses,
+  } = props;
+
+  const currentWorkspace = useMemo(
+    () => workspaces.find((w) => w.id === currentWorkspaceId),
+    [workspaces, currentWorkspaceId]
+  );
 
-  const downloadBlob = (blob: Blob, filename: string) => {
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = filename;
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    URL.revokeObjectURL(url);
-  };
+  const workspaceSavedItems = useMemo(
+    () => savedItems.filter((x) => x.workspaceId === currentWorkspaceId),
+    [savedItems, currentWorkspaceId]
+  );
 
-  const formatDateStamp = (date: Date) => {
-    const yyyy = date.getFullYear();
-    const mm = String(date.getMonth() + 1).padStart(2, "0");
-    const dd = String(date.getDate()).padStart(2, "0");
-    return `${yyyy}-${mm}-${dd}`;
-  };
+  const [renameId, setRenameId] = useState<string | null>(null);
+  const [renameDraft, setRenameDraft] = useState<string>("");
 
-  const getDefaultFilenameBase = (item: SavedItem) => {
-    const kind =
-      item.type === "export" ? "export" : item.type === "summary" ? "summary" : "quiz";
-    return `clare-${kind}-${formatDateStamp(item.timestamp)}`;
+  const beginRename = (chat: SavedChat) => {
+    setRenameId(chat.id);
+    setRenameDraft(chat.title);
   };
 
-  const handleDownloadMd = async (item: SavedItem) => {
-    try {
-      setIsDownloading(true);
-      toast.message("Preparing .md…");
-      const blob = new Blob([item.content], { type: "text/markdown;charset=utf-8" });
-      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 {
-      setIsDownloading(false);
-    }
+  const commitRename = () => {
+    if (!renameId) return;
+    const t = renameDraft.trim();
+    if (!t) return;
+    onRenameSavedChat?.(renameId, t);
+    setRenameId(null);
+    setRenameDraft("");
   };
 
-  const handleDownloadDocx = async (item: SavedItem) => {
-    try {
-      setIsDownloading(true);
-      toast.message("Preparing .docx…");
-      const lines = item.content.split("\n");
-      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,
-          });
-        return new Paragraph({ children: [new TextRun({ text: line })] });
-      });
-
-      const doc = new Document({ sections: [{ properties: {}, children: paragraphs }] });
-      const blob = await Packer.toBlob(doc);
-      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 {
-      setIsDownloading(false);
-    }
+  const cancelRename = () => {
+    setRenameId(null);
+    setRenameDraft("");
   };
 
-  const handleDownloadPdf = async (item: SavedItem) => {
-    try {
-      setIsDownloading(true);
-      toast.message("Preparing .pdf…");
-      const doc = new jsPDF({ unit: "pt", format: "a4" });
-      const pageWidth = doc.internal.pageSize.getWidth();
-      const pageHeight = doc.internal.pageSize.getHeight();
-      const margin = 40;
-      const contentWidth = pageWidth - margin * 2;
-      const lineHeight = 16;
-
-      const lines = doc.splitTextToSize(item.content, contentWidth);
-      let y = margin;
-      lines.forEach((line) => {
-        if (y + lineHeight > pageHeight - margin) {
-          doc.addPage();
-          y = margin;
-        }
-        doc.text(line, margin, y);
-        y += lineHeight;
-      });
-
-      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 {
-      setIsDownloading(false);
-    }
-  };
+  return (
+    <div className="col min-h-0 flex-1 overflow-hidden">
+      {/* Fixed top section */}
+      <div className="colFixed p-4 space-y-3">
+        {/* User card */}
+        <Card className="p-3">
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2 min-w-0">
+              <div className="h-9 w-9 rounded-full bg-muted flex items-center justify-center flex-shrink-0">
+                <UserIcon className="h-4 w-4" />
+              </div>
+              <div className="min-w-0">
+                <div className="text-sm font-medium truncate">
+                  {user?.name || "User"}
+                </div>
+                <div className="text-xs text-muted-foreground truncate">
+                  {user?.email || ""}
+                </div>
+              </div>
+            </div>
 
-  const handleCopy = async (content: string) => {
-    await navigator.clipboard.writeText(content);
-    setCopied(true);
-    toast.success("Copied to clipboard!");
-    setTimeout(() => setCopied(false), 2000);
-  };
+            <div className="flex items-center gap-1">
+              {onEditProfile && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={onEditProfile}
+                  title="Edit profile"
+                >
+                  <Pencil className="h-4 w-4" />
+                </Button>
+              )}
+              {isLoggedIn && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={onLogout}
+                  title="Logout"
+                >
+                  <LogOut className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+          </div>
+        </Card>
 
-  const handleUnsaveItem = (id: string) => {
-    onUnsave(id);
-  };
+        {/* Settings */}
+        <Card className="p-3 space-y-3">
+          <div className="flex items-center gap-2">
+            <BookOpen className="h-4 w-4" />
+            <div className="text-sm font-medium">Learning</div>
+          </div>
 
-  const isItemSaved = selectedItem
-    ? savedItems.some((item) => {
-        if (selectedItem.id && item.id === selectedItem.id) return true;
-        return item.content === selectedItem.content && item.type === selectedItem.type;
-      })
-    : false;
-
-  useEffect(() => {
-    if (selectedItem && isDialogOpen) {
-      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
-  }, [savedItems, isDialogOpen]);
-
-  const handleToggleSave = () => {
-    if (!selectedItem) return;
-
-    if (isItemSaved) {
-      const itemToUnsave = savedItems.find(
-        (item) =>
-          (selectedItem.id && item.id === selectedItem.id) ||
-          (item.content === selectedItem.content && item.type === selectedItem.type)
-      );
-      if (itemToUnsave) handleUnsaveItem(itemToUnsave.id);
-    } else {
-      onSave(selectedItem.content, selectedItem.type);
-    }
-  };
+          <div className="space-y-1.5">
+            <Label className="text-xs">Learning Mode</Label>
+            <Select
+              value={learningMode}
+              onValueChange={(v) => onLearningModeChange(v as LearningMode)}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select mode" />
+              </SelectTrigger>
+              <SelectContent>
+                {LEARNING_MODE_OPTIONS.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
 
-  const defaultCourses = [
-    { id: "course1", name: "Introduction to AI" },
-    { id: "course2", name: "Machine Learning" },
-    { id: "course3", name: "Data Structures" },
-    { id: "course4", name: "Web Development" },
-  ];
-  const coursesList = courses.length > 0 ? courses : defaultCourses;
-
-  const currentWorkspace = workspaces?.find((w) => w.id === currentWorkspaceId);
-
-  const [editableTitle, setEditableTitle] = useState("Untitled");
-  const [isEditingTitle, setIsEditingTitle] = useState(false);
-
-  const getCourseDisplayInfo = () => {
-    if (!currentWorkspace) return null;
-
-    if (currentWorkspace.type === "group" && currentWorkspace.category === "course") {
-      if (currentWorkspace.courseInfo) {
-        return {
-          type: "course" as const,
-          name: currentWorkspace.courseInfo.name,
-          instructor: currentWorkspace.courseInfo.instructor,
-          teachingAssistant: currentWorkspace.courseInfo.teachingAssistant,
-        };
-      }
-      return {
-        type: "course" as const,
-        name: currentWorkspace.courseName || "Unknown Course",
-        instructor: { name: "Unknown", email: "" },
-        teachingAssistant: { name: "Unknown", email: "" },
-      };
-    }
-
-    if (currentWorkspace.type === "group" && currentWorkspace.category === "personal") {
-      return {
-        type: "personal" as const,
-        name: editableTitle,
-        members: currentWorkspace.members || [],
-      };
-    }
-
-    if (currentWorkspace.type === "individual") {
-      const saved = selectedCourse || localStorage.getItem("myspace_selected_course") || "course1";
-      const courseInfo = availableCourses?.find((c) => c.id === saved);
-      if (courseInfo) {
-        return {
-          type: "course" as const,
-          name: courseInfo.name,
-          instructor: courseInfo.instructor,
-          teachingAssistant: courseInfo.teachingAssistant,
-        };
-      }
-      const course = coursesList.find((c) => c.id === saved);
-      return {
-        type: "course" as const,
-        name: course?.name || saved,
-        instructor: { name: "Unknown", email: "" },
-        teachingAssistant: { name: "Unknown", email: "" },
-      };
-    }
-
-    return null;
-  };
+          <div className="space-y-1.5">
+            <div className="flex items-center gap-2">
+              <Languages className="h-4 w-4" />
+              <Label className="text-xs">Language</Label>
+            </div>
+            <Select
+              value={language}
+              onValueChange={(v) => onLanguageChange(v as Language)}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select language" />
+              </SelectTrigger>
+              <SelectContent>
+                {LANGUAGE_OPTIONS.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
 
-  const courseDisplayInfo = getCourseDisplayInfo();
+          {/* Optional: course indicator (for course workspaces) */}
+          {currentWorkspace?.category === "course" && (
+            <div className="space-y-1.5">
+              <div className="flex items-center gap-2">
+                <GraduationCap className="h-4 w-4" />
+                <Label className="text-xs">Course</Label>
+              </div>
+              <div className="text-xs text-muted-foreground">
+                {currentWorkspace.courseName || currentWorkspace.courseInfo?.name || "Course"}
+              </div>
+              {currentWorkspace.courseInfo?.instructor?.name && (
+                <div className="text-xs text-muted-foreground">
+                  Instructor: {currentWorkspace.courseInfo.instructor.name}
+                </div>
+              )}
+            </div>
+          )}
 
-  return (
-    // 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 && (
-        <div className="p-4 border-b border-border flex-shrink-0">
-          {courseDisplayInfo.type === "course" ? (
+          {spaceType === "group" && (
             <>
-              <h3 className="text-base font-semibold mb-4">{courseDisplayInfo.name}</h3>
-              <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"
-                  >
-                    {courseDisplayInfo.instructor.name}
-                  </a>
+              <Separator />
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <Users className="h-4 w-4" />
+                  <div className="text-sm font-medium">Members</div>
                 </div>
-                <div>
-                  <span className="text-muted-foreground">TA: </span>
-                  <a
-                    href={`mailto:${courseDisplayInfo.teachingAssistant.email}`}
-                    className="text-primary hover:underline"
-                  >
-                    {courseDisplayInfo.teachingAssistant.name}
-                  </a>
+                <div className="space-y-2">
+                  {groupMembers.map((m) => (
+                    <div
+                      key={m.id}
+                      className="flex items-center justify-between gap-2"
+                    >
+                      <div className="min-w-0">
+                        <div className="text-xs font-medium truncate">
+                          {m.name}
+                          {m.isAI ? " (AI)" : ""}
+                        </div>
+                        <div className="text-[11px] text-muted-foreground truncate">
+                          {m.email}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
                 </div>
               </div>
             </>
-          ) : (
-            <>
-              <div className="mb-4">
-                {isEditingTitle ? (
-                  <Input
-                    value={editableTitle}
-                    onChange={(e) => setEditableTitle(e.target.value)}
-                    onBlur={() => setIsEditingTitle(false)}
-                    onKeyDown={(e) => {
-                      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)}
-                  >
-                    {editableTitle}
-                  </h3>
-                )}
+          )}
+        </Card>
+      </div>
+
+      {/* Scrollable content (ONLY this scrolls in LeftSidebar) */}
+      <div className="colFlex min-h-0 overflow-hidden">
+        <div className="panelScroll flex-1 min-h-0 p-4 space-y-4">
+          {/* Saved Items */}
+          <Card className="p-3">
+            <div className="flex items-center gap-2 mb-2">
+              <Bookmark className="h-4 w-4" />
+              <div className="text-sm font-medium">Saved</div>
+              <div className="ml-auto text-xs text-muted-foreground">
+                {workspaceSavedItems.length}
               </div>
+            </div>
 
-              <div className="space-y-2 text-sm">
-                <div className="text-muted-foreground mb-2">Members:</div>
-                {courseDisplayInfo.members.map((member: any, idx: number) => (
-                  <div key={member.id}>
-                    <span className="text-muted-foreground">{idx === 0 ? "Creator: " : "Member: "}</span>
-                    <a href={`mailto:${member.email}`} className="text-primary hover:underline">
-                      {member.name}
-                    </a>
-                  </div>
-                ))}
+            {workspaceSavedItems.length === 0 ? (
+              <div className="text-xs text-muted-foreground">
+                No saved items in this workspace yet.
               </div>
-            </>
-          )}
-        </div>
-      )}
-
-      {!isLoggedIn && (
-        <div className="p-4 border-b border-border flex-shrink-0">
-          <h3 className="text-base font-medium mb-4">Login</h3>
-          <Card className="p-4">
-            <div className="space-y-4">
-              <div className="flex flex-col items-center py-4">
-                <img
-                  src="https://images.unsplash.com/photo-1588912914049-d2664f76a947?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzdHVkZW50JTIwc3R1ZHlpbmclMjBpbGx1c3RyYXRpb258ZW58MXx8fHwxNzY2MDY2NjcyfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
-                  alt="Student studying"
-                  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>
+            ) : (
+              <div className="space-y-2">
+                {workspaceSavedItems.map((it) => {
+                  const highlight = recentlySavedId && recentlySavedId === it.id;
+                  return (
+                    <div
+                      key={it.id}
+                      className={[
+                        "rounded-md border border-border p-2",
+                        highlight ? "ring-2 ring-ring/30" : "",
+                      ].join(" ")}
+                    >
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="min-w-0">
+                          <div className="text-xs font-medium truncate">
+                            {it.title}
+                          </div>
+                          <div className="text-[11px] text-muted-foreground">
+                            {formatWhen(it.timestamp)}
+                          </div>
+                          <div className="text-[11px] text-muted-foreground">
+                            Type: {it.type}
+                            {it.format ? ` · ${it.format}` : ""}
+                          </div>
+                        </div>
+
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => onUnsave(it.id)}
+                          title="Remove"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  );
+                })}
               </div>
-
-              {!showLoginForm ? (
-                <Button onClick={() => setShowLoginForm(true)} className="w-full gap-2">
-                  <LogIn className="h-4 w-4" />
-                  Student Login
-                </Button>
-              ) : (
-                <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"
-                    />
-                  </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"
-                    />
-                  </div>
-                  <div className="flex gap-2">
-                    <Button onClick={handleLogin} className="flex-1">
-                      Enter
-                    </Button>
-                    <Button variant="outline" onClick={() => setShowLoginForm(false)}>
-                      Cancel
-                    </Button>
-                  </div>
-                </div>
-              )}
-            </div>
+            )}
           </Card>
-        </div>
-      )}
-
-      {spaceType === "group" && (
-        <div className="p-4 border-b border-border flex-shrink-0">
-          <GroupMembers members={groupMembers} />
-        </div>
-      )}
 
-      {/* 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">
-            <h3 className="text-base font-medium">Saved Chat</h3>
-          </div>
+          {/* Saved Chats */}
+          <Card className="p-3">
+            <div className="flex items-center gap-2 mb-2">
+              <MessageSquare className="h-4 w-4" />
+              <div className="text-sm font-medium">Saved Chats</div>
+              <div className="ml-auto text-xs text-muted-foreground">
+                {savedChats.length}
+              </div>
+            </div>
 
-          <div
-            ref={savedScrollRef}
-            className="flex-1 min-h-0 overflow-y-auto p-4"
-            style={{ overscrollBehavior: "contain" }}
-          >
             {savedChats.length === 0 ? (
-              <div className="text-sm text-muted-foreground text-center py-4">
-                <MessageSquare className="h-8 w-8 mx-auto mb-2 opacity-50" />
-                <p>No saved chats yet</p>
-                <p className="text-xs mt-1">Save conversations to view them here</p>
+              <div className="text-xs text-muted-foreground">
+                No saved chats yet.
               </div>
             ) : (
               <div className="space-y-2">
-                {savedChats.map((chat) => (
-                  <SavedChatItem
-                    key={chat.id}
-                    chat={chat}
-                    onLoadChat={onLoadChat}
-                    onDeleteSavedChat={onDeleteSavedChat}
-                    onRenameSavedChat={onRenameSavedChat}
-                  />
-                ))}
+                {savedChats.map((c) => {
+                  const renaming = renameId === c.id;
+                  return (
+                    <div
+                      key={c.id}
+                      className="rounded-md border border-border p-2"
+                    >
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="min-w-0 flex-1">
+                          {renaming ? (
+                            <div className="space-y-2">
+                              <Input
+                                value={renameDraft}
+                                onChange={(e) => setRenameDraft(e.target.value)}
+                                placeholder="Chat title"
+                              />
+                              <div className="flex items-center gap-2">
+                                <Button
+                                  size="sm"
+                                  onClick={commitRename}
+                                  disabled={!renameDraft.trim()}
+                                  title="Save"
+                                >
+                                  <Check className="h-4 w-4 mr-1" />
+                                  Save
+                                </Button>
+                                <Button
+                                  size="sm"
+                                  variant="secondary"
+                                  onClick={cancelRename}
+                                  title="Cancel"
+                                >
+                                  <X className="h-4 w-4 mr-1" />
+                                  Cancel
+                                </Button>
+                              </div>
+                            </div>
+                          ) : (
+                            <>
+                              <div className="text-xs font-medium truncate">
+                                {c.title}
+                              </div>
+                              <div className="text-[11px] text-muted-foreground">
+                                {formatWhen(c.timestamp)}
+                              </div>
+                              <div className="text-[11px] text-muted-foreground">
+                                Mode: {c.chatMode} · Messages: {c.messages.length}
+                              </div>
+                            </>
+                          )}
+                        </div>
+
+                        {!renaming && (
+                          <div className="flex items-center gap-1">
+                            {onRenameSavedChat && (
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                onClick={() => beginRename(c)}
+                                title="Rename"
+                              >
+                                <Pencil className="h-4 w-4" />
+                              </Button>
+                            )}
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              onClick={() => onDeleteSavedChat(c.id)}
+                              title="Delete"
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          </div>
+                        )}
+                      </div>
+
+                      {!renaming && (
+                        <div className="mt-2">
+                          <Button
+                            size="sm"
+                            className="w-full"
+                            onClick={() => onLoadChat(c)}
+                          >
+                            Open
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
               </div>
             )}
-          </div>
-        </div>
-      )}
-
-      {/* 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()}
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="flex flex-col flex-1 min-h-0 space-y-4 mt-4">
-            {selectedItem && (
-              <>
-                <div className="flex items-center justify-end gap-2 flex-shrink-0">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    disabled={isDownloading}
-                    onClick={() => handleDownloadMd(selectedItem)}
-                    title="Download as .md"
-                    className="h-7 px-2 text-xs gap-1.5"
-                  >
-                    <Download className="h-3 w-3" />
-                    .md
-                  </Button>
-
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    disabled={isDownloading}
-                    onClick={() => handleDownloadDocx(selectedItem)}
-                    title="Download as .docx"
-                    className="h-7 px-2 text-xs gap-1.5"
-                  >
-                    <Download className="h-3 w-3" />
-                    .docx
-                  </Button>
-
-                  {selectedItem.format === "pdf" && (
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      disabled={isDownloading}
-                      onClick={() => handleDownloadPdf(selectedItem)}
-                      title="Download as .pdf"
-                      className="h-7 px-2 text-xs gap-1.5"
-                    >
-                      <Download className="h-3 w-3" />
-                      .pdf
-                    </Button>
-                  )}
-
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handleCopy(selectedItem.content)}
-                    disabled={isDownloading}
-                    className="h-7 px-2 text-xs gap-1.5"
-                    title="Copy"
-                  >
-                    <Copy className={`h-3 w-3 ${copied ? "text-green-600" : ""}`} />
-                  </Button>
-
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={handleToggleSave}
-                    disabled={isDownloading}
-                    className={`h-7 px-2 text-xs gap-1.5 ${
-                      isItemSaved ? "bg-red-50 dark:bg-red-950/20 border-red-300 dark:border-red-800" : ""
-                    }`}
-                    title={isItemSaved ? "Unsave" : "Save for later"}
-                  >
-                    <Bookmark className={`h-3 w-3 ${isItemSaved ? "fill-red-600 text-red-600" : ""}`} />
-                  </Button>
-                </div>
-
-                <Separator className="flex-shrink-0" />
+          </Card>
 
-                <div className="text-sm whitespace-pre-wrap text-foreground overflow-y-auto flex-1 min-h-0">
-                  {selectedItem.content}
-                </div>
-              </>
-            )}
-          </div>
-        </DialogContent>
-      </Dialog>
+          {/* Small workspace debug/indicator (optional, helpful in dev) */}
+          <Card className="p-3">
+            <div className="text-xs text-muted-foreground">
+              Workspace:{" "}
+              <span className="text-foreground">
+                {currentWorkspace?.name || currentWorkspaceId}
+              </span>
+            </div>
+          </Card>
+        </div>
+      </div>
     </div>
   );
 }