Fix HeaderPicker/AvatarPicker for missing images

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/edit-profile/components/header-picker.tsx

@@ -19,6 +19,12 @@ interface IMediaInput {
 const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, onClear, accept, disabled }, ref) => {
   const intl = useIntl();
 
+  const handleClear: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+
+    onClear!();
+  };
+
   return (
     <label
       className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
@@ -54,7 +60,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
       </HStack>
       {onClear && src && (
         <IconButton
-          onClick={onClear}
+          onClick={handleClear}
           src={require('@tabler/icons/x.svg')}
           theme='dark'
           className='absolute right-2 top-2 z-10 hover:scale-105 hover:bg-gray-900'

app/soapbox/utils/accounts.ts

@@ -34,9 +34,10 @@ export const isLocal = (account: Pick<Account, 'acct'>): boolean => {
 export const isRemote = (account: Pick<Account, 'acct'>): boolean => !isLocal(account);
 
 /** Default header filenames from various backends */
-const DEFAULT_HEADERS = [
+const DEFAULT_HEADERS: string[] = [
   '/headers/original/missing.png', // Mastodon
   '/images/banner.png', // Pleroma
+  require('assets/images/header-missing.png'), // header not provided by backend
 ];
 
 /** Check if the avatar is a default avatar */
@@ -48,6 +49,7 @@ export const isDefaultHeader = (url: string) => {
 const DEFAULT_AVATARS = [
   '/avatars/original/missing.png', // Mastodon
   '/images/avi.png', // Pleroma
+  require('assets/images/avatar-missing.png'), // avatar not provided by backend
 ];
 
 /** Check if the avatar is a default avatar */