<script setup lang="ts"> import type { Status } from 'masto' const props = defineProps<{ status: Status details?: boolean command?: boolean }>() const { details, command } = $(props) const { status, isLoading, toggleBookmark, toggleFavourite, togglePin, toggleReblog, } = $(useStatusActions(props)) const clipboard = useClipboard() const router = useRouter() const route = useRoute() const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id) const { toggle: _toggleTranslation, translation, enabled: isTranslationEnabled, } = useTranslation(props.status) const toggleTranslation = async () => { isLoading.translation = true await _toggleTranslation() isLoading.translation = false } const masto = useMasto() const copyLink = async (status: Status) => { const url = getStatusPermalinkRoute(status) if (url) await clipboard.copy(`${location.origin}/${url}`) } const deleteStatus = async () => { // TODO confirm to delete if (process.dev) { // eslint-disable-next-line no-alert const result = confirm('[DEV] Are you sure you want to delete this post?') if (!result) return } removeCachedStatus(status.id) await masto.statuses.remove(status.id) if (route.name === 'status') router.back() // TODO when timeline, remove this item } const deleteAndRedraft = async () => { // TODO confirm to delete if (process.dev) { // eslint-disable-next-line no-alert const result = confirm('[DEV] Are you sure you want to delete and re-draft this post?') if (!result) return } removeCachedStatus(status.id) const { text } = await masto.statuses.remove(status.id) openPublishDialog('dialog', await getDraftFromStatus(status, text), true) } const reply = () => { if (details) { // TODO focus to editor } else { const { key, draft } = getReplyDraft(status) openPublishDialog(key, draft()) } } async function editStatus() { openPublishDialog(`edit-${status.id}`, { ...await getDraftFromStatus(status), editingStatus: status, }, true) } </script> <template> <CommonDropdown flex-none ml3 placement="bottom" :eager-mount="command"> <StatusActionButton :content="$t('action.more')" color="text-purple" hover="text-purple" group-hover="bg-purple/10" icon="i-ri:more-line" my--2 /> <template #popper> <div flex="~ col"> <template v-if="isZenMode"> <CommonDropdownItem :text="$t('action.reply')" icon="i-ri:chat-3-line" :command="command" @click="reply()" /> <CommonDropdownItem :text="status.reblogged ? $t('action.boosted') : $t('action.boost')" icon="i-ri:repeat-fill" :class="status.reblogged ? 'text-green' : ''" :command="command" :disabled="isLoading.reblogged" @click="toggleReblog()" /> <CommonDropdownItem :text="status.favourited ? $t('action.favourited') : $t('action.favourite')" :icon="status.favourited ? 'i-ri:heart-3-fill' : 'i-ri:heart-3-line'" :class="status.favourited ? 'text-rose' : ''" :command="command" :disabled="isLoading.favourited" @click="toggleFavourite()" /> <CommonDropdownItem :text="status.bookmarked ? $t('action.bookmarked') : $t('action.bookmark')" :icon="status.bookmarked ? 'i-ri:bookmark-fill' : 'i-ri:bookmark-line'" :class="status.bookmarked ? 'text-yellow' : ''" :command="command" :disabled="isLoading.bookmarked" @click="toggleBookmark()" /> </template> <CommonDropdownItem :text="$t('menu.copy_link_to_post')" icon="i-ri:link" :command="command" @click="copyLink(status)" /> <NuxtLink :to="status.url" external target="_blank"> <CommonDropdownItem v-if="status.url" :text="$t('menu.open_in_original_site')" icon="i-ri:arrow-right-up-line" :command="command" /> </NuxtLink> <CommonDropdownItem v-if="isTranslationEnabled && status.language !== languageCode" :text="translation.visible ? $t('menu.show_untranslated') : $t('menu.translate_post')" icon="i-ri:translate" :command="command" @click="toggleTranslation" /> <template v-if="isMastoInitialised && currentUser"> <template v-if="isAuthor"> <CommonDropdownItem :text="status.pinned ? $t('menu.unpin_on_profile') : $t('menu.pin_on_profile')" icon="i-ri:pushpin-line" :command="command" @click="togglePin" /> <CommonDropdownItem :text="$t('menu.edit')" icon="i-ri:edit-line" :command="command" @click="editStatus" /> <CommonDropdownItem :text="$t('menu.delete')" icon="i-ri:delete-bin-line" text-red-600 :command="command" @click="deleteStatus" /> <CommonDropdownItem :text="$t('menu.delete_and_redraft')" icon="i-ri:eraser-line" text-red-600 :command="command" @click="deleteAndRedraft" /> </template> <template v-else> <CommonDropdownItem :text="$t('menu.mention_account', [`@${status.account.acct}`])" icon="i-ri:at-line" :command="command" @click="mentionUser(status.account)" /> </template> </template> </div> </template> </CommonDropdown> </template>