refactor: extract Topbar and LocalAvatar components from App.tsx

src/components/LocalAvatar.tsx

@@ -0,0 +1,17 @@
+import type { WebUserSession } from "../types";
+
+interface LocalAvatarProps {
+  session: WebUserSession;
+  size?: "sm" | "md" | "lg";
+}
+
+export function LocalAvatar({ session, size = "md" }: LocalAvatarProps) {
+  const displayName = session.user.displayName || session.user.username || "用户";
+  const label = displayName.trim().slice(0, 1).toUpperCase() || "用";
+  const avatarUrl = session.user.avatarUrl;
+  return (
+    <span className={`local-user-avatar local-user-avatar--${size}`}>
+      {avatarUrl ? <img src={avatarUrl} alt={displayName} /> : <span>{label}</span>}
+    </span>
+  );
+}