Add metrics for composer threadgate (#9401)

* add metrics for composer threadgate

* add metrics to the in-thread version

* fix type error

src/components/WhoCanReply.tsx

@@ -17,6 +17,7 @@ import {useLingui} from '@lingui/react'
 
 import {HITSLOP_10} from '#/lib/constants'
 import {makeListLink, makeProfileLink} from '#/lib/routes/links'
+import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
 import {
   type ThreadgateAllowUISetting,
@@ -89,6 +90,8 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
       Keyboard.dismiss()
     }
     if (isThreadAuthor) {
+      logger.metric('thread:click:editOwnThreadgate', {})
+
       // wait on prefetch if it manages to resolve in under 200ms
       // otherwise, proceed immediately and show the spinner -sfn
       Promise.race([
@@ -98,6 +101,8 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
         editDialogControl.open()
       })
     } else {
+      logger.metric('thread:click:viewSomeoneElsesThreadgate', {})
+
       infoDialogControl.open()
     }
   }

src/components/dialogs/PostInteractionSettingsDialog.tsx

@@ -10,6 +10,7 @@ import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
 
 import {useHaptics} from '#/lib/haptics'
+import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {logger} from '#/logger'
 import {isIOS} from '#/platform/detection'
 import {STALE} from '#/state/queries'
@@ -79,13 +80,26 @@ export function PostInteractionSettingsControlledDialog({
 }: PostInteractionSettingsFormProps & {
   control: Dialog.DialogControlProps
 }) {
+  const onClose = useNonReactiveCallback(() => {
+    logger.metric('composer:threadgate:save', {
+      hasChanged: !!rest.isDirty,
+      persist: !!rest.persist,
+      replyOptions:
+        rest.threadgateAllowUISettings?.map(gate => gate.type)?.join(',') ?? '',
+      quotesEnabled: !rest.postgate?.embeddingRules?.find(
+        v => v.$type === embeddingRules.disableRule.$type,
+      ),
+    })
+  })
+
   return (
     <Dialog.Outer
       control={control}
       nativeOptions={{
         preventExpansion: true,
         preventDismiss: rest.isDirty && rest.persist,
-      }}>
+      }}
+      onClose={onClose}>
       <Dialog.Handle />
       <DialogInner {...rest} />
     </Dialog.Outer>

src/logger/metrics.ts

@@ -203,6 +203,16 @@ export type MetricEvents = {
   'composer:gif:open': {}
   'composer:gif:select': {}
 
+  'composer:threadgate:open': {
+    nudged: boolean
+  }
+  'composer:threadgate:save': {
+    replyOptions: string
+    quotesEnabled: boolean
+    persist: boolean
+    hasChanged: boolean
+  }
+
   // Data events
   'account:create:begin': {}
   'account:create:success': {
@@ -514,6 +524,8 @@ export type MetricEvents = {
     [key: string]: any
   }
   'thread:click:headerMenuOpen': {}
+  'thread:click:editOwnThreadgate': {}
+  'thread:click:viewSomeoneElsesThreadgate': {}
   'activitySubscription:enable': {
     setting: 'posts' | 'posts_and_replies'
   }

src/view/com/composer/threadgate/ThreadgateBtn.tsx

@@ -45,6 +45,7 @@ export function ThreadgateBtn({
   const control = Dialog.useDialogControl()
   const [threadgateNudged, setThreadgateNudged] = useThreadgateNudged()
   const [showTooltip, setShowTooltip] = useState(false)
+  const [tooltipWasShown] = useState(!threadgateNudged)
 
   useEffect(() => {
     if (!threadgateNudged) {
@@ -65,6 +66,10 @@ export function ThreadgateBtn({
   const [persist, setPersist] = useState(false)
 
   const onPress = () => {
+    logger.metric('composer:threadgate:open', {
+      nudged: tooltipWasShown,
+    })
+
     if (isNative && Keyboard.isVisible()) {
       Keyboard.dismiss()
     }