Update web/src/components/LeftSidebar.tsx

web/src/components/LeftSidebar.tsx

@@ -69,14 +69,101 @@ function formatSub(ts: any) {
   }
 }
 
+function buildMailto(email: string, subject: string, body?: string) {
+  const s = encodeURIComponent(subject);
+  const b = body ? `&body=${encodeURIComponent(body)}` : "";
+  return `mailto:${encodeURIComponent(email)}?subject=${s}${b}`;
+}
+
+function CourseInfoHeader({
+  course,
+}: {
+  course: CourseInfo;
+}) {
+  const instructorHref = 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 taHref = 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`
+  );
+
+  return (
+    <div className="px-4 pt-4 pb-3">
+      <div className="space-y-1">
+        <div className="text-base font-semibold text-foreground truncate">{course.name}</div>
+
+        <div className="text-sm text-muted-foreground">
+          Instructor:{" "}
+          <a
+            href={instructorHref}
+            className="text-primary hover:underline"
+            title={`Email ${course.instructor.name}`}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {course.instructor.name}
+          </a>
+        </div>
+
+        <div className="text-sm text-muted-foreground">
+          TA:{" "}
+          <a
+            href={taHref}
+            className="text-primary hover:underline"
+            title={`Email ${course.teachingAssistant.name}`}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {course.teachingAssistant.name}
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function LeftSidebar(props: Props) {
   const {
     savedChats,
     onLoadChat,
     onDeleteSavedChat,
     onRenameSavedChat,
+    currentWorkspaceId,
+    workspaces,
+    selectedCourse,
+    availableCourses,
   } = props;
 
+  // =========================
+  // Course info must ALWAYS show
+  // Logic kept consistent with App.tsx:
+  // - If workspace is group/course and has courseInfo -> use it
+  // - Else fallback to selectedCourse (My Space) -> availableCourses match
+  // =========================
+  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 (or anything else): match selectedCourse id
+    const byId = availableCourses?.find((c) => c.id === selectedCourse);
+    return byId || (availableCourses?.[0] ?? null);
+  }, [availableCourses, currentWorkspaceId, selectedCourse, workspaces]);
+
   // ===== rename state =====
   const [editingId, setEditingId] = useState<string | null>(null);
   const [draftTitle, setDraftTitle] = useState<string>("");
@@ -110,7 +197,19 @@ export function LeftSidebar(props: Props) {
 
   return (
     <div className="h-full w-full flex flex-col min-h-0">
-      {/* You can keep other sections above; here we keep minimal structure */}
+      {/* =========================
+          0) Course Info (ALWAYS)
+         ========================= */}
+      {currentCourseInfo ? <CourseInfoHeader course={currentCourseInfo} /> : null}
+
+      {/* Divider between course info and Saved Chat section */}
+      <div className="px-4 flex-shrink-0">
+        <Separator />
+      </div>
+
+      {/* =========================
+          1) Saved Chat header
+         ========================= */}
       <div className="flex-shrink-0 px-4 pt-4 pb-3">
         <div className="flex items-center gap-2">
           <Bookmark className="h-4 w-4" />
@@ -118,24 +217,25 @@ export function LeftSidebar(props: Props) {
         </div>
       </div>
 
-      <div className="px-4 flex-shrink-0">
-        <Separator />
-      </div>
-
-      {/* list */}
-      <div className="flex-1 min-h-0 overflow-y-auto px-4 py-3 space-y-3">
+      {/* =========================
+          2) Saved Chat list
+         ========================= */}
+      <div className="flex-1 min-h-0 overflow-y-auto px-4 pb-3 space-y-3">
         {sortedChats.length === 0 ? (
-          <div className="text-sm text-muted-foreground">No saved chats yet.</div>
+          <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>
+          </div>
         ) : (
           sortedChats.map((chat) => {
             const isEditing = editingId === chat.id;
-            const sub = formatSub(chat.timestamp);
+            const sub = formatSub((chat as any).timestamp || (chat as any).savedAt || (chat as any).createdAt);
 
             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 border-border bg-card px-4 py-3">
                 <div className="flex items-start justify-between gap-3">
                   {/* left */}
                   <div className="min-w-0 flex-1">
@@ -186,11 +286,7 @@ export function LeftSidebar(props: Props) {
                         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}
+                        {sub ? <div className="text-xs text-muted-foreground mt-1">{sub}</div> : null}
                       </button>
                     )}
                   </div>