PullDownToRefresh: init prototype

src/timelines/Home.tsx

@@ -38,12 +38,14 @@ import BottomSheet from "../material/BottomSheet";
 import { $settings } from "../settings/stores";
 import { useStore } from "@nanostores/solid";
 import { vibrate } from "../platform/hardware";
+import PullDownToRefresh from "./PullDownToRefresh";
 
 const TimelinePanel: Component<{
   client: mastodon.rest.Client;
   name: "home" | "public" | "trends";
   prefetch?: boolean;
 }> = (props) => {
+  const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
   const [
     timeline,
     snapshot,
@@ -108,7 +110,18 @@ const TimelinePanel: Component<{
 
   return (
     <>
-      <div>
+      <PullDownToRefresh
+        linkedElement={scrollLinked()}
+        loading={snapshot.loading}
+        onRefresh={() => refetchTimeline({ direction: "new" })}
+      />
+      <div
+        ref={(e) =>
+          setTimeout(() => {
+            setScrollLinked(e.parentElement!);
+          }, 0)
+        }
+      >
         <For each={timeline}>
           {(item, index) => {
             return (
@@ -249,8 +262,9 @@ const Home: ParentComponent = (props) => {
       overflow: visible auto;
       max-width: 560px;
       height: 100%;
-      padding: 40px 16px;
+      padding: 0 16px;
       scroll-snap-align: center;
+      overscroll-behavior-block: none;
 
       @media (max-width: 600px) {
         padding: 0;