Settings: fix back button pop too much frames

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

src/platform/StackedRouter.css

@@ -21,6 +21,7 @@ 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,17 +6,18 @@ 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 } from "./anim";
+import { animateSlideInFromRight, animateSlideOutToRight } 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">;
 
@@ -24,7 +25,6 @@ export type StackFrame = {
   path: string;
   rootId: string;
   state: unknown;
-  beforeShow?: (element: HTMLElement) => void;
 };
 
 export type NewFrameOptions<T> = (T extends undefined
@@ -102,6 +102,32 @@ 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.
  */
@@ -115,10 +141,21 @@ 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) {
@@ -130,20 +167,11 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
         const lastFrame = stack[stack.length - 1];
         const element = document.getElementById(lastFrame.rootId)!;
         requestAnimationFrame(() => {
-          const animation = element.animate(
+          const animation = animateClose(element);
-            {
+          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 {
-        mutStack((o) => {
+        onlyPopFrame(depth);
-          return o.toSpliced(o.length - depth, depth);
-        });
       }
     });
 
@@ -154,24 +182,23 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
 
   createRenderEffect(() => {
     if (stack.length === 0) {
-      pushFrame("/", undefined);
+      pushFrame(window.location.pathname);
     }
   });
 
+  createRenderEffect(() => {
+    makeEventListener(window, "popstate", (event) => {
+      if (event.state && stack.length !== event.state.length) {
+        mutStack(event.state);
+      }
+    });
+  });
+
   const onBeforeDialogMount = (element: HTMLDialogElement) => {
     createEffect(() => {
       requestAnimationFrame(() => {
         element.showModal();
-        if (window.innerWidth <= 560) {
+        animateOpen(element);
-          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, 11]} disableRipple>
+            <IconButton color="inherit" onClick={[pop, 1]} 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" onClick={onClose}>
+        <MenuItem component={A} href="/settings">
           <ListItemIcon>
             <SettingsIcon />
           </ListItemIcon>