pl-fe: Fix account hover card

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
2024-10-01 18:20:49 +02:00
parent 04281890e6
commit d0ca585558
15 changed files with 46 additions and 38 deletions
--- 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 { showProfileHoverCard } from './hover-ref-wrapper';
+import { showAccountHoverCard } from './hover-ref-wrapper';
 import { dateFormatOptions } from './relative-timestamp';
 import Scrobble from './scrobble';
 import { Card, CardBody, HStack, Icon, Stack, Text } from './ui';
@ -33,12 +33,12 @@ const getBadges = (
  return badges;
 };

-interface IProfileHoverCard {
+interface IAccountHoverCard {
  visible?: boolean;
 }

 /** Popup profile preview that appears when hovering avatars and display names. */
-const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }) => {
+const AccountHoverCard: React.FC<IAccountHoverCard> = ({ visible = true }) => {
  const dispatch = useAppDispatch();
  const history = useHistory();
  const intl = useIntl();
@ -55,8 +55,8 @@ const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }) => {

  useEffect(() => {
    const unlisten = history.listen(() => {
-      showProfileHoverCard.cancel();
-      closeAccountHoverCard();
+      showAccountHoverCard.cancel();
+      closeAccountHoverCard(true);
    });

    return () => {
@ -88,6 +88,14 @@ const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }) => {
    },
  });

+  const handleMouseEnter = () => {
+    updateAccountHoverCard();
+  };
+
+  const handleMouseLeave = () => {
+    closeAccountHoverCard(true);
+  };
+
  if (!account) return null;
  const accountBio = { __html: account.note_emojified };
  const memberSinceDate = intl.formatDate(account.created_at, { month: 'long', year: 'numeric' });
@ -107,8 +115,8 @@ const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }) => {
        left: x ?? 0,
        ...styles,
      }}
-      onMouseEnter={() => updateAccountHoverCard()}
-      onMouseLeave={() => closeAccountHoverCard()}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
    >
      <Card variant='rounded' className='relative isolate overflow-hidden black:rounded-xl black:border black:border-gray-800'>
        <CardBody>
@ -164,4 +172,4 @@ const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }) => {
  );
 };

-export { ProfileHoverCard as default };
+export { AccountHoverCard as default };
--- a/packages/pl-fe/src/components/account.tsx
+++ b/packages/pl-fe/src/components/account.tsx
@ -81,7 +81,7 @@ interface IAccount {
  hideActions?: boolean;
  id?: string;
  onActionClick?: (account: any) => void;
-  showProfileHoverCard?: boolean;
+  showAccountHoverCard?: boolean;
  timestamp?: string;
  timestampUrl?: string;
  futureTimestamp?: boolean;
@ -110,7 +110,7 @@ const Account = ({
  hidden = false,
  hideActions = false,
  onActionClick,
-  showProfileHoverCard = true,
+  showAccountHoverCard = true,
  timestamp,
  timestampUrl,
  futureTimestamp = false,
@ -247,7 +247,7 @@ const Account = ({
        <HStack alignItems={withAccountNote || note ? 'top' : 'center'} space={3} className='overflow-hidden'>
          {withAvatar && (
            <ProfilePopper
-              condition={showProfileHoverCard}
+              condition={showAccountHoverCard}
              wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
            >
              <LinkEl className='rounded-full' {...linkProps}>
@ -265,7 +265,7 @@ const Account = ({

          <div className='grow overflow-hidden'>
            <ProfilePopper
-              condition={showProfileHoverCard}
+              condition={showAccountHoverCard}
              wrapper={(children) => <HoverRefWrapper accountId={account.id} inline>{children}</HoverRefWrapper>}
            >
              <LinkEl {...linkProps}>
--- a/packages/pl-fe/src/components/hover-ref-wrapper.tsx
+++ b/packages/pl-fe/src/components/hover-ref-wrapper.tsx
@ -7,7 +7,7 @@ import { useAppDispatch } from 'pl-fe/hooks';
 import { isMobile } from 'pl-fe/is-mobile';
 import { useAccountHoverCardStore } from 'pl-fe/stores';

-const showProfileHoverCard = debounce((openAccountHoverCard, ref, accountId) => {
+const showAccountHoverCard = debounce((openAccountHoverCard, ref, accountId) => {
  openAccountHoverCard(ref, accountId);
 }, 600);

@ -30,17 +30,17 @@ const HoverRefWrapper: React.FC<IHoverRefWrapper> = ({ accountId, children, inli
  const handleMouseEnter = () => {
    if (!isMobile(window.innerWidth)) {
      dispatch(fetchAccount(accountId));
-      showProfileHoverCard(openAccountHoverCard, ref, accountId);
+      showAccountHoverCard(openAccountHoverCard, ref, accountId);
    }
  };

  const handleMouseLeave = () => {
-    showProfileHoverCard.cancel();
+    showAccountHoverCard.cancel();
    setTimeout(() => closeAccountHoverCard(), 300);
  };

  const handleClick = () => {
-    showProfileHoverCard.cancel();
+    showAccountHoverCard.cancel();
    closeAccountHoverCard(true);
  };

@ -57,4 +57,4 @@ const HoverRefWrapper: React.FC<IHoverRefWrapper> = ({ accountId, children, inli
  );
 };

-export { HoverRefWrapper as default, showProfileHoverCard };
+export { HoverRefWrapper as default, showAccountHoverCard };
--- a/packages/pl-fe/src/components/quoted-status.tsx
+++ b/packages/pl-fe/src/components/quoted-status.tsx
@ -88,7 +88,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
          id={account.id}
          timestamp={status.created_at}
          withRelationship={false}
-          showProfileHoverCard={!compose}
+          showAccountHoverCard={!compose}
          withLinkToProfile={!compose}
        />

--- a/packages/pl-fe/src/components/sidebar-menu.tsx
+++ b/packages/pl-fe/src/components/sidebar-menu.tsx
@ -132,7 +132,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
  const renderAccount = (account: AccountEntity) => (
    <a href='#' className='block py-2' onClick={handleSwitchAccount(account)} key={account.id}>
      <div className='pointer-events-none'>
-        <Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
+        <Account account={account} showAccountHoverCard={false} withRelationship={false} withLinkToProfile={false} />
      </div>
    </a>
  );
@ -197,7 +197,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
            {account ? (
              <Stack space={4}>
                <Link to={`/@${account.acct}`} onClick={closeSidebar}>
-                  <Account account={account} showProfileHoverCard={false} withLinkToProfile={false} />
+                  <Account account={account} showAccountHoverCard={false} withLinkToProfile={false} />
                </Link>

                <ProfileStats
--- a/packages/pl-fe/src/components/status-hover-card.tsx
+++ b/packages/pl-fe/src/components/status-hover-card.tsx
@ -1,6 +1,6 @@
 import { shift, useFloating, useTransitionStyles } from '@floating-ui/react';
 import clsx from 'clsx';
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';

@ -35,7 +35,7 @@ const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true }) => {
  useEffect(() => {
    const unlisten = history.listen(() => {
      showStatusHoverCard.cancel();
-      closeStatusHoverCard();
+      closeStatusHoverCard(true);
    });

    return () => {
@ -68,13 +68,13 @@ const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true }) => {
    },
  });

-  const handleMouseEnter = useCallback((): React.MouseEventHandler => () => {
+  const handleMouseEnter = () => {
    updateStatusHoverCard();
-  }, []);
+  };

-  const handleMouseLeave = useCallback((): React.MouseEventHandler => () => {
+  const handleMouseLeave = () => {
    closeStatusHoverCard(true);
-  }, []);
+  };

  if (!statusId) return null;

@ -103,8 +103,8 @@ const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true }) => {
        left: x ?? 0,
        ...styles,
      }}
-      onMouseEnter={handleMouseEnter()}
-      onMouseLeave={handleMouseLeave()}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
    >
      <Card className='relative overflow-hidden black:rounded-xl black:border black:border-gray-800'>
        <CardBody>
--- a/packages/pl-fe/src/components/status.tsx
+++ b/packages/pl-fe/src/components/status.tsx
@ -403,7 +403,7 @@ const Status: React.FC<IStatus> = (props) => {
            action={accountAction}
            hideActions={!accountAction}
            showEdit={!!actualStatus.edited_at}
-            showProfileHoverCard={hoverable}
+            showAccountHoverCard={hoverable}
            withLinkToProfile={hoverable}
            approvalStatus={actualStatus.approval_status}
            avatarSize={avatarSize}
--- a/packages/pl-fe/src/features/compose/components/autosuggest-account.tsx
+++ b/packages/pl-fe/src/features/compose/components/autosuggest-account.tsx
@ -13,7 +13,7 @@ const AutosuggestAccount: React.FC<IAutosuggestAccount> = ({ id }) => {

  return (
    <div className='snap-start snap-always'>
-      <Account account={account} hideActions showProfileHoverCard={false} />
+      <Account account={account} hideActions showAccountHoverCard={false} />
    </div>
  );

--- a/packages/pl-fe/src/features/compose/components/reply-indicator.tsx
+++ b/packages/pl-fe/src/features/compose/components/reply-indicator.tsx
@ -41,7 +41,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ className, status, hideActi
        {...actions}
        id={status.account.id}
        timestamp={status.created_at}
-        showProfileHoverCard={false}
+        showAccountHoverCard={false}
        withLinkToProfile={false}
        hideActions={hideActions}
      />
--- a/packages/pl-fe/src/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/packages/pl-fe/src/features/onboarding/steps/suggested-accounts-step.tsx
@ -28,7 +28,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
            <div key={suggestion.account.id} className='py-2'>
              <AccountContainer
                id={suggestion.account.id}
-                showProfileHoverCard={false}
+                showAccountHoverCard={false}
                withLinkToProfile={false}
              />
            </div>
--- a/packages/pl-fe/src/features/ui/components/modals/account-moderation-modal/index.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/account-moderation-modal/index.tsx
@ -106,7 +106,7 @@ const AccountModerationModal: React.FC<AccountModerationModalProps & BaseModalPr
        <OutlineBox>
          <Account
            account={account}
-            showProfileHoverCard={false}
+            showAccountHoverCard={false}
            withLinkToProfile={false}
            hideActions
          />
--- a/packages/pl-fe/src/features/ui/components/modals/report-modal/index.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/report-modal/index.tsx
@ -49,7 +49,7 @@ const SelectedStatus = ({ statusId }: { statusId: string }) => {
    <Stack space={2} className='rounded-lg bg-gray-100 p-4 dark:bg-gray-800'>
      <AccountContainer
        id={status.account as any}
-        showProfileHoverCard={false}
+        showAccountHoverCard={false}
        withLinkToProfile={false}
        timestamp={status.created_at}
        hideActions
--- a/packages/pl-fe/src/features/ui/components/profile-dropdown.tsx
+++ b/packages/pl-fe/src/features/ui/components/profile-dropdown.tsx
@ -57,7 +57,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
  }, 2000);

  const renderAccount = (account: AccountEntity) => (
-    <Account account={account} showProfileHoverCard={false} withLinkToProfile={false} hideActions />
+    <Account account={account} showAccountHoverCard={false} withLinkToProfile={false} hideActions />
  );

  const ProfileDropdownMenu = useMemo(() => {
--- a/packages/pl-fe/src/features/ui/index.tsx
+++ b/packages/pl-fe/src/features/ui/index.tsx
@ -89,7 +89,7 @@ import {
  FollowRecommendations,
  Directory,
  SidebarMenu,
-  ProfileHoverCard,
+  AccountHoverCard,
  StatusHoverCard,
  Share,
  NewStatus,
@ -485,7 +485,7 @@ const UI: React.FC<IUI> = ({ children }) => {
          <ThumbNavigation />

          <Suspense>
-            <ProfileHoverCard />
+            <AccountHoverCard />
          </Suspense>

          <Suspense>
--- a/packages/pl-fe/src/features/ui/util/async-components.ts
+++ b/packages/pl-fe/src/features/ui/util/async-components.ts
@ -122,7 +122,7 @@ export const LightningAddress = lazy(() => import('pl-fe/features/crypto-donate/
 export const MfaForm = lazy(() => import('pl-fe/features/security/mfa-form'));
 export const ModalRoot = lazy(() => import('pl-fe/features/ui/components/modal-root'));
 export const OnboardingWizard = lazy(() => import('pl-fe/features/onboarding/onboarding-wizard'));
-export const ProfileHoverCard = lazy(() => import('pl-fe/components/profile-hover-card'));
+export const AccountHoverCard = lazy(() => import('pl-fe/components/account-hover-card'));
 export const SidebarMenu = lazy(() => import('pl-fe/components/sidebar-menu'));
 export const StatusHoverCard = lazy(() => import('pl-fe/components/status-hover-card'));
 export const Video = lazy(() => import('pl-fe/features/video'));