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

composables/dialog.ts

@@ -6,6 +6,7 @@ export const toggleZenMode = useToggle(isZenMode)
 
 export const isUserSwitcherOpen = ref(false)
 export const isSigninDialogOpen = ref(false)
+export const isPublishDialogOpen = ref(false)
 export const isPreviewHelpOpen = ref(isFirstVisit.value)
 
 export function openUserSwitcher() {
@@ -21,6 +22,10 @@ export function openPreviewHelp() {
   isPreviewHelpOpen.value = true
 }
 
+export function openPublishDialog() {
+  isPublishDialogOpen.value = true
+}
+
 if (isPreviewHelpOpen.value) {
   watch(isPreviewHelpOpen, () => {
     isFirstVisit.value = false

layouts/default.vue

@@ -25,6 +25,7 @@
           <slot name="right">
             <NavTitle p5 />
             <NavSide border="y base" />
+            <PublishButton v-if="currentUser" m5 />
             <div flex-auto />
             <NavFooter />
           </slot>

pages/status/[status].vue

@@ -20,6 +20,7 @@ const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fet
     <StatusDetails ref="main" :status="status" border="t base" />
     <PublishWidget
       v-if="currentUser"
+      border="t base"
       :draft-key="`reply-${id}`"
       :placeholder="`Reply to ${status?.account ? getDisplayName(status?.account) : 'this thread'}`"
       :in-reply-to-id="id"

unocss.config.ts

@@ -13,17 +13,27 @@ export default defineConfig({
   shortcuts: [
     {
       'border-base': 'border-$c-border',
+
+      // background
       'bg-base': 'bg-$c-bg-base',
       'bg-active': 'bg-$c-bg-active',
       'bg-code': 'bg-$c-bg-code',
+
+      // text
       'text-base': 'text-$c-text-base',
       'text-secondary': 'text-$c-text-secondary',
-      'interact-disabled': 'disabled:opacity-50 disabled:pointer-events-none disabled:saturate-0',
+
-      'btn-base': 'interact-disabled cursor-pointer',
+      // buttons
+      'btn-base': 'cursor-pointer disabled:opacity-50 disabled:pointer-events-none disabled:saturate-0',
       'btn-solid': 'btn-base px-4 py-2 rounded text-white bg-$c-primary hover:bg-$c-primary-active',
       'btn-outline': 'btn-base px-4 py-2 rounded text-$c-primary border border-$c-primary hover:bg-$c-primary hover:text-white',
       'btn-text': 'btn-base px-4 py-2 text-$c-primary hover:text-$c-primary-active',
       'btn-action-icon': 'btn-base hover:bg-active rounded-full h9 w9 flex items-center justify-center',
+
+      // utils
+      'flex-center': 'items-center justify-center',
+      'flex-v-center': 'items-center',
+      'flex-h-center': 'justify-center',
     },
   ],
   presets: [