integrate backend Google OAuth and set up avatar media proxy

- Implement the full login and onboarding workflow to handle name, handle, and avatar.

- Rewrite avatar asset URLs to route through the self-hosted media service.

- Add Next.js rewrites configuration to proxy media requests directly to the FastAPI backend.

app/(dashboard)/layout.tsx

@@ -1,183 +1,172 @@
 "use client";
 
-import { useState } from "react";
-import Link from "next/link";
-import {
-  Compass,
-  MessageCircle,
-  PlusCircle,
-  User,
-  LogOut,
-  ChevronDown,
-  Sparkles,
-  Bell,
+import React from "react";
+import { gql } from "@apollo/client";
+import { useQuery } from "@apollo/experimental-nextjs-app-support/ssr";
+import { 
+  LogOut, 
+  Compass, 
+  Swords, 
+  MessageSquare, 
+  Bookmark, 
+  User, 
+  CreditCard, 
+  Settings,
   Search,
 } from "lucide-react";
+import { useRouter, usePathname } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
 
-export default function AppLayout({ children }: { children: React.ReactNode }) {
-  const [sidebarOpen, setSidebarOpen] = useState(true);
-  const [userMenuOpen, setUserMenuOpen] = useState(false);
-  const [activeTab, setActiveTab] = useState("discover");
+interface MyProfileData {
+  me: {
+    id: string;
+    email: string;
+    name: string;
+    handle: string | null;
+    avatar: string | null;
+  } | null;
+}
 
-  const navigationItems = [
-    { id: "discover", label: "Discover", icon: Compass, href: "/app" },
-    { id: "roleplay", label: "Roleplay", icon: Sparkles, href: "/app/roleplay" },
-    { id: "create", label: "Create", icon: PlusCircle, href: "/app/create" },
-    { id: "messages", label: "Messages", icon: MessageCircle, href: "/app/messages" },
-    { id: "profile", label: "Profile", icon: User, href: "/app/profile" },
+const GET_MY_PROFILE = gql`
+  query GetMyProfile {
+    me {
+      id
+      email
+      name
+      handle
+      avatar
+    }
+  }
+`;
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { loading, error, data } = useQuery<MyProfileData>(GET_MY_PROFILE);
+
+  console.log("GraphQL Data:", data);
+  console.log("GraphQL Error:", error);
+
+  const menuItems = [
+    { name: "Discover", href: "/", icon: Compass },
+    { name: "Roleplay", href: "/roleplay", icon: Swords },
+    { name: "Messages", href: "/messages", icon: MessageSquare },
+    { name: "Library", href: "/library", icon: Bookmark },
+    { name: "Profile", href: "/profile", icon: User },
+    { name: "Subscription", href: "/subscription", icon: CreditCard },
+    { name: "Settings", href: "/settings", icon: Settings },
   ];
 
   return (
-    <div className="h-screen flex flex-col bg-white">
-      {/* Header */}
-      <header className="border-b border-gray-200 sticky top-0 z-40 bg-white">
-        <div className="px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
-          {/* Logo + Title */}
+    <div className="flex h-screen flex-col bg-gray-50 text-gray-900">
+      
+      {/* --- 1. 顶部 Header (贯穿式) --- */}
+      <header className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 shrink-0 z-20">
+        <div className="flex items-center gap-8">
+          {/* Logo 区域 */}
           <Link href="/" className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-br from-pink-600 to-purple-600 rounded-lg flex items-center justify-center">
-              <span className="text-white text-sm font-bold">RP</span>
+            <div className="w-8 h-8 bg-linear-to-br from-pink-600 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold text-xs shadow-sm">
+              RP
             </div>
-            <span className="font-semibold text-lg hidden sm:inline">RoleplayAI</span>
+            <span className="font-bold text-xl tracking-tight">RoleplayAI</span>
           </Link>
 
-          {/* Center - Search Bar */}
-          <div className="flex-1 max-w-md mx-4 hidden md:block">
-            <div className="relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
-              <input
-                type="text"
-                placeholder="Search characters..."
-                className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-full text-sm focus:outline-none focus:border-black transition"
-              />
-            </div>
+          {/* 模拟搜索框 (对应图中右上角风格) */}
+          <div className="hidden md:flex items-center gap-2 bg-gray-100 px-4 py-2 rounded-full w-80">
+            <Search className="w-4 h-4 text-gray-400" />
+            <input 
+              type="text" 
+              placeholder="Search by tag..." 
+              className="bg-transparent text-sm outline-none w-full"
+            />
+          </div>
+        </div>
+
+        {/* Header 右侧 */}
+        <div className="flex items-center gap-4">
+          {/* 积分显示 */}
+          <div className="flex items-center gap-2 bg-purple-50 px-3 py-1.5 rounded-full border border-purple-100">
+            <span className="text-sm">🪙</span>
+            <span className="text-sm font-bold text-purple-700">200</span> 
           </div>
 
-          {/* Right - Actions */}
-          <div className="flex items-center gap-4">
-            {/* Subscribe Button */}
-            <button className="hidden sm:block px-4 py-2 border-2 border-black rounded-full font-medium hover:bg-black hover:text-white transition text-sm">
-              Subscribe
-            </button>
-
-            {/* Token Count */}
-            <div className="flex items-center gap-2 px-4 py-2 bg-gray-50 rounded-full">
-              <span className="text-sm font-semibold">⚡</span>
-              <span className="text-sm font-medium">450</span>
-            </div>
-
-            {/* Notifications */}
-            <button className="relative p-2 hover:bg-gray-100 rounded-full transition">
-              <Bell className="w-5 h-5" />
-              <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
-            </button>
-
-            {/* User Avatar & Dropdown */}
-            <div className="relative">
-              <button
-                onClick={() => setUserMenuOpen(!userMenuOpen)}
-                className="flex items-center gap-2 p-1 hover:bg-gray-100 rounded-full transition"
-              >
-                <img
-                  src="https://api.dicebear.com/7.x/avataaars/svg?seed=user"
-                  alt="User"
-                  className="w-8 h-8 rounded-full"
-                />
-                <ChevronDown className="w-4 h-4 text-gray-600" />
-              </button>
-
-              {/* Dropdown Menu */}
-              {userMenuOpen && (
-                <div className="absolute right-0 mt-2 w-56 bg-white border border-gray-200 rounded-xl shadow-lg z-50">
-                  {/* Profile Section */}
-                  <div className="p-4 border-b border-gray-200">
-                    <div className="flex items-center gap-3">
-                      <img
-                        src="https://api.dicebear.com/7.x/avataaars/svg?seed=user"
-                        alt="User"
-                        className="w-10 h-10 rounded-full"
-                      />
-                      <div>
-                        <p className="font-semibold text-sm">John Doe</p>
-                        <p className="text-xs text-gray-500">@johndoe</p>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Menu Items */}
-                  <div className="py-2">
-                    <Link href="/app/profile" className="block px-4 py-2 text-sm hover:bg-gray-50 transition">
-                      My Profile
-                    </Link>
-                    <Link href="/app/settings" className="block px-4 py-2 text-sm hover:bg-gray-50 transition">
-                      Settings
-                    </Link>
-                    <Link href="/app/billing" className="block px-4 py-2 text-sm hover:bg-gray-50 transition">
-                      Billing & Plans
-                    </Link>
-                    <Link href="/app/favorites" className="block px-4 py-2 text-sm hover:bg-gray-50 transition">
-                      Favorites
-                    </Link>
-                  </div>
-
-                  {/* Divider */}
-                  <div className="border-t border-gray-200"></div>
-
-                  {/* Logout */}
-                  <button className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition flex items-center gap-2">
-                    <LogOut className="w-4 h-4" />
-                    Logout
-                  </button>
+          {/* 真实头像逻辑 */}
+          <div className="flex items-center gap-3 ml-2">
+            {loading ? (
+              <div className="w-8 h-8 bg-gray-200 animate-pulse rounded-full" />
+            ) : data?.me ? (
+              <div className="flex items-center gap-3">
+                <div className="text-right hidden lg:block">
+                  <p className="text-xs font-bold text-gray-900 leading-none">{data.me.name}</p>
+                  <p className="text-[10px] text-gray-500 leading-none mt-1">@{data.me.handle || 'user'}</p>
                 </div>
-              )}
-            </div>
+                <div className="w-9 h-9 rounded-full bg-linear-to-tr from-purple-100 to-pink-100 border border-purple-200 overflow-hidden relative">
+                  {data.me.avatar ? (
+                    <Image src={data.me.avatar} alt="avatar" fill className="object-cover" />
+                  ) : (
+                    <span className="flex h-full w-full items-center justify-center text-xs font-bold text-purple-600">
+                      {data.me.name?.charAt(0).toUpperCase()}
+                    </span>
+                  )}
+                </div>
+              </div>
+            ) : (
+              <Link href="/login" className="text-xs font-bold text-pink-600 hover:underline">Login</Link>
+            )}
           </div>
         </div>
       </header>
 
-      {/* Main Content */}
+      {/* --- 下半部分主体 --- */}
       <div className="flex flex-1 overflow-hidden">
-        {/* Sidebar */}
-        <aside
-          className={`${
-            sidebarOpen ? "w-56" : "w-0"
-          } border-r border-gray-200 bg-gray-50 flex flex-col transition-all duration-300 overflow-hidden`}
-        >
-          <nav className="flex-1 space-y-2 p-4">
-            {navigationItems.map((item) => (
-              <Link
-                key={item.id}
-                href={item.href}
-                onClick={() => setActiveTab(item.id)}
-                className={`flex items-center gap-3 px-4 py-3 rounded-lg font-medium text-sm transition ${
-                  activeTab === item.id
-                    ? "bg-white text-black shadow-sm"
-                    : "text-gray-600 hover:bg-white/50"
-                }`}
-              >
-                <item.icon className="w-5 h-5" />
-                <span>{item.label}</span>
-              </Link>
-            ))}
+        
+        {/* --- 2. 左侧 Sidebar --- */}
+        <aside className="w-64 bg-white border-r border-gray-200 flex flex-col shrink-0 z-10">
+          <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
+            {menuItems.map((item) => {
+              const isActive = pathname === item.href;
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className={`flex items-center gap-3 px-4 py-3 rounded-xl font-medium text-sm transition-all ${
+                    isActive 
+                      ? "bg-gray-900 text-white shadow-md" 
+                      : "text-gray-500 hover:bg-gray-100 hover:text-gray-900"
+                  }`}
+                >
+                  <item.icon className={`w-5 h-5 ${isActive ? "text-white" : "text-gray-400"}`} />
+                  {item.name}
+                  {item.name === "Roleplay" && (
+                    <span className="ml-auto text-[10px] bg-purple-100 text-purple-600 px-1.5 py-0.5 rounded font-bold uppercase">Free</span>
+                  )}
+                </Link>
+              );
+            })}
           </nav>
 
-          {/* Sidebar Footer */}
-          <div className="border-t border-gray-200 p-4 space-y-3">
-            <p className="text-xs text-gray-500 font-semibold">UPGRADE</p>
-            <div className="bg-gradient-to-br from-pink-50 to-purple-50 rounded-lg p-3 space-y-2">
-              <p className="text-xs font-semibold">Unlock Premium</p>
-              <p className="text-xs text-gray-600">Get unlimited characters & faster responses</p>
-              <button className="w-full bg-black text-white py-2 text-xs font-semibold rounded-lg hover:bg-gray-800 transition">
-                Upgrade
-              </button>
-            </div>
+          {/* 底部退出按钮 (更简洁) */}
+          <div className="p-4 border-t border-gray-100">
+            <button 
+              onClick={() => {/* handleLogout logic */}}
+              className="flex items-center gap-3 w-full px-4 py-3 text-sm font-medium text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-xl transition-colors"
+            >
+              <LogOut className="w-5 h-5" />
+              Logout
+            </button>
           </div>
         </aside>
 
-        {/* Main View */}
-        <main className="flex-1 overflow-auto">
-          {children}
+        {/* --- 3. 右侧 Main Content --- */}
+        <main className="flex-1 overflow-y-auto bg-[#fafafa]">
+          {/* 这里可以放置页面内局部的二级分类 Header (比如 Discover 里的 All, Fantasy 等) */}
+          <div className="min-h-full">
+            {children}
+          </div>
         </main>
+
       </div>
     </div>
   );
-}
+}