Merge branch 'main' into fix/discover-nav-update

components/account/AccountFollowButton.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
+import { engagement } from '~~/telemetry/generated/ui'
+import { engagementDetails } from '~~/telemetry/engagementDetails'
 import { toggleFollowAccount, useRelationship } from '~~/composables/masto/relationship'
 
-const { account, command, context, ...props } = defineProps<{
+const { account, command, context, gleanContext, ...props } = defineProps<{
   account: mastodon.v1.Account
   relationship?: mastodon.v1.Relationship
+  gleanContext?: string
   context?: 'followedBy' | 'following'
   command?: boolean
 }>()
@@ -65,6 +68,57 @@ const buttonStyle = $computed(() => {
   // If not following, use a button style
   return 'text-inverted bg-primary border-primary'
 })
+
+const dataGlean = $computed(() => {
+  if (!gleanContext)
+    return undefined
+
+  let action
+  if (relationship?.blocking)
+    action = 'follow-btn.unblock'
+  else if (relationship?.muting)
+    action = 'follow-btn.unmute'
+  else if (relationship ? relationship.following : context === 'following')
+    action = 'follow-btn.unfollow'
+  else if (relationship?.requested)
+    action = 'follow-btn.withdraw-follow-request'
+  else if ((relationship ? relationship.followedBy : context === 'followedBy') && account.locked)
+    action = 'follow-btn.follow-request'
+  else
+    action = 'follow-btn.follow'
+
+  return `${gleanContext}.${action}`
+})
+
+function handleClick() {
+  function recordEngagement() {
+    engagement.record({
+      ui_identifier: dataGlean,
+      mastodon_account_id: account.id,
+      mastodon_account_handle: account.acct,
+      ...engagementDetails[dataGlean],
+    })
+  }
+
+  const unfollow = relationship?.following || relationship?.requested
+
+  // Make sure recordEngagement is called before making changes to account/relationship
+  if (relationship?.blocking) {
+    recordEngagement()
+    unblock()
+  }
+  else if (relationship?.muting) {
+    recordEngagement()
+    unmute()
+  }
+  else if (unfollow) {
+    toggleFollowAccount(relationship!, account, dataGlean)
+  }
+  else {
+    recordEngagement()
+    toggleFollowAccount(relationship!, account)
+  }
+}
 </script>
 
 <template>
@@ -75,7 +129,7 @@ const buttonStyle = $computed(() => {
     rounded-full flex="~ gap2 center" font-500 min-w-30 h-fit px3 py1
     :class="buttonStyle"
     :hover="!relationship?.blocking && !relationship?.muting && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'"
-    @click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollowAccount(relationship!, account)"
+    @click="handleClick"
   >
     <template v-if="relationship?.blocking">
       <span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>

components/account/AccountHeader.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
+import { engagement } from '~~/telemetry/generated/ui'
+import { engagementDetails } from '~~/telemetry/engagementDetails'
 
 const { account } = defineProps<{
   account: mastodon.v1.Account
@@ -50,6 +52,14 @@ function previewAvatar() {
 }
 
 async function toggleNotifications() {
+  const dataGlean = relationship?.notifying ? 'profile.notify.stop' : 'profile.notify.start'
+  engagement.record({
+    ui_identifier: dataGlean,
+    mastodon_account_id: account.id,
+    mastodon_account_handle: account.acct,
+    ...engagementDetails[dataGlean],
+  })
+
   relationship!.notifying = !relationship?.notifying
   try {
     const newRel = await client.v1.accounts.follow(account.id, { notify: relationship?.notifying })
@@ -128,7 +138,7 @@ const personalNoteMaxLength = 2000
             >
               {{ $t('settings.profile.appearance.title') }}
             </NuxtLink>
-            <AccountFollowButton :account="account" :command="command" />
+            <AccountFollowButton :account="account" :command="command" glean-context="profile" />
             <span inset-ie-0 flex gap-2 items-center>
               <AccountMoreButton
                 :account="account" :command="command"
@@ -153,6 +163,7 @@ const personalNoteMaxLength = 2000
                     :aria-label="$t('list.modify_account')"
                     rounded-full text-sm p2 border-1 transition-colors
                     border-base hover:text-primary
+                    data-glean="profile.modify-lists"
                   >
                     <span i-ri:play-list-add-fill block text-current />
                   </button>

components/account/AccountMoreButton.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 import { toggleBlockAccount, toggleBlockDomain, toggleMuteAccount } from '~~/composables/masto/relationship'
+import { engagement } from '~~/telemetry/generated/ui'
+import { engagementDetails } from '~~/telemetry/engagementDetails'
 
 const { account } = defineProps<{
   account: mastodon.v1.Account
@@ -21,39 +23,63 @@ const { client } = $(useMasto())
 const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 const { share, isSupported: isShareSupported } = useShare()
 
+function recordEngagement(dataGlean: string) {
+  engagement.record({
+    ui_identifier: dataGlean,
+    mastodon_account_id: account.id,
+    mastodon_account_handle: account.acct,
+    ...engagementDetails[dataGlean],
+  })
+}
+
 function shareAccount() {
+  recordEngagement('profile.more.share-account')
   share({ url: location.href })
 }
 
 async function toggleReblogs() {
-  if (!relationship!.showingReblogs && await openConfirmDialog({
-    title: t('confirm.show_reblogs.title', [account.acct]),
-    confirm: t('confirm.show_reblogs.confirm'),
-    cancel: t('confirm.show_reblogs.cancel'),
-  }) !== 'confirm')
-    return
+  if (!relationship!.showingReblogs) {
+    if (await openConfirmDialog({
+      title: t('confirm.show_reblogs.title', [account.acct]),
+      confirm: t('confirm.show_reblogs.confirm'),
+      cancel: t('confirm.show_reblogs.cancel'),
+    }) !== 'confirm')
+      return
+    recordEngagement('profile.more.show-boosts')
+  }
+  else {
+    recordEngagement('profile.more.hide-boosts')
+  }
 
   const showingReblogs = !relationship?.showingReblogs
   relationship = await client.v1.accounts.follow(account.id, { reblogs: showingReblogs })
 }
 
 async function addUserNote() {
+  recordEngagement('profile.more.add-note')
   emit('addNote')
 }
 
 async function removeUserNote() {
+  recordEngagement('profile.more.remove-note')
+
   if (!relationship!.note || relationship!.note.length === 0)
     return
 
   const newNote = await client.v1.accounts.createNote(account.id, { comment: '' })
   relationship!.note = newNote.note
   emit('removeNote')
 }
+
+function report() {
+  recordEngagement('profile.more.report.open')
+  openReportDialog(account)
+}
 </script>
 
 <template>
   <CommonDropdown :eager-mount="command">
-    <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group aria-label="More actions">
+    <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group aria-label="More actions" data-glean="profile.more.open">
       <div rounded-5 p2 elk-group-hover="bg-purple/10">
         <div i-ri:more-2-fill />
       </div>
@@ -62,12 +88,15 @@ async function removeUserNote() {
     <template #popper>
       <NuxtLink v-if="notLocal" :to="account.url" external target="_blank">
         <CommonDropdownItem
+          is="button"
           :text="$t('menu.open_in_original_site')"
           icon="i-ri:arrow-right-up-line"
           :command="command"
+          data-glean="profile.more.open-in-original-site"
         />
       </NuxtLink>
       <CommonDropdownItem
+        is="button"
         v-if="isShareSupported"
         :text="`Share @${account.acct}`"
         icon="i-ri:share-line"
@@ -78,26 +107,30 @@ async function removeUserNote() {
       <template v-if="currentUser">
         <template v-if="!isSelf">
           <CommonDropdownItem
+            is="button"
             :text="$t('menu.mention_account', [`@${account.acct}`])"
             icon="i-ri:at-line"
             :command="command"
-            @click="mentionUser(account)"
+            @click="mentionUser(account, 'profile.more.mention')"
           />
           <CommonDropdownItem
+            is="button"
             :text="$t('menu.direct_message_account', [`@${account.acct}`])"
             icon="i-ri:message-3-line"
             :command="command"
-            @click="directMessageUser(account)"
+            @click="directMessageUser(account, 'profile.more.direct-message')"
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.showingReblogs"
             icon="i-ri:repeat-line"
             :text="$t('menu.show_reblogs', [`@${account.acct}`])"
             :command="command"
             @click="toggleReblogs()"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.hide_reblogs', [`@${account.acct}`])"
             icon="i-ri:repeat-line"
@@ -106,13 +139,15 @@ async function removeUserNote() {
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.note || relationship?.note?.length === 0"
             :text="$t('menu.add_personal_note', [`@${account.acct}`])"
             icon="i-ri-edit-2-line"
             :command="command"
             @click="addUserNote()"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.remove_personal_note', [`@${account.acct}`])"
             icon="i-ri-edit-2-line"
@@ -121,75 +156,82 @@ async function removeUserNote() {
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.muting"
             :text="$t('menu.mute_account', [`@${account.acct}`])"
             icon="i-ri:volume-mute-line"
             :command="command"
-            @click="toggleMuteAccount (relationship!, account)"
+            @click="toggleMuteAccount (relationship!, account, 'profile.more.mute')"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.unmute_account', [`@${account.acct}`])"
             icon="i-ri:volume-up-fill"
             :command="command"
-            @click="toggleMuteAccount (relationship!, account)"
+            @click="toggleMuteAccount (relationship!, account, 'profile.more.unmute')"
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.blocking"
             :text="$t('menu.block_account', [`@${account.acct}`])"
             icon="i-ri:forbid-2-line"
             :command="command"
-            @click="toggleBlockAccount (relationship!, account)"
+            @click="toggleBlockAccount (relationship!, account, 'profile.more.block')"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.unblock_account', [`@${account.acct}`])"
             icon="i-ri:checkbox-circle-line"
             :command="command"
-            @click="toggleBlockAccount (relationship!, account)"
+            @click="toggleBlockAccount (relationship!, account, 'profile.more.unblock')"
           />
 
           <template v-if="getServerName(account) !== currentServer">
             <CommonDropdownItem
+              is="button"
               v-if="!relationship?.domainBlocking"
               :text="$t('menu.block_domain', [getServerName(account)])"
               icon="i-ri:shut-down-line"
               :command="command"
-              @click="toggleBlockDomain(relationship!, account)"
+              @click="toggleBlockDomain(relationship!, account, 'profile.more.block-domain')"
             />
             <CommonDropdownItem
+              is="button"
               v-else
               :text="$t('menu.unblock_domain', [getServerName(account)])"
               icon="i-ri:restart-line"
               :command="command"
-              @click="toggleBlockDomain(relationship!, account)"
+              @click="toggleBlockDomain(relationship!, account, 'profile.more.unblock-domain')"
             />
           </template>
 
           <CommonDropdownItem
+            is="button"
             :text="$t('menu.report_account', [`@${account.acct}`])"
             icon="i-ri:flag-2-line"
             :command="command"
-            @click="openReportDialog(account)"
+            @click="report()"
           />
         </template>
 
         <template v-else>
           <NuxtLink to="/pinned">
-            <CommonDropdownItem :text="$t('account.pinned')" icon="i-ri:pushpin-line" :command="command" />
+            <CommonDropdownItem is="button" :text="$t('account.pinned')" icon="i-ri:pushpin-line" :command="command" data-glean="profile.more.goto-pinned" />
           </NuxtLink>
           <NuxtLink to="/favourites">
-            <CommonDropdownItem :text="$t('account.favourites')" :icon="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'" :command="command" />
+            <CommonDropdownItem is="button" :text="$t('account.favourites')" :icon="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'" :command="command" data-glean="profile.more.goto-favorites" />
           </NuxtLink>
           <NuxtLink to="/mutes">
-            <CommonDropdownItem :text="$t('account.muted_users')" icon="i-ri:volume-mute-line" :command="command" />
+            <CommonDropdownItem is="button" :text="$t('account.muted_users')" icon="i-ri:volume-mute-line" :command="command" data-glean="profile.more.goto-mutes" />
           </NuxtLink>
           <NuxtLink to="/blocks">
-            <CommonDropdownItem :text="$t('account.blocked_users')" icon="i-ri:forbid-2-line" :command="command" />
+            <CommonDropdownItem is="button" :text="$t('account.blocked_users')" icon="i-ri:forbid-2-line" :command="command" data-glean="profile.more.goto-blocks" />
           </NuxtLink>
           <NuxtLink to="/domain_blocks">
-            <CommonDropdownItem :text="$t('account.blocked_domains')" icon="i-ri:shut-down-line" :command="command" />
+            <CommonDropdownItem is="button" :text="$t('account.blocked_domains')" icon="i-ri:shut-down-line" :command="command" data-glean="profile.more.goto-domain-blocks" />
           </NuxtLink>
         </template>
       </template>

components/account/AccountPostsFollowers.vue

@@ -16,6 +16,7 @@ const userSettings = useUserSettings()
       replace
       text-secondary
       exact-active-class="text-primary"
+      data-glean="profile.details.posts"
     >
       <template #default="{ isExactActive }">
         <CommonLocalizedNumber
@@ -31,6 +32,7 @@ const userSettings = useUserSettings()
       :to="getAccountFollowingRoute(account)"
       replace
       text-secondary exact-active-class="text-primary"
+      data-glean="profile.details.following"
     >
       <template #default="{ isExactActive }">
         <template
@@ -56,6 +58,7 @@ const userSettings = useUserSettings()
       :to="getAccountFollowersRoute(account)"
       replace text-secondary
       exact-active-class="text-primary"
+      data-glean="profile.details.followers"
     >
       <template #default="{ isExactActive }">
         <template v-if="!getPreferences(userSettings, 'hideFollowerCount')">