TootBottomSheet: use new cache semantic

src/masto/clients.ts

@@ -115,7 +115,7 @@ export function useDefaultSession() {
  * - If the username is not present, any session on the site is returned; or,
  * - If no available session available for the pattern, an unauthorised session is returned.
  *
- * In an unauthorised session, the `.account` is `undefined` and the `client` is an
+ * In an unauthorised session, the `.account` is {@link RemoteServer} and the `client` is an
  * unauthorised client for the site. This client may not available for some operations.
  */
 export function useSessionForAcctStr(acct: Accessor<string>) {
@@ -131,7 +131,7 @@ export function useSessionForAcctStr(acct: Accessor<string>) {
     return (
       authedSession ?? {
         client: createUnauthorizedClient(inputSite),
-        account: undefined,
+        account: { site: inputSite }, // TODO: we need some security checks here?
       }
     );
   });

src/timelines/TootBottomSheet.tsx

@@ -1,16 +1,13 @@
-import { useLocation, useParams } from "@solidjs/router";
+import { useParams } from "@solidjs/router";
 import {
   catchError,
-  createEffect,
-  createRenderEffect,
   createResource,
   Show,
   type Component,
 } from "solid-js";
 import Scaffold from "~material/Scaffold";
-import { AppBar, CircularProgress, IconButton, Toolbar } from "@suid/material";
+import { CircularProgress } from "@suid/material";
 import { Title } from "~material/typography";
-import { Close as CloseIcon } from "@suid/icons-material";
 import { useSessionForAcctStr } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
 import RegularToot, {
@@ -33,18 +30,8 @@ import ItemSelectionProvider, {
   createSingluarItemSelection,
 } from "./toots/ItemSelectionProvider";
 import AppTopBar from "~material/AppTopBar";
-
-let cachedEntry: [string, mastodon.v1.Status] | undefined;
-
-export function setCache(acct: string, status: mastodon.v1.Status) {
-  cachedEntry = [acct, status];
-}
-
-function getCache(acct: string, id: string) {
-  if (acct === cachedEntry?.[0] && id === cachedEntry?.[1].id) {
-    return cachedEntry[1];
-  }
-}
+import { fetchStatus } from "../masto/statuses";
+import { type Account } from "../accounts/stores";
 
 const TootBottomSheet: Component = (props) => {
   const params = useParams<{ acct: string; id: string }>();
@@ -54,24 +41,14 @@ const TootBottomSheet: Component = (props) => {
   const session = useSessionForAcctStr(acctText);
   const [, selectionState] = createSingluarItemSelection();
 
-  const [remoteToot, { mutate: setRemoteToot }] = createResource(
-    () => [session().client, params.id] as const,
-    async ([client, id]) => {
-      return await client.v1.statuses.$select(id).fetch();
-    },
+  const [remoteToot, { mutate: setRemoteToot }] =
+    fetchStatus.cachedAndRevalidate(
+      () => [session().account, params.id] as const,
     );
 
   const toot = () =>
     catchError(remoteToot, (error) => {
       console.error(error);
-    }) ?? getCache(acctText(), params.id);
-
-  createEffect((lastTootId?: string) => {
-    const tootId = toot()?.id;
-    if (!tootId || lastTootId === tootId) return tootId;
-    const elementId = `toot-${tootId}`;
-    document.getElementById(elementId)?.scrollIntoView({ behavior: "smooth" });
-    return tootId;
     });
 
   const [tootContextErrorUncaught, { refetch: refetchContext }] =
@@ -94,12 +71,6 @@ const TootBottomSheet: Component = (props) => {
     () => tootContext()?.descendants,
   );
 
-  createEffect(() => {
-    if (ancestors.list.length > 0) {
-      document.querySelector(`#toot-${toot()!.id}`)?.scrollIntoView();
-    }
-  });
-
   useDocumentTitle(() => {
     const t = toot()?.reblog ?? toot();
     const name = t?.account.displayName ?? "Someone";
@@ -300,10 +271,10 @@ const TootBottomSheet: Component = (props) => {
             </Show>
           </article>
 
-          <Show when={session()!.account}>
+          <Show when={(session().account as Account).inf}>
             <TootComposer
               mentions={defaultMentions()}
-              profile={session().account!}
+              profile={(session().account! as Account).inf}
               replyToDisplayName={toot()?.account?.displayName || ""}
               client={session().client}
               onSent={() => refetchContext()}

src/timelines/TootComposer.tsx

@@ -216,7 +216,7 @@ function cancelEvent(event: Event) {
 const TootComposer: Component<{
   ref?: Ref<HTMLDivElement>;
   style?: JSX.CSSProperties;
-  profile?: Account;
+  profile?: mastodon.v1.Account;
   replyToDisplayName?: string;
   mentions?: readonly string[];
   client?: mastodon.rest.Client;
@@ -248,15 +248,15 @@ const TootComposer: Component<{
 
   createEffect(() => {
     if (active()) {
-      setTimeout(() => inputRef.focus(), 0);
+      setTimeout(() => inputRef!.focus(), 0);
     }
   });
 
   createEffect(() => {
-    if (inputRef.value !== "") return;
+    if (inputRef!.value !== "") return;
     if (props.mentions) {
       const prepText = props.mentions.join(" ") + " ";
-      inputRef.value = prepText;
+      inputRef!.value = prepText;
     }
   });
 
@@ -294,7 +294,7 @@ const TootComposer: Component<{
     try {
       const status = await client.v1.statuses.create(
         {
-          status: inputRef.value,
+          status: inputRef!.value,
           language: language(),
           visibility: visibility(),
           inReplyToId: props.inReplyToId,
@@ -309,7 +309,7 @@ const TootComposer: Component<{
       );
 
       props.onSent?.(status);
-      inputRef.value = "";
+      inputRef!.value = "";
     } finally {
       setSending(false);
     }
@@ -363,7 +363,7 @@ const TootComposer: Component<{
       <div class="reply-input">
         <Show when={props.profile}>
           <Avatar
-            src={props.profile!.inf?.avatar}
+            src={props.profile!.avatar}
             sx={{ marginLeft: "-0.25em" }}
           />
         </Show>

src/timelines/TootList.tsx

@@ -23,6 +23,7 @@ import type { ThreadNode } from "../masto/timelines";
 import { useNavigator } from "~platform/StackedRouter";
 import { ANIM_CURVE_STD } from "~material/theme";
 import { useItemSelection } from "./toots/ItemSelectionProvider";
+import { fetchStatus } from "../masto/statuses";
 
 function durationOf(rect0: DOMRect, rect1: DOMRect) {
   const distancelt = Math.sqrt(
@@ -130,7 +131,7 @@ const TootList: Component<{
     }
 
     const acct = `${inf.username}@${p.site}`;
-    setTootBottomSheetCache(acct, toot);
+    await fetchStatus.setJson([p, toot.id], toot)
 
     push(`/${encodeURIComponent(acct)}/toot/${toot.id}`, {
       animateOpen(element) {