Add internal debug field display

src/components/DebugFieldDisplay.tsx

@@ -0,0 +1,74 @@
+import {TouchableWithoutFeedback, View} from 'react-native'
+import * as Clipboard from 'expo-clipboard'
+
+import {atoms as a, useTheme} from '#/alf'
+import * as Prompt from '#/components/Prompt'
+import * as Toast from '#/components/Toast'
+import {Text} from '#/components/Typography'
+import {useDevMode} from '#/storage/hooks/dev-mode'
+
+/**
+ * Internal-use component to display debug information supplied by the appview.
+ * The `debug` field only exists on some API views, and is only visible for
+ * internal users in dev mode. As such, none of these strings need to be
+ * translated.
+ *
+ * This component can be removed at any time if we don't find it useful.
+ */
+export function DebugFieldDisplay<T extends {debug?: {[x: string]: unknown}}>({
+  subject,
+}: {
+  subject: T
+}) {
+  const t = useTheme()
+  const [devMode] = useDevMode()
+  const prompt = Prompt.usePromptControl()
+
+  if (!devMode) return
+  if (!subject.debug) return
+
+  return (
+    <>
+      <Prompt.Basic
+        control={prompt}
+        title="Post Debug"
+        description={JSON.stringify(subject.debug, null, 2)}
+        cancelButtonCta="Close"
+        confirmButtonCta="Copy"
+        onConfirm={() => {
+          Clipboard.setStringAsync(JSON.stringify(subject.debug, null, 2))
+          Toast.show('Copied to clipboard', {type: 'success'})
+        }}
+      />
+      <TouchableWithoutFeedback
+        accessibilityRole="button"
+        onPress={e => {
+          e.preventDefault()
+          e.stopPropagation()
+          prompt.open()
+          return false
+        }}>
+        <View style={[a.flex_row, a.align_center, a.gap_xs, a.pt_sm, a.pb_xs]}>
+          <View
+            style={[a.py_xs, a.px_sm, a.rounded_sm, t.atoms.bg_contrast_25]}>
+            <Text
+              style={[a.font_bold, a.text_xs, t.atoms.text_contrast_medium]}>
+              Debug
+            </Text>
+          </View>
+          <Text
+            numberOfLines={1}
+            style={[
+              a.flex_1,
+              a.text_xs,
+              a.leading_tight,
+              {fontFamily: 'monospace'},
+              t.atoms.text_contrast_low,
+            ]}>
+            {JSON.stringify(subject.debug)}
+          </Text>
+        </View>
+      </TouchableWithoutFeedback>
+    </>
+  )
+}

src/screens/PostThread/components/ThreadItemAnchor.tsx

@@ -42,6 +42,7 @@ import {
 import {atoms as a, useTheme} from '#/alf'
 import {colors} from '#/components/Admonition'
 import {Button} from '#/components/Button'
+import {DebugFieldDisplay} from '#/components/DebugFieldDisplay'
 import {CalendarClock_Stroke2_Corner0_Rounded as CalendarClockIcon} from '#/components/icons/CalendarClock'
 import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
 import {InlineLinkText, Link} from '#/components/Link'
@@ -512,6 +513,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
               />
             </FeedFeedbackProvider>
           </View>
+          <DebugFieldDisplay subject={post} />
         </View>
       </View>
     </>

src/screens/PostThread/components/ThreadItemPost.tsx

@@ -30,6 +30,7 @@ import {
   REPLY_LINE_WIDTH,
 } from '#/screens/PostThread/const'
 import {atoms as a, useTheme} from '#/alf'
+import {DebugFieldDisplay} from '#/components/DebugFieldDisplay'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
 import {LabelsOnMyPost} from '#/components/moderation/LabelsOnMe'
@@ -335,6 +336,7 @@ const ThreadItemPostInner = memo(function ThreadItemPostInner({
                 logContext="PostThreadItem"
                 threadgateRecord={threadgateRecord}
               />
+              <DebugFieldDisplay subject={post} />
             </View>
           </View>
         </PostHider>

src/screens/PostThread/components/ThreadItemTreePost.tsx

@@ -29,6 +29,7 @@ import {
   TREE_INDENT,
 } from '#/screens/PostThread/const'
 import {atoms as a, useTheme} from '#/alf'
+import {DebugFieldDisplay} from '#/components/DebugFieldDisplay'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
 import {LabelsOnMyPost} from '#/components/moderation/LabelsOnMe'
@@ -376,6 +377,7 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
                     logContext="PostThreadItem"
                     threadgateRecord={threadgateRecord}
                   />
+                  <DebugFieldDisplay subject={post} />
                 </View>
               </View>
             </View>

src/screens/Profile/Header/ProfileHeaderStandard.tsx

@@ -26,6 +26,7 @@ import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, platform, useBreakpoints, useTheme} from '#/alf'
 import {SubscribeProfileButton} from '#/components/activity-notifications/SubscribeProfileButton'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {DebugFieldDisplay} from '#/components/DebugFieldDisplay'
 import {useDialogControl} from '#/components/Dialog'
 import {MessageProfileButton} from '#/components/dms/MessageProfileButton'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
@@ -320,6 +321,8 @@ let ProfileHeaderStandard = ({
                 )}
             </View>
           )}
+
+          <DebugFieldDisplay subject={profile} />
         </View>
 
         <Prompt.Basic