Create CourseInfoSection.tsx

web/src/components/sidebar/CourseInfoSection.tsx

@@ -0,0 +1,110 @@
+import React, { useMemo } from "react";
+import { Separator } from "../ui/separator";
+
+import type { Workspace } from "../../App";
+import type { CourseDirectoryItem } from "../../lib/courseDirectory";
+
+function gmailComposeLink(email: string, subject?: string, body?: string) {
+  const to = `to=${encodeURIComponent(email)}`;
+  const su = subject ? `&su=${encodeURIComponent(subject)}` : "";
+  const bd = body ? `&body=${encodeURIComponent(body)}` : "";
+  return `https://mail.google.com/mail/?view=cm&fs=1&${to}${su}${bd}`;
+}
+
+export function CourseInfoSection({
+  currentWorkspaceId,
+  workspaces,
+  selectedCourse,
+  availableCourses,
+}: {
+  currentWorkspaceId: string;
+  workspaces: Workspace[];
+  selectedCourse: string;
+  availableCourses: CourseDirectoryItem[];
+}) {
+  const currentWorkspace = useMemo(
+    () => workspaces.find((w) => w.id === currentWorkspaceId),
+    [workspaces, currentWorkspaceId]
+  );
+
+  const courseInfo: CourseDirectoryItem | null = useMemo(() => {
+    const sel = (selectedCourse || "").trim();
+    if (sel) {
+      const hitById = availableCourses.find((c) => c.id === sel);
+      if (hitById) return hitById;
+
+      const hitByName = availableCourses.find((c) => c.name === sel);
+      if (hitByName) return hitByName;
+    }
+
+    const wsCourse = (currentWorkspace as any)?.courseInfo as
+      | { id?: string; name?: string }
+      | undefined;
+
+    const wsId = wsCourse?.id?.trim();
+    if (wsId) return availableCourses.find((c) => c.id === wsId) ?? (wsCourse as any);
+
+    const wsName = wsCourse?.name?.trim();
+    if (wsName) return availableCourses.find((c) => c.name === wsName) ?? (wsCourse as any);
+
+    return null;
+  }, [availableCourses, currentWorkspace, selectedCourse]);
+
+  if (!courseInfo) return null;
+
+  const instructorName = courseInfo?.instructor?.name ?? "N/A";
+  const instructorEmail = courseInfo?.instructor?.email?.trim() || "";
+  const taName = courseInfo?.teachingAssistant?.name ?? "N/A";
+  const taEmail = courseInfo?.teachingAssistant?.email?.trim() || "";
+
+  return (
+    <div className="w-full">
+      <div className="px-4 pt-4 pb-3 space-y-2">
+        <div className="font-semibold text-base">{courseInfo.name}</div>
+
+        <div className="text-sm text-muted-foreground">
+          Instructor:&nbsp;
+          {instructorEmail ? (
+            <a
+              href={gmailComposeLink(
+                instructorEmail,
+                `[Clare] Question about ${courseInfo.name}`,
+                `Hi ${instructorName},\n\nI have a question about ${courseInfo.name}:\n\n(Write your question here)\n\nThanks,\n`
+              )}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:underline"
+            >
+              {instructorName}
+            </a>
+          ) : (
+            <span className="text-muted-foreground/60">{instructorName}</span>
+          )}
+        </div>
+
+        <div className="text-sm text-muted-foreground">
+          TA:&nbsp;
+          {taEmail ? (
+            <a
+              href={gmailComposeLink(
+                taEmail,
+                `[Clare] Help request for ${courseInfo.name}`,
+                `Hi ${taName},\n\nI need help with ${courseInfo.name}:\n\n(Write your question here)\n\nThanks,\n`
+              )}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:underline"
+            >
+              {taName}
+            </a>
+          ) : (
+            <span className="text-muted-foreground/60">{taName}</span>
+          )}
+        </div>
+      </div>
+
+      {/* 固定颜色分割线 */}
+      <Separator className="bg-[#ECECF1]" />
+    </div>
+  );
+}