TootBottomSheet: catch fetch error

src/timelines/TootBottomSheet.tsx

@@ -1,5 +1,6 @@
 import { useLocation, useNavigate, useParams } from "@solidjs/router";
 import {
+  catchError,
   createEffect,
   createRenderEffect,
   createResource,
@@ -42,7 +43,6 @@ function getCache(acct: string, id: string) {
 const TootBottomSheet: Component = (props) => {
   const params = useParams<{ acct: string; id: string }>();
   const location = useLocation<{
-    tootBottomSheetPushedCount?: number;
     tootReply?: boolean;
   }>();
   const navigate = useNavigate();
@@ -51,10 +51,6 @@ const TootBottomSheet: Component = (props) => {
   const acctText = () => decodeURIComponent(params.acct);
   const session = useSessionForAcctStr(acctText);
 
-  const pushedCount = () => {
-    return location.state?.tootBottomSheetPushedCount || 0;
-  };
-
   const [remoteToot, { mutate: setRemoteToot }] = createResource(
     () => [session().client, params.id] as const,
     async ([client, id]) => {
@@ -62,7 +58,9 @@ const TootBottomSheet: Component = (props) => {
     },
   );
 
-  const toot = () => remoteToot() ?? getCache(acctText(), params.id);
+  const toot = () => catchError(remoteToot, (error) => {
+    console.error(error)
+  }) ?? getCache(acctText(), params.id);
 
   createEffect((lastTootId?: string) => {
     const tootId = toot()?.id;
@@ -78,12 +76,18 @@ const TootBottomSheet: Component = (props) => {
     }
   });
 
-  const [tootContext, { refetch: refetchContext }] = createResource(
-    () => [session().client, params.id] as const,
-    async ([client, id]) => {
-      return await client.v1.statuses.$select(id).context.fetch();
-    },
-  );
+  const [tootContextErrorUncaught, { refetch: refetchContext }] =
+    createResource(
+      () => [session().client, params.id] as const,
+      async ([client, id]) => {
+        return await client.v1.statuses.$select(id).context.fetch();
+      },
+    );
+
+  const tootContext = () =>
+    catchError(tootContextErrorUncaught, (error) => {
+      console.error(error);
+    });
 
   const ancestors = createTimelineControlsForArray(
     () => tootContext()?.ancestors,
@@ -160,19 +164,6 @@ const TootBottomSheet: Component = (props) => {
     setRemoteToot(result);
   };
 
-  const switchContext = (status: mastodon.v1.Status) => {
-    if (isInTyping()) {
-      setInTyping(false);
-      return;
-    }
-    setCache(params.acct, status);
-    navigate(`/${params.acct}/toot/${status.id}`, {
-      state: {
-        tootBottomSheetPushedCount: pushedCount() + 1,
-      },
-    });
-  };
-
   const defaultMentions = () => {
     const tootAcct = remoteToot()?.reblog?.account ?? remoteToot()?.account;
     if (!tootAcct) {
@@ -246,7 +237,7 @@ const TootBottomSheet: Component = (props) => {
             sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
           >
             <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
-              {pushedCount() > 0 ? <BackIcon /> : <CloseIcon />}
+              <CloseIcon />
             </IconButton>
             <Title component="div" class="name" use:solid-styled>
               <span
@@ -302,7 +293,7 @@ const TootBottomSheet: Component = (props) => {
           />
         </Show>
 
-        <Show when={tootContext.loading}>
+        <Show when={tootContextErrorUncaught.loading}>
           <div
             style={{
               display: "flex",