feat: improve mobile experience
This commit is contained in:
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user