Support Mastodon trending links

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/components/hashtag.tsx

@@ -9,6 +9,19 @@ import { HStack, Stack, Text } from './ui';
 
 import type { Tag } from 'pl-api';
 
+const accountsCountRenderer = (count: number) => !!count && (
+  <Text theme='muted' size='sm'>
+    <FormattedMessage
+      id='trends.count_by_accounts'
+      defaultMessage='{count} {rawCount, plural, one {person} other {people}} talking'
+      values={{
+        rawCount: count,
+        count: <strong>{shortNumberFormat(count)}</strong>,
+      }}
+    />
+  </Text>
+);
+
 interface IHashtag {
   hashtag: Tag;
 }
@@ -23,18 +36,7 @@ const Hashtag: React.FC<IHashtag> = ({ hashtag }) => {
           <Text tag='span' size='sm' weight='semibold'>#{hashtag.name}</Text>
         </Link>
 
-        {Boolean(count) && (
-          <Text theme='muted' size='sm'>
-            <FormattedMessage
-              id='trends.count_by_accounts'
-              defaultMessage='{count} {rawCount, plural, one {person} other {people}} talking'
-              values={{
-                rawCount: count,
-                count: <strong>{shortNumberFormat(count)}</strong>,
-              }}
-            />
-          </Text>
-        )}
+        {accountsCountRenderer(count)}
       </Stack>
 
       {hashtag.history && (
@@ -52,4 +54,4 @@ const Hashtag: React.FC<IHashtag> = ({ hashtag }) => {
   );
 };
 
-export { Hashtag as default };
+export { Hashtag as default, accountsCountRenderer };

src/components/preview-card.tsx

@@ -159,6 +159,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
         height: horizontal ? height : undefined,
       }}
       className='status-card__image-image'
+      title={card.image_description || undefined}
     />
   );
 

src/components/trending-link.tsx

@@ -0,0 +1,63 @@
+import { TrendsLink } from 'pl-api';
+import React from 'react';
+
+import { getTextDirection } from 'soapbox/utils/rtl';
+
+import Blurhash from './blurhash';
+import { accountsCountRenderer } from './hashtag';
+import { HStack, Icon, Stack, Text } from './ui';
+
+interface ITrendingLink {
+  trendingLink: TrendsLink;
+}
+
+const TrendingLink: React.FC<ITrendingLink> = ({ trendingLink }) => {
+  const count = Number(trendingLink.history?.[0]?.accounts);
+
+  const direction = getTextDirection(trendingLink.title + trendingLink.description);
+
+  let media;
+
+  if (trendingLink.image) {
+    media = (
+      <div className='relative h-32 w-32 overflow-hidden rounded-md'>
+        {trendingLink.blurhash && (
+          <Blurhash
+            className='absolute inset-0 z-0 h-full w-full'
+            hash={trendingLink.blurhash}
+          />
+        )}
+        <img className='relative h-full w-full object-cover' src={trendingLink.image} alt={trendingLink.image_description || undefined} />
+      </div>
+    );
+  }
+
+  return (
+    <a
+      className='flex cursor-pointer gap-4 overflow-hidden rounded-lg border border-solid border-gray-200 p-4 text-sm text-gray-800 no-underline hover:bg-gray-100 hover:no-underline dark:border-gray-800 dark:text-gray-200 dark:hover:bg-primary-800/30'
+      href={trendingLink.url}
+      target='_blank'
+      rel='noopener'
+    >
+      {media}
+      <Stack space={2} className='flex-1 overflow-hidden'>
+        <Text className='line-clamp-2' weight='bold' direction={direction}>{trendingLink.title}</Text>
+        {trendingLink.description && <Text truncate direction={direction}>{trendingLink.description}</Text>}
+        <HStack alignItems='center' wrap className='divide-x-dot text-gray-700 dark:text-gray-600'>
+          <HStack space={1} alignItems='center'>
+            <Text tag='span' theme='muted'>
+              <Icon src={require('@tabler/icons/outline/link.svg')} />
+            </Text>
+            <Text tag='span' theme='muted' size='sm' direction={direction}>
+              {trendingLink.provider_name}
+            </Text>
+          </HStack>
+
+          {!!count && accountsCountRenderer(count)}
+        </HStack>
+      </Stack>
+    </a>
+  );
+};
+
+export default TrendingLink;