first prototype of StackedRouter

src/timelines/TootBottomSheet.tsx

@@ -1,10 +1,9 @@
-import { useLocation, useNavigate, useParams } from "@solidjs/router";
+import { useLocation, useParams } from "@solidjs/router";
 import {
   catchError,
   createEffect,
   createRenderEffect,
   createResource,
-  createSignal,
   Show,
   type Component,
 } from "solid-js";
@@ -25,6 +24,8 @@ import { useDocumentTitle } from "../utils";
 import { createTimelineControlsForArray } from "../masto/timelines";
 import TootList from "./TootList";
 import "./TootBottomSheet.css";
+import { useNavigator } from "../platform/StackedRouter";
+import BackButton from "../platform/BackButton";
 
 let cachedEntry: [string, mastodon.v1.Status] | undefined;
 
@@ -43,7 +44,7 @@ const TootBottomSheet: Component = (props) => {
   const location = useLocation<{
     tootReply?: boolean;
   }>();
-  const navigate = useNavigate();
+  const { pop, push } = useNavigator();
   const time = createTimeSource();
   const acctText = () => decodeURIComponent(params.acct);
   const session = useSessionForAcctStr(acctText);
@@ -186,7 +187,7 @@ const TootBottomSheet: Component = (props) => {
           target.dataset.client || `@${new URL(target.href).origin}`,
         );
 
-        navigate(`/${acct}/profile/${target.dataset.acctId}`);
+        push(`/${acct}/profile/${target.dataset.acctId}`);
 
         return;
       } else {
@@ -228,9 +229,7 @@ const TootBottomSheet: Component = (props) => {
             variant="dense"
             sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
           >
-            <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
-              <CloseIcon />
-            </IconButton>
+            <BackButton color="inherit" />
             <Title component="div" class="name" use:solid-styled>
               <span
                 ref={(e: HTMLElement) =>
@@ -246,9 +245,7 @@ const TootBottomSheet: Component = (props) => {
       }
       class="TootBottomSheet"
     >
-      <div
-        class="Scrollable"
-      >
+      <div class="Scrollable">
         <TimeSourceProvider value={time}>
           <TootList
             threads={ancestors.list}
@@ -288,9 +285,7 @@ const TootBottomSheet: Component = (props) => {
           </Show>
 
           <Show when={tootContextErrorUncaught.loading}>
-            <div
-              class="progress-line"
-            >
+            <div class="progress-line">
               <CircularProgress style="width: 1.5em; height: 1.5em;" />
             </div>
           </Show>