Update web/src/components/sidebar/CourseInfoSection.tsx

web/src/components/sidebar/CourseInfoSection.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { Separator } from "../ui/separator";
 
-import type { Workspace } from "../../App";
+import type { Workspace, SpaceType } from "../../App";
 import type { CourseDirectoryItem } from "../../lib/courseDirectory";
 
 function gmailComposeLink(email: string, subject?: string, body?: string) {
@@ -15,6 +15,20 @@ function norm(s: any) {
   return String(s ?? "").trim().toLowerCase();
 }
 
+function pickAny(obj: any, keys: string[]) {
+  for (const k of keys) {
+    const v = obj?.[k];
+    if (v !== undefined && v !== null && String(v).trim() !== "") return v;
+  }
+  return undefined;
+}
+
+function toIntOrFallback(v: any, fb: number) {
+  const n = Number(v);
+  if (Number.isFinite(n) && n > 0) return Math.floor(n);
+  return fb;
+}
+
 export function CourseInfoSection({
   currentWorkspaceId,
   workspaces,
@@ -31,6 +45,14 @@ export function CourseInfoSection({
     [workspaces, currentWorkspaceId]
   );
 
+  // 判断当前是否是 Group/Team（用于决定是否展示 Group Name/Number）
+  const isTeamSpace = useMemo(() => {
+    const ws: any = currentWorkspace as any;
+    const st = String((ws?.type as SpaceType) || "").toLowerCase();
+    return st === "group" || st === "team";
+  }, [currentWorkspace]);
+
+  // --------- CourseInfo resolution ---------
   const courseInfo = useMemo((): CourseDirectoryItem | null => {
     const list = Array.isArray(availableCourses) ? availableCourses : [];
 
@@ -39,9 +61,9 @@ export function CourseInfoSection({
     const sel = norm(selRaw);
     if (sel) {
       const hit =
-        list.find((c) => norm(c.id) === sel) ||
-        list.find((c) => norm(c.name) === sel);
-      if (hit) return hit;
+        list.find((c: any) => norm(c.id) === sel) ||
+        list.find((c: any) => norm(c.name) === sel);
+      if (hit) return hit as any;
     }
 
     // 2) workspace.courseInfo: group workspace 的 courseInfo 可能只带 id/name
@@ -50,18 +72,32 @@ export function CourseInfoSection({
       | undefined;
 
     const wsId = norm(wsCourse?.id);
-    if (wsId) {
-      return list.find((c) => norm(c.id) === wsId) ?? (wsCourse as any);
-    }
+    if (wsId) return (list.find((c: any) => norm(c.id) === wsId) ?? (wsCourse as any)) as any;
 
     const wsName = norm(wsCourse?.name);
-    if (wsName) {
-      return list.find((c) => norm(c.name) === wsName) ?? (wsCourse as any);
-    }
+    if (wsName) return (list.find((c: any) => norm(c.name) === wsName) ?? (wsCourse as any)) as any;
 
     return null;
   }, [availableCourses, currentWorkspace, selectedCourse]);
 
+  // ---------- Display fields ----------
+  const courseName = useMemo(() => {
+    return (courseInfo as any)?.name ?? (selectedCourse || "Course");
+  }, [courseInfo, selectedCourse]);
+
+  // --------- Group fields (read-only) ---------
+  const groupName = useMemo(() => {
+    const ws: any = currentWorkspace as any;
+    // 优先 groupName，否则退回 workspace 的 name/title
+    return String(pickAny(ws, ["groupName", "name", "title"]) || "My Group");
+  }, [currentWorkspace]);
+
+  const groupNo = useMemo(() => {
+    const ws: any = currentWorkspace as any;
+    const raw = ws?.groupNo ?? ws?.groupNumber ?? ws?.groupIndex ?? ws?.group_id ?? ws?.groupId ?? 1;
+    return toIntOrFallback(raw, 1);
+  }, [currentWorkspace]);
+
   // ---------- Fallback：不要静默消失 ----------
   if (!courseInfo) {
     return (
@@ -70,9 +106,15 @@ export function CourseInfoSection({
           <div className="text-xs text-red-600">COURSEINFO ACTIVE (fallback)</div>
           <div className="font-semibold text-base">No course matched</div>
           <div className="text-xs text-muted-foreground space-y-1">
-            <div>selectedCourse: <span className="font-medium">{String(selectedCourse || "")}</span></div>
-            <div>availableCourses: <span className="font-medium">{availableCourses?.length ?? 0}</span></div>
-            <div>currentWorkspaceId: <span className="font-medium">{String(currentWorkspaceId)}</span></div>
+            <div>
+              selectedCourse: <span className="font-medium">{String(selectedCourse || "")}</span>
+            </div>
+            <div>
+              availableCourses: <span className="font-medium">{availableCourses?.length ?? 0}</span>
+            </div>
+            <div>
+              currentWorkspaceId: <span className="font-medium">{String(currentWorkspaceId)}</span>
+            </div>
           </div>
         </div>
         <Separator className="bg-[#ECECF1]" />
@@ -80,21 +122,33 @@ export function CourseInfoSection({
     );
   }
 
+  const instructorName = (courseInfo as any)?.instructor?.name ?? "N/A";
+  const instructorEmail = String((courseInfo as any)?.instructor?.email ?? "").trim();
 
-  // ---------- Display fields ----------
-  const courseName = courseInfo.name ?? (selectedCourse || "Course");
-
-  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();
+  const taName = (courseInfo as any)?.teachingAssistant?.name ?? "N/A";
+  const taEmail = String((courseInfo as any)?.teachingAssistant?.email ?? "").trim();
 
   return (
     <div className="w-full">
-      <div className="px-4 pt-4 pb-3 space-y-2">
+      <div className="px-4 pt-4 pb-3 space-y-3">
+        {/* Course Title */}
         <div className="font-semibold text-base">{courseName}</div>
 
+        {/* Group fields (read-only, no pencil) */}
+        {isTeamSpace && (
+          <div className="space-y-1.5">
+            <div className="flex items-center justify-between text-[13px]">
+              <span className="text-muted-foreground">Group Name:</span>
+              <span className="font-semibold truncate max-w-[60%] text-right">{groupName}</span>
+            </div>
+            <div className="flex items-center justify-between text-[13px]">
+              <span className="text-muted-foreground">Group Number:</span>
+              <span className="font-semibold">{groupNo}</span>
+            </div>
+          </div>
+        )}
+
+        {/* Instructor */}
         <div className="text-sm text-muted-foreground">
           Instructor:&nbsp;
           {instructorEmail ? (
@@ -115,6 +169,7 @@ export function CourseInfoSection({
           )}
         </div>
 
+        {/* TA */}
         <div className="text-sm text-muted-foreground">
           TA:&nbsp;
           {taEmail ? (