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 <best@classroomio.com>

apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte

@@ -26,6 +26,7 @@
   import { course, group } from '$lib/components/Course/store';
   import DateField from '$lib/components/Form/Date.svelte';
   import type { Lesson } from '$lib/utils/types';
+  import { t } from '$lib/utils/functions/translations.js';
   import { goto } from '$app/navigation';
 
   export let data;
@@ -123,10 +124,14 @@
 
 <!-- TODO: Refactor usage of two way binding isStudent, rather use $globalStore.isStudent -->
 <CourseContainer bind:isFetching bind:isStudent bind:courseId={data.courseId}>
-  <PageNav title="Lessons">
+  <PageNav title={$t('course.navItem.lessons.heading')}>
     <div slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>
-        <PrimaryButton label="Add" onClick={addLesson} isDisabled={!!lessonEditing} />
+        <PrimaryButton
+          label={$t('course.navItem.lessons.add_lesson.button_title')}
+          onClick={addLesson}
+          isDisabled={!!lessonEditing}
+        />
       </RoleBasedSecurity>
     </div>
   </PageNav>
@@ -206,7 +211,9 @@
                       className="sm:my-1 w-[100%]"
                     />
                   {:else if !lesson.profile}
-                    <p class="mb-3 ml-2 text-sm dark:text-white">No tutor added</p>
+                    <p class="dark:text-white ml-2 text-sm mb-3">
+                      {$t('course.navItem.lessons.no_tutor')}
+                    </p>
                   {:else}
                     <a href="." class="mb-2 flex items-center hover:underline">
                       <Avatar
@@ -256,7 +263,9 @@
                         href={lesson.call_url || '#'}
                         target="_blank"
                       >
-                        {lesson.call_url ? 'Join lesson' : 'No link'}
+                        {lesson.call_url
+                          ? $t('course.navItem.lessons.join_lesson')
+                          : $t('course.navItem.lessons.no_link')}
                       </a>
                     </div>
                   {/if}
@@ -270,14 +279,18 @@
                 <OverflowMenu size="xl" class="absolute right-0 top-0">
                   <OverflowMenuItem
                     disabled={isStudent}
-                    text={lesson.is_unlocked ? 'Lock' : 'Unlock'}
+                    text={lesson.is_unlocked
+                      ? $t('course.navItem.lessons.add_lesson.lock')
+                      : $t('course.navItem.lessons.add_lesson.unlock')}
                     on:click={() => {
                       lesson.is_unlocked = !lesson.is_unlocked;
                       handleSaveLesson(lesson, $course.id);
                     }}
                   />
                   <OverflowMenuItem
-                    text={lessonEditing === lesson.id ? 'Save' : 'Edit'}
+                    text={lessonEditing === lesson.id
+                      ? $t('course.navItem.lessons.add_lesson.save')
+                      : $t('course.navItem.lessons.add_lesson.edit')}
                     on:click={() => {
                       if (lessonEditing === lesson.id) {
                         lessonEditing = undefined;
@@ -287,7 +300,11 @@
                       }
                     }}
                   />
-                  <OverflowMenuItem danger text="Delete" on:click={() => handleDelete(lesson.id)} />
+                  <OverflowMenuItem
+                    danger
+                    text={$t('course.navItem.lessons.add_lesson.delete')}
+                    on:click={() => handleDelete(lesson.id)}
+                  />
                 </OverflowMenu>
               </RoleBasedSecurity>
             </div>
@@ -296,10 +313,9 @@
           <Box>
             <div class="flex justify-between flex-col items-center w-[90%] md:w-96">
               <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="my-2.5 mx-auto" />
-              <h2 class="text-xl my-1.5 font-normal">No lessons yet</h2>
+              <h2 class="text-xl my-1.5 font-normal">{$t('course.navItem.lessons.body_header')}</h2>
               <p class="text-sm text-center text-slate-500">
-                Share your knowledge with the world by creating engaging lessons. Start by clicking
-                on the Add button.
+                {$t('course.navItem.lessons.body_content')}
               </p>
             </div>
           </Box>
@@ -307,12 +323,11 @@
       </section>
     {:else}
       <Box className="w-full lg:w-11/12 lg:px-4 m-auto">
-        <div class="flex flex-col items-center justify-between">
-          <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="mx-auto my-2.5" />
-          <h2 class="my-1.5 text-xl font-normal">No lessons yet</h2>
-          <p class="text-center text-sm text-slate-500">
-            Share your knowledge with the world by creating engaging lessons. Start by clicking on
-            the Add button.
+        <div class="flex justify-between flex-col items-center">
+          <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="my-2.5 mx-auto" />
+          <h2 class="text-xl my-1.5 font-normal">{$t('course.navItem.lessons.body_header')}</h2>
+          <p class="text-sm text-center text-slate-500">
+            {$t('course.navItem.lessons.body_content')}
           </p>
         </div>
       </Box>