src/timelines/TrendTimelinePanel.tsx

@@ -1,7 +1,9 @@
 import {
   Component,
   For,
+  onCleanup,
   createSignal,
+  untrack,
   Match,
   Switch as JsSwitch,
   ErrorBoundary,
@@ -16,6 +18,7 @@ import Thread from "./Thread.jsx";
 
 const TrendTimelinePanel: Component<{
   client: mastodon.rest.Client;
+  prefetch?: boolean;
 
   openFullScreenToot: (
     toot: mastodon.v1.Status,
@@ -34,6 +37,13 @@ const TrendTimelinePanel: Component<{
   );
   const [expandedId, setExpandedId] = createSignal<string>();
 
+  const tlEndObserver = new IntersectionObserver(() => {
+    if (untrack(() => props.prefetch) && !snapshot.loading)
+      refetchTimeline();
+  });
+
+  onCleanup(() => tlEndObserver.disconnect());
+
   const isExpandedId = createSelector(expandedId);
 
   const isExpanded = (st: mastodon.v1.Status) => isExpandedId(st.id);
@@ -113,7 +123,7 @@ const TrendTimelinePanel: Component<{
                 toots={item}
                 onBoost={(...args) => onBoost(index(), ...args)}
                 onBookmark={(...args) => onBookmark(index(), ...args)}
-                onReply={({ status }, element) =>
+                onReply={(client, status) =>
                   props.openFullScreenToot(status, element, true)
                 }
                 client={props.client}
@@ -130,6 +140,8 @@ const TrendTimelinePanel: Component<{
           }}
         </For>
       </div>
+
+      <div ref={(e) => tlEndObserver.observe(e)}></div>
       <div
         style={{
           display: "flex",
@@ -137,7 +149,7 @@ const TrendTimelinePanel: Component<{
           "align-items": "center",
           "justify-content": "center",
           "flex-flow": "column",
-          gap: "20px",
+          gap: "20px"
         }}
       >
         <JsSwitch>
@@ -150,6 +162,16 @@ const TrendTimelinePanel: Component<{
             >
               Retry
             </Button>
+
+          </Match>
+          <Match when={true}>
+            <Button
+              variant="contained"
+              onClick={[refetchTimeline, undefined]}
+              disabled={snapshot.loading}
+            >
+              Refresh
+            </Button>
           </Match>
         </JsSwitch>
       </div>

vite.config.ts

@@ -88,15 +88,13 @@ export default defineConfig(({ mode }) => {
       version(),
     ],
     server: {
-      https: serverHttpCertBase
-        ? {
-            // This config controls https for the *dev server*.
-            // See docs/dev-https.md for setting up https
-            key: serverHttpCertKey,
-            cert: serverHttpCertCrt,
-            passphrase: serverHttpCertPassword,
-          }
-        : undefined,
+      https: {
+        // This config controls https for the *dev server*.
+        // See docs/dev-https.md for setting up https
+        key: serverHttpCertKey,
+        cert: serverHttpCertCrt,
+        passphrase: serverHttpCertPassword,
+      },
     },
     define: {
       "import.meta.env.BUILT_AT": `"${new Date().toISOString()}"`,