Update web/src/App.tsx

web/src/App.tsx

@@ -156,9 +156,14 @@ function App() {
 
   const [user, setUser] = useState<User | null>(null);
 
-  const [currentCourseId, setCurrentCourseId] = useState<string>(
-    () => localStorage.getItem("myspace_selected_course") || "course1"
-  );
+  // -------------------------
+  // ✅ Course selection (stable)
+  // -------------------------
+  const MYSPACE_COURSE_KEY = "myspace_selected_course";
+
+  const [currentCourseId, setCurrentCourseId] = useState<string>(() => {
+    return localStorage.getItem(MYSPACE_COURSE_KEY) || "course1";
+  });
 
   const availableCourses: CourseInfo[] = [
     {
@@ -393,7 +398,6 @@ function App() {
 
   // =========================
   // ✅ 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);
@@ -414,11 +418,8 @@ function App() {
     []
   );
 
-  // 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) => {
@@ -426,8 +427,6 @@ function App() {
 
       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,
@@ -436,12 +435,10 @@ function App() {
     });
   }, [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];
@@ -449,34 +446,85 @@ function App() {
     return groupMembers;
   }, [currentWorkspaceId, mySpaceUserMember, clareMember, groupMembers]);
 
+  // =========================
+  // ✅ Stable course switching logic
+  // =========================
+
+  // Track whether we have hydrated My Space course selection for the current "visit"
+  const didHydrateMySpaceRef = useRef(false);
 
+  // Wrapper: only allow manual course change in My Space (individual)
+  const handleCourseChange = (nextCourseId: string) => {
+    if (!nextCourseId) return;
 
+    // If we are inside a group course workspace, course is bound to workspace; ignore manual changes to avoid flicker
+    if (currentWorkspace.type === "group" && currentWorkspace.category === "course") {
+      return;
+    }
+
+    // In My Space (individual): update state immediately and persist
+    setCurrentCourseId(nextCourseId);
+    try {
+      localStorage.setItem(MYSPACE_COURSE_KEY, nextCourseId);
+    } catch {
+      // ignore
+    }
+  };
 
+  // Sync courseId from group-workspace (authoritative)
+  // AND hydrate My Space from localStorage only once per entry (no loops)
   useEffect(() => {
     if (!currentWorkspace) return;
-  
-    // Group course workspace: courseId 应该由 workspace 决定（单向写入）
+
+    // Group course workspace: force to workspace course id
     if (currentWorkspace.type === "group" && currentWorkspace.category === "course") {
       const cid = currentWorkspace.courseInfo?.id;
       if (cid && cid !== currentCourseId) setCurrentCourseId(cid);
+      didHydrateMySpaceRef.current = false; // reset for next time we go back to My Space
       return;
     }
-  
-    // Individual workspace: 只在 currentCourseId 为空/无效时才从 localStorage hydrate
+
+    // My Space: hydrate only once when entering My Space
     if (currentWorkspace.type === "individual") {
-      const saved = localStorage.getItem("myspace_selected_course");
-      if (saved && saved !== currentCourseId) setCurrentCourseId(saved);
-    }
-  }, [currentWorkspaceId, currentWorkspace, currentCourseId]);
+      if (!didHydrateMySpaceRef.current) {
+        didHydrateMySpaceRef.current = true;
+
+        const saved = localStorage.getItem(MYSPACE_COURSE_KEY);
+        const valid =
+          saved && availableCourses.some((c) => c.id === saved) ? saved : undefined;
 
+        const next = valid || currentCourseId || "course1";
+        if (next !== currentCourseId) setCurrentCourseId(next);
+      }
+    }
+  }, [
+    currentWorkspaceId,
+    currentWorkspace?.type,
+    currentWorkspace?.category,
+    currentWorkspace?.courseInfo?.id,
+    // include availableCourses so validation works
+    availableCourses,
+    currentCourseId,
+    currentWorkspace,
+  ]);
 
+  // Persist My Space course selection whenever it changes (defensive, keeps FE consistent)
+  useEffect(() => {
+    if (currentWorkspace?.type !== "individual") return;
+    try {
+      const prev = localStorage.getItem(MYSPACE_COURSE_KEY);
+      if (prev !== currentCourseId) localStorage.setItem(MYSPACE_COURSE_KEY, currentCourseId);
+    } catch {
+      // ignore
+    }
+  }, [currentCourseId, currentWorkspace?.type]);
 
   useEffect(() => {
     document.documentElement.classList.toggle("dark", isDarkMode);
     localStorage.setItem("theme", isDarkMode ? "dark" : "light");
   }, [isDarkMode]);
 
-  // ✅ lock outer page scroll (defensive; your index.css already does this)
+  // ✅ lock outer page scroll
   useEffect(() => {
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -733,10 +781,6 @@ function App() {
 
   const handleRemoveFile = (file: File) => setUploadedFiles((prev) => prev.filter((u) => u.file !== file));
 
-  // ✅ CRITICAL FIX:
-  // - use functional setState to avoid stale closure
-  // - do NOT overwrite newly-added files
-  // - safely pick the target file inside the updater
   const handleFileTypeChange = async (index: number, type: FileType) => {
     if (!user) return;
 
@@ -1214,7 +1258,7 @@ function App() {
                 }
                 leftPanelVisible={leftPanelVisible}
                 currentCourseId={currentCourseId}
-                onCourseChange={setCurrentCourseId}
+                onCourseChange={handleCourseChange}
                 availableCourses={availableCourses}
                 showReviewBanner={showReviewBanner}
                 onReviewActivity={handleReviewActivity}