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

web/src/components/sidebar/LeftSidebar.tsx

@@ -7,7 +7,7 @@ import { Input } from "../ui/input";
 import { SavedChatSection } from "./SavedChatSection";
 import { GroupMembers } from "../GroupMembers";
 
-import { Users, Mail, Pencil, Check, X } from "lucide-react";
+import { Mail, Pencil, Check, X } from "lucide-react";
 
 import type {
   SavedChat,
@@ -23,13 +23,16 @@ 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}".
+ * - 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: either simple or members panel) => non-scroll
+ * - TOP: Welcome + Course + Group block => non-scroll
  * - MIDDLE: Saved Chat => only scroll
- * - BOTTOM: Instructor/TA (click -> Gmail compose) => fixed, non-scroll
+ * - BOTTOM: Instructor/TA => fixed, non-scroll
  */
 
 type Props = {
@@ -70,11 +73,10 @@ type Props = {
   selectedCourse: string;
   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.
+  // preferred: wire to backend rename (POST /api/workspaces/{id}/rename)
+  // fallback: localStorage
   onRenameGroupName?: (workspaceId: string, newName: string) => Promise<void> | void;
 };
 
@@ -167,7 +169,7 @@ export function LeftSidebar(props: Props) {
     return (courseInfo as any)?.name ?? (selectedCourse || "Course");
   }, [courseInfo, selectedCourse]);
 
-  // --------- Group number/name (My Space view) ---------
+  // --------- Group number/name ---------
   const groupNo = useMemo(() => {
     const ws: any = currentWorkspace as any;
     return (
@@ -182,10 +184,7 @@ export function LeftSidebar(props: Props) {
 
   const defaultGroupName = useMemo(() => {
     const ws: any = currentWorkspace as any;
-    return (
-      pickAny(ws, ["groupName", "name", "title"]) ||
-      "My Group"
-    );
+    return pickAny(ws, ["groupName", "name", "title"]) || "My Group";
   }, [currentWorkspace]);
 
   const groupNameStorageKey = useMemo(
@@ -220,7 +219,7 @@ export function LeftSidebar(props: Props) {
         await onRenameGroupName(currentWorkspaceId, next);
         return;
       } catch {
-        // fallback to localStorage if handler fails
+        // fallback below
       }
     }
 
@@ -245,7 +244,7 @@ export function LeftSidebar(props: Props) {
 
   const displayName = useMemo(() => getUserName(user), [user]);
 
-  // Team/Group space detection: we treat "group" as the Team/Group page
+  // Team/Group space detection
   const isTeamSpace = useMemo(() => {
     const st = String(spaceType || "").toLowerCase();
     return st === "group" || st === "team";
@@ -268,7 +267,7 @@ 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 (editable) */}
+          {/* My Space: simple Group No + Group Name */}
           {!isTeamSpace ? (
             <div className="space-y-3">
               <div className="text-[30px] leading-tight font-semibold">
@@ -327,18 +326,68 @@ export function LeftSidebar(props: Props) {
               </div>
             </div>
           ) : (
-            // Team/Group Space: "Group Members (N)" + Invite + list
-            <div className="rounded-xl border bg-[#0B0B0C] text-white overflow-hidden">
+            // Team/Group Space: white card + "Group Name" header + pencil rename + Invite
+            <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 text-[14px] font-medium">
-                  <Users className="w-4 h-4 opacity-90" />
-                  <span>Group Members ({(groupMembers || []).length})</span>
+                <div className="flex items-center gap-2 min-w-0">
+                  <div className="text-[14px] 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]">
+                        {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>
+                  ) : (
+                    <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}
+                        aria-label="Save group name"
+                      >
+                        <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"
+                      >
+                        <X className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  )}
                 </div>
 
                 <Button
                   type="button"
                   variant="secondary"
-                  className="h-8 px-3 text-[13px] bg-white/10 hover:bg-white/15 text-white border border-white/15"
+                  className="h-9 px-3 text-[13px]"
                   onClick={onInviteGroupMembers}
                 >
                   <Mail className="w-4 h-4 mr-2" />
@@ -347,7 +396,7 @@ export function LeftSidebar(props: Props) {
               </div>
 
               <div className="px-3 pb-3">
-                {/* Reuse existing GroupMembers component (old UI) */}
+                {/* Old GroupMembers list UI */}
                 <GroupMembers members={groupMembers as any} />
               </div>
             </div>