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/OrgSettings.svelte

@@ -10,6 +10,7 @@
   import { snackbar } from '$lib/components/Snackbar/store';
   import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
   import SectionTitle from '../SectionTitle.svelte';
+  import { t } from '$lib/utils/functions/translations';
   import { isFreePlan } from '$lib/utils/store/org';
 
   let avatar;
@@ -75,16 +76,16 @@
         ...updates
       }));
 
-      snackbar.success('Update successful');
+      snackbar.success('snackbar.course_settings.success.update_successful');
 
       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.error(`Update failed: ${message}`);
+      snackbar.error(`${$t('snackbar.lms.error.update')} ${message}`);
       loading = false;
     } finally {
       loading = false;
@@ -98,10 +99,13 @@
 
 <Grid class="border-c rounded border-gray-200 dark:border-neutral-600 w-full mt-5">
   <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
-    <Column sm={4} md={4} lg={4}><SectionTitle>Organization Profile</SectionTitle></Column>
+    <Column sm={4} md={4} lg={4}
+      ><SectionTitle>{$t('settings.organization.organization_profile.heading')}</SectionTitle
+      ></Column
+    >
     <Column sm={8} md={8} lg={8} class="mt-2 lg:mt-0 flex flex-col items-center lg:items-start">
       <TextField
-        label="Organization Name"
+        label={$t('settings.organization.organization_profile.organization_name')}
         bind:value={$currentOrg.name}
         className="w-full lg:w-60 mb-5"
       />
@@ -112,7 +116,7 @@
         widthHeight="w-24 h-24"
       />
       <PrimaryButton
-        label="Update Organization"
+        label={$t('settings.organization.organization_profile.update_organization')}
         className="px-6 py-3 lg:mr-5 mt-5"
         isLoading={loading}
         isDisabled={loading}
@@ -121,9 +125,14 @@
     </Column>
   </Row>
   <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
-    <Column sm={4} md={4} lg={4}><SectionTitle>Theme</SectionTitle></Column>
+    <Column sm={4} md={4} lg={4}
+      ><SectionTitle>{$t('settings.organization.organization_profile.theme.heading')}</SectionTitle
+      ></Column
+    >
     <Column sm={8} md={8} lg={8}>
-      <h4 class="dark:text-white lg:mt-0">Set your brand color</h4>
+      <h4 class="dark:text-white lg:mt-0">
+        {$t('settings.organization.organization_profile.theme.sub_heading')}
+      </h4>
 
       <div class="flex gap-2">
         <button
@@ -169,14 +178,20 @@
     </Column>
   </Row>
   <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
-    <Column sm={4} md={4} lg={4}><SectionTitle>Custom Domain</SectionTitle></Column>
+    <Column sm={4} md={4} lg={4}
+      ><SectionTitle
+        >{$t('settings.organization.organization_profile.custom_domain.heading')}</SectionTitle
+      ></Column
+    >
     <Column sm={8} md={8} lg={8}>
-      <h4 class="dark:text-white lg:mt-0">Customise your Domain</h4>
+      <h4 class="dark:text-white lg:mt-0">
+        {$t('settings.organization.organization_profile.custom_domain.sub_heading')}
+      </h4>
       <p class="text-sm text-gray-500 dark:text-white">
-        Create a custom URL so your audience can get to your organization easily
+        {$t('settings.organization.organization_profile.custom_domain.body')}
       </p>
       <PrimaryButton
-        label="Edit domain"
+        label={$t('settings.organization.organization_profile.custom_domain.button')}
         className="my-7 py-5 px-10"
         variant={VARIANTS.OUTLINED}
         onClick={() => gotoSetting('/domains')}
@@ -184,11 +199,16 @@
     </Column>
   </Row>
   <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
-    <Column sm={4} md={4} lg={4}><SectionTitle>Team</SectionTitle></Column>
+    <Column sm={4} md={4} lg={4}
+      ><SectionTitle>{$t('settings.organization.organization_profile.team.heading')}</SectionTitle
+      ></Column
+    >
     <Column sm={8} md={8} lg={8}>
-      <h4 class="dark:text-white lg:mt-0">Set up your website</h4>
+      <h4 class="dark:text-white lg:mt-0">
+        {$t('settings.organization.organization_profile.team.sub_heading')}
+      </h4>
       <p class="text-sm text-gray-500 dark:text-white">
-        Add team mates to your organization so you can both collaborate on projects.
+        {$t('settings.organization.organization_profile.team.body')}
       </p>
       <PrimaryButton
         className="my-7 py-5 px-10 flex items-center gap-2 justify-center"