From 1a4be387c1e41b98030fed1c08b0865c664a8a32 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Fri, 13 Oct 2023 09:13:00 -0700
Subject: [PATCH 01/43] fix(login-signup): add glean attributes

---
 components/nav/NavUser.vue          | 2 ++
 components/user/UserSignInEntry.vue | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/components/nav/NavUser.vue b/components/nav/NavUser.vue
index 8fe747c335..c9f3adefb9 100644
--- a/components/nav/NavUser.vue
+++ b/components/nav/NavUser.vue
@@ -29,6 +29,7 @@ const { busy, oauth, singleInstanceServer } = useSignIn()
         gap-x-1 items-center justify-center text-sm p-x-10px p-y-10px xl:hidden text-center font-600
         sm:mr-8px sm:btn-solid sm:btn-outline sm:b-rd-8px
         :disabled="busy"
+        data-glean="header.signup"
         @click="oauth('signup')"
       >
         {{ $t('action.create_account') }}
@@ -39,6 +40,7 @@ const { busy, oauth, singleInstanceServer } = useSignIn()
         gap-x-1 items-center justify-center text-sm font-600 p-x-11px p-y-11px xl:hidden
         sm:border-1 sm:border-primary sm:btn-outline sm:b-rd-8px
         :disabled="busy"
+        data-glean="header.login"
         @click="oauth()"
       >
         {{ $t('action.sign_in') }}
diff --git a/components/user/UserSignInEntry.vue b/components/user/UserSignInEntry.vue
index cb1bcce1e5..3392370a19 100644
--- a/components/user/UserSignInEntry.vue
+++ b/components/user/UserSignInEntry.vue
@@ -14,6 +14,7 @@ const { busy, oauth, singleInstanceServer } = useSignIn()
       v-if="singleInstanceServer"
       flex="~ row" gap-x-2 items-center justify-center btn-solid text-center rounded-3 font-500
       :disabled="busy"
+      data-glean="nav.signup"
       @click="oauth('signup')"
     >
       {{ $t('action.create_account') }}
@@ -22,6 +23,7 @@ const { busy, oauth, singleInstanceServer } = useSignIn()
       v-if="singleInstanceServer"
       flex="~ row" gap-x-2 items-center justify-center btn-outline text-center rounded-3 font-500
       :disabled="busy"
+      data-glean="nav.login"
       @click="oauth()"
     >
       {{ $t('action.sign_in') }}

From fdcf6599e49551f7edf33dbf1dc6723d1388fbfa Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Fri, 13 Oct 2023 10:57:55 -0700
Subject: [PATCH 02/43] fix(login-signup): register new events under
 engagementDetails map

---
 telemetry/engagementDetails.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/telemetry/engagementDetails.ts b/telemetry/engagementDetails.ts
index ca29cc8d4d..be64365da7 100644
--- a/telemetry/engagementDetails.ts
+++ b/telemetry/engagementDetails.ts
@@ -15,4 +15,16 @@ export const engagementDetails: EngagementDetails = {
   'settings.interface.themeColor': {
     engagement_type: 'general',
   },
+  'header.signup': {
+    engagement_type: 'general',
+  },
+  'header.login': {
+    engagement_type: 'general',
+  },
+  'nav.signup': {
+    engagement_type: 'general',
+  },
+  'nav.login': {
+    engagement_type: 'general',
+  },
 }

From c3ef109d318c7cb083727981fd766ab980f8bb98 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Tue, 17 Oct 2023 14:37:24 -0700
Subject: [PATCH 03/43] fix(profile): make ui_identifiers more specific, add 2
 more follow cases

---
 components/account/AccountFollowButton.vue | 12 ++++++++----
 telemetry/engagementDetails.ts             |  6 ++++++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index 1ec43cd898..1aa98f0ba1 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -73,13 +73,17 @@ const dataGlean = $computed(() => {
 
   let action
   if (relationship?.blocking)
-    action = 'unblock'
+    action = 'follow.unblock'
   else if (relationship?.muting)
-    action = 'unmute'
+    action = 'follow.unmute'
   else if (relationship ? relationship.following : context === 'following')
-    action = 'unfollow'
+    action = 'follow.unfollow'
+  else if (relationship?.requested)
+    action = 'follow.withdraw-follow-request'
+  else if ((relationship ? relationship.followedBy : context === 'followedBy') && account.locked)
+    action = 'follow.follow-request'
   else
-    action = 'follow'
+    action = 'follow.follow'
 
   return `${gleanContext}.${action}`
 })
diff --git a/telemetry/engagementDetails.ts b/telemetry/engagementDetails.ts
index f1ae845f5e..4ec21250d4 100644
--- a/telemetry/engagementDetails.ts
+++ b/telemetry/engagementDetails.ts
@@ -28,4 +28,10 @@ export const engagementDetails: EngagementDetails = {
   'profile.follow.follow': {
     engagement_type: 'general',
   },
+  'profile.follow.withdraw-follow-request': {
+    engagement_type: 'general',
+  },
+  'profile.follow.follow-request': {
+    engagement_type: 'general',
+  },
 }

From e62a0b08a718d985dfe3af34e01224517b1fd7ef Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 01:41:55 -0700
Subject: [PATCH 04/43] fix(profile): click events for more options

---
 components/account/AccountMoreButton.vue    | 27 +++++++--
 components/common/dropdown/DropdownItem.vue |  2 +
 telemetry/engagementDetails.ts              | 66 +++++++++++++++++++++
 3 files changed, 89 insertions(+), 6 deletions(-)

diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue
index 44392ef494..17c1f7e6cd 100644
--- a/components/account/AccountMoreButton.vue
+++ b/components/account/AccountMoreButton.vue
@@ -53,7 +53,7 @@ async function removeUserNote() {
 
 <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>
@@ -65,6 +65,7 @@ async function removeUserNote() {
           :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
@@ -72,6 +73,7 @@ async function removeUserNote() {
         :text="`Share @${account.acct}`"
         icon="i-ri:share-line"
         :command="command"
+        data-glean="profile.more.share_account"
         @click="shareAccount()"
       />
 
@@ -81,12 +83,14 @@ async function removeUserNote() {
             :text="$t('menu.mention_account', [`@${account.acct}`])"
             icon="i-ri:at-line"
             :command="command"
+            data-glean="profile.more.mention"
             @click="mentionUser(account)"
           />
           <CommonDropdownItem
             :text="$t('menu.direct_message_account', [`@${account.acct}`])"
             icon="i-ri:message-3-line"
             :command="command"
+            data-glean="profile.more.direct_message"
             @click="directMessageUser(account)"
           />
 
@@ -95,6 +99,7 @@ async function removeUserNote() {
             icon="i-ri:repeat-line"
             :text="$t('menu.show_reblogs', [`@${account.acct}`])"
             :command="command"
+            data-glean="profile.more.show_boosts"
             @click="toggleReblogs()"
           />
           <CommonDropdownItem
@@ -102,6 +107,7 @@ async function removeUserNote() {
             :text="$t('menu.hide_reblogs', [`@${account.acct}`])"
             icon="i-ri:repeat-line"
             :command="command"
+            data-glean="profile.more.hide_boosts"
             @click="toggleReblogs()"
           />
 
@@ -110,6 +116,7 @@ async function removeUserNote() {
             :text="$t('menu.add_personal_note', [`@${account.acct}`])"
             icon="i-ri-edit-2-line"
             :command="command"
+            data-glean="profile.more.add_note"
             @click="addUserNote()"
           />
           <CommonDropdownItem
@@ -117,6 +124,7 @@ async function removeUserNote() {
             :text="$t('menu.remove_personal_note', [`@${account.acct}`])"
             icon="i-ri-edit-2-line"
             :command="command"
+            data-glean="profile.more.remove_note"
             @click="removeUserNote()"
           />
 
@@ -125,6 +133,7 @@ async function removeUserNote() {
             :text="$t('menu.mute_account', [`@${account.acct}`])"
             icon="i-ri:volume-mute-line"
             :command="command"
+            data-glean="profile.more.mute"
             @click="toggleMuteAccount (relationship!, account)"
           />
           <CommonDropdownItem
@@ -132,6 +141,7 @@ async function removeUserNote() {
             :text="$t('menu.unmute_account', [`@${account.acct}`])"
             icon="i-ri:volume-up-fill"
             :command="command"
+            data-glean="profile.more.unmute"
             @click="toggleMuteAccount (relationship!, account)"
           />
 
@@ -140,6 +150,7 @@ async function removeUserNote() {
             :text="$t('menu.block_account', [`@${account.acct}`])"
             icon="i-ri:forbid-2-line"
             :command="command"
+            data-glean="profile.more.block"
             @click="toggleBlockAccount (relationship!, account)"
           />
           <CommonDropdownItem
@@ -147,6 +158,7 @@ async function removeUserNote() {
             :text="$t('menu.unblock_account', [`@${account.acct}`])"
             icon="i-ri:checkbox-circle-line"
             :command="command"
+            data-glean="profile.more.unblock"
             @click="toggleBlockAccount (relationship!, account)"
           />
 
@@ -156,6 +168,7 @@ async function removeUserNote() {
               :text="$t('menu.block_domain', [getServerName(account)])"
               icon="i-ri:shut-down-line"
               :command="command"
+              data-glean="profile.more.block_domain"
               @click="toggleBlockDomain(relationship!, account)"
             />
             <CommonDropdownItem
@@ -163,6 +176,7 @@ async function removeUserNote() {
               :text="$t('menu.unblock_domain', [getServerName(account)])"
               icon="i-ri:restart-line"
               :command="command"
+              data-glean="profile.more.unblock_domain"
               @click="toggleBlockDomain(relationship!, account)"
             />
           </template>
@@ -171,25 +185,26 @@ async function removeUserNote() {
             :text="$t('menu.report_account', [`@${account.acct}`])"
             icon="i-ri:flag-2-line"
             :command="command"
+            data-glean="profile.more.report"
             @click="openReportDialog(account)"
           />
         </template>
 
         <template v-else>
           <NuxtLink to="/pinned">
-            <CommonDropdownItem :text="$t('account.pinned')" icon="i-ri:pushpin-line" :command="command" />
+            <CommonDropdownItem :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 :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 :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 :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 :text="$t('account.blocked_domains')" icon="i-ri:shut-down-line" :command="command" data-glean="profile.more.goto_domain_blocks" />
           </NuxtLink>
         </template>
       </template>
diff --git a/components/common/dropdown/DropdownItem.vue b/components/common/dropdown/DropdownItem.vue
index 2a1abc331f..74c26c9c20 100644
--- a/components/common/dropdown/DropdownItem.vue
+++ b/components/common/dropdown/DropdownItem.vue
@@ -6,6 +6,7 @@ const props = withDefaults(defineProps<{
   icon?: string
   checked?: boolean
   command?: boolean
+  dataGlean: string
 }>(), {
   is: 'div',
 })
@@ -51,6 +52,7 @@ useCommand({
     select-none
     hover-bg-active
     :aria-label="text"
+    :data-glean="props.dataGlean"
     @click="handleClick"
   >
     <div v-if="icon" :class="icon" />
diff --git a/telemetry/engagementDetails.ts b/telemetry/engagementDetails.ts
index 4ec21250d4..cf83216afe 100644
--- a/telemetry/engagementDetails.ts
+++ b/telemetry/engagementDetails.ts
@@ -34,4 +34,70 @@ export const engagementDetails: EngagementDetails = {
   'profile.follow.follow-request': {
     engagement_type: 'general',
   },
+  'a': {
+    engagement_type: 'general',
+  },
+  'profile.more.open': {
+    engagement_type: 'general',
+  },
+  'profile.more.open_in_original_site': {
+    engagement_type: 'general',
+  },
+  'profile.more.share_account': {
+    engagement_type: 'general',
+  },
+  'profile.more.mention': {
+    engagement_type: 'general',
+  },
+  'profile.more.direct_message': {
+    engagement_type: 'general',
+  },
+  'profile.more.show_boosts': {
+    engagement_type: 'general',
+  },
+  'profile.more.hide_boosts': {
+    engagement_type: 'general',
+  },
+  'profile.more.add_note': {
+    engagement_type: 'general',
+  },
+  'profile.more.remove_note': {
+    engagement_type: 'general',
+  },
+  'profile.more.mute': {
+    engagement_type: 'general',
+  },
+  'profile.more.unmute': {
+    engagement_type: 'general',
+  },
+  'profile.more.block': {
+    engagement_type: 'general',
+  },
+  'profile.more.unblock': {
+    engagement_type: 'general',
+  },
+  'profile.more.block_domain': {
+    engagement_type: 'general',
+  },
+  'profile.more.unblock_domain': {
+    engagement_type: 'general',
+  },
+  'profile.more.report': {
+    engagement_type: 'general',
+  },
+  'profile.more.goto_pinned': {
+    engagement_type: 'general',
+  },
+  'profile.more.goto_favorites': {
+    engagement_type: 'general',
+  },
+  'profile.more.goto_mutes': {
+    engagement_type: 'general',
+  },
+  'profile.more.goto_blocks': {
+    engagement_type: 'general',
+  },
+  'profile.more.goto_domain_blocks': {
+    engagement_type: 'general',
+  },
 }

From 790456e42db7fd0a3b6eae0d033a2fc2e7cc4c07 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 01:44:13 -0700
Subject: [PATCH 05/43] fix(profile): make dropdown options into buttons

---
 components/account/AccountMoreButton.vue | 25 +++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue
index 17c1f7e6cd..889f20686b 100644
--- a/components/account/AccountMoreButton.vue
+++ b/components/account/AccountMoreButton.vue
@@ -62,6 +62,7 @@ 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"
@@ -69,6 +70,7 @@ async function removeUserNote() {
         />
       </NuxtLink>
       <CommonDropdownItem
+        is="button"
         v-if="isShareSupported"
         :text="`Share @${account.acct}`"
         icon="i-ri:share-line"
@@ -80,6 +82,7 @@ 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"
@@ -87,6 +90,7 @@ async function removeUserNote() {
             @click="mentionUser(account)"
           />
           <CommonDropdownItem
+            is="button"
             :text="$t('menu.direct_message_account', [`@${account.acct}`])"
             icon="i-ri:message-3-line"
             :command="command"
@@ -95,6 +99,7 @@ async function removeUserNote() {
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.showingReblogs"
             icon="i-ri:repeat-line"
             :text="$t('menu.show_reblogs', [`@${account.acct}`])"
@@ -103,6 +108,7 @@ async function removeUserNote() {
             @click="toggleReblogs()"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.hide_reblogs', [`@${account.acct}`])"
             icon="i-ri:repeat-line"
@@ -112,6 +118,7 @@ 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"
@@ -120,6 +127,7 @@ async function removeUserNote() {
             @click="addUserNote()"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.remove_personal_note', [`@${account.acct}`])"
             icon="i-ri-edit-2-line"
@@ -129,6 +137,7 @@ async function removeUserNote() {
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.muting"
             :text="$t('menu.mute_account', [`@${account.acct}`])"
             icon="i-ri:volume-mute-line"
@@ -137,6 +146,7 @@ async function removeUserNote() {
             @click="toggleMuteAccount (relationship!, account)"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.unmute_account', [`@${account.acct}`])"
             icon="i-ri:volume-up-fill"
@@ -146,6 +156,7 @@ async function removeUserNote() {
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.blocking"
             :text="$t('menu.block_account', [`@${account.acct}`])"
             icon="i-ri:forbid-2-line"
@@ -154,6 +165,7 @@ async function removeUserNote() {
             @click="toggleBlockAccount (relationship!, account)"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.unblock_account', [`@${account.acct}`])"
             icon="i-ri:checkbox-circle-line"
@@ -164,6 +176,7 @@ async function removeUserNote() {
 
           <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"
@@ -172,6 +185,7 @@ async function removeUserNote() {
               @click="toggleBlockDomain(relationship!, account)"
             />
             <CommonDropdownItem
+              is="button"
               v-else
               :text="$t('menu.unblock_domain', [getServerName(account)])"
               icon="i-ri:restart-line"
@@ -182,6 +196,7 @@ async function removeUserNote() {
           </template>
 
           <CommonDropdownItem
+            is="button"
             :text="$t('menu.report_account', [`@${account.acct}`])"
             icon="i-ri:flag-2-line"
             :command="command"
@@ -192,19 +207,19 @@ async function removeUserNote() {
 
         <template v-else>
           <NuxtLink to="/pinned">
-            <CommonDropdownItem :text="$t('account.pinned')" icon="i-ri:pushpin-line" :command="command" data-glean="profile.more.goto_pinned" />
+            <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" data-glean="profile.more.goto_favorites" />
+            <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" data-glean="profile.more.goto_mutes" />
+            <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" data-glean="profile.more.goto_blocks" />
+            <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" data-glean="profile.more.goto_domain_blocks" />
+            <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>

From 71ec6cd73de691d825b9de8e090d1fc122762fae Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 01:50:08 -0700
Subject: [PATCH 06/43] fix(profile): events for notify button, add comments to
 engagementDetails

---
 components/account/AccountHeader.vue |  1 +
 telemetry/engagementDetails.ts       | 13 +++++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 6c28c9142a..cbd143e435 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -141,6 +141,7 @@ const personalNoteMaxLength = 2000
                   :aria-label="t('account.notifications_on_post_enable', { username: `@${account.username}` })"
                   rounded-full text-sm p2 border-1 transition-colors
                   :class="isNotifiedOnPost ? 'text-primary border-primary hover:bg-red/20 hover:text-red hover:border-red' : 'border-base hover:text-primary'"
+                  :data-glean="isNotifiedOnPost ? 'profile.notify_stop' : 'profile.notify_start'"
                   @click="toggleNotifications"
                 >
                   <span v-if="isNotifiedOnPost" i-ri:notification-4-fill block text-current />
diff --git a/telemetry/engagementDetails.ts b/telemetry/engagementDetails.ts
index cf83216afe..7310d5b2db 100644
--- a/telemetry/engagementDetails.ts
+++ b/telemetry/engagementDetails.ts
@@ -15,7 +15,7 @@ export const engagementDetails: EngagementDetails = {
   'settings.interface.themeColor': {
     engagement_type: 'general',
   },
-
+  // profile follow button
   'profile.follow.unblock': {
     engagement_type: 'general',
   },
@@ -34,9 +34,7 @@ export const engagementDetails: EngagementDetails = {
   'profile.follow.follow-request': {
     engagement_type: 'general',
   },
-  'a': {
-    engagement_type: 'general',
-  },
+  // profile more button
   'profile.more.open': {
     engagement_type: 'general',
   },
@@ -100,4 +98,11 @@ export const engagementDetails: EngagementDetails = {
   'profile.more.goto_domain_blocks': {
     engagement_type: 'general',
   },
+  // profile notifications
+  'profile.notify_start': {
+    engagement_type: 'general',
+  },
+  'profile.notify_stop': {
+    engagement_type: 'general',
+  },
 }

From 98213c7abbe3d5654e4f3469360a49e53dbbf974 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 01:55:40 -0700
Subject: [PATCH 07/43] fix(profile): modify lists

---
 components/account/AccountHeader.vue | 1 +
 telemetry/engagementDetails.ts       | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index cbd143e435..d962e15a65 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -154,6 +154,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>
diff --git a/telemetry/engagementDetails.ts b/telemetry/engagementDetails.ts
index 7310d5b2db..bba8635e6f 100644
--- a/telemetry/engagementDetails.ts
+++ b/telemetry/engagementDetails.ts
@@ -105,4 +105,8 @@ export const engagementDetails: EngagementDetails = {
   'profile.notify_stop': {
     engagement_type: 'general',
   },
+  // profile notifications
+  'profile.modify_lists': {
+    engagement_type: 'general',
+  },
 }

From fc0a7c65571511c9e29a182c8e4c414e6acf7202 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 01:57:15 -0700
Subject: [PATCH 08/43] fix(profile): separate profile events into own map

---
 telemetry/engagementDetails.ts | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/telemetry/engagementDetails.ts b/telemetry/engagementDetails.ts
index bba8635e6f..6156301f51 100644
--- a/telemetry/engagementDetails.ts
+++ b/telemetry/engagementDetails.ts
@@ -5,17 +5,8 @@ interface EngagementDetails {
   }
 }
 
-export const engagementDetails: EngagementDetails = {
-  'settings.interface.colorMode': {
-    engagement_type: 'general',
-  },
-  'settings.interface.fontSize': {
-    engagement_type: 'general',
-  },
-  'settings.interface.themeColor': {
-    engagement_type: 'general',
-  },
-  // profile follow button
+const profileEvents = {
+  // follow button
   'profile.follow.unblock': {
     engagement_type: 'general',
   },
@@ -34,7 +25,7 @@ export const engagementDetails: EngagementDetails = {
   'profile.follow.follow-request': {
     engagement_type: 'general',
   },
-  // profile more button
+  // more button
   'profile.more.open': {
     engagement_type: 'general',
   },
@@ -98,15 +89,28 @@ export const engagementDetails: EngagementDetails = {
   'profile.more.goto_domain_blocks': {
     engagement_type: 'general',
   },
-  // profile notifications
+  // notifications
   'profile.notify_start': {
     engagement_type: 'general',
   },
   'profile.notify_stop': {
     engagement_type: 'general',
   },
-  // profile notifications
+  // modify lists
   'profile.modify_lists': {
     engagement_type: 'general',
   },
 }
+
+export const engagementDetails: EngagementDetails = {
+  'settings.interface.colorMode': {
+    engagement_type: 'general',
+  },
+  'settings.interface.fontSize': {
+    engagement_type: 'general',
+  },
+  'settings.interface.themeColor': {
+    engagement_type: 'general',
+  },
+  ...profileEvents,
+}

From 6e37ff9a20cd569f6bdac27ed4627d0c318f4942 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 02:02:13 -0700
Subject: [PATCH 09/43] fix(profile): events for details (N posts, N followers,
 N following)

---
 components/account/AccountPostsFollowers.vue |  3 +++
 telemetry/engagementDetails.ts               | 11 +++++++++++
 2 files changed, 14 insertions(+)

diff --git a/components/account/AccountPostsFollowers.vue b/components/account/AccountPostsFollowers.vue
index 830ddd8e5f..b2fbedc9b8 100644
--- a/components/account/AccountPostsFollowers.vue
+++ b/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')">
diff --git a/telemetry/engagementDetails.ts b/telemetry/engagementDetails.ts
index 6156301f51..7ece77d066 100644
--- a/telemetry/engagementDetails.ts
+++ b/telemetry/engagementDetails.ts
@@ -100,6 +100,17 @@ const profileEvents = {
   'profile.modify_lists': {
     engagement_type: 'general',
   },
+  // details
+  'profile.details.posts': {
+    engagement_type: 'general',
+  },
+  'profile.details.following': {
+    engagement_type: 'general',
+  },
+  'profile.details.followers': {
+    engagement_type: 'general',
+  },
+
 }
 
 export const engagementDetails: EngagementDetails = {

From 960b1c3d595b0874440c1bda62796a79ed598f4b Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 02:10:15 -0700
Subject: [PATCH 10/43] fix(profile): tabs"

---
 components/account/AccountTabs.vue    |  3 +++
 components/common/CommonRouteTabs.vue |  2 ++
 telemetry/engagementDetails.ts        | 11 ++++++++++-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/components/account/AccountTabs.vue b/components/account/AccountTabs.vue
index 38ff52a7ae..3bea532c26 100644
--- a/components/account/AccountTabs.vue
+++ b/components/account/AccountTabs.vue
@@ -16,6 +16,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
     },
     display: t('tab.posts'),
     icon: 'i-ri:file-list-2-line',
+    gleanData: 'profile.tabs.posts',
   },
   {
     name: 'account-replies',
@@ -25,6 +26,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
     },
     display: t('tab.posts_with_replies'),
     icon: 'i-ri:chat-1-line',
+    gleanData: 'profile.tabs.posts_and_replies',
   },
   {
     name: 'account-media',
@@ -34,6 +36,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
     },
     display: t('tab.media'),
     icon: 'i-ri:camera-2-line',
+    gleanData: 'profile.tabs.media',
   },
 ])
 </script>
diff --git a/components/common/CommonRouteTabs.vue b/components/common/CommonRouteTabs.vue
index e0eefc4feb..dd99293cf8 100644
--- a/components/common/CommonRouteTabs.vue
+++ b/components/common/CommonRouteTabs.vue
@@ -8,6 +8,7 @@ export interface CommonRouteTabOption {
   name?: string
   icon?: string
   hide?: boolean
+  gleanData?: string
 }
 const { options, command, replace, preventScrollTop = false } = $defineProps<{
   options: CommonRouteTabOption[]
@@ -43,6 +44,7 @@ useCommands(() => command
         tabindex="1"
         hover:bg-active transition-100
         exact-active-class="children:(text-secondary !border-primary !op100 !text-base)"
+        :data-glean="option.gleanData"
         @click="!preventScrollTop && $scrollToTop()"
       >
         <span ws-nowrap mxa sm:px2 sm:py3 xl:pb4 xl:pt5 py2 text-center border-b-3 text-secondary-light hover:text-secondary border-transparent>{{ option.display || '&nbsp;' }}</span>
diff --git a/telemetry/engagementDetails.ts b/telemetry/engagementDetails.ts
index 7ece77d066..cb8959b918 100644
--- a/telemetry/engagementDetails.ts
+++ b/telemetry/engagementDetails.ts
@@ -110,7 +110,16 @@ const profileEvents = {
   'profile.details.followers': {
     engagement_type: 'general',
   },
-
+  // tabs
+  'profile.tabs.posts': {
+    engagement_type: 'general',
+  },
+  'profile.tabs.posts_and_replies': {
+    engagement_type: 'general',
+  },
+  'profile.tabs.media': {
+    engagement_type: 'general',
+  },
 }
 
 export const engagementDetails: EngagementDetails = {

From 0952ffc3e7c0811c0ca326ef0f5b64c3cd361386 Mon Sep 17 00:00:00 2001
From: Gavin Suntop <206379+gvn@users.noreply.github.com>
Date: Tue, 10 Oct 2023 09:05:32 -0700
Subject: [PATCH 11/43] Adding Post button and snackbar UI

---
 components/nav/NavSide.vue                    |  4 +-
 components/nav/NavSideItem.vue                | 36 +++++++++++-
 components/publish/PublishSnackbar.vue        | 57 +++++++++++++++++++
 components/publish/PublishWidget.vue          | 11 +++-
 .../publish/PublishWidgetFull.client.vue      | 11 +++-
 locales/en.json                               |  4 +-
 pages/compose.vue                             | 11 +++-
 styles/vars.css                               |  6 +-
 8 files changed, 129 insertions(+), 11 deletions(-)
 create mode 100644 components/publish/PublishSnackbar.vue

diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index 0724a44baa..96eace195a 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -28,7 +28,6 @@ const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
     <NavSideItem :text="$t('nav.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line" user-only :command="command" />
 
     <div class="spacer" shrink hidden sm:block />
-    <NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" />
 
     <div class="spacer" shrink hidden sm:block />
     <NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:hashtag" :command="command" />
@@ -38,6 +37,9 @@ const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 
     <div class="spacer" shrink hidden sm:block />
     <NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" />
+
+    <div class="spacer" shrink hidden sm:block />
+    <NavSideItem lozenge :text="$t('action.compose')" to="/compose" icon="i-ri:add-fill" user-only :command="command" />
   </nav>
 </template>
 
diff --git a/components/nav/NavSideItem.vue b/components/nav/NavSideItem.vue
index 8c5858e8c3..488dea29ee 100644
--- a/components/nav/NavSideItem.vue
+++ b/components/nav/NavSideItem.vue
@@ -5,8 +5,10 @@ const props = withDefaults(defineProps<{
   to: string | Record<string, string>
   userOnly?: boolean
   command?: boolean
+  lozenge?: boolean
 }>(), {
   userOnly: false,
+  lozenge: false,
 })
 
 defineSlots<{
@@ -56,12 +58,14 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
     <CommonTooltip :disabled="!isMediumOrLargeScreen" :content="text" placement="right">
       <div
         class="item"
+        :class="lozenge ? 'lozenge' : ''"
         flex items-center gap4
         w-fit rounded-3
         px2 mx3 sm:mxa
         xl="ml0 mr5 px5 w-auto"
         transition-100
-        elk-group-hover="bg-active" group-focus-visible:ring="2 current"
+        :elk-group-hover="lozenge ? '' : 'bg-active'"
+        group-focus-visible:ring="2 current"
       >
         <slot name="icon">
           <div :class="icon" text-xl />
@@ -75,6 +79,36 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
 </template>
 
 <style scoped>
+  .lozenge {
+    color: var(--c-text-base-light);
+    font-size: 15px;
+    line-height: 20px;
+    max-width: 160px;
+    border-radius: 360px;
+    align-items: center;
+    background: var(--c-primary);
+    display: flex;
+    justify-content: center;
+    padding-right: 50px;
+
+    &:hover {
+      background: var(--c-primary-active);
+    }
+  }
+
+  @media screen and ( min-width: 640px ) {
+    .lozenge.item {
+      padding: 0.2rem;
+    }
+  }
+
+  @media screen and ( min-width: 1280px ) {
+    .lozenge.item {
+      padding-top: 12px;
+      padding-bottom: 12px;
+    }
+  }
+
   .item {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
diff --git a/components/publish/PublishSnackbar.vue b/components/publish/PublishSnackbar.vue
new file mode 100644
index 0000000000..8eea5c8bd5
--- /dev/null
+++ b/components/publish/PublishSnackbar.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const isVisible = ref(false)
+
+function show() {
+  isVisible.value = true
+
+  setTimeout(() => {
+    hide()
+  }, 10000)
+}
+
+function hide() {
+  isVisible.value = false
+}
+
+defineExpose({
+  show,
+  hide,
+})
+</script>
+
+<template>
+  <div class="snackbar-wrapper">
+    <div
+      :class="{ active: isVisible }"
+      class="snackbar"
+    >
+      Your post was published
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .snackbar-wrapper {
+    display: flex;
+    justify-content: center;
+  }
+  .snackbar {
+    background: var(--c-primary);
+    border-radius: 8px;
+    border: 1px solid var(--c-primary-light);
+    color: var(--c-text-base-light);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+    min-width: 280px;
+    opacity: 0;
+    padding: 8px 16px;
+    text-align: center;
+    transition: opacity 800ms ease-in-out;
+  }
+  .snackbar.active {
+    opacity: 1;
+  }
+</style>
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 36bb4eabb4..cc56b9b053 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -494,7 +494,7 @@ onDeactivated(() => {
               </span>
               <span v-if="draft.editingStatus">{{ $t('action.save_changes') }}</span>
               <span v-else-if="draft.params.inReplyToId">{{ $t('action.reply') }}</span>
-              <span v-else>{{ !isSending ? $t('action.publish') : $t('state.publishing') }}</span>
+              <span v-else>{{ !isSending ? $t('action.post') : $t('state.publishing') }}</span>
             </button>
           </CommonTooltip>
         </div>
@@ -504,6 +504,15 @@ onDeactivated(() => {
 </template>
 
 <style scoped>
+  .publish-button {
+    background: var(--c-primary);
+    border-radius: 360px;
+
+    &:hover {
+      background: var(--c-primary-active);
+    }
+  }
+
   .publish-button[aria-disabled=true] {
     cursor: not-allowed;
     background-color: var(--c-bg-btn-disabled);
diff --git a/components/publish/PublishWidgetFull.client.vue b/components/publish/PublishWidgetFull.client.vue
index f2de2fbe87..f70198c12d 100644
--- a/components/publish/PublishWidgetFull.client.vue
+++ b/components/publish/PublishWidgetFull.client.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { formatTimeAgo } from '@vueuse/core'
 
+const emit = defineEmits<{
+  (evt: 'published'): void
+}>()
 const route = useRoute()
 const { formatNumber } = useHumanReadableNumber()
 const timeAgoOptions = useTimeAgoOptions()
@@ -13,6 +16,10 @@ const nonEmptyDrafts = $computed(() => draftKeys
   .map(i => [i, currentUserDrafts.value[i]] as const),
 )
 
+async function onPublish() {
+  emit('published')
+}
+
 watchEffect(() => {
   draftKey = route.query.draft?.toString() || 'home'
 })
@@ -23,7 +30,7 @@ onDeactivated(() => {
 </script>
 
 <template>
-  <div flex="~ col" pt-6 h-screen>
+  <div flex="~ col" pt-6 mb-6>
     <div inline-flex justify-end h-8>
       <VDropdown v-if="nonEmptyDrafts.length" placement="bottom-end">
         <button btn-text flex="inline center">
@@ -57,7 +64,7 @@ onDeactivated(() => {
       </VDropdown>
     </div>
     <div>
-      <PublishWidget :key="draftKey" expanded class="min-h-100!" :draft-key="draftKey" />
+      <PublishWidget :key="draftKey" expanded class="min-h-100!" :draft-key="draftKey" @published="onPublish" />
     </div>
   </div>
 </template>
diff --git a/locales/en.json b/locales/en.json
index fcfd55c5cf..44baa7eb5e 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -53,7 +53,7 @@
     "clear_publish_failed": "Clear publish errors",
     "clear_upload_failed": "Clear file upload errors",
     "close": "Close",
-    "compose": "Compose",
+    "compose": "Post",
     "confirm": "Confirm",
     "create_account": "Create account",
     "done": "Done",
@@ -64,8 +64,8 @@
     "favourited": "Favorited",
     "more": "More",
     "next": "Next",
+    "post": "Post",
     "prev": "Prev",
-    "publish": "Publish",
     "reply": "Reply",
     "reply_count": "{0}",
     "reset": "Reset",
diff --git a/pages/compose.vue b/pages/compose.vue
index 4b2e59ef0c..a0a4d8cd81 100644
--- a/pages/compose.vue
+++ b/pages/compose.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+
 definePageMeta({
   middleware: 'auth',
 })
@@ -8,8 +10,15 @@ const { t } = useI18n()
 useHydratedHead({
   title: () => t('nav.compose'),
 })
+
+const publishSnackbar = ref(null)
+
+function onPublish() {
+  publishSnackbar.value.show()
+}
 </script>
 
 <template>
-  <PublishWidgetFull />
+  <PublishWidgetFull @published="onPublish" />
+  <PublishSnackbar ref="publishSnackbar" />
 </template>
diff --git a/styles/vars.css b/styles/vars.css
index 5bd3dc571d..432c378b25 100644
--- a/styles/vars.css
+++ b/styles/vars.css
@@ -53,14 +53,14 @@
   --c-bg-code: #ffffff06;
   --c-bg-dm: #0a2f35;
 
-  --c-text-base: #f3f3f3;
+  --c-text-base: #FBFBFE;
   --c-text-base-light: #232323;
   --c-text-code: #ecd88e;
   --c-text-secondary: #888;
   --c-text-secondary-light: #686868;
 
-  --c-bg-btn-disabled: #2a2a2a;
-  --c-text-btn-disabled: #919191;
+  --c-bg-btn-disabled: #9F9FAD;
+  --c-text-btn-disabled: #15141A;
 
   --c-moz-logo-background: white;
   --c-moz-logo-text: black;

From e1c750b90c8fd2e7924e4d3464c0b1e2703200e6 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 13:09:39 -0700
Subject: [PATCH 12/43] fix(profile): send glean events directly for follow
 button so that we can send extra_keys mastodon ID and handle

---
 components/account/AccountFollowButton.vue | 25 ++++++++++++++++++++--
 composables/masto/relationship.ts          | 14 +++++++++++-
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index 1aa98f0ba1..48ba841d99 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.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'
 import { toggleFollowAccount, useRelationship } from '~~/composables/masto/relationship'
 
 const { account, command, context, gleanContext, ...props } = defineProps<{
@@ -67,6 +69,8 @@ const buttonStyle = $computed(() => {
   return 'text-inverted bg-primary border-primary'
 })
 
+const mastodon_account_id = account.id
+const mastodon_account_handle = account.acct
 const dataGlean = $computed(() => {
   if (!gleanContext)
     return undefined
@@ -87,6 +91,24 @@ const dataGlean = $computed(() => {
 
   return `${gleanContext}.${action}`
 })
+
+function handleClick() {
+  // It might be better to blacklist against dataGlean minus gleanContext, but too much work
+  const blacklist = [
+    'profile.follow.unfollow', // unfollow goes to a modal. see toggleFollowAccount
+  ]
+
+  if (!blacklist.includes(dataGlean)) {
+    engagement.record({
+      ui_identifier: dataGlean,
+      mastodon_account_id,
+      mastodon_account_handle,
+      ...engagementDetails[dataGlean],
+    })
+  }
+
+  return relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollowAccount(relationship!, account, dataGlean)
+}
 </script>
 
 <template>
@@ -96,9 +118,8 @@ const dataGlean = $computed(() => {
     border-1
     rounded-full flex="~ gap2 center" font-500 min-w-30 h-fit px3 py1
     :class="buttonStyle"
-    :data-glean="dataGlean"
     :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>
diff --git a/composables/masto/relationship.ts b/composables/masto/relationship.ts
index 00f3cf721e..ea4fefba9c 100644
--- a/composables/masto/relationship.ts
+++ b/composables/masto/relationship.ts
@@ -1,5 +1,7 @@
 import type { mastodon } from 'masto'
 import type { Ref } from 'vue'
+import { engagement } from '~~/telemetry/generated/ui'
+import { engagementDetails } from '~~/telemetry/engagementDetails'
 
 // Batch requests for relationships when used in the UI
 // We don't want to hold to old values, so every time a Relationship is needed it
@@ -32,12 +34,13 @@ async function fetchRelationships() {
     requested[i][1].value = relationships[i]
 }
 
-export async function toggleFollowAccount(relationship: mastodon.v1.Relationship, account: mastodon.v1.Account) {
+export async function toggleFollowAccount(relationship: mastodon.v1.Relationship, account: mastodon.v1.Account, dataGlean?: string) {
   const { client } = $(useMasto())
   const i18n = useNuxtApp().$i18n
 
   const unfollow = relationship!.following || relationship!.requested
 
+  // Dialog box for unfollow
   if (unfollow) {
     if (await openConfirmDialog({
       title: i18n.t('confirm.unfollow.title'),
@@ -45,6 +48,15 @@ export async function toggleFollowAccount(relationship: mastodon.v1.Relationship
       cancel: i18n.t('confirm.unfollow.cancel'),
     }) !== 'confirm')
       return
+
+    if (dataGlean) {
+      engagement.record({
+        ui_identifier: dataGlean,
+        mastodon_account_id: account.id,
+        mastodon_account_handle: account.acct,
+        ...engagementDetails[dataGlean],
+      })
+    }
   }
 
   if (unfollow) {

From 7e06e9165be958fa19ddedc27e1388f5ba9a3a1e Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 13:25:29 -0700
Subject: [PATCH 13/43] fix(profile): fix withdraw follow sends double events,
 refactor the click function of the follow button

---
 components/account/AccountFollowButton.vue | 34 +++++++++++++---------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index 48ba841d99..4b34a718ec 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -93,21 +93,27 @@ const dataGlean = $computed(() => {
 })
 
 function handleClick() {
-  // It might be better to blacklist against dataGlean minus gleanContext, but too much work
-  const blacklist = [
-    'profile.follow.unfollow', // unfollow goes to a modal. see toggleFollowAccount
-  ]
-
-  if (!blacklist.includes(dataGlean)) {
-    engagement.record({
-      ui_identifier: dataGlean,
-      mastodon_account_id,
-      mastodon_account_handle,
-      ...engagementDetails[dataGlean],
-    })
-  }
+  if (relationship?.blocking)
+    return unblock()
+
+  if (relationship?.muting)
+    return unmute()
+
+  const unfollow = relationship!.following || relationship!.requested
+
+  // Unfollow actions require a 2nd layer of confirmation from the dialogue resulted from toggleFollowAccount.
+  // They are 'follow.unfollow' and 'follow.withdraw-follow-request'
+  if (unfollow)
+    return toggleFollowAccount(relationship!, account, dataGlean)
+
+  engagement.record({
+    ui_identifier: dataGlean,
+    mastodon_account_id,
+    mastodon_account_handle,
+    ...engagementDetails[dataGlean],
+  })
 
-  return relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollowAccount(relationship!, account, dataGlean)
+  return toggleFollowAccount(relationship!, account)
 }
 </script>
 

From ce5e34dbcaf9d64cbe80a800fd74a9413cc8448e Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 13:34:55 -0700
Subject: [PATCH 14/43] fix(profile): more follow button click function cleanup

---
 components/account/AccountFollowButton.vue | 25 +++++++++++-----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index 4b34a718ec..66a9bf7edb 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -69,8 +69,6 @@ const buttonStyle = $computed(() => {
   return 'text-inverted bg-primary border-primary'
 })
 
-const mastodon_account_id = account.id
-const mastodon_account_handle = account.acct
 const dataGlean = $computed(() => {
   if (!gleanContext)
     return undefined
@@ -93,26 +91,27 @@ const dataGlean = $computed(() => {
 })
 
 function handleClick() {
-  if (relationship?.blocking)
-    return unblock()
-
-  if (relationship?.muting)
-    return unmute()
-
-  const unfollow = relationship!.following || relationship!.requested
+  const unfollow = relationship?.following || relationship?.requested
 
-  // Unfollow actions require a 2nd layer of confirmation from the dialogue resulted from toggleFollowAccount.
-  // They are 'follow.unfollow' and 'follow.withdraw-follow-request'
+  // Unfollow actions require a 2nd layer of confirmation from the dialogue triggered by toggleFollowAccount,
+  // so we skip sending engagement events here
+  // See 'follow.unfollow' and 'follow.withdraw-follow-request'
   if (unfollow)
     return toggleFollowAccount(relationship!, account, dataGlean)
 
   engagement.record({
     ui_identifier: dataGlean,
-    mastodon_account_id,
-    mastodon_account_handle,
+    mastodon_account_id: account.id,
+    mastodon_account_handle: account.acct,
     ...engagementDetails[dataGlean],
   })
 
+  if (relationship?.blocking)
+    return unblock()
+
+  if (relationship?.muting)
+    return unmute()
+
   return toggleFollowAccount(relationship!, account)
 }
 </script>

From 50f23a21f5e3d6f1d710163a79577c1baea3251e Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 13:35:47 -0700
Subject: [PATCH 15/43] fix(profile): var rename

---
 components/account/AccountTabs.vue    | 6 +++---
 components/common/CommonRouteTabs.vue | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/account/AccountTabs.vue b/components/account/AccountTabs.vue
index 3bea532c26..87ba97087b 100644
--- a/components/account/AccountTabs.vue
+++ b/components/account/AccountTabs.vue
@@ -16,7 +16,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
     },
     display: t('tab.posts'),
     icon: 'i-ri:file-list-2-line',
-    gleanData: 'profile.tabs.posts',
+    dataGlean: 'profile.tabs.posts',
   },
   {
     name: 'account-replies',
@@ -26,7 +26,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
     },
     display: t('tab.posts_with_replies'),
     icon: 'i-ri:chat-1-line',
-    gleanData: 'profile.tabs.posts_and_replies',
+    dataGlean: 'profile.tabs.posts_and_replies',
   },
   {
     name: 'account-media',
@@ -36,7 +36,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
     },
     display: t('tab.media'),
     icon: 'i-ri:camera-2-line',
-    gleanData: 'profile.tabs.media',
+    dataGlean: 'profile.tabs.media',
   },
 ])
 </script>
diff --git a/components/common/CommonRouteTabs.vue b/components/common/CommonRouteTabs.vue
index dd99293cf8..6560567a6b 100644
--- a/components/common/CommonRouteTabs.vue
+++ b/components/common/CommonRouteTabs.vue
@@ -8,7 +8,7 @@ export interface CommonRouteTabOption {
   name?: string
   icon?: string
   hide?: boolean
-  gleanData?: string
+  dataGlean?: string
 }
 const { options, command, replace, preventScrollTop = false } = $defineProps<{
   options: CommonRouteTabOption[]
@@ -44,7 +44,7 @@ useCommands(() => command
         tabindex="1"
         hover:bg-active transition-100
         exact-active-class="children:(text-secondary !border-primary !op100 !text-base)"
-        :data-glean="option.gleanData"
+        :data-glean="option.dataGlean"
         @click="!preventScrollTop && $scrollToTop()"
       >
         <span ws-nowrap mxa sm:px2 sm:py3 xl:pb4 xl:pt5 py2 text-center border-b-3 text-secondary-light hover:text-secondary border-transparent>{{ option.display || '&nbsp;' }}</span>

From c1aad78d5e85e17287827ab3fe8e7c1287487972 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 13:53:41 -0700
Subject: [PATCH 16/43] fix(profile): move the analytics on mute/block
 accnt/block domain in the more options dropdown to their dialogues' confirm
 flows

---
 components/account/AccountMoreButton.vue | 34 ++++++-----
 composables/masto/relationship.ts        | 75 +++++++++++++++++-------
 2 files changed, 74 insertions(+), 35 deletions(-)

diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue
index 889f20686b..5af4d721af 100644
--- a/components/account/AccountMoreButton.vue
+++ b/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
@@ -26,13 +28,21 @@ function shareAccount() {
 }
 
 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
+
+    engagement.record({
+      ui_identifier: 'profile.more.show_boosts',
+      mastodon_account_id: account.id,
+      mastodon_account_handle: account.acct,
+      ...engagementDetails['profile.more.show_boosts'],
+    })
+  }
   const showingReblogs = !relationship?.showingReblogs
   relationship = await client.v1.accounts.follow(account.id, { reblogs: showingReblogs })
 }
@@ -104,7 +114,6 @@ async function removeUserNote() {
             icon="i-ri:repeat-line"
             :text="$t('menu.show_reblogs', [`@${account.acct}`])"
             :command="command"
-            data-glean="profile.more.show_boosts"
             @click="toggleReblogs()"
           />
           <CommonDropdownItem
@@ -142,8 +151,7 @@ async function removeUserNote() {
             :text="$t('menu.mute_account', [`@${account.acct}`])"
             icon="i-ri:volume-mute-line"
             :command="command"
-            data-glean="profile.more.mute"
-            @click="toggleMuteAccount (relationship!, account)"
+            @click="toggleMuteAccount (relationship!, account, 'profile.more.mute')"
           />
           <CommonDropdownItem
             is="button"
@@ -161,8 +169,7 @@ async function removeUserNote() {
             :text="$t('menu.block_account', [`@${account.acct}`])"
             icon="i-ri:forbid-2-line"
             :command="command"
-            data-glean="profile.more.block"
-            @click="toggleBlockAccount (relationship!, account)"
+            @click="toggleBlockAccount (relationship!, account, 'profile.more.block')"
           />
           <CommonDropdownItem
             is="button"
@@ -181,8 +188,7 @@ async function removeUserNote() {
               :text="$t('menu.block_domain', [getServerName(account)])"
               icon="i-ri:shut-down-line"
               :command="command"
-              data-glean="profile.more.block_domain"
-              @click="toggleBlockDomain(relationship!, account)"
+              @click="toggleBlockDomain(relationship!, account, 'profile.more.block_domain')"
             />
             <CommonDropdownItem
               is="button"
diff --git a/composables/masto/relationship.ts b/composables/masto/relationship.ts
index ea4fefba9c..4293cd5fcd 100644
--- a/composables/masto/relationship.ts
+++ b/composables/masto/relationship.ts
@@ -73,16 +73,27 @@ export async function toggleFollowAccount(relationship: mastodon.v1.Relationship
   relationship = await client.v1.accounts[unfollow ? 'unfollow' : 'follow'](account.id)
 }
 
-export async function toggleMuteAccount(relationship: mastodon.v1.Relationship, account: mastodon.v1.Account) {
+export async function toggleMuteAccount(relationship: mastodon.v1.Relationship, account: mastodon.v1.Account, dataGlean?: string) {
   const { client } = $(useMasto())
   const i18n = useNuxtApp().$i18n
 
-  if (!relationship!.muting && await openConfirmDialog({
-    title: i18n.t('confirm.mute_account.title', [account.acct]),
-    confirm: i18n.t('confirm.mute_account.confirm'),
-    cancel: i18n.t('confirm.mute_account.cancel'),
-  }) !== 'confirm')
-    return
+  if (!relationship!.muting) {
+    if (await openConfirmDialog({
+      title: i18n.t('confirm.mute_account.title', [account.acct]),
+      confirm: i18n.t('confirm.mute_account.confirm'),
+      cancel: i18n.t('confirm.mute_account.cancel'),
+    }) !== 'confirm')
+      return
+
+    if (dataGlean) {
+      engagement.record({
+        ui_identifier: dataGlean,
+        mastodon_account_id: account.id,
+        mastodon_account_handle: account.acct,
+        ...engagementDetails[dataGlean],
+      })
+    }
+  }
 
   relationship!.muting = !relationship!.muting
   relationship = relationship!.muting
@@ -92,31 +103,53 @@ export async function toggleMuteAccount(relationship: mastodon.v1.Relationship,
     : await client.v1.accounts.unmute(account.id)
 }
 
-export async function toggleBlockAccount(relationship: mastodon.v1.Relationship, account: mastodon.v1.Account) {
+export async function toggleBlockAccount(relationship: mastodon.v1.Relationship, account: mastodon.v1.Account, dataGlean?: string) {
   const { client } = $(useMasto())
   const i18n = useNuxtApp().$i18n
 
-  if (!relationship!.blocking && await openConfirmDialog({
-    title: i18n.t('confirm.block_account.title', [account.acct]),
-    confirm: i18n.t('confirm.block_account.confirm'),
-    cancel: i18n.t('confirm.block_account.cancel'),
-  }) !== 'confirm')
-    return
+  if (!relationship!.blocking) {
+    if (await openConfirmDialog({
+      title: i18n.t('confirm.block_account.title', [account.acct]),
+      confirm: i18n.t('confirm.block_account.confirm'),
+      cancel: i18n.t('confirm.block_account.cancel'),
+    }) !== 'confirm')
+      return
+
+    if (dataGlean) {
+      engagement.record({
+        ui_identifier: dataGlean,
+        mastodon_account_id: account.id,
+        mastodon_account_handle: account.acct,
+        ...engagementDetails[dataGlean],
+      })
+    }
+  }
 
   relationship!.blocking = !relationship!.blocking
   relationship = await client.v1.accounts[relationship!.blocking ? 'block' : 'unblock'](account.id)
 }
 
-export async function toggleBlockDomain(relationship: mastodon.v1.Relationship, account: mastodon.v1.Account) {
+export async function toggleBlockDomain(relationship: mastodon.v1.Relationship, account: mastodon.v1.Account, dataGlean?: string) {
   const { client } = $(useMasto())
   const i18n = useNuxtApp().$i18n
 
-  if (!relationship!.domainBlocking && await openConfirmDialog({
-    title: i18n.t('confirm.block_domain.title', [getServerName(account)]),
-    confirm: i18n.t('confirm.block_domain.confirm'),
-    cancel: i18n.t('confirm.block_domain.cancel'),
-  }) !== 'confirm')
-    return
+  if (!relationship!.domainBlocking) {
+    if (await openConfirmDialog({
+      title: i18n.t('confirm.block_domain.title', [getServerName(account)]),
+      confirm: i18n.t('confirm.block_domain.confirm'),
+      cancel: i18n.t('confirm.block_domain.cancel'),
+    }) !== 'confirm')
+      return
+
+    if (dataGlean) {
+      engagement.record({
+        ui_identifier: dataGlean,
+        mastodon_account_id: account.id,
+        mastodon_account_handle: account.acct,
+        ...engagementDetails[dataGlean],
+      })
+    }
+  }
 
   relationship!.domainBlocking = !relationship!.domainBlocking
   await client.v1.domainBlocks[relationship!.domainBlocking ? 'block' : 'unblock'](getServerName(account))

From 97af09dd47757297da2ab7b206499b54f64a41aa Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 13:57:56 -0700
Subject: [PATCH 17/43] fix(profiles): add account identifiers to the notifiy
 button events

---
 components/account/AccountHeader.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index d962e15a65..89fa9e4517 100644
--- a/components/account/AccountHeader.vue
+++ b/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 })
@@ -141,7 +151,6 @@ const personalNoteMaxLength = 2000
                   :aria-label="t('account.notifications_on_post_enable', { username: `@${account.username}` })"
                   rounded-full text-sm p2 border-1 transition-colors
                   :class="isNotifiedOnPost ? 'text-primary border-primary hover:bg-red/20 hover:text-red hover:border-red' : 'border-base hover:text-primary'"
-                  :data-glean="isNotifiedOnPost ? 'profile.notify_stop' : 'profile.notify_start'"
                   @click="toggleNotifications"
                 >
                   <span v-if="isNotifiedOnPost" i-ri:notification-4-fill block text-current />

From a6805605f3b7cbf7e472c7ef5db5d03116647ae2 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 14:16:33 -0700
Subject: [PATCH 18/43] fix(profile): add account ids to all the other 'more
 options' menu items

---
 components/account/AccountMoreButton.vue    | 61 +++++++++++++++------
 components/common/dropdown/DropdownItem.vue |  2 +-
 composables/masto/relationship.ts           | 30 ++++++++++
 composables/masto/statusDrafts.ts           | 24 +++++++-
 4 files changed, 98 insertions(+), 19 deletions(-)

diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue
index 5af4d721af..3e6e6f1a94 100644
--- a/components/account/AccountMoreButton.vue
+++ b/components/account/AccountMoreButton.vue
@@ -24,6 +24,12 @@ const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 const { share, isSupported: isShareSupported } = useShare()
 
 function shareAccount() {
+  engagement.record({
+    ui_identifier: 'profile.more.share_account',
+    mastodon_account_id: account.id,
+    mastodon_account_handle: account.acct,
+    ...engagementDetails['profile.more.share_account'],
+  })
   share({ url: location.href })
 }
 
@@ -43,15 +49,38 @@ async function toggleReblogs() {
       ...engagementDetails['profile.more.show_boosts'],
     })
   }
+  else {
+    engagement.record({
+      ui_identifier: 'profile.more.hide_boosts',
+      mastodon_account_id: account.id,
+      mastodon_account_handle: account.acct,
+      ...engagementDetails['profile.more.hide_boosts'],
+    })
+  }
+
   const showingReblogs = !relationship?.showingReblogs
   relationship = await client.v1.accounts.follow(account.id, { reblogs: showingReblogs })
 }
 
 async function addUserNote() {
+  engagement.record({
+    ui_identifier: 'profile.more.add_note',
+    mastodon_account_id: account.id,
+    mastodon_account_handle: account.acct,
+    ...engagementDetails['profile.more.add_note'],
+  })
+
   emit('addNote')
 }
 
 async function removeUserNote() {
+  engagement.record({
+    ui_identifier: 'profile.more.remove_note',
+    mastodon_account_id: account.id,
+    mastodon_account_handle: account.acct,
+    ...engagementDetails['profile.more.remove_note'],
+  })
+
   if (!relationship!.note || relationship!.note.length === 0)
     return
 
@@ -59,6 +88,16 @@ async function removeUserNote() {
   relationship!.note = newNote.note
   emit('removeNote')
 }
+
+function report() {
+  engagement.record({
+    ui_identifier: 'profile.more.report',
+    mastodon_account_id: account.id,
+    mastodon_account_handle: account.acct,
+    ...engagementDetails['profile.more.report'],
+  })
+  openReportDialog(account)
+}
 </script>
 
 <template>
@@ -85,7 +124,6 @@ async function removeUserNote() {
         :text="`Share @${account.acct}`"
         icon="i-ri:share-line"
         :command="command"
-        data-glean="profile.more.share_account"
         @click="shareAccount()"
       />
 
@@ -96,16 +134,14 @@ async function removeUserNote() {
             :text="$t('menu.mention_account', [`@${account.acct}`])"
             icon="i-ri:at-line"
             :command="command"
-            data-glean="profile.more.mention"
-            @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"
-            data-glean="profile.more.direct_message"
-            @click="directMessageUser(account)"
+            @click="directMessageUser(account, 'profile.more.direct_message')"
           />
 
           <CommonDropdownItem
@@ -122,7 +158,6 @@ async function removeUserNote() {
             :text="$t('menu.hide_reblogs', [`@${account.acct}`])"
             icon="i-ri:repeat-line"
             :command="command"
-            data-glean="profile.more.hide_boosts"
             @click="toggleReblogs()"
           />
 
@@ -132,7 +167,6 @@ async function removeUserNote() {
             :text="$t('menu.add_personal_note', [`@${account.acct}`])"
             icon="i-ri-edit-2-line"
             :command="command"
-            data-glean="profile.more.add_note"
             @click="addUserNote()"
           />
           <CommonDropdownItem
@@ -141,7 +175,6 @@ async function removeUserNote() {
             :text="$t('menu.remove_personal_note', [`@${account.acct}`])"
             icon="i-ri-edit-2-line"
             :command="command"
-            data-glean="profile.more.remove_note"
             @click="removeUserNote()"
           />
 
@@ -159,8 +192,7 @@ async function removeUserNote() {
             :text="$t('menu.unmute_account', [`@${account.acct}`])"
             icon="i-ri:volume-up-fill"
             :command="command"
-            data-glean="profile.more.unmute"
-            @click="toggleMuteAccount (relationship!, account)"
+            @click="toggleMuteAccount (relationship!, account, 'profile.more.unmute')"
           />
 
           <CommonDropdownItem
@@ -177,8 +209,7 @@ async function removeUserNote() {
             :text="$t('menu.unblock_account', [`@${account.acct}`])"
             icon="i-ri:checkbox-circle-line"
             :command="command"
-            data-glean="profile.more.unblock"
-            @click="toggleBlockAccount (relationship!, account)"
+            @click="toggleBlockAccount (relationship!, account, 'profile.more.unblock')"
           />
 
           <template v-if="getServerName(account) !== currentServer">
@@ -196,8 +227,7 @@ async function removeUserNote() {
               :text="$t('menu.unblock_domain', [getServerName(account)])"
               icon="i-ri:restart-line"
               :command="command"
-              data-glean="profile.more.unblock_domain"
-              @click="toggleBlockDomain(relationship!, account)"
+              @click="toggleBlockDomain(relationship!, account, 'profile.more.unblock_domain')"
             />
           </template>
 
@@ -206,8 +236,7 @@ async function removeUserNote() {
             :text="$t('menu.report_account', [`@${account.acct}`])"
             icon="i-ri:flag-2-line"
             :command="command"
-            data-glean="profile.more.report"
-            @click="openReportDialog(account)"
+            @click="report()"
           />
         </template>
 
diff --git a/components/common/dropdown/DropdownItem.vue b/components/common/dropdown/DropdownItem.vue
index 74c26c9c20..47326464fe 100644
--- a/components/common/dropdown/DropdownItem.vue
+++ b/components/common/dropdown/DropdownItem.vue
@@ -6,7 +6,7 @@ const props = withDefaults(defineProps<{
   icon?: string
   checked?: boolean
   command?: boolean
-  dataGlean: string
+  dataGlean?: string
 }>(), {
   is: 'div',
 })
diff --git a/composables/masto/relationship.ts b/composables/masto/relationship.ts
index 4293cd5fcd..3c08d87bea 100644
--- a/composables/masto/relationship.ts
+++ b/composables/masto/relationship.ts
@@ -94,6 +94,16 @@ export async function toggleMuteAccount(relationship: mastodon.v1.Relationship,
       })
     }
   }
+  else {
+    if (dataGlean) {
+      engagement.record({
+        ui_identifier: dataGlean,
+        mastodon_account_id: account.id,
+        mastodon_account_handle: account.acct,
+        ...engagementDetails[dataGlean],
+      })
+    }
+  }
 
   relationship!.muting = !relationship!.muting
   relationship = relationship!.muting
@@ -124,6 +134,16 @@ export async function toggleBlockAccount(relationship: mastodon.v1.Relationship,
       })
     }
   }
+  else {
+    if (dataGlean) {
+      engagement.record({
+        ui_identifier: dataGlean,
+        mastodon_account_id: account.id,
+        mastodon_account_handle: account.acct,
+        ...engagementDetails[dataGlean],
+      })
+    }
+  }
 
   relationship!.blocking = !relationship!.blocking
   relationship = await client.v1.accounts[relationship!.blocking ? 'block' : 'unblock'](account.id)
@@ -150,6 +170,16 @@ export async function toggleBlockDomain(relationship: mastodon.v1.Relationship,
       })
     }
   }
+  else {
+    if (dataGlean) {
+      engagement.record({
+        ui_identifier: dataGlean,
+        mastodon_account_id: account.id,
+        mastodon_account_handle: account.acct,
+        ...engagementDetails[dataGlean],
+      })
+    }
+  }
 
   relationship!.domainBlocking = !relationship!.domainBlocking
   await client.v1.domainBlocks[relationship!.domainBlocking ? 'block' : 'unblock'](getServerName(account))
diff --git a/composables/masto/statusDrafts.ts b/composables/masto/statusDrafts.ts
index 82a273078b..1ad5d10837 100644
--- a/composables/masto/statusDrafts.ts
+++ b/composables/masto/statusDrafts.ts
@@ -3,6 +3,8 @@ import type { ComputedRef, Ref } from 'vue'
 import { STORAGE_KEY_DRAFTS } from '~/constants'
 import type { Draft, DraftMap } from '~/types'
 import type { Mutable } from '~/types/utils'
+import { engagement } from '~~/telemetry/generated/ui'
+import { engagementDetails } from '~~/telemetry/engagementDetails'
 
 export const currentUserDrafts = (process.server || process.test)
   ? computed<DraftMap>(() => ({}))
@@ -158,13 +160,31 @@ export function useDraft(
   return { draft, isEmpty }
 }
 
-export function mentionUser(account: mastodon.v1.Account) {
+export function mentionUser(account: mastodon.v1.Account, dataGlean?: string) {
+  if (dataGlean) {
+    engagement.record({
+      ui_identifier: dataGlean,
+      mastodon_account_id: account.id,
+      mastodon_account_handle: account.acct,
+      ...engagementDetails[dataGlean],
+    })
+  }
+
   openPublishDialog('dialog', getDefaultDraft({
     status: `@${account.acct} `,
   }))
 }
 
-export function directMessageUser(account: mastodon.v1.Account) {
+export function directMessageUser(account: mastodon.v1.Account, dataGlean?: string) {
+  if (dataGlean) {
+    engagement.record({
+      ui_identifier: dataGlean,
+      mastodon_account_id: account.id,
+      mastodon_account_handle: account.acct,
+      ...engagementDetails[dataGlean],
+    })
+  }
+
   openPublishDialog('dialog', getDefaultDraft({
     status: `@${account.acct} `,
     visibility: 'direct',

From 1a86114e2663d929f36abe4a4f95ca38a1de3652 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 14:43:33 -0700
Subject: [PATCH 19/43] fix(profiles): consolidate a ton of redundantly
 copied-and-pasted record() calls with helper functions

---
 components/account/AccountMoreButton.vue | 47 ++++----------
 composables/masto/relationship.ts        | 79 +++++++-----------------
 2 files changed, 35 insertions(+), 91 deletions(-)

diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue
index 3e6e6f1a94..ed753113dc 100644
--- a/components/account/AccountMoreButton.vue
+++ b/components/account/AccountMoreButton.vue
@@ -23,13 +23,17 @@ const { client } = $(useMasto())
 const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 const { share, isSupported: isShareSupported } = useShare()
 
-function shareAccount() {
+function recordEngagement(dataGlean) {
   engagement.record({
-    ui_identifier: 'profile.more.share_account',
+    ui_identifier: dataGlean,
     mastodon_account_id: account.id,
     mastodon_account_handle: account.acct,
-    ...engagementDetails['profile.more.share_account'],
+    ...engagementDetails[dataGlean],
   })
+}
+
+function shareAccount() {
+  recordEngagement('profile.more.share_account')
   share({ url: location.href })
 }
 
@@ -41,21 +45,10 @@ async function toggleReblogs() {
       cancel: t('confirm.show_reblogs.cancel'),
     }) !== 'confirm')
       return
-
-    engagement.record({
-      ui_identifier: 'profile.more.show_boosts',
-      mastodon_account_id: account.id,
-      mastodon_account_handle: account.acct,
-      ...engagementDetails['profile.more.show_boosts'],
-    })
+    recordEngagement('profile.more.show_boosts')
   }
   else {
-    engagement.record({
-      ui_identifier: 'profile.more.hide_boosts',
-      mastodon_account_id: account.id,
-      mastodon_account_handle: account.acct,
-      ...engagementDetails['profile.more.hide_boosts'],
-    })
+    recordEngagement('profile.more.hide_boosts')
   }
 
   const showingReblogs = !relationship?.showingReblogs
@@ -63,23 +56,12 @@ async function toggleReblogs() {
 }
 
 async function addUserNote() {
-  engagement.record({
-    ui_identifier: 'profile.more.add_note',
-    mastodon_account_id: account.id,
-    mastodon_account_handle: account.acct,
-    ...engagementDetails['profile.more.add_note'],
-  })
-
+  recordEngagement('profile.more.add_note')
   emit('addNote')
 }
 
 async function removeUserNote() {
-  engagement.record({
-    ui_identifier: 'profile.more.remove_note',
-    mastodon_account_id: account.id,
-    mastodon_account_handle: account.acct,
-    ...engagementDetails['profile.more.remove_note'],
-  })
+  recordEngagement('profile.more.remove_note')
 
   if (!relationship!.note || relationship!.note.length === 0)
     return
@@ -90,12 +72,7 @@ async function removeUserNote() {
 }
 
 function report() {
-  engagement.record({
-    ui_identifier: 'profile.more.report',
-    mastodon_account_id: account.id,
-    mastodon_account_handle: account.acct,
-    ...engagementDetails['profile.more.report'],
-  })
+  recordEngagement('profile.more.report')
   openReportDialog(account)
 }
 </script>
diff --git a/composables/masto/relationship.ts b/composables/masto/relationship.ts
index 3c08d87bea..a135886215 100644
--- a/composables/masto/relationship.ts
+++ b/composables/masto/relationship.ts
@@ -34,6 +34,15 @@ async function fetchRelationships() {
     requested[i][1].value = relationships[i]
 }
 
+function recordEngagement(dataGlean: string, account: mastodon.v1.Account) {
+  engagement.record({
+    ui_identifier: dataGlean,
+    mastodon_account_id: account.id,
+    mastodon_account_handle: account.acct,
+    ...engagementDetails[dataGlean],
+  })
+}
+
 export async function toggleFollowAccount(relationship: mastodon.v1.Relationship, account: mastodon.v1.Account, dataGlean?: string) {
   const { client } = $(useMasto())
   const i18n = useNuxtApp().$i18n
@@ -49,14 +58,8 @@ export async function toggleFollowAccount(relationship: mastodon.v1.Relationship
     }) !== 'confirm')
       return
 
-    if (dataGlean) {
-      engagement.record({
-        ui_identifier: dataGlean,
-        mastodon_account_id: account.id,
-        mastodon_account_handle: account.acct,
-        ...engagementDetails[dataGlean],
-      })
-    }
+    if (dataGlean)
+      recordEngagement(dataGlean, account)
   }
 
   if (unfollow) {
@@ -85,24 +88,12 @@ export async function toggleMuteAccount(relationship: mastodon.v1.Relationship,
     }) !== 'confirm')
       return
 
-    if (dataGlean) {
-      engagement.record({
-        ui_identifier: dataGlean,
-        mastodon_account_id: account.id,
-        mastodon_account_handle: account.acct,
-        ...engagementDetails[dataGlean],
-      })
-    }
+    if (dataGlean)
+      recordEngagement(dataGlean, account)
   }
   else {
-    if (dataGlean) {
-      engagement.record({
-        ui_identifier: dataGlean,
-        mastodon_account_id: account.id,
-        mastodon_account_handle: account.acct,
-        ...engagementDetails[dataGlean],
-      })
-    }
+    if (dataGlean)
+      recordEngagement(dataGlean, account)
   }
 
   relationship!.muting = !relationship!.muting
@@ -125,24 +116,12 @@ export async function toggleBlockAccount(relationship: mastodon.v1.Relationship,
     }) !== 'confirm')
       return
 
-    if (dataGlean) {
-      engagement.record({
-        ui_identifier: dataGlean,
-        mastodon_account_id: account.id,
-        mastodon_account_handle: account.acct,
-        ...engagementDetails[dataGlean],
-      })
-    }
+    if (dataGlean)
+      recordEngagement(dataGlean, account)
   }
   else {
-    if (dataGlean) {
-      engagement.record({
-        ui_identifier: dataGlean,
-        mastodon_account_id: account.id,
-        mastodon_account_handle: account.acct,
-        ...engagementDetails[dataGlean],
-      })
-    }
+    if (dataGlean)
+      recordEngagement(dataGlean, account)
   }
 
   relationship!.blocking = !relationship!.blocking
@@ -161,24 +140,12 @@ export async function toggleBlockDomain(relationship: mastodon.v1.Relationship,
     }) !== 'confirm')
       return
 
-    if (dataGlean) {
-      engagement.record({
-        ui_identifier: dataGlean,
-        mastodon_account_id: account.id,
-        mastodon_account_handle: account.acct,
-        ...engagementDetails[dataGlean],
-      })
-    }
+    if (dataGlean)
+      recordEngagement(dataGlean, account)
   }
   else {
-    if (dataGlean) {
-      engagement.record({
-        ui_identifier: dataGlean,
-        mastodon_account_id: account.id,
-        mastodon_account_handle: account.acct,
-        ...engagementDetails[dataGlean],
-      })
-    }
+    if (dataGlean)
+      recordEngagement(dataGlean, account)
   }
 
   relationship!.domainBlocking = !relationship!.domainBlocking

From b1d2788fa280332827c796cf8f77cc2f397b50f4 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 14:48:55 -0700
Subject: [PATCH 20/43] fix(profile): make gleanContext optional

---
 components/account/AccountFollowButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index 66a9bf7edb..68519dd211 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -7,7 +7,7 @@ import { toggleFollowAccount, useRelationship } from '~~/composables/masto/relat
 const { account, command, context, gleanContext, ...props } = defineProps<{
   account: mastodon.v1.Account
   relationship?: mastodon.v1.Relationship
-  gleanContext: string
+  gleanContext?: string
   context?: 'followedBy' | 'following'
   command?: boolean
 }>()

From 035000dc38fe70eed965d3be39bd7f18862f68e9 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 15:07:33 -0700
Subject: [PATCH 21/43] fix(profile): break out profile events into own file

---
 telemetry/engagementDetails.ts       | 119 +--------------------------
 telemetry/engagementProfileEvents.js | 116 ++++++++++++++++++++++++++
 2 files changed, 118 insertions(+), 117 deletions(-)
 create mode 100644 telemetry/engagementProfileEvents.js

diff --git a/telemetry/engagementDetails.ts b/telemetry/engagementDetails.ts
index cb8959b918..43eb565bfc 100644
--- a/telemetry/engagementDetails.ts
+++ b/telemetry/engagementDetails.ts
@@ -1,3 +1,5 @@
+import { profileEvents } from './engagementProfileEvents'
+
 interface EngagementDetails {
   [propName: string]: {
     engagement_type: string
@@ -5,123 +7,6 @@ interface EngagementDetails {
   }
 }
 
-const profileEvents = {
-  // follow button
-  'profile.follow.unblock': {
-    engagement_type: 'general',
-  },
-  'profile.follow.unmute': {
-    engagement_type: 'general',
-  },
-  'profile.follow.unfollow': {
-    engagement_type: 'general',
-  },
-  'profile.follow.follow': {
-    engagement_type: 'general',
-  },
-  'profile.follow.withdraw-follow-request': {
-    engagement_type: 'general',
-  },
-  'profile.follow.follow-request': {
-    engagement_type: 'general',
-  },
-  // more button
-  'profile.more.open': {
-    engagement_type: 'general',
-  },
-  'profile.more.open_in_original_site': {
-    engagement_type: 'general',
-  },
-  'profile.more.share_account': {
-    engagement_type: 'general',
-  },
-  'profile.more.mention': {
-    engagement_type: 'general',
-  },
-  'profile.more.direct_message': {
-    engagement_type: 'general',
-  },
-  'profile.more.show_boosts': {
-    engagement_type: 'general',
-  },
-  'profile.more.hide_boosts': {
-    engagement_type: 'general',
-  },
-  'profile.more.add_note': {
-    engagement_type: 'general',
-  },
-  'profile.more.remove_note': {
-    engagement_type: 'general',
-  },
-  'profile.more.mute': {
-    engagement_type: 'general',
-  },
-  'profile.more.unmute': {
-    engagement_type: 'general',
-  },
-  'profile.more.block': {
-    engagement_type: 'general',
-  },
-  'profile.more.unblock': {
-    engagement_type: 'general',
-  },
-  'profile.more.block_domain': {
-    engagement_type: 'general',
-  },
-  'profile.more.unblock_domain': {
-    engagement_type: 'general',
-  },
-  'profile.more.report': {
-    engagement_type: 'general',
-  },
-  'profile.more.goto_pinned': {
-    engagement_type: 'general',
-  },
-  'profile.more.goto_favorites': {
-    engagement_type: 'general',
-  },
-  'profile.more.goto_mutes': {
-    engagement_type: 'general',
-  },
-  'profile.more.goto_blocks': {
-    engagement_type: 'general',
-  },
-  'profile.more.goto_domain_blocks': {
-    engagement_type: 'general',
-  },
-  // notifications
-  'profile.notify_start': {
-    engagement_type: 'general',
-  },
-  'profile.notify_stop': {
-    engagement_type: 'general',
-  },
-  // modify lists
-  'profile.modify_lists': {
-    engagement_type: 'general',
-  },
-  // details
-  'profile.details.posts': {
-    engagement_type: 'general',
-  },
-  'profile.details.following': {
-    engagement_type: 'general',
-  },
-  'profile.details.followers': {
-    engagement_type: 'general',
-  },
-  // tabs
-  'profile.tabs.posts': {
-    engagement_type: 'general',
-  },
-  'profile.tabs.posts_and_replies': {
-    engagement_type: 'general',
-  },
-  'profile.tabs.media': {
-    engagement_type: 'general',
-  },
-}
-
 export const engagementDetails: EngagementDetails = {
   'settings.interface.colorMode': {
     engagement_type: 'general',
diff --git a/telemetry/engagementProfileEvents.js b/telemetry/engagementProfileEvents.js
new file mode 100644
index 0000000000..779008801a
--- /dev/null
+++ b/telemetry/engagementProfileEvents.js
@@ -0,0 +1,116 @@
+export const profileEvents = {
+  // follow button
+  'profile.follow.unblock': {
+    engagement_type: 'general',
+  },
+  'profile.follow.unmute': {
+    engagement_type: 'general',
+  },
+  'profile.follow.unfollow': {
+    engagement_type: 'general',
+  },
+  'profile.follow.follow': {
+    engagement_type: 'general',
+  },
+  'profile.follow.withdraw-follow-request': {
+    engagement_type: 'general',
+  },
+  'profile.follow.follow-request': {
+    engagement_type: 'general',
+  },
+  // more button
+  'profile.more.open': {
+    engagement_type: 'general',
+  },
+  'profile.more.open_in_original_site': {
+    engagement_type: 'general',
+  },
+  'profile.more.share_account': {
+    engagement_type: 'general',
+  },
+  'profile.more.mention': {
+    engagement_type: 'general',
+  },
+  'profile.more.direct_message': {
+    engagement_type: 'general',
+  },
+  'profile.more.show_boosts': {
+    engagement_type: 'general',
+  },
+  'profile.more.hide_boosts': {
+    engagement_type: 'general',
+  },
+  'profile.more.add_note': {
+    engagement_type: 'general',
+  },
+  'profile.more.remove_note': {
+    engagement_type: 'general',
+  },
+  'profile.more.mute': {
+    engagement_type: 'general',
+  },
+  'profile.more.unmute': {
+    engagement_type: 'general',
+  },
+  'profile.more.block': {
+    engagement_type: 'general',
+  },
+  'profile.more.unblock': {
+    engagement_type: 'general',
+  },
+  'profile.more.block_domain': {
+    engagement_type: 'general',
+  },
+  'profile.more.unblock_domain': {
+    engagement_type: 'general',
+  },
+  'profile.more.report': {
+    engagement_type: 'general',
+  },
+  'profile.more.goto_pinned': {
+    engagement_type: 'general',
+  },
+  'profile.more.goto_favorites': {
+    engagement_type: 'general',
+  },
+  'profile.more.goto_mutes': {
+    engagement_type: 'general',
+  },
+  'profile.more.goto_blocks': {
+    engagement_type: 'general',
+  },
+  'profile.more.goto_domain_blocks': {
+    engagement_type: 'general',
+  },
+  // notifications
+  'profile.notify_start': {
+    engagement_type: 'general',
+  },
+  'profile.notify_stop': {
+    engagement_type: 'general',
+  },
+  // modify lists
+  'profile.modify_lists': {
+    engagement_type: 'general',
+  },
+  // details
+  'profile.details.posts': {
+    engagement_type: 'general',
+  },
+  'profile.details.following': {
+    engagement_type: 'general',
+  },
+  'profile.details.followers': {
+    engagement_type: 'general',
+  },
+  // tabs
+  'profile.tabs.posts': {
+    engagement_type: 'general',
+  },
+  'profile.tabs.posts_and_replies': {
+    engagement_type: 'general',
+  },
+  'profile.tabs.media': {
+    engagement_type: 'general',
+  },
+}

From 41fb0e38e3f1a67b9e67c5a95ada014a7c15e336 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 18 Oct 2023 15:15:18 -0700
Subject: [PATCH 22/43] fix(profile): update comments on engagement events list

---
 telemetry/engagementProfileEvents.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/telemetry/engagementProfileEvents.js b/telemetry/engagementProfileEvents.js
index 779008801a..fc0ffd2a5f 100644
--- a/telemetry/engagementProfileEvents.js
+++ b/telemetry/engagementProfileEvents.js
@@ -18,7 +18,7 @@ export const profileEvents = {
   'profile.follow.follow-request': {
     engagement_type: 'general',
   },
-  // more button
+  // more button and more options dropdown
   'profile.more.open': {
     engagement_type: 'general',
   },
@@ -93,7 +93,7 @@ export const profileEvents = {
   'profile.modify_lists': {
     engagement_type: 'general',
   },
-  // details
+  // metrics details (# of posts, # of following, # of followers)
   'profile.details.posts': {
     engagement_type: 'general',
   },
@@ -103,7 +103,7 @@ export const profileEvents = {
   'profile.details.followers': {
     engagement_type: 'general',
   },
-  // tabs
+  // tabs (posts, post & replies, media)
   'profile.tabs.posts': {
     engagement_type: 'general',
   },

From c32887529206a4c98b4c4ea9e7e0c1247bbe8b84 Mon Sep 17 00:00:00 2001
From: Aly Fluckey <afluckey@mozilla.com>
Date: Thu, 19 Oct 2023 17:46:57 -0400
Subject: [PATCH 23/43] fix(glean): update event names to use kebab-case

---
 components/account/AccountHeader.vue        |  2 +-
 components/account/AccountMoreButton.vue    | 28 +++++++++---------
 components/settings/SettingsColorMode.vue   |  2 +-
 components/settings/SettingsFontSize.vue    |  2 +-
 components/settings/SettingsThemeColors.vue |  2 +-
 telemetry/engagementDetails.ts              |  6 ++--
 telemetry/engagementProfileEvents.js        | 32 ++++++++++-----------
 7 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 89fa9e4517..55846c9968 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -163,7 +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"
+                    data-glean="profile.modify-lists"
                   >
                     <span i-ri:play-list-add-fill block text-current />
                   </button>
diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue
index ed753113dc..e79bb7b01a 100644
--- a/components/account/AccountMoreButton.vue
+++ b/components/account/AccountMoreButton.vue
@@ -33,7 +33,7 @@ function recordEngagement(dataGlean) {
 }
 
 function shareAccount() {
-  recordEngagement('profile.more.share_account')
+  recordEngagement('profile.more.share-account')
   share({ url: location.href })
 }
 
@@ -45,10 +45,10 @@ async function toggleReblogs() {
       cancel: t('confirm.show_reblogs.cancel'),
     }) !== 'confirm')
       return
-    recordEngagement('profile.more.show_boosts')
+    recordEngagement('profile.more.show-boosts')
   }
   else {
-    recordEngagement('profile.more.hide_boosts')
+    recordEngagement('profile.more.hide-boosts')
   }
 
   const showingReblogs = !relationship?.showingReblogs
@@ -56,12 +56,12 @@ async function toggleReblogs() {
 }
 
 async function addUserNote() {
-  recordEngagement('profile.more.add_note')
+  recordEngagement('profile.more.add-note')
   emit('addNote')
 }
 
 async function removeUserNote() {
-  recordEngagement('profile.more.remove_note')
+  recordEngagement('profile.more.remove-note')
 
   if (!relationship!.note || relationship!.note.length === 0)
     return
@@ -92,7 +92,7 @@ function report() {
           :text="$t('menu.open_in_original_site')"
           icon="i-ri:arrow-right-up-line"
           :command="command"
-          data-glean="profile.more.open_in_original_site"
+          data-glean="profile.more.open-in-original-site"
         />
       </NuxtLink>
       <CommonDropdownItem
@@ -118,7 +118,7 @@ function report() {
             :text="$t('menu.direct_message_account', [`@${account.acct}`])"
             icon="i-ri:message-3-line"
             :command="command"
-            @click="directMessageUser(account, 'profile.more.direct_message')"
+            @click="directMessageUser(account, 'profile.more.direct-message')"
           />
 
           <CommonDropdownItem
@@ -196,7 +196,7 @@ function report() {
               :text="$t('menu.block_domain', [getServerName(account)])"
               icon="i-ri:shut-down-line"
               :command="command"
-              @click="toggleBlockDomain(relationship!, account, 'profile.more.block_domain')"
+              @click="toggleBlockDomain(relationship!, account, 'profile.more.block-domain')"
             />
             <CommonDropdownItem
               is="button"
@@ -204,7 +204,7 @@ function report() {
               :text="$t('menu.unblock_domain', [getServerName(account)])"
               icon="i-ri:restart-line"
               :command="command"
-              @click="toggleBlockDomain(relationship!, account, 'profile.more.unblock_domain')"
+              @click="toggleBlockDomain(relationship!, account, 'profile.more.unblock-domain')"
             />
           </template>
 
@@ -219,19 +219,19 @@ function report() {
 
         <template v-else>
           <NuxtLink to="/pinned">
-            <CommonDropdownItem is="button" :text="$t('account.pinned')" icon="i-ri:pushpin-line" :command="command" data-glean="profile.more.goto_pinned" />
+            <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 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" />
+            <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 is="button" :text="$t('account.muted_users')" icon="i-ri:volume-mute-line" :command="command" data-glean="profile.more.goto_mutes" />
+            <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 is="button" :text="$t('account.blocked_users')" icon="i-ri:forbid-2-line" :command="command" data-glean="profile.more.goto_blocks" />
+            <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 is="button" :text="$t('account.blocked_domains')" icon="i-ri:shut-down-line" :command="command" data-glean="profile.more.goto_domain_blocks" />
+            <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>
diff --git a/components/settings/SettingsColorMode.vue b/components/settings/SettingsColorMode.vue
index 0fd610e160..325e214d3f 100644
--- a/components/settings/SettingsColorMode.vue
+++ b/components/settings/SettingsColorMode.vue
@@ -31,7 +31,7 @@ const modes = [
     <button
       v-for="{ icon, label, mode } in modes"
       :key="mode"
-      data-glean="settings.interface.colorMode"
+      data-glean="settings.interface.color-mode"
       :data-glean-value="`${mode}`"
       btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
       :tabindex="colorMode.preference === mode ? 0 : -1"
diff --git a/components/settings/SettingsFontSize.vue b/components/settings/SettingsFontSize.vue
index 4fdab46712..185c45f8b0 100644
--- a/components/settings/SettingsFontSize.vue
+++ b/components/settings/SettingsFontSize.vue
@@ -22,7 +22,7 @@ function setFontSize(e: Event) {
         :min="0"
         :max="sizes.length - 1"
         :step="1"
-        data-glean="settings.interface.fontSize"
+        data-glean="settings.interface.font-size"
         :data-glean-value="`${sizes.indexOf(userSettings.fontSize)}`"
         type="range"
         focus:outline-none
diff --git a/components/settings/SettingsThemeColors.vue b/components/settings/SettingsThemeColors.vue
index afeb408519..2f26bba1c3 100644
--- a/components/settings/SettingsThemeColors.vue
+++ b/components/settings/SettingsThemeColors.vue
@@ -21,7 +21,7 @@ function updateTheme(theme: ThemeColors) {
       }"
       :class="currentTheme === key ? 'ring-2' : 'scale-90'"
       :title="key"
-      data-glean="settings.interface.themeColor"
+      data-glean="settings.interface.theme-color"
       :data-glean-value="`${key}`"
       w-8 h-8 rounded-full transition-all
       ring="$local-ring-color offset-3 offset-$c-bg-base"
diff --git a/telemetry/engagementDetails.ts b/telemetry/engagementDetails.ts
index 43eb565bfc..a5a33589e5 100644
--- a/telemetry/engagementDetails.ts
+++ b/telemetry/engagementDetails.ts
@@ -8,13 +8,13 @@ interface EngagementDetails {
 }
 
 export const engagementDetails: EngagementDetails = {
-  'settings.interface.colorMode': {
+  'settings.interface.color-mode': {
     engagement_type: 'general',
   },
-  'settings.interface.fontSize': {
+  'settings.interface.font-size': {
     engagement_type: 'general',
   },
-  'settings.interface.themeColor': {
+  'settings.interface.theme-color': {
     engagement_type: 'general',
   },
   ...profileEvents,
diff --git a/telemetry/engagementProfileEvents.js b/telemetry/engagementProfileEvents.js
index fc0ffd2a5f..b723b07a84 100644
--- a/telemetry/engagementProfileEvents.js
+++ b/telemetry/engagementProfileEvents.js
@@ -22,28 +22,28 @@ export const profileEvents = {
   'profile.more.open': {
     engagement_type: 'general',
   },
-  'profile.more.open_in_original_site': {
+  'profile.more.open-in-original-site': {
     engagement_type: 'general',
   },
-  'profile.more.share_account': {
+  'profile.more.share-account': {
     engagement_type: 'general',
   },
   'profile.more.mention': {
     engagement_type: 'general',
   },
-  'profile.more.direct_message': {
+  'profile.more.direct-message': {
     engagement_type: 'general',
   },
-  'profile.more.show_boosts': {
+  'profile.more.show-boosts': {
     engagement_type: 'general',
   },
-  'profile.more.hide_boosts': {
+  'profile.more.hide-boosts': {
     engagement_type: 'general',
   },
-  'profile.more.add_note': {
+  'profile.more.add-note': {
     engagement_type: 'general',
   },
-  'profile.more.remove_note': {
+  'profile.more.remove-note': {
     engagement_type: 'general',
   },
   'profile.more.mute': {
@@ -58,28 +58,28 @@ export const profileEvents = {
   'profile.more.unblock': {
     engagement_type: 'general',
   },
-  'profile.more.block_domain': {
+  'profile.more.block-domain': {
     engagement_type: 'general',
   },
-  'profile.more.unblock_domain': {
+  'profile.more.unblock-domain': {
     engagement_type: 'general',
   },
   'profile.more.report': {
     engagement_type: 'general',
   },
-  'profile.more.goto_pinned': {
+  'profile.more.goto-pinned': {
     engagement_type: 'general',
   },
-  'profile.more.goto_favorites': {
+  'profile.more.goto-favorites': {
     engagement_type: 'general',
   },
-  'profile.more.goto_mutes': {
+  'profile.more.goto-mutes': {
     engagement_type: 'general',
   },
-  'profile.more.goto_blocks': {
+  'profile.more.goto-blocks': {
     engagement_type: 'general',
   },
-  'profile.more.goto_domain_blocks': {
+  'profile.more.goto-domain-blocks': {
     engagement_type: 'general',
   },
   // notifications
@@ -90,7 +90,7 @@ export const profileEvents = {
     engagement_type: 'general',
   },
   // modify lists
-  'profile.modify_lists': {
+  'profile.modify-lists': {
     engagement_type: 'general',
   },
   // metrics details (# of posts, # of following, # of followers)
@@ -107,7 +107,7 @@ export const profileEvents = {
   'profile.tabs.posts': {
     engagement_type: 'general',
   },
-  'profile.tabs.posts_and_replies': {
+  'profile.tabs.posts-and-replies': {
     engagement_type: 'general',
   },
   'profile.tabs.media': {

From 67e84ca427dd8f84b3d4a999c1a485aac2d8ec18 Mon Sep 17 00:00:00 2001
From: Aly Fluckey <afluckey@mozilla.com>
Date: Thu, 19 Oct 2023 17:47:38 -0400
Subject: [PATCH 24/43] fix(recordEngagement): add type

---
 components/account/AccountMoreButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue
index e79bb7b01a..7005cfd26d 100644
--- a/components/account/AccountMoreButton.vue
+++ b/components/account/AccountMoreButton.vue
@@ -23,7 +23,7 @@ const { client } = $(useMasto())
 const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 const { share, isSupported: isShareSupported } = useShare()
 
-function recordEngagement(dataGlean) {
+function recordEngagement(dataGlean: string) {
   engagement.record({
     ui_identifier: dataGlean,
     mastodon_account_id: account.id,

From 2989ae2bb20d5026724cf8fa112fcb9a8dcfc569 Mon Sep 17 00:00:00 2001
From: Aly Fluckey <afluckey@mozilla.com>
Date: Thu, 19 Oct 2023 17:48:22 -0400
Subject: [PATCH 25/43] fix(glean): rename profile.notify events

---
 components/account/AccountHeader.vue | 2 +-
 telemetry/engagementProfileEvents.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 55846c9968..9ed70e1aad 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -52,7 +52,7 @@ function previewAvatar() {
 }
 
 async function toggleNotifications() {
-  const dataGlean = relationship?.notifying ? 'profile.notify_stop' : 'profile.notify_start'
+  const dataGlean = relationship?.notifying ? 'profile.notify.stop' : 'profile.notify.start'
   engagement.record({
     ui_identifier: dataGlean,
     mastodon_account_id: account.id,
diff --git a/telemetry/engagementProfileEvents.js b/telemetry/engagementProfileEvents.js
index b723b07a84..63bce6d105 100644
--- a/telemetry/engagementProfileEvents.js
+++ b/telemetry/engagementProfileEvents.js
@@ -83,10 +83,10 @@ export const profileEvents = {
     engagement_type: 'general',
   },
   // notifications
-  'profile.notify_start': {
+  'profile.notify.start': {
     engagement_type: 'general',
   },
-  'profile.notify_stop': {
+  'profile.notify.stop': {
     engagement_type: 'general',
   },
   // modify lists

From 03d81d65a459c463791c62f24ac4351197ef0595 Mon Sep 17 00:00:00 2001
From: Anthony Liddle <anthonyliddle@gmail.com>
Date: Tue, 24 Oct 2023 13:22:08 -0700
Subject: [PATCH 26/43] fix(discover): add impression, click, and share events

---
 .../recommendation/RecommendationArticle.vue  | 25 ++++++++++++++++---
 composables/recommendations.ts                |  2 +-
 telemetry/engagementDetails.ts                |  6 +++++
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/components/recommendation/RecommendationArticle.vue b/components/recommendation/RecommendationArticle.vue
index 157191a969..3a04e72f33 100644
--- a/components/recommendation/RecommendationArticle.vue
+++ b/components/recommendation/RecommendationArticle.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { Recommendation } from '../composables/recommendations'
+import { engagement, impression } from '~~/telemetry/generated/ui'
+import { engagementDetails } from '~~/telemetry/engagementDetails'
 
 const {
   item,
@@ -7,25 +9,42 @@ const {
   item: Recommendation
 }>()
 
+function recordEngagement(gleanId) {
+  engagement.record({
+    ui_identifier: gleanId,
+    recommendation_id: item.id,
+    ...engagementDetails[gleanId],
+  })
+}
+
+function recordImpression() {
+  impression.record({
+    ui_identifier: 'discover.recommendation.impression',
+    recommendation_id: item.id,
+  })
+}
+
 const target = ref<HTMLDivElement>()
 const { isActive } = useIntersectionObserver(target, checkIntersection, { threshold: 0.5 })
 
 function checkIntersection([{ isIntersecting }]: [{ isIntersecting: boolean }]): void {
   if (isIntersecting && isActive.value) {
-    // fire analytics event here: item.id || item.title || item.url
+    recordImpression()
     isActive.value = false
   }
 }
 
 const clipboard = useClipboard()
 async function copyLink(url: string): void {
-  if (url)
+  if (url) {
     await clipboard.copy(url)
+    recordEngagement('discover.recommendation.share')
+  }
 }
 </script>
 
 <template>
-  <NuxtLink ref="target" :to="item.url" target="_blank" external mt-5 p-x-8px flex>
+  <NuxtLink ref="target" :to="item.url" target="_blank" external mt-5 p-x-8px flex @click="recordEngagement('discover.recommendation.open')">
     <div class="content" w-full pr>
       <h4 text-sm text-secondary>
         {{ item.publisher }}
diff --git a/composables/recommendations.ts b/composables/recommendations.ts
index 31501d776d..1357a3add2 100644
--- a/composables/recommendations.ts
+++ b/composables/recommendations.ts
@@ -6,7 +6,7 @@ export interface Recommendation {
   /** Constant identifier for Recommendation type objects. */
   __typename: string
   /** Numerical identifier for the Recommendation. This is specifically a number for Fx client and Mozilla data pipeline compatibility. */
-  tileId: number
+  id: number
   /** The URL the Recommendation. */
   url: string
   /** The title of the Recommendation. */
diff --git a/telemetry/engagementDetails.ts b/telemetry/engagementDetails.ts
index ca29cc8d4d..5a2fc86400 100644
--- a/telemetry/engagementDetails.ts
+++ b/telemetry/engagementDetails.ts
@@ -15,4 +15,10 @@ export const engagementDetails: EngagementDetails = {
   'settings.interface.themeColor': {
     engagement_type: 'general',
   },
+  'discover.recommendation.open': {
+    engagement_type: 'general',
+  },
+  'discover.recommendation.share': {
+    engagement_type: 'general',
+  },
 }

From dd6410c07095cc33dd86c1b72ee5f711943eaf3b Mon Sep 17 00:00:00 2001
From: Anthony Liddle <anthonyliddle@gmail.com>
Date: Tue, 24 Oct 2023 13:22:44 -0700
Subject: [PATCH 27/43] fix(discover): add impression, click, and share events

---
 components/recommendation/RecommendationArticle.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/recommendation/RecommendationArticle.vue b/components/recommendation/RecommendationArticle.vue
index 3a04e72f33..e61555f0d2 100644
--- a/components/recommendation/RecommendationArticle.vue
+++ b/components/recommendation/RecommendationArticle.vue
@@ -9,7 +9,7 @@ const {
   item: Recommendation
 }>()
 
-function recordEngagement(gleanId) {
+function recordEngagement(gleanId: string) {
   engagement.record({
     ui_identifier: gleanId,
     recommendation_id: item.id,

From ad1d671f339060823bfbd5eb19c864f76c0b9352 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Tue, 24 Oct 2023 13:44:49 -0700
Subject: [PATCH 28/43] fix(profile): rename open report identifier

---
 components/account/AccountMoreButton.vue | 2 +-
 telemetry/engagementProfileEvents.js     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue
index ed753113dc..a720f78124 100644
--- a/components/account/AccountMoreButton.vue
+++ b/components/account/AccountMoreButton.vue
@@ -72,7 +72,7 @@ async function removeUserNote() {
 }
 
 function report() {
-  recordEngagement('profile.more.report')
+  recordEngagement('profile.more.report.open')
   openReportDialog(account)
 }
 </script>
diff --git a/telemetry/engagementProfileEvents.js b/telemetry/engagementProfileEvents.js
index fc0ffd2a5f..e9649fe9f5 100644
--- a/telemetry/engagementProfileEvents.js
+++ b/telemetry/engagementProfileEvents.js
@@ -64,7 +64,7 @@ export const profileEvents = {
   'profile.more.unblock_domain': {
     engagement_type: 'general',
   },
-  'profile.more.report': {
+  'profile.more.report.open': {
     engagement_type: 'general',
   },
   'profile.more.goto_pinned': {

From 77851e14276d7a65263a3cdfc190d680e59c38c6 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Tue, 24 Oct 2023 13:45:25 -0700
Subject: [PATCH 29/43] fix(profile): make follow unclick less clever and fix
 unmute + unfollow case

---
 components/account/AccountFollowButton.vue | 30 +++++++++++-----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index 68519dd211..751c5d56be 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -96,23 +96,23 @@ function handleClick() {
   // Unfollow actions require a 2nd layer of confirmation from the dialogue triggered by toggleFollowAccount,
   // so we skip sending engagement events here
   // See 'follow.unfollow' and 'follow.withdraw-follow-request'
-  if (unfollow)
-    return toggleFollowAccount(relationship!, account, dataGlean)
-
-  engagement.record({
-    ui_identifier: dataGlean,
-    mastodon_account_id: account.id,
-    mastodon_account_handle: account.acct,
-    ...engagementDetails[dataGlean],
-  })
+  if (!unfollow) {
+    engagement.record({
+      ui_identifier: dataGlean,
+      mastodon_account_id: account.id,
+      mastodon_account_handle: account.acct,
+      ...engagementDetails[dataGlean],
+    })
+  }
 
   if (relationship?.blocking)
-    return unblock()
-
-  if (relationship?.muting)
-    return unmute()
-
-  return toggleFollowAccount(relationship!, account)
+    unblock()
+  else if (relationship?.muting)
+    unmute()
+  else if (unfollow)
+    toggleFollowAccount(relationship!, account, dataGlean)
+  else
+    toggleFollowAccount(relationship!, account)
 }
 </script>
 

From 386f5645f68d4836c88939afd0cef5ecca69b921 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Tue, 24 Oct 2023 13:54:14 -0700
Subject: [PATCH 30/43] fix(profile): rename follow to follow-btn

---
 components/account/AccountFollowButton.vue | 14 +++++++-------
 telemetry/engagementProfileEvents.js       | 12 ++++++------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index 751c5d56be..14192bf1b2 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -75,17 +75,17 @@ const dataGlean = $computed(() => {
 
   let action
   if (relationship?.blocking)
-    action = 'follow.unblock'
+    action = 'follow-btn.unblock'
   else if (relationship?.muting)
-    action = 'follow.unmute'
+    action = 'follow-btn.unmute'
   else if (relationship ? relationship.following : context === 'following')
-    action = 'follow.unfollow'
+    action = 'follow-btn.unfollow'
   else if (relationship?.requested)
-    action = 'follow.withdraw-follow-request'
+    action = 'follow-btn.withdraw-follow-request'
   else if ((relationship ? relationship.followedBy : context === 'followedBy') && account.locked)
-    action = 'follow.follow-request'
+    action = 'follow-btn.follow-request'
   else
-    action = 'follow.follow'
+    action = 'follow-btn.follow'
 
   return `${gleanContext}.${action}`
 })
@@ -95,7 +95,7 @@ function handleClick() {
 
   // Unfollow actions require a 2nd layer of confirmation from the dialogue triggered by toggleFollowAccount,
   // so we skip sending engagement events here
-  // See 'follow.unfollow' and 'follow.withdraw-follow-request'
+  // See 'follow-btn.unfollow' and 'follow-btn.withdraw-follow-request'
   if (!unfollow) {
     engagement.record({
       ui_identifier: dataGlean,
diff --git a/telemetry/engagementProfileEvents.js b/telemetry/engagementProfileEvents.js
index e9649fe9f5..4c0ed3d09b 100644
--- a/telemetry/engagementProfileEvents.js
+++ b/telemetry/engagementProfileEvents.js
@@ -1,21 +1,21 @@
 export const profileEvents = {
   // follow button
-  'profile.follow.unblock': {
+  'profile.follow-btn.unblock': {
     engagement_type: 'general',
   },
-  'profile.follow.unmute': {
+  'profile.follow-btn.unmute': {
     engagement_type: 'general',
   },
-  'profile.follow.unfollow': {
+  'profile.follow-btn.unfollow': {
     engagement_type: 'general',
   },
-  'profile.follow.follow': {
+  'profile.follow-btn.follow': {
     engagement_type: 'general',
   },
-  'profile.follow.withdraw-follow-request': {
+  'profile.follow-btn.withdraw-follow-request': {
     engagement_type: 'general',
   },
-  'profile.follow.follow-request': {
+  'profile.follow-btn.follow-request': {
     engagement_type: 'general',
   },
   // more button and more options dropdown

From 2f4a0b71a775a54923545f315c7d5057d35e1d04 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Tue, 24 Oct 2023 14:05:52 -0700
Subject: [PATCH 31/43] fix(profile): fixed the follow button unblock event not
 firing if you are also following

---
 components/account/AccountFollowButton.vue | 24 +++++++++++++---------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index 14192bf1b2..737ac2d035 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -91,12 +91,7 @@ const dataGlean = $computed(() => {
 })
 
 function handleClick() {
-  const unfollow = relationship?.following || relationship?.requested
-
-  // Unfollow actions require a 2nd layer of confirmation from the dialogue triggered by toggleFollowAccount,
-  // so we skip sending engagement events here
-  // See 'follow-btn.unfollow' and 'follow-btn.withdraw-follow-request'
-  if (!unfollow) {
+  function recordEngagement() {
     engagement.record({
       ui_identifier: dataGlean,
       mastodon_account_id: account.id,
@@ -105,14 +100,23 @@ function handleClick() {
     })
   }
 
-  if (relationship?.blocking)
+  const unfollow = relationship?.following || relationship?.requested
+
+  if (relationship?.blocking) {
     unblock()
-  else if (relationship?.muting)
+    recordEngagement()
+  }
+  else if (relationship?.muting) {
     unmute()
-  else if (unfollow)
+    recordEngagement()
+  }
+  else if (unfollow) {
     toggleFollowAccount(relationship!, account, dataGlean)
-  else
+  }
+  else {
     toggleFollowAccount(relationship!, account)
+    recordEngagement()
+  }
 }
 </script>
 

From 7e256c5b722dd0204a37c244e437c1f12e58290f Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Tue, 24 Oct 2023 14:18:26 -0700
Subject: [PATCH 32/43] fix(profile): follow button engagement events are using
 outdated states

---
 components/account/AccountFollowButton.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index 737ac2d035..4c229e4aa0 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -102,20 +102,21 @@ function handleClick() {
 
   const unfollow = relationship?.following || relationship?.requested
 
+  // Make sure recordEngagement is called before making changes to account/relationship
   if (relationship?.blocking) {
-    unblock()
     recordEngagement()
+    unblock()
   }
   else if (relationship?.muting) {
-    unmute()
     recordEngagement()
+    unmute()
   }
   else if (unfollow) {
     toggleFollowAccount(relationship!, account, dataGlean)
   }
   else {
-    toggleFollowAccount(relationship!, account)
     recordEngagement()
+    toggleFollowAccount(relationship!, account)
   }
 }
 </script>

From f65d511efc9565ec1c1521255afe6e65149e5c22 Mon Sep 17 00:00:00 2001
From: Aly Fluckey <afluckey@mozilla.com>
Date: Tue, 24 Oct 2023 18:41:24 -0400
Subject: [PATCH 33/43] fix(glean): regen files

---
 telemetry/generated/ui.ts  | 4 ++--
 telemetry/generated/web.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/telemetry/generated/ui.ts b/telemetry/generated/ui.ts
index c98bf55caf..55f6e02126 100644
--- a/telemetry/generated/ui.ts
+++ b/telemetry/generated/ui.ts
@@ -7,8 +7,8 @@
 import EventMetricType from "@mozilla/glean/private/metrics/event";
 
 /**
- * Event triggered when a user taps/clicks on a UI element,  triggering a change
- * in app state.
+ * Event triggered when a user taps/clicks on a UI element, triggering a change in
+ * app state.
  *
  * Generated from `ui.engagement`.
  */
diff --git a/telemetry/generated/web.ts b/telemetry/generated/web.ts
index 06e69fdfda..289bd9518d 100644
--- a/telemetry/generated/web.ts
+++ b/telemetry/generated/web.ts
@@ -4,8 +4,8 @@
 
 // AUTOGENERATED BY glean_parser v8.1.1. DO NOT EDIT. DO NOT COMMIT.
 
-import EventMetricType from "@mozilla/glean/private/metrics/event";
 import StringMetricType from "@mozilla/glean/private/metrics/string";
+import EventMetricType from "@mozilla/glean/private/metrics/event";
 
 /**
  * Event triggered when a user clicks a link on a web page.

From c8681c17a5473a0999a45020f1f60276307b3b12 Mon Sep 17 00:00:00 2001
From: Aly Fluckey <afluckey@mozilla.com>
Date: Tue, 24 Oct 2023 18:44:07 -0400
Subject: [PATCH 34/43] fix(definitions): add allowGlean to PreferencesSettings

---
 composables/settings/definition.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/composables/settings/definition.ts b/composables/settings/definition.ts
index 9f47e14de0..fa22fce5bf 100644
--- a/composables/settings/definition.ts
+++ b/composables/settings/definition.ts
@@ -8,6 +8,7 @@ export type OldFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 export type ColorMode = 'light' | 'dark' | 'system'
 
 export interface PreferencesSettings {
+  allowGlean: boolean
   hideAltIndicatorOnPosts: boolean
   hideBoostCount: boolean
   hideReplyCount: boolean
@@ -60,6 +61,7 @@ export function getDefaultLanguage(languages: string[]) {
 }
 
 export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
+  allowGlean: true,
   hideAltIndicatorOnPosts: false,
   hideBoostCount: false,
   hideReplyCount: false,

From af02f86aad710ec190bdad83471d6e06a512c69d Mon Sep 17 00:00:00 2001
From: Aly Fluckey <afluckey@mozilla.com>
Date: Tue, 24 Oct 2023 18:44:33 -0400
Subject: [PATCH 35/43] fix(locale): localize

---
 locales/en.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/locales/en.json b/locales/en.json
index 44baa7eb5e..610982e844 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -544,6 +544,12 @@
       "zen_mode": "Zen mode",
       "zen_mode_description": "Hide asides unless the mouse cursor is over them. Also hide some elements from the timeline."
     },
+    "privacy": {
+      "data_collection": "Data collection and use",
+      "label": "Privacy",
+      "opt_out_description": "Allow technical, interaction, campaign and referral data to be sent to Mozilla. With this data you will have a personalized experience.",
+      "opt_out_title": "Help improve Mozilla Social"
+    },
     "profile": {
       "appearance": {
         "bio": "Bio",

From 0652ddb44ab945657730dba1482cb3de4084d096 Mon Sep 17 00:00:00 2001
From: Aly Fluckey <afluckey@mozilla.com>
Date: Tue, 24 Oct 2023 18:49:33 -0400
Subject: [PATCH 36/43] fix(settings): add new privacy settings link & page

---
 composables/settings/storage.ts  |  2 +-
 pages/settings.vue               |  7 +++++
 pages/settings/privacy/index.vue | 52 ++++++++++++++++++++++++++++++++
 3 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 pages/settings/privacy/index.vue

diff --git a/composables/settings/storage.ts b/composables/settings/storage.ts
index a1a543d7a5..b2220d40a8 100644
--- a/composables/settings/storage.ts
+++ b/composables/settings/storage.ts
@@ -43,5 +43,5 @@ export function getPreferences<T extends keyof PreferencesSettings>(userSettings
 
 export function togglePreferences(key: keyof PreferencesSettings) {
   const flag = usePreferences(key)
-  flag.value = !flag.value
+  return flag.value = !flag.value
 }
diff --git a/pages/settings.vue b/pages/settings.vue
index a84aef9a26..9e28d557af 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -63,6 +63,13 @@ const isRootPath = computedEager(() => route.name === 'settings')
               to="/settings/preferences"
               :match="$route.path.startsWith('/settings/preferences/')"
             />
+            <SettingsItem
+              command
+              icon="i-ri-lock-line"
+              :text="isHydrated ? $t('settings.privacy.label') : ''"
+              to="/settings/privacy"
+              :match="$route.path.startsWith('/settings/privacy/')"
+            />
             <SettingsItem
               command
               icon="i-ri:information-line"
diff --git a/pages/settings/privacy/index.vue b/pages/settings/privacy/index.vue
new file mode 100644
index 0000000000..1230c6f308
--- /dev/null
+++ b/pages/settings/privacy/index.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import Glean from '@mozilla/glean/web'
+import { mastodonAccountHandle, mastodonAccountId } from '~/telemetry/generated/identifiers'
+import { userAgent } from '~~/telemetry/generated/identifiers'
+
+const user = currentUser.value
+
+const { t } = useI18n()
+
+useHydratedHead({
+  title: () => `${t('settings.privacy.label')} | ${t('nav.settings')}`,
+})
+const userSettings = useUserSettings()
+
+function toggleOptOut() {
+  const allowGlean = togglePreferences('allowGlean')
+  Glean.setUploadEnabled(allowGlean)
+
+  // reset identifiers if user opts back in
+  if (user && allowGlean) {
+    mastodonAccountHandle.set(user.account.acct)
+    mastodonAccountId.set(user.account.id)
+    userAgent.set(navigator.userAgent)
+  }
+}
+</script>
+
+<template>
+  <MainContent back-on-small-screen no-beta-label>
+    <template #title>
+      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <span>{{ $t('settings.interface.label') }}</span>
+      </div>
+    </template>
+    <div p6 flex="~ col gap6">
+      <h2 text-xl>
+        {{ $t('settings.privacy.data_collection') }}
+      </h2>
+      <div>
+        <h3 text-lg>
+          {{ $t('settings.privacy.opt_out_title') }}
+        </h3>
+        <SettingsToggleItem
+          :checked="getPreferences(userSettings, 'allowGlean')"
+          @click="toggleOptOut()"
+        >
+          {{ $t('settings.privacy.opt_out_description') }}
+        </SettingsToggleItem>
+      </div>
+    </div>
+  </MainContent>
+</template>

From 2b848b8341ebb7f3f2737011d53b9ffeacb01969 Mon Sep 17 00:00:00 2001
From: Aly Fluckey <afluckey@mozilla.com>
Date: Tue, 24 Oct 2023 18:50:50 -0400
Subject: [PATCH 37/43] fix(glean): use allowGlean setting for uploadEnabled

add channel
---
 modules/glean/runtime/glean-plugin.client.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/modules/glean/runtime/glean-plugin.client.ts b/modules/glean/runtime/glean-plugin.client.ts
index 9dcdca51d0..96f8e9fe06 100644
--- a/modules/glean/runtime/glean-plugin.client.ts
+++ b/modules/glean/runtime/glean-plugin.client.ts
@@ -11,10 +11,13 @@ export default defineNuxtPlugin((nuxtApp) => {
     log.info('Glean: App mounted, start initing glean')
 
     const GLEAN_APP_ID = 'mozilla-social-web'
-    const devMode = useAppConfig().env === ('dev' || 'canary' || 'preview')
-    const uploadEnabled = devMode // this will eventually be a setting that the user can toggle
+    const env = useAppConfig().env
+    const devMode = env === ('dev' || 'canary' || 'preview')
+    const userSettings = useUserSettings()
+    const allowGlean = getPreferences(userSettings.value, 'allowGlean')
+    const uploadEnabled = devMode && allowGlean
 
-    Glean.initialize(GLEAN_APP_ID, uploadEnabled, {})
+    Glean.initialize(GLEAN_APP_ID, uploadEnabled, { channel: env })
     userAgent.set(navigator.userAgent)
 
     // Debugging

From 692f38efd54fbc8f9342e117c366f538f3a562e9 Mon Sep 17 00:00:00 2001
From: Aly Fluckey <afluckey@mozilla.com>
Date: Wed, 25 Oct 2023 13:33:58 -0400
Subject: [PATCH 38/43] fix(settings): don't show privacy link unless dev mode

---
 pages/settings.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/pages/settings.vue b/pages/settings.vue
index 9e28d557af..1e7ccb59f6 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -12,6 +12,7 @@ useHydratedHead({
 const route = useRoute()
 
 const isRootPath = computedEager(() => route.name === 'settings')
+const devMode = useAppConfig().env === ('dev' || 'canary' || 'preview')
 </script>
 
 <template>
@@ -64,6 +65,7 @@ const isRootPath = computedEager(() => route.name === 'settings')
               :match="$route.path.startsWith('/settings/preferences/')"
             />
             <SettingsItem
+              v-if="devMode"
               command
               icon="i-ri-lock-line"
               :text="isHydrated ? $t('settings.privacy.label') : ''"

From 1e28075884f7dc938f76dc8123e41a194c92021a Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 25 Oct 2023 10:35:50 -0700
Subject: [PATCH 39/43] fix(profile): fix one event missed Aly's tab space

---
 components/account/AccountTabs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/account/AccountTabs.vue b/components/account/AccountTabs.vue
index 87ba97087b..528f0d6788 100644
--- a/components/account/AccountTabs.vue
+++ b/components/account/AccountTabs.vue
@@ -26,7 +26,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
     },
     display: t('tab.posts_with_replies'),
     icon: 'i-ri:chat-1-line',
-    dataGlean: 'profile.tabs.posts_and_replies',
+    dataGlean: 'profile.tabs.posts-and-replies',
   },
   {
     name: 'account-media',

From b65df8c9bedfae647c3ce823a13eb86afab05281 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Wed, 25 Oct 2023 10:48:54 -0700
Subject: [PATCH 40/43] fix(profiles): update engagement types

---
 telemetry/engagementProfileEvents.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/telemetry/engagementProfileEvents.js b/telemetry/engagementProfileEvents.js
index c9c70b0dff..9b5d60facf 100644
--- a/telemetry/engagementProfileEvents.js
+++ b/telemetry/engagementProfileEvents.js
@@ -7,16 +7,16 @@ export const profileEvents = {
     engagement_type: 'general',
   },
   'profile.follow-btn.unfollow': {
-    engagement_type: 'general',
+    engagement_type: 'follow',
   },
   'profile.follow-btn.follow': {
-    engagement_type: 'general',
+    engagement_type: 'follow',
   },
   'profile.follow-btn.withdraw-follow-request': {
-    engagement_type: 'general',
+    engagement_type: 'follow',
   },
   'profile.follow-btn.follow-request': {
-    engagement_type: 'general',
+    engagement_type: 'follow',
   },
   // more button and more options dropdown
   'profile.more.open': {
@@ -26,7 +26,7 @@ export const profileEvents = {
     engagement_type: 'general',
   },
   'profile.more.share-account': {
-    engagement_type: 'general',
+    engagement_type: 'share',
   },
   'profile.more.mention': {
     engagement_type: 'general',

From db908d252a0d9e5148fd0842fd44682d27dabb93 Mon Sep 17 00:00:00 2001
From: Aly Fluckey <afluckey@mozilla.com>
Date: Wed, 25 Oct 2023 13:51:56 -0400
Subject: [PATCH 41/43] fix(privacy index): use correct localization string

---
 pages/settings/privacy/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/settings/privacy/index.vue b/pages/settings/privacy/index.vue
index 1230c6f308..5528fb1e8e 100644
--- a/pages/settings/privacy/index.vue
+++ b/pages/settings/privacy/index.vue
@@ -29,7 +29,7 @@ function toggleOptOut() {
   <MainContent back-on-small-screen no-beta-label>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <span>{{ $t('settings.interface.label') }}</span>
+        <span>{{ $t('settings.privacy.label') }}</span>
       </div>
     </template>
     <div p6 flex="~ col gap6">

From 5d69a86d8ed9eeec6f975dc4a3f459443a239039 Mon Sep 17 00:00:00 2001
From: Anthony Liddle <anthonyliddle@gmail.com>
Date: Wed, 25 Oct 2023 12:05:29 -0700
Subject: [PATCH 42/43] fix(discover): update engagement type for discover
 share action

---
 telemetry/engagementDetails.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/telemetry/engagementDetails.ts b/telemetry/engagementDetails.ts
index 5a2fc86400..0aefdd8c49 100644
--- a/telemetry/engagementDetails.ts
+++ b/telemetry/engagementDetails.ts
@@ -19,6 +19,6 @@ export const engagementDetails: EngagementDetails = {
     engagement_type: 'general',
   },
   'discover.recommendation.share': {
-    engagement_type: 'general',
+    engagement_type: 'share',
   },
 }

From 98b23882befb196530b19f1f437e5d71244540e6 Mon Sep 17 00:00:00 2001
From: Joel Kelly <joelkelly@mozilla.com>
Date: Wed, 25 Oct 2023 13:00:28 -0700
Subject: [PATCH 43/43] fix(privacy): dynamically import Glean

---
 pages/settings/privacy/index.vue | 41 ++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/pages/settings/privacy/index.vue b/pages/settings/privacy/index.vue
index 5528fb1e8e..dd0d37e660 100644
--- a/pages/settings/privacy/index.vue
+++ b/pages/settings/privacy/index.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
-import Glean from '@mozilla/glean/web'
+import type GleanType from '@mozilla/glean/web'
 import { mastodonAccountHandle, mastodonAccountId } from '~/telemetry/generated/identifiers'
 import { userAgent } from '~~/telemetry/generated/identifiers'
 
+let Glean: typeof GleanType
+if (typeof window !== 'undefined') {
+  const importedModule = await import('@mozilla/glean/web')
+  Glean = importedModule.default
+}
+
 const user = currentUser.value
 
 const { t } = useI18n()
@@ -13,14 +19,17 @@ useHydratedHead({
 const userSettings = useUserSettings()
 
 function toggleOptOut() {
-  const allowGlean = togglePreferences('allowGlean')
-  Glean.setUploadEnabled(allowGlean)
-
-  // reset identifiers if user opts back in
-  if (user && allowGlean) {
-    mastodonAccountHandle.set(user.account.acct)
-    mastodonAccountId.set(user.account.id)
-    userAgent.set(navigator.userAgent)
+  if (Glean) {
+    const allowGlean = togglePreferences('allowGlean')
+
+    Glean.setUploadEnabled(allowGlean)
+
+    // reset identifiers if user opts back in
+    if (user && allowGlean) {
+      mastodonAccountHandle.set(user.account.acct)
+      mastodonAccountId.set(user.account.id)
+      userAgent.set(navigator.userAgent)
+    }
   }
 }
 </script>
@@ -40,12 +49,14 @@ function toggleOptOut() {
         <h3 text-lg>
           {{ $t('settings.privacy.opt_out_title') }}
         </h3>
-        <SettingsToggleItem
-          :checked="getPreferences(userSettings, 'allowGlean')"
-          @click="toggleOptOut()"
-        >
-          {{ $t('settings.privacy.opt_out_description') }}
-        </SettingsToggleItem>
+        <client-only>
+          <SettingsToggleItem
+            :checked="getPreferences(userSettings, 'allowGlean')"
+            @click="toggleOptOut()"
+          >
+            {{ $t('settings.privacy.opt_out_description') }}
+          </SettingsToggleItem>
+        </client-only>
       </div>
     </div>
   </MainContent>