2022-11-13 05:34:43 +00:00
|
|
|
<script setup lang="ts">
|
2023-01-08 06:21:09 +00:00
|
|
|
import type { mastodon } from 'masto'
|
2022-11-13 05:34:43 +00:00
|
|
|
|
2022-12-01 06:46:26 +00:00
|
|
|
const props = defineProps<{
|
2023-01-08 06:21:09 +00:00
|
|
|
status: mastodon.v1.Status
|
2022-11-28 10:23:33 +00:00
|
|
|
details?: boolean
|
2022-11-29 08:15:05 +00:00
|
|
|
command?: boolean
|
2022-11-13 05:34:43 +00:00
|
|
|
}>()
|
2022-11-15 12:08:49 +00:00
|
|
|
|
2022-12-14 17:20:03 +00:00
|
|
|
const focusEditor = inject<typeof noop>('focus-editor', noop)
|
2022-12-14 16:45:46 +00:00
|
|
|
|
2024-02-21 15:20:08 +00:00
|
|
|
const { details, command } = props // TODO
|
2022-11-24 08:34:05 +00:00
|
|
|
|
2023-01-12 17:52:52 +00:00
|
|
|
const userSettings = useUserSettings()
|
2023-05-06 15:52:33 +00:00
|
|
|
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
2023-01-12 17:52:52 +00:00
|
|
|
|
2022-12-01 06:46:26 +00:00
|
|
|
const {
|
|
|
|
status,
|
|
|
|
isLoading,
|
2023-01-08 13:24:59 +00:00
|
|
|
canReblog,
|
2022-12-01 06:46:26 +00:00
|
|
|
toggleBookmark,
|
|
|
|
toggleFavourite,
|
|
|
|
toggleReblog,
|
2024-02-21 15:20:08 +00:00
|
|
|
} = useStatusActions(props)
|
2022-11-24 11:35:26 +00:00
|
|
|
|
2023-03-30 19:01:24 +00:00
|
|
|
function reply() {
|
2022-12-02 02:18:57 +00:00
|
|
|
if (!checkLogin())
|
|
|
|
return
|
2023-01-07 07:55:07 +00:00
|
|
|
if (details)
|
2022-12-14 17:20:03 +00:00
|
|
|
focusEditor()
|
2023-01-07 07:55:07 +00:00
|
|
|
else
|
2024-02-21 15:20:08 +00:00
|
|
|
navigateToStatus({ status: status.value, focusReply: true })
|
2022-11-24 11:35:26 +00:00
|
|
|
}
|
2022-11-13 05:34:43 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2023-01-17 12:55:36 +00:00
|
|
|
<div flex justify-between items-center class="status-actions">
|
2022-11-27 15:11:34 +00:00
|
|
|
<div flex-1>
|
2022-11-25 23:46:25 +00:00
|
|
|
<StatusActionButton
|
2022-11-29 23:25:29 +00:00
|
|
|
:content="$t('action.reply')"
|
2023-01-26 12:41:43 +00:00
|
|
|
:text="!getPreferences(userSettings, 'hideReplyCount') && status.repliesCount || ''"
|
2023-03-19 12:24:27 +00:00
|
|
|
color="text-blue" hover="text-blue" elk-group-hover="bg-blue/10"
|
2023-01-08 09:03:23 +00:00
|
|
|
icon="i-ri:chat-1-line"
|
2022-11-29 08:15:05 +00:00
|
|
|
:command="command"
|
2022-11-28 10:23:33 +00:00
|
|
|
@click="reply"
|
2023-01-01 21:45:46 +00:00
|
|
|
>
|
2023-01-26 12:41:43 +00:00
|
|
|
<template v-if="status.repliesCount && !getPreferences(userSettings, 'hideReplyCount')" #text>
|
2023-01-09 11:24:26 +00:00
|
|
|
<CommonLocalizedNumber
|
|
|
|
keypath="action.reply_count"
|
|
|
|
:count="status.repliesCount"
|
|
|
|
/>
|
2023-01-01 21:45:46 +00:00
|
|
|
</template>
|
|
|
|
</StatusActionButton>
|
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-29 23:25:29 +00:00
|
|
|
:content="$t('action.boost')"
|
2023-01-15 14:19:22 +00:00
|
|
|
:text="!getPreferences(userSettings, 'hideBoostCount') && status.reblogsCount ? status.reblogsCount : ''"
|
2023-03-19 12:24:27 +00:00
|
|
|
color="text-green" hover="text-green" elk-group-hover="bg-green/10"
|
2022-11-24 08:34:05 +00:00
|
|
|
icon="i-ri:repeat-line"
|
|
|
|
active-icon="i-ri:repeat-fill"
|
2023-08-11 11:56:47 +00:00
|
|
|
inactive-icon="i-tabler:repeat-off"
|
2023-01-05 16:48:20 +00:00
|
|
|
:active="!!status.reblogged"
|
2023-01-08 13:24:59 +00:00
|
|
|
:disabled="isLoading.reblogged || !canReblog"
|
2022-11-29 08:15:05 +00:00
|
|
|
:command="command"
|
2022-11-24 08:34:05 +00:00
|
|
|
@click="toggleReblog()"
|
2023-01-01 21:45:46 +00:00
|
|
|
>
|
2023-01-15 14:19:22 +00:00
|
|
|
<template v-if="status.reblogsCount && !getPreferences(userSettings, 'hideBoostCount')" #text>
|
2023-01-09 11:24:26 +00:00
|
|
|
<CommonLocalizedNumber
|
|
|
|
keypath="action.boost_count"
|
|
|
|
:count="status.reblogsCount"
|
|
|
|
/>
|
2023-01-01 21:45:46 +00:00
|
|
|
</template>
|
|
|
|
</StatusActionButton>
|
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-29 23:25:29 +00:00
|
|
|
:content="$t('action.favourite')"
|
2023-01-15 14:19:22 +00:00
|
|
|
:text="!getPreferences(userSettings, 'hideFavoriteCount') && status.favouritesCount ? status.favouritesCount : ''"
|
2023-05-06 15:52:33 +00:00
|
|
|
:color="useStarFavoriteIcon ? 'text-yellow' : 'text-rose'"
|
|
|
|
:hover="useStarFavoriteIcon ? 'text-yellow' : 'text-rose'"
|
|
|
|
:elk-group-hover="useStarFavoriteIcon ? 'bg-yellow/10' : 'bg-rose/10'"
|
|
|
|
:icon="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'"
|
|
|
|
:active-icon="useStarFavoriteIcon ? 'i-ri:star-fill' : 'i-ri:heart-3-fill'"
|
2023-01-05 16:48:20 +00:00
|
|
|
:active="!!status.favourited"
|
2022-11-24 08:34:05 +00:00
|
|
|
:disabled="isLoading.favourited"
|
2022-11-29 08:15:05 +00:00
|
|
|
:command="command"
|
2022-11-24 08:34:05 +00:00
|
|
|
@click="toggleFavourite()"
|
2023-01-01 21:45:46 +00:00
|
|
|
>
|
2023-01-15 14:19:22 +00:00
|
|
|
<template v-if="status.favouritesCount && !getPreferences(userSettings, 'hideFavoriteCount')" #text>
|
2023-01-09 11:24:26 +00:00
|
|
|
<CommonLocalizedNumber
|
|
|
|
keypath="action.favourite_count"
|
|
|
|
:count="status.favouritesCount"
|
|
|
|
/>
|
2023-01-01 21:45:46 +00:00
|
|
|
</template>
|
|
|
|
</StatusActionButton>
|
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-29 23:25:29 +00:00
|
|
|
:content="$t('action.bookmark')"
|
2023-05-06 15:52:33 +00:00
|
|
|
:color="useStarFavoriteIcon ? 'text-rose' : 'text-yellow'"
|
|
|
|
:hover="useStarFavoriteIcon ? 'text-rose' : 'text-yellow'"
|
|
|
|
:elk-group-hover="useStarFavoriteIcon ? 'bg-rose/10' : 'bg-yellow/10' "
|
2022-11-24 08:34:05 +00:00
|
|
|
icon="i-ri:bookmark-line"
|
|
|
|
active-icon="i-ri:bookmark-fill"
|
2023-01-05 16:48:20 +00:00
|
|
|
:active="!!status.bookmarked"
|
2022-11-24 08:34:05 +00:00
|
|
|
:disabled="isLoading.bookmarked"
|
2022-11-29 08:15:05 +00:00
|
|
|
:command="command"
|
2022-11-24 08:34:05 +00:00
|
|
|
@click="toggleBookmark()"
|
2022-11-24 05:04:20 +00:00
|
|
|
/>
|
2022-11-27 15:11:34 +00:00
|
|
|
</div>
|
2022-11-13 05:34:43 +00:00
|
|
|
</div>
|
|
|
|
</template>
|