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>