feat: improve mobile experience

This commit is contained in:
codytseng
2025-01-02 21:57:14 +08:00
parent 8ec0d46d58
commit 3946e603b3
98 changed files with 2508 additions and 1058 deletions

View File

@@ -14,7 +14,7 @@ import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import NotFoundPage from '../NotFoundPage'
export default function NotePage({ id }: { id?: string }) {
export default function NotePage({ id, index }: { id?: string; index?: number }) {
const { t } = useTranslation()
const { event, isFetching } = useFetchEvent(id)
const parentEventId = useMemo(() => getParentEventId(event), [event])
@@ -22,8 +22,8 @@ export default function NotePage({ id }: { id?: string }) {
if (!event && isFetching) {
return (
<SecondaryPageLayout titlebarContent={t('note')}>
<div className="max-sm:px-4">
<SecondaryPageLayout index={index} titlebarContent={t('Note')} displayScrollToTopButton>
<div className="px-4">
<Skeleton className="w-10 h-10 rounded-full" />
</div>
</SecondaryPageLayout>
@@ -32,14 +32,14 @@ export default function NotePage({ id }: { id?: string }) {
if (!event) return <NotFoundPage />
return (
<SecondaryPageLayout titlebarContent={t('note')}>
<div className="max-sm:px-4">
<SecondaryPageLayout index={index} titlebarContent={t('Note')}>
<div className="px-4">
<ParentNote key={`root-note-${event.id}`} eventId={rootEventId} />
<ParentNote key={`parent-note-${event.id}`} eventId={parentEventId} />
<Note key={`note-${event.id}`} event={event} fetchNoteStats />
</div>
<Separator className="mb-2 mt-4" />
<ReplyNoteList key={`reply-note-list-${event.id}`} event={event} className="max-sm:px-2" />
<ReplyNoteList key={`reply-note-list-${event.id}`} event={event} className="px-2" />
</SecondaryPageLayout>
)
}
@@ -52,7 +52,7 @@ function ParentNote({ eventId }: { eventId?: string }) {
return (
<div>
<Card
className="flex space-x-1 p-1 items-center hover:bg-muted/50 cursor-pointer text-sm text-muted-foreground hover:text-foreground"
className="flex space-x-1 p-1 items-center clickable text-sm text-muted-foreground hover:text-foreground"
onClick={() => push(toNote(event))}
>
<UserAvatar userId={event.pubkey} size="tiny" />