2022-11-13 08:34:43 +03:00
|
|
|
<script setup lang="ts">
|
2022-11-14 05:20:07 +03:00
|
|
|
import type { Status } from 'masto'
|
2022-11-13 08:34:43 +03:00
|
|
|
|
2022-12-01 09:46:26 +03:00
|
|
|
const props = defineProps<{
|
2022-11-14 05:20:07 +03:00
|
|
|
status: Status
|
2022-11-28 13:23:33 +03:00
|
|
|
details?: boolean
|
2022-11-29 11:15:05 +03:00
|
|
|
command?: boolean
|
2022-11-13 08:34:43 +03:00
|
|
|
}>()
|
2022-11-15 15:08:49 +03:00
|
|
|
|
2022-12-14 20:20:03 +03:00
|
|
|
const focusEditor = inject<typeof noop>('focus-editor', noop)
|
2022-12-14 19:45:46 +03:00
|
|
|
|
2022-12-01 09:46:26 +03:00
|
|
|
const { details, command } = $(props)
|
2022-11-24 11:34:05 +03:00
|
|
|
|
2022-12-01 09:46:26 +03:00
|
|
|
const {
|
|
|
|
status,
|
|
|
|
isLoading,
|
|
|
|
toggleBookmark,
|
|
|
|
toggleFavourite,
|
|
|
|
toggleReblog,
|
|
|
|
} = $(useStatusActions(props))
|
2022-11-24 14:35:26 +03:00
|
|
|
|
2023-01-02 00:45:46 +03:00
|
|
|
const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
|
|
|
|
|
2022-11-28 13:23:33 +03:00
|
|
|
const reply = () => {
|
2022-12-02 05:18:57 +03:00
|
|
|
if (!checkLogin())
|
|
|
|
return
|
2022-11-28 13:23:33 +03:00
|
|
|
if (details) {
|
2022-12-14 20:20:03 +03:00
|
|
|
focusEditor()
|
2022-11-28 13:23:33 +03:00
|
|
|
}
|
|
|
|
else {
|
|
|
|
const { key, draft } = getReplyDraft(status)
|
|
|
|
openPublishDialog(key, draft())
|
2022-11-24 14:35:26 +03:00
|
|
|
}
|
|
|
|
}
|
2022-11-13 08:34:43 +03:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2022-11-25 10:49:43 +03:00
|
|
|
<div flex justify-between>
|
2022-11-27 18:11:34 +03:00
|
|
|
<div flex-1>
|
2022-11-26 02:46:25 +03:00
|
|
|
<StatusActionButton
|
2022-11-30 02:25:29 +03:00
|
|
|
:content="$t('action.reply')"
|
2022-12-13 23:01:04 +03:00
|
|
|
:text="status.repliesCount || ''"
|
2022-11-26 02:46:25 +03:00
|
|
|
color="text-blue" hover="text-blue" group-hover="bg-blue/10"
|
|
|
|
icon="i-ri:chat-3-line"
|
2022-11-29 11:15:05 +03:00
|
|
|
:command="command"
|
2022-11-28 13:23:33 +03:00
|
|
|
@click="reply"
|
2023-01-02 00:45:46 +03:00
|
|
|
>
|
|
|
|
<template v-if="status.repliesCount" #text>
|
|
|
|
<i18n-t keypath="action.reply_count" :plural="status.repliesCount">
|
|
|
|
<CommonTooltip v-if="forSR(status.repliesCount)" :content="formatNumber(status.repliesCount)" placement="bottom">
|
|
|
|
<span aria-hidden="true">{{ formatHumanReadableNumber(status.repliesCount) }}</span>
|
|
|
|
<span sr-only>{{ formatNumber(status.repliesCount) }}</span>
|
|
|
|
</CommonTooltip>
|
|
|
|
<span v-else>{{ formatHumanReadableNumber(status.repliesCount) }}</span>
|
|
|
|
</i18n-t>
|
|
|
|
</template>
|
|
|
|
</StatusActionButton>
|
2022-11-27 18:11:34 +03:00
|
|
|
</div>
|
2022-11-24 11:34:05 +03:00
|
|
|
|
2022-11-27 18:11:34 +03:00
|
|
|
<div flex-1>
|
2022-11-24 11:34:05 +03:00
|
|
|
<StatusActionButton
|
2022-11-30 02:25:29 +03:00
|
|
|
:content="$t('action.boost')"
|
2022-12-13 23:01:04 +03:00
|
|
|
:text="status.reblogsCount || ''"
|
2022-11-24 11:34:05 +03:00
|
|
|
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"
|
2022-11-29 11:15:05 +03:00
|
|
|
:command="command"
|
2022-11-24 11:34:05 +03:00
|
|
|
@click="toggleReblog()"
|
2023-01-02 00:45:46 +03:00
|
|
|
>
|
|
|
|
<template v-if="status.reblogsCount" #text>
|
|
|
|
<i18n-t keypath="action.boost_count" :plural="status.reblogsCount">
|
2023-01-02 16:20:56 +03:00
|
|
|
<CommonTooltip v-if="forSR(status.reblogsCount)" :content="formatNumber(status.reblogsCount)" placement="bottom">
|
|
|
|
<span aria-hidden="true">{{ formatHumanReadableNumber(status.reblogsCount) }}</span>
|
|
|
|
<span sr-only>{{ formatNumber(status.reblogsCount) }}</span>
|
2023-01-02 00:45:46 +03:00
|
|
|
</CommonTooltip>
|
2023-01-02 16:20:56 +03:00
|
|
|
<span v-else>{{ formatHumanReadableNumber(status.reblogsCount) }}</span>
|
2023-01-02 00:45:46 +03:00
|
|
|
</i18n-t>
|
|
|
|
</template>
|
|
|
|
</StatusActionButton>
|
2022-11-27 18:11:34 +03:00
|
|
|
</div>
|
2022-11-24 11:34:05 +03:00
|
|
|
|
2022-11-27 18:11:34 +03:00
|
|
|
<div flex-1>
|
2022-11-24 11:34:05 +03:00
|
|
|
<StatusActionButton
|
2022-11-30 02:25:29 +03:00
|
|
|
:content="$t('action.favourite')"
|
2022-12-13 23:01:04 +03:00
|
|
|
:text="status.favouritesCount || ''"
|
2022-11-24 11:34:05 +03:00
|
|
|
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"
|
2022-11-29 11:15:05 +03:00
|
|
|
:command="command"
|
2022-11-24 11:34:05 +03:00
|
|
|
@click="toggleFavourite()"
|
2023-01-02 00:45:46 +03:00
|
|
|
>
|
|
|
|
<template v-if="status.favouritesCount" #text>
|
|
|
|
<i18n-t keypath="action.favourite_count" :plural="status.favouritesCount">
|
|
|
|
<CommonTooltip v-if="forSR(status.favouritesCount)" :content="formatNumber(status.favouritesCount)" placement="bottom">
|
|
|
|
<span aria-hidden="true">{{ formatHumanReadableNumber(status.favouritesCount) }}</span>
|
|
|
|
<span sr-only>{{ formatNumber(status.favouritesCount) }}</span>
|
|
|
|
</CommonTooltip>
|
|
|
|
<span v-else>{{ formatHumanReadableNumber(status.favouritesCount) }}</span>
|
|
|
|
</i18n-t>
|
|
|
|
</template>
|
|
|
|
</StatusActionButton>
|
2022-11-27 18:11:34 +03:00
|
|
|
</div>
|
2022-11-24 11:34:05 +03:00
|
|
|
|
2023-01-03 00:33:31 +03:00
|
|
|
<div :class="status.localOnly ? 'flex-1' : 'flex-none'">
|
2022-11-24 08:04:20 +03:00
|
|
|
<StatusActionButton
|
2022-11-30 02:25:29 +03:00
|
|
|
:content="$t('action.bookmark')"
|
2022-11-24 11:34:05 +03: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"
|
2022-11-29 11:15:05 +03:00
|
|
|
:command="command"
|
2022-11-24 11:34:05 +03:00
|
|
|
@click="toggleBookmark()"
|
2022-11-24 08:04:20 +03:00
|
|
|
/>
|
2022-11-27 18:11:34 +03:00
|
|
|
</div>
|
2023-01-03 00:33:31 +03:00
|
|
|
|
|
|
|
<div
|
|
|
|
v-if="status.localOnly"
|
|
|
|
class="i-ri:link-unlink-m local-only"
|
|
|
|
flex-none
|
|
|
|
text-secondary
|
|
|
|
/>
|
2022-11-13 08:34:43 +03:00
|
|
|
</div>
|
|
|
|
</template>
|
2023-01-03 00:33:31 +03:00
|
|
|
|
|
|
|
<style>
|
|
|
|
.local-only {
|
|
|
|
margin: 0.5em;
|
|
|
|
}
|
|
|
|
</style>
|