feat(publish): support visibility

components/publish/PublishWidget.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { CreateStatusParams, CreateStatusParamsWithStatus } from 'masto'
+import type { CreateStatusParams, CreateStatusParamsWithStatus, StatusVisibility } from 'masto'
 
 const {
   draftKey,
@@ -16,6 +16,7 @@ function getDefaultStatus(): CreateStatusParamsWithStatus {
   return {
     status: '',
     inReplyToId,
+    visibility: 'public',
   }
 }
 const draft = $computed(() => {
@@ -35,6 +36,10 @@ const status = $computed(() => {
   } as CreateStatusParams
 })
 
+const currentVisibility = $computed(() => {
+  return STATUS_VISIBILITIES.find(v => v.value === status.visibility)!
+})
+
 let isUploading = $ref<boolean>(false)
 
 async function handlePaste(evt: ClipboardEvent) {
@@ -81,6 +86,10 @@ function removeAttachment(index: number) {
   draft.attachments.splice(index, 1)
 }
 
+function chooseVisibility(visibility: StatusVisibility) {
+  draft.params.visibility = visibility
+}
+
 async function publish() {
   try {
     isSending = true
@@ -135,6 +144,27 @@ onUnmounted(() => {
           <div i-ri:upload-line />
         </button>
 
+        <CommonDropdown>
+          <button btn-action-icon>
+            <div :class="currentVisibility.icon" />
+          </button>
+
+          <template #popper>
+            <CommonDropdownItem
+              v-for="visibility in STATUS_VISIBILITIES"
+              :key="visibility.value"
+              :icon="visibility.icon"
+              :checked="visibility.value === draft.params.visibility"
+              @click="chooseVisibility(visibility.value)"
+            >
+              {{ visibility.label }}
+              <template #description>
+                {{ visibility.description }}
+              </template>
+            </CommonDropdownItem>
+          </template>
+        </CommonDropdown>
+
         <div flex-auto />
 
         <button