refactor(publish): extract pickers

components/publish/PublishEmojiPicker.client.vue

@@ -44,16 +44,17 @@ const hideEmojiPicker = () => {
 </script>
 
 <template>
-  <VDropdown
-    auto-boundary-max-size
-    @apply-show="openEmojiPicker()"
-    @apply-hide="hideEmojiPicker()"
-  >
-    <button btn-action-icon :title="$t('tooltip.emoji')">
-      <div i-ri:emotion-line />
-    </button>
-    <template #popper>
-      <div ref="el" min-w-10 min-h-10 />
-    </template>
-  </VDropdown>
+  <CommonTooltip content="Add emojis">
+    <VDropdown
+      auto-boundary-max-size
+      @apply-show="openEmojiPicker()"
+      @apply-hide="hideEmojiPicker()"
+    >
+      <slot />
+
+      <template #popper>
+        <div ref="el" min-w-10 min-h-10 />
+      </template>
+    </VDropdown>
+  </CommonTooltip>
 </template>

components/publish/PublishVisibilityPicker.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { statusVisibilities } from '~/composables/masto/icons'
+
+const { editing } = defineProps<{
+  editing?: boolean
+}>()
+
+let { modelValue } = $defineModel<{
+  modelValue: string
+}>()
+
+const currentVisibility = $computed(() =>
+  statusVisibilities.find(v => v.value === modelValue) || statusVisibilities[0],
+)
+
+const chooseVisibility = (visibility: string) => {
+  modelValue = visibility
+}
+</script>
+
+<template>
+  <CommonTooltip placement="top" :content="editing ? $t(`visibility.${currentVisibility.value}`) : $t('tooltip.change_content_visibility')">
+    <CommonDropdown placement="bottom">
+      <slot :visibility="currentVisibility" />
+      <template #popper>
+        <CommonDropdownItem
+          v-for="visibility in statusVisibilities"
+          :key="visibility.value"
+          :icon="visibility.icon"
+          :text="$t(`visibility.${visibility.value}`)"
+          :description="$t(`visibility.${visibility.value}_desc`)"
+          :checked="visibility.value === modelValue"
+          @click="chooseVisibility(visibility.value)"
+        />
+      </template>
+    </CommonDropdown>
+  </CommonTooltip>
+</template>

components/publish/PublishWidget.vue

@@ -3,7 +3,6 @@ import type { Attachment, CreateStatusParams, Status, StatusVisibility } from 'm
 import { fileOpen } from 'browser-fs-access'
 import { useDropZone } from '@vueuse/core'
 import { EditorContent } from '@tiptap/vue-3'
-import { statusVisibilities } from '~/composables/masto/icons'
 import type { Draft } from '~/types'
 
 type FileUploadError = [filename: string, message: string]
@@ -54,10 +53,6 @@ const { editor } = useTiptap({
   onPaste: handlePaste,
 })
 
-const currentVisibility = $computed(() => {
-  return statusVisibilities.find(v => v.value === draft.params.visibility) || statusVisibilities[0]
-})
-
 let isUploading = $ref<boolean>(false)
 let isExceedingAttachmentLimit = $ref<boolean>(false)
 let failed = $ref<FileUploadError[]>([])
@@ -132,10 +127,6 @@ function removeAttachment(index: number) {
   draft.attachments.splice(index, 1)
 }
 
-function chooseVisibility(visibility: StatusVisibility) {
-  draft.params.visibility = visibility
-}
-
 async function publish() {
   const payload = {
     ...draft.params,
@@ -291,16 +282,20 @@ defineExpose({
         <PublishEmojiPicker
           @select="insertEmoji"
           @select-custom="insertCustomEmoji"
-        />
+        >
+          <button btn-action-icon :title="$t('tooltip.emoji')">
+            <div i-ri:emotion-line />
+          </button>
+        </PublishEmojiPicker>
 
-        <CommonTooltip placement="bottom" :content="$t('tooltip.add_media')">
+        <CommonTooltip placement="top" :content="$t('tooltip.add_media')">
           <button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
             <div i-ri:image-add-line />
           </button>
         </CommonTooltip>
 
         <template v-if="editor">
-          <CommonTooltip placement="bottom" :content="$t('tooltip.toggle_code_block')">
+          <CommonTooltip placement="top" :content="$t('tooltip.toggle_code_block')">
             <button
               btn-action-icon
               :aria-label="$t('tooltip.toggle_code_block')"
@@ -318,7 +313,7 @@ defineExpose({
           {{ editor?.storage.characterCount.characters() }}<span text-secondary-light>/</span><span text-secondary-light>{{ characterLimit }}</span>
         </div>
 
-        <CommonTooltip placement="bottom" :content="$t('tooltip.add_content_warning')">
+        <CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')">
           <button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive">
             <div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
             <div v-else i-ri:alarm-warning-line />
@@ -338,29 +333,14 @@ defineExpose({
           </CommonDropdown>
         </CommonTooltip>
 
-        <CommonTooltip placement="bottom" :content="draft.editingStatus ? $t(`visibility.${currentVisibility.value}`) : $t('tooltip.change_content_visibility')">
-          <CommonDropdown>
+        <PublishVisibilityPicker v-model="draft.params.visibility" :editing="!!draft.editingStatus">
+          <template #default="{ visibility }">
             <button :disabled="!!draft.editingStatus" :aria-label="$t('tooltip.change_content_visibility')" btn-action-icon :class="{ 'w-12': !draft.editingStatus }">
-              <div :class="currentVisibility.icon" />
+              <div :class="visibility.icon" />
               <div v-if="!draft.editingStatus" i-ri:arrow-down-s-line text-sm text-secondary me--1 />
             </button>
-
-            <template #popper>
-              <CommonDropdownItem
-                v-for="visibility in statusVisibilities"
-                :key="visibility.value"
-                :icon="visibility.icon"
-                :checked="visibility.value === draft.params.visibility"
-                @click="chooseVisibility(visibility.value)"
-              >
-                {{ $t(`visibility.${visibility.value}`) }}
-                <template #description>
-                  {{ $t(`visibility.${visibility.value}_desc`) }}
-                </template>
-              </CommonDropdownItem>
-            </template>
-          </CommonDropdown>
-        </CommonTooltip>
+          </template>
+        </PublishVisibilityPicker>
 
         <button
           btn-solid rounded-full text-sm w-full md:w-fit