feat(settings): metadata (#699)

Co-authored-by: LittleSound <464388324@qq.com>

components/account/AccountHeader.vue

@@ -17,10 +17,6 @@ const createdAt = $(useFormattedDateTime(() => account.createdAt, {
 const namedFields = ref<Field[]>([])
 const iconFields = ref<Field[]>([])
 
-function getFieldNameIcon(fieldName: string) {
-  const name = fieldName.trim().toLowerCase()
-  return ACCOUNT_FIELD_ICONS[name] || undefined
-}
 function getFieldIconTitle(fieldName: string) {
   return fieldName === 'Joined' ? t('account.joined') : fieldName
 }
@@ -48,7 +44,7 @@ watchEffect(() => {
   const icons: Field[] = []
 
   account.fields?.forEach((field) => {
-    const icon = getFieldNameIcon(field.name)
+    const icon = getAccountFieldIcon(field.name)
     if (icon)
       icons.push(field)
     else
@@ -122,7 +118,7 @@ const isSelf = $computed(() => currentUser.value?.account.id === account.id)
       </div>
       <div v-if="iconFields.length" flex="~ wrap gap-4">
         <div v-for="field in iconFields" :key="field.name" flex="~ gap-1" items-center>
-          <div text-secondary :class="getFieldNameIcon(field.name)" :title="getFieldIconTitle(field.name)" />
+          <div text-secondary :class="getAccountFieldIcon(field.name)" :title="getFieldIconTitle(field.name)" />
           <ContentRich text-sm filter-saturate-0 :content="field.value" :emojis="account.emojis" />
         </div>
       </div>

components/settings/SettingsProfileMetadata.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { UpdateCredentialsParams } from 'masto'
+
+const { form } = defineModel<{
+  form: {
+    fieldsAttributes: NonNullable<UpdateCredentialsParams['fieldsAttributes']>
+  }
+}>()
+
+const fieldIcons = computed(() =>
+  Array.from({ length: 4 }, (_, i) =>
+    getAccountFieldIcon(form.value.fieldsAttributes[i].name),
+  ),
+)
+</script>
+
+<template>
+  <div flex="~ col gap4">
+    <div v-for="i in 4" :key="i" flex="~ gap3" items-center>
+      <CommonDropdown placement="left">
+        <CommonTooltip content="Pick a icon">
+          <button btn-action-icon>
+            <div :class="fieldIcons[i - 1] || 'i-ri:question-mark'" />
+          </button>
+        </CommonTooltip>
+        <template #popper>
+          <div flex="~ wrap gap-1" max-w-50 m2>
+            <CommonTooltip
+              v-for="(icon, text) in accountFieldIcons"
+              :key="icon"
+              :content="text"
+            >
+              <template v-if="text !== 'Joined'">
+                <div btn-action-icon @click="form.fieldsAttributes[i - 1].name = text">
+                  <div text-xl :class="icon" />
+                </div>
+              </template>
+            </CommonTooltip>
+          </div>
+        </template>
+      </CommonDropdown>
+      <input
+        v-model="form.fieldsAttributes[i - 1].name"
+        type="text"
+        p2 border-rounded w-full bg-transparent
+        outline-none border="~ base"
+        placeholder="Label"
+      >
+      <input
+        v-model="form.fieldsAttributes[i - 1].value"
+        type="text"
+        p2 border-rounded w-full bg-transparent
+        outline-none border="~ base"
+        placeholder="Content"
+      >
+    </div>
+  </div>
+</template>

composables/icons.ts

@@ -1,41 +1,52 @@
 // @unocss-include
-export const ACCOUNT_FIELD_ICONS: Record<string, string> = {
+export const accountFieldIcons: Record<string, string> = Object.fromEntries(Object.entries({
-  alipay: 'i-ri:alipay-fill',
+  Alipay: 'i-ri:alipay-fill',
-  bilibili: 'i-ri:bilibili-fill',
+  Bilibili: 'i-ri:bilibili-fill',
-  birth: 'i-ri:calendar-line',
+  Birth: 'i-ri:calendar-line',
-  blog: 'i-ri:newspaper-line',
+  Blog: 'i-ri:newspaper-line',
-  city: 'i-ri:map-pin-2-line',
+  City: 'i-ri:map-pin-2-line',
-  dingding: 'i-ri:dingding-fill',
+  Dingding: 'i-ri:dingding-fill',
-  discord: 'i-ri:discord-fill',
+  Discord: 'i-ri:discord-fill',
-  douban: 'i-ri:douban-fill',
+  Douban: 'i-ri:douban-fill',
-  facebook: 'i-ri:facebook-fill',
+  Facebook: 'i-ri:facebook-fill',
-  github: 'i-ri:github-fill',
+  GitHub: 'i-ri:github-fill',
-  gitlab: 'i-ri:gitlab-fill',
+  GitLab: 'i-ri:gitlab-fill',
-  home: 'i-ri:home-2-line',
+  Home: 'i-ri:home-2-line',
-  instagram: 'i-ri:instagram-line',
+  Instagram: 'i-ri:instagram-line',
-  joined: 'i-ri:user-add-line',
+  Joined: 'i-ri:user-add-line',
-  linkedin: 'i-ri:linkedin-box-fill',
+  LinkedIn: 'i-ri:linkedin-box-fill',
-  location: 'i-ri:map-pin-2-line',
+  Location: 'i-ri:map-pin-2-line',
-  mastodon: 'i-ri:mastodon-line',
+  Mastodon: 'i-ri:mastodon-line',
-  medium: 'i-ri:medium-fill',
+  Medium: 'i-ri:medium-fill',
-  patreon: 'i-ri:patreon-fill',
+  Patreon: 'i-ri:patreon-fill',
-  paypal: 'i-ri:paypal-fill',
+  PayPal: 'i-ri:paypal-fill',
-  playstation: 'i-ri:playstation-fill',
+  PlayStation: 'i-ri:playstation-fill',
-  portfolio: 'i-ri:link',
+  Portfolio: 'i-ri:link',
-  qq: 'i-ri:qq-fill',
+  QQ: 'i-ri:qq-fill',
-  site: 'i-ri:link',
+  Site: 'i-ri:link',
-  sponsors: 'i-ri:heart-3-line',
+  Sponsors: 'i-ri:heart-3-line',
-  spotify: 'i-ri:spotify-fill',
+  Spotify: 'i-ri:spotify-fill',
-  steam: 'i-ri:steam-fill',
+  Steam: 'i-ri:steam-fill',
-  switch: 'i-ri:switch-fill',
+  Switch: 'i-ri:switch-fill',
-  telegram: 'i-ri:telegram-fill',
+  Telegram: 'i-ri:telegram-fill',
-  tumblr: 'i-ri:tumblr-fill',
+  Tumblr: 'i-ri:tumblr-fill',
-  twitch: 'i-ri:twitch-line',
+  Twitch: 'i-ri:twitch-line',
-  twitter: 'i-ri:twitter-line',
+  Twitter: 'i-ri:twitter-line',
-  website: 'i-ri:link',
+  Website: 'i-ri:link',
-  wechat: 'i-ri:wechat-fill',
+  WeChat: 'i-ri:wechat-fill',
-  weibo: 'i-ri:weibo-fill',
+  Weibo: 'i-ri:weibo-fill',
-  xbox: 'i-ri:xbox-fill',
+  Xbox: 'i-ri:xbox-fill',
-  youtube: 'i-ri:youtube-line',
+  YouTube: 'i-ri:youtube-line',
-  zhihu: 'i-ri:zhihu-fill',
+  Zhihu: 'i-ri:zhihu-fill',
+}).sort(([a], [b]) => a.localeCompare(b)))
+
+const accountFieldIconsLowercase = Object.fromEntries(
+  Object.entries(accountFieldIcons).map(([k, v]) =>
+    [k.toLowerCase(), v],
+  ),
+)
+
+export const getAccountFieldIcon = (value: string) => {
+  const name = value.trim().toLowerCase()
+  return accountFieldIconsLowercase[name] || undefined
 }

pages/settings/profile/appearance.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { UpdateCredentialsParams } from 'masto'
 import { useForm } from 'slimeform'
 
 definePageMeta({
@@ -7,26 +8,34 @@ definePageMeta({
   keepalive: false,
 })
 
-const acccount = $computed(() => currentUser.value?.account)
+const account = $computed(() => currentUser.value?.account)
 
 const onlineSrc = $computed(() => ({
-  avatar: acccount?.avatar || '',
+  avatar: account?.avatar || '',
-  header: acccount?.header || '',
+  header: account?.header || '',
 }))
 
 const { form, reset, submitter, dirtyFields, isError } = useForm({
-  form: () => ({
+  form: () => {
-    displayName: acccount?.displayName ?? '',
+    // For complex types of objects, a deep copy is required to ensure correct comparison of initial and modified values
-    note: acccount?.source.note.replaceAll('\r', '') ?? '',
+    const fieldsAttributes = Array.from({ length: 4 }, (_, i) => {
+      return { ...account?.fields?.[i] || { name: '', value: '' } }
+    })
+    return {
+      displayName: account?.displayName ?? '',
+      note: account?.source.note.replaceAll('\r', '') ?? '',
 
-    avatar: null as null | File,
+      avatar: null as null | File,
-    header: null as null | File,
+      header: null as null | File,
 
-    // These look more like account and privacy settings than appearance settings
+      fieldsAttributes,
-    // discoverable: false,
+
-    // bot: false,
+      // These look more like account and privacy settings than appearance settings
-    // locked: false,
+      // discoverable: false,
-  }),
+      // bot: false,
+      // locked: false,
+    }
+  },
 })
 
 watch(isMastoInitialised, async (val) => {
@@ -41,7 +50,7 @@ watch(isMastoInitialised, async (val) => {
 const isCanSubmit = computed(() => !isError.value && !isEmptyObject(dirtyFields.value))
 
 const { submit, submitting } = submitter(async ({ dirtyFields }) => {
-  const res = await useMasto().accounts.updateCredentials(dirtyFields.value)
+  const res = await useMasto().accounts.updateCredentials(dirtyFields.value as UpdateCredentialsParams)
     .then(account => ({ account }))
     .catch((error: Error) => ({ error }))
 
@@ -51,7 +60,7 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
     return
   }
 
-  setAccountInfo(acccount!.id, res.account)
+  setAccountInfo(account!.id, res.account)
   reset()
 })
 </script>
@@ -108,6 +117,18 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
           <textarea v-model="form.note" maxlength="500" min-h-10ex input-base />
         </label>
 
+        <!-- metadata -->
+        <div space-y-2>
+          <div font-medium>
+            Profile metadata
+          </div>
+          <div text-sm text-secondary>
+            You can have up to 4 items displayed as a table on your profile
+          </div>
+
+          <SettingsProfileMetadata v-if="isHydrated" v-model:form="form" />
+        </div>
+
         <!-- submit -->
         <div text-right>
           <button