src/platform/StackedRouter.tsx

@@ -194,13 +194,11 @@ function animateOpen(element: HTMLElement) {
 function serializableStack(stack: readonly StackFrame[]) {
   const frames = unwrap(stack);
   return frames.map((fr) => {
-    return fr.animateClose || fr.animateOpen
+    return {
-      ? {
+      path: fr.path,
-          path: fr.path,
+      rootId: fr.rootId,
-          rootId: fr.rootId,
+      state: fr.state,
-          state: fr.state,
+    };
-        }
-      : fr;
   });
 }
 
@@ -260,6 +258,11 @@ 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);
@@ -268,12 +271,8 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
 
   createRenderEffect(() => {
     makeEventListener(window, "popstate", (event) => {
-      if (!event.state) return;
+      if (event.state && stack.length !== event.state.length) {
-
-      if (stack.length === 0) {
         mutStack(event.state);
-      } else if (stack.length > event.state.length) {
-        popFrame(stack.length - event.state.length);
       }
     });
   });
@@ -359,7 +358,10 @@ 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,7 +1,10 @@
 import {
+  children,
+  createSignal,
   For,
   Show,
-  type Component,
+  type JSX,
+  type ParentComponent,
 } from "solid-js";
 import Scaffold from "../material/Scaffold.js";
 import {
@@ -41,6 +44,7 @@ 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";
@@ -159,7 +163,7 @@ type Strings = {
   ["lang.auto"]: Template<{ detected: string }>;
 } & Record<string, string | undefined>;
 
-const Settings: Component = () => {
+const Settings: ParentComponent = (props) => {
   const [t] = createTranslator(
     (code) =>
       import(`./i18n/${code}.json`) as Promise<{
@@ -169,7 +173,7 @@ const Settings: Component = () => {
   );
   const {pop} = useNavigator();
   const settings$ = useStore($settings);
-  const { needRefresh } = useServiceWorker();
+  const { needRefresh, offlineReady } = useServiceWorker();
   const dateFnLocale = useDateFnLocale();
 
   const profiles = useSessions();
@@ -178,6 +182,8 @@ const Settings: Component = () => {
     signOut((a) => a.site === acct.site && a.accessToken === acct.accessToken);
   };
 
+  const subpage = children(() => props.children);
+
   css`
     ul {
       padding: 0;
@@ -203,6 +209,10 @@ const Settings: Component = () => {
         </AppBar>
       }
     >
+      <BottomSheet open={!!subpage()} onClose={() => pop(1)}>
+        {subpage()}
+      </BottomSheet>
+
       <List class="setting-list" use:solid-styled>
         <li>
           <ul>