Update web/src/components/LeftSidebar.tsx

web/src/components/LeftSidebar.tsx

@@ -1,477 +1,818 @@
 // web/src/components/LeftSidebar.tsx
-import React, { useMemo, useState } from "react";
-import { Button } from "./ui/button";
-import { Card } from "./ui/card";
-import { Separator } from "./ui/separator";
+import React, { useEffect, useRef, useState } from "react";
+import { LearningModeSelector } from "./LearningModeSelector";
 import { Label } from "./ui/label";
-import { Input } from "./ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./ui/select";
+import { Button } from "./ui/button";
 import {
-  LogOut,
-  User as UserIcon,
-  BookOpen,
-  Languages,
-  GraduationCap,
-  Users,
+  LogIn,
   Bookmark,
+  Download,
+  Copy,
   MessageSquare,
   Trash2,
-  Pencil,
+  Edit2,
   Check,
-  X,
+  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,
+  User as UserType,
   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);
+    }
+  };
 
-type Props = {
+  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 {
   learningMode: LearningMode;
   language: Language;
-  onLearningModeChange: (m: LearningMode) => void;
-  onLanguageChange: (l: Language) => void;
-
+  onLearningModeChange: (mode: LearningMode) => void;
+  onLanguageChange: (lang: Language) => void;
   spaceType: SpaceType;
   groupMembers: GroupMember[];
-
-  user: User | null;
-  onLogin: (u: User | null) => void;
+  user: UserType | null;
+  onLogin: (user: UserType) => 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",
-    saveAsChat?: boolean,
-    format?: "pdf" | "text",
-    workspaceId?: string
-  ) => void;
-
+  onSave: (content: string, type: "export" | "quiz" | "summary") => void;
   savedChats: SavedChat[];
-  onLoadChat: (c: SavedChat) => void;
+  onLoadChat: (chat: SavedChat) => void;
   onDeleteSavedChat: (id: string) => void;
   onRenameSavedChat?: (id: string, newTitle: string) => void;
-
   currentWorkspaceId: string;
-  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 "";
-  }
+  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[];
 }
 
-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,
-  } = props;
-
-  const currentWorkspace = useMemo(
-    () => workspaces.find((w) => w.id === currentWorkspaceId),
-    [workspaces, currentWorkspaceId]
-  );
+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 workspaceSavedItems = useMemo(
-    () => savedItems.filter((x) => x.workspaceId === currentWorkspaceId),
-    [savedItems, currentWorkspaceId]
-  );
+  const handleLogout = () => {
+    onLogout();
+    setShowLoginForm(false);
+    toast.success("Logged out successfully");
+  };
 
-  const [renameId, setRenameId] = useState<string | null>(null);
-  const [renameDraft, setRenameDraft] = useState<string>("");
+  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 beginRename = (chat: SavedChat) => {
-    setRenameId(chat.id);
-    setRenameDraft(chat.title);
+  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 commitRename = () => {
-    if (!renameId) return;
-    const t = renameDraft.trim();
-    if (!t) return;
-    onRenameSavedChat?.(renameId, t);
-    setRenameId(null);
-    setRenameDraft("");
+  const getDefaultFilenameBase = (item: SavedItem) => {
+    const kind =
+      item.type === "export" ? "export" : item.type === "summary" ? "summary" : "quiz";
+    return `clare-${kind}-${formatDateStamp(item.timestamp)}`;
   };
 
-  const cancelRename = () => {
-    setRenameId(null);
-    setRenameDraft("");
+  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);
+    }
   };
 
-  return (
-    <div className="flex flex-col min-h-0 h-full overflow-hidden">
-      {/* ===== Top fixed area ===== */}
-      <div className="flex-shrink-0 p-4 space-y-3">
-        <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 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);
+    }
+  };
 
-            <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 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);
+    }
+  };
 
-        <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 handleCopy = async (content: string) => {
+    await navigator.clipboard.writeText(content);
+    setCopied(true);
+    toast.success("Copied to clipboard!");
+    setTimeout(() => setCopied(false), 2000);
+  };
 
-          <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 handleUnsaveItem = (id: string) => {
+    onUnsave(id);
+  };
 
-          <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 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);
+    }
+  };
+
+  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;
+  };
+
+  const courseDisplayInfo = getCourseDisplayInfo();
 
-          {currentWorkspace?.category === "course" && (
+  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" ? (
             <>
-              <Separator />
-              <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>
+              <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>
                 </div>
-                <div className="text-xs text-muted-foreground">
-                  {currentWorkspace.courseName ||
-                    currentWorkspace.courseInfo?.name ||
-                    "Course"}
+                <div>
+                  <span className="text-muted-foreground">TA: </span>
+                  <a
+                    href={`mailto:${courseDisplayInfo.teachingAssistant.email}`}
+                    className="text-primary hover:underline"
+                  >
+                    {courseDisplayInfo.teachingAssistant.name}
+                  </a>
                 </div>
-                {currentWorkspace.courseInfo?.instructor?.name && (
-                  <div className="text-xs text-muted-foreground">
-                    Instructor: {currentWorkspace.courseInfo.instructor.name}
-                  </div>
-                )}
               </div>
             </>
-          )}
-
-          {spaceType === "group" && (
+          ) : (
             <>
-              <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 className="space-y-2">
-                  {groupMembers.map((m) => (
-                    <div key={m.id} 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 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>
+                )}
+              </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>
+                ))}
               </div>
             </>
           )}
-        </Card>
-      </div>
-
-      {/* ===== Scroll area ===== */}
-      <div className="flex-1 min-h-0 overflow-hidden">
-        <div className="panelScroll h-full 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>
+      )}
+
+      {!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>
-            </div>
 
-            {workspaceSavedItems.length === 0 ? (
-              <div className="text-xs text-muted-foreground">
-                No saved items in this workspace yet.
-              </div>
-            ) : (
-              <div className="space-y-2">
-                {workspaceSavedItems.map((it) => {
-                  const highlight = 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>
+      )}
 
-          {/* 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>
+      {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>
 
+          <div
+            ref={savedScrollRef}
+            className="flex-1 min-h-0 overflow-y-auto p-4"
+            style={{ overscrollBehavior: "contain" }}
+          >
             {savedChats.length === 0 ? (
-              <div className="text-xs text-muted-foreground">
-                No saved chats yet.
+              <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>
             ) : (
               <div className="space-y-2">
-                {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()}
-                                >
-                                  <Check className="h-4 w-4 mr-1" />
-                                  Save
-                                </Button>
-                                <Button
-                                  size="sm"
-                                  variant="secondary"
-                                  onClick={cancelRename}
-                                >
-                                  <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>
-                  );
-                })}
+                {savedChats.map((chat) => (
+                  <SavedChatItem
+                    key={chat.id}
+                    chat={chat}
+                    onLoadChat={onLoadChat}
+                    onDeleteSavedChat={onDeleteSavedChat}
+                    onRenameSavedChat={onRenameSavedChat}
+                  />
+                ))}
               </div>
             )}
-          </Card>
-
-          {/* Debug (optional but useful) */}
-          <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>
+      )}
+
+      {/* 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" />
+
+                <div className="text-sm whitespace-pre-wrap text-foreground overflow-y-auto flex-1 min-h-0">
+                  {selectedItem.content}
+                </div>
+              </>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }