feat(frontend): separate profile and chart settings

frontend/src/components/account-dialog-overlay.tsx

@@ -1,22 +1,17 @@
 "use client";
 
 import { X } from "lucide-react";
-import { memo, useEffect, useState, type MutableRefObject, type ReactNode } from "react";
-
-export type AccountOverlayLibraryControls = Readonly<{
-  open: boolean;
-  toggle: () => void;
-}>;
+import { memo, type MutableRefObject, type ReactNode } from "react";
 
 export type AccountOverlayModel = Readonly<{
   title: string;
   dialogClass: string;
   signingOut: boolean;
   close: () => void;
-  takeOpenLibraryRequest: () => boolean;
   overlayRef: MutableRefObject<HTMLElement | null>;
   closeButtonRef: MutableRefObject<HTMLButtonElement | null>;
-  renderProfile: (library: AccountOverlayLibraryControls) => ReactNode;
+  renderProfile: () => ReactNode;
+  renderChartLibrary: () => ReactNode;
   renderLogout: () => ReactNode;
 }>;
 
@@ -27,17 +22,10 @@ export const AccountDialogOverlay = memo(function AccountDialogOverlay({
   modelRef,
 }: Readonly<{
   open: boolean;
-  dialog: "profile" | "logout" | null;
+  dialog: "profile" | "chart-library" | "logout" | null;
   openEpoch: number;
   modelRef: MutableRefObject<AccountOverlayModel | null>;
 }>) {
-  const [chartLibraryOpen, setChartLibraryOpen] = useState(false);
-
-  useEffect(() => {
-    if (!open) return;
-    if (modelRef.current?.takeOpenLibraryRequest()) setChartLibraryOpen(true);
-  }, [dialog, modelRef, open]);
-
   if (!open || dialog === null) return null;
   const model = modelRef.current;
   if (!model) return null;
@@ -66,10 +54,8 @@ export const AccountDialogOverlay = memo(function AccountDialogOverlay({
             <X aria-hidden="true" />
           </button>
         </header>
-        {dialog === "profile" && model.renderProfile({
-          open: chartLibraryOpen,
-          toggle: () => setChartLibraryOpen((current) => !current),
-        })}
+        {dialog === "profile" && model.renderProfile()}
+        {dialog === "chart-library" && model.renderChartLibrary()}
         {dialog === "logout" && model.renderLogout()}
       </section>
     </div>

frontend/src/components/app-sidebar.tsx

@@ -71,6 +71,7 @@ export type AppSidebarProps = {
   onSelectChart: (chartId: string) => void;
   onAddChart: () => void;
   onOpenProfile: () => void;
+  onOpenChartLibrary: () => void;
   onOpenRedeem: () => void;
   onOpenLogout: () => void;
 };
@@ -92,6 +93,7 @@ export function AppSidebar({
   onSelectChart,
   onAddChart,
   onOpenProfile,
+  onOpenChartLibrary,
   onOpenRedeem,
   onOpenLogout,
 }: AppSidebarProps) {
@@ -303,6 +305,9 @@ export function AppSidebar({
                 <Menu.Item className="account-menu-item" onClick={onOpenProfile}>
                   <UserRound aria-hidden="true" /><span>个人资料</span><ChevronRight aria-hidden="true" />
                 </Menu.Item>
+                <Menu.Item className="account-menu-item" onClick={onOpenChartLibrary}>
+                  <Users aria-hidden="true" /><span>星盘资料</span><ChevronRight aria-hidden="true" />
+                </Menu.Item>
                 <Menu.Item className="account-menu-item" onClick={onOpenRedeem}>
                   <Gift aria-hidden="true" /><span>兑换点数</span><small>{account.credits} 点</small>
                 </Menu.Item>