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

web/src/components/sidebar/LeftSidebar.tsx

@@ -61,13 +61,9 @@ type Props = {
   selectedCourse: string;
   availableCourses: CourseDirectoryItem[];
 
-  // invite flow (optional)
   onInviteGroupMembers?: () => void;
 
-  // 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;
 };
 
@@ -165,7 +161,7 @@ export function LeftSidebar(props: Props) {
     return (courseInfo as any)?.name ?? (selectedCourse || "Course");
   }, [courseInfo, selectedCourse]);
 
-  // --------- Group number/name sources ---------
+  // --------- Workspace-derived group fields ---------
   const wsGroupNo = useMemo(() => {
     const ws: any = currentWorkspace as any;
     return (
@@ -180,10 +176,9 @@ export function LeftSidebar(props: Props) {
 
   const wsGroupName = useMemo(() => {
     const ws: any = currentWorkspace as any;
-    return pickAny(ws, ["groupName", "name", "title"]) || "";
+    return pickAny(ws, ["groupName", "name", "title"]) || "My Group";
   }, [currentWorkspace]);
 
-  // local storage keys
   const groupNameStorageKey = useMemo(
     () => `clare_group_name__${currentWorkspaceId}`,
     [currentWorkspaceId]
@@ -193,30 +188,29 @@ export function LeftSidebar(props: Props) {
     [currentWorkspaceId]
   );
 
-  // state: group name (editable)
-  const [groupName, setGroupName] = useState<string>(wsGroupName || "My Group");
+  // state: group name
+  const [groupName, setGroupName] = useState<string>(wsGroupName);
   const [editingGroupName, setEditingGroupName] = useState(false);
-  const [draftGroupName, setDraftGroupName] = useState<string>(wsGroupName || "My Group");
+  const [draftGroupName, setDraftGroupName] = useState<string>(wsGroupName);
 
-  // state: group no (editable)
+  // state: group no
   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(() => {
-    // group name
     const storedName =
       typeof window !== "undefined" ? window.localStorage.getItem(groupNameStorageKey) : null;
-    const name = storedName && storedName.trim() ? storedName : (wsGroupName || "My Group");
+    const name = storedName && storedName.trim() ? storedName : wsGroupName;
     setGroupName(name);
     setDraftGroupName(name);
     setEditingGroupName(false);
 
-    // 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);
+    const no = storedNo && storedNo.trim()
+      ? toIntOrFallback(storedNo, toIntOrFallback(wsGroupNo, 1))
+      : toIntOrFallback(wsGroupNo, 1);
     setGroupNo(no);
     setDraftGroupNo(String(no));
     setEditingGroupNo(false);
@@ -232,9 +226,7 @@ export function LeftSidebar(props: Props) {
       try {
         await onRenameGroupName(currentWorkspaceId, next);
         return;
-      } catch {
-        // fallback
-      }
+      } catch {}
     }
     try {
       window.localStorage.setItem(groupNameStorageKey, next);
@@ -256,9 +248,7 @@ export function LeftSidebar(props: Props) {
       try {
         await onRenameGroupNo(currentWorkspaceId, nextNo);
         return;
-      } catch {
-        // fallback
-      }
+      } catch {}
     }
     try {
       window.localStorage.setItem(groupNoStorageKey, String(nextNo));
@@ -290,7 +280,6 @@ export function LeftSidebar(props: Props) {
     <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="px-4 pt-6 pb-6 space-y-3">
           <div className="text-[34px] leading-tight font-semibold">
             Welcome, {displayName}!
@@ -299,12 +288,11 @@ export function LeftSidebar(props: Props) {
 
         <Separator className="bg-[#ECECF1]" />
 
-        {/* Course + Group block */}
         <div className="px-4 pt-10 pb-10 space-y-4">
           <div className="text-[30px] leading-tight font-semibold">{courseName}</div>
 
           {!isTeamSpace ? (
-            // My Space: keep simple
+            // My Space unchanged
             <div className="space-y-3">
               <div className="text-[30px] leading-tight font-semibold">
                 Group {String(groupNo)}
@@ -337,10 +325,10 @@ export function LeftSidebar(props: Props) {
                       className="h-9"
                       autoFocus
                     />
-                    <Button type="button" size="icon" variant="ghost" className="h-9 w-9" onClick={saveGroupName}>
+                    <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}>
+                    <Button size="icon" variant="ghost" className="h-9 w-9" onClick={cancelGroupName}>
                       <X className="w-4 h-4" />
                     </Button>
                   </div>
@@ -348,80 +336,69 @@ export function LeftSidebar(props: Props) {
               </div>
             </div>
           ) : (
-            // Team/Group Space: exact structure per screenshot
+            // Team/Group Space (your requested structure)
             <div className="rounded-2xl border bg-white overflow-hidden">
-              {/* 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="text-[18px] font-medium text-muted-foreground truncate max-w-[180px]">
-                        {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="flex items-center gap-2 min-w-0">
-                      <Input
-                        value={draftGroupName}
-                        onChange={(e) => setDraftGroupName(e.target.value)}
-                        onKeyDown={(e) => {
-                          if (e.key === "Enter") saveGroupName();
-                          if (e.key === "Escape") cancelGroupName();
-                        }}
-                        className="h-8 w-[180px]"
-                        autoFocus
-                      />
-                      <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}>
-                        <X className="w-4 h-4" />
-                      </Button>
+              <div className="px-4 pt-4 pb-3 space-y-3">
+                {/* Line 1: group name in BLACK + pencil (editable) */}
+                {!editingGroupName ? (
+                  <div className="flex items-center gap-2">
+                    <div className="text-[18px] font-semibold text-foreground truncate">
+                      {groupName || "My Group"}
                     </div>
-                  )}
-                </div>
-              </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>
+                ) : (
+                  <div className="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-8 w-[220px]"
+                      autoFocus
+                    />
+                    <Button size="icon" variant="ghost" className="h-8 w-8" onClick={saveGroupName}>
+                      <Check className="w-4 h-4" />
+                    </Button>
+                    <Button size="icon" variant="ghost" className="h-8 w-8" onClick={cancelGroupName}>
+                      <X className="w-4 h-4" />
+                    </Button>
+                  </div>
+                )}
 
-              {/* Row 2: Group # (2) + pencil(edit group no)  |  Invite button on right */}
-              <div className="px-4 pb-3">
+                {/* Line 2: "Group {no} (count)" where {no} is editable via pencil */}
                 <div className="flex items-center justify-between gap-3">
-                  <div className="flex items-center gap-2 min-w-0">
+                  <div className="flex items-center gap-2">
                     <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="text-[16px] text-foreground font-medium">
+                        Group{" "}
+                        <span className="inline-flex items-center gap-1">
+                          {groupNo}
+                          <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>
+                        </span>{" "}
+                        ({memberCount})
+                      </div>
                     ) : (
                       <div className="flex items-center gap-2">
-                        <div className="text-[16px] text-foreground font-medium whitespace-nowrap">
-                          Group # ({memberCount})
-                        </div>
+                        <div className="text-[16px] text-foreground font-medium">Group</div>
                         <Input
                           value={draftGroupNo}
                           onChange={(e) => setDraftGroupNo(e.target.value)}
@@ -429,13 +406,14 @@ export function LeftSidebar(props: Props) {
                             if (e.key === "Enter") saveGroupNo();
                             if (e.key === "Escape") cancelGroupNo();
                           }}
-                          className="h-8 w-[90px]"
+                          className="h-8 w-[80px]"
                           autoFocus
                         />
-                        <Button type="button" size="icon" variant="ghost" className="h-8 w-8" onClick={saveGroupNo}>
+                        <div className="text-[16px] text-foreground font-medium">({memberCount})</div>
+                        <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}>
+                        <Button size="icon" variant="ghost" className="h-8 w-8" onClick={cancelGroupNo}>
                           <X className="w-4 h-4" />
                         </Button>
                       </div>
@@ -474,24 +452,18 @@ export function LeftSidebar(props: Props) {
                       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"
-                          />
+                          <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>
@@ -504,7 +476,6 @@ export function LeftSidebar(props: Props) {
                         <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>
                   );