feat(publish): support visibility

components/common/dropdown/DropdownItem.vue

@@ -2,7 +2,9 @@
 import { dropdownContextKey } from './ctx'
 
 defineProps<{
+  description?: string
   icon?: string
+  checked?: boolean
 }>()
 const emit = defineEmits(['click'])
 
@@ -15,8 +17,26 @@ const handleClick = (evt: MouseEvent) => {
 </script>
 
 <template>
-  <div flex gap-2 items-center cursor-pointer px4 py3 font-700 hover="bg-active" @click="handleClick">
+  <div
+    flex gap-3 items-center cursor-pointer px4 py3 hover-bg-active
+    @click="handleClick"
+  >
     <div v-if="icon" :class="icon" />
-    <span text-15px><slot /></span>
+    <div flex="~ col">
+      <div text-15px font-700>
+        <slot />
+      </div>
+      <div text-3 text="gray/90">
+        <slot name="description">
+          <p v-if="description">
+            {{ description }}
+          </p>
+        </slot>
+      </div>
+    </div>
+
+    <div flex-auto />
+
+    <div v-if="checked" i-ri:check-line />
   </div>
 </template>

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

composables/masto.ts

@@ -1,6 +1,34 @@
 import type { Ref } from 'vue'
 import type { Account, Relationship, Status } from 'masto'
 
+// @unocss-include
+export const STATUS_VISIBILITIES = [
+  {
+    value: 'public',
+    label: 'Public',
+    icon: 'i-ri:global-line',
+    description: 'Visible for all',
+  },
+  {
+    value: 'unlisted',
+    label: 'Unlisted',
+    icon: 'i-ri:lock-unlock-line',
+    description: 'Visible for all, but opted-out of discovery features',
+  },
+  {
+    value: 'private',
+    label: 'Followers only',
+    icon: 'i-ri:lock-line',
+    description: 'Visible for followers only',
+  },
+  {
+    value: 'direct',
+    label: 'Mentioned people only',
+    icon: 'i-ri:at-line',
+    description: 'Visible for mentioned users only',
+  },
+] as const
+
 export function getDisplayName(account: Account) {
   return account.displayName || account.username
 }

composables/statusDrafts.ts

@@ -1,8 +1,9 @@
 import type { Attachment, CreateStatusParamsWithStatus } from 'masto'
 import { STORAGE_KEY_DRAFTS } from '~/constants'
+import type { Mutable } from '~/types/utils'
 
 export type DraftMap = Record<string, {
-  params: CreateStatusParamsWithStatus
+  params: Mutable<CreateStatusParamsWithStatus>
   attachments: Attachment[]
 }>
 

types/utils.ts

@@ -0,0 +1,3 @@
+export type Mutable<T> = {
+  -readonly[P in keyof T]: T[P]
+}