mleku/smesh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve parent note preview

Browse Source
This commit is contained in:
codytseng
2025-02-24 12:39:02 +08:00
parent e6516d7acd
commit 212a4ac103
11 changed files with 167 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/pages/secondary/NotePage/index.tsx
View File

@@ -1,10 +1,11 @@
import { useSecondaryPage } from '@/PageManager'
import ContentPreview from '@/components/ContentPreview'
import Nip22ReplyNoteList from '@/components/Nip22ReplyNoteList'
import Note from '@/components/Note'
import PictureNote from '@/components/PictureNote'
import ReplyNoteList from '@/components/ReplyNoteList'
import UserAvatar from '@/components/UserAvatar'
import Username from '@/components/Username'
import { SimpleUsername } from '@/components/Username'
import { Card } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { Skeleton } from '@/components/ui/skeleton'
@@ -27,7 +28,25 @@ const NotePage = forwardRef(({ id, index }: { id?: string; index?: number }, ref
return (
<SecondaryPageLayout ref={ref} index={index} title={t('Note')}>
<div className="px-4">
<Skeleton className="w-10 h-10 rounded-full" />
<div className="flex items-center space-x-2">
<Skeleton className="w-10 h-10 rounded-full" />
<div className={`flex-1 w-0`}>
<div className="py-1">
<Skeleton className="h-4 w-16" />
</div>
<div className="py-0.5">
<Skeleton className="h-3 w-12" />
</div>
</div>
</div>
<div className="pt-2">
<div className="my-1">
<Skeleton className="w-full h-4 my-1 mt-2" />
</div>
<div className="my-1">
<Skeleton className="w-2/3 h-4 my-1" />
</div>
</div>
</div>
</SecondaryPageLayout>
)
@@ -55,7 +74,7 @@ const NotePage = forwardRef(({ id, index }: { id?: string; index?: number }, ref
<ParentNote key={`root-note-${event.id}`} eventId={rootEventId} />
)}
<ParentNote key={`parent-note-${event.id}`} eventId={parentEventId} />
<Note key={`note-${event.id}`} event={event} fetchNoteStats />
<Note key={`note-${event.id}`} event={event} fetchNoteStats hideParentNotePreview />
</div>
<Separator className="mb-2 mt-4" />
{event.kind === kinds.ShortTextNote ? (
@@ -74,23 +93,52 @@ NotePage.displayName = 'NotePage'
export default NotePage
function ParentNote({ eventId }: { eventId?: string }) {
const { t } = useTranslation()
const { push } = useSecondaryPage()
const { event } = useFetchEvent(eventId)
if (!event) return null
const { event, isFetching } = useFetchEvent(eventId)
if (!eventId) return null
if (isFetching) {
return (
<div>
<Card
className="flex space-x-1 p-1 items-center clickable text-sm text-muted-foreground hover:text-foreground"
onClick={() => push(toNote(eventId))}
>
<Skeleton className="shrink w-4 h-4 rounded-full" />
<div className="py-1 flex-1">
<Skeleton className="h-3" />
</div>
</Card>
<div className="ml-5 w-px h-2 bg-border" />
</div>
)
}
if (!event) {
return (
<div>
<Card className="flex p-1 items-center justify-center text-sm text-muted-foreground">
{t('Not found')}
</Card>
<div className="ml-5 w-px h-2 bg-border" />
</div>
)
}
return (
<div>
<Card
className="flex space-x-1 p-1 items-center clickable text-sm text-muted-foreground hover:text-foreground"
onClick={() => push(toNote(event))}
onClick={() => push(toNote(eventId))}
>
<UserAvatar userId={event.pubkey} size="tiny" className="shrink-0" />
<Username
<SimpleUsername
userId={event.pubkey}
className="font-semibold"
skeletonClassName="h-4 shrink-0"
className="font-semibold truncate shrink-0"
skeletonClassName="h-3 shrink-0"
/>
<div className="truncate">{event.content}</div>
<ContentPreview className="truncate" event={event} />
</Card>
<div className="ml-5 w-px h-2 bg-border" />
</div>