first prototype of StackedRouter

src/timelines/Home.tsx

@@ -29,11 +29,11 @@ import BottomSheet, {
 import { $settings } from "../settings/stores";
 import { useStore } from "@nanostores/solid";
 import { HeroSourceProvider, type HeroSource } from "../platform/anim";
-import { useNavigate } from "@solidjs/router";
 import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
 import TrendTimelinePanel from "./TrendTimelinePanel";
 import TimelinePanel from "./TimelinePanel";
 import { useSessions } from "../masto/clients";
+import { useNavigator } from "../platform/StackedRouter";
 
 const Home: ParentComponent = (props) => {
   let panelList: HTMLDivElement;
@@ -53,7 +53,7 @@ const Home: ParentComponent = (props) => {
     const all = profiles();
     return all?.[0]?.client;
   };
-  const navigate = useNavigate();
+  const {pop, push} = useNavigator();
 
   const [heroSrc, setHeroSrc] = createSignal<HeroSource>({});
   const [panelOffset, setPanelOffset] = createSignal(0);
@@ -151,7 +151,7 @@ const Home: ParentComponent = (props) => {
     );
     const acct = `${inf.username}@${p.account.site}`;
     setTootBottomSheetCache(acct, toot);
-    navigate(`/${encodeURIComponent(acct)}/toot/${toot.id}`, {
+    push(`/${encodeURIComponent(acct)}/toot/${toot.id}`, {
       state: reply
         ? {
             tootReply: true,
@@ -276,7 +276,7 @@ const Home: ParentComponent = (props) => {
             </Show>
           </TimeSourceProvider>
           <Suspense>
-            <BottomSheet open={!!child()} onClose={() => navigate(-1)}>
+            <BottomSheet open={!!child()} onClose={() => pop(1)}>
               {child()}
             </BottomSheet>
           </Suspense>

src/timelines/ProfileMenuButton.tsx

@@ -21,7 +21,7 @@ import {
   Star as LikeIcon,
   FeaturedPlayList as ListIcon,
 } from "@suid/icons-material";
-import { A } from "@solidjs/router";
+import A from "../platform/A";
 
 const ProfileMenuButton: ParentComponent<{
   profile?: {

src/timelines/TootBottomSheet.css

@@ -1,12 +1,11 @@
 .TootBottomSheet {
   overflow: hidden;
-  height: calc(100% - var(--scaffold-topbar-height, 0px));
 
   .Scrollable {
     padding-bottom: var(--safe-area-inset-bottom, 0);
     overflow-y: auto;
     overscroll-behavior-y: contain;
-    height: 100%;
+    height: calc(100% - var(--scaffold-topbar-height, 0px));
   }
 
   .progress-line {

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>

src/timelines/TootList.tsx

@@ -20,6 +20,7 @@ import RegularToot, {
 } from "./RegularToot";
 import cardStyle from "../material/cards.module.css";
 import type { ThreadNode } from "../masto/timelines";
+import { useNavigator } from "../platform/StackedRouter";
 
 function positionTootInThread(index: number, threadLength: number) {
   if (index === 0) {
@@ -40,7 +41,7 @@ const TootList: Component<{
   const session = useDefaultSession();
   const heroSrc = useHeroSource();
   const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
-  const navigate = useNavigate();
+  const {push} = useNavigator();
 
   const onBookmark = async (status: mastodon.v1.Status) => {
     const client = session()?.client;
@@ -115,7 +116,7 @@ const TootList: Component<{
 
     const acct = `${inf.username}@${p.site}`;
     setTootBottomSheetCache(acct, toot);
-    navigate(`/${encodeURIComponent(acct)}/toot/${toot.id}`, {
+    push(`/${encodeURIComponent(acct)}/toot/${toot.id}`, {
       state: reply
         ? {
             tootReply: true,
@@ -146,7 +147,7 @@ const TootList: Component<{
           target.dataset.client || `@${new URL(target.href).origin}`,
         );
 
-        navigate(`/${acct}/profile/${target.dataset.acctId}`);
+        push(`/${acct}/profile/${target.dataset.acctId}`);
 
         return;
       } else {