TootBottomSheet: add replys

src/timelines/TootBottomSheet.tsx

@@ -3,12 +3,19 @@ import {
   createEffect,
   createRenderEffect,
   createResource,
+  For,
   Show,
   type Component,
 } from "solid-js";
 import Scaffold from "../material/Scaffold";
 import TootThread from "./TootThread";
-import { AppBar, Avatar, IconButton, Toolbar } from "@suid/material";
+import {
+  AppBar,
+  Avatar,
+  CircularProgress,
+  IconButton,
+  Toolbar,
+} from "@suid/material";
 import { Title } from "../material/typography";
 import { Close as CloseIcon, Send } from "@suid/icons-material";
 import { isiOS } from "../platform/host";
@@ -63,6 +70,22 @@ const TootBottomSheet: Component = (props) => {
 
   const toot = () => remoteToot() ?? getCache(acctText(), params.id);
 
+  const [tootContext] = createResource(
+    () => [session().client, params.id] as const,
+    async ([client, id]) => {
+      return await client.v1.statuses.$select(id).context.fetch();
+    },
+  );
+
+  const ancestors = () => tootContext()?.ancestors ?? [];
+  const descendants = () => tootContext()?.descendants ?? [];
+
+  createEffect(() => {
+    if (ancestors().length > 0) {
+      document.querySelector(`#toot-${toot()!.id}`)?.scrollIntoView();
+    }
+  });
+
   const tootTitle = () => {
     const t = toot();
     if (t) {
@@ -111,10 +134,22 @@ const TootBottomSheet: Component = (props) => {
         </AppBar>
       }
     >
+      <For each={ancestors()}>
+        {(item) => (
+          <RegularToot
+            id={`toot-${item.id}`}
+            class={cards.card}
+            status={item}
+          ></RegularToot>
+        )}
+      </For>
+
       <article>
         <Show when={toot()}>
           <RegularToot
+            id={`toot-${toot()!.id}`}
             class={cards.card}
+            style={{ "scroll-margin-top": "calc(var(--scaffold-topbar-height) + 20px)" }}
             status={toot()!}
             actionable={true}
             evaluated={true}
@@ -122,6 +157,28 @@ const TootBottomSheet: Component = (props) => {
         </Show>
       </article>
 
+      <Show when={tootContext.loading}>
+        <div
+          style={{
+            display: "flex",
+            "justify-content": "center",
+            "margin-block": "12px",
+          }}
+        >
+          <CircularProgress style="width: 1.5em; height: 1.5em;" />
+        </div>
+      </Show>
+
+      <For each={descendants()}>
+        {(item) => (
+          <RegularToot
+            id={`toot-${item.id}`}
+            class={cards.card}
+            status={item}
+          ></RegularToot>
+        )}
+      </For>
+
       <div class="bottom-dock">
         <Show when={profile()}>
           <div style="display: flex; gap: 8px; background: var(--tutu-color-surface); padding: 8px 8px calc(var(--safe-area-inset-bottom, 0px) + 8px);">