feat: improve mobile experience
This commit is contained in:
codytseng
parent
8ec0d46d58
commit
3946e603b3
98 changed files with 2508 additions and 1058 deletions
107
src/pages/primary/MePage/index.tsx
Normal file
107
src/pages/primary/MePage/index.tsx
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
import AccountManager from '@/components/AccountManager'
|
||||
import LoginDialog from '@/components/LoginDialog'
|
||||
import LogoutDialog from '@/components/LogoutDialog'
|
||||
import PubkeyCopy from '@/components/PubkeyCopy'
|
||||
import QrCodePopover from '@/components/QrCodePopover'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { SimpleUserAvatar } from '@/components/UserAvatar'
|
||||
import { SimpleUsername } from '@/components/Username'
|
||||
import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
|
||||
import { toProfile, toSettings } from '@/lib/link'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useSecondaryPage } from '@/PageManager'
|
||||
import { useNostr } from '@/providers/NostrProvider'
|
||||
import { ArrowDownUp, ChevronRight, LogOut, Settings, UserRound } from 'lucide-react'
|
||||
import { HTMLProps, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function MePage() {
|
||||
const { t } = useTranslation()
|
||||
const { push } = useSecondaryPage()
|
||||
const { pubkey } = useNostr()
|
||||
const [loginDialogOpen, setLoginDialogOpen] = useState(false)
|
||||
const [logoutDialogOpen, setLogoutDialogOpen] = useState(false)
|
||||
|
||||
if (!pubkey) {
|
||||
return (
|
||||
<PrimaryPageLayout pageName="home">
|
||||
<div className="flex flex-col p-4 gap-4 overflow-auto">
|
||||
<AccountManager />
|
||||
</div>
|
||||
</PrimaryPageLayout>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<PrimaryPageLayout pageName="home">
|
||||
<div className="flex gap-4 items-center p-4">
|
||||
<SimpleUserAvatar userId={pubkey} size="big" />
|
||||
<div className="space-y-1">
|
||||
<SimpleUsername
|
||||
className="text-xl font-semibold truncate"
|
||||
userId={pubkey}
|
||||
skeletonClassName="h-6 w-32"
|
||||
/>
|
||||
<div className="flex gap-1 mt-1">
|
||||
<PubkeyCopy pubkey={pubkey} />
|
||||
<QrCodePopover pubkey={pubkey} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<ItemGroup>
|
||||
<Item onClick={() => push(toProfile(pubkey))}>
|
||||
<UserRound />
|
||||
{t('Profile')}
|
||||
</Item>
|
||||
</ItemGroup>
|
||||
<ItemGroup>
|
||||
<Item onClick={() => push(toSettings())}>
|
||||
<Settings />
|
||||
{t('Settings')}
|
||||
</Item>
|
||||
</ItemGroup>
|
||||
<ItemGroup>
|
||||
<Item onClick={() => setLoginDialogOpen(true)}>
|
||||
<ArrowDownUp /> {t('Switch account')}
|
||||
</Item>
|
||||
<Separator className="bg-background" />
|
||||
<Item
|
||||
className="text-destructive focus:text-destructive"
|
||||
onClick={() => setLogoutDialogOpen(true)}
|
||||
hideChevron
|
||||
>
|
||||
<LogOut />
|
||||
{t('Logout')}
|
||||
</Item>
|
||||
</ItemGroup>
|
||||
</div>
|
||||
<LoginDialog open={loginDialogOpen} setOpen={setLoginDialogOpen} />
|
||||
<LogoutDialog open={logoutDialogOpen} setOpen={setLogoutDialogOpen} />
|
||||
</PrimaryPageLayout>
|
||||
)
|
||||
}
|
||||
|
||||
function Item({
|
||||
children,
|
||||
className,
|
||||
hideChevron = false,
|
||||
...props
|
||||
}: HTMLProps<HTMLDivElement> & { hideChevron?: boolean }) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-between px-4 py-2 w-full clickable rounded-lg [&_svg]:size-4 [&_svg]:shrink-0',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="flex items-center gap-4">{children}</div>
|
||||
{!hideChevron && <ChevronRight />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ItemGroup({ children }: { children: React.ReactNode }) {
|
||||
return <div className="rounded-lg m-4 bg-muted/40">{children}</div>
|
||||
}
|
||||
74
src/pages/primary/NoteListPage/FeedButton.tsx
Normal file
74
src/pages/primary/NoteListPage/FeedButton.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import FeedSwitcher from '@/components/FeedSwitcher'
|
||||
import { Drawer, DrawerContent } from '@/components/ui/drawer'
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
||||
import { simplifyUrl } from '@/lib/url'
|
||||
import { useFeed } from '@/providers/FeedProvider'
|
||||
import { useRelaySettings } from '@/providers/RelaySettingsProvider'
|
||||
import { useScreenSize } from '@/providers/ScreenSizeProvider'
|
||||
import { ChevronDown, Server, UsersRound } from 'lucide-react'
|
||||
import { forwardRef, HTMLAttributes, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function FeedButton() {
|
||||
const { isSmallScreen } = useScreenSize()
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
if (isSmallScreen) {
|
||||
return (
|
||||
<>
|
||||
<FeedSwitcherTrigger onClick={() => setOpen(true)} />
|
||||
<Drawer open={open} onOpenChange={setOpen}>
|
||||
<DrawerContent className="max-h-[80vh]">
|
||||
<div className="p-4 overflow-auto">
|
||||
<FeedSwitcher close={() => setOpen(false)} />
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<FeedSwitcherTrigger />
|
||||
</PopoverTrigger>
|
||||
<PopoverContent side="bottom" className="w-96 p-4 max-h-[80vh] overflow-auto">
|
||||
<FeedSwitcher close={() => setOpen(false)} />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
|
||||
const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
|
||||
(props, ref) => {
|
||||
const { t } = useTranslation()
|
||||
const { feedType } = useFeed()
|
||||
const { relayGroups, temporaryRelayUrls } = useRelaySettings()
|
||||
const activeGroup = relayGroups.find((group) => group.isActive)
|
||||
const title =
|
||||
feedType === 'following'
|
||||
? t('Following')
|
||||
: temporaryRelayUrls.length > 0
|
||||
? temporaryRelayUrls.length === 1
|
||||
? simplifyUrl(temporaryRelayUrls[0])
|
||||
: t('Temporary')
|
||||
: activeGroup
|
||||
? activeGroup.relayUrls.length === 1
|
||||
? simplifyUrl(activeGroup.relayUrls[0])
|
||||
: activeGroup.groupName
|
||||
: t('Choose a relay collection')
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center gap-2 clickable px-3 h-full rounded-lg"
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{feedType === 'following' ? <UsersRound /> : <Server />}
|
||||
<div className="text-lg font-semibold">{title}</div>
|
||||
<ChevronDown />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
17
src/pages/primary/NoteListPage/SearchButton.tsx
Normal file
17
src/pages/primary/NoteListPage/SearchButton.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { SearchDialog } from '@/components/SearchDialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Search } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function SearchButton() {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button variant="ghost" size="titlebar-icon" onClick={() => setOpen(true)}>
|
||||
<Search />
|
||||
</Button>
|
||||
<SearchDialog open={open} setOpen={setOpen} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,48 +1,69 @@
|
|||
import NoteList from '@/components/NoteList'
|
||||
import RelaySettings from '@/components/RelaySettings'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import { BIG_RELAY_URLS } from '@/constants'
|
||||
import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
|
||||
import { useFeed } from '@/providers/FeedProvider'
|
||||
import { useNostr } from '@/providers/NostrProvider'
|
||||
import { useRelaySettings } from '@/providers/RelaySettingsProvider'
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { useEffect, useMemo, useRef } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import FeedButton from './FeedButton'
|
||||
import SearchButton from './SearchButton'
|
||||
|
||||
export default function NoteListPage() {
|
||||
const { t } = useTranslation()
|
||||
const layoutRef = useRef<{ scrollToTop: () => void }>(null)
|
||||
const { relayUrls } = useRelaySettings()
|
||||
const relayUrlsString = JSON.stringify(relayUrls)
|
||||
const { feedType } = useFeed()
|
||||
const { relayUrls, temporaryRelayUrls } = useRelaySettings()
|
||||
const { pubkey, relayList, followings } = useNostr()
|
||||
const urls = useMemo(() => {
|
||||
return feedType === 'following'
|
||||
? relayList?.read.length
|
||||
? relayList.read.slice(0, 4)
|
||||
: BIG_RELAY_URLS
|
||||
: temporaryRelayUrls.length > 0
|
||||
? temporaryRelayUrls
|
||||
: relayUrls
|
||||
}, [feedType, relayUrls, relayList, temporaryRelayUrls])
|
||||
|
||||
useEffect(() => {
|
||||
if (layoutRef.current) {
|
||||
layoutRef.current.scrollToTop()
|
||||
}
|
||||
}, [relayUrlsString])
|
||||
|
||||
if (!relayUrls.length) {
|
||||
return (
|
||||
<PrimaryPageLayout>
|
||||
<div className="w-full text-center">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button title="relay settings" size="lg">
|
||||
Choose a relay group
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-96 h-[450px] p-0">
|
||||
<ScrollArea className="h-full">
|
||||
<div className="p-4">
|
||||
<RelaySettings />
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</PrimaryPageLayout>
|
||||
)
|
||||
}
|
||||
}, [JSON.stringify(relayUrls), feedType])
|
||||
|
||||
return (
|
||||
<PrimaryPageLayout ref={layoutRef}>
|
||||
<NoteList relayUrls={relayUrls} />
|
||||
<PrimaryPageLayout
|
||||
pageName="home"
|
||||
ref={layoutRef}
|
||||
titlebar={<NoteListPageTitlebar />}
|
||||
displayScrollToTopButton
|
||||
>
|
||||
{!!urls.length && (feedType === 'relays' || (relayList && followings)) ? (
|
||||
<NoteList
|
||||
relayUrls={urls}
|
||||
filter={
|
||||
feedType === 'following'
|
||||
? {
|
||||
authors:
|
||||
pubkey && !followings?.includes(pubkey)
|
||||
? [...(followings ?? []), pubkey]
|
||||
: (followings ?? [])
|
||||
}
|
||||
: {}
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="text-center text-sm text-muted-foreground">{t('loading...')}</div>
|
||||
)}
|
||||
</PrimaryPageLayout>
|
||||
)
|
||||
}
|
||||
|
||||
function NoteListPageTitlebar() {
|
||||
return (
|
||||
<div className="flex gap-1 items-center h-full justify-between">
|
||||
<FeedButton />
|
||||
<SearchButton />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
29
src/pages/primary/NotificationListPage/index.tsx
Normal file
29
src/pages/primary/NotificationListPage/index.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import NotificationList from '@/components/NotificationList'
|
||||
import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
|
||||
import { Bell } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function NotificationListPage() {
|
||||
return (
|
||||
<PrimaryPageLayout
|
||||
pageName="notifications"
|
||||
titlebar={<NotificationListPageTitlebar />}
|
||||
displayScrollToTopButton
|
||||
>
|
||||
<div className="px-4">
|
||||
<NotificationList />
|
||||
</div>
|
||||
</PrimaryPageLayout>
|
||||
)
|
||||
}
|
||||
|
||||
function NotificationListPageTitlebar() {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 items-center h-full pl-3">
|
||||
<Bell />
|
||||
<div className="text-lg font-semibold">{t('Notifications')}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue