Update web/src/App.tsx

web/src/App.tsx

@@ -1,7 +1,7 @@
 // web/src/App.tsx
 import React, { useState, useEffect, useRef, useMemo } from "react";
 import { Header } from "./components/Header";
-import { LeftSidebar } from "./components/LeftSidebar";
+// import { LeftSidebar } from "./components/LeftSidebar";
 import { ChatArea } from "./components/ChatArea";
 import { LoginScreen } from "./components/LoginScreen";
 import { ProfileEditor } from "./components/ProfileEditor";
@@ -11,10 +11,7 @@ import { X, ChevronLeft, ChevronRight } from "lucide-react";
 import { Button } from "./components/ui/button";
 import { Toaster } from "./components/ui/sonner";
 import { toast } from "sonner";
-// import { LeftSidebar } from "./components/sidebar/LeftSidebar";
-
-// import { COURSE_DIRECTORY } from "./lib/courseDirectory";
-
+import { LeftSidebar } from "./components/sidebar/LeftSidebar";
 
 // backend API bindings
 import { apiChat, apiUpload, apiMemoryline } from "./lib/api";
@@ -394,6 +391,64 @@ function App() {
 
   const spaceType: SpaceType = currentWorkspace?.type || "individual";
 
+  // =========================
+  // ✅ Scheme 1: "My Space" uses Group-like sidebar view model
+  // - Only affects LeftSidebar rendering (NOT ChatArea / Header logic)
+  // =========================
+  const mySpaceCourseInfo = useMemo(() => {
+    return availableCourses.find((c) => c.id === currentCourseId);
+  }, [availableCourses, currentCourseId]);
+
+  const mySpaceUserMember: GroupMember | null = useMemo(() => {
+    if (!user) return null;
+    return {
+      id: user.email,
+      name: user.name,
+      email: user.email,
+      avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(user.email)}`,
+    };
+  }, [user]);
+
+  const clareMember: GroupMember = useMemo(
+    () => ({ id: "clare", name: "Clare AI", email: "clare@ai.assistant", isAI: true }),
+    []
+  );
+
+  // For sidebar only: treat "My Space" as a course/group-like workspace so Group UI blocks can render.
+  const sidebarWorkspaces: Workspace[] = useMemo(() => {
+    if (!workspaces?.length) return workspaces;
+
+    // If user is not ready, do not synthesize
+    if (!mySpaceUserMember) return workspaces;
+
+    return workspaces.map((w) => {
+      if (w.id !== "individual") return w;
+
+      return {
+        ...w,
+        // keep type as "individual" to avoid breaking other list logic,
+        // but fill the fields that Group UI depends on
+        category: "course",
+        courseName: mySpaceCourseInfo?.name || w.courseName || "My Course",
+        courseInfo: mySpaceCourseInfo,
+        members: [clareMember, mySpaceUserMember],
+      };
+    });
+  }, [workspaces, mySpaceCourseInfo, mySpaceUserMember, clareMember]);
+
+  // Some sidebars use spaceType to gate rendering; for My Space we present it as "group" in sidebar only.
+  const sidebarSpaceType: SpaceType = useMemo(() => {
+    return currentWorkspaceId === "individual" ? "group" : spaceType;
+  }, [currentWorkspaceId, spaceType]);
+
+  // Sidebar-only "members" list
+  const sidebarGroupMembers: GroupMember[] = useMemo(() => {
+    if (currentWorkspaceId === "individual" && mySpaceUserMember) {
+      return [clareMember, mySpaceUserMember];
+    }
+    return groupMembers;
+  }, [currentWorkspaceId, mySpaceUserMember, clareMember, groupMembers]);
+
   useEffect(() => {
     if (!currentWorkspace) return;
 
@@ -674,9 +729,8 @@ function App() {
     const newFiles: UploadedFile[] = files.map((file) => ({ file, type: "other" as FileType }));
     setUploadedFiles((prev) => [...prev, ...newFiles]);
   };
-  
 
-  const handleRemoveFile = (file: File) => setUploadedFiles(prev => prev.filter(u => u.file !== file));
+  const handleRemoveFile = (file: File) => setUploadedFiles((prev) => prev.filter((u) => u.file !== file));
 
   // ✅ CRITICAL FIX:
   // - use functional setState to avoid stale closure
@@ -723,11 +777,7 @@ function App() {
 
         return chat.messages.every((savedMsg, idx) => {
           const currentMsg = messages[idx];
-          return (
-            savedMsg.id === currentMsg.id &&
-            savedMsg.role === currentMsg.role &&
-            savedMsg.content === currentMsg.content
-          );
+          return savedMsg.id === currentMsg.id && savedMsg.role === currentMsg.role && savedMsg.content === currentMsg.content;
         });
       }) || null
     );
@@ -756,7 +806,10 @@ function App() {
       return;
     }
 
-    const title = `Chat - ${chatMode === "ask" ? "Ask" : chatMode === "review" ? "Review" : "Quiz"} - ${new Date().toLocaleDateString()}`;
+    const title = `Chat - ${
+      chatMode === "ask" ? "Ask" : chatMode === "review" ? "Review" : "Quiz"
+    } - ${new Date().toLocaleDateString()}`;
+
     const newChat: SavedChat = {
       id: Date.now().toString(),
       title,
@@ -891,12 +944,7 @@ function App() {
     toast.success("Removed from saved items");
   };
 
-  const handleCreateWorkspace = (payload: {
-    name: string;
-    category: "course" | "personal";
-    courseId?: string;
-    invites: string[];
-  }) => {
+  const handleCreateWorkspace = (payload: { name: string; category: "course" | "personal"; courseId?: string; invites: string[] }) => {
     const id = `group-${Date.now()}`;
     const avatar = `https://api.dicebear.com/7.x/shapes/svg?seed=${encodeURIComponent(payload.name)}`;
 
@@ -1059,8 +1107,8 @@ function App() {
                   language={language}
                   onLearningModeChange={setLearningMode}
                   onLanguageChange={setLanguage}
-                  spaceType={spaceType}
-                  groupMembers={groupMembers}
+                  spaceType={sidebarSpaceType}
+                  groupMembers={sidebarGroupMembers}
                   user={user}
                   onLogin={setUser}
                   onLogout={() => setUser(null)}
@@ -1075,7 +1123,7 @@ function App() {
                   onDeleteSavedChat={handleDeleteSavedChat}
                   onRenameSavedChat={handleRenameSavedChat}
                   currentWorkspaceId={currentWorkspaceId}
-                  workspaces={workspaces}
+                  workspaces={sidebarWorkspaces}
                   selectedCourse={currentCourseId}
                   availableCourses={availableCourses}
                 />
@@ -1106,8 +1154,8 @@ function App() {
                 language={language}
                 onLearningModeChange={setLearningMode}
                 onLanguageChange={setLanguage}
-                spaceType={spaceType}
-                groupMembers={groupMembers}
+                spaceType={sidebarSpaceType}
+                groupMembers={sidebarGroupMembers}
                 user={user}
                 onLogin={setUser}
                 onLogout={() => setUser(null)}
@@ -1122,7 +1170,7 @@ function App() {
                 onDeleteSavedChat={handleDeleteSavedChat}
                 onRenameSavedChat={handleRenameSavedChat}
                 currentWorkspaceId={currentWorkspaceId}
-                workspaces={workspaces}
+                workspaces={sidebarWorkspaces}
                 selectedCourse={currentCourseId}
                 availableCourses={availableCourses}
               />