add patron rings to user avatars, avoid api calls for external users

packages/pl-fe/src/components/account-hover-card.tsx

@@ -71,7 +71,7 @@ const AccountHoverCard: React.FC<IAccountHoverCard> = ({ 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(() => {

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 = () => {

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<IPatronIndicator> = ({ isPatron, children }) => {
+const PatronIndicator: React.FC<IPatronIndicator> = ({ isPatron, children, size = 'sm' }) => {
   if (!isPatron) return <>{children}</>;
   return (
-    <div className='rounded-lg bg-gradient-to-r from-blue-900 to-purple-500 p-[2px]' title='Patron'>
+    <div
+      className={clsx('rounded-lg bg-gradient-to-r from-blue-900 to-purple-500', {
+        'p-[2px]': size === 'sm',
+        'p-[3px]': size === 'lg',
+      })}
+      title='Patron'
+    >
       {children}
     </div>
   );

packages/pl-fe/src/features/account/components/header.tsx

@@ -146,7 +146,7 @@ const Header: React.FC<IHeader> = ({ 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<IHeader> = ({ account }) => {
       <div className='px-4 sm:px-6'>
         <HStack className='-mt-12' alignItems='bottom' space={5}>
           <div className='relative flex'>
-            <PatronIndicator isPatron={patronUser?.is_patron}>
+            <PatronIndicator isPatron={patronUser?.is_patron} size='lg'>
               <a href={account.avatar} onClick={handleAvatarClick} target='_blank'>
                 <Avatar
                   src={account.avatar}
                   alt={account.avatar_description}
                   size={96}
-                  className='relative size-24 rounded-lg bg-white ring-4 ring-white black:ring-black dark:bg-primary-900 dark:ring-primary-900'
+                  className={patronUser?.is_patron
+                    ? 'relative size-24 rounded-lg bg-white black:bg-black dark:bg-primary-900'
+                    : 'relative size-24 rounded-lg bg-white ring-4 ring-white black:ring-black dark:bg-primary-900 dark:ring-primary-900'}
                   isCat={account.is_cat}
                   username={account.username}
                   showAlt

packages/pl-fe/src/features/ui/components/panels/profile-info-panel.tsx

@@ -48,7 +48,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ 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) {

packages/pl-fe/src/features/ui/components/panels/user-panel.tsx

@@ -67,7 +67,7 @@ const UserPanel: React.FC<IUserPanel> = ({ 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'}
                   />
                 </PatronIndicator>
               </Link>