elk/components/status/StatusActionsMore.vue
2022-12-01 14:46:26 +08:00

207 lines
5.7 KiB
Vue

<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 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
}
await useMasto().statuses.remove(status.id)
if (route.name === '@account-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
}
const { text } = await useMasto().statuses.remove(status.id)
openPublishDialog('dialog', getDraftFromStatus(status, text), true)
}
const reply = () => {
if (details) {
// TODO focus to editor
}
else {
const { key, draft } = getReplyDraft(status)
openPublishDialog(key, draft())
}
}
function editStatus() {
openPublishDialog(`edit-${status.id}`, {
...getDraftFromStatus(status),
editingStatus: status,
})
}
</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-2-line"
/>
<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" 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="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>