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

web/src/components/sidebar/LeftSidebar.tsx

@@ -71,6 +71,7 @@ type Props = {
   selectedCourse: string;
   availableCourses: CourseDirectoryItem[];
 
+  // optional if you already wired backend
   onRenameGroupName?: (workspaceId: string, newName: string) => Promise<void> | void;
   onRenameGroupNo?: (workspaceId: string, newNo: number) => Promise<void> | void;
 };
@@ -134,7 +135,13 @@ export function LeftSidebar(props: Props) {
     [workspaces, currentWorkspaceId]
   );
 
-  // --------- CourseInfo resolution (same strategy as CourseInfoSection) ---------
+  // Treat only "team"/"group" as Team space; otherwise it's My Space
+  const isTeamSpace = useMemo(() => {
+    const st = String(spaceType || "").toLowerCase();
+    return st === "group" || st === "team";
+  }, [spaceType]);
+
+  // --------- CourseInfo resolution ---------
   const courseInfo = useMemo((): CourseDirectoryItem | null => {
     const list = Array.isArray(availableCourses) ? availableCourses : [];
 
@@ -168,7 +175,7 @@ export function LeftSidebar(props: Props) {
     return (courseInfo as any)?.name ?? (selectedCourse || "Course");
   }, [courseInfo, selectedCourse]);
 
-  // --------- Workspace-derived group fields ---------
+  // --------- Group fields ---------
   const wsGroupNo = useMemo(() => {
     const ws: any = currentWorkspace as any;
     return (
@@ -186,6 +193,9 @@ export function LeftSidebar(props: Props) {
     return pickAny(ws, ["groupName", "name", "title"]) || "My Group";
   }, [currentWorkspace]);
 
+  const memberCount = (groupMembers || []).length;
+
+  // localStorage keys (only used in Team space editing)
   const groupNameStorageKey = useMemo(
     () => `clare_group_name__${currentWorkspaceId}`,
     [currentWorkspaceId]
@@ -195,24 +205,20 @@ export function LeftSidebar(props: Props) {
     [currentWorkspaceId]
   );
 
-  // group name
+  // group name (Team space editable)
   const [groupName, setGroupName] = useState<string>(wsGroupName);
   const [editingGroupName, setEditingGroupName] = useState(false);
   const [draftGroupName, setDraftGroupName] = useState<string>(wsGroupName);
 
-  // group no
+  // group no (Team space editable)
   const [groupNo, setGroupNo] = useState<number>(toIntOrFallback(wsGroupNo, 1));
   const [editingGroupNo, setEditingGroupNo] = useState(false);
   const [draftGroupNo, setDraftGroupNo] = useState<string>(String(toIntOrFallback(wsGroupNo, 1)));
 
-  // Invite dialog state (restored)
+  // Invite dialog state
   const [inviteOpen, setInviteOpen] = useState(false);
   const [inviteEmail, setInviteEmail] = useState("");
 
-  const handleInviteClick = () => {
-    setInviteOpen(true);
-  };
-
   const handleSendInvite = () => {
     if (!inviteEmail.trim()) {
       toast.error("Please enter an email to invite");
@@ -223,6 +229,7 @@ export function LeftSidebar(props: Props) {
     setInviteOpen(false);
   };
 
+  // hydrate persisted editable values (only meaningful in Team space)
   useEffect(() => {
     const storedName =
       typeof window !== "undefined" ? window.localStorage.getItem(groupNameStorageKey) : null;
@@ -295,75 +302,39 @@ export function LeftSidebar(props: Props) {
 
   const displayName = useMemo(() => getUserName(user), [user]);
 
-  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) ================= */}
       <div className="flex-shrink-0">
-        <div className="px-4 pt-6 pb-6 space-y-3">
+        {/* Welcome */}
+        <div className="px-4 pt-6 pb-6">
           <div className="text-[34px] leading-tight font-semibold">
             Welcome, {displayName}!
           </div>
         </div>
 
+        {/* 1) Welcome ↔ Course divider */}
         <Separator className="bg-[#ECECF1]" />
 
+        {/* Course + Group */}
         <div className="px-4 pt-10 pb-10 space-y-4">
           <div className="text-[30px] leading-tight font-semibold">{courseName}</div>
 
+          {/* ===== My Space: show Group Name + Group Number (read-only) ===== */}
           {!isTeamSpace ? (
-            <div className="space-y-3">
-              <div className="text-[30px] leading-tight font-semibold">
-                Group {String(groupNo)}
+            <div className="space-y-2">
+              <div className="text-[18px] font-semibold text-foreground truncate">
+                {wsGroupName || "My Group"}
               </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 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 size="icon" variant="ghost" className="h-9 w-9" onClick={saveGroupName}>
-                      <Check className="w-4 h-4" />
-                    </Button>
-                    <Button size="icon" variant="ghost" className="h-9 w-9" onClick={cancelGroupName}>
-                      <X className="w-4 h-4" />
-                    </Button>
-                  </div>
-                )}
+              <div className="text-[16px] text-foreground font-medium">
+                Group {toIntOrFallback(wsGroupNo, 1)}
               </div>
             </div>
           ) : (
+            /* ===== Team/Group: current style unchanged ===== */
             <div className="rounded-2xl border bg-white overflow-hidden">
               <div className="px-4 pt-4 pb-3 space-y-3">
-                {/* Line 1: group name (black) + pencil */}
+                {/* Line 1: group name editable */}
                 {!editingGroupName ? (
                   <div className="flex items-center gap-2">
                     <div className="text-[18px] font-semibold text-foreground truncate">
@@ -448,7 +419,7 @@ export function LeftSidebar(props: Props) {
                     type="button"
                     variant="secondary"
                     className="h-9 px-3 text-[13px]"
-                    onClick={handleInviteClick}
+                    onClick={() => setInviteOpen(true)}
                   >
                     <MailPlus className="w-4 h-4 mr-2" />
                     Invite
@@ -456,7 +427,6 @@ export function LeftSidebar(props: Props) {
                 </div>
               </div>
 
-              {/* Member list */}
               <div className="px-3 pb-3 space-y-2">
                 {(groupMembers || []).map((member) => {
                   const isAI = !!(member as any).isAI;
@@ -509,6 +479,7 @@ export function LeftSidebar(props: Props) {
           )}
         </div>
 
+        {/* 2) Group ↔ Saved Chat divider */}
         <Separator className="bg-[#ECECF1]" />
       </div>
 
@@ -527,7 +498,9 @@ export function LeftSidebar(props: Props) {
 
       {/* ================= BOTTOM (fixed, non-scroll) ================= */}
       <div className="flex-shrink-0">
+        {/* 3) Saved Chat ↔ Instructor divider */}
         <Separator className="bg-[#ECECF1]" />
+
         <div className="px-4 py-4 space-y-2 text-[16px]">
           <div className="text-muted-foreground">
             Instructor:&nbsp;
@@ -571,7 +544,7 @@ export function LeftSidebar(props: Props) {
         </div>
       </div>
 
-      {/* Invite Dialog (restored) */}
+      {/* Invite Dialog (Team space only; harmless if opened elsewhere but button only exists there) */}
       <Dialog open={inviteOpen} onOpenChange={setInviteOpen}>
         <DialogContent className="w-[600px] max-w-[600px] sm:max-w-[600px]" style={{ maxWidth: 600 }}>
           <DialogHeader>