src/App.tsx

@@ -46,10 +46,10 @@ const Routing: Component = () => {
   return (
     <StackedRouter>
       <Route path="/" component={TimelineHome} />
+      <Route path="/settings" component={Settings} />
       <Route path="/settings/language" component={LanguageSettings} />
       <Route path="/settings/region" component={RegionSettings} />
-      <Route path="/settings/motions" component={MotionSettings} />
+      <Route path="/motions" component={MotionSettings} />
-      <Route path="/settings" component={Settings} />
       <Route path="/:acct/toot/:id" component={TootBottomSheet} />
       <Route path="/:acct/profile/:id" component={Profile} />
 

src/platform/A.tsx

@@ -1,6 +1,5 @@
-import { splitProps, type JSX } from "solid-js";
+import { type JSX } from "solid-js";
 import { useNavigator } from "./StackedRouter";
-import { useResolvedPath } from "@solidjs/router";
 
 function handleClick(
   push: (name: string, state: unknown) => void,
@@ -8,14 +7,13 @@ function handleClick(
 ) {
   const target = event.currentTarget;
   event.preventDefault();
+  event.stopPropagation();
   push(target.href, { state: target.getAttribute("state") || undefined });
 }
 
-const A = (oprops: Omit<JSX.HTMLElementTags["a"], "onClick" | "onclick">) => {
+const A = (oprops: JSX.HTMLElementTags["a"]) => {
-  const [props, rest] = splitProps(oprops, ["href"]);
-  const resolvedPath = useResolvedPath(() => props.href || "#");
   const { push } = useNavigator();
-  return <a onClick={[handleClick, push]} href={resolvedPath()} {...rest}></a>;
+  return <a onClick={[handleClick, push]} {...oprops}></a>;
 };
 
 export default A;

src/platform/StackedRouter.css

@@ -21,7 +21,6 @@ dialog.StackedPage {
   contain-intrinsic-size: auto 560px auto 100dvh;
   content-visibility: auto;
 
-  background: var(--tutu-color-surface);
   box-shadow: var(--tutu-shadow-e16);
 
   @media (min-width: 560px) {

src/platform/StackedRouter.tsx

@@ -6,18 +6,17 @@ import {
   createRenderEffect,
   createUniqueId,
   Index,
+  onMount,
   Show,
   untrack,
   useContext,
   type Accessor,
 } from "solid-js";
 import { createStore, unwrap } from "solid-js/store";
+import { insert, render } from "solid-js/web";
 import "./StackedRouter.css";
-import { animateSlideInFromRight, animateSlideOutToRight } from "./anim";
+import { animateSlideInFromRight } from "./anim";
 import { ANIM_CURVE_DECELERATION, ANIM_CURVE_STD } from "../material/theme";
-import {
-  makeEventListener,
-} from "@solid-primitives/event-listener";
 
 export type StackedRouterProps = Omit<RouterProps, "url">;
 
@@ -25,6 +24,7 @@ export type StackFrame = {
   path: string;
   rootId: string;
   state: unknown;
+  beforeShow?: (element: HTMLElement) => void;
 };
 
 export type NewFrameOptions<T> = (T extends undefined
@@ -102,32 +102,6 @@ function onDialogClick(
   }
 }
 
-function animateClose(element: HTMLElement) {
-  if (window.innerWidth <= 560) {
-    return animateSlideOutToRight(element, { easing: ANIM_CURVE_DECELERATION });
-  } else {
-    return element.animate(
-      {
-        opacity: [0.5, 0],
-      },
-      { easing: ANIM_CURVE_STD, duration: 220 },
-    );
-  }
-}
-
-function animateOpen(element: HTMLElement) {
-  if (window.innerWidth <= 560) {
-    animateSlideInFromRight(element, { easing: ANIM_CURVE_DECELERATION });
-  } else {
-    element.animate(
-      {
-        opacity: [0.5, 1],
-      },
-      { easing: ANIM_CURVE_STD, duration: 220 },
-    );
-  }
-}
-
 /**
  * The router that stacks the pages.
  */
@@ -141,21 +115,10 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
         state: opts?.state,
         rootId: createUniqueId(),
       };
-
       mutStack(opts?.replace ? stack.length - 1 : stack.length, frame);
-      if (opts?.replace) {
-        window.history.replaceState(unwrap(stack), "", path);
-      } else {
-        window.history.pushState(unwrap(stack), "", path);
-      }
       return frame;
     });
 
-  const onlyPopFrame = (depth: number) => {
-    mutStack((o) => o.toSpliced(o.length - depth, depth));
-    window.history.go(-depth);
-  };
-
   const popFrame = (depth: number = 1) =>
     untrack(() => {
       if (import.meta.env.DEV) {
@@ -167,11 +130,20 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
         const lastFrame = stack[stack.length - 1];
         const element = document.getElementById(lastFrame.rootId)!;
         requestAnimationFrame(() => {
-          const animation = animateClose(element);
+          const animation = element.animate(
-          animation.addEventListener("finish", () => onlyPopFrame(depth));
+            {
+              opacity: [0.5, 0],
+            },
+            { easing: ANIM_CURVE_STD, duration: 220 },
+          );
+          animation.addEventListener("finish", () =>
+            mutStack((o) => o.toSpliced(o.length - depth, depth)),
+          );
         });
       } else {
-        onlyPopFrame(depth);
+        mutStack((o) => {
+          return o.toSpliced(o.length - depth, depth);
+        });
       }
     });
 
@@ -182,23 +154,24 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
 
   createRenderEffect(() => {
     if (stack.length === 0) {
-      pushFrame(window.location.pathname);
+      pushFrame("/", undefined);
     }
   });
 
-  createRenderEffect(() => {
-    makeEventListener(window, "popstate", (event) => {
-      if (event.state && stack.length !== event.state.length) {
-        mutStack(event.state);
-      }
-    });
-  });
-
   const onBeforeDialogMount = (element: HTMLDialogElement) => {
     createEffect(() => {
       requestAnimationFrame(() => {
         element.showModal();
-        animateOpen(element);
+        if (window.innerWidth <= 560) {
+          animateSlideInFromRight(element, { easing: ANIM_CURVE_DECELERATION });
+        } else {
+          element.animate(
+            {
+              opacity: [0.5, 1],
+            },
+            { easing: ANIM_CURVE_STD, duration: 220 },
+          );
+        }
       });
     });
   };

src/settings/Settings.tsx

@@ -201,7 +201,7 @@ const Settings: ParentComponent = (props) => {
             variant="dense"
             sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
           >
-            <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
+            <IconButton color="inherit" onClick={[pop, 11]} disableRipple>
               <CloseIcon />
             </IconButton>
             <Title>{t("Settings")}</Title>

src/timelines/ProfileMenuButton.tsx

@@ -51,7 +51,7 @@ const ProfileMenuButton: ParentComponent<{
     props.onClick?.();
   };
 
-  const inf = () => props.profile?.account.inf;
+  const inf = () => props.profile?.account.inf
 
   const onClose = () => {
     props.onClick?.();
@@ -130,7 +130,7 @@ const ProfileMenuButton: ParentComponent<{
           {props.children}
           <Divider />
         </Show>
-        <MenuItem component={A} href="/settings">
+        <MenuItem component={A} href="/settings" onClick={onClose}>
           <ListItemIcon>
             <SettingsIcon />
           </ListItemIcon>