Merge branch 'ditto-favicon' into 'main'

Ditto favicon

See merge request soapbox-pub/soapbox!3094

src/components/account.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
@@ -27,6 +27,9 @@ const messages = defineMessages({
 
 const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
   const history = useHistory();
+  const [missing, setMissing] = useState<boolean>(false);
+
+  const handleError = () => setMissing(true);
 
   const handleClick: React.MouseEventHandler = (e) => {
     e.stopPropagation();
@@ -41,7 +44,7 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
     }
   };
 
-  if (!account.pleroma?.favicon) {
+  if (missing || !account.pleroma?.favicon) {
     return null;
   }
 
@@ -51,7 +54,13 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
       onClick={handleClick}
       disabled={disabled}
     >
-      <img src={account.pleroma.favicon} alt='' title={account.domain} className='max-h-full w-full' />
+      <img
+        src={account.pleroma.favicon}
+        alt=''
+        title={account.domain}
+        className='max-h-full w-full'
+        onError={handleError}
+      />
     </button>
   );
 };

src/schemas/account.ts

@@ -45,6 +45,7 @@ const baseAccountSchema = z.object({
     is_registered: z.boolean().catch(false),
     external_url: z.string().optional().catch(undefined),
   }),
+  domain: z.string().optional().catch(undefined),
   emojis: filteredArray(customEmojiSchema),
   fields: filteredArray(fieldSchema),
   followers_count: z.number().catch(0),
@@ -145,7 +146,7 @@ const transformAccount = <T extends TransformableAccount>({ pleroma, other_setti
   }));
 
   const displayName = account.display_name.trim().length === 0 ? account.username : account.display_name;
-  const domain = getDomain(account.url || account.uri);
+  const domain = account.domain ?? getDomain(account.url || account.uri);
 
   if (pleroma) {
     pleroma.birthday = pleroma.birthday || other_settings?.birthday;