feat: hide actions in zen mode

components/status/StatusActionsMore.vue

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import type { Status } from 'masto'
+
+const props = defineProps<{
+  status: Status
+  details?: boolean
+  command?: boolean
+}>()
+
+const { details, command } = $(props)
+
+const {
+  status,
+  isLoading,
+  toggleBookmark,
+  toggleFavourite,
+  togglePin,
+  toggleReblog,
+} = $(useStatusActions(props))
+
+const clipboard = useClipboard()
+const router = useRouter()
+const route = useRoute()
+
+const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id)
+
+const {
+  toggle: _toggleTranslation,
+  translation,
+  enabled: isTranslationEnabled,
+} = useTranslation(props.status)
+
+const toggleTranslation = async () => {
+  isLoading.translation = true
+  await _toggleTranslation()
+  isLoading.translation = false
+}
+
+const copyLink = async (status: Status) => {
+  const url = getStatusPermalinkRoute(status)
+  if (url)
+    await clipboard.copy(`${location.origin}${url}`)
+}
+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
+  }
+
+  await useMasto().statuses.remove(status.id)
+
+  if (route.name === '@account-status')
+    router.back()
+
+  // TODO when timeline, remove this item
+}
+
+const deleteAndRedraft = 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 and re-draft this post?')
+    if (!result)
+      return
+  }
+
+  const { text } = await useMasto().statuses.remove(status.id)
+  openPublishDialog('dialog', getDraftFromStatus(status, text), true)
+}
+
+const reply = () => {
+  if (details) {
+    // TODO focus to editor
+  }
+  else {
+    const { key, draft } = getReplyDraft(status)
+    openPublishDialog(key, draft())
+  }
+}
+
+function editStatus() {
+  openPublishDialog(`edit-${status.id}`, {
+    ...getDraftFromStatus(status),
+    editingStatus: status,
+  })
+}
+</script>
+
+<template>
+  <CommonDropdown flex-none ml3 placement="bottom" :eager-mount="command">
+    <StatusActionButton
+      :content="$t('action.more')"
+      color="text-purple" hover="text-purple" group-hover="bg-purple/10"
+      icon="i-ri:more-2-line"
+    />
+
+    <template #popper>
+      <div flex="~ col">
+        <template v-if="isZenMode">
+          <CommonDropdownItem
+            :text="$t('action.reply')"
+            icon="i-ri:chat-3-line"
+            :command="command"
+            @click="reply()"
+          />
+
+          <CommonDropdownItem
+            :text="status.reblogged ? $t('action.boosted') : $t('action.boost')"
+            icon="i-ri:repeat-fill"
+            :class="status.reblogged ? 'text-green' : ''"
+            :command="command"
+            :disabled="isLoading.reblogged"
+            @click="toggleReblog()"
+          />
+
+          <CommonDropdownItem
+            :text="status.favourited ? $t('action.favourited') : $t('action.favourite')"
+            :icon="status.favourited ? 'i-ri:heart-3-fill' : 'i-ri:heart-3-line'"
+            :class="status.favourited ? 'text-rose' : ''"
+            :command="command"
+            :disabled="isLoading.favourited"
+            @click="toggleFavourite()"
+          />
+
+          <CommonDropdownItem
+            :text="status.bookmarked ? $t('action.bookmarked') : $t('action.bookmark')"
+            :icon="status.bookmarked ? 'i-ri:bookmark-fill' : 'i-ri:bookmark-line'"
+            :class="status.bookmarked ? 'text-yellow' : ''"
+            :command="command"
+            :disabled="isLoading.bookmarked"
+            @click="toggleBookmark()"
+          />
+        </template>
+
+        <CommonDropdownItem
+          :text="$t('menu.copy_link_to_post')"
+          icon="i-ri:link"
+          :command="command"
+          @click="copyLink(status)"
+        />
+
+        <NuxtLink :to="status.url" target="_blank">
+          <CommonDropdownItem
+            v-if="status.url"
+            :text="$t('menu.open_in_original_site')"
+            icon="i-ri:arrow-right-up-line"
+            :command="command"
+          />
+        </NuxtLink>
+
+        <CommonDropdownItem
+          v-if="isTranslationEnabled && status.language !== languageCode"
+          :text="translation.visible ? $t('menu.show_untranslated') : $t('menu.translate_post')"
+          icon="i-ri:translate"
+          :command="command"
+          @click="toggleTranslation"
+        />
+
+        <template v-if="currentUser">
+          <template v-if="isAuthor">
+            <CommonDropdownItem
+              :text="status.pinned ? $t('menu.unpin_on_profile') : $t('menu.pin_on_profile')"
+              icon="i-ri:pushpin-line"
+              :command="command"
+              @click="togglePin"
+            />
+
+            <CommonDropdownItem
+              :text="$t('menu.edit')"
+              icon="i-ri:edit-line"
+              :command="command"
+              @click="editStatus"
+            />
+
+            <CommonDropdownItem
+              :text="$t('menu.delete')"
+              icon="i-ri:delete-bin-line"
+              text-red-600
+              :command="command"
+              @click="deleteStatus"
+            />
+
+            <CommonDropdownItem
+              :text="$t('menu.delete_and_redraft')"
+              icon="i-ri:eraser-line"
+              text-red-600
+              :command="command"
+              @click="deleteAndRedraft"
+            />
+          </template>
+          <template v-else>
+            <CommonDropdownItem
+              :text="$t('menu.mention_account', [`@${status.account.acct}`])"
+              icon="i-ri:at-line"
+              :command="command"
+              @click="mentionUser(status.account)"
+            />
+          </template>
+        </template>
+      </div>
+    </template>
+  </CommonDropdown>
+</template>