feat: open reply dialog on timeline

closes #125

components/publish/PublishWidget.vue

@@ -3,32 +3,33 @@ import type { CreateStatusParams, StatusVisibility } from 'masto'
 import { fileOpen } from 'browser-fs-access'
 import { useDropZone } from '@vueuse/core'
 import { EditorContent } from '@tiptap/vue-3'
+import type { Draft } from '~/composables/statusDrafts'
 
 const {
   draftKey,
-  placeholder = 'What is on your mind?',
-  inReplyToId,
-  inReplyToVisibility = 'public',
+  initial = getDefaultDraft() as never /* Bug of vue-core */,
   expanded: _expanded = false,
 } = defineProps<{
   draftKey: string
+  initial?: () => Draft
   placeholder?: string
   inReplyToId?: string
   inReplyToVisibility?: StatusVisibility
   expanded?: boolean
 }>()
 
+// eslint-disable-next-line prefer-const
+let { draft, isEmpty } = $(useDraft(draftKey, initial))
+
 let isSending = $ref(false)
-let { draft } = $(useDraft(draftKey, inReplyToId, inReplyToVisibility))
-const isExistDraft = $computed(() => !!draft.params.status && draft.params.status !== '<p></p>')
-let isExpanded = $ref(isExistDraft || _expanded)
+let isExpanded = $ref(!isEmpty || _expanded)
 
 const { editor } = useTiptap({
   content: computed({
     get: () => draft.params.status,
     set: newVal => draft.params.status = newVal,
   }),
-  placeholder,
+  placeholder: draft.placeholder,
   autofocus: isExpanded,
   onSubmit: publish,
   onFocus() { isExpanded = true },
@@ -108,6 +109,7 @@ async function publish() {
       raw: draft.params.status,
       ...payload,
     })
+    // eslint-disable-next-line no-alert
     const result = confirm('[DEV] Payload logged to console, do you want to publish it?')
     if (!result)
       return
@@ -121,7 +123,7 @@ async function publish() {
     else
       await useMasto().statuses.update(draft.editingStatus.id, payload)
 
-    draft = getDefaultDraft({ inReplyToId, visibility: inReplyToVisibility })
+    draft = initial()
     isPublishDialogOpen.value = false
   }
   finally {
@@ -137,15 +139,6 @@ async function onDrop(files: File[] | null) {
 }
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
-
-onUnmounted(() => {
-  // Remove draft if it's empty
-  if (!draft.attachments.length && !draft.params.status) {
-    nextTick(() => {
-      delete currentUserDrafts.value[draftKey]
-    })
-  }
-})
 </script>
 
 <template>
@@ -261,7 +254,7 @@ onUnmounted(() => {
 
           <button
             btn-solid rounded-full text-sm
-            :disabled="!isExistDraft || isUploading || (draft.attachments.length === 0 && !draft.params.status)"
+            :disabled="isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status)"
             @click="publish"
           >
             {{ !draft.editingStatus ? 'Publish!' : 'Save changes' }}

components/status/StatusActions.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { Status } from 'masto'
 
-const { status: _status } = defineProps<{
+const { status: _status, details } = defineProps<{
   status: Status
+  details?: boolean
 }>()
 let status = $ref<Status>({ ..._status })
 
@@ -80,6 +81,7 @@ const copyLink = async () => {
 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
@@ -97,22 +99,23 @@ const deleteAndRedraft = async () => {
   // TODO confirm to delete
 
   const { text } = await useMasto().statuses.remove(status.id)
+  openPublishDialog('dialog', getDraftFromStatus(status, text), true)
+}
 
-  if (!dialogDraft.isEmpty) {
-    // TODO confirm to overwrite
+const reply = () => {
+  if (details) {
+    // TODO focus to editor
+  }
+  else {
+    const { key, draft } = getReplyDraft(status)
+    openPublishDialog(key, draft())
   }
-
-  openPublishDialog('dialog', {
-    params: { ...getParamsFromStatus(status), status: text! },
-    attachments: [],
-  })
 }
 
 function editStatus() {
   openPublishDialog(`edit-${status.id}`, {
+    ...getDraftFromStatus(status),
     editingStatus: status,
-    params: getParamsFromStatus(status),
-    attachments: [],
   })
 }
 </script>
@@ -122,11 +125,10 @@ function editStatus() {
     <div flex-1>
       <StatusActionButton
         content="Reply"
-        as="router-link"
-        :to="getStatusPath(status)"
         :text="status.repliesCount"
         color="text-blue" hover="text-blue" group-hover="bg-blue/10"
         icon="i-ri:chat-3-line"
+        @click="reply"
       />
     </div>
 

components/status/StatusDetails.vue

@@ -52,6 +52,6 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
         · {{ status.application?.name }}
       </div>
     </div>
-    <StatusActions :status="status" border="t base" pt-2 />
+    <StatusActions :status="status" details border="t base" pt-2 />
   </div>
 </template>