diff --git a/packages/pl-fe/src/components/account-hover-card.tsx b/packages/pl-fe/src/components/account-hover-card.tsx index 1d1a3d19e..2005c7f72 100644 --- a/packages/pl-fe/src/components/account-hover-card.tsx +++ b/packages/pl-fe/src/components/account-hover-card.tsx @@ -71,7 +71,7 @@ const AccountHoverCard: React.FC = ({ visible = true }) => { const frontendConfig = useFrontendConfig(); const { account } = useAccount(accountId || undefined, { withRelationship: true }); const { data: scrobble } = useQuery(accountScrobbleQueryOptions(account?.id)); - const { data: patronUser } = usePatronUser(frontendConfig.patron.enabled ? account?.url : undefined); + const { data: patronUser } = usePatronUser(frontendConfig.patron.enabled && account?.local ? account.url : undefined); const badges = getBadges(account, patronUser?.is_patron); useEffect(() => { diff --git a/packages/pl-fe/src/components/account.tsx b/packages/pl-fe/src/components/account.tsx index 64ee52ac6..332850bcb 100644 --- a/packages/pl-fe/src/components/account.tsx +++ b/packages/pl-fe/src/components/account.tsx @@ -160,7 +160,7 @@ const Account = ({ const me = useAppSelector((state) => state.me); const username = useAcct(account); const frontendConfig = useFrontendConfig(); - const { data: patronUser } = usePatronUser(frontendConfig.patron.enabled ? account.url : undefined); + const { data: patronUser } = usePatronUser(frontendConfig.patron.enabled && account.local ? account.url : undefined); const { disableUserProvidedMedia } = useSettings(); const handleAction = () => { diff --git a/packages/pl-fe/src/components/patron-indicator.tsx b/packages/pl-fe/src/components/patron-indicator.tsx index 80812162a..29d0775f3 100644 --- a/packages/pl-fe/src/components/patron-indicator.tsx +++ b/packages/pl-fe/src/components/patron-indicator.tsx @@ -1,14 +1,23 @@ +import clsx from 'clsx'; import React from 'react'; interface IPatronIndicator { isPatron?: boolean; children: React.ReactNode; + /** Size variant for the gradient ring thickness. */ + size?: 'sm' | 'lg'; } -const PatronIndicator: React.FC = ({ isPatron, children }) => { +const PatronIndicator: React.FC = ({ isPatron, children, size = 'sm' }) => { if (!isPatron) return <>{children}; return ( -
+
{children}
); diff --git a/packages/pl-fe/src/features/account/components/header.tsx b/packages/pl-fe/src/features/account/components/header.tsx index 66e65440b..934379a02 100644 --- a/packages/pl-fe/src/features/account/components/header.tsx +++ b/packages/pl-fe/src/features/account/components/header.tsx @@ -146,7 +146,7 @@ const Header: React.FC = ({ account }) => { const features = useFeatures(); const frontendConfig = useFrontendConfig(); const { account: ownAccount } = useOwnAccount(); - const { data: patronUser } = usePatronUser(frontendConfig.patron.enabled ? account?.url : undefined); + const { data: patronUser } = usePatronUser(frontendConfig.patron.enabled && account?.local ? account.url : undefined); const { mutate: followAccount } = useFollowAccountMutation(account?.id!); const { mutate: unblockAccount } = useUnblockAccountMutation(account?.id!); const { mutate: unmuteAccount } = useUnmuteAccountMutation(account?.id!); @@ -762,13 +762,15 @@ const Header: React.FC = ({ account }) => {
- + = ({ account, username }) => const frontendConfig = useFrontendConfig(); const { data: scrobble } = useQuery(accountScrobbleQueryOptions(account?.id)); - const { data: patronUser } = usePatronUser(frontendConfig.patron.enabled ? account?.url : undefined); + const { data: patronUser } = usePatronUser(frontendConfig.patron.enabled && account?.local ? account.url : undefined); const getStaffBadge = (): React.ReactNode => { if (account?.is_admin) { diff --git a/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx index f4d2bc9dd..a0d671a3b 100644 --- a/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx +++ b/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx @@ -67,7 +67,7 @@ const UserPanel: React.FC = ({ accountId, action, badges, domain, is username={account.username} showAlt size={80} - className='size-20 bg-gray-50 ring-2 ring-white' + className={isPatron ? 'size-20 bg-gray-50' : 'size-20 bg-gray-50 ring-2 ring-white'} />