fix(js): fixes #4452 action buttons not showing externally while mobile (#4547)

web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.tsx

@@ -3,7 +3,7 @@ import { Button, Dropdown } from 'antd';
 import classNames from 'classnames';
 import dynamic from 'next/dynamic';
 import styles from './ActionButtonMenu.module.scss';
-import { ExternalAction } from '../../../interfaces/external-action';
+import { ExternalAction, ExternalActionUtils } from '../../../interfaces/external-action';
 
 // Lazy loaded components
 
@@ -50,12 +50,15 @@ export const ActionButtonMenu: FC<ActionButtonMenuProps> = ({
       followItemSelected();
       return;
     }
-    const action = actions.find(x => x.url === a.key);
-    externalActionSelected(action);
+    // Find the action using the utility function
+    const action = ExternalActionUtils.findByKey(actions, a.key);
+    if (action) {
+      externalActionSelected(action);
+    }
   };
 
   const items = actions.map(action => ({
-    key: action.url,
+    key: ExternalActionUtils.generateKey(action),
     label: (
       <span className={styles.item}>
         {action.icon && <img className={styles.icon} src={action.icon} alt={action.title} />}{' '}

web/components/ui/Content/ActionButtons.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, FC, SetStateAction } from 'react';
 import dynamic from 'next/dynamic';
 import { Skeleton } from 'antd';
-import { ExternalAction } from '../../../interfaces/external-action';
+import { ExternalAction, ExternalActionUtils } from '../../../interfaces/external-action';
 import { ActionButtonMenu } from '../../action-buttons/ActionButtonMenu/ActionButtonMenu';
 import { ActionButtonRow } from '../../action-buttons/ActionButtonRow/ActionButtonRow';
 import { FollowButton } from '../../action-buttons/FollowButton';
@@ -17,7 +17,6 @@ interface ActionButtonProps {
   setShowFollowModal: Dispatch<SetStateAction<boolean>>;
   setShowNotifyModal: Dispatch<SetStateAction<boolean>>;
   disableNotifyReminderPopup: () => void;
-  setExternalActionToDisplay: any;
   externalActionSelected: (action: ExternalAction) => void;
 }
 
@@ -37,12 +36,11 @@ const ActionButtons: FC<ActionButtonProps> = ({
   setShowNotifyModal,
   disableNotifyReminderPopup,
   externalActions,
-  setExternalActionToDisplay,
   externalActionSelected,
 }) => {
   const externalActionButtons = externalActions.map(action => (
     <ActionButton
-      key={action.url || action.html}
+      key={ExternalActionUtils.generateKey(action)}
       action={action}
       externalActionSelected={externalActionSelected}
     />
@@ -70,13 +68,12 @@ const ActionButtons: FC<ActionButtonProps> = ({
       <div className={styles.mobileActionButtons}>
         {(supportsBrowserNotifications ||
           supportsBrowserNotifications ||
-          externalActionButtons.length > 0) && (
+          externalActions.length > 0) && (
           <ActionButtonMenu
-            className={styles.actionButtonMenu}
+            actions={externalActions}
             showFollowItem={supportFediverseFeatures}
             showNotifyItem={supportsBrowserNotifications}
-            actions={externalActions}
-            externalActionSelected={setExternalActionToDisplay}
+            externalActionSelected={externalActionSelected}
             notifyItemSelected={() => setShowNotifyModal(true)}
             followItemSelected={() => setShowFollowModal(true)}
           />

web/components/ui/Content/Content.tsx

@@ -274,7 +274,6 @@ export const Content: FC = () => {
             setShowNotifyModal={setShowNotifyModal}
             disableNotifyReminderPopup={disableNotifyReminderPopup}
             externalActions={externalActions || []}
-            setExternalActionToDisplay={setExternalActionToDisplay}
             setShowFollowModal={setShowFollowModal}
             externalActionSelected={externalActionSelected}
           />