feat(settings): up to 16 fields for glitch edition

components/settings/SettingsProfileMetadata.vue

@@ -9,11 +9,22 @@ const { form } = defineModel<{
 const dropdown = $ref<any>()
 
 const fieldIcons = computed(() =>
-  Array.from({ length: 4 }, (_, i) =>
+  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()
@@ -21,40 +32,49 @@ const chooseIcon = (i: number, text: string) => {
 </script>
 
 <template>
-  <div flex="~ col gap4">
+  <div space-y-2>
-    <div v-for="i in 4" :key="i" flex="~ gap3" items-center>
+    <div font-medium>
-      <CommonDropdown ref="dropdown" placement="left">
+      {{ $t('settings.profile.appearance.profile_metadata') }}
-        <CommonTooltip content="Pick a icon">
+    </div>
-          <button type="button" btn-action-icon>
+    <div text-sm text-secondary>
-            <div :class="fieldIcons[i - 1] || 'i-ri:question-mark'" />
+      {{ $t('settings.profile.appearance.profile_metadata_desc', [maxAccountFieldCount]) }}
-          </button>
+    </div>
-        </CommonTooltip>
+
-        <template #popper>
+    <div flex="~ col gap4">
-          <div flex="~ wrap gap-1" max-w-50 m2>
+      <div v-for="i in fieldCount" :key="i" flex="~ gap3" items-center>
-            <CommonTooltip
+        <CommonDropdown ref="dropdown" placement="left">
-              v-for="(icon, text) in accountFieldIcons"
+          <CommonTooltip content="Pick a icon">
-              :key="icon"
+            <button type="button" btn-action-icon>
-              :content="text"
+              <div :class="fieldIcons[i - 1] || 'i-ri:question-mark'" />
-            >
+            </button>
-              <template v-if="text !== 'Joined'">
+          </CommonTooltip>
-                <button type="button" btn-action-icon @click="chooseIcon(i - 1, text)">
+          <template #popper>
-                  <div text-xl :class="icon" />
+            <div flex="~ wrap gap-1" max-w-50 m2>
-                </button>
+              <CommonTooltip
-              </template>
+                v-for="(icon, text) in accountFieldIcons"
-            </CommonTooltip>
+                :key="icon"
-          </div>
+                :content="text"
-        </template>
+              >
-      </CommonDropdown>
+                <template v-if="text !== 'Joined'">
-      <input
+                  <button type="button" btn-action-icon @click="chooseIcon(i - 1, text)">
-        v-model="form.fieldsAttributes[i - 1].name"
+                    <div text-xl :class="icon" />
-        type="text" placeholder="Label"
+                  </button>
-        input-base
+                </template>
-      >
+              </CommonTooltip>
-      <input
+            </div>
-        v-model="form.fieldsAttributes[i - 1].value"
+          </template>
-        type="text" placeholder="Content"
+        </CommonDropdown>
-        input-base
+        <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>

composables/settings/metadata.ts

@@ -0,0 +1 @@
+export const maxAccountFieldCount = computed(() => isGlitchEdition.value ? 16 : 4)

composables/users.ts

@@ -55,6 +55,7 @@ export const currentUser = computed<UserLogin | undefined>(() => {
 
 const publicInstance = ref<mastodon.v1.Instance | null>(null)
 export const currentInstance = computed<null | mastodon.v1.Instance>(() => currentUser.value ? instances.value[currentUser.value.server] ?? null : publicInstance.value)
+export const isGlitchEdition = computed(() => currentInstance.value?.version.includes('+glitch'))
 
 export const publicServer = ref('')
 export const currentServer = computed<string>(() => currentUser.value?.server || publicServer.value)

locales/en-US.json

@@ -325,7 +325,7 @@
         "display_name": "Display name",
         "label": "Appearance",
         "profile_metadata": "Profile metadata",
-        "profile_metadata_desc": "You can have up to 4 items displayed as a table on your profile",
+        "profile_metadata_desc": "You can have up to {0} items displayed as a table on your profile",
         "title": "Edit profile"
       },
       "featured_tags": {

locales/nl-NL.json

@@ -268,7 +268,7 @@
         "display_name": "Zichtbare naam",
         "label": "Uiterlijk",
         "profile_metadata": "Profiel metadata",
-        "profile_metadata_desc": "Je kan tot en met 4 elementen als table zetten op je profiel zetten",
+        "profile_metadata_desc": "Je kan tot en met {0} elementen als table zetten op je profiel zetten",
         "title": "Aanpassen profiel"
       },
       "featured_tags": {

pages/settings/profile/appearance.vue

@@ -24,7 +24,7 @@ const onlineSrc = $computed(() => ({
 const { form, reset, submitter, dirtyFields, isError } = useForm({
   form: () => {
     // For complex types of objects, a deep copy is required to ensure correct comparison of initial and modified values
-    const fieldsAttributes = Array.from({ length: 4 }, (_, i) => {
+    const fieldsAttributes = Array.from({ length: maxAccountFieldCount.value }, (_, i) => {
       const field = { ...account?.fields?.[i] || { name: '', value: '' } }
 
       const linkElement = (parse(field.value)?.children?.[0])
@@ -151,16 +151,8 @@ onReactivated(refreshInfo)
         </label>
 
         <!-- metadata -->
-        <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') }}
-          </div>
 
-          <SettingsProfileMetadata v-if="isHydrated" v-model:form="form" />
+        <SettingsProfileMetadata v-if="isHydrated" v-model:form="form" />
-        </div>
 
         <!-- actions -->
         <div flex="~ gap2" justify-end>