moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'update-hover-card' into 'main' 

Add streak and a light gray border to profile hover cards

See merge request soapbox-pub/soapbox!3331
This commit is contained in:
Alex Gleason 2025-02-12 01:57:53 +00:00
parent 0a28398256 929c9f3f5f
commit eca2978fc2
1 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/profile-hover-card.tsx
View File

@ -1,8 +1,9 @@
import { useFloating } from '@floating-ui/react'; import { useFloating } from '@floating-ui/react';
import flameIcon from '@tabler/icons/filled/flame.svg';
import calendarIcon from '@tabler/icons/outline/calendar.svg'; import calendarIcon from '@tabler/icons/outline/calendar.svg';
import clsx from 'clsx'; import clsx from 'clsx';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useIntl, FormattedMessage } from 'react-intl'; import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
import { Link, useHistory } from 'react-router-dom'; import { Link, useHistory } from 'react-router-dom';
import { fetchRelationships } from 'soapbox/actions/accounts.ts'; import { fetchRelationships } from 'soapbox/actions/accounts.ts';
@ -34,6 +35,10 @@ import { dateFormatOptions } from './relative-timestamp.tsx';
import type { Account, PatronUser } from 'soapbox/schemas/index.ts'; import type { Account, PatronUser } from 'soapbox/schemas/index.ts';
import type { AppDispatch } from 'soapbox/store.ts'; import type { AppDispatch } from 'soapbox/store.ts';
const messages = defineMessages({
streak: { id: 'account.streak', defaultMessage: 'Day Streak' },
});
const getBadges = ( const getBadges = (
account?: Pick<Account, 'admin' | 'moderator'>, account?: Pick<Account, 'admin' | 'moderator'>,
patronUser?: Pick<PatronUser, 'is_patron'>, patronUser?: Pick<PatronUser, 'is_patron'>,
@ -123,7 +128,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
onMouseEnter={handleMouseEnter(dispatch)} onMouseEnter={handleMouseEnter(dispatch)}
onMouseLeave={handleMouseLeave(dispatch)} onMouseLeave={handleMouseLeave(dispatch)}
> >
<Card className='relative isolate overflow-hidden' rounded slim> <Card className='relative isolate overflow-hidden border border-gray-200' rounded slim>
<CardBody className='relative'> <CardBody className='relative'>
<div className='relative h-24 overflow-hidden bg-gray-200'> <div className='relative h-24 overflow-hidden bg-gray-200'>
<StillImage src={account.header} /> <StillImage src={account.header} />
@ -191,6 +196,19 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
</HStack> </HStack>
</Link> </Link>
)} )}
{account.ditto?.streak?.days > 0 && (
<HStack alignItems='center'>
<Text theme='primary'>
<span role='img' aria-label={intl.formatMessage(messages.streak)}>
<Icon src={flameIcon} className='size-4' />
</span>
</Text>
<Text weight='bold' size='sm' className='text-black'>
{shortNumberFormat(account.ditto.streak.days)}
</Text>
</HStack>
)}
</HStack> </HStack>
{account.local ? ( {account.local ? (