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

web/src/components/sidebar/LeftSidebar.tsx

@@ -6,7 +6,8 @@ import { Badge } from "../ui/badge";
 
 import { SavedChatSection } from "./SavedChatSection";
 
-import { Pencil, Check, X, MailPlus, Users, GraduationCap } from "lucide-react";
+import { MailPlus, Users, GraduationCap } from "lucide-react";
+
 import { toast } from "sonner";
 
 import {
@@ -212,25 +213,10 @@ export function LeftSidebar(props: Props) {
 
   const memberCount = (groupMembers || []).length;
 
-  // localStorage keys (Team space editing)
-  const groupNameStorageKey = useMemo(
-    () => `clare_group_name__${currentWorkspaceId}`,
-    [currentWorkspaceId]
-  );
-  const groupNoStorageKey = useMemo(
-    () => `clare_group_no__${currentWorkspaceId}`,
-    [currentWorkspaceId]
-  );
-
-  // group name (Team space editable)
-  const [groupName, setGroupName] = useState<string>(wsGroupName);
-  const [editingGroupName, setEditingGroupName] = useState(false);
-  const [draftGroupName, setDraftGroupName] = useState<string>(wsGroupName);
+  //  ✅ YYYYYYYYYYYY Name and Number
+  const groupName = useMemo(() => wsGroupName || "YYY", [wsGroupName]); 
+  const groupNo = useMemo(() => toIntOrFallback(wsGroupNo, 1), [wsGroupNo]);
 
-  // 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
   const [inviteOpen, setInviteOpen] = useState(false);
@@ -246,69 +232,6 @@ export function LeftSidebar(props: Props) {
     setInviteOpen(false);
   };
 
-  // hydrate persisted editable values (Team space)
-  useEffect(() => {
-    const storedName =
-      typeof window !== "undefined" ? window.localStorage.getItem(groupNameStorageKey) : null;
-    const name = storedName && storedName.trim() ? storedName : wsGroupName;
-    setGroupName(name);
-    setDraftGroupName(name);
-    setEditingGroupName(false);
-
-    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";
-    setGroupName(next);
-    setDraftGroupName(next);
-    setEditingGroupName(false);
-
-    if (onRenameGroupName) {
-      try {
-        await onRenameGroupName(currentWorkspaceId, next);
-        return;
-      } catch {}
-    }
-    try {
-      window.localStorage.setItem(groupNameStorageKey, next);
-    } catch {}
-  };
-
-  const cancelGroupName = () => {
-    setDraftGroupName(groupName);
-    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 {}
-    }
-    try {
-      window.localStorage.setItem(groupNoStorageKey, String(nextNo));
-    } catch {}
-  };
-
-  const cancelGroupNo = () => {
-    setDraftGroupNo(String(groupNo));
-    setEditingGroupNo(false);
-  };
 
   // --------- Contacts ---------
   const instructorName = (courseInfo as any)?.instructor?.name ?? "N/A";
@@ -321,7 +244,7 @@ export function LeftSidebar(props: Props) {
     <div className="h-full w-full flex flex-col min-h-0 bg-background text-foreground">
       {/* ================= TOP (non-scroll) ================= */}
       <div className="flex-shrink-0">
-        {/* ✅ removed Welcome section entirely */}
+        {/* removed Welcome section entirely */}
 
         <div className="mt-2 mb-4">
           <Divider />
@@ -353,83 +276,19 @@ export function LeftSidebar(props: Props) {
             /* ===== Team/Group (editable card) ===== */
             <div className="rounded-2xl border bg-background overflow-hidden">
               <div className="px-4 pt-4 pb-3 space-y-3">
-                {/* Line 1: group name editable */}
-                {!editingGroupName ? (
-                  <div className="flex items-center gap-2">
-                    <div className="text-[18px] font-semibold truncate">{groupName || "My Group"}</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>
-                )}
+                {/* Line 1: group name (read-only) */}
+                <div className="flex items-center gap-2">
+                  <div className="text-[18px] font-semibold truncate">{groupName}</div>
+                </div>
 
                 {/* Line 2: Group {no}(✏️) ({count}) + Invite */}
                 <div className="flex items-center justify-between gap-3">
                   <div className="flex items-center gap-2">
                     <Users className="w-4 h-4 text-muted-foreground" />
-
-                    {!editingGroupNo ? (
-                      <div className="text-[16px] 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] font-medium">Group</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-[80px]"
-                          autoFocus
-                        />
-                        <div className="text-[16px] font-medium">({memberCount})</div>
-                        <Button size="icon" variant="ghost" className="h-8 w-8" onClick={saveGroupNo}>
-                          <Check className="w-4 h-4" />
-                        </Button>
-                        <Button size="icon" variant="ghost" className="h-8 w-8" onClick={cancelGroupNo}>
-                          <X className="w-4 h-4" />
-                        </Button>
-                      </div>
-                    )}
+                    
+                    <div className="text-[16px] font-medium">
+                      Group <span className="font-semibold">{groupNo}</span> ({memberCount})
+                    </div>
                   </div>
 
                   <Button