feat: add refresh button for non-touch devices

src/components/KindFilter/index.tsx

@@ -74,7 +74,10 @@ export default function KindFilter({
     <Button
       variant="ghost"
       size="titlebar-icon"
-      className="relative w-fit px-3"
+      className={cn(
+        'relative w-fit px-3 focus:text-foreground',
+        !isDifferentFromSaved && 'text-muted-foreground'
+      )}
       onClick={() => {
         if (isSmallScreen) {
           setOpen(true)

src/components/NormalFeed/index.tsx

@@ -4,8 +4,10 @@ import { useKindFilter } from '@/providers/KindFilterProvider'
 import { useUserTrust } from '@/providers/UserTrustProvider'
 import storage from '@/services/local-storage.service'
 import { TFeedSubRequest, TNoteListMode } from '@/types'
-import { useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import KindFilter from '../KindFilter'
+import { RefreshButton } from '../RefreshButton'
+import { isTouchDevice } from '@/lib/utils'
 
 export default function NormalFeed({
   subRequests,
@@ -20,6 +22,7 @@ export default function NormalFeed({
   const { showKinds } = useKindFilter()
   const [temporaryShowKinds, setTemporaryShowKinds] = useState(showKinds)
   const [listMode, setListMode] = useState<TNoteListMode>(() => storage.getNoteListMode())
+  const supportTouch = useMemo(() => isTouchDevice(), [])
   const noteListRef = useRef<TNoteListRef>(null)
 
   const handleListModeChange = (mode: TNoteListMode) => {
@@ -47,7 +50,10 @@ export default function NormalFeed({
           handleListModeChange(listMode as TNoteListMode)
         }}
         options={
-          <KindFilter showKinds={temporaryShowKinds} onShowKindsChange={handleShowKindsChange} />
+          <>
+            {!supportTouch && <RefreshButton onClick={() => noteListRef.current?.refresh()} />}
+            <KindFilter showKinds={temporaryShowKinds} onShowKindsChange={handleShowKindsChange} />
+          </>
         }
       />
       <NoteList

src/components/NoteList/index.tsx

@@ -27,6 +27,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import PullToRefresh from 'react-simple-pull-to-refresh'
 import NoteCard, { NoteCardLoadingSkeleton } from '../NoteCard'
+import { isTouchDevice } from '@/lib/utils'
 
 const LIMIT = 200
 const ALGO_LIMIT = 500
@@ -64,6 +65,7 @@ const NoteList = forwardRef(
     const [timelineKey, setTimelineKey] = useState<string | undefined>(undefined)
     const [refreshCount, setRefreshCount] = useState(0)
     const [showCount, setShowCount] = useState(SHOW_COUNT)
+    const supportTouch = useMemo(() => isTouchDevice(), [])
     const bottomRef = useRef<HTMLDivElement | null>(null)
     const topRef = useRef<HTMLDivElement | null>(null)
 
@@ -124,7 +126,14 @@ const NoteList = forwardRef(
       }, 20)
     }
 
-    useImperativeHandle(ref, () => ({ scrollToTop }), [])
+    const refresh = () => {
+      scrollToTop()
+      setTimeout(() => {
+        setRefreshCount((count) => count + 1)
+      }, 500)
+    }
+
+    useImperativeHandle(ref, () => ({ scrollToTop, refresh }), [])
 
     useEffect(() => {
       if (!subRequests.length) return
@@ -250,45 +259,51 @@ const NoteList = forwardRef(
       }, 0)
     }
 
+    const list = (
+      <div className="min-h-screen">
+        {filteredEvents.map((event) => (
+          <NoteCard
+            key={event.id}
+            className="w-full"
+            event={event}
+            filterMutedNotes={filterMutedNotes}
+          />
+        ))}
+        {hasMore || loading ? (
+          <div ref={bottomRef}>
+            <NoteCardLoadingSkeleton />
+          </div>
+        ) : events.length ? (
+          <div className="text-center text-sm text-muted-foreground mt-2">{t('no more notes')}</div>
+        ) : (
+          <div className="flex justify-center w-full mt-2">
+            <Button size="lg" onClick={() => setRefreshCount((count) => count + 1)}>
+              {t('reload notes')}
+            </Button>
+          </div>
+        )}
+      </div>
+    )
+
     return (
       <div>
         {filteredNewEvents.length > 0 && (
           <NewNotesButton newEvents={filteredNewEvents} onClick={showNewEvents} />
         )}
         <div ref={topRef} className="scroll-mt-[calc(6rem+1px)]" />
-        <PullToRefresh
-          onRefresh={async () => {
-            setRefreshCount((count) => count + 1)
-            await new Promise((resolve) => setTimeout(resolve, 1000))
-          }}
-          pullingContent=""
-        >
-          <div className="min-h-screen">
-            {filteredEvents.map((event) => (
-              <NoteCard
-                key={event.id}
-                className="w-full"
-                event={event}
-                filterMutedNotes={filterMutedNotes}
-              />
-            ))}
-            {hasMore || loading ? (
-              <div ref={bottomRef}>
-                <NoteCardLoadingSkeleton />
-              </div>
-            ) : events.length ? (
-              <div className="text-center text-sm text-muted-foreground mt-2">
-                {t('no more notes')}
-              </div>
-            ) : (
-              <div className="flex justify-center w-full mt-2">
-                <Button size="lg" onClick={() => setRefreshCount((count) => count + 1)}>
-                  {t('reload notes')}
-                </Button>
-              </div>
-            )}
-          </div>
-        </PullToRefresh>
+        {supportTouch ? (
+          <PullToRefresh
+            onRefresh={async () => {
+              refresh()
+              await new Promise((resolve) => setTimeout(resolve, 1000))
+            }}
+            pullingContent=""
+          >
+            {list}
+          </PullToRefresh>
+        ) : (
+          list
+        )}
         <div className="h-40" />
       </div>
     )
@@ -299,4 +314,5 @@ export default NoteList
 
 export type TNoteListRef = {
   scrollToTop: (behavior?: ScrollBehavior) => void
+  refresh: () => void
 }

src/components/NotificationList/index.tsx

@@ -23,6 +23,8 @@ import PullToRefresh from 'react-simple-pull-to-refresh'
 import Tabs from '../Tabs'
 import { NotificationItem } from './NotificationItem'
 import { NotificationSkeleton } from './NotificationItem/Notification'
+import { isTouchDevice } from '@/lib/utils'
+import { RefreshButton } from '../RefreshButton'
 
 const LIMIT = 100
 const SHOW_COUNT = 30
@@ -43,6 +45,8 @@ const NotificationList = forwardRef((_, ref) => {
   const [visibleNotifications, setVisibleNotifications] = useState<NostrEvent[]>([])
   const [showCount, setShowCount] = useState(SHOW_COUNT)
   const [until, setUntil] = useState<number | undefined>(dayjs().unix())
+  const supportTouch = useMemo(() => isTouchDevice(), [])
+  const topRef = useRef<HTMLDivElement | null>(null)
   const bottomRef = useRef<HTMLDivElement | null>(null)
   const filterKinds = useMemo(() => {
     switch (notificationType) {
@@ -235,6 +239,34 @@ const NotificationList = forwardRef((_, ref) => {
     }
   }, [pubkey, timelineKey, until, loading, showCount, notifications])
 
+  const refresh = () => {
+    topRef.current?.scrollIntoView({ behavior: 'instant', block: 'start' })
+    setTimeout(() => {
+      setRefreshCount((count) => count + 1)
+    }, 500)
+  }
+
+  const list = (
+    <div className={notificationListStyle === NOTIFICATION_LIST_STYLE.COMPACT ? 'pt-2' : ''}>
+      {visibleNotifications.map((notification) => (
+        <NotificationItem
+          key={notification.id}
+          notification={notification}
+          isNew={notification.created_at > lastReadTime}
+        />
+      ))}
+      <div className="text-center text-sm text-muted-foreground">
+        {until || loading ? (
+          <div ref={bottomRef}>
+            <NotificationSkeleton />
+          </div>
+        ) : (
+          t('no more notifications')
+        )}
+      </div>
+    </div>
+  )
+
   return (
     <div>
       <Tabs
@@ -249,33 +281,22 @@ const NotificationList = forwardRef((_, ref) => {
           setShowCount(SHOW_COUNT)
           setNotificationType(type as TNotificationType)
         }}
+        options={!supportTouch ? <RefreshButton onClick={() => refresh()} /> : null}
       />
-      <PullToRefresh
-        onRefresh={async () => {
-          setRefreshCount((count) => count + 1)
-          await new Promise((resolve) => setTimeout(resolve, 1000))
-        }}
-        pullingContent=""
-      >
-        <div className={notificationListStyle === NOTIFICATION_LIST_STYLE.COMPACT ? 'pt-2' : ''}>
-          {visibleNotifications.map((notification) => (
-            <NotificationItem
-              key={notification.id}
-              notification={notification}
-              isNew={notification.created_at > lastReadTime}
-            />
-          ))}
-          <div className="text-center text-sm text-muted-foreground">
-            {until || loading ? (
-              <div ref={bottomRef}>
-                <NotificationSkeleton />
-              </div>
-            ) : (
-              t('no more notifications')
-            )}
-          </div>
-        </div>
-      </PullToRefresh>
+      <div ref={topRef} className="scroll-mt-[calc(6rem+1px)]" />
+      {supportTouch ? (
+        <PullToRefresh
+          onRefresh={async () => {
+            refresh()
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+          }}
+          pullingContent=""
+        >
+          {list}
+        </PullToRefresh>
+      ) : (
+        list
+      )}
     </div>
   )
 })

src/components/Profile/ProfileFeed.tsx

@@ -2,12 +2,14 @@ import KindFilter from '@/components/KindFilter'
 import NoteList, { TNoteListRef } from '@/components/NoteList'
 import Tabs from '@/components/Tabs'
 import { BIG_RELAY_URLS } from '@/constants'
+import { isTouchDevice } from '@/lib/utils'
 import { useKindFilter } from '@/providers/KindFilterProvider'
 import { useNostr } from '@/providers/NostrProvider'
 import client from '@/services/client.service'
 import storage from '@/services/local-storage.service'
 import { TFeedSubRequest, TNoteListMode } from '@/types'
 import { useEffect, useMemo, useRef, useState } from 'react'
+import { RefreshButton } from '../RefreshButton'
 
 export default function ProfileFeed({
   pubkey,
@@ -34,6 +36,7 @@ export default function ProfileFeed({
 
     return _tabs
   }, [myPubkey, pubkey])
+  const supportTouch = useMemo(() => isTouchDevice(), [])
 
   useEffect(() => {
     const init = async () => {
@@ -100,7 +103,10 @@ export default function ProfileFeed({
         }}
         threshold={Math.max(800, topSpace)}
         options={
-          <KindFilter showKinds={temporaryShowKinds} onShowKindsChange={handleShowKindsChange} />
+          <>
+            {!supportTouch && <RefreshButton onClick={() => noteListRef.current?.refresh()} />}
+            <KindFilter showKinds={temporaryShowKinds} onShowKindsChange={handleShowKindsChange} />
+          </>
         }
       />
       <NoteList

src/components/RefreshButton/index.tsx

@@ -0,0 +1,24 @@
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { RefreshCcw } from 'lucide-react'
+import { useState } from 'react'
+
+export function RefreshButton({ onClick }: { onClick: () => void }) {
+  const [refreshing, setRefreshing] = useState(false)
+
+  return (
+    <Button
+      variant="ghost"
+      size="titlebar-icon"
+      disabled={refreshing}
+      onClick={() => {
+        setRefreshing(true)
+        onClick()
+        setTimeout(() => setRefreshing(false), 500)
+      }}
+      className="text-muted-foreground focus:text-foreground [&_svg]:size-4"
+    >
+      <RefreshCcw className={cn(refreshing ? 'animate-spin' : '')} />
+    </Button>
+  )
+}