feat: multi language support (#254)

* feat: multitranslational support

* - completion of settings page
- completion of sidebar

* sidebar rerendering bug fix

* completion of the lesson navigation & materials page

* completion of the course navigation

* completion of requested languages

* - Implementation of Language Picker
- Rename Bug Fixes

* checkpoint save

* - addition of the language picker to the onboarding.
- addition of the language switcher for the lesson notes.

* merge completion

* initialization of the new branch

* add transition.svelte file

* lesson note bug fix

* feat: add translation migration

* completion of translation

* fix height issue of dropdown

* refactoring

* fix: improve code with LOCALE from db

* finally get it fully functional

* connect with AI

* backward compatibility for lesson note

* preserve old content, when generating AI content

* undo translations in upgrade modal

* fix duplicate key issue from codacy trigger

---------

Co-authored-by: Rotimi Best <[email protected]>

apps/dashboard/src/lib/components/Org/Settings/Profile.svelte

@@ -10,18 +10,25 @@
   import { snackbar } from '$lib/components/Snackbar/store';
   import LogoutButton from '$lib/components/Buttons/Logout/index.svelte';
   import generateUUID from '$lib/utils/functions/generateUUID';
+  import { t } from '$lib/utils/functions/translations';
+  import LanguagePicker from './LanguagePicker.svelte';
+  import { handleLocaleChange } from '$lib/utils/functions/translations';
 
   let avatar = '';
   let loading = false;
+  let hasLangChanged = false;
+  let locale = '';
 
   async function handleUpdate() {
     try {
+      console.log({ hasLangChanged });
       loading = true;
 
       const updates = {
         fullname: $profile.fullname,
         username: $profile.username,
-        email: $profile.email
+        email: $profile.email,
+        locale
       };
 
       if (avatar) {
@@ -46,26 +53,32 @@
         ..._profile,
         ...updates
       }));
-      snackbar.success('Update successful');
+      snackbar.success('snackbar.course_settings.success.update_successful');
+
+      if (hasLangChanged) {
+        handleLocaleChange(locale);
+      }
 
       if (error) throw error;
     } catch (error) {
       let message = error.message;
       if (message.includes('profile_username_key')) {
-        message = 'username already exists';
+        message = $t('snackbar.lms.error.username_exists');
       }
-      snackbar.success(`Update failed: ${message}`);
+      snackbar.error(`${$t('snackbar.lms.error.update')} ${message}`);
       loading = false;
     } finally {
       loading = false;
     }
   }
+
+  $: locale = !locale ? $profile.locale : locale;
 </script>
 
 <Grid class="border-c rounded border-gray-200 dark:border-neutral-600 w-full mt-5">
   <Row class="flex flex-col lg:flex-row items-center lg:items-start py-7 border-bottom-c ">
     <Column sm={4} md={8} lg={4} class="mt-2 md:mt-0">
-      <SectionTitle>Profile Picture</SectionTitle>
+      <SectionTitle>{$t('settings.profile.profile_picture.heading')}</SectionTitle>
     </Column>
     <Column sm={2} md={4} lg={8} class="mt-2 lg:mt-0">
       <UploadImage bind:avatar src={$profile.avatar_url} widthHeight="w-16 h-16 lg:w-24 lg:h-24" />
@@ -73,17 +86,31 @@
   </Row>
   <Row class="flex flex-col lg:flex-row py-7 border-bottom-c">
     <Column sm={4} md={4} lg={4}>
-      <SectionTitle>Personal Information</SectionTitle>
+      <SectionTitle>{$t('settings.profile.personal_information.heading')}</SectionTitle>
     </Column>
     <Column sm={8} md={8} lg={8} class="mt-2 lg:mt-0">
-      <TextField label="Full Name" bind:value={$profile.fullname} className="w-full lg:w-60 mb-4" />
-      <TextField label="Username" bind:value={$profile.username} className="w-full lg:w-60 mb-4" />
-      <TextField label="Email" bind:value={$profile.email} className="w-full lg:w-60 mb-4" />
+      <TextField
+        label={$t('settings.profile.personal_information.full_name')}
+        bind:value={$profile.fullname}
+        className="w-full lg:w-60 mb-4"
+      />
+      <TextField
+        label={$t('settings.profile.personal_information.username')}
+        bind:value={$profile.username}
+        className="w-full lg:w-60 mb-4"
+      />
+      <TextField
+        label={$t('settings.profile.personal_information.email')}
+        bind:value={$profile.email}
+        className="w-full lg:w-60 mb-4"
+      />
+      <LanguagePicker bind:hasLangChanged bind:value={locale} className="w-full lg:w-60 mb-4" />
     </Column>
   </Row>
+
   <Row class="m-5 w-full flex items-center gap-2 lg:justify-center">
     <PrimaryButton
-      label="Update Profile"
+      label={$t('settings.profile.update_profile')}
       variant={VARIANTS.CONTAINED_DARK}
       className="mr-5"
       isLoading={loading}