feat: 24h pulse
This commit is contained in:
codytseng
parent
b21855c294
commit
ce7afeb250
31 changed files with 1086 additions and 123 deletions
|
|
@ -84,7 +84,7 @@ export default function KindFilter({
|
|||
variant="ghost"
|
||||
size="titlebar-icon"
|
||||
className={cn(
|
||||
'relative w-fit px-3 focus:text-foreground',
|
||||
'relative w-fit px-3 hover:text-foreground',
|
||||
!isDifferentFromSaved && 'text-muted-foreground'
|
||||
)}
|
||||
onClick={() => {
|
||||
|
|
@ -94,7 +94,6 @@ export default function KindFilter({
|
|||
}}
|
||||
>
|
||||
<ListFilter size={16} />
|
||||
{t('Filter')}
|
||||
{isDifferentFromSaved && (
|
||||
<div className="absolute size-2 rounded-full bg-primary left-7 top-2 ring-2 ring-background" />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import NoteList, { TNoteListRef } from '@/components/NoteList'
|
||||
import Tabs from '@/components/Tabs'
|
||||
import UserAggregationList, { TUserAggregationListRef } from '@/components/UserAggregationList'
|
||||
import { isTouchDevice } from '@/lib/utils'
|
||||
import { useKindFilter } from '@/providers/KindFilterProvider'
|
||||
import { useUserTrust } from '@/providers/UserTrustProvider'
|
||||
import storage from '@/services/local-storage.service'
|
||||
import { TFeedSubRequest, TNoteListMode } from '@/types'
|
||||
import { Event } from 'nostr-tools'
|
||||
import { useMemo, useRef, useState } from 'react'
|
||||
import KindFilter from '../KindFilter'
|
||||
import { RefreshButton } from '../RefreshButton'
|
||||
|
|
@ -13,12 +15,16 @@ export default function NormalFeed({
|
|||
subRequests,
|
||||
areAlgoRelays = false,
|
||||
isMainFeed = false,
|
||||
showRelayCloseReason = false
|
||||
showRelayCloseReason = false,
|
||||
filterFn,
|
||||
disable24hMode = false
|
||||
}: {
|
||||
subRequests: TFeedSubRequest[]
|
||||
areAlgoRelays?: boolean
|
||||
isMainFeed?: boolean
|
||||
showRelayCloseReason?: boolean
|
||||
filterFn?: (event: Event) => boolean
|
||||
disable24hMode?: boolean
|
||||
}) {
|
||||
const { hideUntrustedNotes } = useUserTrust()
|
||||
const { showKinds } = useKindFilter()
|
||||
|
|
@ -26,13 +32,18 @@ export default function NormalFeed({
|
|||
const [listMode, setListMode] = useState<TNoteListMode>(() => storage.getNoteListMode())
|
||||
const supportTouch = useMemo(() => isTouchDevice(), [])
|
||||
const noteListRef = useRef<TNoteListRef>(null)
|
||||
const userAggregationListRef = useRef<TUserAggregationListRef>(null)
|
||||
const topRef = useRef<HTMLDivElement>(null)
|
||||
const showKindsFilter = useMemo(() => {
|
||||
return subRequests.every((req) => !req.filter.kinds?.length)
|
||||
}, [subRequests])
|
||||
|
||||
const handleListModeChange = (mode: TNoteListMode) => {
|
||||
setListMode(mode)
|
||||
if (isMainFeed) {
|
||||
storage.setNoteListMode(mode)
|
||||
}
|
||||
noteListRef.current?.scrollToTop('smooth')
|
||||
topRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}
|
||||
|
||||
const handleShowKindsChange = (newShowKinds: number[]) => {
|
||||
|
|
@ -43,30 +54,56 @@ export default function NormalFeed({
|
|||
return (
|
||||
<>
|
||||
<Tabs
|
||||
value={listMode}
|
||||
value={listMode === '24h' && disable24hMode ? 'posts' : listMode}
|
||||
tabs={[
|
||||
{ value: 'posts', label: 'Notes' },
|
||||
{ value: 'postsAndReplies', label: 'Replies' }
|
||||
{ value: 'postsAndReplies', label: 'Replies' },
|
||||
...(!disable24hMode ? [{ value: '24h', label: '24h Pulse' }] : [])
|
||||
]}
|
||||
onTabChange={(listMode) => {
|
||||
handleListModeChange(listMode as TNoteListMode)
|
||||
}}
|
||||
options={
|
||||
<>
|
||||
{!supportTouch && <RefreshButton onClick={() => noteListRef.current?.refresh()} />}
|
||||
<KindFilter showKinds={temporaryShowKinds} onShowKindsChange={handleShowKindsChange} />
|
||||
{!supportTouch && (
|
||||
<RefreshButton
|
||||
onClick={() => {
|
||||
if (listMode === '24h') {
|
||||
userAggregationListRef.current?.refresh()
|
||||
} else {
|
||||
noteListRef.current?.refresh()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{showKindsFilter && (
|
||||
<KindFilter
|
||||
showKinds={temporaryShowKinds}
|
||||
onShowKindsChange={handleShowKindsChange}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<NoteList
|
||||
ref={noteListRef}
|
||||
showKinds={temporaryShowKinds}
|
||||
subRequests={subRequests}
|
||||
hideReplies={listMode === 'posts'}
|
||||
hideUntrustedNotes={hideUntrustedNotes}
|
||||
areAlgoRelays={areAlgoRelays}
|
||||
showRelayCloseReason={showRelayCloseReason}
|
||||
/>
|
||||
<div ref={topRef} className="scroll-mt-[calc(6rem+1px)]" />
|
||||
{listMode === '24h' && !disable24hMode ? (
|
||||
<UserAggregationList
|
||||
ref={userAggregationListRef}
|
||||
showKinds={temporaryShowKinds}
|
||||
subRequests={subRequests}
|
||||
filterFn={filterFn}
|
||||
/>
|
||||
) : (
|
||||
<NoteList
|
||||
ref={noteListRef}
|
||||
showKinds={temporaryShowKinds}
|
||||
subRequests={subRequests}
|
||||
hideReplies={listMode === 'posts'}
|
||||
hideUntrustedNotes={hideUntrustedNotes}
|
||||
areAlgoRelays={areAlgoRelays}
|
||||
showRelayCloseReason={showRelayCloseReason}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,26 @@ const LIMIT = 200
|
|||
const ALGO_LIMIT = 500
|
||||
const SHOW_COUNT = 10
|
||||
|
||||
const NoteList = forwardRef(
|
||||
export type TNoteListRef = {
|
||||
scrollToTop: (behavior?: ScrollBehavior) => void
|
||||
refresh: () => void
|
||||
}
|
||||
|
||||
const NoteList = forwardRef<
|
||||
TNoteListRef,
|
||||
{
|
||||
subRequests: TFeedSubRequest[]
|
||||
showKinds?: number[]
|
||||
filterMutedNotes?: boolean
|
||||
hideReplies?: boolean
|
||||
hideUntrustedNotes?: boolean
|
||||
areAlgoRelays?: boolean
|
||||
showRelayCloseReason?: boolean
|
||||
pinnedEventIds?: string[]
|
||||
filterFn?: (event: Event) => boolean
|
||||
showNewNotesDirectly?: boolean
|
||||
}
|
||||
>(
|
||||
(
|
||||
{
|
||||
subRequests,
|
||||
|
|
@ -46,17 +65,6 @@ const NoteList = forwardRef(
|
|||
pinnedEventIds,
|
||||
filterFn,
|
||||
showNewNotesDirectly = false
|
||||
}: {
|
||||
subRequests: TFeedSubRequest[]
|
||||
showKinds?: number[]
|
||||
filterMutedNotes?: boolean
|
||||
hideReplies?: boolean
|
||||
hideUntrustedNotes?: boolean
|
||||
areAlgoRelays?: boolean
|
||||
showRelayCloseReason?: boolean
|
||||
pinnedEventIds?: string[]
|
||||
filterFn?: (event: Event) => boolean
|
||||
showNewNotesDirectly?: boolean
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
|
|
@ -415,8 +423,3 @@ const NoteList = forwardRef(
|
|||
)
|
||||
NoteList.displayName = 'NoteList'
|
||||
export default NoteList
|
||||
|
||||
export type TNoteListRef = {
|
||||
scrollToTop: (behavior?: ScrollBehavior) => void
|
||||
refresh: () => void
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,13 @@ export default function ProfileFeed({
|
|||
const { pubkey: myPubkey, pinListEvent: myPinListEvent } = useNostr()
|
||||
const { showKinds } = useKindFilter()
|
||||
const [temporaryShowKinds, setTemporaryShowKinds] = useState(showKinds)
|
||||
const [listMode, setListMode] = useState<TNoteListMode>(() => storage.getNoteListMode())
|
||||
const [listMode, setListMode] = useState<TNoteListMode>(() => {
|
||||
const mode = storage.getNoteListMode()
|
||||
if (mode === '24h') {
|
||||
return 'posts'
|
||||
}
|
||||
return mode
|
||||
})
|
||||
const [subRequests, setSubRequests] = useState<TFeedSubRequest[]>([])
|
||||
const [pinnedEventIds, setPinnedEventIds] = useState<string[]>([])
|
||||
const tabs = useMemo(() => {
|
||||
|
|
|
|||
466
src/components/UserAggregationList/index.tsx
Normal file
466
src/components/UserAggregationList/index.tsx
Normal file
|
|
@ -0,0 +1,466 @@
|
|||
import { FormattedTimestamp } from '@/components/FormattedTimestamp'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import UserAvatar from '@/components/UserAvatar'
|
||||
import Username from '@/components/Username'
|
||||
import { isMentioningMutedUsers } from '@/lib/event'
|
||||
import { toNote, toUserAggregationDetail } from '@/lib/link'
|
||||
import { cn, isTouchDevice } from '@/lib/utils'
|
||||
import { useSecondaryPage } from '@/PageManager'
|
||||
import { useContentPolicy } from '@/providers/ContentPolicyProvider'
|
||||
import { useDeletedEvent } from '@/providers/DeletedEventProvider'
|
||||
import { useMuteList } from '@/providers/MuteListProvider'
|
||||
import { useNostr } from '@/providers/NostrProvider'
|
||||
import { useUserTrust } from '@/providers/UserTrustProvider'
|
||||
import client from '@/services/client.service'
|
||||
import userAggregationService, { TUserAggregation } from '@/services/user-aggregation.service'
|
||||
import { TFeedSubRequest } from '@/types'
|
||||
import dayjs from 'dayjs'
|
||||
import { History, Loader, Pin, PinOff } from 'lucide-react'
|
||||
import { Event, kinds } from 'nostr-tools'
|
||||
import {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import PullToRefresh from 'react-simple-pull-to-refresh'
|
||||
import { LoadingBar } from '../LoadingBar'
|
||||
|
||||
const LIMIT = 500
|
||||
const SHOW_COUNT = 20
|
||||
|
||||
export type TUserAggregationListRef = {
|
||||
scrollToTop: (behavior?: ScrollBehavior) => void
|
||||
refresh: () => void
|
||||
}
|
||||
|
||||
const UserAggregationList = forwardRef<
|
||||
TUserAggregationListRef,
|
||||
{
|
||||
subRequests: TFeedSubRequest[]
|
||||
showKinds?: number[]
|
||||
filterFn?: (event: Event) => boolean
|
||||
filterMutedNotes?: boolean
|
||||
}
|
||||
>(({ subRequests, showKinds, filterFn, filterMutedNotes = true }, ref) => {
|
||||
const { t } = useTranslation()
|
||||
const { startLogin } = useNostr()
|
||||
const { push } = useSecondaryPage()
|
||||
const { hideUntrustedNotes, isUserTrusted } = useUserTrust()
|
||||
const { mutePubkeySet } = useMuteList()
|
||||
const { hideContentMentioningMutedUsers } = useContentPolicy()
|
||||
const { isEventDeleted } = useDeletedEvent()
|
||||
const [since, setSince] = useState(() => dayjs().subtract(1, 'day').unix())
|
||||
const [events, setEvents] = useState<Event[]>([])
|
||||
const [timelineKey, setTimelineKey] = useState<string | undefined>(undefined)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [showLoadingBar, setShowLoadingBar] = useState(true)
|
||||
const [refreshCount, setRefreshCount] = useState(0)
|
||||
const [showCount, setShowCount] = useState(SHOW_COUNT)
|
||||
const supportTouch = useMemo(() => isTouchDevice(), [])
|
||||
const [pinnedPubkeys, setPinnedPubkeys] = useState<Set<string>>(
|
||||
new Set(userAggregationService.getPinnedPubkeys())
|
||||
)
|
||||
const feedId = useMemo(() => {
|
||||
return userAggregationService.getFeedId(subRequests, showKinds)
|
||||
}, [JSON.stringify(subRequests), JSON.stringify(showKinds)])
|
||||
const bottomRef = useRef<HTMLDivElement | null>(null)
|
||||
const topRef = useRef<HTMLDivElement | null>(null)
|
||||
|
||||
const scrollToTop = (behavior: ScrollBehavior = 'instant') => {
|
||||
setTimeout(() => {
|
||||
topRef.current?.scrollIntoView({ behavior, block: 'start' })
|
||||
}, 20)
|
||||
}
|
||||
|
||||
const refresh = () => {
|
||||
scrollToTop()
|
||||
setTimeout(() => {
|
||||
setRefreshCount((count) => count + 1)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
useImperativeHandle(ref, () => ({ scrollToTop, refresh }), [])
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
userAggregationService.clearAggregations(feedId)
|
||||
}
|
||||
}, [feedId])
|
||||
|
||||
useEffect(() => {
|
||||
if (!subRequests.length) return
|
||||
|
||||
setPinnedPubkeys(new Set(userAggregationService.getPinnedPubkeys()))
|
||||
setSince(dayjs().subtract(1, 'day').unix())
|
||||
|
||||
async function init() {
|
||||
setLoading(true)
|
||||
setEvents([])
|
||||
|
||||
if (showKinds?.length === 0 && subRequests.every(({ filter }) => !filter.kinds)) {
|
||||
setLoading(false)
|
||||
return () => {}
|
||||
}
|
||||
|
||||
const { closer, timelineKey } = await client.subscribeTimeline(
|
||||
subRequests.map(({ urls, filter }) => ({
|
||||
urls,
|
||||
filter: {
|
||||
kinds: showKinds ?? [],
|
||||
...filter,
|
||||
limit: LIMIT
|
||||
}
|
||||
})),
|
||||
{
|
||||
onEvents: (events, eosed) => {
|
||||
if (events.length > 0) {
|
||||
setEvents(events)
|
||||
}
|
||||
if (eosed) {
|
||||
setLoading(false)
|
||||
}
|
||||
},
|
||||
onNew: (event) => {
|
||||
setEvents((oldEvents) => {
|
||||
const newEvents = oldEvents.some((e) => e.id === event.id)
|
||||
? oldEvents
|
||||
: [event, ...oldEvents]
|
||||
return newEvents
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
startLogin,
|
||||
needSort: true
|
||||
}
|
||||
)
|
||||
setTimelineKey(timelineKey)
|
||||
|
||||
return closer
|
||||
}
|
||||
|
||||
const promise = init()
|
||||
return () => {
|
||||
promise.then((closer) => closer())
|
||||
}
|
||||
}, [feedId, refreshCount])
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
loading ||
|
||||
!timelineKey ||
|
||||
!events.length ||
|
||||
events[events.length - 1].created_at <= since
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
const until = events[events.length - 1].created_at - 1
|
||||
|
||||
setLoading(true)
|
||||
client.loadMoreTimeline(timelineKey, until, LIMIT).then((moreEvents) => {
|
||||
setEvents((oldEvents) => [...oldEvents, ...moreEvents])
|
||||
setLoading(false)
|
||||
})
|
||||
}, [loading, timelineKey, events, since])
|
||||
|
||||
useEffect(() => {
|
||||
if (loading) {
|
||||
setShowLoadingBar(true)
|
||||
return
|
||||
}
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
setShowLoadingBar(false)
|
||||
}, 1000)
|
||||
|
||||
return () => clearTimeout(timeout)
|
||||
}, [loading])
|
||||
|
||||
const shouldHideEvent = useCallback(
|
||||
(evt: Event) => {
|
||||
if (isEventDeleted(evt)) return true
|
||||
if (hideUntrustedNotes && !isUserTrusted(evt.pubkey)) return true
|
||||
if (filterMutedNotes && mutePubkeySet.has(evt.pubkey)) return true
|
||||
if (
|
||||
filterMutedNotes &&
|
||||
hideContentMentioningMutedUsers &&
|
||||
isMentioningMutedUsers(evt, mutePubkeySet)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
if (filterFn && !filterFn(evt)) {
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
[hideUntrustedNotes, mutePubkeySet, isEventDeleted, filterFn]
|
||||
)
|
||||
|
||||
const lastXDays = useMemo(() => {
|
||||
return dayjs().diff(dayjs.unix(since), 'day')
|
||||
}, [since])
|
||||
|
||||
const filteredEvents = useMemo(() => {
|
||||
return events.filter((evt) => evt.created_at >= since && !shouldHideEvent(evt))
|
||||
}, [events, since, shouldHideEvent])
|
||||
|
||||
const aggregations = useMemo(() => {
|
||||
const aggs = userAggregationService.aggregateByUser(filteredEvents)
|
||||
userAggregationService.saveAggregations(feedId, aggs)
|
||||
|
||||
const pinned: TUserAggregation[] = []
|
||||
const unpinned: TUserAggregation[] = []
|
||||
|
||||
aggs.forEach((agg) => {
|
||||
if (pinnedPubkeys.has(agg.pubkey)) {
|
||||
pinned.push(agg)
|
||||
} else {
|
||||
unpinned.push(agg)
|
||||
}
|
||||
})
|
||||
|
||||
return [...pinned, ...unpinned]
|
||||
}, [feedId, filteredEvents, pinnedPubkeys])
|
||||
|
||||
const displayedAggregations = useMemo(() => {
|
||||
return aggregations.slice(0, showCount)
|
||||
}, [aggregations, showCount])
|
||||
|
||||
const hasMore = useMemo(() => {
|
||||
return aggregations.length > displayedAggregations.length
|
||||
}, [aggregations, displayedAggregations])
|
||||
|
||||
useEffect(() => {
|
||||
const options = {
|
||||
root: null,
|
||||
rootMargin: '10px',
|
||||
threshold: 1
|
||||
}
|
||||
if (!hasMore) return
|
||||
|
||||
const observerInstance = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting) {
|
||||
setShowCount((count) => count + SHOW_COUNT)
|
||||
}
|
||||
}, options)
|
||||
|
||||
const currentBottomRef = bottomRef.current
|
||||
if (currentBottomRef) {
|
||||
observerInstance.observe(currentBottomRef)
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (observerInstance && currentBottomRef) {
|
||||
observerInstance.unobserve(currentBottomRef)
|
||||
}
|
||||
}
|
||||
}, [hasMore])
|
||||
|
||||
const handleViewUser = (agg: TUserAggregation) => {
|
||||
// Mark as viewed when user clicks
|
||||
userAggregationService.markAsViewed(feedId, agg.pubkey)
|
||||
|
||||
if (agg.count === 1) {
|
||||
const evt = agg.events[0]
|
||||
if (evt.kind !== kinds.Repost && evt.kind !== kinds.GenericRepost) {
|
||||
push(toNote(agg.events[0]))
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
push(toUserAggregationDetail(feedId, agg.pubkey))
|
||||
}
|
||||
|
||||
const handleLoadEarlier = () => {
|
||||
setSince((prevSince) => dayjs.unix(prevSince).subtract(1, 'day').unix())
|
||||
setShowCount(SHOW_COUNT)
|
||||
}
|
||||
|
||||
const list = (
|
||||
<div className="min-h-screen">
|
||||
{displayedAggregations.map((agg) => (
|
||||
<UserAggregationItem
|
||||
key={agg.pubkey}
|
||||
feedId={feedId}
|
||||
aggregation={agg}
|
||||
onClick={() => handleViewUser(agg)}
|
||||
/>
|
||||
))}
|
||||
{loading || hasMore ? (
|
||||
<div ref={bottomRef}>
|
||||
<UserAggregationItemSkeleton />
|
||||
</div>
|
||||
) : displayedAggregations.length === 0 ? (
|
||||
<div className="flex justify-center w-full mt-2">
|
||||
<Button size="lg" onClick={() => setRefreshCount((count) => count + 1)}>
|
||||
{t('Reload')}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-sm text-muted-foreground mt-2">{t('no more notes')}</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div ref={topRef} className="scroll-mt-[calc(6rem+1px)]" />
|
||||
{showLoadingBar && <LoadingBar />}
|
||||
<div className="border-b h-12 pl-4 pr-1 flex items-center justify-between gap-2">
|
||||
<div className="text-sm text-muted-foreground flex items-center gap-1.5 min-w-0">
|
||||
<span className="font-medium text-foreground">
|
||||
{lastXDays === 1 ? t('Last 24 hours') : t('Last {{count}} days', { count: lastXDays })}
|
||||
</span>
|
||||
·
|
||||
<span>
|
||||
{filteredEvents.length} {t('notes')}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="h-10 px-3 shrink-0 rounded-lg text-muted-foreground hover:text-foreground"
|
||||
disabled={showLoadingBar}
|
||||
onClick={handleLoadEarlier}
|
||||
>
|
||||
{showLoadingBar ? <Loader className="animate-spin" /> : <History />}
|
||||
{t('Load earlier')}
|
||||
</Button>
|
||||
</div>
|
||||
{supportTouch ? (
|
||||
<PullToRefresh
|
||||
onRefresh={async () => {
|
||||
refresh()
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
}}
|
||||
pullingContent=""
|
||||
>
|
||||
{list}
|
||||
</PullToRefresh>
|
||||
) : (
|
||||
list
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
UserAggregationList.displayName = 'UserAggregationList'
|
||||
export default UserAggregationList
|
||||
|
||||
function UserAggregationItem({
|
||||
feedId,
|
||||
aggregation,
|
||||
onClick
|
||||
}: {
|
||||
feedId: string
|
||||
aggregation: TUserAggregation
|
||||
onClick: () => void
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
const [hasNewEvents, setHasNewEvents] = useState(true)
|
||||
const [isPinned, setIsPinned] = useState(userAggregationService.isPinned(aggregation.pubkey))
|
||||
|
||||
useEffect(() => {
|
||||
const update = () => {
|
||||
const lastViewedTime = userAggregationService.getLastViewedTime(feedId, aggregation.pubkey)
|
||||
setHasNewEvents(aggregation.lastEventTime > lastViewedTime)
|
||||
}
|
||||
|
||||
const unSub = userAggregationService.subscribeViewedTimeChange(
|
||||
feedId,
|
||||
aggregation.pubkey,
|
||||
() => {
|
||||
update()
|
||||
}
|
||||
)
|
||||
|
||||
update()
|
||||
|
||||
return unSub
|
||||
}, [feedId, aggregation])
|
||||
|
||||
const onTogglePin = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
if (isPinned) {
|
||||
userAggregationService.unpinUser(aggregation.pubkey)
|
||||
setIsPinned(false)
|
||||
} else {
|
||||
userAggregationService.pinUser(aggregation.pubkey)
|
||||
setIsPinned(true)
|
||||
}
|
||||
}
|
||||
|
||||
const onToggleViewed = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
if (hasNewEvents) {
|
||||
userAggregationService.markAsViewed(feedId, aggregation.pubkey)
|
||||
} else {
|
||||
userAggregationService.markAsUnviewed(feedId, aggregation.pubkey)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="group relative flex items-center gap-4 px-4 py-3 border-b hover:bg-accent/30 cursor-pointer transition-all duration-200"
|
||||
onClick={onClick}
|
||||
>
|
||||
<UserAvatar userId={aggregation.pubkey} />
|
||||
|
||||
<div className="flex-1 min-w-0 flex flex-col">
|
||||
<Username
|
||||
userId={aggregation.pubkey}
|
||||
className="font-semibold text-base truncate max-w-fit"
|
||||
skeletonClassName="h-4"
|
||||
/>
|
||||
<FormattedTimestamp
|
||||
timestamp={aggregation.lastEventTime}
|
||||
className="text-sm text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onTogglePin}
|
||||
className={`flex-shrink-0 ${
|
||||
isPinned
|
||||
? 'text-primary hover:text-primary/80'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
title={isPinned ? t('Unpin') : t('Pin')}
|
||||
>
|
||||
{isPinned ? <PinOff className="w-4 h-4" /> : <Pin className="w-4 h-4" />}
|
||||
</Button>
|
||||
|
||||
<button
|
||||
className={cn(
|
||||
'flex-shrink-0 size-10 rounded-full font-bold tabular-nums text-primary border border-primary/80 bg-primary/10 hover:border-primary hover:bg-primary/20 flex flex-col items-center justify-center transition-colors',
|
||||
!hasNewEvents &&
|
||||
'border-muted-foreground/80 text-muted-foreground/80 bg-muted-foreground/10 hover:border-muted-foreground hover:text-muted-foreground hover:bg-muted-foreground/20'
|
||||
)}
|
||||
onClick={onToggleViewed}
|
||||
>
|
||||
{aggregation.count > 99 ? '99+' : aggregation.count}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function UserAggregationItemSkeleton() {
|
||||
return (
|
||||
<div className="flex items-center gap-4 px-4 py-3">
|
||||
<Skeleton className="size-10 rounded-full" />
|
||||
<div className="flex-1">
|
||||
<Skeleton className="h-4 w-36 my-1" />
|
||||
<Skeleton className="h-3 w-14 my-1" />
|
||||
</div>
|
||||
<Skeleton className="size-10 rounded-full" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue