refactor: tidy masto icons

components/account/AccountHeader.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Account, Field } from 'masto'
+import { getAccountFieldIcon } from '~/composables/masto/icons'
 
 const { account } = defineProps<{
   account: Account

components/publish/PublishWidget.vue

@@ -5,6 +5,7 @@ import { useDropZone } from '@vueuse/core'
 import { EditorContent } from '@tiptap/vue-3'
 import ISO6391 from 'iso-639-1'
 import Fuse from 'fuse.js'
+import { statusVisibilities } from '~/composables/masto/icons'
 import type { Draft } from '~/types'
 
 type FileUploadError = [filename: string, message: string]
@@ -56,7 +57,7 @@ const { editor } = useTiptap({
 })
 
 const currentVisibility = $computed(() => {
-  return STATUS_VISIBILITIES.find(v => v.value === draft.params.visibility) || STATUS_VISIBILITIES[0]
+  return statusVisibilities.find(v => v.value === draft.params.visibility) || statusVisibilities[0]
 })
 
 let isUploading = $ref<boolean>(false)
@@ -396,7 +397,7 @@ defineExpose({
 
             <template #popper>
               <CommonDropdownItem
-                v-for="visibility in STATUS_VISIBILITIES"
+                v-for="visibility in statusVisibilities"
                 :key="visibility.value"
                 :icon="visibility.icon"
                 :checked="visibility.value === draft.params.visibility"

components/settings/SettingsProfileMetadata.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { UpdateCredentialsParams } from 'masto'
+import { accountFieldIcons, getAccountFieldIcon } from '~/composables/masto/icons'
 
 const { form } = defineModel<{
   form: {

components/status/StatusDetails.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Status } from 'masto'
+import { statusVisibilities } from '~/composables/masto/icons'
 
 const props = withDefaults(defineProps<{
   status: Status
@@ -17,7 +18,7 @@ const status = $computed(() => {
 
 const createdAt = useFormattedDateTime(status.createdAt)
 
-const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === status.visibility)!)
+const visibility = $computed(() => statusVisibilities.find(v => v.value === status.visibility)!)
 
 const { t } = useI18n()
 

composables/masto.ts

@@ -13,26 +13,6 @@ export const onMastoInit = (cb: () => unknown) => {
   }, { immediate: isMastoInitialised.value })
 }
 
-// @unocss-include
-export const STATUS_VISIBILITIES = [
-  {
-    value: 'public',
-    icon: 'i-ri:global-line',
-  },
-  {
-    value: 'unlisted',
-    icon: 'i-ri:lock-unlock-line',
-  },
-  {
-    value: 'private',
-    icon: 'i-ri:lock-line',
-  },
-  {
-    value: 'direct',
-    icon: 'i-ri:at-line',
-  },
-] as const
-
 export function getDisplayName(account?: Account, options?: { rich?: boolean }) {
   const displayName = account?.displayName || account?.username || ''
   if (options?.rich)

composables/masto/icons.ts

@@ -52,3 +52,22 @@ export const getAccountFieldIcon = (value: string) => {
   const name = value.trim().toLowerCase()
   return accountFieldIconsLowercase[name] || undefined
 }
+
+export const statusVisibilities = [
+  {
+    value: 'public',
+    icon: 'i-ri:global-line',
+  },
+  {
+    value: 'unlisted',
+    icon: 'i-ri:lock-unlock-line',
+  },
+  {
+    value: 'private',
+    icon: 'i-ri:lock-line',
+  },
+  {
+    value: 'direct',
+    icon: 'i-ri:at-line',
+  },
+] as const