elk/components/status/StatusActions.vue

248 lines
6.9 KiB
Vue
Raw Normal View History

2022-11-13 05:34:43 +00:00
<script setup lang="ts">
2022-11-14 02:20:07 +00:00
import type { Status } from 'masto'
2022-11-13 05:34:43 +00:00
const { status: _status, details } = defineProps<{
2022-11-14 02:20:07 +00:00
status: Status
details?: boolean
2022-11-13 05:34:43 +00:00
}>()
2022-11-24 10:35:03 +00:00
let status = $ref<Status>({ ..._status })
2022-11-15 12:08:49 +00:00
2022-11-24 10:35:03 +00:00
watch(() => _status, (val) => {
status = { ...val }
}, { deep: true, immediate: true })
2022-11-24 08:34:05 +00:00
const clipboard = useClipboard()
const router = useRouter()
const route = useRoute()
2022-11-24 15:48:52 +00:00
const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id)
2022-11-24 10:35:03 +00:00
// Use different states to let the user press different actions right after the other
2022-11-24 10:35:03 +00:00
const isLoading = $ref({
reblogged: false,
favourited: false,
bookmarked: false,
pinned: false,
translation: false,
2022-11-24 10:35:03 +00:00
})
2022-11-25 09:23:34 +00:00
type Action = 'reblogged' | 'favourited' | 'bookmarked' | 'pinned'
type CountField = 'reblogsCount' | 'favouritesCount'
async function toggleStatusAction(action: Action, newStatus: Promise<Status>, countField?: CountField) {
// Optimistic update
2022-11-24 10:35:03 +00:00
status[action] = !status[action]
2022-11-25 09:23:34 +00:00
if (countField)
status[countField] += status[action] ? 1 : -1
2022-11-15 21:20:07 +00:00
try {
isLoading[action] = true
Object.assign(status, await newStatus)
2022-11-15 21:20:07 +00:00
}
finally {
isLoading[action] = false
2022-11-15 21:20:07 +00:00
}
}
const toggleReblog = () => toggleStatusAction(
'reblogged',
useMasto().statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id).then((res) => {
2022-11-24 10:35:03 +00:00
if (status.reblogged)
// returns the original status
return res.reblog!
return res
}),
2022-11-25 09:23:34 +00:00
'reblogsCount',
)
const toggleFavourite = () => toggleStatusAction(
'favourited',
useMasto().statuses[status.favourited ? 'unfavourite' : 'favourite'](status.id),
2022-11-25 09:23:34 +00:00
'favouritesCount',
)
const toggleBookmark = () => toggleStatusAction(
'bookmarked',
useMasto().statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id),
)
2022-11-24 11:35:26 +00:00
const togglePin = async () => toggleStatusAction(
'pinned',
useMasto().statuses[status.pinned ? 'unpin' : 'pin'](status.id),
2022-11-24 11:35:26 +00:00
)
const { toggle: _toggleTranslation, translation, enabled: isTranslationEnabled } = useTranslation(_status)
const toggleTranslation = async () => {
isLoading.translation = true
await _toggleTranslation()
isLoading.translation = false
}
2022-11-24 08:34:05 +00:00
const copyLink = async () => {
2022-11-24 14:31:43 +00:00
await clipboard.copy(`${location.origin}${getStatusPath(status)}`)
2022-11-24 08:34:05 +00:00
}
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
}
2022-11-24 08:34:05 +00:00
await useMasto().statuses.remove(status.id)
if (route.name === '@account-status')
2022-11-24 08:34:05 +00:00
router.back()
// TODO when timeline, remove this item
}
2022-11-24 11:35:26 +00:00
const deleteAndRedraft = async () => {
// TODO confirm to delete
2022-11-28 17:46:00 +00:00
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
}
2022-11-24 11:35:26 +00:00
const { text } = await useMasto().statuses.remove(status.id)
openPublishDialog('dialog', getDraftFromStatus(status, text), true)
}
2022-11-24 11:35:26 +00:00
const reply = () => {
if (details) {
// TODO focus to editor
}
else {
const { key, draft } = getReplyDraft(status)
openPublishDialog(key, draft())
2022-11-24 11:35:26 +00:00
}
}
function editStatus() {
openPublishDialog(`edit-${status.id}`, {
...getDraftFromStatus(status),
2022-11-24 11:35:26 +00:00
editingStatus: status,
2022-11-24 14:32:20 +00:00
})
}
2022-11-13 05:34:43 +00:00
</script>
<template>
<div flex justify-between>
2022-11-27 15:11:34 +00:00
<div flex-1>
2022-11-25 23:46:25 +00:00
<StatusActionButton
2022-11-27 15:11:34 +00:00
content="Reply"
2022-11-25 23:46:25 +00:00
:text="status.repliesCount"
color="text-blue" hover="text-blue" group-hover="bg-blue/10"
icon="i-ri:chat-3-line"
@click="reply"
2022-11-25 23:46:25 +00:00
/>
2022-11-27 15:11:34 +00:00
</div>
2022-11-24 08:34:05 +00:00
2022-11-27 15:11:34 +00:00
<div flex-1>
2022-11-24 08:34:05 +00:00
<StatusActionButton
2022-11-27 15:11:34 +00:00
content="Boost"
2022-11-24 08:34:05 +00:00
:text="status.reblogsCount"
color="text-green" hover="text-green" group-hover="bg-green/10"
icon="i-ri:repeat-line"
active-icon="i-ri:repeat-fill"
:active="status.reblogged"
:disabled="isLoading.reblogged"
@click="toggleReblog()"
/>
2022-11-27 15:11:34 +00:00
</div>
2022-11-24 08:34:05 +00:00
2022-11-27 15:11:34 +00:00
<div flex-1>
2022-11-24 08:34:05 +00:00
<StatusActionButton
2022-11-27 15:11:34 +00:00
content="Favourite"
2022-11-24 08:34:05 +00:00
:text="status.favouritesCount"
color="text-rose" hover="text-rose" group-hover="bg-rose/10"
icon="i-ri:heart-3-line"
active-icon="i-ri:heart-3-fill"
:active="status.favourited"
:disabled="isLoading.favourited"
@click="toggleFavourite()"
/>
2022-11-27 15:11:34 +00:00
</div>
2022-11-24 08:34:05 +00:00
2022-11-27 15:11:34 +00:00
<div flex-none>
2022-11-24 05:04:20 +00:00
<StatusActionButton
2022-11-27 15:11:34 +00:00
content="Bookmark"
2022-11-24 08:34:05 +00:00
color="text-yellow" hover="text-yellow" group-hover="bg-yellow/10"
icon="i-ri:bookmark-line"
active-icon="i-ri:bookmark-fill"
:active="status.bookmarked"
:disabled="isLoading.bookmarked"
@click="toggleBookmark()"
2022-11-24 05:04:20 +00:00
/>
2022-11-27 15:11:34 +00:00
</div>
<CommonDropdown flex-none ml3 placement="bottom">
<StatusActionButton
content="More"
color="text-purple" hover="text-purple" group-hover="bg-purple/10"
icon="i-ri:more-line"
/>
2022-11-24 08:34:05 +00:00
<template #popper>
<div flex="~ col">
<CommonDropdownItem icon="i-ri:link" @click="copyLink">
Copy link to this post
</CommonDropdownItem>
2022-11-25 11:39:21 +00:00
<NuxtLink :to="status.url" target="_blank">
<CommonDropdownItem v-if="status.url" icon="i-ri:arrow-right-up-line">
Open in original site
</CommonDropdownItem>
</NuxtLink>
2022-11-24 08:34:05 +00:00
<CommonDropdownItem v-if="isTranslationEnabled && status.language !== languageCode" icon="i-ri:translate" @click="toggleTranslation">
<template v-if="!translation.visible">
Translate post
</template>
<template v-else>
2022-11-25 11:24:55 +00:00
Show untranslated
</template>
</CommonDropdownItem>
2022-11-28 17:37:50 +00:00
<template v-if="currentUser">
<template v-if="isAuthor">
<CommonDropdownItem
icon="i-ri:pushpin-line"
@click="togglePin"
>
{{ status.pinned ? 'Unpin on profile' : 'Pin on profile' }}
</CommonDropdownItem>
<CommonDropdownItem icon="i-ri:edit-line" @click="editStatus">
Edit
</CommonDropdownItem>
<CommonDropdownItem
icon="i-ri:delete-bin-line" text-red-600
@click="deleteStatus"
>
Delete
</CommonDropdownItem>
<CommonDropdownItem
icon="i-ri:eraser-line" text-red-600
@click="deleteAndRedraft"
>
Delete & re-draft
</CommonDropdownItem>
</template>
<template v-else>
<CommonDropdownItem
icon="i-ri:at-line"
@click="mentionUser(status.account)"
>
Mention @{{ status.account.acct }}
</CommonDropdownItem>
</template>
2022-11-24 14:32:20 +00:00
</template>
2022-11-24 05:04:20 +00:00
</div>
2022-11-24 08:34:05 +00:00
</template>
</CommonDropdown>
2022-11-13 05:34:43 +00:00
</div>
</template>