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]/people/+page.svelte

@@ -30,6 +30,7 @@
   import { snackbar } from '$lib/components/Snackbar/store';
   import Avatar from '$lib/components/Avatar/index.svelte';
   import type { GroupPerson } from '$lib/utils/types';
+  import { t } from '$lib/utils/functions/translations.js';
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
 
@@ -102,7 +103,7 @@
   }
 
   function copyToClipboard(studentAssignedId: string | null) {
-    snackbar.success(`Copied to clipboard`);
+    snackbar.success(`snackbar.people.success.copied`);
 
     if (studentAssignedId) {
       copy(studentAssignedId);
@@ -125,10 +126,14 @@
 />
 
 <CourseContainer bind:courseId={data.courseId}>
-  <PageNav title="People" disableSticky={true}>
+  <PageNav title={$t('course.navItem.people.title')} disableSticky={true}>
     <slot:fragment slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>
-        <PrimaryButton className="mr-2" label="Add" onClick={handleClick} />
+        <PrimaryButton
+          className="mr-2"
+          label={$t('course.navItem.people.add')}
+          onClick={handleClick}
+        />
       </RoleBasedSecurity>
     </slot:fragment>
   </PageNav>
@@ -140,14 +145,14 @@
         <div class="max-w-[320px]">
           <Search
             class="dark:text-slate-950 border-0 bg-zinc-100 w-full"
-            placeholder="Search people"
+            placeholder={$t('course.navItem.people.search')}
             bind:value={searchValue}
           />
         </div>
         <div class="mb-3">
           <Select
             bind:value={filterBy}
-            options={ROLES}
+            options={ROLES.map((role) => ({ label: $t(role.label), value: role.value }))}
             className="dark:text-black mt-3 max-w-[80px]"
           />
           <!-- <select bind:value={filterBy} class="mt-3">
@@ -167,13 +172,13 @@
         >
           <StructuredListRow head class="mx-7">
             <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
-              >Name</StructuredListCell
+              >{$t('course.navItem.people.name')}</StructuredListCell
             >
             <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
-              >Role</StructuredListCell
+              >{$t('course.navItem.people.role')}</StructuredListCell
             >
             <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
-              >Action</StructuredListCell
+              >{$t('course.navItem.people.action')}</StructuredListCell
             >
             <RoleBasedSecurity allowedRoles={[1, 2]}>
               <p class="dark:text-white hidden lg:block text-lg w-20" />
@@ -212,7 +217,7 @@
                           />
                         </RoleBasedSecurity>
                         {#if person.profile_id == $profile.id}
-                          <ComingSoon label="You" />
+                          <ComingSoon label={$t('course.navItem.people.you')} />
                         {/if}
                       </div>
                     </div>
@@ -232,11 +237,14 @@
                     </a>
                     <div class="flex items-center justify-between">
                       <RoleBasedSecurity allowedRoles={[1, 2]}>
-                        <CopyButton text={getEmail(person)} feedback="Copied Email to clipboard" />
+                        <CopyButton
+                          text={getEmail(person)}
+                          feedback={$t('course.navItem.people.feedback')}
+                        />
                       </RoleBasedSecurity>
 
                       <TextChip
-                        value="Pending"
+                        value={$t('course.navItem.people.pending')}
                         className="text-xs bg-yellow-200 text-yellow-700 h-fit"
                         size="sm"
                       />
@@ -248,7 +256,7 @@
               <!-- second column -->
               <StructuredListCell class="w-1/4 px-3">
                 <p class=" dark:text-white font-normal text-center text-base w-1/4">
-                  {ROLE_LABEL[person.role_id]}
+                  {$t(ROLE_LABEL[person.role_id])}
                 </p>
               </StructuredListCell>