refactor: migrate to nuxt compatibilityVersion: 4 (#3298)

app/components/settings/SettingsProfileMetadata.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const form = defineModel<{
+  fieldsAttributes: NonNullable<mastodon.rest.v1.UpdateCredentialsParams['fieldsAttributes']>
+}>({ required: true })
+const dropdown = ref<any>()
+
+const fieldIcons = computed(() =>
+  Array.from({ length: maxAccountFieldCount.value }, (_, i) =>
+    getAccountFieldIcon(form.value.fieldsAttributes[i].name)),
+)
+
+const fieldCount = computed(() => {
+  // find last non-empty field
+  const idx = [...form.value.fieldsAttributes].reverse().findIndex(f => f.name || f.value)
+  if (idx === -1)
+    return 1
+  return Math.min(
+    form.value.fieldsAttributes.length - idx + 1,
+    maxAccountFieldCount.value,
+  )
+})
+
+function chooseIcon(i: number, text: string) {
+  form.value.fieldsAttributes[i].name = text
+  dropdown.value[i]?.hide()
+}
+</script>
+
+<template>
+  <div space-y-2>
+    <div font-medium>
+      {{ $t('settings.profile.appearance.profile_metadata') }}
+    </div>
+    <div text-sm text-secondary>
+      {{ $t('settings.profile.appearance.profile_metadata_desc', [maxAccountFieldCount]) }}
+    </div>
+
+    <div flex="~ col gap4">
+      <div v-for="i in fieldCount" :key="i" flex="~ gap3" items-center>
+        <CommonDropdown ref="dropdown" placement="left">
+          <CommonTooltip :content="$t('tooltip.pick_an_icon')">
+            <button type="button" btn-action-icon>
+              <div :class="fieldIcons[i - 1] || 'i-ri:question-mark'" />
+            </button>
+          </CommonTooltip>
+          <template #popper>
+            <div flex="~ wrap gap-1" max-w-60 m2 me1>
+              <CommonTooltip
+                v-for="(icon, text) in accountFieldIcons"
+                :key="icon"
+                :content="text"
+              >
+                <template v-if="text !== 'Joined'">
+                  <button type="button" btn-action-icon @click="chooseIcon(i - 1, text)">
+                    <div text-xl :class="icon" />
+                  </button>
+                </template>
+              </CommonTooltip>
+            </div>
+          </template>
+        </CommonDropdown>
+        <input
+          v-model="form.fieldsAttributes[i - 1].name"
+          type="text" placeholder-text-secondary
+          :placeholder="$t('settings.profile.appearance.profile_metadata_label')"
+          input-base
+        >
+        <input
+          v-model="form.fieldsAttributes[i - 1].value"
+          type="text" placeholder-text-secondary
+          :placeholder="$t('settings.profile.appearance.profile_metadata_value')"
+          input-base
+        >
+      </div>
+    </div>
+  </div>
+</template>