From 6055369c5c88f4bf19a2b70c8c84f99f52054a8d Mon Sep 17 00:00:00 2001
From: jonah <jonahhb@umich.edu>
Date: Thu, 18 Apr 2024 14:49:28 -0400
Subject: [PATCH] feat: add language toggle to all menus as requested in #61
 and #62

---
 .../src/pages/options/ui/OptionsPage.vue      | 19 ++++++++++++++---
 .../src/pages/templates/ui/TemplatesPage.vue  | 21 ++++++++++++++++---
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/apps/browser-extension-template/src/pages/options/ui/OptionsPage.vue b/apps/browser-extension-template/src/pages/options/ui/OptionsPage.vue
index 7b3df919..d614bbad 100644
--- a/apps/browser-extension-template/src/pages/options/ui/OptionsPage.vue
+++ b/apps/browser-extension-template/src/pages/options/ui/OptionsPage.vue
@@ -32,9 +32,14 @@ onMounted(() => {
 
 const { settings, changeLanguage, updateSettings } = useFormSettings(selectedProfiledId)
 
-const close = async () => await useExtensionUtils().closeCurrentTab()
+const { closeCurrentTab, saveLocale } = useExtensionUtils()
 
-const { t } = useI18n()
+const { locale, t } = useI18n()
+
+const changeLocale = async (lang: 'en' | 'fr') => {
+  locale.value = lang
+  await saveLocale(lang)
+}
 </script>
 <template>
   <div class="m-auto max-w-screen-lg p-2 text-base">
@@ -43,6 +48,14 @@ const { t } = useI18n()
       <TextProfileEditDropdown v-model="selectedProfiledId" class="w-60" :settings="settings" />
       <TextProfileRenameButton class="ml-3" :profile-id="selectedProfiledId" />
       <TextSettingsFileDownload class="ml-auto" :settings="settings" />
+      <div class="text-right">
+        {{ t('MAIN_MENU.MENU_LANGUAGE') }}
+        <span v-if="locale === 'fr'">FR</span>
+        <a v-if="locale !== 'fr'" href="#/options" @click="changeLocale('fr')">FR</a>
+        /
+        <span v-if="locale === 'en'">EN</span>
+        <a v-if="locale !== 'en'" href="#/options" @click="changeLocale('en')">EN</a>
+      </div>
     </div>
     <div class="flex">
       <TextProfileForm class="w-2/3 min-w-[730px]" :settings="settings" @update-settings="updateSettings" @change-language="changeLanguage" />
@@ -53,7 +66,7 @@ const { t } = useI18n()
           <TextProfileSaveButton v-model="selectedProfiledId" :settings="settings" />
           <TextProfileDeleteButton v-model="selectedProfiledId" class="ml-3 mr-auto" />
           <!-- TODO: add dirty settings calculation -->
-          <button class="btn-secondary btn-sm btn" @click="close">{{ t('SETTINGS.CLOSE') }}</button>
+          <button class="btn-secondary btn-sm btn" @click="closeCurrentTab()">{{ t('SETTINGS.CLOSE') }}</button>
         </div>
       </div>
     </div>
diff --git a/apps/browser-extension-template/src/pages/templates/ui/TemplatesPage.vue b/apps/browser-extension-template/src/pages/templates/ui/TemplatesPage.vue
index 21b2b349..2fed27b0 100644
--- a/apps/browser-extension-template/src/pages/templates/ui/TemplatesPage.vue
+++ b/apps/browser-extension-template/src/pages/templates/ui/TemplatesPage.vue
@@ -12,19 +12,34 @@ import { useI18n } from 'vue-i18n'
 const language = ref<Language>('en')
 const templates = useTemplatesByLanguage(language)
 
-const { closeCurrentTab } = useExtensionUtils()
+const { closeCurrentTab, saveLocale } = useExtensionUtils()
 
 const router = useRouter()
 const openProfile = (newTextProfileId: TextProfileId) => {
   router.push({ path: 'options', query: { profileId: newTextProfileId } })
 }
 
-const { t } = useI18n()
+const { locale, t } = useI18n()
+
+const changeLocale = async (lang: 'en' | 'fr') => {
+  locale.value = lang
+  await saveLocale(lang)
+}
 </script>
 
 <template>
   <div class="mx-auto max-w-screen-md p-2 text-base">
-    <div class="text-2xl font-semibold">{{ t('SELECT_TEMPLATE.PLEASE_SELECT_A_TEMPLATE') }}</div>
+    <div class="flex">
+      <div class="w-1/2 text-2xl font-semibold">{{ t('SELECT_TEMPLATE.PLEASE_SELECT_A_TEMPLATE') }}</div>
+      <div class="w-1/2 text-right">
+          {{ t('MAIN_MENU.MENU_LANGUAGE') }}
+          <span v-if="locale === 'fr'">FR</span>
+          <a v-if="locale !== 'fr'" href="#/templates" @click="changeLocale('fr')">FR</a>
+          /
+          <span v-if="locale === 'en'">EN</span>
+          <a v-if="locale !== 'en'" href="#/templates" @click="changeLocale('en')">EN</a>
+      </div>
+    </div>
     <div class="mt-3">{{ t('SELECT_TEMPLATE.CLICK_TO_MODIFY_OR_SELECT_TEMPLATE') }}</div>
     <div class="mt-3">
       <div>{{ t('SELECT_TEMPLATE.PROFILE_LANGUAGE') }}</div>