feat: open reply dialog on timeline

closes #125

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) {