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={
+          <>
+            {!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,19 +259,7 @@ const NoteList = forwardRef(
       }, 0)
     }
 
-    return (
+    const list = (
-      <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
@@ -277,9 +274,7 @@ const NoteList = forwardRef(
             <NoteCardLoadingSkeleton />
           </div>
         ) : events.length ? (
-              <div className="text-center text-sm text-muted-foreground mt-2">
+          <div className="text-center text-sm text-muted-foreground mt-2">{t('no more notes')}</div>
-                {t('no more notes')}
-              </div>
         ) : (
           <div className="flex justify-center w-full mt-2">
             <Button size="lg" onClick={() => setRefreshCount((count) => count + 1)}>
@@ -288,7 +283,27 @@ const NoteList = forwardRef(
           </div>
         )}
       </div>
+    )
+
+    return (
+      <div>
+        {filteredNewEvents.length > 0 && (
+          <NewNotesButton newEvents={filteredNewEvents} onClick={showNewEvents} />
+        )}
+        <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 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,28 +239,14 @@ const NotificationList = forwardRef((_, ref) => {
     }
   }, [pubkey, timelineKey, until, loading, showCount, notifications])
 
-  return (
+  const refresh = () => {
-    <div>
+    topRef.current?.scrollIntoView({ behavior: 'instant', block: 'start' })
-      <Tabs
+    setTimeout(() => {
-        value={notificationType}
-        tabs={[
-          { value: 'all', label: 'All' },
-          { value: 'mentions', label: 'Mentions' },
-          { value: 'reactions', label: 'Reactions' },
-          { value: 'zaps', label: 'Zaps' }
-        ]}
-        onTabChange={(type) => {
-          setShowCount(SHOW_COUNT)
-          setNotificationType(type as TNotificationType)
-        }}
-      />
-      <PullToRefresh
-        onRefresh={async () => {
       setRefreshCount((count) => count + 1)
-          await new Promise((resolve) => setTimeout(resolve, 1000))
+    }, 500)
-        }}
+  }
-        pullingContent=""
+
-      >
+  const list = (
     <div className={notificationListStyle === NOTIFICATION_LIST_STYLE.COMPACT ? 'pt-2' : ''}>
       {visibleNotifications.map((notification) => (
         <NotificationItem
@@ -275,7 +265,38 @@ const NotificationList = forwardRef((_, ref) => {
         )}
       </div>
     </div>
+  )
+
+  return (
+    <div>
+      <Tabs
+        value={notificationType}
+        tabs={[
+          { value: 'all', label: 'All' },
+          { value: 'mentions', label: 'Mentions' },
+          { value: 'reactions', label: 'Reactions' },
+          { value: 'zaps', label: 'Zaps' }
+        ]}
+        onTabChange={(type) => {
+          setShowCount(SHOW_COUNT)
+          setNotificationType(type as TNotificationType)
+        }}
+        options={!supportTouch ? <RefreshButton onClick={() => refresh()} /> : null}
+      />
+      <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={
+          <>
+            {!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>
+  )
+}