Add canonical OP thread numbering (#11184)

Co-authored-by: DS Boyce <260543580+ds-boyce@users.noreply.github.com>
2026-08-05 12:20:43 -05:00
parent 8cb6c7babe
commit b79908ecea
8 changed files with 164 additions and 17 deletions
@@ -0,0 +1,86 @@
+import {Text, View} from 'react-native'
+import {type AppBskyUnspeccedDefs} from '@atproto/api'
+import {Trans, useLingui} from '@lingui/react/macro'
+
+import {atoms as a, native, platform, useTheme} from '#/alf'
+import {useAnalytics} from '#/analytics'
+
+export function hasThreadItemPostNumber(
+  value: AppBskyUnspeccedDefs.ThreadItemPost,
+) {
+  const index = value.opThreadPostIndex
+  const count = value.opThreadPostCount
+
+  return (
+    index !== undefined &&
+    count !== undefined &&
+    index >= 1 &&
+    count >= 1 &&
+    index <= count
+  )
+}
+
+export function ThreadItemPostNumber({
+  value,
+  inline = true,
+}: {
+  value: AppBskyUnspeccedDefs.ThreadItemPost
+  inline?: boolean
+}) {
+  const ax = useAnalytics()
+  const t = useTheme()
+  const {t: l} = useLingui()
+  const index = value.opThreadPostIndex
+  const count = value.opThreadPostCount
+
+  const isEnabled = ax.features.enabled(
+    ax.features.CanonicalPostNumberingEnable,
+  )
+
+  if (!isEnabled || !hasThreadItemPostNumber(value)) {
+    return null
+  }
+
+  return (
+    <View
+      style={[
+        a.flex_shrink_0,
+        a.rounded_full,
+        t.atoms.bg_contrast_50,
+        native(a.py_2xs),
+        {
+          paddingLeft: 5,
+          paddingRight: 5,
+        },
+        inline
+          ? platform({
+              native: {transform: [{translateY: 6}]},
+              web: {top: -2},
+            })
+          : {top: -2},
+      ]}>
+      <Text
+        accessibilityLabel={l({
+          message: `Post ${index} of ${count}`,
+          context: 'post-number-in-thread',
+          comment:
+            "Screen reader label indicating post count in a thread, e.g., the 3rd post of 5 total is 'Post 3 of 5'",
+        })}
+        accessibilityHint=""
+        style={[
+          a.text_xs,
+          a.font_medium,
+          t.atoms.text_contrast_high,
+          {
+            fontVariant: ['tabular-nums'],
+          },
+        ]}>
+        <Trans
+          context="post-number-in-thread"
+          comment="Badge indicating post count in a thread, e.g., the 3rd post of 5 total is '3/5'">
+          {index}/{count}
+        </Trans>
+      </Text>
+    </View>
+  )
+}