TimelinePanel: rewrite thread expand algorithm

src/timelines/Home.tsx

@@ -55,6 +55,7 @@ const TimelinePanel: Component<{
       ? props.client.v1.timelines[props.name]
       : props.client.v1.trends.statuses,
   );
+  const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
 
   const tlEndObserver = new IntersectionObserver(() => {
     if (untrack(() => props.prefetch) && !snapshot.loading)
@@ -130,6 +131,12 @@ const TimelinePanel: Component<{
                 onBoost={(...args) => onBoost(index(), ...args)}
                 onBookmark={(...args) => onBookmark(index(), ...args)}
                 client={props.client}
+                expanded={item.id === expandedThreadId() ? 1 : 0}
+                onExpandChange={() =>
+                  setExpandedThreadId(
+                    item.id !== expandedThreadId() ? item.id : undefined,
+                  )
+                }
               />
             );
           }}
@@ -138,38 +145,33 @@ const TimelinePanel: Component<{
 
       <div ref={(e) => tlEndObserver.observe(e)}></div>
       <Show when={snapshot.loading}>
-        <div class="loading-line" style={{ width: "100%" }}>
+        <div
+          class="loading-line"
+          style={{
+            width: "100%",
+          }}
+        >
           <LinearProgress />
         </div>
       </Show>
-      <Show when={snapshot.error}>
       <div
         style={{
           display: "flex",
-            padding: "20px 0 var(--safe-area-inset-bottom, 20px)",
+          padding: "20px 0 calc(20px + var(--safe-area-inset-bottom, 0px))",
           "align-items": "center",
           "justify-content": "center",
         }}
       >
-          <Button variant="contained" onClick={[refetchTimeline, "old"]}>
+        <Button
+          variant="contained"
+          onClick={[refetchTimeline, "old"]}
+          disabled={snapshot.loading}
+        >
+          <Show when={snapshot.error} fallback={<>Load More</>}>
             Retry
+          </Show>
         </Button>
       </div>
-      </Show>
-      <Show when={!props.prefetch && !snapshot.loading}>
-        <div
-          style={{
-            display: "flex",
-            padding: "20px 0 var(--safe-area-inset-bottom, 20px)",
-            "align-items": "center",
-            "justify-content": "center",
-          }}
-        >
-          <Button variant="contained" onClick={[refetchTimeline, "old"]}>
-            Load More
-          </Button>
-        </div>
-      </Show>
     </>
   );
 };

src/timelines/TootThread.tsx

@@ -13,12 +13,13 @@ type TootThreadProps = {
 
   onBoost?(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
   onBookmark?(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
+  onExpandChange?(level: 0 | 1 | 2): void;
 };
 
 const TootThread: Component<TootThreadProps> = (props) => {
   const status = () => props.status;
   const now = useTimeSource();
-  const [expanded, setExpanded] = createSignal(false);
+  const expanded = () => props.expanded ?? 0;
 
   const [inReplyTo] = createResource(
     () => [props.client, status().inReplyToId || null] as const,
@@ -65,10 +66,12 @@ const TootThread: Component<TootThreadProps> = (props) => {
     }
   `;
 
+  const nextExpandLevel = [1, 2, 2] as const;
+
   return (
     <article
-      classList={{ "thread-line": !!inReplyTo(), expanded: expanded() }}
-      onClick={() => setExpanded((x) => !x)}
+      classList={{ "thread-line": !!inReplyTo(), expanded: expanded() > 0 }}
+      onClick={() => props.onExpandChange?.(nextExpandLevel[expanded()])}
     >
       <Show when={inReplyTo()}>
         <CompactToot
@@ -80,7 +83,7 @@ const TootThread: Component<TootThreadProps> = (props) => {
       <RegularToot
         status={status()}
         class={cardStyle.card}
-        actionable={expanded()}
+        actionable={expanded() > 0}
         onBookmark={(s) => bookmark(s)}
         onRetoot={(s) => boost(s)}
       />