Fetch relationships when opening favourites/reblogs modal

app/soapbox/actions/interactions.ts

@@ -5,6 +5,7 @@ import { isLoggedIn } from 'soapbox/utils/auth';
 
 import api from '../api';
 
+import { fetchRelationships } from './accounts';
 import { importFetchedAccounts, importFetchedStatus } from './importer';
 
 import type { AxiosError } from 'axios';
@@ -292,6 +293,7 @@ const fetchReblogs = (id: string) =>
 
     api(getState).get(`/api/v1/statuses/${id}/reblogged_by`).then(response => {
       dispatch(importFetchedAccounts(response.data));
+      dispatch(fetchRelationships(response.data.map((item: APIEntity) => item.id)));
       dispatch(fetchReblogsSuccess(id, response.data));
     }).catch(error => {
       dispatch(fetchReblogsFail(id, error));
@@ -323,6 +325,7 @@ const fetchFavourites = (id: string) =>
 
     api(getState).get(`/api/v1/statuses/${id}/favourited_by`).then(response => {
       dispatch(importFetchedAccounts(response.data));
+      dispatch(fetchRelationships(response.data.map((item: APIEntity) => item.id)));
       dispatch(fetchFavouritesSuccess(id, response.data));
     }).catch(error => {
       dispatch(fetchFavouritesFail(id, error));

app/soapbox/components/profile-hover-card.tsx

@@ -97,7 +97,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
   return (
     <div
       className={classNames({
-        'absolute transition-opacity w-[320px] z-50 top-0 left-0': true,
+        'absolute transition-opacity w-[320px] z-[101] top-0 left-0': true,
         'opacity-100': visible,
         'opacity-0 pointer-events-none': !visible,
       })}

app/soapbox/features/status/components/status-interaction-bar.tsx

@@ -163,7 +163,7 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
   return (
     <HStack space={3}>
       {getReposts()}
-      
+
       {features.emojiReacts ? getEmojiReacts() : getFavourites()}
     </HStack>
   );

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

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { fetchFavourites } from 'soapbox/actions/interactions';
 import ScrollableList from 'soapbox/components/scrollable_list';
-import { Modal, Spinner } from 'soapbox/components/ui';
+import { Modal, Spinner, Stack } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
@@ -34,18 +34,16 @@ const FavouritesModal: React.FC<IFavouritesModal> = ({ onClose, statusId }) => {
   if (!accountIds) {
     body = <Spinner />;
   } else {
-    const emptyMessage = <FormattedMessage id='empty_column.favourites' defaultMessage='No one has liked this post yet. When someone does, they will show up here.' />;
-
     body = (
-      <ScrollableList
-        scrollKey='favourites'
-        emptyMessage={emptyMessage}
-        itemClassName='pb-3'
-      >
-        {accountIds.map((id) =>
-          <AccountContainer key={id} id={id} />,
+      <Stack space={3}>
+        {accountIds.size > 0 ? (
+          accountIds.map((id) =>
+            <AccountContainer key={id} id={id} />,
+          )
+        ) : (
+          <FormattedMessage id='empty_column.favourites' defaultMessage='No one has liked this post yet. When someone does, they will show up here.' />
         )}
-      </ScrollableList>
+      </Stack>
     );
   }
 

app/soapbox/features/ui/util/async-components.ts

@@ -203,7 +203,7 @@ export function ReblogsModal() {
 }
 
 export function FavouritesModal() {
-  return import(/* webpackChunkName: "features/ui" */'../components/favourites_modal');
+  return import(/* webpackChunkName: "features/ui" */'../components/modals/favourites-modal');
 }
 
 export function ReactionsModal() {

app/soapbox/locales/defaultMessages.json

@@ -6035,7 +6035,7 @@
         "id": "column.favourites"
       }
     ],
-    "path": "app/soapbox/features/ui/components/favourites_modal.json"
+    "path": "app/soapbox/features/ui/components/modals/favourites-modal.json"
   },
   {
     "descriptors": [