🎉 NEW: arrived on

src/components/ui/FormattedNumber.tsx

@@ -1,11 +1,22 @@
-export const FormattedNumber = ({ value, unit }: { value: number | undefined | null; unit: string }) => {
+export const FormattedNumber = ({
+  value,
+  unit,
+  notation = 'compact',
+  prefix = '',
+}: {
+  value: number | undefined | null;
+  unit?: string;
+  notation?: 'compact' | 'standard';
+  prefix?: string;
+}) => {
   if (value === undefined || value === null) return null;
 
-  const formattedValue = new Intl.NumberFormat('en-US').format(value);
-  const compactValue = new Intl.NumberFormat('en-US', { notation: 'compact' }).format(value);
+  const formattedValue = new Intl.NumberFormat(navigator.languages ?? 'en-US').format(value);
+  const compactValue = new Intl.NumberFormat(navigator.languages ?? 'en-US', { notation }).format(value);
 
   return (
-    <span title={`${formattedValue} ${unit}`}>
+    <span title={`${prefix}${formattedValue} ${unit}`}>
+      {prefix}
       {compactValue} {unit}
     </span>
   );

src/i18n/lang/en.ts

@@ -19,6 +19,7 @@ export const en = {
     reposts: 'reposts',
     likes: 'likes',
     settings: 'settings',
+    arrived_on: 'Arrived on #',
   },
   settings: {
     developerMode: {

src/i18n/lang/fr.ts

@@ -19,6 +19,7 @@ export const fr = {
     reposts: 'republications',
     likes: 'aimés',
     settings: 'paramètres',
+    arrived_on: 'Arrivé #',
   },
   settings: {
     developerMode: {

src/lib/bluesky/hooks/useProfile.ts

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { useBlueskyStore } from '../store';
 
-export function useProfile({ handle }: { handle?: string }) {
+export function useProfile({ handle, forProfilePage }: { handle?: string; forProfilePage?: boolean }) {
   const { agent } = useBlueskyStore();
 
   return useQuery({
@@ -10,7 +10,17 @@ export function useProfile({ handle }: { handle?: string }) {
       if (!agent) throw new Error('Not authenticated');
       if (!handle) throw new Error('No handle provided');
       const response = await agent.api.app.bsky.actor.getProfile({ actor: handle });
-      return response.data;
+
+      let pos_bsky = undefined;
+      if (forProfilePage) {
+        try {
+          const res = await fetch(`https://skyzoo.blue/stats/plc/${response.data.did}`);
+          const skyzoo_data = (await res.json()) as any;
+          pos_bsky = skyzoo_data.pos_bsky as number;
+        } catch (error) {}
+      }
+
+      return { ...response.data, pos_bsky };
     },
     enabled: !!agent && !!handle,
   });

src/routes/profile/$handle/index.tsx

@@ -104,7 +104,7 @@ function Media() {
 
 function Profile() {
   const { handle } = Route.useParams();
-  const { data: profile, isLoading } = useProfile({ handle });
+  const { data: profile, isLoading } = useProfile({ handle, forProfilePage: true });
   const { experiments } = useSettings();
   const { t } = useTranslation(['app', 'profile']);
 
@@ -133,10 +133,17 @@ function Profile() {
             {<FollowButton handle={handle} following={!!profile.viewer?.following} />}
           </div>
           {!experiments.zenMode && (
-            <div className="flex gap-2">
-              <FormattedNumber value={profile?.followersCount} unit={t('followers')} />
-              <FormattedNumber value={profile?.followsCount} unit={t('following')} />
-              <FormattedNumber value={profile?.postsCount} unit={t('posts')} />
+            <div className="flex justify-between">
+              <div className="flex gap-2">
+                <FormattedNumber value={profile?.followersCount} unit={t('followers')} />
+                <FormattedNumber value={profile?.followsCount} unit={t('following')} />
+                <FormattedNumber value={profile?.postsCount} unit={t('posts')} />
+              </div>
+              {profile?.pos_bsky && (
+                <a href={'https://skyzoo.blue/stats/' + handle} target="_blank" className="underline">
+                  <FormattedNumber value={profile?.pos_bsky} notation="standard" prefix={t('arrived_on')} />
+                </a>
+              )}
             </div>
           )}
           <p>