Merge branch 'streak-flame' into 'main'

Streak: display flame icon

See merge request soapbox-pub/soapbox!3330

package.json

@@ -67,7 +67,7 @@
     "@sentry/types": "^8.34.0",
     "@soapbox/weblock": "npm:@jsr/soapbox__weblock",
     "@std/semver": "npm:@jsr/std__semver",
-    "@tabler/icons": "^3.19.0",
+    "@tabler/icons": "^3.29.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",

src/features/ui/components/profile-stats.tsx

@@ -1,8 +1,11 @@
+import flameIcon from '@tabler/icons/filled/flame.svg';
 import { useIntl, defineMessages } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 
 import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
 import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 import type { Account } from 'soapbox/schemas/index.ts';
@@ -51,14 +54,24 @@ const ProfileStats: React.FC<IProfileStats> = ({ account, onClickHandler }) => {
       </NavLink>
 
       {account.ditto.streak.days > 0 && (
-        <HStack alignItems='center' space={1}>
-          <Text theme='primary' weight='bold' size='sm'>
-            {shortNumberFormat(account.ditto.streak.days)}
-          </Text>
-          <Text weight='bold' size='sm'>
-            {intl.formatMessage(messages.streak)}
-          </Text>
-        </HStack>
+        <Tooltip
+          text={new Date(account.ditto.streak.start!).toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+          })}
+        >
+          <HStack alignItems='center'>
+            <Text theme='primary' weight='bold' size='sm'>
+              <span role='img' aria-label={intl.formatMessage(messages.streak)}>
+                <Icon src={flameIcon} className='size-4' />
+              </span>
+            </Text>
+            <Text weight='bold' size='sm'>
+              <>{shortNumberFormat(account.ditto.streak.days)}</>
+            </Text>
+          </HStack>
+        </Tooltip>
       )}
     </HStack>
   );

yarn.lock

@@ -2473,10 +2473,10 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
-"@tabler/icons@^3.19.0":
-  version "3.19.0"
-  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-3.19.0.tgz#5998b0557ef34572e003f2d75ac95e7c04f88c81"
-  integrity sha512-A4WEWqpdbTfnpFEtwXqwAe9qf9sp1yRPvzppqAuwcoF0q5YInqB+JkJtSFToCyBpPVeLxJUxxkapLvt2qQgnag==
+"@tabler/icons@^3.29.0":
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-3.29.0.tgz#f78d0bb098641088ccfe3e727fc296502eb8a930"
+  integrity sha512-VWNINymdmhay3MDvWVREmRwuWLSrX3YiInKvs5L4AHRF4bAfJabLlEReE0BW/XFsBt22ff8/C8Eam/LXlF97mA==
 
 "@tailwindcss/aspect-ratio@^0.4.2":
   version "0.4.2"