feat: publish via dialog

components/modal/ModalContainer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isPreviewHelpOpen, isSigninDialogOpen, isUserSwitcherOpen } from '~/composables/dialog'
+import { isPreviewHelpOpen, isPublishDialogOpen, isSigninDialogOpen, isUserSwitcherOpen } from '~/composables/dialog'
 </script>
 
 <template>
@@ -12,4 +12,7 @@ import { isPreviewHelpOpen, isSigninDialogOpen, isUserSwitcherOpen } from '~/com
   <ModalDialog v-model="isPreviewHelpOpen">
     <HelpPreview />
   </ModalDialog>
+  <ModalDialog v-model="isPublishDialogOpen">
+    <PublishWidget draft-key="dialog" min-w-180 p6 />
+  </ModalDialog>
 </template>

components/modal/ModalDialog.vue

@@ -2,6 +2,11 @@
 const { modelValue } = defineModel<{
   modelValue: boolean
 }>()
+
+let init = $ref(false)
+watchOnce(modelValue, () => {
+  init = true
+})
 </script>
 
 <template>
@@ -23,7 +28,7 @@ const { modelValue } = defineModel<{
       "
       :class="modelValue ? 'opacity-100' : 'opacity-0'"
     >
-      <slot />
+      <slot v-if="init" />
     </div>
   </div>
 </template>

components/modal/ModalDrawer.vue

@@ -38,6 +38,11 @@ const transform = computed(() => {
       return ''
   }
 })
+
+let init = $ref(false)
+watchOnce(modelValue, () => {
+  init = true
+})
 </script>
 
 <template>
@@ -55,7 +60,7 @@ const transform = computed(() => {
       :class="positionClass"
       :style="modelValue ? {} : { transform }"
     >
-      <slot />
+      <slot v-if="init" />
     </div>
   </div>
 </template>

components/publish/PublishButton.vue

@@ -0,0 +1,6 @@
+<template>
+  <button btn-outline rounded-full font-bold py4 flex="~ gap2 center" @click="openPublishDialog">
+    <div i-ri:quill-pen-line />
+    Compose
+  </button>
+</template>

components/publish/PublishWidget.vue

@@ -103,7 +103,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div v-if="currentUser" border="t base" p4 flex gap-4>
+  <div v-if="currentUser" p4 flex gap-4>
     <AccountAvatar :account="currentUser.account" w-12 h-12 />
     <div
       flex flex-col gap-3 flex-auto