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

web/src/components/sidebar/LeftSidebar.tsx

@@ -1,8 +1,13 @@
 // web/src/components/sidebar/LeftSidebar.tsx
 import React, { useEffect, useMemo, useState } from "react";
 import { Separator } from "../ui/separator";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
 
 import { SavedChatSection } from "./SavedChatSection";
+import { GroupMembers } from "../GroupMembers";
+
+import { Users, Mail, Pencil, Check, X } from "lucide-react";
 
 import type {
   SavedChat,
@@ -14,10 +19,18 @@ import type {
   User,
   SavedItem,
 } from "../../App";
-
-import { Button } from "../ui/button";
-import { Input } from "../ui/input";
-import { Pencil, Check, X } from "lucide-react";
+import type { CourseDirectoryItem } from "../../lib/courseDirectory";
+
+/**
+ * Behavior:
+ * - spaceType === "group" (Team/Group space): show "Group Members (N)" + Invite button + member list (old design).
+ * - otherwise (My Space / personal): show simple "Group {groupNo}" + editable "Group {groupName}".
+ *
+ * Layout:
+ * - TOP: Welcome + Course + (Group block: either simple or members panel) => non-scroll
+ * - MIDDLE: Saved Chat => only scroll
+ * - BOTTOM: Instructor/TA (click -> Gmail compose) => fixed, non-scroll
+ */
 
 type Props = {
   learningMode: LearningMode;
@@ -55,10 +68,28 @@ type Props = {
   workspaces: Workspace[];
 
   selectedCourse: string;
-  availableCourses: any[];
+  availableCourses: CourseDirectoryItem[];
+
+  // optional: if you already have invite flow somewhere, wire it here; otherwise UI stays but does nothing.
+  onInviteGroupMembers?: () => void;
+
+  // optional: if you have backend rename endpoint, wire it here (preferred).
+  // if not provided, we fallback to localStorage persistence.
+  onRenameGroupName?: (workspaceId: string, newName: string) => Promise<void> | void;
 };
 
-function getDisplayName(u: User | null) {
+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}`;
+}
+
+function norm(s: any) {
+  return String(s ?? "").trim().toLowerCase();
+}
+
+function getUserName(u: User | null) {
   const anyU = u as any;
   return (
     anyU?.name ||
@@ -69,22 +100,7 @@ function getDisplayName(u: User | null) {
   );
 }
 
-function getCourseDisplayName(selectedCourse: string, availableCourses: any[]) {
-  if (!selectedCourse) return "—";
-  const hit =
-    availableCourses?.find?.(
-      (c: any) =>
-        c?.id === selectedCourse ||
-        c?.courseId === selectedCourse ||
-        c?.slug === selectedCourse ||
-        c?.name === selectedCourse ||
-        c?.title === selectedCourse
-    ) || null;
-
-  return hit?.name || hit?.title || String(selectedCourse);
-}
-
-function pickField(obj: any, keys: string[]) {
+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;
@@ -94,8 +110,9 @@ function pickField(obj: any, keys: string[]) {
 
 export function LeftSidebar(props: Props) {
   const {
-    isLoggedIn,
     user,
+    isLoggedIn,
+    spaceType,
     groupMembers,
     savedChats,
     onLoadChat,
@@ -105,44 +122,108 @@ export function LeftSidebar(props: Props) {
     workspaces,
     selectedCourse,
     availableCourses,
+    onInviteGroupMembers,
+    onRenameGroupName,
   } = props;
 
   const currentWorkspace = useMemo(
-    () => workspaces.find((w) => (w as any)?.id === currentWorkspaceId) as any,
+    () => workspaces.find((w) => w.id === currentWorkspaceId),
     [workspaces, currentWorkspaceId]
   );
 
-  // ---------- Group Name (editable, local persisted) ----------
+  // --------- CourseInfo resolution (same strategy as CourseInfoSection) ---------
+  const courseInfo = useMemo((): CourseDirectoryItem | null => {
+    const list = Array.isArray(availableCourses) ? availableCourses : [];
+
+    // 1) selectedCourse: may be id or name
+    const selRaw = (selectedCourse || "").trim();
+    const sel = norm(selRaw);
+    if (sel) {
+      const hit =
+        list.find((c: any) => norm(c.id) === sel) ||
+        list.find((c: any) => norm(c.name) === sel);
+      if (hit) return hit;
+    }
+
+    // 2) workspace.courseInfo: may have id/name, sometimes includes instructor/TA already
+    const wsCourse = (currentWorkspace as any)?.courseInfo as
+      | { id?: string; name?: string; instructor?: any; teachingAssistant?: any }
+      | undefined;
+
+    const wsId = norm(wsCourse?.id);
+    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: any) => norm(c.name) === wsName) ?? (wsCourse as any)) as any;
+    }
+
+    return null;
+  }, [availableCourses, currentWorkspace, selectedCourse]);
+
+  const courseName = useMemo(() => {
+    return (courseInfo as any)?.name ?? (selectedCourse || "Course");
+  }, [courseInfo, selectedCourse]);
+
+  // --------- Group number/name (My Space view) ---------
+  const groupNo = useMemo(() => {
+    const ws: any = currentWorkspace as any;
+    return (
+      ws?.groupNo ??
+      ws?.groupNumber ??
+      ws?.groupIndex ??
+      ws?.group_id ??
+      ws?.groupId ??
+      1
+    );
+  }, [currentWorkspace]);
+
+  const defaultGroupName = useMemo(() => {
+    const ws: any = currentWorkspace as any;
+    return (
+      pickAny(ws, ["groupName", "name", "title"]) ||
+      "My Group"
+    );
+  }, [currentWorkspace]);
+
   const groupNameStorageKey = useMemo(
     () => `clare_group_name__${currentWorkspaceId}`,
     [currentWorkspaceId]
   );
 
-  const defaultGroupName =
-    pickField(currentWorkspace, ["groupName", "group_title", "group_title_name"]) ||
-    pickField(currentWorkspace, ["name", "title"]) ||
-    "My Group";
-
   const [groupName, setGroupName] = useState<string>(defaultGroupName);
-  const [isEditingGroupName, setIsEditingGroupName] = useState(false);
+  const [editingGroupName, setEditingGroupName] = useState(false);
   const [draftGroupName, setDraftGroupName] = useState<string>(defaultGroupName);
 
   useEffect(() => {
-    // load from storage first
-    const stored = typeof window !== "undefined" ? window.localStorage.getItem(groupNameStorageKey) : null;
+    const stored =
+      typeof window !== "undefined" ? window.localStorage.getItem(groupNameStorageKey) : null;
     const name = stored && stored.trim() ? stored : defaultGroupName;
-
     setGroupName(name);
     setDraftGroupName(name);
-    setIsEditingGroupName(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    setEditingGroupName(false);
   }, [groupNameStorageKey, defaultGroupName]);
 
-  const saveGroupName = () => {
+  const saveGroupName = async () => {
     const next = (draftGroupName || "").trim() || "My Group";
+
+    // optimistic UI
     setGroupName(next);
     setDraftGroupName(next);
-    setIsEditingGroupName(false);
+    setEditingGroupName(false);
+
+    // preferred: call provided handler (backend)
+    if (onRenameGroupName) {
+      try {
+        await onRenameGroupName(currentWorkspaceId, next);
+        return;
+      } catch {
+        // fallback to localStorage if handler fails
+      }
+    }
+
     try {
       window.localStorage.setItem(groupNameStorageKey, next);
     } catch {
@@ -152,129 +233,133 @@ export function LeftSidebar(props: Props) {
 
   const cancelGroupName = () => {
     setDraftGroupName(groupName);
-    setIsEditingGroupName(false);
+    setEditingGroupName(false);
   };
 
-  // ---------- Group # / Instructor / TA (best-effort from workspace) ----------
-  const groupNumber =
-    pickField(currentWorkspace, ["groupNumber", "groupNo", "groupIndex", "group_id", "groupId"]) ?? "—";
+  // --------- Contacts (fixed bottom) ---------
+  const instructorName = (courseInfo as any)?.instructor?.name ?? "N/A";
+  const instructorEmail = String((courseInfo as any)?.instructor?.email ?? "").trim();
 
-  const instructor =
-    pickField(currentWorkspace, ["instructor", "teacher", "professor", "instructorName", "teacherName"]) ?? "";
+  const taName = (courseInfo as any)?.teachingAssistant?.name ?? "N/A";
+  const taEmail = String((courseInfo as any)?.teachingAssistant?.email ?? "").trim();
 
-  const ta =
-    pickField(currentWorkspace, ["ta", "TA", "teachingAssistant", "assistant", "taName"]) ?? "";
-
-  const courseName = useMemo(
-    () => getCourseDisplayName(selectedCourse, availableCourses),
-    [selectedCourse, availableCourses]
-  );
+  const displayName = useMemo(() => getUserName(user), [user]);
 
-  const displayName = useMemo(() => getDisplayName(user), [user]);
+  // Team/Group space detection: we treat "group" as the Team/Group page
+  const isTeamSpace = useMemo(() => {
+    const st = String(spaceType || "").toLowerCase();
+    return st === "group" || st === "team";
+  }, [spaceType]);
 
   return (
-    <div className="h-full w-full flex flex-col min-h-0">
-      {/* ---------- TOP (non-scroll) ---------- */}
-      <div className="flex-shrink-0 px-4 pt-4 pb-3 space-y-3">
+    <div className="h-full w-full flex flex-col min-h-0 bg-white">
+      {/* ================= TOP (non-scroll) ================= */}
+      <div className="flex-shrink-0">
         {/* Welcome */}
-        <div className="text-[13px] text-muted-foreground">Welcome,</div>
-        <div className="text-[16px] font-semibold leading-tight">{displayName}!</div>
+        <div className="px-4 pt-6 pb-6 space-y-3">
+          <div className="text-[34px] leading-tight font-semibold">
+            Welcome, {displayName}!
+          </div>
+        </div>
 
         <Separator className="bg-[#ECECF1]" />
 
-        {/* Class Name */}
-        <div className="space-y-1">
-          <div className="text-[12px] text-muted-foreground">Class</div>
-          <div className="text-[14px] font-medium leading-snug">{courseName}</div>
-        </div>
+        {/* Course + Group block */}
+        <div className="px-4 pt-10 pb-10 space-y-4">
+          <div className="text-[30px] leading-tight font-semibold">{courseName}</div>
 
-        {/* Group # */}
-        <div className="space-y-1">
-          <div className="text-[12px] text-muted-foreground">Group #</div>
-          <div className="text-[14px] font-medium">{String(groupNumber)}</div>
-        </div>
+          {/* My Space: simple Group No + Group Name (editable) */}
+          {!isTeamSpace ? (
+            <div className="space-y-3">
+              <div className="text-[30px] leading-tight font-semibold">
+                Group {String(groupNo)}
+              </div>
+
+              <div className="flex items-center justify-between gap-2">
+                {!editingGroupName ? (
+                  <>
+                    <div className="text-[22px] leading-tight font-medium">
+                      Group {groupName}
+                    </div>
+                    <button
+                      type="button"
+                      className="inline-flex items-center gap-1 text-muted-foreground hover:text-foreground"
+                      onClick={() => setEditingGroupName(true)}
+                      aria-label="Edit group name"
+                    >
+                      <Pencil className="w-4 h-4" />
+                    </button>
+                  </>
+                ) : (
+                  <div className="w-full flex items-center gap-2">
+                    <Input
+                      value={draftGroupName}
+                      onChange={(e) => setDraftGroupName(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") saveGroupName();
+                        if (e.key === "Escape") cancelGroupName();
+                      }}
+                      className="h-9"
+                      autoFocus
+                    />
+                    <Button
+                      type="button"
+                      size="icon"
+                      variant="ghost"
+                      className="h-9 w-9"
+                      onClick={saveGroupName}
+                      aria-label="Save group name"
+                    >
+                      <Check className="w-4 h-4" />
+                    </Button>
+                    <Button
+                      type="button"
+                      size="icon"
+                      variant="ghost"
+                      className="h-9 w-9"
+                      onClick={cancelGroupName}
+                      aria-label="Cancel edit group name"
+                    >
+                      <X className="w-4 h-4" />
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : (
+            // Team/Group Space: "Group Members (N)" + Invite + list
+            <div className="rounded-xl border bg-[#0B0B0C] text-white overflow-hidden">
+              <div className="px-4 py-3 flex items-center justify-between">
+                <div className="flex items-center gap-2 text-[14px] font-medium">
+                  <Users className="w-4 h-4 opacity-90" />
+                  <span>Group Members ({(groupMembers || []).length})</span>
+                </div>
 
-        {/* Group Name (editable) */}
-        <div className="space-y-1">
-          <div className="flex items-center justify-between gap-2">
-            <div className="text-[12px] text-muted-foreground">Group Name</div>
-
-            {!isEditingGroupName ? (
-              <button
-                type="button"
-                className="inline-flex items-center gap-1 text-[12px] text-muted-foreground hover:text-foreground"
-                onClick={() => setIsEditingGroupName(true)}
-                aria-label="Edit group name"
-              >
-                <Pencil className="w-3.5 h-3.5" />
-              </button>
-            ) : (
-              <div className="flex items-center gap-1">
-                <Button
-                  type="button"
-                  size="icon"
-                  variant="ghost"
-                  className="h-7 w-7"
-                  onClick={saveGroupName}
-                  aria-label="Save group name"
-                >
-                  <Check className="w-4 h-4" />
-                </Button>
                 <Button
                   type="button"
-                  size="icon"
-                  variant="ghost"
-                  className="h-7 w-7"
-                  onClick={cancelGroupName}
-                  aria-label="Cancel edit group name"
+                  variant="secondary"
+                  className="h-8 px-3 text-[13px] bg-white/10 hover:bg-white/15 text-white border border-white/15"
+                  onClick={onInviteGroupMembers}
                 >
-                  <X className="w-4 h-4" />
+                  <Mail className="w-4 h-4 mr-2" />
+                  Invite
                 </Button>
               </div>
-            )}
-          </div>
 
-          {!isEditingGroupName ? (
-            <div className="text-[14px] font-medium leading-snug">{groupName}</div>
-          ) : (
-            <Input
-              value={draftGroupName}
-              onChange={(e) => setDraftGroupName(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") saveGroupName();
-                if (e.key === "Escape") cancelGroupName();
-              }}
-              className="h-8"
-              autoFocus
-            />
+              <div className="px-3 pb-3">
+                {/* Reuse existing GroupMembers component (old UI) */}
+                <GroupMembers members={groupMembers as any} />
+              </div>
+            </div>
           )}
         </div>
 
-        {/* Group Members */}
-        <div className="space-y-2">
-          <div className="text-[12px] text-muted-foreground">Group members</div>
-          <div className="space-y-1">
-            {(groupMembers || []).length === 0 ? (
-              <div className="text-[12px] text-muted-foreground">—</div>
-            ) : (
-              groupMembers.map((m: any) => {
-                const name = m?.name || m?.fullName || m?.username || m?.email || "Member";
-                return (
-                  <div key={m?.id || name} className="text-[13px] leading-snug">
-                    {name}
-                  </div>
-                );
-              })
-            )}
-          </div>
-        </div>
+        <Separator className="bg-[#ECECF1]" />
       </div>
 
-      <Separator className="flex-shrink-0 bg-[#ECECF1]" />
-
-      {/* ---------- MIDDLE (only scroll area) ---------- */}
+      {/* ================= MIDDLE (only scroll) ================= */}
       <div className="flex-1 min-h-0 overflow-hidden">
-        <div className="h-full min-h-0 panelScroll px-2 py-2">
+        <div className="h-full min-h-0 panelScroll px-0 py-0">
           <SavedChatSection
             isLoggedIn={isLoggedIn}
             savedChats={savedChats}
@@ -285,27 +370,51 @@ export function LeftSidebar(props: Props) {
         </div>
       </div>
 
-      {/* ---------- BOTTOM (fixed, non-scroll) ---------- */}
-      {(String(instructor || "").trim() || String(ta || "").trim()) ? (
-        <>
-          <Separator className="flex-shrink-0 bg-[#ECECF1]" />
-          <div className="flex-shrink-0 px-4 py-3 space-y-2">
-            {String(instructor || "").trim() ? (
-              <div className="space-y-1">
-                <div className="text-[12px] text-muted-foreground">Instructor</div>
-                <div className="text-[13px]">{String(instructor)}</div>
-              </div>
-            ) : null}
+      {/* ================= BOTTOM (fixed, non-scroll) ================= */}
+      <div className="flex-shrink-0">
+        <Separator className="bg-[#ECECF1]" />
+        <div className="px-4 py-4 space-y-2 text-[16px]">
+          <div className="text-muted-foreground">
+            Instructor:&nbsp;
+            {instructorEmail ? (
+              <a
+                href={gmailComposeLink(
+                  instructorEmail,
+                  `[Clare] Question about ${courseName}`,
+                  `Hi ${instructorName},\n\nI have a question about ${courseName}:\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>
 
-            {String(ta || "").trim() ? (
-              <div className="space-y-1">
-                <div className="text-[12px] text-muted-foreground">TA</div>
-                <div className="text-[13px]">{String(ta)}</div>
-              </div>
-            ) : null}
+          <div className="text-muted-foreground">
+            TA:&nbsp;
+            {taEmail ? (
+              <a
+                href={gmailComposeLink(
+                  taEmail,
+                  `[Clare] Help request for ${courseName}`,
+                  `Hi ${taName},\n\nI need help with ${courseName}:\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>
-        </>
-      ) : null}
+        </div>
+      </div>
     </div>
   );
 }