diff --git a/src/components/ui/FormattedNumber.tsx b/src/components/ui/FormattedNumber.tsx index e90941c..d00227e 100644 --- a/src/components/ui/FormattedNumber.tsx +++ b/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 ( - + + {prefix} {compactValue} {unit} ); diff --git a/src/i18n/lang/en.ts b/src/i18n/lang/en.ts index 8ce2425..8d8a635 100644 --- a/src/i18n/lang/en.ts +++ b/src/i18n/lang/en.ts @@ -19,6 +19,7 @@ export const en = { reposts: 'reposts', likes: 'likes', settings: 'settings', + arrived_on: 'Arrived on #', }, settings: { developerMode: { diff --git a/src/i18n/lang/fr.ts b/src/i18n/lang/fr.ts index b2c6449..596fffc 100644 --- a/src/i18n/lang/fr.ts +++ b/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: { diff --git a/src/lib/bluesky/hooks/useProfile.ts b/src/lib/bluesky/hooks/useProfile.ts index b84cbb3..beaf671 100644 --- a/src/lib/bluesky/hooks/useProfile.ts +++ b/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, }); diff --git a/src/routes/profile/$handle/index.tsx b/src/routes/profile/$handle/index.tsx index 3508ed4..17a8188 100644 --- a/src/routes/profile/$handle/index.tsx +++ b/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() { {} {!experiments.zenMode && ( -
- - - +
+
+ + + +
+ {profile?.pos_bsky && ( + + + + )}
)}