From cffc9d7332deed67dd3acbc619e34f08313c5c60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 9 Oct 2024 18:04:39 +0200
Subject: [PATCH] pl-fe: rename HoverRefWrapper component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../pl-fe/src/components/account-hover-card.tsx    |  2 +-
 packages/pl-fe/src/components/account.tsx          |  6 +++---
 ...r-ref-wrapper.tsx => hover-account-wrapper.tsx} |  8 ++++----
 packages/pl-fe/src/components/parsed-content.tsx   |  6 +++---
 packages/pl-fe/src/components/status-mention.tsx   | 10 +++++-----
 .../pl-fe/src/components/status-reply-mentions.tsx |  6 +++---
 .../pl-fe/src/features/admin/components/report.tsx | 14 +++++++-------
 .../features/directory/components/account-card.tsx |  6 +++---
 .../notifications/components/notification.tsx      |  6 +++---
 .../ui/components/profile-familiar-followers.tsx   |  6 +++---
 10 files changed, 35 insertions(+), 35 deletions(-)
 rename packages/pl-fe/src/components/{hover-ref-wrapper.tsx => hover-account-wrapper.tsx} (83%)

diff --git a/packages/pl-fe/src/components/account-hover-card.tsx b/packages/pl-fe/src/components/account-hover-card.tsx
index b9df8ca04..0111fd32b 100644
--- a/packages/pl-fe/src/components/account-hover-card.tsx
+++ b/packages/pl-fe/src/components/account-hover-card.tsx
@@ -12,7 +12,7 @@ import { UserPanel } from 'pl-fe/features/ui/util/async-components';
 import { useAppSelector, useAppDispatch } from 'pl-fe/hooks';
 import { useAccountHoverCardStore } from 'pl-fe/stores';
 
-import { showAccountHoverCard } from './hover-ref-wrapper';
+import { showAccountHoverCard } from './hover-account-wrapper';
 import { ParsedContent } from './parsed-content';
 import { dateFormatOptions } from './relative-timestamp';
 import Scrobble from './scrobble';
diff --git a/packages/pl-fe/src/components/account.tsx b/packages/pl-fe/src/components/account.tsx
index 34405e360..70ecec5d5 100644
--- a/packages/pl-fe/src/components/account.tsx
+++ b/packages/pl-fe/src/components/account.tsx
@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
-import HoverRefWrapper from 'pl-fe/components/hover-ref-wrapper';
+import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper';
 import VerificationBadge from 'pl-fe/components/verification-badge';
 import ActionButton from 'pl-fe/features/ui/components/action-button';
 import { useAppSelector } from 'pl-fe/hooks';
@@ -249,7 +249,7 @@ const Account = ({
           {withAvatar && (
             <ProfilePopper
               condition={showAccountHoverCard}
-              wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} element='span'>{children}</HoverRefWrapper>}
+              wrapper={(children) => <HoverAccountWrapper className='relative' accountId={account.id} element='span'>{children}</HoverAccountWrapper>}
             >
               <LinkEl className='rounded-full' {...linkProps}>
                 <Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} />
@@ -267,7 +267,7 @@ const Account = ({
           <div className='grow overflow-hidden'>
             <ProfilePopper
               condition={showAccountHoverCard}
-              wrapper={(children) => <HoverRefWrapper accountId={account.id} element='span'>{children}</HoverRefWrapper>}
+              wrapper={(children) => <HoverAccountWrapper accountId={account.id} element='span'>{children}</HoverAccountWrapper>}
             >
               <LinkEl {...linkProps}>
                 <HStack space={1} alignItems='center' grow>
diff --git a/packages/pl-fe/src/components/hover-ref-wrapper.tsx b/packages/pl-fe/src/components/hover-account-wrapper.tsx
similarity index 83%
rename from packages/pl-fe/src/components/hover-ref-wrapper.tsx
rename to packages/pl-fe/src/components/hover-account-wrapper.tsx
index 9c38324b6..c14c86207 100644
--- a/packages/pl-fe/src/components/hover-ref-wrapper.tsx
+++ b/packages/pl-fe/src/components/hover-account-wrapper.tsx
@@ -11,7 +11,7 @@ const showAccountHoverCard = debounce((openAccountHoverCard, ref, accountId) =>
   openAccountHoverCard(ref, accountId);
 }, 600);
 
-interface IHoverRefWrapper {
+interface IHoverAccountWrapper {
   accountId: string;
   element?: 'div' | 'span' | 'bdi';
   className?: string;
@@ -19,7 +19,7 @@ interface IHoverRefWrapper {
 }
 
 /** Makes a profile hover card appear when the wrapped element is hovered. */
-const HoverRefWrapper: React.FC<IHoverRefWrapper> = ({ accountId, children, element: Elem = 'div', className }) => {
+const HoverAccountWrapper: React.FC<IHoverAccountWrapper> = ({ accountId, children, element: Elem = 'div', className }) => {
   const dispatch = useAppDispatch();
 
   const { openAccountHoverCard, closeAccountHoverCard } = useAccountHoverCardStore();
@@ -46,7 +46,7 @@ const HoverRefWrapper: React.FC<IHoverRefWrapper> = ({ accountId, children, elem
   return (
     <Elem
       ref={ref}
-      className={clsx('hover-ref-wrapper', className)}
+      className={clsx('hover-account-wrapper', className)}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       onClick={handleClick}
@@ -56,4 +56,4 @@ const HoverRefWrapper: React.FC<IHoverRefWrapper> = ({ accountId, children, elem
   );
 };
 
-export { HoverRefWrapper as default, showAccountHoverCard };
+export { HoverAccountWrapper as default, showAccountHoverCard };
diff --git a/packages/pl-fe/src/components/parsed-content.tsx b/packages/pl-fe/src/components/parsed-content.tsx
index 698fcea22..234a86c85 100644
--- a/packages/pl-fe/src/components/parsed-content.tsx
+++ b/packages/pl-fe/src/components/parsed-content.tsx
@@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
 import HashtagLink from './hashtag-link';
-import HoverRefWrapper from './hover-ref-wrapper';
+import HoverAccountWrapper from './hover-account-wrapper';
 import StatusMention from './status-mention';
 
 import type { Mention } from 'pl-api';
@@ -70,7 +70,7 @@ const ParsedContent: React.FC<IParsedContent> = (({ html, mentions, hasQuote })
               const mention = mentions.find(({ url }) => domNode.attribs.href === url);
               if (mention) {
                 return (
-                  <HoverRefWrapper accountId={mention.id} element='span'>
+                  <HoverAccountWrapper accountId={mention.id} element='span'>
                     <Link
                       to={`/@${mention.acct}`}
                       className='text-primary-600 hover:underline dark:text-accent-blue'
@@ -79,7 +79,7 @@ const ParsedContent: React.FC<IParsedContent> = (({ html, mentions, hasQuote })
                     >
                       @{mention.username}
                     </Link>
-                  </HoverRefWrapper>
+                  </HoverAccountWrapper>
                 );
               }
             } else if (domNode.attribs['data-user']) {
diff --git a/packages/pl-fe/src/components/status-mention.tsx b/packages/pl-fe/src/components/status-mention.tsx
index 1da87e0cf..b099ff21c 100644
--- a/packages/pl-fe/src/components/status-mention.tsx
+++ b/packages/pl-fe/src/components/status-mention.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 import { useAccount } from 'pl-fe/api/hooks';
 
-import HoverRefWrapper from './hover-ref-wrapper';
+import HoverAccountWrapper from './hover-account-wrapper';
 
 interface IStatusMention {
   accountId: string;
@@ -14,13 +14,13 @@ const StatusMention: React.FC<IStatusMention> = ({ accountId, fallback }) => {
   const { account } = useAccount(accountId);
 
   if (!account) return (
-    <HoverRefWrapper accountId={accountId} element='span'>
+    <HoverAccountWrapper accountId={accountId} element='span'>
       {fallback}
-    </HoverRefWrapper>
+    </HoverAccountWrapper>
   );
 
   return (
-    <HoverRefWrapper accountId={accountId} element='span'>
+    <HoverAccountWrapper accountId={accountId} element='span'>
       <Link
         to={`/@${account.acct}`}
         className='text-primary-600 hover:underline dark:text-accent-blue'
@@ -29,7 +29,7 @@ const StatusMention: React.FC<IStatusMention> = ({ accountId, fallback }) => {
       >
         @{account.acct}
       </Link>
-    </HoverRefWrapper>
+    </HoverAccountWrapper>
   );
 };
 
diff --git a/packages/pl-fe/src/components/status-reply-mentions.tsx b/packages/pl-fe/src/components/status-reply-mentions.tsx
index a99a36624..c1f3469bb 100644
--- a/packages/pl-fe/src/components/status-reply-mentions.tsx
+++ b/packages/pl-fe/src/components/status-reply-mentions.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import HoverRefWrapper from 'pl-fe/components/hover-ref-wrapper';
+import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper';
 import HoverStatusWrapper from 'pl-fe/components/hover-status-wrapper';
 import { useModalsStore } from 'pl-fe/stores';
 
@@ -56,9 +56,9 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
 
     if (hoverable) {
       return (
-        <HoverRefWrapper key={account.id} accountId={account.id} element='span'>
+        <HoverAccountWrapper key={account.id} accountId={account.id} element='span'>
           {link}
-        </HoverRefWrapper>
+        </HoverAccountWrapper>
       );
     } else {
       return link;
diff --git a/packages/pl-fe/src/features/admin/components/report.tsx b/packages/pl-fe/src/features/admin/components/report.tsx
index 56fd51e64..5f4cc11f6 100644
--- a/packages/pl-fe/src/features/admin/components/report.tsx
+++ b/packages/pl-fe/src/features/admin/components/report.tsx
@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import { closeReport } from 'pl-fe/actions/admin';
 import { deactivateUserModal, deleteUserModal } from 'pl-fe/actions/moderation';
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
-import HoverRefWrapper from 'pl-fe/components/hover-ref-wrapper';
+import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper';
 import { Accordion, Avatar, Button, Stack, HStack, Text } from 'pl-fe/components/ui';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 import { makeGetReport } from 'pl-fe/selectors';
@@ -78,7 +78,7 @@ const Report: React.FC<IReport> = ({ id }) => {
 
   return (
     <HStack space={3} className='p-3' key={report.id}>
-      <HoverRefWrapper accountId={targetAccount.id} element='span'>
+      <HoverAccountWrapper accountId={targetAccount.id} element='span'>
         <Link to={`/@${acct}`} title={acct}>
           <Avatar
             src={targetAccount.avatar}
@@ -87,7 +87,7 @@ const Report: React.FC<IReport> = ({ id }) => {
             className='overflow-hidden'
           />
         </Link>
-      </HoverRefWrapper>
+      </HoverAccountWrapper>
 
       <Stack space={3} className='overflow-hidden' grow>
         <Text tag='h4' weight='bold'>
@@ -95,9 +95,9 @@ const Report: React.FC<IReport> = ({ id }) => {
             id='admin.reports.report_title'
             defaultMessage='Report on {acct}'
             values={{ acct: (
-              <HoverRefWrapper accountId={targetAccount.id} element='span'>
+              <HoverAccountWrapper accountId={targetAccount.id} element='span'>
                 <Link to={`/@${acct}`} title={acct}>@{acct}</Link>
-              </HoverRefWrapper>
+              </HoverAccountWrapper>
             ) }}
           />
         </Text>
@@ -131,7 +131,7 @@ const Report: React.FC<IReport> = ({ id }) => {
             <HStack space={1}>
               <Text theme='muted' tag='span'>&mdash;</Text>
 
-              <HoverRefWrapper accountId={account.id} element='span'>
+              <HoverAccountWrapper accountId={account.id} element='span'>
                 <Link
                   to={`/@${reporterAcct}`}
                   title={reporterAcct}
@@ -139,7 +139,7 @@ const Report: React.FC<IReport> = ({ id }) => {
                 >
                   @{reporterAcct}
                 </Link>
-              </HoverRefWrapper>
+              </HoverAccountWrapper>
             </HStack>
           )}
         </Stack>
diff --git a/packages/pl-fe/src/features/directory/components/account-card.tsx b/packages/pl-fe/src/features/directory/components/account-card.tsx
index 20074e8cd..8fdd2939b 100644
--- a/packages/pl-fe/src/features/directory/components/account-card.tsx
+++ b/packages/pl-fe/src/features/directory/components/account-card.tsx
@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import { useAccount } from 'pl-fe/api/hooks';
 import Account from 'pl-fe/components/account';
 import Badge from 'pl-fe/components/badge';
-import HoverRefWrapper from 'pl-fe/components/hover-ref-wrapper';
+import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper';
 import { ParsedContent } from 'pl-fe/components/parsed-content';
 import RelativeTimestamp from 'pl-fe/components/relative-timestamp';
 import { Avatar, Stack, Text } from 'pl-fe/components/ui';
@@ -49,7 +49,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
           className='h-32 w-full rounded-t-lg object-cover'
         />
 
-        <HoverRefWrapper key={account.id} accountId={account.id} element='span'>
+        <HoverAccountWrapper key={account.id} accountId={account.id} element='span'>
           <Link to={`/@${account.acct}`} title={account.acct}>
             <Avatar
               src={account.avatar}
@@ -58,7 +58,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
               size={64}
             />
           </Link>
-        </HoverRefWrapper>
+        </HoverAccountWrapper>
       </div>
 
       <Stack space={4} className='p-3 pt-10'>
diff --git a/packages/pl-fe/src/features/notifications/components/notification.tsx b/packages/pl-fe/src/features/notifications/components/notification.tsx
index fb62147e1..1f25cf252 100644
--- a/packages/pl-fe/src/features/notifications/components/notification.tsx
+++ b/packages/pl-fe/src/features/notifications/components/notification.tsx
@@ -5,7 +5,7 @@ import { Link, useHistory } from 'react-router-dom';
 import { mentionCompose } from 'pl-fe/actions/compose';
 import { reblog, favourite, unreblog, unfavourite } from 'pl-fe/actions/interactions';
 import { toggleStatusMediaHidden } from 'pl-fe/actions/statuses';
-import HoverRefWrapper from 'pl-fe/components/hover-ref-wrapper';
+import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper';
 import Icon from 'pl-fe/components/icon';
 import RelativeTimestamp from 'pl-fe/components/relative-timestamp';
 import { HStack, Text, Emoji } from 'pl-fe/components/ui';
@@ -31,14 +31,14 @@ const notificationForScreenReader = (intl: IntlShape, message: string, timestamp
 };
 
 const buildLink = (account: Pick<Account, 'acct' | 'display_name_html' | 'id'>): JSX.Element => (
-  <HoverRefWrapper key={account.acct} element='bdi' accountId={account.id}>
+  <HoverAccountWrapper key={account.acct} element='bdi' accountId={account.id}>
     <Link
       className='font-bold text-gray-800 hover:underline dark:text-gray-200'
       title={account.acct}
       to={`/@${account.acct}`}
       dangerouslySetInnerHTML={{ __html: account.display_name_html }}
     />
-  </HoverRefWrapper>
+  </HoverAccountWrapper>
 );
 
 const icons: Partial<Record<NotificationType | 'reply', string>> = {
diff --git a/packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx b/packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx
index 7f27c5a00..5a0f99682 100644
--- a/packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx
+++ b/packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx
@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 
 import { fetchAccountFamiliarFollowers } from 'pl-fe/actions/familiar-followers';
 import AvatarStack from 'pl-fe/components/avatar-stack';
-import HoverRefWrapper from 'pl-fe/components/hover-ref-wrapper';
+import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper';
 import { HStack, Text } from 'pl-fe/components/ui';
 import VerificationBadge from 'pl-fe/components/verification-badge';
 import { useAppDispatch, useAppSelector, useFeatures } from 'pl-fe/hooks';
@@ -45,7 +45,7 @@ const ProfileFamiliarFollowers: React.FC<IProfileFamiliarFollowers> = ({ account
   }
 
   const accounts: Array<React.ReactNode> = familiarFollowers.map(account => !!account && (
-    <HoverRefWrapper accountId={account.id} key={account.id} element='span'>
+    <HoverAccountWrapper accountId={account.id} key={account.id} element='span'>
       <Link className='mention inline-block' to={`/@${account.acct}`}>
         <HStack space={1} alignItems='center' grow>
           <Text
@@ -58,7 +58,7 @@ const ProfileFamiliarFollowers: React.FC<IProfileFamiliarFollowers> = ({ account
           {account.verified && <VerificationBadge />}
         </HStack>
       </Link>
-    </HoverRefWrapper>
+    </HoverAccountWrapper>
   )).toArray().filter(Boolean);
 
   if (familiarFollowerIds.size > 2) {