From 83992b4d120832dff6926d6a585b921ea5c95e9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 9 Oct 2024 18:03:33 +0200
Subject: [PATCH] pl-fe: Show account card on hover in notification labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 packages/pl-fe/src/components/account.tsx                | 4 ++--
 packages/pl-fe/src/components/hover-ref-wrapper.tsx      | 5 ++---
 packages/pl-fe/src/components/parsed-content.tsx         | 2 +-
 packages/pl-fe/src/components/status-mention.tsx         | 4 ++--
 packages/pl-fe/src/components/status-reply-mentions.tsx  | 2 +-
 packages/pl-fe/src/features/admin/components/report.tsx  | 6 +++---
 .../src/features/directory/components/account-card.tsx   | 2 +-
 .../features/notifications/components/notification.tsx   | 9 +++++----
 .../ui/components/profile-familiar-followers.tsx         | 2 +-
 9 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/pl-fe/src/components/account.tsx b/packages/pl-fe/src/components/account.tsx
index dc7d6cdd0..34405e360 100644
--- a/packages/pl-fe/src/components/account.tsx
+++ b/packages/pl-fe/src/components/account.tsx
@@ -249,7 +249,7 @@ const Account = ({
           {withAvatar && (
             <ProfilePopper
               condition={showAccountHoverCard}
-              wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
+              wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} element='span'>{children}</HoverRefWrapper>}
             >
               <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} inline>{children}</HoverRefWrapper>}
+              wrapper={(children) => <HoverRefWrapper accountId={account.id} element='span'>{children}</HoverRefWrapper>}
             >
               <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-ref-wrapper.tsx
index 5c2a0d5f2..9c38324b6 100644
--- a/packages/pl-fe/src/components/hover-ref-wrapper.tsx
+++ b/packages/pl-fe/src/components/hover-ref-wrapper.tsx
@@ -13,19 +13,18 @@ const showAccountHoverCard = debounce((openAccountHoverCard, ref, accountId) =>
 
 interface IHoverRefWrapper {
   accountId: string;
-  inline?: boolean;
+  element?: 'div' | 'span' | 'bdi';
   className?: string;
   children: React.ReactNode;
 }
 
 /** Makes a profile hover card appear when the wrapped element is hovered. */
-const HoverRefWrapper: React.FC<IHoverRefWrapper> = ({ accountId, children, inline = false, className }) => {
+const HoverRefWrapper: React.FC<IHoverRefWrapper> = ({ accountId, children, element: Elem = 'div', className }) => {
   const dispatch = useAppDispatch();
 
   const { openAccountHoverCard, closeAccountHoverCard } = useAccountHoverCardStore();
 
   const ref = useRef<HTMLDivElement>(null);
-  const Elem: keyof JSX.IntrinsicElements = inline ? 'span' : 'div';
 
   const handleMouseEnter = () => {
     if (!isMobile(window.innerWidth)) {
diff --git a/packages/pl-fe/src/components/parsed-content.tsx b/packages/pl-fe/src/components/parsed-content.tsx
index 30fa3a03b..698fcea22 100644
--- a/packages/pl-fe/src/components/parsed-content.tsx
+++ b/packages/pl-fe/src/components/parsed-content.tsx
@@ -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} inline>
+                  <HoverRefWrapper accountId={mention.id} element='span'>
                     <Link
                       to={`/@${mention.acct}`}
                       className='text-primary-600 hover:underline dark:text-accent-blue'
diff --git a/packages/pl-fe/src/components/status-mention.tsx b/packages/pl-fe/src/components/status-mention.tsx
index 438fa5a63..1da87e0cf 100644
--- a/packages/pl-fe/src/components/status-mention.tsx
+++ b/packages/pl-fe/src/components/status-mention.tsx
@@ -14,13 +14,13 @@ const StatusMention: React.FC<IStatusMention> = ({ accountId, fallback }) => {
   const { account } = useAccount(accountId);
 
   if (!account) return (
-    <HoverRefWrapper accountId={accountId} inline>
+    <HoverRefWrapper accountId={accountId} element='span'>
       {fallback}
     </HoverRefWrapper>
   );
 
   return (
-    <HoverRefWrapper accountId={accountId} inline>
+    <HoverRefWrapper accountId={accountId} element='span'>
       <Link
         to={`/@${account.acct}`}
         className='text-primary-600 hover:underline dark:text-accent-blue'
diff --git a/packages/pl-fe/src/components/status-reply-mentions.tsx b/packages/pl-fe/src/components/status-reply-mentions.tsx
index 8c99cdaba..a99a36624 100644
--- a/packages/pl-fe/src/components/status-reply-mentions.tsx
+++ b/packages/pl-fe/src/components/status-reply-mentions.tsx
@@ -56,7 +56,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
 
     if (hoverable) {
       return (
-        <HoverRefWrapper key={account.id} accountId={account.id} inline>
+        <HoverRefWrapper key={account.id} accountId={account.id} element='span'>
           {link}
         </HoverRefWrapper>
       );
diff --git a/packages/pl-fe/src/features/admin/components/report.tsx b/packages/pl-fe/src/features/admin/components/report.tsx
index 8c7dbf9df..56fd51e64 100644
--- a/packages/pl-fe/src/features/admin/components/report.tsx
+++ b/packages/pl-fe/src/features/admin/components/report.tsx
@@ -78,7 +78,7 @@ const Report: React.FC<IReport> = ({ id }) => {
 
   return (
     <HStack space={3} className='p-3' key={report.id}>
-      <HoverRefWrapper accountId={targetAccount.id} inline>
+      <HoverRefWrapper accountId={targetAccount.id} element='span'>
         <Link to={`/@${acct}`} title={acct}>
           <Avatar
             src={targetAccount.avatar}
@@ -95,7 +95,7 @@ const Report: React.FC<IReport> = ({ id }) => {
             id='admin.reports.report_title'
             defaultMessage='Report on {acct}'
             values={{ acct: (
-              <HoverRefWrapper accountId={targetAccount.id} inline>
+              <HoverRefWrapper accountId={targetAccount.id} element='span'>
                 <Link to={`/@${acct}`} title={acct}>@{acct}</Link>
               </HoverRefWrapper>
             ) }}
@@ -131,7 +131,7 @@ const Report: React.FC<IReport> = ({ id }) => {
             <HStack space={1}>
               <Text theme='muted' tag='span'>&mdash;</Text>
 
-              <HoverRefWrapper accountId={account.id} inline>
+              <HoverRefWrapper accountId={account.id} element='span'>
                 <Link
                   to={`/@${reporterAcct}`}
                   title={reporterAcct}
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 768e60096..20074e8cd 100644
--- a/packages/pl-fe/src/features/directory/components/account-card.tsx
+++ b/packages/pl-fe/src/features/directory/components/account-card.tsx
@@ -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} inline>
+        <HoverRefWrapper key={account.id} accountId={account.id} element='span'>
           <Link to={`/@${account.acct}`} title={account.acct}>
             <Avatar
               src={account.avatar}
diff --git a/packages/pl-fe/src/features/notifications/components/notification.tsx b/packages/pl-fe/src/features/notifications/components/notification.tsx
index a5312b537..fb62147e1 100644
--- a/packages/pl-fe/src/features/notifications/components/notification.tsx
+++ b/packages/pl-fe/src/features/notifications/components/notification.tsx
@@ -5,6 +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 Icon from 'pl-fe/components/icon';
 import RelativeTimestamp from 'pl-fe/components/relative-timestamp';
 import { HStack, Text, Emoji } from 'pl-fe/components/ui';
@@ -29,15 +30,15 @@ const notificationForScreenReader = (intl: IntlShape, message: string, timestamp
   return output.join(', ');
 };
 
-const buildLink = (account: Pick<Account, 'acct' | 'display_name_html'>): JSX.Element => (
-  <bdi key={account.acct}>
+const buildLink = (account: Pick<Account, 'acct' | 'display_name_html' | 'id'>): JSX.Element => (
+  <HoverRefWrapper 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 }}
     />
-  </bdi>
+  </HoverRefWrapper>
 );
 
 const icons: Partial<Record<NotificationType | 'reply', string>> = {
@@ -145,7 +146,7 @@ const messages: Record<NotificationType | 'reply', MessageDescriptor> = defineMe
 const buildMessage = (
   intl: IntlShape,
   type: NotificationType | 'reply',
-  accounts: Array<Pick<Account, 'acct' | 'display_name_html'>>,
+  accounts: Array<Pick<Account, 'acct' | 'display_name_html' | 'id'>>,
   targetName: string,
   instanceTitle: string,
 ): React.ReactNode => {
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 64ca7638e..7f27c5a00 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
@@ -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} inline>
+    <HoverRefWrapper accountId={account.id} key={account.id} element='span'>
       <Link className='mention inline-block' to={`/@${account.acct}`}>
         <HStack space={1} alignItems='center' grow>
           <Text