feat: integrate learning module

src/pages/ModuleSelection/index.tsx

@@ -1,13 +1,17 @@
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import moduleCanvasImage from '@/assets/module-canvas-neon.jpg';
 import moduleGameImage from '@/assets/module-game.jpg';
 import moduleLearningImage from '@/assets/module-learning.jpg';
 import moduleRobotImage from '@/assets/module-robot.jpg';
 import logoWordmarkSource from '@/assets/makelore-wordmark-source.png';
+import { UserProfileDialog } from '@/components/profile/UserProfileDialog';
+import { useCurrentUserProfile } from '@/hooks/use-current-user-profile';
 import { aiModules, type AiModuleId } from '@/lib/ai-modules';
 import { getAuthUserDisplayName } from '@/lib/auth-user-display';
 import { cn } from '@/lib/utils';
 import { useAuthStore } from '@/stores/auth';
+import { getUserProfileDisplayName } from '@/stores/user-profile';
 
 const moduleSelectionContent: Record<AiModuleId, { label: string; image: string; imageAlt: string }> = {
   programming: { label: 'Code 编程', image: moduleGameImage, imageAlt: '游戏创作工作台' },
@@ -20,7 +24,18 @@ export function ModuleSelection({ authRequired = true }: { authRequired?: boolea
   const navigate = useNavigate();
   const authUser = useAuthStore((state) => state.user);
   const authenticated = useAuthStore((state) => state.isAuthenticated());
-  const userDisplayName = getAuthUserDisplayName(authUser);
+  const {
+    userProfile,
+    profileRequired,
+    profileSyncError,
+  } = useCurrentUserProfile(authRequired);
+  const [profileDialogOpen, setProfileDialogOpen] = useState(false);
+  const userDisplayName = getUserProfileDisplayName(userProfile) || getAuthUserDisplayName(authUser);
+
+  const [dismissedSyncError, setDismissedSyncError] = useState<string | null>(null);
+  const profileDialogShouldBeOpen = profileDialogOpen
+    || profileRequired
+    || Boolean(profileSyncError && dismissedSyncError !== profileSyncError);
 
   const openModule = (route: string | null) => {
     if (!route) return;
@@ -92,6 +107,20 @@ export function ModuleSelection({ authRequired = true }: { authRequired?: boolea
           </section>
         </div>
       </div>
+      <UserProfileDialog
+        open={profileDialogShouldBeOpen}
+        required={profileRequired}
+        syncError={profileSyncError}
+        onOpenChange={(open) => {
+          if (open) {
+            setDismissedSyncError(null);
+            setProfileDialogOpen(true);
+            return;
+          }
+          if (profileSyncError) setDismissedSyncError(profileSyncError);
+          setProfileDialogOpen(false);
+        }}
+      />
     </main>
   );
 }