refactor: migrate <ProfileOverview> to composition API

app/components/Account.vue

@@ -5,6 +5,7 @@ import { useCookie, useFetch } from 'nuxt/app';
 import useConfig from '../composables/useConfig.ts';
 import useDialogue from '../composables/useDialogue.ts';
 
+import buildLocaleList from '#shared/buildLocaleList.ts';
 import { longtimeCookieSetting } from '#shared/cookieSettings.ts';
 import { newDate, gravatar, PermissionAreas } from '#shared/helpers.ts';
 import type { Profile } from '#shared/profile.ts';
@@ -17,6 +18,8 @@ const { $translator: translator, $setToken: setToken, $removeToken: removeToken
 const runtimeConfig = useRuntimeConfig();
 const config = useConfig();
 
+const locales = buildLocaleList(config.locale);
+
 const dialogue = useDialogue();
 const { accounts, user } = storeToRefs(useMainStore());
 
@@ -489,11 +492,11 @@ const addBrackets = (str: string): string => {
                 <Loading :value="profiles">
                     <ul v-if="profiles !== undefined" class="list-group">
                         <li
-                            v-for="locale in Object.keys($locales)"
-                            :key="locale"
-                            :class="['list-group-item', locale === config.locale ? 'profile-current' : '']"
+                            v-for="locale in locales"
+                            :key="locale.code"
+                            :class="['list-group-item', locale.code === config.locale ? 'profile-current' : '']"
                         >
-                            <ProfileOverview :username="username" :profile="profiles[locale]" :locale="locale" @update="setProfiles" />
+                            <ProfileOverview :username :profile="profiles[locale.code]" :locale @update="setProfiles" />
                         </li>
                     </ul>
                 </Loading>

app/components/ProfileOverview.vue

@@ -1,64 +1,67 @@
+<script setup lang="ts">
+import type { Profile } from '#shared/profile.ts';
+import useDialogue from '~/composables/useDialogue.ts';
+import type { LocaleDescription } from '~~/locale/locales.ts';
+
+const props = defineProps<{
+    username: string;
+    profile: Profile;
+    locale: LocaleDescription;
+}>();
+
+const emit = defineEmits<{
+    update: [Record<string, Partial<Profile>>];
+}>();
+
+const { $translator: translator } = useNuxtApp();
+
+const deleting = ref(false);
+
+const dialogue = useDialogue();
+const removeProfile = async () => {
+    await dialogue.confirm(translator.translate('profile.deleteConfirm'), 'danger');
+
+    deleting.value = true;
+    try {
+        const response = await dialogue.postWithAlertOnError<Record<string, Partial<Profile>>>(`/api/profile/delete/${props.locale.code}`);
+        emit('update', response);
+    } finally {
+        deleting.value = false;
+    }
+};
+</script>
+
 <template>
     <div class="d-md-flex justify-content-between align-items-center">
         <h4 class="my-md-0">
-            {{ $locales[locale].name }}
-            <small v-if="$locales[locale].extra" class="text-muted">({{ $locales[locale].extra }})</small>
+            {{ locale.name }}
+            <small v-if="locale.extra" class="text-muted">({{ locale.extra }})</small>
         </h4>
         <div v-if="profile" class="d-flex gap-2">
-            <LocaleLink :locale="locale" :link="`/@${username}`" class="btn btn-primary">
+            <LocaleLink :locale="locale.code" :link="`/@${username}`" class="btn btn-primary">
                 <Icon v="id-card" />
                 <T>profile.show</T>
             </LocaleLink>
-            <LocaleLink :locale="locale" link="/editor" class="btn btn-light border">
+            <LocaleLink :locale="locale.code" link="/editor" class="btn btn-light border">
                 <Icon v="edit" />
                 <T>profile.edit</T>
             </LocaleLink>
             <template v-if="username !== 'example'">
                 <Spinner v-if="deleting" />
-                <a v-else href="#" class="btn btn-outline-danger" :aria-label="$t('profile.delete')" @click.prevent="removeProfile(locale)">
+                <button
+                    v-else
+                    type="button"
+                    class="btn btn-outline-danger"
+                    :aria-label="$t('profile.delete')"
+                    @click="removeProfile()"
+                >
                     <Icon v="trash-alt" />
-                </a>
+                </button>
             </template>
         </div>
-        <LocaleLink v-else :locale="locale" link="/editor" class="btn btn-light border">
+        <LocaleLink v-else :locale="locale.code" link="/editor" class="btn btn-light border">
             <Icon v="plus-circle" />
             <T>profile.init</T>
         </LocaleLink>
     </div>
 </template>
-
-<script>
-import useDialogue from '../composables/useDialogue.ts';
-
-export default {
-    props: {
-        username: { required: true },
-        profile: { required: true },
-        locale: { required: true },
-    },
-    emits: ['update'],
-    setup() {
-        return {
-            dialogue: useDialogue(),
-        };
-    },
-    data() {
-        return {
-            deleting: false,
-        };
-    },
-    methods: {
-        async removeProfile(locale) {
-            await this.dialogue.confirm(this.$t('profile.deleteConfirm'), 'danger');
-
-            this.deleting = true;
-            try {
-                const response = await this.dialogue.postWithAlertOnError(`/api/profile/delete/${locale}`);
-                this.$emit('update', response);
-            } finally {
-                this.deleting = false;
-            }
-        },
-    },
-};
-</script>