Merge pull request #75 from MozillaSocial/fix/posts-buttons-engagemen…

…t-events

fix(posts): Post Button interactions (Like, Boost, Respond, Share, Report) [MOSOWEB-44]

components/status/StatusActions.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
+import { engagement } from '~~/telemetry/generated/ui'
+import { engagementDetails } from '~~/telemetry/engagementDetails'
 
 const props = defineProps<{
   status: mastodon.v1.Status
+  feedName?: string
   details?: boolean
   command?: boolean
 }>()
 
 const focusEditor = inject<typeof noop>('focus-editor', noop)
 
-const { details, command } = $(props)
+const { details, command, feedName } = $(props)
 
 const userSettings = useUserSettings()
 const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
@@ -23,14 +26,36 @@ const {
   toggleReblog,
 } = $(useStatusActions(props))
 
+function recordEngagement(engagementAction: string) {
+  const analyticsId = feedName ? `${feedName}.post.${engagementAction}` : `post.${engagementAction}`
+  engagement.record({ ui_identifier: analyticsId, mastodon_status_id: status.id, ...engagementDetails[analyticsId] })
+}
+
 function reply() {
+  recordEngagement('open-reply')
+
   if (!checkLogin())
     return
   if (details)
     focusEditor()
   else
     navigateToStatus({ status, focusReply: true })
 }
+
+function reblog() {
+  toggleReblog()
+  recordEngagement(status.reblogged ? 'reblog' : 'unreblog')
+}
+
+function favourite() {
+  toggleFavourite()
+  recordEngagement(status.favourited ? 'favourite' : 'unfavourite')
+}
+
+function bookmark() {
+  toggleBookmark()
+  recordEngagement(status.bookmarked ? 'bookmark' : 'unbookmark')
+}
 </script>
 
 <template>
@@ -63,7 +88,7 @@ function reply() {
         :active="!!status.reblogged"
         :disabled="isLoading.reblogged || !canReblog"
         :command="command"
-        @click="toggleReblog()"
+        @click="reblog"
       >
         <template v-if="status.reblogsCount && !getPreferences(userSettings, 'hideBoostCount')" #text>
           <CommonLocalizedNumber
@@ -86,7 +111,7 @@ function reply() {
         :active="!!status.favourited"
         :disabled="isLoading.favourited"
         :command="command"
-        @click="toggleFavourite()"
+        @click="favourite"
       >
         <template v-if="status.favouritesCount && !getPreferences(userSettings, 'hideFavoriteCount')" #text>
           <CommonLocalizedNumber
@@ -108,7 +133,7 @@ function reply() {
         :active="!!status.bookmarked"
         :disabled="isLoading.bookmarked"
         :command="command"
-        @click="toggleBookmark()"
+        @click="bookmark"
       />
     </div>
   </div>

components/status/StatusActionsMore.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 import { toggleBlockAccount, toggleMuteAccount, useRelationship } from '~~/composables/masto/relationship'
+import { engagement } from '~~/telemetry/generated/ui'
+import { engagementDetails } from '~~/telemetry/engagementDetails'
 
 const props = defineProps<{
   status: mastodon.v1.Status
   details?: boolean
   command?: boolean
+  feedName?: string
 }>()
 
 const emit = defineEmits<{
   (event: 'afterEdit'): void
 }>()
 
-const { details, command } = $(props)
+const { details, command, feedName } = $(props)
 
 const {
   status,
@@ -120,6 +123,13 @@ async function editStatus() {
 function showFavoritedAndBoostedBy() {
   openFavoridedBoostedByDialog(status.id)
 }
+
+function report() {
+  const analyticsId = feedName ? `${feedName}.post.report` : 'post.report'
+  engagement.record({ ui_identifier: analyticsId, mastodon_status_id: status.id, ...engagementDetails[analyticsId] })
+
+  openReportDialog(status.account, status)
+}
 </script>
 
 <template>
@@ -317,7 +327,7 @@ function showFavoritedAndBoostedBy() {
               :text="$t('menu.report_account', [`@${status.account.acct}`])"
               icon="i-ri:flag-2-line"
               :command="command"
-              @click="openReportDialog(status.account, status)"
+              @click="report"
             />
           </template>
         </template>

components/status/StatusCard.vue

@@ -9,6 +9,7 @@ const props = withDefaults(
     hover?: boolean
     inNotification?: boolean
     isPreview?: boolean
+    feedName?: string
 
     // If we know the prev and next status in the timeline, we can simplify the card
     older?: mastodon.v1.Status
@@ -171,7 +172,7 @@ const forceShow = ref(false)
                 </div>
               </div>
             </div>
-            <StatusActionsMore v-if="actions !== false" :status="status" me--2 />
+            <StatusActionsMore v-if="actions !== false" :status="status" me--2 :feed-name="feedName" />
           </div>
 
           <!-- Content -->
@@ -183,7 +184,7 @@ const forceShow = ref(false)
             :in-notification="inNotification"
             mb2 :class="{ 'mt-2 mb1': isDM }"
           />
-          <StatusActions v-if="actions !== false" v-show="!getPreferences(userSettings, 'zenMode')" :status="status" />
+          <StatusActions v-if="actions !== false" v-show="!getPreferences(userSettings, 'zenMode')" :status="status" :feed-name="feedName" />
         </div>
       </template>
     </div>

components/timeline/TimelineBookmarks.vue

@@ -3,5 +3,5 @@ const paginator = useMastoClient().v1.bookmarks.list()
 </script>
 
 <template>
-  <TimelinePaginator end-message="common.no_bookmarks" :paginator="paginator" />
+  <TimelinePaginator end-message="common.no_bookmarks" :paginator="paginator" feed-name="bookmarks.feed" />
 </template>

components/timeline/TimelineFavourites.vue

@@ -3,5 +3,5 @@ const paginator = useMastoClient().v1.favourites.list()
 </script>
 
 <template>
-  <TimelinePaginator end-message="common.no_favourites" :paginator="paginator" />
+  <TimelinePaginator end-message="common.no_favourites" :paginator="paginator" feed-name="favorites.feed" />
 </template>

components/timeline/TimelineHome.vue

@@ -18,6 +18,6 @@ function onPublish(status) {
 <template>
   <div>
     <PublishWidget draft-key="home" border="b base" @published="onPublish" />
-    <TimelinePaginator ref="homePaginator" v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="home" />
+    <TimelinePaginator ref="homePaginator" v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="home" feed-name="home.feed" />
   </div>
 </template>

components/timeline/TimelinePaginator.vue

@@ -13,6 +13,7 @@ const { paginator, stream, account, buffer = 10, endMessage = true } = definePro
   preprocess?: (items: mastodon.v1.Status[]) => mastodon.v1.Status[]
   buffer?: number
   endMessage?: boolean | string
+  feedName?: string
 }>()
 
 const commonPaginator = ref(null)
@@ -43,11 +44,11 @@ const showOriginSite = $computed(() =>
     <template #default="{ item, older, newer, active }">
       <template v-if="virtualScroller">
         <DynamicScrollerItem :item="item" :active="active" tag="article">
-          <StatusCard :status="item" :context="context" :older="older" :newer="newer" />
+          <StatusCard :status="item" :context="context" :older="older" :newer="newer" :feed-name="feedName" />
         </DynamicScrollerItem>
       </template>
       <template v-else>
-        <StatusCard :status="item" :context="context" :older="older" :newer="newer" />
+        <StatusCard :status="item" :context="context" :older="older" :newer="newer" :feed-name="feedName" />
       </template>
     </template>
     <template v-if="context === 'account' " #done="{ items }">

components/timeline/TimelinePublic.vue

@@ -10,6 +10,6 @@ function reorderAndFilter(items: mastodon.v1.Status[]) {
 
 <template>
   <div>
-    <TimelinePaginator v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="public" />
+    <TimelinePaginator v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="public" feed-name="federated.feed" />
   </div>
 </template>

components/timeline/TimelinePublicLocal.vue

@@ -5,6 +5,6 @@ const stream = useStreaming(client => client.v1.stream.streamCommunityTimeline()
 
 <template>
   <div>
-    <TimelinePaginator v-bind="{ paginator, stream }" context="public" />
+    <TimelinePaginator v-bind="{ paginator, stream }" context="public" feed-name="local.feed" />
   </div>
 </template>

pages/[[server]]/@[account]/index/index.vue

@@ -26,6 +26,6 @@ if (account) {
 <template>
   <div>
     <AccountTabs />
-    <TimelinePaginator :paginator="paginator" :preprocess="reorderAndFilter" context="account" :account="account" />
+    <TimelinePaginator :paginator="paginator" :preprocess="reorderAndFilter" context="account" :account="account" feed-name="account.feed" />
   </div>
 </template>