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

web/src/components/sidebar/LeftSidebar.tsx

@@ -1,6 +1,5 @@
 // web/src/components/sidebar/LeftSidebar.tsx
 import React, { useEffect, useMemo, useState } from "react";
-import { Separator } from "../ui/separator";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Badge } from "../ui/badge";
@@ -33,9 +32,9 @@ import type { CourseDirectoryItem } from "../../lib/courseDirectory";
 
 import clareAvatar from "../../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png";
 
-// ✅ Theme-compatible divider (light/dark) + guaranteed visibility
+// ✅ Theme-compatible divider (light/dark) + visibility
 const Divider = () => (
-  <div className="w-full border-t border-border/70 dark:border-border my-2 flex-shrink-0" />
+  <div className="w-full border-t border-border/70 dark:border-border flex-shrink-0" />
 );
 
 type Props = {
@@ -77,10 +76,7 @@ type Props = {
   availableCourses: CourseDirectoryItem[];
 
   // optional if you already wired backend
-  onRenameGroupName?: (
-    workspaceId: string,
-    newName: string
-  ) => Promise<void> | void;
+  onRenameGroupName?: (workspaceId: string, newName: string) => Promise<void> | void;
   onRenameGroupNo?: (workspaceId: string, newNo: number) => Promise<void> | void;
 };
 
@@ -146,13 +142,11 @@ export function LeftSidebar(props: Props) {
   const isMyWorkspace = useMemo(() => {
     const ws: any = currentWorkspace as any;
 
-    // 常见 personal 标记（你后端 schema 之后可以对齐其中一个）
     if (ws?.isPersonal === true) return true;
     if (String(ws?.spaceType || "").toLowerCase().includes("my")) return true;
     if (String(ws?.type || "").toLowerCase().includes("my")) return true;
     if (String(ws?.kind || "").toLowerCase().includes("my")) return true;
 
-    // 兜底：workspace id/name 里含 my/personal
     const id = String(ws?.id || "").toLowerCase();
     const name = String(ws?.name || "").toLowerCase();
     if (id.includes("my") || id.includes("personal")) return true;
@@ -162,28 +156,12 @@ export function LeftSidebar(props: Props) {
   }, [currentWorkspace]);
 
   const isTeamSpace = useMemo(() => {
-    // 如果 workspace 明确是 My Space，则强制 false
     if (isMyWorkspace) return false;
-
     const st = String(spaceType || "").toLowerCase();
     return st === "group" || st === "team";
   }, [spaceType, isMyWorkspace]);
 
   // --------- CourseInfo resolution ---------
-const demoGroupMap: Record<string, { name: string; no: number }> = {
-  "Introduction to AI": { name: "Foundations", no: 1 },
-  "Machine Learning": { name: "Model Builders", no: 3 },
-  "Data Visualization": { name: "Storytellers", no: 2 },
-};
-
-const demoGroup = useMemo(() => {
-  return demoGroupMap[courseName] ?? {
-    name: wsGroupName || "My Group",
-    no: toIntOrFallback(wsGroupNo, 1),
-  };
-}, [courseName, wsGroupName, wsGroupNo]);
-
-
   const courseInfo = useMemo((): CourseDirectoryItem | null => {
     const list = Array.isArray(availableCourses) ? availableCourses : [];
 
@@ -193,7 +171,7 @@ const demoGroup = useMemo(() => {
       const hit =
         list.find((c: any) => norm(c.id) === sel) ||
         list.find((c: any) => norm(c.name) === sel);
-      if (hit) return hit;
+      if (hit) return hit as any;
     }
 
     const wsCourse = (currentWorkspace as any)?.courseInfo as
@@ -201,16 +179,10 @@ const demoGroup = useMemo(() => {
       | undefined;
 
     const wsId = norm(wsCourse?.id);
-    if (wsId) {
-      return (list.find((c: any) => norm(c.id) === wsId) ??
-        (wsCourse as any)) as any;
-    }
+    if (wsId) return (list.find((c: any) => norm(c.id) === wsId) ?? (wsCourse as any)) as any;
 
     const wsName = norm(wsCourse?.name);
-    if (wsName) {
-      return (list.find((c: any) => norm(c.name) === wsName) ??
-        (wsCourse as any)) as any;
-    }
+    if (wsName) return (list.find((c: any) => norm(c.name) === wsName) ?? (wsCourse as any)) as any;
 
     return null;
   }, [availableCourses, currentWorkspace, selectedCourse]);
@@ -222,14 +194,7 @@ const demoGroup = useMemo(() => {
   // --------- Group fields ---------
   const wsGroupNo = useMemo(() => {
     const ws: any = currentWorkspace as any;
-    return (
-      ws?.groupNo ??
-      ws?.groupNumber ??
-      ws?.groupIndex ??
-      ws?.group_id ??
-      ws?.groupId ??
-      1
-    );
+    return ws?.groupNo ?? ws?.groupNumber ?? ws?.groupIndex ?? ws?.group_id ?? ws?.groupId ?? 1;
   }, [currentWorkspace]);
 
   const wsGroupName = useMemo(() => {
@@ -237,15 +202,28 @@ const demoGroup = useMemo(() => {
     return pickAny(ws, ["groupName", "name", "title"]) || "My Group";
   }, [currentWorkspace]);
 
-  // ✅ My Space label displayed in the My Space view only
-  const wsSpaceName = useMemo(() => {
-    const ws: any = currentWorkspace as any;
-    return pickAny(ws, ["spaceName", "spaceTitle", "workspaceName"]) || "My Space";
-  }, [currentWorkspace]);
+  // --------- Demo group mapping (My Space only) ---------
+  const demoGroupMap: Record<string, { name: string; no: number }> = useMemo(
+    () => ({
+      "Introduction to AI": { name: "My Space", no: 1 },
+      "Machine Learning": { name: "Study Sprint", no: 3 },
+      "Data Visualization": { name: "Design Lab", no: 2 },
+    }),
+    []
+  );
+
+  const demoGroup = useMemo(() => {
+    const hit = demoGroupMap[courseName];
+    if (hit) return hit;
+    return {
+      name: wsGroupName || "My Group",
+      no: toIntOrFallback(wsGroupNo, 1),
+    };
+  }, [demoGroupMap, courseName, wsGroupName, wsGroupNo]);
 
   const memberCount = (groupMembers || []).length;
 
-  // localStorage keys (only used in Team space editing)
+  // localStorage keys (Team space editing)
   const groupNameStorageKey = useMemo(
     () => `clare_group_name__${currentWorkspaceId}`,
     [currentWorkspaceId]
@@ -263,9 +241,7 @@ const demoGroup = useMemo(() => {
   // 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))
-  );
+  const [draftGroupNo, setDraftGroupNo] = useState<string>(String(toIntOrFallback(wsGroupNo, 1)));
 
   // Invite dialog state
   const [inviteOpen, setInviteOpen] = useState(false);
@@ -281,21 +257,17 @@ const demoGroup = useMemo(() => {
     setInviteOpen(false);
   };
 
-  // hydrate persisted editable values (only meaningful in Team space)
+  // hydrate persisted editable values (Team space)
   useEffect(() => {
     const storedName =
-      typeof window !== "undefined"
-        ? window.localStorage.getItem(groupNameStorageKey)
-        : null;
+      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;
+      typeof window !== "undefined" ? window.localStorage.getItem(groupNoStorageKey) : null;
     const no =
       storedNo && storedNo.trim()
         ? toIntOrFallback(storedNo, toIntOrFallback(wsGroupNo, 1))
@@ -349,7 +321,7 @@ const demoGroup = useMemo(() => {
     setEditingGroupNo(false);
   };
 
-  // --------- Contacts (fixed bottom) ---------
+  // --------- Contacts ---------
   const instructorName = (courseInfo as any)?.instructor?.name ?? "N/A";
   const instructorEmail = String((courseInfo as any)?.instructor?.email ?? "").trim();
 
@@ -359,50 +331,37 @@ const demoGroup = useMemo(() => {
   const displayName = useMemo(() => getUserName(user), [user]);
 
   return (
-    // ✅ Theme-safe background/text (fixes dark mode invisibility)
     <div className="h-full w-full flex flex-col min-h-0 bg-background text-foreground">
       {/* ================= TOP (non-scroll) ================= */}
       <div className="flex-shrink-0">
         {/* Welcome */}
         <div className="px-4 pt-6 pb-6">
-          <div className="text-[34px] leading-tight font-semibold">
-            Welcome, {displayName}!
-          </div>
+          <div className="text-[34px] leading-tight font-semibold">Welcome, {displayName}!</div>
         </div>
 
-        {/* 1) Welcome ↔ Course divider */}
-        <div className="my-6">
+        {/* Welcome ↔ Course divider + spacing */}
+        <div className="mt-4 mb-6">
           <Divider />
         </div>
 
-
         {/* Course + Group */}
-        <div className="px-4 pt-10 pb-10 space-y-4">
+        <div className="px-4 pt-8 pb-10 space-y-4">
           <div className="text-[30px] leading-tight font-semibold">{courseName}</div>
 
-
           {/* ===== My Space ===== */}
           {!isTeamSpace ? (
             <div className="space-y-2">
-              <div className="text-[18px] font-semibold text-foreground truncate">
-                {demoGroup.name}
-              </div>
-          
-              <div className="text-[18px] font-semibold text-foreground">
-                Group {demoGroup.no}
-              </div>
+              <div className="text-[18px] font-semibold truncate">{demoGroup.name}</div>
+              <div className="text-[18px] font-semibold">Group {demoGroup.no}</div>
             </div>
           ) : (
-
-            /* ===== Team/Group: current style unchanged ===== */
+            /* ===== 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 editable */}
                 {!editingGroupName ? (
                   <div className="flex items-center gap-2">
-                    <div className="text-[18px] font-semibold text-foreground truncate">
-                      {groupName || "My Group"}
-                    </div>
+                    <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"
@@ -424,20 +383,10 @@ const demoGroup = useMemo(() => {
                       className="h-8 w-[220px]"
                       autoFocus
                     />
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      className="h-8 w-8"
-                      onClick={saveGroupName}
-                    >
+                    <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}
-                    >
+                    <Button size="icon" variant="ghost" className="h-8 w-8" onClick={cancelGroupName}>
                       <X className="w-4 h-4" />
                     </Button>
                   </div>
@@ -449,7 +398,7 @@ const demoGroup = useMemo(() => {
                     <Users className="w-4 h-4 text-muted-foreground" />
 
                     {!editingGroupNo ? (
-                      <div className="text-[16px] text-foreground font-medium">
+                      <div className="text-[16px] font-medium">
                         Group{" "}
                         <span className="inline-flex items-center gap-1">
                           {groupNo}
@@ -466,9 +415,7 @@ const demoGroup = useMemo(() => {
                       </div>
                     ) : (
                       <div className="flex items-center gap-2">
-                        <div className="text-[16px] text-foreground font-medium">
-                          Group
-                        </div>
+                        <div className="text-[16px] font-medium">Group</div>
                         <Input
                           value={draftGroupNo}
                           onChange={(e) => setDraftGroupNo(e.target.value)}
@@ -479,23 +426,11 @@ const demoGroup = useMemo(() => {
                           className="h-8 w-[80px]"
                           autoFocus
                         />
-                        <div className="text-[16px] text-foreground font-medium">
-                          ({memberCount})
-                        </div>
-                        <Button
-                          size="icon"
-                          variant="ghost"
-                          className="h-8 w-8"
-                          onClick={saveGroupNo}
-                        >
+                        <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}
-                        >
+                        <Button size="icon" variant="ghost" className="h-8 w-8" onClick={cancelGroupNo}>
                           <X className="w-4 h-4" />
                         </Button>
                       </div>
@@ -539,11 +474,7 @@ const demoGroup = useMemo(() => {
                         }`}
                       >
                         {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>
                         )}
@@ -551,24 +482,17 @@ const demoGroup = useMemo(() => {
 
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center gap-2">
-                          <p className="text-sm truncate text-foreground">
-                            {name}
-                          </p>
+                          <p className="text-sm truncate">{name}</p>
                           {isAI && (
                             <Badge variant="secondary" className="text-xs">
                               AI
                             </Badge>
                           )}
                         </div>
-                        <p className="text-xs text-muted-foreground truncate">
-                          {email}
-                        </p>
+                        <p className="text-xs text-muted-foreground truncate">{email}</p>
                       </div>
 
-                      <div
-                        className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0"
-                        title="Online"
-                      />
+                      <div className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" title="Online" />
                     </div>
                   );
                 })}
@@ -577,10 +501,11 @@ const demoGroup = useMemo(() => {
           )}
         </div>
 
-        {/* 2) Group ↔ Saved Chat divider */}
-        <div className="my-8">
+        {/* Course/Group ↔ Saved Chat divider + spacing */}
+        <div className="mt-2 mb-8">
           <Divider />
         </div>
+      </div>
 
       {/* ================= MIDDLE (only scroll) ================= */}
       <div className="flex-1 min-h-0 overflow-hidden">
@@ -597,12 +522,11 @@ const demoGroup = useMemo(() => {
 
       {/* ================= BOTTOM (fixed, non-scroll) ================= */}
       <div className="flex-shrink-0">
-        {/* 3) Saved Chat ↔ Instructor divider */}
-        <div className="my-6">
+        {/* Saved Chat ↔ Instructor divider + spacing */}
+        <div className="mt-6 mb-4">
           <Divider />
         </div>
 
-
         <div className="px-4 py-4 space-y-2 text-[16px]">
           <div className="text-muted-foreground">
             Instructor:&nbsp;
@@ -646,17 +570,12 @@ const demoGroup = useMemo(() => {
         </div>
       </div>
 
-      {/* Invite Dialog (Team space only; harmless if opened elsewhere but button only exists there) */}
+      {/* Invite Dialog */}
       <Dialog open={inviteOpen} onOpenChange={setInviteOpen}>
-        <DialogContent
-          className="w-[600px] max-w-[600px] sm:max-w-[600px]"
-          style={{ maxWidth: 600 }}
-        >
+        <DialogContent className="w-[600px] max-w-[600px] sm:max-w-[600px]" style={{ maxWidth: 600 }}>
           <DialogHeader>
             <DialogTitle>Invite member</DialogTitle>
-            <DialogDescription>
-              Send a quick email invite with the team details.
-            </DialogDescription>
+            <DialogDescription>Send a quick email invite with the team details.</DialogDescription>
           </DialogHeader>
           <div className="space-y-3">
             <Input