feat: hide actions in zen mode

components/status/StatusActions.vue

@@ -1,115 +1,21 @@
 <script setup lang="ts">
 import type { Status } from 'masto'
 
-const { status: _status, details, command } = defineProps<{
+const props = defineProps<{
   status: Status
   details?: boolean
   command?: boolean
 }>()
-let status = $ref<Status>({ ..._status })
 
-watch(() => _status, (val) => {
-  status = { ...val }
-}, { deep: true, immediate: true })
+const { details, command } = $(props)
 
-const clipboard = useClipboard()
-const router = useRouter()
-const route = useRoute()
-
-const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id)
-
-// Use different states to let the user press different actions right after the other
-const isLoading = $ref({
-  reblogged: false,
-  favourited: false,
-  bookmarked: false,
-  pinned: false,
-  translation: false,
-})
-
-type Action = 'reblogged' | 'favourited' | 'bookmarked' | 'pinned'
-type CountField = 'reblogsCount' | 'favouritesCount'
-async function toggleStatusAction(action: Action, newStatus: Promise<Status>, countField?: CountField) {
-  // Optimistic update
-  status[action] = !status[action]
-  if (countField)
-    status[countField] += status[action] ? 1 : -1
-
-  try {
-    isLoading[action] = true
-    Object.assign(status, await newStatus)
-  }
-  finally {
-    isLoading[action] = false
-  }
-}
-const toggleReblog = () => toggleStatusAction(
-  'reblogged',
-  useMasto().statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id).then((res) => {
-    if (status.reblogged)
-      // returns the original status
-      return res.reblog!
-    return res
-  }),
-  'reblogsCount',
-)
-
-const toggleFavourite = () => toggleStatusAction(
-  'favourited',
-  useMasto().statuses[status.favourited ? 'unfavourite' : 'favourite'](status.id),
-  'favouritesCount',
-)
-
-const toggleBookmark = () => toggleStatusAction(
-  'bookmarked',
-  useMasto().statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id),
-)
-const togglePin = async () => toggleStatusAction(
-  'pinned',
-  useMasto().statuses[status.pinned ? 'unpin' : 'pin'](status.id),
-)
-
-const { toggle: _toggleTranslation, translation, enabled: isTranslationEnabled } = useTranslation(_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 {
+  status,
+  isLoading,
+  toggleBookmark,
+  toggleFavourite,
+  toggleReblog,
+} = $(useStatusActions(props))
 
 const reply = () => {
   if (details) {
@@ -120,13 +26,6 @@ const reply = () => {
     openPublishDialog(key, draft())
   }
 }
-
-function editStatus() {
-  openPublishDialog(`edit-${status.id}`, {
-    ...getDraftFromStatus(status),
-    editingStatus: status,
-  })
-}
 </script>
 
 <template>
@@ -182,83 +81,5 @@ function editStatus() {
         @click="toggleBookmark()"
       />
     </div>
-
-    <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-line"
-      />
-
-      <template #popper>
-        <div flex="~ col">
-          <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>
   </div>
 </template>

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>

components/status/StatusCard.vue

@@ -63,12 +63,12 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
         </AccountHoverWrapper>
       </div>
       <div flex="~ col 1" min-w-0>
-        <div flex>
+        <div flex items-center>
           <AccountHoverWrapper :account="status.account">
             <StatusAccountDetails :account="status.account" />
           </AccountHoverWrapper>
           <div flex-auto />
-          <div text-sm text-secondary flex="~ row nowrap" hover:underline>
+          <div v-if="!isZenMode" text-sm text-secondary flex="~ row nowrap" hover:underline>
             <CommonTooltip :content="createdAt">
               <a :title="status.createdAt" :href="getStatusRoute(status).href" @click.prevent="go($event)">
                 <time text-sm hover:underline :datetime="status.createdAt">
@@ -78,6 +78,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
             </CommonTooltip>
             <StatusEditIndicator :status="status" inline />
           </div>
+          <StatusActionsMore :status="status" mr--2 />
         </div>
         <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />
         <div>
@@ -99,7 +100,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
             :actions="false"
           />
         </div>
-        <StatusActions v-if="actions !== false" pt2 :status="status" />
+        <StatusActions v-if="(actions !== false && !isZenMode)" pt2 :status="status" />
       </div>
     </div>
   </div>

components/status/StatusDetails.vue

@@ -18,7 +18,8 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
 </script>
 
 <template>
-  <div :id="`status-${status.id}`" flex flex-col gap-2 py3 px-4>
+  <div :id="`status-${status.id}`" flex flex-col gap-2 py3 px-4 relative>
+    <StatusActionsMore :status="status" absolute right-2 top-2 />
     <NuxtLink :to="getAccountRoute(status.account)" rounded-full hover:bg-active transition-100 pr5 mr-a>
       <AccountHoverWrapper :account="status.account">
         <AccountInfo :account="status.account" />

composables/masto.ts

@@ -103,7 +103,7 @@ export function getStatusRoute(status: Status) {
   })
 }
 
-export function getStatusPermalinkRouteRoute(status: Status) {
+export function getStatusPermalinkRoute(status: Status) {
   return status.url
     ? useRouter().resolve({
       name: 'permalink',

composables/status.ts

@@ -0,0 +1,77 @@
+import type { Status } from 'masto'
+
+type Action = 'reblogged' | 'favourited' | 'bookmarked' | 'pinned'
+type CountField = 'reblogsCount' | 'favouritesCount'
+
+export interface StatusActionsProps {
+  status: Status
+}
+
+export function useStatusActions(props: StatusActionsProps) {
+  let status = $ref<Status>({ ...props.status })
+
+  watch(
+    () => props.status,
+    val => status = { ...val },
+    { deep: true, immediate: true },
+  )
+
+  // Use different states to let the user press different actions right after the other
+  const isLoading = $ref({
+    reblogged: false,
+    favourited: false,
+    bookmarked: false,
+    pinned: false,
+    translation: false,
+  })
+
+  async function toggleStatusAction(action: Action, newStatus: Promise<Status>, countField?: CountField) {
+  // Optimistic update
+    status[action] = !status[action]
+    if (countField)
+      status[countField] += status[action] ? 1 : -1
+
+    try {
+      isLoading[action] = true
+      Object.assign(status, await newStatus)
+    }
+    finally {
+      isLoading[action] = false
+    }
+  }
+  const toggleReblog = () => toggleStatusAction(
+    'reblogged',
+    useMasto().statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id).then((res) => {
+      if (status.reblogged)
+      // returns the original status
+        return res.reblog!
+      return res
+    }),
+    'reblogsCount',
+  )
+
+  const toggleFavourite = () => toggleStatusAction(
+    'favourited',
+    useMasto().statuses[status.favourited ? 'unfavourite' : 'favourite'](status.id),
+    'favouritesCount',
+  )
+
+  const toggleBookmark = () => toggleStatusAction(
+    'bookmarked',
+    useMasto().statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id),
+  )
+
+  const togglePin = async () => toggleStatusAction(
+    'pinned',
+    useMasto().statuses[status.pinned ? 'unpin' : 'pin'](status.id),
+  )
+
+  return {
+    status: $$(status),
+    isLoading: $$(isLoading),
+    toggleReblog,
+    toggleFavourite,
+    toggleBookmark,
+    togglePin,
+  }
+}

locales/en-US.json

@@ -18,10 +18,13 @@
   },
   "action": {
     "bookmark": "Bookmark",
+    "bookmarked": "Bookmarked",
     "boost": "Boost",
+    "boosted": "Boosted",
     "compose": "Compose",
     "enter_app": "Enter App",
     "favourite": "Favourite",
+    "favourited": "Favourited",
     "more": "More",
     "publish": "Publish!",
     "reply": "Reply",

locales/zh-CN.json

@@ -18,10 +18,13 @@
   },
   "action": {
     "bookmark": "收藏",
+    "bookmarked": "已收藏",
     "boost": "转发",
+    "boosted": "已转发",
     "compose": "撰写",
     "enter_app": "进入应用",
     "favourite": "喜欢",
+    "favourited": "已喜欢",
     "more": "更多",
     "publish": "发布！",
     "reply": "回复",
@@ -99,6 +102,7 @@
   "placeholder": {
     "default_1": "在想些什么？",
     "reply_to_account": "回复 {0}",
+    "replying": "回复",
     "the_thread": "这个帖子"
   },
   "state": {