feat: hide actions in zen mode

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,
+  }
+}