bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pl-fe: Show account card on hover in notification labels

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-10-09 18:03:33 +02:00
parent 34b52e5f9b
commit 83992b4d12
9 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/pl-fe/src/components/account.tsx
View file

@ -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>

5
packages/pl-fe/src/components/hover-ref-wrapper.tsx
View file

@ -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)) {

2
packages/pl-fe/src/components/parsed-content.tsx
View file

@ -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'

4
packages/pl-fe/src/components/status-mention.tsx
View file

@ -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'

2
packages/pl-fe/src/components/status-reply-mentions.tsx
View file

@ -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>
);

6
packages/pl-fe/src/features/admin/components/report.tsx
View file

@ -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}

2
packages/pl-fe/src/features/directory/components/account-card.tsx
View file

@ -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}

9
packages/pl-fe/src/features/notifications/components/notification.tsx
View file

@ -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 => {

2
packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx
View file

@ -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