Update web/src/components/LeftSidebar.tsx

web/src/components/LeftSidebar.tsx

@@ -3,7 +3,8 @@ 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 } from "lucide-react";
+import { Bookmark, Trash2, Edit2, Check, X as XIcon, Copy } from "lucide-react";
+import { toast } from "sonner";
 
 import type {
   LearningMode,
@@ -49,7 +50,6 @@ type Props = {
   onLoadChat: (chat: SavedChat) => void;
   onDeleteSavedChat: (id: string) => void;
 
-  // ✅ NEW in your App.tsx already
   onRenameSavedChat: (id: string, newTitle: string) => void;
 
   currentWorkspaceId: string;
@@ -72,7 +72,17 @@ 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}`;
+  // 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");
+  }
 }
 
 function CourseInfoHeader({
@@ -80,46 +90,91 @@ function CourseInfoHeader({
 }: {
   course: CourseInfo;
 }) {
-  const instructorHref = buildMailto(
+  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 taHref = buildMailto(
+  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`
   );
 
-  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>
+  // Use <a href="mailto:..."> (works best), and also force navigation via location as fallback.
+  const openMail = (mailto: string) => {
+    window.location.href = mailto;
+  };
 
-        <div className="text-sm text-muted-foreground">
-          Instructor:{" "}
+  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={instructorHref}
+            href={mailto}
             className="text-primary hover:underline"
-            title={`Email ${course.instructor.name}`}
-            onClick={(e) => e.stopPropagation()}
+            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);
+            }}
           >
-            {course.instructor.name}
+            {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>
+        {/* 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>
   );
@@ -139,9 +194,6 @@ export function LeftSidebar(props: 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);
@@ -159,7 +211,7 @@ export function LeftSidebar(props: Props) {
       }
     }
 
-    // individual workspace (or anything else): match selectedCourse id
+    // individual workspace: match selectedCourse id
     const byId = availableCourses?.find((c) => c.id === selectedCourse);
     return byId || (availableCourses?.[0] ?? null);
   }, [availableCourses, currentWorkspaceId, selectedCourse, workspaces]);
@@ -197,19 +249,15 @@ export function LeftSidebar(props: Props) {
 
   return (
     <div className="h-full w-full flex flex-col min-h-0">
-      {/* =========================
-          0) Course Info (ALWAYS)
-         ========================= */}
+      {/* 0) Course Info (fixed, not scroll) */}
       {currentCourseInfo ? <CourseInfoHeader course={currentCourseInfo} /> : null}
 
-      {/* Divider between course info and Saved Chat section */}
+      {/* ✅ Divider between Info and Saved Chat (fixed) */}
       <div className="px-4 flex-shrink-0">
         <Separator />
       </div>
 
-      {/* =========================
-          1) Saved Chat header
-         ========================= */}
+      {/* 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" />
@@ -217,9 +265,7 @@ export function LeftSidebar(props: Props) {
         </div>
       </div>
 
-      {/* =========================
-          2) Saved Chat list
-         ========================= */}
+      {/* 2) Saved Chat list (ONLY this scrolls) */}
       <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 text-center py-10">
@@ -330,7 +376,7 @@ export function LeftSidebar(props: Props) {
         )}
       </div>
 
-      {/* Optional footer placeholder (keeps layout stable) */}
+      {/* footer spacer */}
       <div className="flex-shrink-0 px-4 pb-4" />
     </div>
   );