refactor: repartition server-side and client-side code

app/.client/components/auth/UserProfile.tsx

@@ -0,0 +1,31 @@
+import { useAuth } from '~/.client/hooks/useAuth';
+
+export function UserProfile({ className }: { className?: string }) {
+  const { isAuthenticated, userInfo, isLoading } = useAuth();
+
+  if (!isAuthenticated) {
+    return <div className={className}>未登录</div>;
+  }
+
+  if (isLoading) {
+    return <div className={className}>加载中...</div>;
+  }
+
+  if (!userInfo) {
+    return <div className={className}>无法获取用户信息</div>;
+  }
+
+  return (
+    <div className={className}>
+      {userInfo.picture && (
+        <img
+          src={userInfo.picture}
+          alt={userInfo.name || userInfo.username || '用户头像'}
+          className="size-10 rounded-full mb-2"
+        />
+      )}
+      <h3 className="text-lg font-semibold">{userInfo.name || userInfo.username || '用户'}</h3>
+      {userInfo.email && <p className="text-sm text-gray-600">{userInfo.email}</p>}
+    </div>
+  );
+}