chore: format
This commit is contained in:
parent
4bd4141b54
commit
e490407dd5
225 changed files with 924 additions and 844 deletions
|
|
@ -22,7 +22,7 @@ function BookmarkPageTitlebar() {
|
|||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 items-center h-full pl-3">
|
||||
<div className="flex h-full items-center gap-2 pl-3">
|
||||
<BookmarkIcon />
|
||||
<div className="text-lg font-semibold">{t('Bookmarks')}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -83,8 +83,8 @@ function ExplorePageTitlebar() {
|
|||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 justify-between h-full">
|
||||
<div className="flex gap-2 items-center h-full pl-3">
|
||||
<div className="flex h-full justify-between gap-2">
|
||||
<div className="flex h-full items-center gap-2 pl-3">
|
||||
<Compass />
|
||||
<div className="text-lg font-semibold">{t('Explore')}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ const MePage = forwardRef<TPageRef>((_, ref) => {
|
|||
titlebar={<MePageTitlebar />}
|
||||
hideTitlebarBottomBorder
|
||||
>
|
||||
<div className="flex flex-col p-4 gap-4 overflow-auto">
|
||||
<div className="flex flex-col gap-4 overflow-auto p-4">
|
||||
<AccountManager />
|
||||
</div>
|
||||
</PrimaryPageLayout>
|
||||
|
|
@ -55,15 +55,15 @@ const MePage = forwardRef<TPageRef>((_, ref) => {
|
|||
titlebar={<MePageTitlebar />}
|
||||
hideTitlebarBottomBorder
|
||||
>
|
||||
<div className="flex gap-4 items-center p-4">
|
||||
<div className="flex items-center gap-4 p-4">
|
||||
<SimpleUserAvatar userId={pubkey} size="big" />
|
||||
<div className="space-y-1 flex-1 w-0">
|
||||
<div className="w-0 flex-1 space-y-1">
|
||||
<SimpleUsername
|
||||
className="text-xl font-semibold text-wrap"
|
||||
className="text-wrap text-xl font-semibold"
|
||||
userId={pubkey}
|
||||
skeletonClassName="h-6 w-32"
|
||||
/>
|
||||
<div className="flex gap-1 mt-1">
|
||||
<div className="mt-1 flex gap-1">
|
||||
<PubkeyCopy pubkey={pubkey} />
|
||||
<NpubQrCode pubkey={pubkey} />
|
||||
</div>
|
||||
|
|
@ -108,7 +108,7 @@ export default MePage
|
|||
function MePageTitlebar() {
|
||||
const { push } = useSecondaryPage()
|
||||
return (
|
||||
<div className="flex justify-end items-center">
|
||||
<div className="flex items-center justify-end">
|
||||
<Button variant="ghost" size="titlebar-icon" onClick={() => push(toSettings())}>
|
||||
<Settings />
|
||||
</Button>
|
||||
|
|
@ -125,7 +125,7 @@ function Item({
|
|||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex clickable justify-between items-center px-4 py-2 h-[52px] rounded-lg [&_svg]:size-4 [&_svg]:shrink-0',
|
||||
'clickable flex h-[52px] items-center justify-between rounded-lg px-4 py-2 [&_svg]:size-4 [&_svg]:shrink-0',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export default function FeedButton({ className }: { className?: string }) {
|
|||
<Drawer open={open} onOpenChange={setOpen}>
|
||||
<DrawerContent className="max-h-[85vh]">
|
||||
<div
|
||||
className="flex-1 overflow-y-auto overscroll-contain py-3 px-4"
|
||||
className="flex-1 overflow-y-auto overscroll-contain px-4 py-3"
|
||||
style={{
|
||||
touchAction: 'pan-y',
|
||||
WebkitOverflowScrolling: 'touch'
|
||||
|
|
@ -41,9 +41,9 @@ export default function FeedButton({ className }: { className?: string }) {
|
|||
<PopoverTrigger asChild>
|
||||
<FeedSwitcherTrigger className={className} />
|
||||
</PopoverTrigger>
|
||||
<PopoverContent sideOffset={0} side="bottom" className="w-[400px] p-0 overflow-hidden">
|
||||
<PopoverContent sideOffset={0} side="bottom" className="w-[400px] overflow-hidden p-0">
|
||||
<div
|
||||
className="max-h-[calc(100vh-16rem)] overflow-y-auto overscroll-contain py-3 px-4"
|
||||
className="max-h-[calc(100vh-16rem)] overflow-y-auto overscroll-contain px-4 py-3"
|
||||
onWheel={(e) => e.stopPropagation()}
|
||||
onTouchMove={(e) => e.stopPropagation()}
|
||||
>
|
||||
|
|
@ -94,12 +94,12 @@ const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle
|
|||
|
||||
return (
|
||||
<div
|
||||
className={cn('flex items-center gap-2 clickable px-3 h-full rounded-xl', className)}
|
||||
className={cn('clickable flex h-full items-center gap-2 rounded-xl px-3', className)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{icon}
|
||||
<div className="text-lg font-semibold truncate">{title}</div>
|
||||
<div className="truncate text-lg font-semibold">{title}</div>
|
||||
<ChevronDown />
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -44,15 +44,15 @@ export default function FollowingFeed() {
|
|||
// Show empty state when user has no followings
|
||||
if (hasFollowings === false && subRequests.length > 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[60vh] px-6 text-center">
|
||||
<UserPlus size={64} className="text-muted-foreground mb-4" strokeWidth={1.5} />
|
||||
<h2 className="text-2xl font-semibold mb-2">{t('Welcome to Jumble!')}</h2>
|
||||
<p className="text-muted-foreground mb-6 max-w-md">
|
||||
<div className="flex min-h-[60vh] flex-col items-center justify-center px-6 text-center">
|
||||
<UserPlus size={64} className="mb-4 text-muted-foreground" strokeWidth={1.5} />
|
||||
<h2 className="mb-2 text-2xl font-semibold">{t('Welcome to Jumble!')}</h2>
|
||||
<p className="mb-6 max-w-md text-muted-foreground">
|
||||
{t(
|
||||
'Your feed is empty because you are not following anyone yet. Start by exploring interesting content and following users you like!'
|
||||
)}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3 w-full max-w-md">
|
||||
<div className="flex w-full max-w-md flex-col gap-3 sm:flex-row">
|
||||
<Button size="lg" onClick={() => navigate('explore')} className="w-full">
|
||||
<Compass className="size-5" />
|
||||
{t('Explore')}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ const NoteListPage = forwardRef<TPageRef>((_, ref) => {
|
|||
let content: React.ReactNode = null
|
||||
if (!isReady) {
|
||||
content = (
|
||||
<div className="text-center text-sm text-muted-foreground pt-3">{t('loading...')}</div>
|
||||
<div className="pt-3 text-center text-sm text-muted-foreground">{t('loading...')}</div>
|
||||
)
|
||||
} else if (!feedInfo) {
|
||||
content = <WelcomeGuide />
|
||||
|
|
@ -112,9 +112,9 @@ function NoteListPageTitlebar({
|
|||
const { isSmallScreen } = useScreenSize()
|
||||
|
||||
return (
|
||||
<div className="flex gap-1 items-center h-full justify-between">
|
||||
<FeedButton className="flex-1 max-w-fit w-0" />
|
||||
<div className="shrink-0 flex gap-1 items-center">
|
||||
<div className="flex h-full items-center justify-between gap-1">
|
||||
<FeedButton className="w-0 max-w-fit flex-1" />
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
{setShowRelayDetails && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
|
|
@ -182,21 +182,21 @@ function WelcomeGuide() {
|
|||
const { checkLogin } = useNostr()
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[60vh] px-4 text-center space-y-6">
|
||||
<div className="flex min-h-[60vh] flex-col items-center justify-center space-y-6 px-4 text-center">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center w-full justify-center gap-2">
|
||||
<div className="flex w-full items-center justify-center gap-2">
|
||||
<Sparkles className="text-yellow-400" />
|
||||
<h2 className="text-2xl font-bold">{t('Welcome to Jumble')}</h2>
|
||||
<Sparkles className="text-yellow-400" />
|
||||
</div>
|
||||
<p className="text-muted-foreground max-w-md">
|
||||
<p className="max-w-md text-muted-foreground">
|
||||
{t(
|
||||
'Jumble is a client focused on browsing relays. Get started by exploring interesting relays or login to view your following feed.'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3 w-full max-w-md">
|
||||
<div className="flex w-full max-w-md flex-col gap-3 sm:flex-row">
|
||||
<Button size="lg" className="w-full" onClick={() => navigate('explore')}>
|
||||
<Compass className="size-5" />
|
||||
{t('Explore')}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ function NotificationListPageTitlebar() {
|
|||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 items-center justify-between h-full pl-3">
|
||||
<div className="flex h-full items-center justify-between gap-2 pl-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bell />
|
||||
<div className="text-lg font-semibold">{t('Notifications')}</div>
|
||||
|
|
@ -77,8 +77,8 @@ function HideUnrelatedNotificationsToggle() {
|
|||
<Button
|
||||
variant="ghost"
|
||||
className={cn(
|
||||
'h-10 px-3 shrink-0 rounded-xl [&_svg]:size-5',
|
||||
hideIndirect ? 'text-foreground bg-muted/40' : 'text-muted-foreground'
|
||||
'h-10 shrink-0 rounded-xl px-3 [&_svg]:size-5',
|
||||
hideIndirect ? 'bg-muted/40 text-foreground' : 'text-muted-foreground'
|
||||
)}
|
||||
onClick={() => updateHideIndirect(!hideIndirect)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ function ProfilePageTitlebar() {
|
|||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 items-center h-full pl-3">
|
||||
<div className="flex h-full items-center gap-2 pl-3">
|
||||
<UserRound />
|
||||
<div className="text-lg font-semibold">{t('Profile')}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@ export default RelayPage
|
|||
|
||||
function RelayPageTitlebar({ url }: { url?: string }) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 px-3 h-full">
|
||||
<div className="flex h-full items-center gap-2 px-3">
|
||||
<Server />
|
||||
<div className="text-lg font-semibold truncate">{simplifyUrl(url ?? '')}</div>
|
||||
<div className="truncate text-lg font-semibold">{simplifyUrl(url ?? '')}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ function SettingsPageTitlebar() {
|
|||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 items-center h-full pl-3">
|
||||
<div className="flex h-full items-center gap-2 pl-3">
|
||||
<SettingsIcon />
|
||||
<div className="text-lg font-semibold">{t('Settings')}</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue