BottomSheet: backward animation

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;