feat(status): edit & redraft

components/publish/PublishWidget.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { CreateStatusParams, CreateStatusParamsWithStatus, StatusVisibility } from 'masto'
+import type { CreateStatusParams, StatusVisibility } from 'masto'
 
 const {
   draftKey,
@@ -12,22 +12,7 @@ const {
 }>()
 
 let isSending = $ref(false)
-function getDefaultStatus(): CreateStatusParamsWithStatus {
-  return {
-    status: '',
-    inReplyToId,
-    visibility: 'public',
-  }
-}
-const draft = $computed(() => {
-  if (!currentUserDrafts.value[draftKey]) {
-    currentUserDrafts.value[draftKey] = {
-      params: getDefaultStatus(),
-      attachments: [],
-    }
-  }
-  return currentUserDrafts.value[draftKey]
-})
+let { draft } = $(useDraft(draftKey, inReplyToId))
 
 const status = $computed(() => {
   return {
@@ -93,9 +78,15 @@ function chooseVisibility(visibility: StatusVisibility) {
 async function publish() {
   try {
     isSending = true
+    if (!draft.editingStatus)
       await masto.statuses.create(status)
-    draft.params = getDefaultStatus()
-    draft.attachments = []
+    else await masto.statuses.update(draft.editingStatus.id, status)
+
+    draft = {
+      params: getDefaultStatus(inReplyToId),
+      attachments: [],
+    }
+    isPublishDialogOpen.value = false
   }
   finally {
     isSending = false
@@ -112,7 +103,17 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div v-if="currentUser" p4 flex gap-4>
+  <div v-if="currentUser" flex="~ col">
+    <template v-if="draft.editingStatus">
+      <div flex="~ col gap-1">
+        <div text-gray self-center>
+          Editing
+        </div>
+        <StatusCard :status="draft.editingStatus" :actions="false" :hover="false" />
+      </div>
+      <div border="b dashed gray/40" />
+    </template>
+    <div p4 flex gap-4>
       <AccountAvatar :account="currentUser.account" w-12 h-12 />
       <div
         flex flex-col gap-3 flex-auto
@@ -172,9 +173,10 @@ onUnmounted(() => {
             :disabled="isUploading || (draft.attachments.length === 0 && !draft.params.status)"
             @click="publish"
           >
-          Publish!
+            {{ !draft.editingStatus ? 'Publish!' : 'Save changes' }}
           </button>
         </div>
       </div>
     </div>
+  </div>
 </template>

components/status/StatusActions.vue

@@ -54,6 +54,11 @@ const toggleBookmark = () => toggleStatusAction(
   'bookmarked',
   masto.statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id),
 )
+const togglePin = async () => toggleStatusAction(
+  'pinned',
+  masto.statuses[status.pinned ? 'unpin' : 'pin'](status.id),
+)
+
 const copyLink = async () => {
   await clipboard.copy(location.href)
 }
@@ -69,10 +74,34 @@ const deleteStatus = async () => {
 
   // TODO when timeline, remove this item
 }
-const togglePin = async () => toggleStatusAction(
-  'pinned',
-  masto.statuses[status.pinned ? 'unpin' : 'pin'](status.id),
-)
+
+const deleteAndRedraft = async () => {
+  // TODO confirm to delete
+
+  const { text } = await masto.statuses.remove(status.id)
+
+  if (!dialogDraft.isEmpty) {
+    // TODO confirm to overwrite
+  }
+
+  dialogDraft.draft.value = {
+    params: { ...getParamsFromStatus(status), status: text! },
+    attachments: [],
+  }
+  openPublishDialog()
+}
+
+function editStatus() {
+  if (!dialogDraft.isEmpty) {
+    // TODO confirm to overwrite
+  }
+  dialogDraft.draft.value = {
+    editingStatus: status,
+    params: getParamsFromStatus(status),
+    attachments: [],
+  }
+  openPublishDialog()
+}
 </script>
 
 <template>
@@ -151,8 +180,7 @@ const togglePin = async () => toggleStatusAction(
               {{ status.pinned ? 'Unpin on profile' : 'Pin on profile' }}
             </CommonDropdownItem>
 
-            <!-- TODO -->
-            <CommonDropdownItem v-if="isAuthor" icon="i-ri:edit-line">
+            <CommonDropdownItem v-if="isAuthor" icon="i-ri:edit-line" @click="editStatus">
               Edit
             </CommonDropdownItem>
 
@@ -165,6 +193,7 @@ const togglePin = async () => toggleStatusAction(
 
             <CommonDropdownItem
               v-if="isAuthor" icon="i-ri:eraser-line" text-red-600
+              @click="deleteAndRedraft"
             >
               Delete & re-draft
             </CommonDropdownItem>

components/status/StatusCard.vue

@@ -5,9 +5,11 @@ const props = withDefaults(
   defineProps<{
     status: Status
     actions?: boolean
+    hover?: boolean
   }>(),
   {
     actions: true,
+    hover: true,
   },
 )
 
@@ -68,7 +70,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
 </script>
 
 <template>
-  <div ref="el" flex flex-col gap-2 px-4 hover:bg-active transition-100 cursor-pointer @click="onclick">
+  <div ref="el" flex flex-col gap-2 px-4 transition-100 cursor-pointer :class="{ 'hover:bg-active': hover }" @click="onclick">
     <div v-if="rebloggedBy" pl8>
       <div flex gap-1 items-center text-gray:75 text-sm>
         <div i-ri:repeat-fill mr-1 />

composables/statusDrafts.ts

@@ -1,9 +1,10 @@
-import type { Attachment, CreateStatusParamsWithStatus } from 'masto'
+import type { Attachment, CreateStatusParams, CreateStatusParamsWithStatus, Status } from 'masto'
 import { STORAGE_KEY_DRAFTS } from '~/constants'
 import type { Mutable } from '~/types/utils'
 
 export type DraftMap = Record<string, {
-  params: Mutable<CreateStatusParamsWithStatus>
+  editingStatus?: Status
+  params: Omit<Mutable<CreateStatusParams>, 'status'> & { status?: Exclude<CreateStatusParams['status'], null> }
   attachments: Attachment[]
 }>
 
@@ -17,3 +18,45 @@ export const currentUserDrafts = computed(() => {
     allDrafts.value[id] = {}
   return allDrafts.value[id]
 })
+
+export function getDefaultStatus(inReplyToId?: string): CreateStatusParamsWithStatus {
+  return {
+    status: '',
+    inReplyToId,
+    visibility: 'public',
+  }
+}
+
+export function getParamsFromStatus(status: Status) {
+  return {
+    status: status.content,
+    mediaIds: status.mediaAttachments.map(att => att.id),
+    visibility: status.visibility,
+  }
+}
+
+export function useDraft(draftKey: string, inReplyToId?: string) {
+  const draft = computed({
+    get() {
+      if (!currentUserDrafts.value[draftKey]) {
+        currentUserDrafts.value[draftKey] = {
+          params: getDefaultStatus(inReplyToId),
+          attachments: [],
+        }
+      }
+      return currentUserDrafts.value[draftKey]
+    },
+    set(val) {
+      currentUserDrafts.value[draftKey] = val
+    },
+  })
+
+  const isEmpty = computed(() => {
+    return (draft.value.params.status ?? '').trim().length === 0
+      && draft.value.attachments.length === 0
+  })
+
+  return { draft, isEmpty }
+}
+
+export const dialogDraft = useDraft('dialog')