From ad3d5efb11a2792d5c02e31b49ff6b1f47cd2ad2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Thu, 24 Nov 2022 17:15:58 +0800
Subject: [PATCH] feat(publish): support visibility

---
 components/common/dropdown/DropdownItem.vue | 24 ++++++++++++++--
 components/publish/PublishWidget.vue        | 32 ++++++++++++++++++++-
 composables/masto.ts                        | 28 ++++++++++++++++++
 composables/statusDrafts.ts                 |  3 +-
 types/utils.ts                              |  3 ++
 5 files changed, 86 insertions(+), 4 deletions(-)
 create mode 100644 types/utils.ts

diff --git a/components/common/dropdown/DropdownItem.vue b/components/common/dropdown/DropdownItem.vue
index f0718c93..54f1fac9 100644
--- a/components/common/dropdown/DropdownItem.vue
+++ b/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>
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 0e67b31c..7c01a04c 100644
--- a/components/publish/PublishWidget.vue
+++ b/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
diff --git a/composables/masto.ts b/composables/masto.ts
index 2cedb6a2..28e46b11 100644
--- a/composables/masto.ts
+++ b/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
 }
diff --git a/composables/statusDrafts.ts b/composables/statusDrafts.ts
index c8346844..a8624220 100644
--- a/composables/statusDrafts.ts
+++ b/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[]
 }>
 
diff --git a/types/utils.ts b/types/utils.ts
new file mode 100644
index 00000000..e3bcb6cc
--- /dev/null
+++ b/types/utils.ts
@@ -0,0 +1,3 @@
+export type Mutable<T> = {
+  -readonly[P in keyof T]: T[P]
+}