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,8 +32,16 @@ const chooseIcon = (i: number, text: string) => {
 </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 4" :key="i" flex="~ gap3" items-center>
+      <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>
@@ -57,4 +76,5 @@ const chooseIcon = (i: number, text: string) => {
         >
       </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" />
-        </div>
 
         <!-- actions -->
         <div flex="~ gap2" justify-end>