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)",
-            "align-items": "center",
-            "justify-content": "center",
-          }}
+      <div
+        style={{
+          display: "flex",
+          padding: "20px 0 calc(20px + var(--safe-area-inset-bottom, 0px))",
+          "align-items": "center",
+          "justify-content": "center",
+        }}
+      >
+        <Button
+          variant="contained"
+          onClick={[refetchTimeline, "old"]}
+          disabled={snapshot.loading}
         >
-          <Button variant="contained" onClick={[refetchTimeline, "old"]}>
+          <Show when={snapshot.error} fallback={<>Load More</>}>
             Retry
-          </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>
+          </Show>
+        </Button>
+      </div>
     </>
   );
 };