diff --git a/components/settings/SettingsProfileMetadata.vue b/components/settings/SettingsProfileMetadata.vue index c8194f65..34cf532f 100644 --- a/components/settings/SettingsProfileMetadata.vue +++ b/components/settings/SettingsProfileMetadata.vue @@ -9,11 +9,22 @@ const { form } = defineModel<{ const dropdown = $ref() 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) => { diff --git a/composables/settings/metadata.ts b/composables/settings/metadata.ts new file mode 100644 index 00000000..d0c2357d --- /dev/null +++ b/composables/settings/metadata.ts @@ -0,0 +1 @@ +export const maxAccountFieldCount = computed(() => isGlitchEdition.value ? 16 : 4) diff --git a/composables/users.ts b/composables/users.ts index 13e8cbd3..ec147d2a 100644 --- a/composables/users.ts +++ b/composables/users.ts @@ -55,6 +55,7 @@ export const currentUser = computed(() => { const publicInstance = ref(null) export const currentInstance = computed(() => 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(() => currentUser.value?.server || publicServer.value) diff --git a/locales/en-US.json b/locales/en-US.json index 3eafa650..779a0477 100644 --- a/locales/en-US.json +++ b/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": { diff --git a/locales/nl-NL.json b/locales/nl-NL.json index b85ba328..d4c930d6 100644 --- a/locales/nl-NL.json +++ b/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": { diff --git a/pages/settings/profile/appearance.vue b/pages/settings/profile/appearance.vue index 4210c313..d5f4f444 100644 --- a/pages/settings/profile/appearance.vue +++ b/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) -
-
- {{ $t('settings.profile.appearance.profile_metadata') }} -
-
- {{ $t('settings.profile.appearance.profile_metadata_desc') }} -
- -
+