elk/components/status/StatusActionsMore.vue

260 lines
7.2 KiB
Vue
Raw Normal View History

2022-12-01 06:46:26 +00:00
<script setup lang="ts">
2023-01-08 06:21:09 +00:00
import type { mastodon } from 'masto'
2022-12-01 06:46:26 +00:00
const props = defineProps<{
2023-01-08 06:21:09 +00:00
status: mastodon.v1.Status
2022-12-01 06:46:26 +00:00
details?: boolean
command?: boolean
}>()
2023-04-30 15:19:14 +00:00
const emit = defineEmits<{
(event: 'afterEdit'): void
}>()
2022-12-01 06:46:26 +00:00
const { details, command } = $(props)
const {
status,
isLoading,
toggleBookmark,
toggleFavourite,
togglePin,
toggleReblog,
toggleMute,
2022-12-01 06:46:26 +00:00
} = $(useStatusActions(props))
const clipboard = useClipboard()
const router = useRouter()
const route = useRoute()
const { t } = useI18n()
const userSettings = useUserSettings()
2022-12-01 06:46:26 +00:00
const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id)
2023-01-15 08:38:02 +00:00
const { client } = $(useMasto())
2023-01-02 21:00:51 +00:00
function getPermalinkUrl(status: mastodon.v1.Status) {
const url = getStatusPermalinkRoute(status)
2022-12-01 06:46:26 +00:00
if (url)
2023-01-02 21:00:51 +00:00
return `${location.origin}/${url}`
return null
}
async function copyLink(status: mastodon.v1.Status) {
2023-01-02 21:00:51 +00:00
const url = getPermalinkUrl(status)
if (url)
await clipboard.copy(url)
}
async function copyOriginalLink(status: mastodon.v1.Status) {
const url = status.url
if (url)
await clipboard.copy(url)
}
2023-01-02 21:00:51 +00:00
const { share, isSupported: isShareSupported } = useShare()
async function shareLink(status: mastodon.v1.Status) {
2023-01-02 21:00:51 +00:00
const url = getPermalinkUrl(status)
if (url)
await share({ url })
2022-12-01 06:46:26 +00:00
}
2023-01-02 21:00:51 +00:00
async function deleteStatus() {
if (await openConfirmDialog({
2023-01-16 08:56:36 +00:00
title: t('confirm.delete_posts.title'),
confirm: t('confirm.delete_posts.confirm'),
cancel: t('confirm.delete_posts.cancel'),
}) !== 'confirm')
return
2022-12-01 06:46:26 +00:00
removeCachedStatus(status.id)
2023-01-15 08:38:02 +00:00
await client.v1.statuses.remove(status.id)
2022-12-01 06:46:26 +00:00
if (route.name === 'status')
2022-12-01 06:46:26 +00:00
router.back()
// TODO when timeline, remove this item
}
async function deleteAndRedraft() {
2022-12-01 06:46:26 +00:00
// 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)
2023-01-15 08:38:02 +00:00
await client.v1.statuses.remove(status.id)
await openPublishDialog('dialog', await getDraftFromStatus(status), true)
// Go to the new status, if the page is the old status
if (lastPublishDialogStatus.value && route.name === 'status')
router.push(getStatusRoute(lastPublishDialogStatus.value))
2022-12-01 06:46:26 +00:00
}
function reply() {
2022-12-01 06:46:26 +00:00
if (details) {
// TODO focus to editor
}
else {
const { key, draft } = getReplyDraft(status)
openPublishDialog(key, draft())
}
}
async function editStatus() {
2023-04-30 15:19:14 +00:00
await openPublishDialog(`edit-${status.id}`, {
...await getDraftFromStatus(status),
2022-12-01 06:46:26 +00:00
editingStatus: status,
}, true)
2023-04-30 15:19:14 +00:00
emit('afterEdit')
2022-12-01 06:46:26 +00:00
}
function showFavoritedAndBoostedBy() {
openFavoridedBoostedByDialog(status.id)
}
2022-12-01 06:46:26 +00:00
</script>
<template>
<CommonDropdown flex-none ms3 placement="bottom" :eager-mount="command">
2022-12-01 06:46:26 +00:00
<StatusActionButton
:content="$t('action.more')"
color="text-primary"
hover="text-primary"
elk-group-hover="bg-primary-light"
2022-12-02 07:27:44 +00:00
icon="i-ri:more-line"
my--2
2022-12-01 06:46:26 +00:00
/>
<template #popper>
<div flex="~ col">
<template v-if="getPreferences(userSettings, 'zenMode')">
2022-12-01 06:46:26 +00:00
<CommonDropdownItem
:text="$t('action.reply')"
2023-01-08 09:03:23 +00:00
icon="i-ri:chat-1-line"
2022-12-01 06:46:26 +00:00
: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.show_favourited_and_boosted_by')"
icon="i-ri:hearts-line"
:command="command"
@click="showFavoritedAndBoostedBy()"
/>
2022-12-01 06:46:26 +00:00
<CommonDropdownItem
:text="$t('menu.copy_link_to_post')"
icon="i-ri:link"
:command="command"
@click="copyLink(status)"
/>
<CommonDropdownItem
:text="$t('menu.copy_original_link_to_post')"
icon="i-ri:links-fill"
:command="command"
@click="copyOriginalLink(status)"
/>
2023-01-02 21:00:51 +00:00
<CommonDropdownItem
v-if="isShareSupported"
:text="$t('menu.share_post')"
icon="i-ri:share-line"
:command="command"
@click="shareLink(status)"
/>
<CommonDropdownItem
v-if="currentUser && (status.account.id === currentUser.account.id || status.mentions.some(m => m.id === currentUser!.account.id))"
:text="status.muted ? $t('menu.unmute_conversation') : $t('menu.mute_conversation')"
:icon="status.muted ? 'i-ri:eye-line' : 'i-ri:eye-off-line'"
:command="command"
:disabled="isLoading.muted"
@click="toggleMute()"
/>
2023-01-05 16:48:20 +00:00
<NuxtLink v-if="status.url" :to="status.url" external target="_blank">
2022-12-01 06:46:26 +00:00
<CommonDropdownItem
:text="$t('menu.open_in_original_site')"
icon="i-ri:arrow-right-up-line"
:command="command"
/>
</NuxtLink>
2023-01-15 08:38:02 +00:00
<template v-if="isHydrated && currentUser">
2022-12-01 06:46:26 +00:00
<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>