Add localization support for various components, including dialogs and views, in English, Spanish, and French. Implemented translations for user profile management, payment processes, and creator functionalities. Updated existing components to utilize the new translation system.

frontend/src/views/main/SideBar.vue

@@ -1,35 +1,24 @@
 <script setup>
-import {computed} from "vue";
 import {useI18n} from "vue-i18n";
 import {useAuthStore} from "@/stores/authStore.js";
 import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 import {useUserProfileStore} from "@/stores/userProfileStore.js";
+import { useTranslations } from '@/translations/translations'
+import {useLanguageStore} from "@/stores/languageStore.js";
 
 const {locale} = useI18n();
-const translations = {
-  en: {
-    myPage: "my page",
-    myProfile: "my profile",
-    reduce: "collapse",
-    signIn: "login",
-    signOut: "sign out"
-  },
-  fr: {
-    myPage: "ma page",
-    myProfile: "mon profil",
-    reduce: "réduire",
-    signIn: "connexion",
-    signOut: "se déconnecter"
-  }
-};
-const t = computed(() => translations[locale.value] || translations["en"]);
+const t = useTranslations();
+const languageStore = useLanguageStore();
 
 const userProfileStore = useUserProfileStore();
 const creatorProfileStore = useCreatorProfileStore();
 const authStore = useAuthStore();
 
 function toggleLanguage() {
-  locale.value = locale.value === 'fr' ? 'en' : 'fr';
+  const languages = ['fr', 'en', 'es'];
+  const currentIndex = languages.indexOf(locale.value);
+  const nextIndex = (currentIndex + 1) % languages.length;
+  languageStore.setLocale(languages[nextIndex]);
 }
 </script>
 
@@ -73,13 +62,13 @@ function toggleLanguage() {
           <router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.slug}`">
             <button class="menu-item-action">
               <i class="mdi mdi-file-account-outline"></i>
-              <span class="label">{{ t.myPage }}</span>
+              <span class="label">{{ t('myPage') }}</span>
             </button>
           </router-link>
           <router-link v-else to="/create-creator">
             <button class="menu-item-action">
               <i class="mdi mdi-file-account-outline"></i>
-              <span class="label">{{ t.myPage }}</span>
+              <span class="label">{{ t('myPage') }}</span>
             </button>
           </router-link>
         </template>
@@ -88,7 +77,7 @@ function toggleLanguage() {
           <router-link to="/profile">
             <button class="menu-item-action">
               <i class="mdi mdi-account"></i>
-              <span class="label">{{ t.myProfile }}</span>
+              <span class="label">{{ t('myProfile') }}</span>
             </button>
           </router-link>
         </template>
@@ -103,7 +92,7 @@ function toggleLanguage() {
           <router-link to="/login">
             <button class="menu-item-action">
               <i class="mdi mdi-login"></i>
-              <span class="label">{{ t.signIn }}</span>
+              <span class="label">{{ t('signIn') }}</span>
             </button>
           </router-link>
         </template>
@@ -111,7 +100,7 @@ function toggleLanguage() {
           <button class="menu-item-action"
                   @click="authStore.logout">
             <i class="mdi mdi-logout"></i>
-            <span class="label">{{ t.signOut }}</span>
+            <span class="label">{{ t('signOut') }}</span>
           </button>
         </div>
 
@@ -163,10 +152,10 @@ function toggleLanguage() {
 }
 
 .menu-item-action {
+  /* FIXME: The hover value is not semantically correct */
   @apply bg-hBackground hover:bg-hSurface;
   @apply capitalize;
   @apply flex items-center gap-4 py-2 rounded;
-  /* FIXME: The hover value is not semantically correct */
   @apply mx-2 lg:mx-0;
   @apply lg:px-4;
   @apply w-10 h-10 justify-center lg:w-full lg:h-auto lg:justify-normal;