StackedRouter: fix backward does not pop page

src/platform/StackedRouter.tsx

@@ -194,11 +194,13 @@ function animateOpen(element: HTMLElement) {
 function serializableStack(stack: readonly StackFrame[]) {
   const frames = unwrap(stack);
   return frames.map((fr) => {
-    return {
+    return fr.animateClose || fr.animateOpen
+      ? {
           path: fr.path,
           rootId: fr.rootId,
           state: fr.state,
-    };
+        }
+      : fr;
   });
 }
 
@@ -258,11 +260,6 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
       }
     });
 
-  /* createEffect(() => {
-    const length = stack.length;
-    console.debug("stack is changed", length, unwrap(stack));
-  }); */
-
   createRenderEffect(() => {
     if (stack.length === 0) {
       pushFrame(window.location.pathname);
@@ -271,8 +268,12 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
 
   createRenderEffect(() => {
     makeEventListener(window, "popstate", (event) => {
-      if (event.state && stack.length !== event.state.length) {
+      if (!event.state) return;
+
+      if (stack.length === 0) {
         mutStack(event.state);
+      } else if (stack.length > event.state.length) {
+        popFrame(stack.length - event.state.length);
       }
     });
   });
@@ -358,10 +359,7 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
       reenterableAnimation.effect!.getComputedTiming();
     const totalTime = (delay || 0) + Number(activeDuration);
 
-    if (
-      Number(reenterableAnimation.currentTime) / totalTime >
-      0.1
-    ) {
+    if (Number(reenterableAnimation.currentTime) / totalTime > 0.1) {
       reenterableAnimation.addEventListener("finish", () => {
         onlyPopFrame(1);
       });

src/settings/Settings.tsx

@@ -1,10 +1,7 @@
 import {
-  children,
-  createSignal,
   For,
   Show,
-  type JSX,
-  type ParentComponent,
+  type Component,
 } from "solid-js";
 import Scaffold from "../material/Scaffold.js";
 import {
@@ -44,7 +41,6 @@ import {
   useDateFnLocale,
 } from "../platform/i18n.jsx";
 import { type Template } from "@solid-primitives/i18n";
-import BottomSheet from "../material/BottomSheet.jsx";
 import { useServiceWorker } from "../platform/host.js";
 import { useSessions } from "../masto/clients.js";
 import { useNavigator } from "../platform/StackedRouter.jsx";
@@ -163,7 +159,7 @@ type Strings = {
   ["lang.auto"]: Template<{ detected: string }>;
 } & Record<string, string | undefined>;
 
-const Settings: ParentComponent = (props) => {
+const Settings: Component = () => {
   const [t] = createTranslator(
     (code) =>
       import(`./i18n/${code}.json`) as Promise<{
@@ -173,7 +169,7 @@ const Settings: ParentComponent = (props) => {
   );
   const {pop} = useNavigator();
   const settings$ = useStore($settings);
-  const { needRefresh, offlineReady } = useServiceWorker();
+  const { needRefresh } = useServiceWorker();
   const dateFnLocale = useDateFnLocale();
 
   const profiles = useSessions();
@@ -182,8 +178,6 @@ const Settings: ParentComponent = (props) => {
     signOut((a) => a.site === acct.site && a.accessToken === acct.accessToken);
   };
 
-  const subpage = children(() => props.children);
-
   css`
     ul {
       padding: 0;
@@ -209,10 +203,6 @@ const Settings: ParentComponent = (props) => {
         </AppBar>
       }
     >
-      <BottomSheet open={!!subpage()} onClose={() => pop(1)}>
-        {subpage()}
-      </BottomSheet>
-
       <List class="setting-list" use:solid-styled>
         <li>
           <ul>