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

web/src/components/sidebar/LeftSidebar.tsx

@@ -1,5 +1,5 @@
 // web/src/components/sidebar/LeftSidebar.tsx
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Badge } from "../ui/badge";
@@ -7,7 +7,6 @@ import { Badge } from "../ui/badge";
 import { SavedChatSection } from "./SavedChatSection";
 
 import { MailPlus, Users, GraduationCap } from "lucide-react";
-
 import { toast } from "sonner";
 
 import {
@@ -106,9 +105,27 @@ function toIntOrFallback(v: any, fb: number) {
   return fb;
 }
 
+/**
+ * Important:
+ * - The "pencil" you see near Group Name can be coming from DATA (workspace/group name string),
+ *   not from lucide icons. This sanitizes display text only.
+ */
+function sanitizeGroupDisplayName(v: any) {
+  const s = String(v ?? "");
+  // Remove common pencil/pen emoji variants (safe no-op if none)
+  return s
+    .replaceAll("✏️", "")
+    .replaceAll("✏", "")
+    .replaceAll("🖊️", "")
+    .replaceAll("🖊", "")
+    .replaceAll("🖋️", "")
+    .replaceAll("🖋", "")
+    .replace(/\(\s*✏️?\s*\)/g, "")
+    .trim();
+}
+
 export function LeftSidebar(props: Props) {
   const {
-    user,
     isLoggedIn,
     spaceType,
     groupMembers,
@@ -120,8 +137,6 @@ export function LeftSidebar(props: Props) {
     workspaces,
     selectedCourse,
     availableCourses,
-    onRenameGroupName,
-    onRenameGroupNo,
   } = props;
 
   const currentWorkspace = useMemo(
@@ -178,7 +193,7 @@ export function LeftSidebar(props: Props) {
   }, [availableCourses, currentWorkspace, selectedCourse]);
 
   const courseName = useMemo(() => {
-    return (courseInfo as any)?.name ?? (selectedCourse || "Course");
+    return sanitizeGroupDisplayName((courseInfo as any)?.name ?? (selectedCourse || "Course"));
   }, [courseInfo, selectedCourse]);
 
   // --------- Group fields ---------
@@ -189,7 +204,8 @@ export function LeftSidebar(props: Props) {
 
   const wsGroupName = useMemo(() => {
     const ws: any = currentWorkspace as any;
-    return pickAny(ws, ["groupName", "name", "title"]) || "My Group";
+    const raw = pickAny(ws, ["groupName", "name", "title"]) || "My Group";
+    return sanitizeGroupDisplayName(raw);
   }, [currentWorkspace]);
 
   // --------- Demo group mapping (My Space only) ---------
@@ -213,11 +229,9 @@ export function LeftSidebar(props: Props) {
 
   const memberCount = (groupMembers || []).length;
 
-  //  ✅ YYYYYYYYYYYY Name and Number
-  const groupName = useMemo(() => wsGroupName || "YYY", [wsGroupName]); 
+  const groupName = useMemo(() => wsGroupName || "My Group", [wsGroupName]);
   const groupNo = useMemo(() => toIntOrFallback(wsGroupNo, 1), [wsGroupNo]);
 
-
   // Invite dialog state
   const [inviteOpen, setInviteOpen] = useState(false);
   const [inviteEmail, setInviteEmail] = useState("");
@@ -232,27 +246,24 @@ export function LeftSidebar(props: Props) {
     setInviteOpen(false);
   };
 
-
   // --------- Contacts ---------
-  const instructorName = (courseInfo as any)?.instructor?.name ?? "N/A";
+  const instructorName = sanitizeGroupDisplayName((courseInfo as any)?.instructor?.name ?? "N/A");
   const instructorEmail = String((courseInfo as any)?.instructor?.email ?? "").trim();
 
-  const taName = (courseInfo as any)?.teachingAssistant?.name ?? "N/A";
+  const taName = sanitizeGroupDisplayName((courseInfo as any)?.teachingAssistant?.name ?? "N/A");
   const taEmail = String((courseInfo as any)?.teachingAssistant?.email ?? "").trim();
 
   return (
     <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 */}
-
         <div className="mt-2 mb-4">
           <Divider />
         </div>
 
         {/* Course + Group */}
         <div className="px-4 pt-5 pb-6 space-y-4">
-          {/* Course row with icon (single-color, no container/background) */}
+          {/* Course row with icon */}
           <div className="flex items-start gap-3">
             <div className="w-6 flex items-start justify-center flex-shrink-0 pt-[2px]">
               <GraduationCap className="w-5 h-5 text-muted-foreground" />
@@ -260,12 +271,14 @@ export function LeftSidebar(props: Props) {
             <div className="text-[22px] leading-snug font-semibold truncate">{courseName}</div>
           </div>
 
-          {/* ===== My Space (beautified) ===== */}
+          {/* ===== My Space ===== */}
           {!isTeamSpace ? (
             <div className="space-y-2">
               <div className="flex items-center justify-between text-[15px]">
                 <span className="text-muted-foreground">Group Name:</span>
-                <span className="font-semibold truncate max-w-[60%] text-right">{demoGroup.name}</span>
+                <span className="font-semibold truncate max-w-[60%] text-right">
+                  {sanitizeGroupDisplayName(demoGroup.name)}
+                </span>
               </div>
               <div className="flex items-center justify-between text-[15px]">
                 <span className="text-muted-foreground">Group Number:</span>
@@ -273,19 +286,18 @@ export function LeftSidebar(props: Props) {
               </div>
             </div>
           ) : (
-            /* ===== Team/Group (editable card) ===== */
+            /* ===== Team/Group ===== */
             <div className="rounded-2xl border bg-background overflow-hidden">
               <div className="px-4 pt-4 pb-3 space-y-3">
-                {/* Line 1: group name (read-only) */}
+                {/* Line 1: group name (read-only, NO pencil) */}
                 <div className="flex items-center gap-2">
                   <div className="text-[18px] font-semibold truncate">{groupName}</div>
                 </div>
 
-                {/* Line 2: Group {no}(✏️) ({count}) + Invite */}
+                {/* 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" />
-                    
                     <div className="text-[16px] font-medium">
                       Group <span className="font-semibold">{groupNo}</span> ({memberCount})
                     </div>
@@ -306,7 +318,7 @@ export function LeftSidebar(props: Props) {
               <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 name = sanitizeGroupDisplayName(String((member as any).name || ""));
                   const email = String((member as any).email || "");
                   const initials = name
                     ? name