From 83c0fafbec34706eef0bb86b1787105d0cc19343 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 24 Nov 2022 16:04:53 +0800
Subject: [PATCH] feat: publish via dialog

---
 components/modal/ModalContainer.vue  |  5 ++++-
 components/modal/ModalDialog.vue     |  7 ++++++-
 components/modal/ModalDrawer.vue     |  7 ++++++-
 components/publish/PublishButton.vue |  6 ++++++
 components/publish/PublishWidget.vue |  2 +-
 composables/dialog.ts                |  5 +++++
 layouts/default.vue                  |  1 +
 pages/status/[status].vue            |  1 +
 unocss.config.ts                     | 14 ++++++++++++--
 9 files changed, 42 insertions(+), 6 deletions(-)
 create mode 100644 components/publish/PublishButton.vue

diff --git a/components/modal/ModalContainer.vue b/components/modal/ModalContainer.vue
index 280b9615..9d55262a 100644
--- a/components/modal/ModalContainer.vue
+++ b/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>
diff --git a/components/modal/ModalDialog.vue b/components/modal/ModalDialog.vue
index 0262b820..fbba0342 100644
--- a/components/modal/ModalDialog.vue
+++ b/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>
diff --git a/components/modal/ModalDrawer.vue b/components/modal/ModalDrawer.vue
index 94a8043e..02b02eaf 100644
--- a/components/modal/ModalDrawer.vue
+++ b/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>
diff --git a/components/publish/PublishButton.vue b/components/publish/PublishButton.vue
new file mode 100644
index 00000000..8e2eebf0
--- /dev/null
+++ b/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>
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 9f28b1cb..34486923 100644
--- a/components/publish/PublishWidget.vue
+++ b/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
diff --git a/composables/dialog.ts b/composables/dialog.ts
index 29130c02..fd375fe9 100644
--- a/composables/dialog.ts
+++ b/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
diff --git a/layouts/default.vue b/layouts/default.vue
index 03b01797..49b29971 100644
--- a/layouts/default.vue
+++ b/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>
diff --git a/pages/status/[status].vue b/pages/status/[status].vue
index 13362818..d6e74a35 100644
--- a/pages/status/[status].vue
+++ b/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"
diff --git a/unocss.config.ts b/unocss.config.ts
index 8151685d..452ed72d 100644
--- a/unocss.config.ts
+++ b/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: [