elk/components/status/StatusActions.vue

75 lines
2.4 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
const masto = await useMasto()
const isLoading = ref(false)
async function toggleFavourite() {
try {
isLoading.value = true
if (status.favourited)
Object.assign(status, await masto.statuses.unfavourite(status.id))
else
Object.assign(status, await masto.statuses.favourite(status.id))
}
finally {
isLoading.value = false
}
}
2022-11-15 21:20:07 +00:00
async function toggleBookmark() {
try {
isLoading.value = true
const action = status.bookmarked ? 'unbookmark' : 'bookmark'
Object.assign(status, await masto.statuses[action](status.id))
}
finally {
isLoading.value = false
}
}
2022-11-13 05:34:43 +00:00
</script>
<template>
2022-11-15 12:08:49 +00:00
<div flex gap-8 :class="isLoading ? 'pointer-events-none' : ''">
2022-11-14 14:54:30 +00:00
<RouterLink flex gap-1 items-center w-full rounded op75 hover="op100 text-blue" group :to="`/@${status.account.acct}/${status.id}`">
2022-11-14 02:56:48 +00:00
<div rounded-full p2 group-hover="bg-blue/10">
<div i-ri:chat-3-line />
</div>
<span v-if="status.repliesCount">{{ status.repliesCount }}</span>
2022-11-14 14:54:30 +00:00
</RouterLink>
2022-11-14 02:56:48 +00:00
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-green" group>
<div rounded-full p2 group-hover="bg-green/10">
<div i-ri:repeat-fill />
</div>
<span v-if="status.reblogsCount">{{ status.reblogsCount }}</span>
2022-11-13 05:34:43 +00:00
</button>
2022-11-15 12:08:49 +00:00
<button
flex gap-1 items-center w-full rounded hover="op100 text-rose" group
:class="status.favourited ? 'text-rose op100' : 'op75'"
@click="toggleFavourite()"
>
2022-11-14 02:56:48 +00:00
<div rounded-full p2 group-hover="bg-rose/10">
2022-11-15 12:08:49 +00:00
<div :class="status.favourited ? 'i-ri:heart-3-fill' : 'i-ri:heart-3-line'" />
2022-11-14 02:56:48 +00:00
</div>
<span v-if="status.favouritesCount">{{ status.favouritesCount }}</span>
2022-11-13 05:34:43 +00:00
</button>
2022-11-15 21:20:07 +00:00
<button
flex gap-1 items-center w-full rounded hover="op100 text-yellow" group
:class="status.bookmarked ? 'text-yellow op100' : 'op75'"
@click="toggleBookmark()"
>
<div rounded-full p2 group-hover="bg-rose/10">
<div :class="status.bookmarked ? 'i-ri:bookmark-fill' : 'i-ri:bookmark-line'" />
</div>
</button>
2022-11-14 02:56:48 +00:00
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
<div rounded-full p2 group-hover="bg-purple/10">
<div i-ri:share-circle-line />
</div>
2022-11-13 16:05:32 +00:00
</button>
2022-11-13 05:34:43 +00:00
</div>
</template>