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

web/src/components/sidebar/LeftSidebar.tsx

@@ -3,11 +3,11 @@ import React, { useEffect, useMemo, useState } from "react";
 import { Separator } from "../ui/separator";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
+import { Badge } from "../ui/badge";
 
 import { SavedChatSection } from "./SavedChatSection";
-import { GroupMembers } from "../GroupMembers";
 
-import { Mail, Pencil, Check, X } from "lucide-react";
+import { Pencil, Check, X, MailPlus, Users } from "lucide-react";
 
 import type {
   SavedChat,
@@ -21,19 +21,7 @@ import type {
 } from "../../App";
 import type { CourseDirectoryItem } from "../../lib/courseDirectory";
 
-/**
- * Behavior:
- * - My Space: show "Group {groupNo}" + editable "Group {Name}"
- * - Team/Group Space: show a WHITE card with:
- *   - title: "Group Name" + editable group name (pencil)
- *   - right: Invite button
- *   - body: GroupMembers list
- *
- * Layout:
- * - TOP: Welcome + Course + Group block => non-scroll
- * - MIDDLE: Saved Chat => only scroll
- * - BOTTOM: Instructor/TA => fixed, non-scroll
- */
+import clareAvatar from "../../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png";
 
 type Props = {
   learningMode: LearningMode;
@@ -73,11 +61,14 @@ type Props = {
   selectedCourse: string;
   availableCourses: CourseDirectoryItem[];
 
+  // invite flow (optional)
   onInviteGroupMembers?: () => void;
 
-  // preferred: wire to backend rename (POST /api/workspaces/{id}/rename)
-  // fallback: localStorage
+  // rename group name (optional -> fallback localStorage)
   onRenameGroupName?: (workspaceId: string, newName: string) => Promise<void> | void;
+
+  // rename group number (optional -> fallback localStorage)
+  onRenameGroupNo?: (workspaceId: string, newNo: number) => Promise<void> | void;
 };
 
 function gmailComposeLink(email: string, subject?: string, body?: string) {
@@ -110,6 +101,12 @@ function pickAny(obj: any, keys: string[]) {
   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 LeftSidebar(props: Props) {
   const {
     user,
@@ -126,6 +123,7 @@ export function LeftSidebar(props: Props) {
     availableCourses,
     onInviteGroupMembers,
     onRenameGroupName,
+    onRenameGroupNo,
   } = props;
 
   const currentWorkspace = useMemo(
@@ -137,7 +135,6 @@ export function LeftSidebar(props: Props) {
   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) {
@@ -147,7 +144,6 @@ export function LeftSidebar(props: Props) {
       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;
@@ -169,8 +165,8 @@ export function LeftSidebar(props: Props) {
     return (courseInfo as any)?.name ?? (selectedCourse || "Course");
   }, [courseInfo, selectedCourse]);
 
-  // --------- Group number/name ---------
-  const groupNo = useMemo(() => {
+  // --------- Group number/name sources ---------
+  const wsGroupNo = useMemo(() => {
     const ws: any = currentWorkspace as any;
     return (
       ws?.groupNo ??
@@ -182,52 +178,67 @@ export function LeftSidebar(props: Props) {
     );
   }, [currentWorkspace]);
 
-  const defaultGroupName = useMemo(() => {
+  const wsGroupName = useMemo(() => {
     const ws: any = currentWorkspace as any;
-    return pickAny(ws, ["groupName", "name", "title"]) || "My Group";
+    return pickAny(ws, ["groupName", "name", "title"]) || "";
   }, [currentWorkspace]);
 
+  // local storage keys
   const groupNameStorageKey = useMemo(
     () => `clare_group_name__${currentWorkspaceId}`,
     [currentWorkspaceId]
   );
+  const groupNoStorageKey = useMemo(
+    () => `clare_group_no__${currentWorkspaceId}`,
+    [currentWorkspaceId]
+  );
 
-  const [groupName, setGroupName] = useState<string>(defaultGroupName);
+  // state: group name (editable)
+  const [groupName, setGroupName] = useState<string>(wsGroupName || "My Group");
   const [editingGroupName, setEditingGroupName] = useState(false);
-  const [draftGroupName, setDraftGroupName] = useState<string>(defaultGroupName);
+  const [draftGroupName, setDraftGroupName] = useState<string>(wsGroupName || "My Group");
+
+  // state: group no (editable)
+  const [groupNo, setGroupNo] = useState<number>(toIntOrFallback(wsGroupNo, 1));
+  const [editingGroupNo, setEditingGroupNo] = useState(false);
+  const [draftGroupNo, setDraftGroupNo] = useState<string>(String(toIntOrFallback(wsGroupNo, 1)));
 
+  // hydrate from localStorage (prefer persisted values)
   useEffect(() => {
-    const stored =
+    // group name
+    const storedName =
       typeof window !== "undefined" ? window.localStorage.getItem(groupNameStorageKey) : null;
-    const name = stored && stored.trim() ? stored : defaultGroupName;
+    const name = storedName && storedName.trim() ? storedName : (wsGroupName || "My Group");
     setGroupName(name);
     setDraftGroupName(name);
     setEditingGroupName(false);
-  }, [groupNameStorageKey, defaultGroupName]);
+
+    // group no
+    const storedNo =
+      typeof window !== "undefined" ? window.localStorage.getItem(groupNoStorageKey) : null;
+    const no = storedNo && storedNo.trim() ? toIntOrFallback(storedNo, toIntOrFallback(wsGroupNo, 1)) : toIntOrFallback(wsGroupNo, 1);
+    setGroupNo(no);
+    setDraftGroupNo(String(no));
+    setEditingGroupNo(false);
+  }, [groupNameStorageKey, groupNoStorageKey, wsGroupName, wsGroupNo]);
 
   const saveGroupName = async () => {
     const next = (draftGroupName || "").trim() || "My Group";
-
-    // optimistic UI
     setGroupName(next);
     setDraftGroupName(next);
     setEditingGroupName(false);
 
-    // preferred: call provided handler (backend)
     if (onRenameGroupName) {
       try {
         await onRenameGroupName(currentWorkspaceId, next);
         return;
       } catch {
-        // fallback below
+        // fallback
       }
     }
-
     try {
       window.localStorage.setItem(groupNameStorageKey, next);
-    } catch {
-      // ignore
-    }
+    } catch {}
   };
 
   const cancelGroupName = () => {
@@ -235,6 +246,30 @@ export function LeftSidebar(props: Props) {
     setEditingGroupName(false);
   };
 
+  const saveGroupNo = async () => {
+    const nextNo = toIntOrFallback(draftGroupNo, groupNo);
+    setGroupNo(nextNo);
+    setDraftGroupNo(String(nextNo));
+    setEditingGroupNo(false);
+
+    if (onRenameGroupNo) {
+      try {
+        await onRenameGroupNo(currentWorkspaceId, nextNo);
+        return;
+      } catch {
+        // fallback
+      }
+    }
+    try {
+      window.localStorage.setItem(groupNoStorageKey, String(nextNo));
+    } catch {}
+  };
+
+  const cancelGroupNo = () => {
+    setDraftGroupNo(String(groupNo));
+    setEditingGroupNo(false);
+  };
+
   // --------- Contacts (fixed bottom) ---------
   const instructorName = (courseInfo as any)?.instructor?.name ?? "N/A";
   const instructorEmail = String((courseInfo as any)?.instructor?.email ?? "").trim();
@@ -244,12 +279,13 @@ export function LeftSidebar(props: Props) {
 
   const displayName = useMemo(() => getUserName(user), [user]);
 
-  // Team/Group space detection
   const isTeamSpace = useMemo(() => {
     const st = String(spaceType || "").toLowerCase();
     return st === "group" || st === "team";
   }, [spaceType]);
 
+  const memberCount = (groupMembers || []).length;
+
   return (
     <div className="h-full w-full flex flex-col min-h-0 bg-white">
       {/* ================= TOP (non-scroll) ================= */}
@@ -267,8 +303,8 @@ export function LeftSidebar(props: Props) {
         <div className="px-4 pt-10 pb-10 space-y-4">
           <div className="text-[30px] leading-tight font-semibold">{courseName}</div>
 
-          {/* My Space: simple Group No + Group Name */}
           {!isTeamSpace ? (
+            // My Space: keep simple
             <div className="space-y-3">
               <div className="text-[30px] leading-tight font-semibold">
                 Group {String(groupNo)}
@@ -282,7 +318,7 @@ export function LeftSidebar(props: Props) {
                     </div>
                     <button
                       type="button"
-                      className="inline-flex items-center gap-1 text-muted-foreground hover:text-foreground"
+                      className="inline-flex items-center text-muted-foreground hover:text-foreground"
                       onClick={() => setEditingGroupName(true)}
                       aria-label="Edit group name"
                     >
@@ -301,24 +337,10 @@ export function LeftSidebar(props: Props) {
                       className="h-9"
                       autoFocus
                     />
-                    <Button
-                      type="button"
-                      size="icon"
-                      variant="ghost"
-                      className="h-9 w-9"
-                      onClick={saveGroupName}
-                      aria-label="Save group name"
-                    >
+                    <Button type="button" size="icon" variant="ghost" className="h-9 w-9" onClick={saveGroupName}>
                       <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"
-                    >
+                    <Button type="button" size="icon" variant="ghost" className="h-9 w-9" onClick={cancelGroupName}>
                       <X className="w-4 h-4" />
                     </Button>
                   </div>
@@ -326,17 +348,18 @@ export function LeftSidebar(props: Props) {
               </div>
             </div>
           ) : (
-            // Team/Group Space: white card + "Group Name" header + pencil rename + Invite
+            // Team/Group Space: exact structure per screenshot
             <div className="rounded-2xl border bg-white overflow-hidden">
-              <div className="px-4 py-3 flex items-center justify-between">
-                <div className="flex items-center gap-2 min-w-0">
-                  <div className="text-[14px] font-semibold text-foreground whitespace-nowrap">
+              {/* Row 1: Group Name + (value) + pencil (NO invite here) */}
+              <div className="px-4 pt-4 pb-2">
+                <div className="flex items-center gap-3 min-w-0">
+                  <div className="text-[18px] font-semibold text-foreground whitespace-nowrap">
                     Group Name
                   </div>
 
                   {!editingGroupName ? (
-                    <div className="flex items-center gap-2 min-w-0">
-                      <div className="text-[14px] font-medium text-muted-foreground truncate max-w-[180px]">
+                    <>
+                      <div className="text-[18px] font-medium text-muted-foreground truncate max-w-[180px]">
                         {groupName}
                       </div>
                       <button
@@ -347,7 +370,7 @@ export function LeftSidebar(props: Props) {
                       >
                         <Pencil className="w-4 h-4" />
                       </button>
-                    </div>
+                    </>
                   ) : (
                     <div className="flex items-center gap-2 min-w-0">
                       <Input
@@ -360,44 +383,132 @@ export function LeftSidebar(props: Props) {
                         className="h-8 w-[180px]"
                         autoFocus
                       />
-                      <Button
-                        type="button"
-                        size="icon"
-                        variant="ghost"
-                        className="h-8 w-8"
-                        onClick={saveGroupName}
-                        aria-label="Save group name"
-                      >
+                      <Button type="button" size="icon" variant="ghost" className="h-8 w-8" onClick={saveGroupName}>
                         <Check className="w-4 h-4" />
                       </Button>
-                      <Button
-                        type="button"
-                        size="icon"
-                        variant="ghost"
-                        className="h-8 w-8"
-                        onClick={cancelGroupName}
-                        aria-label="Cancel edit group name"
-                      >
+                      <Button type="button" size="icon" variant="ghost" className="h-8 w-8" onClick={cancelGroupName}>
                         <X className="w-4 h-4" />
                       </Button>
                     </div>
                   )}
                 </div>
+              </div>
 
-                <Button
-                  type="button"
-                  variant="secondary"
-                  className="h-9 px-3 text-[13px]"
-                  onClick={onInviteGroupMembers}
-                >
-                  <Mail className="w-4 h-4 mr-2" />
-                  Invite
-                </Button>
+              {/* Row 2: Group # (2) + pencil(edit group no)  |  Invite button on right */}
+              <div className="px-4 pb-3">
+                <div className="flex items-center justify-between gap-3">
+                  <div className="flex items-center gap-2 min-w-0">
+                    <Users className="w-4 h-4 text-muted-foreground" />
+
+                    {!editingGroupNo ? (
+                      <>
+                        <div className="text-[16px] text-foreground font-medium whitespace-nowrap">
+                          Group # ({memberCount})
+                        </div>
+                        <div className="text-[16px] text-muted-foreground font-medium whitespace-nowrap">
+                          {String(groupNo)}
+                        </div>
+                        <button
+                          type="button"
+                          className="inline-flex items-center text-muted-foreground hover:text-foreground"
+                          onClick={() => setEditingGroupNo(true)}
+                          aria-label="Edit group number"
+                        >
+                          <Pencil className="w-4 h-4" />
+                        </button>
+                      </>
+                    ) : (
+                      <div className="flex items-center gap-2">
+                        <div className="text-[16px] text-foreground font-medium whitespace-nowrap">
+                          Group # ({memberCount})
+                        </div>
+                        <Input
+                          value={draftGroupNo}
+                          onChange={(e) => setDraftGroupNo(e.target.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") saveGroupNo();
+                            if (e.key === "Escape") cancelGroupNo();
+                          }}
+                          className="h-8 w-[90px]"
+                          autoFocus
+                        />
+                        <Button type="button" size="icon" variant="ghost" className="h-8 w-8" onClick={saveGroupNo}>
+                          <Check className="w-4 h-4" />
+                        </Button>
+                        <Button type="button" size="icon" variant="ghost" className="h-8 w-8" onClick={cancelGroupNo}>
+                          <X className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    className="h-9 px-3 text-[13px]"
+                    onClick={onInviteGroupMembers}
+                  >
+                    <MailPlus className="w-4 h-4 mr-2" />
+                    Invite
+                  </Button>
+                </div>
               </div>
 
-              <div className="px-3 pb-3">
-                {/* Old GroupMembers list UI */}
-                <GroupMembers members={groupMembers as any} />
+              {/* Member list */}
+              <div className="px-3 pb-3 space-y-2">
+                {(groupMembers || []).map((member) => {
+                  const isAI = !!(member as any).isAI;
+                  const name = String((member as any).name || "");
+                  const email = String((member as any).email || "");
+                  const initials = name
+                    ? name
+                        .split(" ")
+                        .filter(Boolean)
+                        .map((n) => n[0])
+                        .join("")
+                        .toUpperCase()
+                    : "?";
+
+                  return (
+                    <div
+                      key={(member as any).id}
+                      className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted/50 transition-colors"
+                    >
+                      {/* Avatar */}
+                      <div
+                        className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
+                          isAI ? "overflow-hidden bg-white" : "bg-muted"
+                        }`}
+                      >
+                        {isAI ? (
+                          <img
+                            src={clareAvatar}
+                            alt="Clare"
+                            className="w-full h-full object-cover"
+                          />
+                        ) : (
+                          <span className="text-sm">{initials}</span>
+                        )}
+                      </div>
+
+                      {/* Member Info */}
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <p className="text-sm truncate text-foreground">{name}</p>
+                          {isAI && (
+                            <Badge variant="secondary" className="text-xs">
+                              AI
+                            </Badge>
+                          )}
+                        </div>
+                        <p className="text-xs text-muted-foreground truncate">{email}</p>
+                      </div>
+
+                      {/* Online Status */}
+                      <div className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" title="Online" />
+                    </div>
+                  );
+                })}
               </div>
             </div>
           )}