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/Navigation/app.svelte

@@ -13,6 +13,7 @@
   import { currentOrgPath } from '$lib/utils/store/org';
   import { toggleBodyByMode } from '$lib/utils/functions/app';
   import { sideBar } from '../Org/store';
+  import { t } from '$lib/utils/functions/translations';
 
   export let title = '';
   export let navClass = '';
@@ -76,7 +77,9 @@
       {/if}
       <a
         href={coursesPath}
-        title="Go to {isCoursePage ? 'Courses' : 'ClassroomIO Home'}"
+        title="{$t('navigation.goto')} {isCoursePage
+          ? $t('navigation.courses')
+          : $t('navigation.classroomio_home')}"
         id="logo"
         class="text-lg line-clamp-1"
       >

apps/dashboard/src/lib/components/Navigation/index.svelte

@@ -5,6 +5,7 @@
   import { isCoursePage } from '$lib/utils/functions/app';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import { t } from '$lib/utils/functions/translations';
 
   export let disableSignup = false;
   export let logo;
@@ -24,7 +25,12 @@
 >
   <ul class="flex w-full items-center">
     <div class="logo">
-      <a href="/" title={`Go to ${orgName || 'ClassroomIO'} Home`} id="logo" data-hveid="8">
+      <a
+        href="/"
+        title={`${$t('navigation.goto')} ${orgName || 'ClassroomIO'} ${$t('navigation.home')}`}
+        id="logo"
+        data-hveid="8"
+      >
         <img
           src={logo || '/logo-192.png'}
           alt={`${orgName || 'ClassroomIO'} logo`}
@@ -36,19 +42,19 @@
 
     {#if $user.isLoggedIn}
       <li class="hidden">
-        <a class="block" href="dashboard"> Dashboard </a>
+        <a class="block" href="dashboard"> {$t('navigation.dashboard')} </a>
       </li>
 
       <li class="hidden">
-        <a class="block" href="courses"> Courses </a>
+        <a class="block" href="courses"> {$t('navigation.courses')} </a>
       </li>
 
       <li class="hidden">
-        <a class="block" href="discussions"> Discussion </a>
+        <a class="block" href="discussions"> {$t('navigation.discussion')} </a>
       </li>
 
       <li class="hidden">
-        <a class="block" href="people">People </a>
+        <a class="block" href="people">{$t('navigation.people')} </a>
       </li>
     {/if}
 
@@ -56,13 +62,13 @@
 
     {#if $user.isLoggedIn}
       {#if isOrgSite}
-        <li><a class="block" href="/lms"> Go to LMS </a></li>
+        <li><a class="block" href="/lms"> {$t('navigation.goto_lms')} </a></li>
       {/if}
     {:else if !$page.url.pathname?.includes('/404')}
       <li>
         <div class="flex">
           <PrimaryButton
-            label="Login"
+            label={$t('navigation.login')}
             variant={VARIANTS.TEXT}
             onClick={() => goto('/login' + redirect)}
           />
@@ -72,7 +78,7 @@
         {#if !disableSignup}
           <div class="flex">
             <PrimaryButton
-              label="Signup"
+              label={$t('navigation.signup')}
               variant={VARIANTS.CONTAINED}
               onClick={() => goto('/signup' + redirect)}
             />

apps/dashboard/src/lib/components/Navigation/lms.svelte

@@ -13,6 +13,7 @@
   import { sideBar } from '$lib/components/Org/store';
   import { currentOrg } from '$lib/utils/store/org';
   import { toggleBodyByMode } from '$lib/utils/functions/app';
+  import { t } from '$lib/utils/functions/translations';
 
   export let navClass = '';
 
@@ -48,7 +49,7 @@
     <div class="">
       <a
         href={$page.url.pathname}
-        title="Go to ClassroomIO Home"
+        title={$t('navigation.goto_home')}
         id="logo"
         class="text-lg flex items-center"
       >