Update web/src/components/LeftSidebar.tsx

web/src/components/LeftSidebar.tsx

@@ -1,61 +1,23 @@
-// web/src/components/LeftSidebar.tsx
 import React, { useMemo, useState } from "react";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { Separator } from "./ui/separator";
-import { Bookmark, Trash2, Edit2, Check, X as XIcon, Copy } from "lucide-react";
-import { toast } from "sonner";
+import { Bookmark, Trash2, Edit2, Check, X as XIcon } from "lucide-react";
 
 import type {
-  LearningMode,
-  Language,
-  SpaceType,
-  GroupMember,
-  User as UserType,
-  SavedItem,
   SavedChat,
   Workspace,
   CourseInfo,
 } from "../App";
 
 type Props = {
-  // ===== App.tsx currently passes these =====
-  learningMode: LearningMode;
-  language: Language;
-  onLearningModeChange: (mode: LearningMode) => void;
-  onLanguageChange: (lang: Language) => void;
-
-  spaceType: SpaceType;
-  groupMembers: GroupMember[];
-
-  user: UserType | null;
-  onLogin: (u: UserType | null) => void;
-  onLogout: () => void;
-  isLoggedIn: boolean;
-
-  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;
-
   savedChats: SavedChat[];
   onLoadChat: (chat: SavedChat) => void;
   onDeleteSavedChat: (id: string) => void;
-
   onRenameSavedChat: (id: string, newTitle: string) => void;
 
   currentWorkspaceId: string;
   workspaces: Workspace[];
-
-  selectedCourse: string;
   availableCourses: CourseInfo[];
 };
 
@@ -65,173 +27,34 @@ function formatSub(ts: any) {
     const d = typeof ts === "string" || typeof ts === "number" ? new Date(ts) : ts;
     return d.toLocaleString();
   } catch {
-    return String(ts);
-  }
-}
-
-function buildMailto(email: string, subject: string, body?: string) {
-  const s = encodeURIComponent(subject);
-  const b = body ? `&body=${encodeURIComponent(body)}` : "";
-  // IMPORTANT: do not encode the whole string, only params
-  return `mailto:${email}?subject=${s}${b}`;
-}
-
-async function copyToClipboard(text: string) {
-  try {
-    await navigator.clipboard.writeText(text);
-    toast.success("Email copied");
-  } catch {
-    toast.error("Copy failed");
+    return "";
   }
 }
 
-function CourseInfoHeader({
-  course,
-}: {
-  course: CourseInfo;
-}) {
-  const instructorMailto = buildMailto(
-    course.instructor.email,
-    `[Clare] Question about ${course.name}`,
-    `Hi ${course.instructor.name},\n\nI have a question about ${course.name}:\n\n(Write your question here)\n\nThanks,\n`
-  );
-
-  const taMailto = buildMailto(
-    course.teachingAssistant.email,
-    `[Clare] Help request for ${course.name}`,
-    `Hi ${course.teachingAssistant.name},\n\nI need help with ${course.name}:\n\n(Write your question here)\n\nThanks,\n`
-  );
-
-  // Use <a href="mailto:..."> (works best), and also force navigation via location as fallback.
-  const openMail = (mailto: string) => {
-    window.location.href = mailto;
-  };
-
-  const Row = ({
-    label,
-    name,
-    email,
-    mailto,
-  }: {
-    label: string;
-    name: string;
-    email: string;
-    mailto: string;
-  }) => {
-    return (
-      <div className="flex items-center justify-between gap-2 text-sm text-muted-foreground">
-        <div className="min-w-0">
-          <span>{label}: </span>
-
-          {/* Primary: anchor mailto (should open default mail app) */}
-          <a
-            href={mailto}
-            className="text-primary hover:underline"
-            title={`Email ${name}`}
-            onClick={(e) => {
-              // Some browsers block navigation if event is prevented; we do NOT prevent default.
-              // We add an explicit location jump as a fallback.
-              // Note: no preventDefault.
-              openMail(mailto);
-            }}
-          >
-            {name}
-          </a>
-        </div>
-
-        {/* Secondary: copy email (always works) */}
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          className="h-7 w-7 flex-shrink-0"
-          title="Copy email"
-          onClick={(e) => {
-            e.stopPropagation();
-            copyToClipboard(email);
-          }}
-        >
-          <Copy className="h-3.5 w-3.5" />
-        </Button>
-      </div>
-    );
-  };
-
-  return (
-    <div className="px-4 pt-4 pb-3 flex-shrink-0">
-      <div className="space-y-2">
-        <div className="text-base font-semibold text-foreground truncate">{course.name}</div>
-
-        <Row
-          label="Instructor"
-          name={course.instructor.name}
-          email={course.instructor.email}
-          mailto={instructorMailto}
-        />
-
-        <Row
-          label="TA"
-          name={course.teachingAssistant.name}
-          email={course.teachingAssistant.email}
-          mailto={taMailto}
-        />
-      </div>
-    </div>
-  );
-}
-
-export function LeftSidebar(props: Props) {
-  const {
-    savedChats,
-    onLoadChat,
-    onDeleteSavedChat,
-    onRenameSavedChat,
-    currentWorkspaceId,
-    workspaces,
-    selectedCourse,
-    availableCourses,
-  } = props;
-
-  // =========================
-  // Course info must ALWAYS show
-  // =========================
-  const currentCourseInfo: CourseInfo | null = useMemo(() => {
-    const ws = workspaces?.find((w) => w.id === currentWorkspaceId);
-
-    // group course workspace preferred
-    if (ws?.type === "group" && ws?.category === "course") {
-      const ci = (ws as any)?.courseInfo as CourseInfo | undefined;
-      if (ci?.id && ci?.name) return ci;
-
-      // fallback: match by courseName if courseInfo missing
-      const name = (ws as any)?.courseName as string | undefined;
-      if (name) {
-        const byName = availableCourses?.find((c) => c.name === name);
-        if (byName) return byName;
-      }
-    }
-
-    // individual workspace: match selectedCourse id
-    const byId = availableCourses?.find((c) => c.id === selectedCourse);
-    return byId || (availableCourses?.[0] ?? null);
-  }, [availableCourses, currentWorkspaceId, selectedCourse, workspaces]);
-
-  // ===== rename state =====
+export function LeftSidebar({
+  savedChats,
+  onLoadChat,
+  onDeleteSavedChat,
+  onRenameSavedChat,
+  currentWorkspaceId,
+  workspaces,
+}: Props) {
   const [editingId, setEditingId] = useState<string | null>(null);
-  const [draftTitle, setDraftTitle] = useState<string>("");
+  const [draftTitle, setDraftTitle] = useState("");
+
+  /** ===== 当前 workspace 对应的 course info ===== */
+  const currentWorkspace = workspaces.find(w => w.id === currentWorkspaceId);
+  const courseInfo = currentWorkspace?.courseInfo;
 
   const sortedChats = useMemo(() => {
-    // newest first
-    return [...savedChats].sort((a: any, b: any) => {
-      const ta = new Date(a.timestamp || a.savedAt || a.createdAt || 0).getTime();
-      const tb = new Date(b.timestamp || b.savedAt || b.createdAt || 0).getTime();
-      return tb - ta;
-    });
+    return [...savedChats].sort((a, b) =>
+      new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+    );
   }, [savedChats]);
 
   const startRename = (chat: SavedChat) => {
     setEditingId(chat.id);
-    setDraftTitle((chat.title || "").trim() || "Untitled chat");
+    setDraftTitle(chat.title || "");
   };
 
   const cancelRename = () => {
@@ -239,131 +62,129 @@ export function LeftSidebar(props: Props) {
     setDraftTitle("");
   };
 
-  const commitRename = (chatId: string) => {
+  const commitRename = (id: string) => {
     const next = draftTitle.trim();
     if (!next) return;
-    onRenameSavedChat(chatId, next);
-    setEditingId(null);
-    setDraftTitle("");
+    onRenameSavedChat(id, next);
+    cancelRename();
   };
 
   return (
     <div className="h-full w-full flex flex-col min-h-0">
-      {/* 0) Course Info (fixed, not scroll) */}
-      {currentCourseInfo ? <CourseInfoHeader course={currentCourseInfo} /> : null}
 
-      {/* ✅ Divider between Info and Saved Chat (fixed) */}
-      <div className="px-4 flex-shrink-0">
-        <Separator />
-      </div>
+      {/* ================= Course Info（不滚动） ================= */}
+      {courseInfo && (
+        <div className="px-4 pt-4 pb-3 flex-shrink-0 space-y-2">
+          <div className="font-semibold text-base">
+            {courseInfo.name}
+          </div>
 
-      {/* 1) Saved Chat header (fixed, not scroll) */}
-      <div className="flex-shrink-0 px-4 pt-4 pb-3">
-        <div className="flex items-center gap-2">
-          <Bookmark className="h-4 w-4" />
-          <h3 className="font-semibold">Saved Chat</h3>
+          <div className="text-sm text-muted-foreground">
+            Instructor:&nbsp;
+            <a
+              href={`mailto:${courseInfo.instructor.email}`}
+              className="text-primary hover:underline"
+            >
+              {courseInfo.instructor.name}
+            </a>
+          </div>
+
+          <div className="text-sm text-muted-foreground">
+            TA:&nbsp;
+            <a
+              href={`mailto:${courseInfo.teachingAssistant.email}`}
+              className="text-primary hover:underline"
+            >
+              {courseInfo.teachingAssistant.name}
+            </a>
+          </div>
         </div>
+      )}
+
+      {/* 🔴 关键分割线：Info / Saved Chat */}
+      <Separator className="flex-shrink-0" />
+
+      {/* ================= Saved Chat Header（不滚动） ================= */}
+      <div className="px-4 pt-4 pb-2 flex items-center gap-2 flex-shrink-0">
+        <Bookmark className="h-4 w-4" />
+        <h3 className="font-semibold">Saved Chat</h3>
       </div>
 
-      {/* 2) Saved Chat list (ONLY this scrolls) */}
-      <div className="flex-1 min-h-0 overflow-y-auto px-4 pb-3 space-y-3">
+      <Separator className="flex-shrink-0" />
+
+      {/* ================= Saved Chat List（唯一滚动区） ================= */}
+      <div className="flex-1 min-h-0 overflow-y-auto px-4 py-3 space-y-3">
         {sortedChats.length === 0 ? (
           <div className="text-sm text-muted-foreground text-center py-10">
-            <div className="mx-auto mb-3 h-10 w-10 rounded-full bg-muted flex items-center justify-center">
-              <Bookmark className="h-5 w-5 text-muted-foreground" />
-            </div>
-            <div className="font-medium">No saved chats yet</div>
-            <div className="text-xs text-muted-foreground mt-1">Save conversations to view them here</div>
+            No saved chats yet<br />
+            <span className="text-xs">Save conversations to view them here</span>
           </div>
         ) : (
-          sortedChats.map((chat) => {
+          sortedChats.map(chat => {
             const isEditing = editingId === chat.id;
-            const sub = formatSub((chat as any).timestamp || (chat as any).savedAt || (chat as any).createdAt);
+            const sub = formatSub(chat.timestamp);
 
             return (
-              <div key={chat.id} className="rounded-xl border border-border bg-card px-4 py-3">
+              <div
+                key={chat.id}
+                className="rounded-xl border bg-card px-4 py-3"
+              >
                 <div className="flex items-start justify-between gap-3">
-                  {/* left */}
-                  <div className="min-w-0 flex-1">
+
+                  {/* 左侧 */}
+                  <div className="flex-1 min-w-0">
                     {isEditing ? (
                       <div className="space-y-2">
                         <Input
                           value={draftTitle}
-                          onChange={(e) => setDraftTitle(e.target.value)}
-                          className="h-9"
+                          onChange={e => setDraftTitle(e.target.value)}
                           autoFocus
-                          onKeyDown={(e) => {
-                            if (e.key === "Enter") {
-                              e.preventDefault();
-                              commitRename(chat.id);
-                            }
-                            if (e.key === "Escape") {
-                              e.preventDefault();
-                              cancelRename();
-                            }
+                          onKeyDown={e => {
+                            if (e.key === "Enter") commitRename(chat.id);
+                            if (e.key === "Escape") cancelRename();
                           }}
                         />
-                        <div className="flex items-center gap-2">
-                          <Button
-                            size="sm"
-                            className="h-8 px-2"
-                            onClick={() => commitRename(chat.id)}
-                            disabled={!draftTitle.trim()}
-                            title="Save"
-                          >
+                        <div className="flex gap-2">
+                          <Button size="sm" onClick={() => commitRename(chat.id)}>
                             <Check className="h-4 w-4" />
                           </Button>
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="h-8 px-2"
-                            onClick={cancelRename}
-                            title="Cancel"
-                          >
+                          <Button size="sm" variant="outline" onClick={cancelRename}>
                             <XIcon className="h-4 w-4" />
                           </Button>
                         </div>
                       </div>
                     ) : (
                       <button
-                        type="button"
                         className="text-left w-full"
                         onClick={() => onLoadChat(chat)}
-                        title="Open saved chat"
                       >
-                        <div className="font-semibold truncate">{chat.title || "Untitled chat"}</div>
-                        {sub ? <div className="text-xs text-muted-foreground mt-1">{sub}</div> : null}
+                        <div className="font-medium truncate">
+                          {chat.title || "Untitled chat"}
+                        </div>
+                        {sub && (
+                          <div className="text-xs text-muted-foreground mt-1">
+                            {sub}
+                          </div>
+                        )}
                       </button>
                     )}
                   </div>
 
-                  {/* right: ✏️ then 🗑️ */}
+                  {/* 右侧按钮 */}
                   {!isEditing && (
-                    <div className="flex items-center gap-2 flex-shrink-0">
+                    <div className="flex gap-2 flex-shrink-0">
                       <Button
                         variant="ghost"
                         size="icon"
-                        className="h-8 w-8"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          startRename(chat);
-                        }}
-                        title="Rename"
+                        onClick={() => startRename(chat)}
                       >
                         <Edit2 className="h-4 w-4" />
                       </Button>
-
                       <Button
                         variant="ghost"
                         size="icon"
-                        className="h-8 w-8 text-muted-foreground hover:text-destructive"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          onDeleteSavedChat(chat.id);
-                        }}
-                        title="Delete"
+                        onClick={() => onDeleteSavedChat(chat.id)}
+                        className="hover:text-destructive"
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
@@ -375,9 +196,6 @@ export function LeftSidebar(props: Props) {
           })
         )}
       </div>
-
-      {/* footer spacer */}
-      <div className="flex-shrink-0 px-4 pb-4" />
     </div>
   );
 }