feat: 💨

This commit is contained in:
codytseng 2026-01-06 00:00:51 +08:00
parent 695f2fe017
commit ed843f637a
8 changed files with 198 additions and 197 deletions

View file

@ -10,6 +10,7 @@ import { useContentPolicy } from '@/providers/ContentPolicyProvider'
import { useDeletedEvent } from '@/providers/DeletedEventProvider'
import { useMuteList } from '@/providers/MuteListProvider'
import { useNostr } from '@/providers/NostrProvider'
import { usePageActive } from '@/providers/PageActiveProvider'
import { useUserTrust } from '@/providers/UserTrustProvider'
import client from '@/services/client.service'
import threadService from '@/services/thread.service'
@ -75,6 +76,7 @@ const NoteList = forwardRef<
ref
) => {
const { t } = useTranslation()
const active = usePageActive()
const { startLogin } = useNostr()
const { isSpammer, meetsMinTrustScore } = useUserTrust()
const { mutePubkeySet } = useMuteList()
@ -93,6 +95,12 @@ const NoteList = forwardRef<
const [refreshCount, setRefreshCount] = useState(0)
const supportTouch = useMemo(() => isTouchDevice(), [])
const topRef = useRef<HTMLDivElement | null>(null)
const sinceRef = useRef<number | undefined>(undefined)
sinceRef.current = newEvents.length
? newEvents[0].created_at + 1
: events.length
? events[0].created_at + 1
: undefined
const showNewNotesDirectlyRef = useRef(showNewNotesDirectly)
showNewNotesDirectlyRef.current = showNewNotesDirectly
@ -287,16 +295,24 @@ const NoteList = forwardRef<
useEffect(() => {
if (!subRequests.length) return
async function init() {
setInitialLoading(true)
sinceRef.current = undefined
setEvents([])
setStoredEvents([])
setNewEvents([])
}, [JSON.stringify(subRequests), refreshCount, JSON.stringify(showKinds)])
useEffect(() => {
if (!subRequests.length || !active) return
async function init() {
setInitialLoading(true)
if (showKinds?.length === 0 && subRequests.every(({ filter }) => !filter.kinds)) {
return () => {}
}
const since = sinceRef.current
if (isPubkeyFeed) {
const storedEvents = await client.getEventsFromIndexed({
authors: subRequests.flatMap(({ filter }) => filter.authors ?? []),
@ -320,23 +336,9 @@ const NoteList = forwardRef<
})
)
const { closer, timelineKey } = await client.subscribeTimeline(
preprocessedSubRequests,
{
onEvents: (events, eosed) => {
if (events.length > 0) {
setEvents(events)
}
if (eosed) {
threadService.addRepliesToThread(events)
setInitialLoading(false)
}
},
onNew: (event) => {
const handleNewEvents = (newEvents: Event[]) => {
if (showNewNotesDirectlyRef.current) {
setEvents((oldEvents) =>
oldEvents.some((e) => e.id === event.id) ? oldEvents : [event, ...oldEvents]
)
setEvents((oldEvents) => mergeTimelines([newEvents, oldEvents]))
} else {
const isAtTop = (() => {
if (!topRef.current) return true
@ -345,15 +347,32 @@ const NoteList = forwardRef<
})()
if (isAtTop) {
setEvents((oldEvents) =>
oldEvents.some((e) => e.id === event.id) ? oldEvents : [event, ...oldEvents]
)
setEvents((oldEvents) => mergeTimelines([newEvents, oldEvents]))
} else {
setNewEvents((oldEvents) =>
[event, ...oldEvents].sort((a, b) => b.created_at - a.created_at)
)
setNewEvents((oldEvents) => mergeTimelines([newEvents, oldEvents]))
}
}
}
const { closer, timelineKey } = await client.subscribeTimeline(
preprocessedSubRequests,
{
onEvents: (events, eosed) => {
if (events.length > 0) {
if (!since) {
setEvents(events)
} else {
const newEvents = events.filter((evt) => evt.created_at >= since)
handleNewEvents(newEvents)
}
}
if (eosed) {
threadService.addRepliesToThread(events)
setInitialLoading(false)
}
},
onNew: (event) => {
handleNewEvents([event])
threadService.addRepliesToThread([event])
},
onClose: (url, reason) => {
@ -388,7 +407,7 @@ const NoteList = forwardRef<
return () => {
promise.then((closer) => closer())
}
}, [JSON.stringify(subRequests), refreshCount, JSON.stringify(showKinds)])
}, [JSON.stringify(subRequests), refreshCount, JSON.stringify(showKinds), active])
const handleLoadMore = useCallback(async () => {
if (!timelineKey || areAlgoRelays) return false
@ -412,7 +431,7 @@ const NoteList = forwardRef<
})
const showNewEvents = () => {
setEvents((oldEvents) => [...newEvents, ...oldEvents])
setEvents((oldEvents) => mergeTimelines([newEvents, oldEvents]))
setNewEvents([])
setTimeout(() => {
scrollToTop('smooth')

View file

@ -12,6 +12,7 @@ import { useContentPolicy } from '@/providers/ContentPolicyProvider'
import { useDeletedEvent } from '@/providers/DeletedEventProvider'
import { useMuteList } from '@/providers/MuteListProvider'
import { useNostr } from '@/providers/NostrProvider'
import { usePageActive } from '@/providers/PageActiveProvider'
import { usePinnedUsers } from '@/providers/PinnedUsersProvider'
import { useUserTrust } from '@/providers/UserTrustProvider'
import client from '@/services/client.service'
@ -68,6 +69,7 @@ const UserAggregationList = forwardRef<
ref
) => {
const { t } = useTranslation()
const active = usePageActive()
const { pubkey: currentPubkey, startLogin } = useNostr()
const { push } = useSecondaryPage()
const { mutePubkeySet } = useMuteList()
@ -95,6 +97,12 @@ const UserAggregationList = forwardRef<
const bottomRef = useRef<HTMLDivElement | null>(null)
const topRef = useRef<HTMLDivElement | null>(null)
const nonPinnedTopRef = useRef<HTMLDivElement | null>(null)
const sinceRef = useRef<number | undefined>(undefined)
sinceRef.current = newEvents.length
? newEvents[0].created_at + 1
: events.length
? events[0].created_at + 1
: undefined
const scrollToTop = (behavior: ScrollBehavior = 'instant') => {
setTimeout(() => {
@ -120,15 +128,19 @@ const UserAggregationList = forwardRef<
useEffect(() => {
if (!subRequests.length) return
sinceRef.current = undefined
setSince(dayjs().subtract(1, 'day').unix())
setHasMore(true)
async function init() {
setLoading(true)
setStoredEvents([])
setEvents([])
setNewEvents([])
setHasMore(true)
}, [feedId, refreshCount])
useEffect(() => {
if (!subRequests.length || !active) return
async function init() {
setLoading(true)
if (showKinds?.length === 0 && subRequests.every(({ filter }) => !filter.kinds)) {
setLoading(false)
@ -136,6 +148,8 @@ const UserAggregationList = forwardRef<
return () => {}
}
const since = sinceRef.current
if (isPubkeyFeed) {
const storedEvents = await client.getEventsFromIndexed({
authors: subRequests.flatMap(({ filter }) => filter.authors ?? []),
@ -164,21 +178,23 @@ const UserAggregationList = forwardRef<
{
onEvents: (events, eosed) => {
if (events.length > 0) {
if (!since) {
setEvents(events)
} else {
const newEvents = events.filter((evt) => evt.created_at >= since)
setNewEvents((oldEvents) => mergeTimelines([newEvents, oldEvents]))
}
}
if (areAlgoRelays) {
setHasMore(false)
}
if (eosed) {
setLoading(false)
setHasMore(events.length > 0)
threadService.addRepliesToThread(events)
}
},
onNew: (event) => {
setNewEvents((oldEvents) =>
[event, ...oldEvents].sort((a, b) => b.created_at - a.created_at)
)
setNewEvents((oldEvents) => mergeTimelines([[event], oldEvents]))
threadService.addRepliesToThread([event])
},
onClose: (url, reason) => {
@ -214,7 +230,7 @@ const UserAggregationList = forwardRef<
return () => {
promise.then((closer) => closer())
}
}, [feedId, refreshCount])
}, [feedId, refreshCount, active])
useEffect(() => {
if (loading || !hasMore || !timelineKey || !events.length) {

View file

@ -4,6 +4,7 @@ import { ScrollArea } from '@/components/ui/scroll-area'
import { usePrimaryPage } from '@/PageManager'
import { DeepBrowsingProvider } from '@/providers/DeepBrowsingProvider'
import { useNostr } from '@/providers/NostrProvider'
import { PageActiveContext } from '@/providers/PageActiveProvider'
import { useUserPreferences } from '@/providers/UserPreferencesProvider'
import { TPrimaryPageName } from '@/routes/primary'
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
@ -76,6 +77,7 @@ const PrimaryPageLayout = forwardRef(
if (enableSingleColumnLayout) {
return (
<PageActiveContext.Provider value={current === pageName && display}>
<DeepBrowsingProvider active={current === pageName && display}>
<div
ref={smallScreenScrollAreaRef}
@ -90,11 +92,16 @@ const PrimaryPageLayout = forwardRef(
</div>
{displayScrollToTopButton && <ScrollToTopButton />}
</DeepBrowsingProvider>
</PageActiveContext.Provider>
)
}
return (
<DeepBrowsingProvider active={current === pageName && display} scrollAreaRef={scrollAreaRef}>
<PageActiveContext.Provider value={current === pageName && display}>
<DeepBrowsingProvider
active={current === pageName && display}
scrollAreaRef={scrollAreaRef}
>
<ScrollArea
className="h-full overflow-auto"
scrollBarClassName="z-30 pt-12"
@ -108,6 +115,7 @@ const PrimaryPageLayout = forwardRef(
</ScrollArea>
{displayScrollToTopButton && <ScrollToTopButton scrollAreaRef={scrollAreaRef} />}
</DeepBrowsingProvider>
</PageActiveContext.Provider>
)
}
)

View file

@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button'
import { ScrollArea } from '@/components/ui/scroll-area'
import { useSecondaryPage } from '@/PageManager'
import { DeepBrowsingProvider } from '@/providers/DeepBrowsingProvider'
import { PageActiveContext } from '@/providers/PageActiveProvider'
import { useUserPreferences } from '@/providers/UserPreferencesProvider'
import { ChevronLeft } from 'lucide-react'
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
@ -60,6 +61,7 @@ const SecondaryPageLayout = forwardRef(
if (enableSingleColumnLayout) {
return (
<PageActiveContext.Provider value={currentIndex === index}>
<DeepBrowsingProvider active={currentIndex === index}>
<div
style={{
@ -77,10 +79,12 @@ const SecondaryPageLayout = forwardRef(
</div>
{displayScrollToTopButton && <ScrollToTopButton />}
</DeepBrowsingProvider>
</PageActiveContext.Provider>
)
}
return (
<PageActiveContext.Provider value={currentIndex === index}>
<DeepBrowsingProvider active={currentIndex === index} scrollAreaRef={scrollAreaRef}>
<ScrollArea
className="h-full overflow-auto"
@ -99,6 +103,7 @@ const SecondaryPageLayout = forwardRef(
</ScrollArea>
{displayScrollToTopButton && <ScrollToTopButton scrollAreaRef={scrollAreaRef} />}
</DeepBrowsingProvider>
</PageActiveContext.Provider>
)
}
)

View file

@ -3,7 +3,7 @@ import { AbstractRelay } from 'nostr-tools/abstract-relay'
const DEFAULT_CONNECTION_TIMEOUT = 10 * 1000 // 10 seconds
const CLEANUP_THRESHOLD = 15 // number of relays to trigger cleanup
const CLEANUP_INTERVAL = 5 * 1000 // 5 seconds
const CLEANUP_INTERVAL = 30 * 1000 // 30 seconds
const IDLE_TIMEOUT = 10 * 1000 // 10 seconds
export class SmartPool extends SimplePool {

View file

@ -6,7 +6,6 @@ import { usePrimaryPage } from '@/PageManager'
import client from '@/services/client.service'
import storage from '@/services/local-storage.service'
import { kinds, NostrEvent } from 'nostr-tools'
import { SubCloser } from 'nostr-tools/abstract-pool'
import { createContext, useContext, useEffect, useMemo, useState } from 'react'
import { useContentPolicy } from './ContentPolicyProvider'
import { useMuteList } from './MuteListProvider'
@ -88,33 +87,21 @@ export function NotificationProvider({ children }: { children: React.ReactNode }
setNewNotifications([])
setReadNotificationIdSet(new Set())
// Track if component is mounted
const isMountedRef = { current: true }
const subCloserRef: {
current: SubCloser | null
} = { current: null }
const subscribe = async () => {
if (subCloserRef.current) {
subCloserRef.current.close()
subCloserRef.current = null
}
if (!isMountedRef.current) return null
try {
let eosed = false
const relayList = await client.fetchRelayList(pubkey)
const relays =
relayList.read.length > 0 ? relayList.read.slice(0, 5) : getDefaultRelayUrls()
const subCloser = client.subscribe(
const relays = relayList.read.length > 0 ? relayList.read.slice(0, 5) : getDefaultRelayUrls()
return client.subscribe(
relays,
[
{
kinds: [
kinds.ShortTextNote,
kinds.Repost,
kinds.GenericRepost,
kinds.Reaction,
kinds.Zap,
kinds.Highlights,
ExtendedKind.COMMENT,
ExtendedKind.POLL_RESPONSE,
ExtendedKind.VOICE_COMMENT,
@ -147,51 +134,14 @@ export function NotificationProvider({ children }: { children: React.ReactNode }
return [evt, ...prev]
})
}
},
onAllClose: (reasons) => {
if (reasons.every((reason) => reason === 'closed by caller')) {
return
}
// Only reconnect if still mounted and not a manual close
if (isMountedRef.current) {
setTimeout(() => {
if (isMountedRef.current) {
subscribe()
}
}, 5_000)
}
}
}
)
subCloserRef.current = subCloser
return subCloser
} catch (error) {
console.error('Subscription error:', error)
// Retry on error if still mounted
if (isMountedRef.current) {
setTimeout(() => {
if (isMountedRef.current) {
subscribe()
}
}, 5_000)
}
return null
}
}
// Initial subscription
subscribe()
// Cleanup function
const promise = subscribe()
return () => {
isMountedRef.current = false
if (subCloserRef.current) {
subCloserRef.current.close()
subCloserRef.current = null
}
promise.then((closer) => closer.close())
}
}, [pubkey])

View file

@ -0,0 +1,8 @@
import { createContext, useContext } from 'react'
export const PageActiveContext = createContext<boolean | null>(null)
export function usePageActive() {
const ctx = useContext(PageActiveContext)
return ctx ?? false
}

View file

@ -8,14 +8,9 @@ import RelayPage from '@/pages/primary/RelayPage'
import SearchPage from '@/pages/primary/SearchPage'
import SettingsPage from '@/pages/primary/SettingsPage'
import { TPageRef } from '@/types'
import { createRef, ForwardRefExoticComponent, RefAttributes } from 'react'
import { createRef } from 'react'
type RouteConfig = {
key: string
component: ForwardRefExoticComponent<RefAttributes<TPageRef>>
}
const PRIMARY_ROUTE_CONFIGS: RouteConfig[] = [
const PRIMARY_ROUTE_CONFIGS = [
{ key: 'home', component: NoteListPage },
{ key: 'explore', component: ExplorePage },
{ key: 'notifications', component: NotificationListPage },
@ -25,7 +20,7 @@ const PRIMARY_ROUTE_CONFIGS: RouteConfig[] = [
{ key: 'search', component: SearchPage },
{ key: 'bookmark', component: BookmarkPage },
{ key: 'settings', component: SettingsPage }
]
] as const
export const PRIMARY_PAGE_REF_MAP = PRIMARY_ROUTE_CONFIGS.reduce(
(acc, { key }) => {
@ -40,7 +35,7 @@ export const PRIMARY_PAGE_MAP = PRIMARY_ROUTE_CONFIGS.reduce(
acc[key] = <Component ref={PRIMARY_PAGE_REF_MAP[key]} />
return acc
},
{} as Record<string, JSX.Element>
{} as Record<(typeof PRIMARY_ROUTE_CONFIGS)[number]['key'], JSX.Element>
)
export type TPrimaryPageName = keyof typeof PRIMARY_PAGE_MAP