feat: auto-show new notes at top

This commit is contained in:
codytseng 2026-01-05 13:13:17 +08:00
parent 53a67d8233
commit d1b3a8c4c7
10 changed files with 32 additions and 82 deletions

View file

@ -84,7 +84,7 @@ export default function KindFilter({
variant="ghost"
size="titlebar-icon"
className={cn(
'relative w-fit px-3 hover:text-foreground',
'relative hover:text-foreground',
!isDifferentFromSaved && 'text-muted-foreground'
)}
onClick={() => {

View file

@ -1,28 +0,0 @@
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import { useUserPreferences } from '@/providers/UserPreferencesProvider'
import { Radio } from 'lucide-react'
import { useTranslation } from 'react-i18next'
export function LiveFeedToggle() {
const { t } = useTranslation()
const { enableLiveFeed, updateEnableLiveFeed } = useUserPreferences()
return (
<Button
variant="ghost"
size="titlebar-icon"
title={t(enableLiveFeed ? 'Disable live feed' : 'Enable live feed')}
onClick={() => updateEnableLiveFeed(!enableLiveFeed)}
>
<Radio
className={cn(
'size-4',
enableLiveFeed
? 'text-green-400 focus:text-green-300 animate-pulse'
: 'text-muted-foreground focus:text-foreground'
)}
/>
</Button>
)
}

View file

@ -9,8 +9,6 @@ import { TFeedSubRequest, TNoteListMode } from '@/types'
import { useMemo, useRef, useState } from 'react'
import KindFilter from '../KindFilter'
import { RefreshButton } from '../RefreshButton'
import { LiveFeedToggle } from '../LiveFeedToggle'
import { useUserPreferences } from '@/providers/UserPreferencesProvider'
export default function NormalFeed({
subRequests,
@ -30,7 +28,6 @@ export default function NormalFeed({
isPubkeyFeed?: boolean
}) {
const { showKinds } = useKindFilter()
const { enableLiveFeed } = useUserPreferences()
const [temporaryShowKinds, setTemporaryShowKinds] = useState(showKinds)
const [listMode, setListMode] = useState<TNoteListMode>(() => storage.getNoteListMode())
const supportTouch = useMemo(() => isTouchDevice(), [])
@ -88,7 +85,6 @@ export default function NormalFeed({
}}
/>
)}
<LiveFeedToggle />
{!isPubkeyFeed && <TrustScoreFilter onOpenChange={handleTrustFilterOpenChange} />}
{showKindsFilter && (
<KindFilter
@ -109,7 +105,6 @@ export default function NormalFeed({
areAlgoRelays={areAlgoRelays}
showRelayCloseReason={showRelayCloseReason}
isPubkeyFeed={isPubkeyFeed}
showNewNotesDirectly={enableLiveFeed}
/>
) : (
<NoteList
@ -120,7 +115,6 @@ export default function NormalFeed({
areAlgoRelays={areAlgoRelays}
showRelayCloseReason={showRelayCloseReason}
isPubkeyFeed={isPubkeyFeed}
showNewNotesDirectly={enableLiveFeed}
/>
)}
</>

View file

@ -337,11 +337,23 @@ const NoteList = forwardRef<
setEvents((oldEvents) =>
oldEvents.some((e) => e.id === event.id) ? oldEvents : [event, ...oldEvents]
)
} else {
const isAtTop = (() => {
if (!topRef.current) return true
const rect = topRef.current.getBoundingClientRect()
return rect.top >= 50
})()
if (isAtTop) {
setEvents((oldEvents) =>
oldEvents.some((e) => e.id === event.id) ? oldEvents : [event, ...oldEvents]
)
} else {
setNewEvents((oldEvents) =>
[event, ...oldEvents].sort((a, b) => b.created_at - a.created_at)
)
}
}
threadService.addRepliesToThread([event])
},
onClose: (url, reason) => {

View file

@ -7,14 +7,12 @@ import { generateBech32IdFromETag } from '@/lib/tag'
import { isTouchDevice } from '@/lib/utils'
import { useKindFilter } from '@/providers/KindFilterProvider'
import { useNostr } from '@/providers/NostrProvider'
import { useUserPreferences } from '@/providers/UserPreferencesProvider'
import client from '@/services/client.service'
import storage from '@/services/local-storage.service'
import relayInfoService from '@/services/relay-info.service'
import { TFeedSubRequest, TNoteListMode } from '@/types'
import { NostrEvent } from 'nostr-tools'
import { useEffect, useMemo, useRef, useState } from 'react'
import { LiveFeedToggle } from '../LiveFeedToggle'
import { RefreshButton } from '../RefreshButton'
export default function ProfileFeed({
@ -27,7 +25,6 @@ export default function ProfileFeed({
search?: string
}) {
const { pubkey: myPubkey, pinListEvent: myPinListEvent } = useNostr()
const { enableLiveFeed } = useUserPreferences()
const { showKinds } = useKindFilter()
const [temporaryShowKinds, setTemporaryShowKinds] = useState(showKinds)
const [listMode, setListMode] = useState<TNoteListMode>(() => {
@ -168,7 +165,6 @@ export default function ProfileFeed({
options={
<>
{!supportTouch && <RefreshButton onClick={() => noteListRef.current?.refresh()} />}
<LiveFeedToggle />
<KindFilter showKinds={temporaryShowKinds} onShowKindsChange={handleShowKindsChange} />
</>
}
@ -180,7 +176,7 @@ export default function ProfileFeed({
hideReplies={listMode === 'posts'}
filterMutedNotes={false}
pinnedEventIds={listMode === 'you' || !!search ? [] : pinnedEventIds}
showNewNotesDirectly={myPubkey === pubkey || enableLiveFeed}
showNewNotesDirectly={myPubkey === pubkey}
/>
</>
)

View file

@ -1,8 +1,9 @@
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
import { Separator } from '@/components/ui/separator'
import { cn } from '@/lib/utils'
import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
import { ReactNode, useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { ScrollArea, ScrollBar } from '../ui/scroll-area'
type TabDefinition = {
value: string
@ -124,7 +125,12 @@ export default function Tabs({
</div>
<ScrollBar orientation="horizontal" className="opacity-0 pointer-events-none" />
</ScrollArea>
{options && <div className="py-1 flex items-center">{options}</div>}
{options && (
<div className="py-1 flex items-center gap-1">
<Separator orientation="vertical" className="h-8" />
{options}
</div>
)}
</div>
)
}

View file

@ -54,7 +54,6 @@ const UserAggregationList = forwardRef<
areAlgoRelays?: boolean
showRelayCloseReason?: boolean
isPubkeyFeed?: boolean
showNewNotesDirectly?: boolean
}
>(
(
@ -64,8 +63,7 @@ const UserAggregationList = forwardRef<
filterMutedNotes = true,
areAlgoRelays = false,
showRelayCloseReason = false,
isPubkeyFeed = false,
showNewNotesDirectly = false
isPubkeyFeed = false
},
ref
) => {
@ -97,8 +95,6 @@ const UserAggregationList = forwardRef<
const bottomRef = useRef<HTMLDivElement | null>(null)
const topRef = useRef<HTMLDivElement | null>(null)
const nonPinnedTopRef = useRef<HTMLDivElement | null>(null)
const showNewNotesDirectlyRef = useRef(showNewNotesDirectly)
showNewNotesDirectlyRef.current = showNewNotesDirectly
const scrollToTop = (behavior: ScrollBehavior = 'instant') => {
setTimeout(() => {
@ -180,13 +176,9 @@ const UserAggregationList = forwardRef<
}
},
onNew: (event) => {
if (showNewNotesDirectlyRef.current) {
setEvents((oldEvents) => [event, ...oldEvents])
} else {
setNewEvents((oldEvents) =>
[event, ...oldEvents].sort((a, b) => b.created_at - a.created_at)
)
}
threadService.addRepliesToThread([event])
},
onClose: (url, reason) => {

View file

@ -42,8 +42,8 @@ export const StorageKey = {
QUICK_REACTION_EMOJI: 'quickReactionEmoji',
NSFW_DISPLAY_POLICY: 'nsfwDisplayPolicy',
MIN_TRUST_SCORE: 'minTrustScore',
ENABLE_LIVE_FEED: 'enableLiveFeed',
DEFAULT_RELAY_URLS: 'defaultRelayUrls',
ENABLE_LIVE_FEED: 'enableLiveFeed', // deprecated
HIDE_UNTRUSTED_NOTES: 'hideUntrustedNotes', // deprecated
HIDE_UNTRUSTED_INTERACTIONS: 'hideUntrustedInteractions', // deprecated
HIDE_UNTRUSTED_NOTIFICATIONS: 'hideUntrustedNotifications', // deprecated

View file

@ -21,9 +21,6 @@ type TUserPreferencesContext = {
quickReactionEmoji: string | TEmoji
updateQuickReactionEmoji: (emoji: string | TEmoji) => void
enableLiveFeed: boolean
updateEnableLiveFeed: (enable: boolean) => void
}
const UserPreferencesContext = createContext<TUserPreferencesContext | undefined>(undefined)
@ -48,7 +45,6 @@ export function UserPreferencesProvider({ children }: { children: React.ReactNod
)
const [quickReaction, setQuickReaction] = useState(storage.getQuickReaction())
const [quickReactionEmoji, setQuickReactionEmoji] = useState(storage.getQuickReactionEmoji())
const [enableLiveFeed, setEnableLiveFeed] = useState(storage.getEnableLiveFeed())
useEffect(() => {
if (!isSmallScreen && enableSingleColumnLayout) {
@ -83,11 +79,6 @@ export function UserPreferencesProvider({ children }: { children: React.ReactNod
storage.setQuickReactionEmoji(emoji)
}
const updateEnableLiveFeed = (enable: boolean) => {
setEnableLiveFeed(enable)
storage.setEnableLiveFeed(enable)
}
return (
<UserPreferencesContext.Provider
value={{
@ -102,9 +93,7 @@ export function UserPreferencesProvider({ children }: { children: React.ReactNod
quickReaction,
updateQuickReaction,
quickReactionEmoji,
updateQuickReactionEmoji,
enableLiveFeed,
updateEnableLiveFeed
updateQuickReactionEmoji
}}
>
{children}

View file

@ -65,7 +65,6 @@ class LocalStorageService {
private quickReactionEmoji: string | TEmoji = '+'
private nsfwDisplayPolicy: TNsfwDisplayPolicy = NSFW_DISPLAY_POLICY.HIDE_CONTENT
private minTrustScore: number = 40
private enableLiveFeed: boolean = false
private defaultRelayUrls: string[] = BIG_RELAY_URLS
constructor() {
@ -278,8 +277,6 @@ class LocalStorageService {
}
}
this.enableLiveFeed = window.localStorage.getItem(StorageKey.ENABLE_LIVE_FEED) === 'true'
const defaultRelayUrlsStr = window.localStorage.getItem(StorageKey.DEFAULT_RELAY_URLS)
if (defaultRelayUrlsStr) {
try {
@ -305,6 +302,7 @@ class LocalStorageService {
window.localStorage.removeItem(StorageKey.ACCOUNT_MUTE_DECRYPTED_TAGS_MAP)
window.localStorage.removeItem(StorageKey.ACTIVE_RELAY_SET_ID)
window.localStorage.removeItem(StorageKey.FEED_TYPE)
window.localStorage.removeItem(StorageKey.ENABLE_LIVE_FEED)
}
getRelaySets() {
@ -634,15 +632,6 @@ class LocalStorageService {
}
}
getEnableLiveFeed() {
return this.enableLiveFeed
}
setEnableLiveFeed(enable: boolean) {
this.enableLiveFeed = enable
window.localStorage.setItem(StorageKey.ENABLE_LIVE_FEED, enable.toString())
}
getDefaultRelayUrls() {
return this.defaultRelayUrls
}