From 0a9d833f09ecd68c540962dc17199a7eb0466dfc Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Tue, 19 Nov 2024 16:46:44 +0800
Subject: [PATCH 1/2] StackedRouter: don't push frame if the stack empty

---
 src/platform/StackedRouter.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/platform/StackedRouter.tsx b/src/platform/StackedRouter.tsx
index 07b3526..bc3e948 100644
--- a/src/platform/StackedRouter.tsx
+++ b/src/platform/StackedRouter.tsx
@@ -259,7 +259,10 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
 
   createRenderEffect(() => {
     if (stack.length === 0) {
-      pushFrame(window.location.pathname);
+      mutStack(0, {
+        path: window.location.pathname,
+        rootId: createUniqueId(),
+      });
     }
   });
 

From 4190b8847d2ad4732d48179bc686ce8ef2bbf66c Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Tue, 19 Nov 2024 17:03:56 +0800
Subject: [PATCH 2/2] ProfileMenuButton: use self-built Menu

---
 src/material/Menu.tsx               |  9 ++++----
 src/timelines/ProfileMenuButton.tsx | 35 ++++++-----------------------
 2 files changed, 11 insertions(+), 33 deletions(-)

diff --git a/src/material/Menu.tsx b/src/material/Menu.tsx
index 44628f9..0ca0f69 100644
--- a/src/material/Menu.tsx
+++ b/src/material/Menu.tsx
@@ -14,6 +14,7 @@ import {
   animateGrowFromTopRight,
   animateShrinkToTopRight,
 } from "../platform/anim";
+import type { MenuListProps } from "@suid/material/MenuList";
 
 export type Anchor = Pick<DOMRect, "top" | "left" | "right"> & { e?: number };
 
@@ -22,6 +23,7 @@ export type MenuProps = ParentProps<
     open?: boolean;
     onClose?: JSX.EventHandlerUnion<HTMLDialogElement, Event>;
     anchor: () => Anchor;
+    MenuListProps?: MenuListProps;
 
     id?: string;
   } & JSX.AriaAttributes
@@ -213,11 +215,8 @@ const Menu: Component<MenuProps> = (props) => {
       tabIndex={-1}
       {...rest}
     >
-      <div
-        class="container"
-        role="presentation"
-      >
-        <MenuList>{props.children}</MenuList>
+      <div class="container" role="presentation">
+        <MenuList {...props.MenuListProps}>{props.children}</MenuList>
       </div>
     </dialog>
   );
diff --git a/src/timelines/ProfileMenuButton.tsx b/src/timelines/ProfileMenuButton.tsx
index b74386c..25ff2c9 100644
--- a/src/timelines/ProfileMenuButton.tsx
+++ b/src/timelines/ProfileMenuButton.tsx
@@ -5,13 +5,10 @@ import {
   ListItemAvatar,
   ListItemIcon,
   ListItemText,
-  Menu,
   MenuItem,
 } from "@suid/material";
 import {
-  ErrorBoundary,
   Show,
-  createSignal,
   createUniqueId,
   type ParentComponent,
 } from "solid-js";
@@ -22,6 +19,7 @@ import {
   FeaturedPlayList as ListIcon,
 } from "@suid/icons-material";
 import A from "../platform/A";
+import Menu, { createManagedMenuState } from "../material/Menu";
 
 const ProfileMenuButton: ParentComponent<{
   profile?: {
@@ -35,29 +33,20 @@ const ProfileMenuButton: ParentComponent<{
       };
     };
   };
-  onClick?: () => void;
-  onClose?: () => void;
 }> = (props) => {
   const menuId = createUniqueId();
   const buttonId = createUniqueId();
 
-  let [anchor, setAnchor] = createSignal<HTMLButtonElement | null>(null);
-  const open = () => !!anchor();
+  const [open, state] = createManagedMenuState();
 
   const onClick = (
     event: MouseEvent & { currentTarget: HTMLButtonElement },
   ) => {
-    setAnchor(event.currentTarget);
-    props.onClick?.();
+    open(event.currentTarget.getBoundingClientRect());
   };
 
   const inf = () => props.profile?.account.inf;
 
-  const onClose = () => {
-    props.onClick?.();
-    setAnchor(null);
-  };
-
   return (
     <>
       <ButtonBase
@@ -75,23 +64,13 @@ const ProfileMenuButton: ParentComponent<{
       </ButtonBase>
       <Menu
         id={menuId}
-        anchorEl={anchor()}
-        open={open()}
-        onClose={onClose}
         MenuListProps={{
-          "aria-labelledby": buttonId,
-          sx: {
-            minWidth: "220px",
+          "aria-labelledby": menuId,
+          style: {
+            "min-width": "220px",
           },
         }}
-        anchorOrigin={{
-          vertical: "top",
-          horizontal: "right",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "right",
-        }}
+        {...state}
       >
         <MenuItem
           component={A}