feat: support showing who favorited and boosted a status (#881)

components/modal/ModalContainer.vue

@@ -5,6 +5,7 @@ import {
   isCommandPanelOpen,
   isConfirmDialogOpen,
   isEditHistoryDialogOpen,
+  isFavouritedBoostedByDialogOpen,
   isMediaPreviewOpen,
   isPreviewHelpOpen,
   isPublishDialogOpen,
@@ -43,6 +44,10 @@ const handleConfirmChoice = (choice: ConfirmDialogChoice) => {
   confirmDialogChoice.value = choice
   isConfirmDialogOpen.value = false
 }
+
+const handleFavouritedBoostedByClose = () => {
+  isFavouritedBoostedByDialogOpen.value = false
+}
 </script>
 
 <template>
@@ -81,5 +86,12 @@ const handleConfirmChoice = (choice: ConfirmDialogChoice) => {
     <ModalDialog v-model="isConfirmDialogOpen" py-4 px-8 max-w-125>
       <ModalConfirm v-if="confirmDialogLabel" v-bind="confirmDialogLabel" @choice="handleConfirmChoice" />
     </ModalDialog>
+    <ModalDialog
+      v-model="isFavouritedBoostedByDialogOpen"
+      max-w-180
+      @close="handleFavouritedBoostedByClose"
+    >
+      <StatusFavouritedBoostedBy />
+    </ModalDialog>
   </template>
 </template>

components/status/StatusActionsMore.vue

@@ -111,6 +111,10 @@ async function editStatus() {
     editingStatus: status,
   }, true)
 }
+
+const showFavoritedAndBoostedBy = () => {
+  openFavoridedBoostedByDialog(status.id)
+}
 </script>
 
 <template>
@@ -162,6 +166,13 @@ async function editStatus() {
           />
         </template>
 
+        <CommonDropdownItem
+          :text="$t('menu.show_favourited_and_boosted_by')"
+          icon="i-ri:hearts-line"
+          :command="command"
+          @click="showFavoritedAndBoostedBy()"
+        />
+
         <CommonDropdownItem
           :text="$t('menu.copy_link_to_post')"
           icon="i-ri:link"

components/status/StatusFavouritedBoostedBy.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { favouritedBoostedByStatusId } from '~/composables/dialog'
+
+const type = ref<'favourited-by' | 'boosted-by'>('favourited-by')
+
+function load() {
+  return useMasto().v1.statuses[type.value === 'favourited-by' ? 'listFavouritedBy' : 'listRebloggedBy'](favouritedBoostedByStatusId.value!)
+}
+
+const paginator = $computed(() => load())
+
+function showFavouritedBy() {
+  type.value = 'favourited-by'
+}
+
+function showRebloggedBy() {
+  type.value = 'boosted-by'
+}
+
+const { t } = useI18n()
+const tabs = [
+  {
+    name: 'favourited-by',
+    display: t('status.favourited_by'),
+    onClick: showFavouritedBy,
+  },
+  {
+    name: 'boosted-by',
+    display: t('status.boosted_by'),
+    onClick: showRebloggedBy,
+  },
+]
+</script>
+
+<template>
+  <div flex w-full items-center lg:text-lg of-x-auto scrollbar-hide>
+    <template
+      v-for="option in tabs"
+      :key="option.name"
+    >
+      <div
+        relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
+        tabindex="1"
+        hover:bg-active transition-100
+        @click="option.onClick"
+      >
+        <span
+          ws-nowrap mxa sm:px2 sm:py3 xl:pb4 xl:pt5 py2 text-center border-b-3
+          :class="option.name === type ? 'border-primary op100 text-base' : 'border-transparent text-secondary-light hover:text-secondary op50'"
+        >{{
+          option.display
+        }}</span>
+      </div>
+    </template>
+  </div>
+  <AccountPaginator :key="`paginator-${type}`" :paginator="paginator" />
+</template>

composables/dialog.ts

@@ -22,9 +22,12 @@ export const isEditHistoryDialogOpen = ref(false)
 export const isPreviewHelpOpen = ref(isFirstVisit.value)
 export const isCommandPanelOpen = ref(false)
 export const isConfirmDialogOpen = ref(false)
+export const isFavouritedBoostedByDialogOpen = ref(false)
 
 export const lastPublishDialogStatus = ref<mastodon.v1.Status | null>(null)
 
+export const favouritedBoostedByStatusId = ref<string | null>(null)
+
 export function openSigninDialog() {
   isSigninDialogOpen.value = true
 }
@@ -62,6 +65,11 @@ export async function openPublishDialog(draftKey = 'dialog', draft?: Draft, over
   await until(isPublishDialogOpen).toBe(false)
 }
 
+export async function openFavoridedBoostedByDialog(statusId: string) {
+  isFavouritedBoostedByDialogOpen.value = true
+  favouritedBoostedByStatusId.value = statusId
+}
+
 if (isPreviewHelpOpen.value) {
   watch(isPreviewHelpOpen, () => {
     isFirstVisit.value = false

locales/en-US.json

@@ -146,6 +146,7 @@
     "open_in_original_site": "Open in original site",
     "pin_on_profile": "Pin on profile",
     "share_post": "Share this post",
+    "show_favourited_and_boosted_by": "Show who favourited and boosted",
     "show_reblogs": "Show boosts from {0}",
     "show_untranslated": "Show untranslated",
     "toggle_theme": {
@@ -346,7 +347,9 @@
     "uploading": "Uploading..."
   },
   "status": {
+    "boosted_by": "Boosted By",
     "edited": "Edited {0}",
+    "favourited_by": "Favorited By",
     "filter_hidden_phrase": "Filtered by",
     "filter_removed_phrase": "Removed by filter",
     "filter_show_anyway": "Show anyway",