feat: pull to refresh

package-lock.json

@@ -38,6 +38,7 @@
         "react-dom": "^18.3.1",
         "react-i18next": "^15.2.0",
         "react-resizable-panels": "^2.1.7",
+        "react-simple-pull-to-refresh": "^1.3.3",
         "react-string-replace": "^1.1.1",
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7",
@@ -7950,6 +7951,15 @@
         "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
       }
     },
+    "node_modules/react-simple-pull-to-refresh": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/react-simple-pull-to-refresh/-/react-simple-pull-to-refresh-1.3.3.tgz",
+      "integrity": "sha512-6qXsa5RtNVmKJhLWvDLIX8UK51HFtCEGjdqQGf+M1Qjrcc4qH4fki97sgVpGEFBRwbY7DiVDA5N5p97kF16DTw==",
+      "peerDependencies": {
+        "react": "^16.10.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.10.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-string-replace": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/react-string-replace/-/react-string-replace-1.1.1.tgz",

package.json

@@ -48,6 +48,7 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^15.2.0",
     "react-resizable-panels": "^2.1.7",
+    "react-simple-pull-to-refresh": "^1.3.3",
     "react-string-replace": "^1.1.1",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",

src/components/NoteList/index.tsx

@@ -10,6 +10,7 @@ import dayjs from 'dayjs'
 import { Event, Filter, kinds } from 'nostr-tools'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import PullToRefresh from 'react-simple-pull-to-refresh'
 import NoteCard from '../NoteCard'
 
 const NORMAL_RELAY_LIMIT = 100
@@ -150,20 +151,32 @@ export default function NoteList({
   return (
     <div className={cn('space-y-2 sm:space-y-4', className)}>
       <DisplayRepliesSwitch displayReplies={displayReplies} setDisplayReplies={setDisplayReplies} />
-      {newEvents.length > 0 && (
+      <PullToRefresh
-        <div className="flex justify-center w-full max-sm:mt-2">
+        onRefresh={async () =>
-          <Button size="lg" onClick={showNewEvents}>
+          new Promise((resolve) => {
-            {t('show new notes')}
+            setRefreshCount((pre) => pre + 1)
-          </Button>
+            setTimeout(resolve, 1000)
-        </div>
+          })
-      )}
+        }
-      <div className="flex flex-col sm:gap-4">
+        pullingContent=""
-        {events
+      >
-          .filter((event) => displayReplies || !isReplyNoteEvent(event))
+        <>
-          .map((event) => (
+          {newEvents.filter((event) => displayReplies || !isReplyNoteEvent(event)).length > 0 && (
-            <NoteCard key={event.id} className="w-full" event={event} />
+            <div className="flex justify-center w-full max-sm:mt-2">
-          ))}
+              <Button size="lg" onClick={showNewEvents}>
-      </div>
+                {t('show new notes')}
+              </Button>
+            </div>
+          )}
+          <div className="flex flex-col sm:gap-4">
+            {events
+              .filter((event) => displayReplies || !isReplyNoteEvent(event))
+              .map((event) => (
+                <NoteCard key={event.id} className="w-full" event={event} />
+              ))}
+          </div>
+        </>
+      </PullToRefresh>
       <div className="text-center text-sm text-muted-foreground">
         {hasMore ? (
           <div ref={bottomRef}>{t('loading...')}</div>