elk/components/settings/SettingsProfileMetadata.vue

<script setup lang="ts">
import type { mastodon } from 'masto'

const { form } = defineModel<{
  form: {
    fieldsAttributes: NonNullable<mastodon.v1.UpdateCredentialsParams['fieldsAttributes']>
  }
}>()
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,
  )
})

const chooseIcon = (i: number, text: string) => {
  form.value.fieldsAttributes[i].name = text
  dropdown[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="Pick a 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-50 m2>
              <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="Label"
          input-base
        >
        <input
          v-model="form.fieldsAttributes[i - 1].value"
          type="text" placeholder="Content"
          input-base
        >
      </div>
    </div>
  </div>
</template>