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>

composables/dialog.ts

@@ -19,9 +19,12 @@ export function openSigninDialog() {
   isSigninDialogOpen.value = true
 }
 
-export function openPublishDialog(draftKey = 'dialog', draft?: Draft) {
+export function openPublishDialog(draftKey = 'dialog', draft?: Draft, overwrite = false): void {
   dialogDraftKey.value = draftKey
-  if (draft)
+  if (overwrite) {
+    // TODO overwrite warning
+  }
+  if (draft && (overwrite || !currentUserDrafts.value[draftKey]))
     currentUserDrafts.value[draftKey] = draft
   isPublishDialogOpen.value = true
 }

composables/statusDrafts.ts

@@ -1,4 +1,4 @@
-import type { Account, Attachment, CreateStatusParams, Status, StatusVisibility } from 'masto'
+import type { Account, Attachment, CreateStatusParams, Status } from 'masto'
 import { STORAGE_KEY_DRAFTS } from '~/constants'
 import type { Mutable } from '~/types/utils'
 
@@ -8,6 +8,7 @@ export interface Draft {
     status?: Exclude<CreateStatusParams['status'], null>
   }
   attachments: Attachment[]
+  placeholder: string
 }
 export type DraftMap = Record<string, Draft>
 
@@ -26,30 +27,56 @@ export function getDefaultDraft({
   status = '',
   inReplyToId,
   visibility = 'public',
-}: Partial<Draft['params']> = {}): Draft {
+  placeholder = 'What is on your mind?',
+  attachments = [],
+}: Partial<Draft['params'] & Omit<Draft, 'params'>> = {}): Draft {
   return {
     params: {
       status,
       inReplyToId,
       visibility,
     },
-    attachments: [],
+    attachments,
+    placeholder,
   }
 }
 
-export function getParamsFromStatus(status: Status): Draft['params'] {
-  return {
-    status: status.content,
+export function getDraftFromStatus(status: Status, text?: null | string): Draft {
+  return getDefaultDraft({
+    status: text || status.content,
     mediaIds: status.mediaAttachments.map(att => att.id),
     visibility: status.visibility,
+    attachments: status.mediaAttachments,
+  })
+}
+
+export function getReplyDraft(status: Status) {
+  return {
+    key: `reply-${status.id}`,
+    draft: () => getDefaultDraft({
+      inReplyToId: status!.id,
+      placeholder: `Reply to ${status?.account ? getDisplayName(status.account) : 'this thread'}`,
+      visibility: status.visibility,
+    }),
   }
 }
 
-export function useDraft(draftKey: string, inReplyToId?: string, inReplyToVisibility?: StatusVisibility) {
+export const isEmptyDraft = (draft: Draft) => {
+  const { params, attachments } = draft
+  const status = params.status || ''
+  return (status.length === 0 || status === '<p></p>')
+    && attachments.length === 0
+    && (params.spoilerText || '').length === 0
+}
+
+export function useDraft(
+  draftKey: string,
+  initial: () => Draft = () => getDefaultDraft(),
+) {
   const draft = computed({
     get() {
       if (!currentUserDrafts.value[draftKey])
-        currentUserDrafts.value[draftKey] = getDefaultDraft({ inReplyToId, visibility: inReplyToVisibility })
+        currentUserDrafts.value[draftKey] = initial()
       return currentUserDrafts.value[draftKey]
     },
     set(val) {
@@ -57,27 +84,30 @@ export function useDraft(draftKey: string, inReplyToId?: string, inReplyToVisibi
     },
   })
 
-  const isEmpty = computed(() => {
-    return (draft.value.params.status ?? '').trim().length === 0
-      && draft.value.attachments.length === 0
+  const isEmpty = computed(() => isEmptyDraft(draft.value))
+
+  onUnmounted(async () => {
+    // Remove draft if it's empty
+    if (isEmpty.value) {
+      await nextTick()
+      delete currentUserDrafts.value[draftKey]
+    }
   })
 
   return { draft, isEmpty }
 }
 
-export const dialogDraft = useDraft('dialog')
-
 export function mentionUser(account: Account) {
   openPublishDialog('dialog', getDefaultDraft({
     status: `@${account.acct} `,
-  }))
+  }), true)
 }
 
 export function directMessageUser(account: Account) {
   openPublishDialog('dialog', getDefaultDraft({
     status: `@${account.acct} `,
     visibility: 'direct',
-  }))
+  }), true)
 }
 
 export function clearUserDrafts(account?: Account) {

pages/@[account]/[status].vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Status } from 'masto'
 import type { ComponentPublicInstance } from 'vue'
 
 const route = useRoute()
@@ -6,9 +7,14 @@ const id = $(computedEager(() => route.params.status as string))
 const main = ref<ComponentPublicInstance | null>(null)
 let bottomSpace = $ref(0)
 
-const { data: status, refresh: refreshStatus } = useAsyncData(async () => window.history.state?.status ?? await fetchStatus(id))
+const { data: status, refresh: refreshStatus } = useAsyncData(async () => (
+  window.history.state?.status as Status | undefined)
+  ?? await fetchStatus(id),
+)
 const { data: context, pending, refresh: refreshContext } = useAsyncData(`context:${id}`, () => useMasto().statuses.fetchContext(id))
 
+const replyDraft = $computed(() => status.value ? getReplyDraft(status.value) : null)
+
 function scrollTo() {
   const statusElement = unrefElement(main)
   if (!statusElement)
@@ -53,11 +59,9 @@ onReactivated(() => {
       />
       <PublishWidget
         v-if="currentUser"
+        :draft-key="replyDraft!.key"
+        :initial="replyDraft!.draft"
         border="t base"
-        :draft-key="`reply-${id}`"
-        :placeholder="`Reply to ${status?.account ? getDisplayName(status.account) : 'this thread'}`"
-        :in-reply-to-id="id"
-        :in-reply-to-visibility="status.visibility"
       />
 
       <template v-if="context">