feat: go to new status after redraftting

components/modal/ModalContainer.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Status } from 'masto'
 import {
   isCommandPanelOpen,
   isEditHistoryDialogOpen,
@@ -26,6 +27,15 @@ useEventListener('keydown', (e: KeyboardEvent) => {
     openCommandPanel(true)
   }
 })
+
+const handlePublished = (status: Status) => {
+  lastPublishDialogStatus.value = status
+  isPublishDialogOpen.value = false
+}
+
+const handlePublishClose = () => {
+  lastPublishDialogStatus.value = null
+}
 </script>
 
 <template>
@@ -36,9 +46,16 @@ useEventListener('keydown', (e: KeyboardEvent) => {
     <ModalDialog v-model="isPreviewHelpOpen" max-w-125>
       <HelpPreview @close="closePreviewHelp()" />
     </ModalDialog>
-    <ModalDialog v-model="isPublishDialogOpen" max-w-180 flex>
+    <ModalDialog
+      v-model="isPublishDialogOpen"
+      max-w-180 flex
+      @close="handlePublishClose"
+    >
       <!-- This `w-0` style is used to avoid overflow problems in flex layouts，so don't remove it unless you know what you're doing -->
-      <PublishWidget :draft-key="dialogDraftKey" expanded flex-1 w-0 />
+      <PublishWidget
+        :draft-key="dialogDraftKey" expanded flex-1 w-0
+        @published="handlePublished"
+      />
     </ModalDialog>
     <ModalDialog
       v-model="isMediaPreviewOpen"

components/modal/ModalDialog.vue

@@ -46,12 +46,13 @@ const props = withDefaults(defineProps<Props>(), {
   keepAlive: false,
 })
 
-const emits = defineEmits<{
+const emit = defineEmits<{
   /** v-model dialog visibility */
   (event: 'update:modelValue', value: boolean): void
+  (event: 'close',): void
 }>()
 
-const visible = useVModel(props, 'modelValue', emits, { passive: true })
+const visible = useVModel(props, 'modelValue', emit, { passive: true })
 
 const deactivated = useDeactivated()
 const route = useRoute()
@@ -75,6 +76,7 @@ defineExpose({
 /** close the dialog */
 function close() {
   visible.value = false
+  emit('close')
 }
 
 function clickMask() {

components/publish/PublishWidget.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Attachment, CreateStatusParams, StatusVisibility } from 'masto'
+import type { Attachment, CreateStatusParams, Status, StatusVisibility } from 'masto'
 import { fileOpen } from 'browser-fs-access'
 import { useDropZone } from '@vueuse/core'
 import { EditorContent } from '@tiptap/vue-3'
@@ -21,7 +21,9 @@ const {
   dialogLabelledBy?: string
 }>()
 
-const emit = defineEmits(['published'])
+const emit = defineEmits<{
+  (evt: 'published', status: Status): void
+}>()
 
 const { t } = useI18n()
 // eslint-disable-next-line prefer-const
@@ -153,14 +155,14 @@ async function publish() {
   try {
     isSending = true
 
+    let status: Status
     if (!draft.editingStatus)
-      await masto.statuses.create(payload)
+      status = await masto.statuses.create(payload)
     else
-      await masto.statuses.update(draft.editingStatus.id, payload)
+      status = await masto.statuses.update(draft.editingStatus.id, payload)
 
     draft = initial()
-    isPublishDialogOpen.value = false
-    emit('published')
+    emit('published', status)
   }
   finally {
     isSending = false

components/status/StatusActionsMore.vue

@@ -72,7 +72,11 @@ const deleteAndRedraft = async () => {
 
   removeCachedStatus(status.id)
   await masto.statuses.remove(status.id)
-  openPublishDialog('dialog', await getDraftFromStatus(status), true)
+  await openPublishDialog('dialog', await getDraftFromStatus(status), true)
+
+  // Go to the new status, if the page is the old status
+  if (lastPublishDialogStatus.value && route.matched.some(m => m.path === '/:server?/@:account/:status'))
+    router.push(getStatusRoute(lastPublishDialogStatus.value))
 }
 
 const reply = () => {

composables/dialog.ts

@@ -1,4 +1,4 @@
-import type { Attachment, StatusEdit } from 'masto'
+import type { Attachment, Status, StatusEdit } from 'masto'
 import type { Draft } from '~/types'
 import { STORAGE_KEY_FIRST_VISIT, STORAGE_KEY_ZEN_MODE } from '~/constants'
 
@@ -20,13 +20,15 @@ export const isEditHistoryDialogOpen = ref(false)
 export const isPreviewHelpOpen = ref(isFirstVisit.value)
 export const isCommandPanelOpen = ref(false)
 
+export const lastPublishDialogStatus = ref<Status | null>(null)
+
 export const toggleZenMode = useToggle(isZenMode)
 
 export function openSigninDialog() {
   isSigninDialogOpen.value = true
 }
 
-export function openPublishDialog(draftKey = 'dialog', draft?: Draft, overwrite = false): void {
+export async function openPublishDialog(draftKey = 'dialog', draft?: Draft, overwrite = false): Promise<void> {
   dialogDraftKey.value = draftKey
 
   if (draft) {
@@ -45,6 +47,8 @@ export function openPublishDialog(draftKey = 'dialog', draft?: Draft, overwrite
       currentUserDrafts.value[draftKey] = draft
   }
   isPublishDialogOpen.value = true
+
+  await until(isPublishDialogOpen).toBe(false)
 }
 
 if (isPreviewHelpOpen.value) {