elk/components/status/StatusActions.vue

90 lines
2.5 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
2022-11-15 12:08:49 +00:00
const { status } = defineProps<{
2022-11-14 02:20:07 +00:00
status: Status
2022-11-13 05:34:43 +00:00
}>()
2022-11-15 12:08:49 +00:00
// Use different states to let the user press different actions right after the other
const isLoading = $ref({ reblogged: false, favourited: false, bookmarked: false })
async function toggleStatusAction(action: 'reblogged' | 'favourited' | 'bookmarked', newStatus: Promise<Status>) {
// Optimistic update
Object.assign(status, { [action]: !status[action] })
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',
masto.statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id),
)
const toggleFavourite = () => toggleStatusAction(
'favourited',
masto.statuses[status.favourited ? 'unfavourite' : 'favourite'](status.id),
)
const toggleBookmark = () => toggleStatusAction(
'bookmarked',
masto.statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id),
)
2022-11-13 05:34:43 +00:00
</script>
<template>
2022-11-23 14:39:48 +00:00
<div flex justify-between gap-8>
2022-11-24 05:04:20 +00:00
<RouterLink :to="getStatusPath(status)">
<StatusActionButton
:text="status.repliesCount"
color="text-blue" hover="text-blue" group-hover="bg-blue/10"
icon="i-ri:chat-3-line"
tooltip="Replay"
/>
2022-11-14 14:54:30 +00:00
</RouterLink>
2022-11-24 05:04:20 +00:00
<StatusActionButton
: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"
tooltip="Boost"
@click="toggleReblog()"
2022-11-24 05:04:20 +00:00
/>
<StatusActionButton
: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"
tooltip="Favourite"
2022-11-15 12:08:49 +00:00
@click="toggleFavourite()"
2022-11-24 05:04:20 +00:00
/>
<StatusActionButton
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"
tooltip="Bookmark"
2022-11-15 21:20:07 +00:00
@click="toggleBookmark()"
2022-11-24 05:04:20 +00:00
/>
<!-- <VDropdown>
<button flex gap-1 items-center rounded op50 hover="op100 text-purple" group>
<div rounded-full p2 group-hover="bg-purple/10">
<div i-ri:share-circle-line />
</div>
</button>
</VDropdown> -->
2022-11-13 05:34:43 +00:00
</div>
</template>