Merge branch 'bluesky-social:main' into zh

src/locale/i18n.ts

@@ -1,6 +1,10 @@
-import '@formatjs/intl-locale/polyfill'
-import '@formatjs/intl-pluralrules/polyfill-force' // Don't remove -force because detection is very slow
+// Don't remove -force from these because detection is VERY slow on low-end Android.
+// https://github.com/formatjs/formatjs/issues/4463#issuecomment-2176070577
+import '@formatjs/intl-locale/polyfill-force'
+import '@formatjs/intl-pluralrules/polyfill-force'
+import '@formatjs/intl-numberformat/polyfill-force'
 import '@formatjs/intl-pluralrules/locale-data/en'
+import '@formatjs/intl-numberformat/locale-data/en'
 
 import {useEffect} from 'react'
 import {i18n} from '@lingui/core'

src/screens/Profile/Header/index.tsx

@@ -6,11 +6,11 @@ import {
   ModerationOpts,
   RichText as RichTextAPI,
 } from '@atproto/api'
-import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
-import {usePalette} from 'lib/hooks/usePalette'
 
-import {ProfileHeaderStandard} from './ProfileHeaderStandard'
+import {usePalette} from 'lib/hooks/usePalette'
+import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
 import {ProfileHeaderLabeler} from './ProfileHeaderLabeler'
+import {ProfileHeaderStandard} from './ProfileHeaderStandard'
 
 let ProfileHeaderLoading = (_props: {}): React.ReactNode => {
   const pal = usePalette('default')
@@ -19,11 +19,11 @@ let ProfileHeaderLoading = (_props: {}): React.ReactNode => {
       <LoadingPlaceholder width="100%" height={150} style={{borderRadius: 0}} />
       <View
         style={[pal.view, {borderColor: pal.colors.background}, styles.avi]}>
-        <LoadingPlaceholder width={80} height={80} style={styles.br40} />
+        <LoadingPlaceholder width={90} height={90} style={styles.br45} />
       </View>
       <View style={styles.content}>
         <View style={[styles.buttonsLine]}>
-          <LoadingPlaceholder width={167} height={31} style={styles.br50} />
+          <LoadingPlaceholder width={167} height={36} style={styles.br50} />
         </View>
       </View>
     </View>
@@ -58,13 +58,13 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: 110,
     left: 10,
-    width: 84,
-    height: 84,
-    borderRadius: 42,
+    width: 94,
+    height: 94,
+    borderRadius: 47,
     borderWidth: 2,
   },
   content: {
-    paddingTop: 8,
+    paddingTop: 12,
     paddingHorizontal: 14,
     paddingBottom: 4,
   },
@@ -73,6 +73,6 @@ const styles = StyleSheet.create({
     marginLeft: 'auto',
     marginBottom: 12,
   },
-  br40: {borderRadius: 40},
+  br45: {borderRadius: 45},
   br50: {borderRadius: 50},
 })

src/view/com/util/post-ctrls/PostCtrls.tsx

@@ -39,6 +39,7 @@ import {
 } from '#/components/icons/Heart2'
 import * as Prompt from '#/components/Prompt'
 import {PostDropdownBtn} from '../forms/PostDropdownBtn'
+import {formatCount} from '../numeric/format'
 import {Text} from '../text/Text'
 import {RepostButton} from './RepostButton'
 
@@ -226,7 +227,7 @@ let PostCtrls = ({
                 big ? a.text_md : {fontSize: 15},
                 a.user_select_none,
               ]}>
-              {post.replyCount}
+              {formatCount(post.replyCount)}
             </Text>
           ) : undefined}
         </Pressable>
@@ -278,7 +279,7 @@ let PostCtrls = ({
                     : defaultCtrlColor,
                 ],
               ]}>
-              {post.likeCount}
+              {formatCount(post.likeCount)}
             </Text>
           ) : undefined}
         </Pressable>

src/view/com/util/post-ctrls/RepostButton.tsx

@@ -12,6 +12,7 @@ import * as Dialog from '#/components/Dialog'
 import {CloseQuote_Stroke2_Corner1_Rounded as Quote} from '#/components/icons/Quote'
 import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
 import {Text} from '#/components/Typography'
+import {formatCount} from '../numeric/format'
 
 interface Props {
   isReposted: boolean
@@ -76,7 +77,7 @@ let RepostButton = ({
               big ? a.text_md : {fontSize: 15},
               isReposted && a.font_bold,
             ]}>
-            {repostCount}
+            {formatCount(repostCount)}
           </Text>
         ) : undefined}
       </Button>

src/view/com/util/post-ctrls/RepostButton.web.tsx

@@ -12,6 +12,7 @@ import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repos
 import * as Menu from '#/components/Menu'
 import {Text} from '#/components/Typography'
 import {EventStopper} from '../EventStopper'
+import {formatCount} from '../numeric/format'
 
 interface Props {
   isReposted: boolean
@@ -115,20 +116,22 @@ const RepostInner = ({
   color: {color: string}
   repostCount?: number
   big?: boolean
-}) => (
-  <View style={[a.flex_row, a.align_center, a.gap_xs, {padding: 5}]}>
-    <Repost style={color} width={big ? 22 : 18} />
-    {typeof repostCount !== 'undefined' && repostCount > 0 ? (
-      <Text
-        testID="repostCount"
-        style={[
-          color,
-          big ? a.text_md : {fontSize: 15},
-          isReposted && [a.font_bold],
-          a.user_select_none,
-        ]}>
-        {repostCount}
-      </Text>
-    ) : undefined}
-  </View>
-)
+}) => {
+  return (
+    <View style={[a.flex_row, a.align_center, a.gap_xs, {padding: 5}]}>
+      <Repost style={color} width={big ? 22 : 18} />
+      {typeof repostCount !== 'undefined' && repostCount > 0 ? (
+        <Text
+          testID="repostCount"
+          style={[
+            color,
+            big ? a.text_md : {fontSize: 15},
+            isReposted && [a.font_bold],
+            a.user_select_none,
+          ]}>
+          {formatCount(repostCount)}
+        </Text>
+      ) : undefined}
+    </View>
+  )
+}