Merge branch 'profile-header' into 'develop'

Default header should not be clickable

See merge request soapbox-pub/soapbox!1994

app/soapbox/features/account/components/header.tsx

@@ -28,7 +28,7 @@ import { normalizeAttachment } from 'soapbox/normalizers';
 import { ChatKeys, useChats } from 'soapbox/queries/chats';
 import { queryClient } from 'soapbox/queries/client';
 import { Account } from 'soapbox/types/entities';
-import { isRemote } from 'soapbox/utils/accounts';
+import { isDefaultHeader, isRemote } from 'soapbox/utils/accounts';
 
 import type { Menu as MenuType } from 'soapbox/components/dropdown-menu';
 
@@ -502,6 +502,29 @@ const Header: React.FC<IHeader> = ({ account }) => {
     return info;
   };
 
+  const renderHeader = () => {
+    let header: React.ReactNode;
+
+    if (account.header) {
+      header = (
+        <StillImage
+          src={account.header}
+          alt={intl.formatMessage(messages.header)}
+        />
+      );
+
+      if (!isDefaultHeader(account.header)) {
+        header = (
+          <a href={account.header} onClick={handleHeaderClick} target='_blank'>
+            {header}
+          </a>
+        );
+      }
+    }
+
+    return header;
+  };
+
   const renderMessageButton = () => {
     if (features.chatsWithFollowers) { // Truth Social
       if (!ownAccount || !account || account.id === ownAccount?.id) {
@@ -570,14 +593,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
       <div>
         <div className='relative flex flex-col justify-center h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50 overflow-hidden isolate'>
-          {account.header && (
+          {renderHeader()}
-            <a href={account.header} onClick={handleHeaderClick} target='_blank'>
-              <StillImage
-                src={account.header}
-                alt={intl.formatMessage(messages.header)}
-              />
-            </a>
-          )}
 
           <div className='absolute top-2 left-2'>
             <HStack alignItems='center' space={1}>

app/soapbox/features/aliases/index.tsx

@@ -20,7 +20,6 @@ const messages = defineMessages({
   delete: { id: 'column.aliases.delete', defaultMessage: 'Delete' },
 });
 
-
 const Aliases = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();

app/soapbox/features/event/components/event-header.tsx

@@ -95,6 +95,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
   const username = account.username;
 
   const handleHeaderClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
+    e.preventDefault();
     e.stopPropagation();
 
     dispatch(openModal('MEDIA', { media: ImmutableList([event.banner]) }));

app/soapbox/features/onboarding/steps/avatar-selection-step.tsx

@@ -7,6 +7,7 @@ import { patchMe } from 'soapbox/actions/me';
 import snackbar from 'soapbox/actions/snackbar';
 import { Avatar, Button, Card, CardBody, Icon, Spinner, Stack, Text } from 'soapbox/components/ui';
 import { useOwnAccount } from 'soapbox/hooks';
+import { isDefaultAvatar } from 'soapbox/utils/accounts';
 import resizeImage from 'soapbox/utils/resize-image';
 
 import type { AxiosError } from 'axios';
@@ -15,17 +16,6 @@ const messages = defineMessages({
   error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
 });
 
-/** Default avatar filenames from various backends */
-const DEFAULT_AVATARS = [
-  '/avatars/original/missing.png', // Mastodon
-  '/images/avi.png', // Pleroma
-];
-
-/** Check if the avatar is a default avatar */
-const isDefaultAvatar = (url: string) => {
-  return DEFAULT_AVATARS.every(avatar => url.endsWith(avatar));
-};
-
 const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
   const dispatch = useDispatch();
   const account = useOwnAccount();

app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx

@@ -8,6 +8,7 @@ import snackbar from 'soapbox/actions/snackbar';
 import StillImage from 'soapbox/components/still-image';
 import { Avatar, Button, Card, CardBody, Icon, Spinner, Stack, Text } from 'soapbox/components/ui';
 import { useOwnAccount } from 'soapbox/hooks';
+import { isDefaultHeader } from 'soapbox/utils/accounts';
 import resizeImage from 'soapbox/utils/resize-image';
 
 import type { AxiosError } from 'axios';
@@ -17,17 +18,6 @@ const messages = defineMessages({
   error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
 });
 
-/** Default header filenames from various backends */
-const DEFAULT_HEADERS = [
-  '/headers/original/missing.png', // Mastodon
-  '/images/banner.png', // Pleroma
-];
-
-/** Check if the avatar is a default avatar */
-const isDefaultHeader = (url: string) => {
-  return DEFAULT_HEADERS.every(header => url.endsWith(header));
-};
-
 const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
   const intl = useIntl();
   const dispatch = useDispatch();

app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx

@@ -45,7 +45,6 @@ const messages = defineMessages({
   cancelEditing: { id: 'confirmations.cancel_editing.confirm', defaultMessage: 'Cancel editing' },
 });
 
-
 interface IAccount {
   eventId: string,
   id: string,

app/soapbox/features/ui/components/modals/policy-modal.tsx

@@ -56,7 +56,6 @@ const DirectMessageUpdates = () => {
             </defs>
           </svg>
 
-
           <Text weight='bold'>Privacy Policy Updates</Text>
         </HStack>
 

app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-
 import { blockAccount } from 'soapbox/actions/accounts';
 import { submitReport, submitReportSuccess, submitReportFail } from 'soapbox/actions/reports';
 import { expandAccountTimeline } from 'soapbox/actions/timelines';

app/soapbox/middleware/sounds.ts

@@ -7,7 +7,6 @@ import { play, soundCache } from 'soapbox/utils/sounds';
 import type { ThunkMiddleware } from 'redux-thunk';
 import type { Sounds } from 'soapbox/utils/sounds';
 
-
 interface Action extends AnyAction {
   meta: {
     sound: Sounds

app/soapbox/utils/accounts.ts

@@ -32,3 +32,25 @@ export const isLocal = (account: Account): boolean => {
 };
 
 export const isRemote = (account: Account): boolean => !isLocal(account);
+
+/** Default header filenames from various backends */
+const DEFAULT_HEADERS = [
+  '/headers/original/missing.png', // Mastodon
+  '/images/banner.png', // Pleroma
+];
+
+/** Check if the avatar is a default avatar */
+export const isDefaultHeader = (url: string) => {
+  return DEFAULT_HEADERS.some(header => url.endsWith(header));
+};
+
+/** Default avatar filenames from various backends */
+const DEFAULT_AVATARS = [
+  '/avatars/original/missing.png', // Mastodon
+  '/images/avi.png', // Pleroma
+];
+
+/** Check if the avatar is a default avatar */
+export const isDefaultAvatar = (url: string) => {
+  return DEFAULT_AVATARS.some(avatar => url.endsWith(avatar));
+};