hq/Bpistle
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: format

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

10
src/components/Note/CommunityDefinition.tsx
View file

@ -16,11 +16,11 @@ export default function CommunityDefinition({
const metadata = useMemo(() => getCommunityDefinitionFromEvent(event), [event])
const communityNameComponent = (
<div className="text-xl font-semibold line-clamp-1">{metadata.name}</div>
<div className="line-clamp-1 text-xl font-semibold">{metadata.name}</div>
)
const communityDescriptionComponent = metadata.description && (
<div className="text-sm text-muted-foreground line-clamp-2">{metadata.description}</div>
<div className="line-clamp-2 text-sm text-muted-foreground">{metadata.description}</div>
)
return (
@ -29,16 +29,16 @@ export default function CommunityDefinition({
{metadata.image && autoLoadMedia && (
<Image
image={{ url: metadata.image, pubkey: event.pubkey }}
className="aspect-square bg-foreground h-20"
className="aspect-square h-20 bg-foreground"
hideIfError
/>
)}
<div className="flex-1 w-0 space-y-1">
<div className="w-0 flex-1 space-y-1">
{communityNameComponent}
{communityDescriptionComponent}
</div>
</div>
<ClientSelect className="w-full mt-2" event={event} />
<ClientSelect className="mt-2 w-full" event={event} />
</div>
)
}

4
src/components/Note/EmojiPack.tsx
View file

@ -44,7 +44,7 @@ export default function EmojiPack({ event, className }: { event: Event; classNam
return (
<div className={className}>
<div className="flex items-center justify-between mb-2">
<div className="mb-2 flex items-center justify-between">
<h3 className="text-2xl font-semibold">{title}</h3>
{accountPubkey && (
<Button
@ -55,7 +55,7 @@ export default function EmojiPack({ event, className }: { event: Event; classNam
className="shrink-0"
>
{updating ? (
<Loader className="animate-spin mr-1" />
<Loader className="mr-1 animate-spin" />
) : isCollected ? (
<CheckIcon />
) : (

12
src/components/Note/FollowPack.tsx
View file

@ -22,11 +22,11 @@ export default function FollowPack({ event, className }: { event: Event; classNa
return (
<div className={className}>
<div className="flex items-start gap-2 mb-2">
<div className="mb-2 flex items-start gap-2">
{image && (
<Image
image={{ url: image, pubkey: event.pubkey }}
className="w-24 h-20 object-cover"
className="h-20 w-24 object-cover"
classNames={{
wrapper: 'w-24 h-20 flex-shrink-0',
errorPlaceholder: 'w-24 h-20'
@ -34,15 +34,15 @@ export default function FollowPack({ event, className }: { event: Event; classNa
hideIfError
/>
)}
<div className="flex-1 min-w-0">
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<h3 className="text-xl font-semibold mb-1 truncate">{title}</h3>
<span className="text-xs text-muted-foreground shrink-0">
<h3 className="mb-1 truncate text-xl font-semibold">{title}</h3>
<span className="shrink-0 text-xs text-muted-foreground">
{t('n users', { count: pubkeys.length })}
</span>
</div>
{description && (
<p className="text-sm text-muted-foreground line-clamp-2">{description}</p>
<p className="line-clamp-2 text-sm text-muted-foreground">{description}</p>
)}
</div>
</div>

10
src/components/Note/GroupMetadata.tsx
View file

@ -18,11 +18,11 @@ export default function GroupMetadata({
const metadata = useMemo(() => getGroupMetadataFromEvent(event), [event])
const groupNameComponent = (
<div className="text-xl font-semibold line-clamp-1">{metadata.name}</div>
<div className="line-clamp-1 text-xl font-semibold">{metadata.name}</div>
)
const groupAboutComponent = metadata.about && (
<div className="text-sm text-muted-foreground line-clamp-2">{metadata.about}</div>
<div className="line-clamp-2 text-sm text-muted-foreground">{metadata.about}</div>
)
return (
@ -31,16 +31,16 @@ export default function GroupMetadata({
{metadata.picture && autoLoadMedia && (
<Image
image={{ url: metadata.picture, pubkey: event.pubkey }}
className="aspect-square bg-foreground h-20"
className="aspect-square h-20 bg-foreground"
hideIfError
/>
)}
<div className="flex-1 w-0 space-y-1">
<div className="w-0 flex-1 space-y-1">
{groupNameComponent}
{groupAboutComponent}
</div>
</div>
<ClientSelect className="w-full mt-2" event={event} originalNoteId={originalNoteId} />
<ClientSelect className="mt-2 w-full" event={event} originalNoteId={originalNoteId} />
</div>
)
}

10
src/components/Note/Highlight.tsx
View file

@ -21,12 +21,12 @@ export default function Highlight({ event, className }: { event: Event; classNam
)
return (
<div className={cn('text-wrap break-words whitespace-pre-wrap space-y-4', className)}>
<div className={cn('space-y-4 whitespace-pre-wrap text-wrap break-words', className)}>
{comment && <Content event={createFakeEvent({ content: comment, tags: event.tags })} />}
<div className="flex gap-4">
<div className="w-1 flex-shrink-0 my-1 bg-primary/60 rounded-md" />
<div className="my-1 w-1 flex-shrink-0 rounded-md bg-primary/60" />
<div
className="italic whitespace-pre-line"
className="whitespace-pre-line italic"
style={{
overflowWrap: 'anywhere'
}}
@ -112,7 +112,7 @@ function HighlightSource({ event }: { event: Event }) {
{t('From')}{' '}
<ExternalLink
url={sourceTag[1]}
className="underline italic text-muted-foreground hover:text-foreground"
className="italic text-muted-foreground underline hover:text-foreground"
/>
</div>
)
@ -124,7 +124,7 @@ function HighlightSource({ event }: { event: Event }) {
{pubkey && <UserAvatar userId={pubkey} size="xSmall" className="cursor-pointer" />}
{referenceEventId && (
<div
className="truncate underline pointer-events-auto cursor-pointer hover:text-foreground"
className="pointer-events-auto cursor-pointer truncate underline hover:text-foreground"
onClick={(e) => {
e.stopPropagation()
push(toNote(referenceEvent ?? referenceEventId))

16
src/components/Note/LiveEvent.tsx
View file

@ -23,14 +23,14 @@ export default function LiveEvent({ event, className }: { event: Event; classNam
<Badge variant="secondary">{metadata.status}</Badge>
))
const titleComponent = <div className="text-xl font-semibold line-clamp-1">{metadata.title}</div>
const titleComponent = <div className="line-clamp-1 text-xl font-semibold">{metadata.title}</div>
const summaryComponent = metadata.summary && (
<div className="text-sm text-muted-foreground line-clamp-4">{metadata.summary}</div>
<div className="line-clamp-4 text-sm text-muted-foreground">{metadata.summary}</div>
)
const tagsComponent = metadata.tags.length > 0 && (
<div className="flex gap-1 flex-wrap">
<div className="flex flex-wrap gap-1">
{metadata.tags.map((tag) => (
<Badge key={tag} variant="secondary">
{tag}
@ -45,7 +45,7 @@ export default function LiveEvent({ event, className }: { event: Event; classNam
{metadata.image && autoLoadMedia && (
<Image
image={{ url: metadata.image, pubkey: event.pubkey }}
className="w-full aspect-video"
className="aspect-video w-full"
hideIfError
/>
)}
@ -54,7 +54,7 @@ export default function LiveEvent({ event, className }: { event: Event; classNam
{liveStatusComponent}
{summaryComponent}
{tagsComponent}
<ClientSelect className="w-full mt-2" event={event} />
<ClientSelect className="mt-2 w-full" event={event} />
</div>
</div>
)
@ -66,18 +66,18 @@ export default function LiveEvent({ event, className }: { event: Event; classNam
{metadata.image && autoLoadMedia && (
<Image
image={{ url: metadata.image, pubkey: event.pubkey }}
className="aspect-[4/3] xl:aspect-video bg-foreground h-44"
className="aspect-[4/3] h-44 bg-foreground xl:aspect-video"
hideIfError
/>
)}
<div className="flex-1 w-0 space-y-1">
<div className="w-0 flex-1 space-y-1">
{titleComponent}
{liveStatusComponent}
{summaryComponent}
{tagsComponent}
</div>
</div>
<ClientSelect className="w-full mt-2" event={event} />
<ClientSelect className="mt-2 w-full" event={event} />
</div>
)
}

18
src/components/Note/LongFormArticle/index.tsx
View file

@ -43,7 +43,7 @@ export default function LongFormArticle({
return (
<SecondaryPageLink
to={toNote(href)}
className="break-words underline text-foreground"
className="break-words text-foreground underline"
>
{children}
</SecondaryPageLink>
@ -53,7 +53,7 @@ export default function LongFormArticle({
return (
<SecondaryPageLink
to={toProfile(href)}
className="break-words underline text-foreground"
className="break-words text-foreground underline"
>
{children}
</SecondaryPageLink>
@ -65,7 +65,7 @@ export default function LongFormArticle({
href={href}
target="_blank"
rel="noreferrer noopener"
className="break-words inline-flex items-baseline gap-1"
className="inline-flex items-baseline gap-1 break-words"
>
{children} <ExternalLink className="size-3" />
</a>
@ -73,11 +73,11 @@ export default function LongFormArticle({
},
p: (props) => <p {...props} className="break-words" />,
div: (props) => <div {...props} className="break-words" />,
code: (props) => <code {...props} className="break-words whitespace-pre-wrap" />,
code: (props) => <code {...props} className="whitespace-pre-wrap break-words" />,
img: (props) => (
<ImageWithLightbox
image={{ url: props.src || '', pubkey: event.pubkey }}
className="max-h-[80vh] sm:max-h-[50vh] object-contain my-0"
className="my-0 max-h-[80vh] object-contain sm:max-h-[50vh]"
classNames={{
wrapper: 'w-fit max-w-full'
}}
@ -91,7 +91,7 @@ export default function LongFormArticle({
<>
<div
ref={contentRef}
className={`prose prose-zinc max-w-none dark:prose-invert break-words overflow-wrap-anywhere ${className || ''}`}
className={`overflow-wrap-anywhere prose prose-zinc max-w-none break-words dark:prose-invert ${className || ''}`}
>
<h1 className="break-words">{metadata.title}</h1>
{metadata.summary && (
@ -102,7 +102,7 @@ export default function LongFormArticle({
{metadata.image && (
<ImageWithLightbox
image={{ url: metadata.image, pubkey: event.pubkey }}
className="w-full aspect-[3/1] object-cover my-0"
className="my-0 aspect-[3/1] w-full object-cover"
/>
)}
<Markdown
@ -118,12 +118,12 @@ export default function LongFormArticle({
{event.content}
</Markdown>
{metadata.tags.length > 0 && (
<div className="flex gap-2 flex-wrap pb-2">
<div className="flex flex-wrap gap-2 pb-2">
{metadata.tags.map((tag) => (
<div
key={tag}
title={tag}
className="flex items-center rounded-full px-3 bg-muted text-muted-foreground max-w-44 cursor-pointer hover:bg-accent hover:text-accent-foreground"
className="flex max-w-44 cursor-pointer items-center rounded-full bg-muted px-3 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
onClick={(e) => {
e.stopPropagation()
push(toNoteList({ hashtag: tag, kinds: [kinds.LongFormArticle] }))

14
src/components/Note/LongFormArticlePreview.tsx
View file

@ -19,14 +19,14 @@ export default function LongFormArticlePreview({
const { autoLoadMedia } = useContentPolicy()
const metadata = useMemo(() => getLongFormArticleMetadataFromEvent(event), [event])
const titleComponent = <div className="text-xl font-semibold line-clamp-2">{metadata.title}</div>
const titleComponent = <div className="line-clamp-2 text-xl font-semibold">{metadata.title}</div>
const tagsComponent = metadata.tags.length > 0 && (
<div className="flex gap-1 flex-wrap">
<div className="flex flex-wrap gap-1">
{metadata.tags.map((tag) => (
<div
key={tag}
className="flex items-center rounded-full text-xs px-2.5 py-0.5 bg-muted text-muted-foreground max-w-32 cursor-pointer hover:bg-accent hover:text-accent-foreground"
className="flex max-w-32 cursor-pointer items-center rounded-full bg-muted px-2.5 py-0.5 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground"
onClick={(e) => {
e.stopPropagation()
push(toNoteList({ hashtag: tag, kinds: [kinds.LongFormArticle] }))
@ -39,7 +39,7 @@ export default function LongFormArticlePreview({
)
const summaryComponent = metadata.summary && (
<div className="text-sm text-muted-foreground line-clamp-4">{metadata.summary}</div>
<div className="line-clamp-4 text-sm text-muted-foreground">{metadata.summary}</div>
)
if (isSmallScreen) {
@ -48,7 +48,7 @@ export default function LongFormArticlePreview({
{metadata.image && autoLoadMedia && (
<Image
image={{ url: metadata.image, pubkey: event.pubkey }}
className="w-full aspect-video"
className="aspect-video w-full"
hideIfError
/>
)}
@ -67,11 +67,11 @@ export default function LongFormArticlePreview({
{metadata.image && autoLoadMedia && (
<Image
image={{ url: metadata.image, pubkey: event.pubkey }}
className="aspect-[4/3] xl:aspect-video object-cover bg-foreground h-44"
className="aspect-[4/3] h-44 bg-foreground object-cover xl:aspect-video"
hideIfError
/>
)}
<div className="flex-1 w-0 space-y-1">
<div className="w-0 flex-1 space-y-1">
{titleComponent}
{summaryComponent}
{tagsComponent}

2
src/components/Note/MutedNote.tsx
View file

@ -6,7 +6,7 @@ export default function MutedNote({ show }: { show: () => void }) {
const { t } = useTranslation()
return (
<div className="flex flex-col gap-2 items-center text-muted-foreground font-medium my-4">
<div className="my-4 flex flex-col items-center gap-2 font-medium text-muted-foreground">
<div>{t('This user has been muted')}</div>
<Button
onClick={(e) => {

2
src/components/Note/NsfwNote.tsx
View file

@ -6,7 +6,7 @@ export default function NsfwNote({ show }: { show: () => void }) {
const { t } = useTranslation()
return (
<div className="flex flex-col gap-2 items-center text-muted-foreground font-medium my-4">
<div className="my-4 flex flex-col items-center gap-2 font-medium text-muted-foreground">
<div>{t('🔞 NSFW 🔞')}</div>
<Button
onClick={(e) => {

10
src/components/Note/Poll.tsx
View file

@ -170,7 +170,7 @@ export default function Poll({ event, className }: { event: Event; className?: s
key={option.id}
title={option.label}
className={cn(
'relative w-full px-4 py-3 rounded-lg border transition-all flex items-center gap-2 overflow-hidden',
'relative flex w-full items-center gap-2 overflow-hidden rounded-lg border px-4 py-3 transition-all',
canVote ? 'cursor-pointer' : 'cursor-not-allowed',
canVote &&
(selectedOptionIds.includes(option.id)
@ -184,7 +184,7 @@ export default function Poll({ event, className }: { event: Event; className?: s
disabled={!canVote}
>
{/* Content */}
<div className="flex items-center gap-2 flex-1 w-0 z-10">
<div className="z-10 flex w-0 flex-1 items-center gap-2">
<div className={cn('line-clamp-2 text-left', isMax ? 'font-semibold' : '')}>
{option.label}
</div>
@ -195,7 +195,7 @@ export default function Poll({ event, className }: { event: Event; className?: s
{showResults && (
<div
className={cn(
'text-muted-foreground shrink-0 z-10',
'z-10 shrink-0 text-muted-foreground',
isMax ? 'font-semibold text-foreground' : ''
)}
>
@ -217,13 +217,13 @@ export default function Poll({ event, className }: { event: Event; className?: s
</div>
{/* Results Summary */}
<div className="flex justify-between items-center text-sm text-muted-foreground">
<div className="flex items-center justify-between text-sm text-muted-foreground">
<div>{t('{{number}} votes', { number: pollResults?.totalVotes ?? 0 })}</div>
{isLoadingResults && t('Loading...')}
{!isLoadingResults && showResults && (
<div
className="hover:underline cursor-pointer"
className="cursor-pointer hover:underline"
onClick={(e) => {
e.stopPropagation()
fetchResults()

2
src/components/Note/RelayReview.tsx
View file

@ -20,7 +20,7 @@ export default function RelayReview({ event, className }: { event: Event; classN
<Stars stars={stars} />
<span className="text-sm text-muted-foreground">→</span>
<div
className="text-sm text-muted-foreground hover:text-foreground hover:underline cursor-pointer truncate"
className="cursor-pointer truncate text-sm text-muted-foreground hover:text-foreground hover:underline"
onClick={(e) => {
e.stopPropagation()
push(toRelay(url))

2
src/components/Note/UnknownNote.tsx
View file

@ -9,7 +9,7 @@ export default function UnknownNote({ event, className }: { event: Event; classN
return (
<div
className={cn(
'flex flex-col gap-2 items-center text-muted-foreground font-medium my-4',
'my-4 flex flex-col items-center gap-2 font-medium text-muted-foreground',
className
)}
>

12
src/components/Note/index.tsx
View file

@ -122,14 +122,14 @@ export default function Note({
return (
<div className={className}>
<div className="flex justify-between items-start gap-2">
<div className="flex items-center space-x-2 flex-1">
<div className="flex items-start justify-between gap-2">
<div className="flex flex-1 items-center space-x-2">
<UserAvatar userId={event.pubkey} size={size === 'small' ? 'medium' : 'normal'} />
<div className="flex-1 w-0">
<div className="flex gap-2 items-center">
<div className="w-0 flex-1">
<div className="flex items-center gap-2">
<Username
userId={event.pubkey}
className={`font-semibold flex truncate ${size === 'small' ? 'text-sm' : ''}`}
className={`flex truncate font-semibold ${size === 'small' ? 'text-sm' : ''}`}
skeletonClassName={size === 'small' ? 'h-3' : 'h-4'}
/>
<FollowingBadge pubkey={event.pubkey} />
@ -149,7 +149,7 @@ export default function Note({
<div className="flex items-center">
<TranslateButton event={event} className={size === 'normal' ? '' : 'pr-0'} />
{size === 'normal' && (
<NoteOptions event={event} className="py-1 shrink-0 [&_svg]:size-5" />
<NoteOptions event={event} className="shrink-0 py-1 [&_svg]:size-5" />
)}
</div>
</div>