feat: enhance MePage and add layout improvements

Add activity stats display to MePage and include additional
layout enhancements for consistent page structure.

src/app/layout.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useState, useMemo, useRef } from "react";
 import { Outlet } from "react-router-dom";
+import { useQueryClient } from "@tanstack/react-query";
 import { useCurrentUserQuery } from "@/hooks/useAuth";
 import { useProjectsQuery } from "@/hooks/useProjectsQuery";
+import { issueSummary } from "@/client/api";
 import { SettingsModalContext } from "@/components/settings/SettingsModalContext";
 import { SettingsModal } from "@/components/settings/SettingsModal";
 import { SettingsDataCacheProvider } from "@/components/settings/SettingsDataCache";
@@ -18,6 +20,7 @@ const WS_CONFIG = {
 export function RootLayout() {
   const { data: user } = useCurrentUserQuery();
   useProjectsQuery(); // Keep query active for caching
+  const queryClient = useQueryClient();
   const wsClientRef = useRef<WsClient | null>(null);
 
   const [showSettingsModal, setShowSettingsModal] = useState(false);
@@ -68,6 +71,25 @@ export function RootLayout() {
     };
   }, [user]);
 
+  // Prefetch common data for faster navigation
+  useEffect(() => {
+    if (!user) return;
+    // Prefetch issue summaries for each project (cached by React Query)
+    const projects = queryClient.getQueryData(["projects"]);
+    if (Array.isArray(projects)) {
+      for (const project of projects.slice(0, 5)) {
+        const name = typeof project === "string" ? project : (project as { name?: string }).name;
+        if (name) {
+          queryClient.prefetchQuery({
+            queryKey: ["issueSummary", name],
+            queryFn: () => issueSummary(name).then(r => r.data?.data ?? { total: 0, open: 0, closed: 0 }),
+            staleTime: 5 * 60 * 1000,
+          });
+        }
+      }
+    }
+  }, [user, queryClient]);
+
   return (
     <SettingsDataCacheProvider>
       <SettingsModalContext.Provider value={modalCtx}>

src/app/me/MePage.tsx

@@ -19,6 +19,7 @@ import { UserCardList } from "./components/UserCardList";
 import { FollowerCardList } from "./components/FollowerCardList";
 import { RepoList } from "./components/RepoList";
 import { ProjectList } from "./components/ProjectList";
+import { NotificationList } from "./components/NotificationList";
 import { Loader2 } from "lucide-react";
 import { useCurrentUserQuery } from "@/hooks/useAuth";
 
@@ -43,6 +44,7 @@ export function MePage() {
   else if (path.includes("/stars")) activeSection = "stars";
   else if (path.includes("/following")) activeSection = "following";
   else if (path.includes("/followers")) activeSection = "followers";
+  else if (path.includes("/notify")) activeSection = "notify";
 
   // Conditional fetching for specific sections
   const { data: activityData, isLoading: isActivityLoading } = useUserActivityQuery(username, 1, 20);
@@ -123,6 +125,12 @@ export function MePage() {
         ) : (
             <FollowerCardList users={followers ?? []} />
         );
+      case "notify":
+        return (
+            <div className="rounded-xl p-6 border-[0.5px]" style={{ backgroundColor: "var(--surface-secondary)", borderColor: "var(--border-subtle)" }}>
+                <NotificationList />
+            </div>
+        );
       default:
         return (
             <div className="space-y-6">