chore: format

This commit is contained in:
codytseng 2026-01-22 22:28:07 +08:00
parent 4bd4141b54
commit e490407dd5
225 changed files with 924 additions and 844 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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}

View file

@ -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>
)

View file

@ -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')}

View file

@ -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')}

View file

@ -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)}
>

View file

@ -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>

View file

@ -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>
)
}

View file

@ -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>