BottomSheet: backward animation

src/timelines/Home.tsx

@@ -8,9 +8,9 @@ import {
   onMount,
   type ParentComponent,
   children,
+  Suspense,
 } from "solid-js";
 import { useDocumentTitle } from "../utils";
-import { useSessions } from "../masto/clients";
 import { type mastodon } from "masto";
 import Scaffold from "../material/Scaffold";
 import {
@@ -27,7 +27,6 @@ import {
 import { css } from "solid-styled";
 import { TimeSourceProvider, createTimeSource } from "../platform/timesrc";
 import TootThread from "./TootThread.js";
-import { useAcctProfile } from "../masto/acct";
 import ProfileMenuButton from "./ProfileMenuButton";
 import Tabs from "../material/Tabs";
 import Tab from "../material/Tab";
@@ -43,6 +42,7 @@ import { vibrate } from "../platform/hardware";
 import PullDownToRefresh from "./PullDownToRefresh";
 import { HeroSourceProvider, type HeroSource } from "../platform/anim";
 import { useNavigate } from "@solidjs/router";
+import { useSignedInProfiles } from "../masto/acct";
 
 const TimelinePanel: Component<{
   client: mastodon.rest.Client;
@@ -146,7 +146,7 @@ const TimelinePanel: Component<{
                 onExpandChange={(x) => {
                   if (item.id !== expandedThreadId()) {
                     setExpandedThreadId(item.id);
-                  } else if (x === 2){
+                  } else if (x === 2) {
                     props.openFullScreenToot(item, element);
                   }
                 }}
@@ -195,9 +195,10 @@ const Home: ParentComponent = (props) => {
   const now = createTimeSource();
 
   const settings$ = useStore($settings);
-  const sessions = useSessions();
-  const client = () => sessions()[0].client;
-  const [profile] = useAcctProfile(client);
+
+  const [profiles] = useSignedInProfiles();
+  const profile = () => profiles()[0].inf;
+  const client = () => profiles()[0].client;
   const navigate = useNavigate();
 
   const [heroSrc, setHeroSrc] = createSignal<HeroSource>({});
@@ -278,10 +279,10 @@ const Home: ParentComponent = (props) => {
     toot: mastodon.v1.Status,
     srcElement?: HTMLElement,
   ) => {
-    const p = sessions()[0];
+    const p = profiles()[0];
     const inf = p.account.inf ?? profile();
     if (!inf) {
-      console.warn('no account info?')
+      console.warn("no account info?");
       return;
     }
     const rect = srcElement?.getBoundingClientRect();
@@ -402,9 +403,11 @@ const Home: ParentComponent = (props) => {
             <div></div>
           </div>
         </TimeSourceProvider>
-        <HeroSourceProvider value={[heroSrc, setHeroSrc]}>
-          <BottomSheet open={!!child()}>{child()}</BottomSheet>
-        </HeroSourceProvider>
+        <Suspense>
+          <HeroSourceProvider value={[heroSrc, setHeroSrc]}>
+            <BottomSheet open={!!child()}>{child()}</BottomSheet>
+          </HeroSourceProvider>
+        </Suspense>
       </Scaffold>
     </>
   );

src/timelines/MediaAttachmentGrid.tsx

@@ -2,9 +2,7 @@ import type { mastodon } from "masto";
 import { type Component, For, createSignal } from "solid-js";
 import { css } from "solid-styled";
 import tootStyle from "./toot.module.css";
-import { Portal } from "solid-js/web";
-import MediaViewer, { MEDIA_VIEWER_HEROSRC } from "./MediaViewer";
-import { HeroSourceProvider } from "../platform/anim";
+import MediaViewer from "./MediaViewer";
 
 const MediaAttachmentGrid: Component<{
   attachments: mastodon.v1.MediaAttachment[];
@@ -58,13 +56,6 @@ const MediaAttachmentGrid: Component<{
           }
         }}
       </For>
-      <HeroSourceProvider
-        value={() => ({
-          [MEDIA_VIEWER_HEROSRC]: rootRef.children.item(
-            viewerIndex() || 0,
-          ) as HTMLElement,
-        })}
-      >
         <MediaViewer
           show={viewerOpened()}
           index={viewerIndex() || 0}
@@ -72,7 +63,6 @@ const MediaAttachmentGrid: Component<{
           media={props.attachments}
           onClose={() => setViewerIndex(undefined)}
         />
-      </HeroSourceProvider>
     </section>
   );
 };

src/timelines/TootBottomSheet.tsx

@@ -1,23 +1,80 @@
-import { useParams } from "@solidjs/router";
-import type { Component } from "solid-js";
+import { useNavigate, useParams } from "@solidjs/router";
+import { createResource, Show, type Component } from "solid-js";
 import Scaffold from "../material/Scaffold";
 import TootThread from "./TootThread";
-import { AppBar, Toolbar } from "@suid/material";
+import { AppBar, IconButton, Toolbar } from "@suid/material";
 import { Title } from "../material/typography";
+import { Close as CloseIcon } from "@suid/icons-material";
+import { isiOS } from "../platform/host";
+import { createUnauthorizedClient, useSessions } from "../masto/clients";
+import { resolveCustomEmoji } from "../masto/toot";
+import RegularToot from "./RegularToot";
 
 const TootBottomSheet: Component = (props) => {
-  const params = useParams()
-  return <Scaffold
-  topbar={
-    <AppBar position="static">
-      <Toolbar variant="dense" sx={{paddingTop: "var(--safe-area-inset-top, 0px)"}}>
-        <Title>A Toot</Title>
-      </Toolbar>
-    </AppBar>
-  }
-  >
-    <p>{params.acct}/{params.id}</p>
-  </Scaffold>;
+  const params = useParams<{ acct: string; id: string }>();
+  const navigate = useNavigate();
+  const allSession = useSessions();
+  const session = () => {
+    const [inputUsername, inputSite] = decodeURIComponent(params.acct).split(
+      "@",
+      2,
+    );
+    const authedSession = allSession().find(
+      (x) =>
+        x.account.site === inputSite &&
+        x.account.inf?.username === inputUsername,
+    );
+    return authedSession ?? { client: createUnauthorizedClient(inputSite) };
+  };
+
+  const [remoteToot] = createResource(
+    () => [session().client, params.id] as const,
+    async ([client, id]) => {
+      return await client.v1.statuses.$select(id).fetch();
+    },
+  );
+
+  const toot = remoteToot;
+
+  const tootTitle = () => {
+    const t = toot();
+    if (t) {
+      const name = resolveCustomEmoji(t.account.displayName, t.account.emojis);
+      return `${name}'s toot`;
+    }
+    return "A toot";
+  };
+
+  return (
+    <Scaffold
+      topbar={
+        <AppBar
+          sx={{
+            backgroundColor: "var(--tutu-color-surface)",
+            color: "var(--tutu-color-on-surface)",
+          }}
+          elevation={1}
+          position="static"
+        >
+          <Toolbar
+            variant="dense"
+            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
+          >
+            <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
+              <CloseIcon />
+            </IconButton>
+            <Title>{tootTitle}</Title>
+          </Toolbar>
+        </AppBar>
+      }
+    >
+      <div>
+        <Show when={toot()}>
+          <RegularToot status={toot()!}></RegularToot>
+        </Show>
+      </div>
+    </Scaffold>
+  );
 };
 
 export default TootBottomSheet;