TootList: mentions in toot links to profile page

- bug: main toot in TootBottomSheet does not link
  profile

src/timelines/TootBottomSheet.tsx

@@ -25,6 +25,8 @@ import { vibrate } from "../platform/hardware";
 import { createTimeSource, TimeSourceProvider } from "../platform/timesrc";
 import TootComposer from "./TootComposer";
 import { useDocumentTitle } from "../utils";
+import { createTimelineControlsForArray } from "../masto/timelines";
+import TootList from "./TootList";
 
 let cachedEntry: [string, mastodon.v1.Status] | undefined;
 
@@ -48,7 +50,7 @@ const TootBottomSheet: Component = (props) => {
   const time = createTimeSource();
   const [isInTyping, setInTyping] = createSignal(false);
   const acctText = () => decodeURIComponent(params.acct);
-  const session = useSessionForAcctStr(acctText)
+  const session = useSessionForAcctStr(acctText);
 
   const pushedCount = () => {
     return location.state?.tootBottomSheetPushedCount || 0;
@@ -84,20 +86,24 @@ const TootBottomSheet: Component = (props) => {
     },
   );
 
-  const ancestors = () => tootContext()?.ancestors ?? [];
-  const descendants = () => tootContext()?.descendants ?? [];
+  const ancestors = createTimelineControlsForArray(
+    () => tootContext()?.ancestors,
+  );
+  const descendants = createTimelineControlsForArray(
+    () => tootContext()?.descendants,
+  );
 
   createEffect(() => {
-    if (ancestors().length > 0) {
+    if (ancestors.list.length > 0) {
       document.querySelector(`#toot-${toot()!.id}`)?.scrollIntoView();
     }
   });
 
   useDocumentTitle(() => {
-    const t = toot()?.reblog ?? toot()
-    const name = t?.account.displayName ?? "Someone"
-    return `${name}'s toot`
-  })
+    const t = toot()?.reblog ?? toot();
+    const name = t?.account.displayName ?? "Someone";
+    return `${name}'s toot`;
+  });
 
   const tootDisplayName = () => {
     const t = toot()?.reblog ?? toot();
@@ -174,7 +180,7 @@ const TootBottomSheet: Component = (props) => {
       return;
     }
 
-    const others = ancestors().map((x) => x.account);
+    const others = ancestors.list.map((x) => ancestors.get(x)!.value.account);
 
     const values = [tootAcct, ...others].map((x) => `@${x.acct}`);
     return Array.from(new Set(values).keys());
@@ -216,11 +222,7 @@ const TootBottomSheet: Component = (props) => {
             <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
               {pushedCount() > 0 ? <BackIcon /> : <CloseIcon />}
             </IconButton>
-            <Title
-              component="div"
-              class="name"
-              use:solid-styled
-            >
+            <Title component="div" class="name" use:solid-styled>
               <span
                 ref={(e: HTMLElement) =>
                   createRenderEffect(
@@ -235,17 +237,11 @@ const TootBottomSheet: Component = (props) => {
       }
     >
       <TimeSourceProvider value={time}>
-        <For each={ancestors()}>
-          {(item) => (
-            <RegularToot
-              id={`toot-${item.id}`}
-              class={cards.card}
-              status={item}
-              actionable={false}
-              onClick={[switchContext, item]}
-            ></RegularToot>
-          )}
-        </For>
+        <TootList
+          threads={ancestors.list}
+          onUnknownThread={ancestors.getPath}
+          onChangeToot={ancestors.set}
+        />
 
         <article>
           <Show when={toot()}>
@@ -291,17 +287,11 @@ const TootBottomSheet: Component = (props) => {
           </div>
         </Show>
 
-        <For each={descendants()}>
-          {(item) => (
-            <RegularToot
-              id={`toot-${item.id}`}
-              class={cards.card}
-              status={item}
-              actionable={false}
-              onClick={[switchContext, item]}
-            ></RegularToot>
-          )}
-        </For>
+        <TootList
+          threads={descendants.list}
+          onUnknownThread={descendants.getPath}
+          onChangeToot={descendants.set}
+        />
       </TimeSourceProvider>
       <div style={{ height: "var(--safe-area-inset-bottom, 0)" }}></div>
     </Scaffold>