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/routes/org/[slug]/+page.svelte

@@ -1,25 +1,26 @@
 <script lang="ts">
   import { profile } from '$lib/utils/store/user';
-  // import { supabase } from '$lib/utils/functions/supabase';
+  import { onMount } from 'svelte';
+  import { Add } from 'carbon-icons-svelte';
   import { goto } from '$app/navigation';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import UnlockedIcon from 'carbon-icons-svelte/lib/Unlocked.svelte';
   import LockedIcon from 'carbon-icons-svelte/lib/Locked.svelte';
-  // import Avatar from '$lib/components/Avatar/index.svelte';
   import { InlineCalendar, Datepicker } from 'svelte-calendar';
+  // import { supabase } from '$lib/utils/functions/supabase';
+  // import Avatar from '$lib/components/Avatar/index.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { formatUserUpcomingData, formatDate } from '$lib/utils/functions/routes/dashboard';
   import { user } from '$lib/utils/store/user';
   import { fetchUserUpcomingData } from '$lib/utils/services/dashboard';
   import { isMobile } from '$lib/utils/store/useMobile';
   import type { UserLessonDataType, LessonsByMonthIndexType } from '$lib/utils/types';
   import WelcomeModal from '$lib/components/WelcomeModal/WelcomeModal.svelte';
-  import { onMount } from 'svelte';
-  import { Add } from 'carbon-icons-svelte';
   import { isOrgAdmin, currentOrgPath, currentOrg, userUpcomingData } from '$lib/utils/store/org';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import VisitOrgSiteButton from '$lib/components/Buttons/VisitOrgSite.svelte';
   import { getGreeting } from '$lib/utils/functions/date';
   import { globalStore } from '$lib/utils/store/app';
+  import { t } from '$lib/utils/functions/translations.js';
 
   export let data;
 
@@ -187,7 +188,7 @@
 <div class="py-10 px-5 w-full max-w-5xl md:mx-auto">
   <div class="flex items-center justify-between mb-10">
     <h1 class="dark:text-white text-2xl md:text-3xl font-bold mb-3">
-      {getGreeting()}
+      {$t(getGreeting())}
       {$profile.fullname}!
     </h1>
     <div class="flex items-center">
@@ -200,7 +201,7 @@
         {#if $isMobile}
           <Add size={24} />
         {:else}
-          Create Course
+          {$t('dashboard.create_course')}
         {/if}
       </PrimaryButton>
 
@@ -213,11 +214,10 @@
   >
     <span>
       <p class="w-full md:w-[75%] lg:w-[80%] text-white text-xs lg:text-xl font-normal mb-5">
-        Thank you for what you do ❤️. You are changing lives one classroom at a time and thanks to
-        you, the world is a better place. 😊
+        {$t('dashboard.hero_content')}
       </p>
       <PrimaryButton
-        label="Keep Building 🚀"
+        label={$t('dashboard.hero_button')}
         variant={VARIANTS.CONTAINED_WHITE}
         onClick={() => goto(`${$currentOrgPath}/courses`)}
       />
@@ -243,7 +243,7 @@
   <div class="w-full">
     <!-- Your Schedule -->
     <div class="w-full xl:w-auto container">
-      <p class="dark:text-white font-bold mt-7 mb-4">Your Schedule</p>
+      <p class="dark:text-white font-bold mt-7 mb-4">{$t('dashboard.your_schedule')}</p>
       <div
         class="rounded border border-gray-200 dark:border-neutral-600 gap-3 flex flex-col md:flex-row items-start px-2 md:px-5 py-5 w-full"
       >
@@ -305,16 +305,16 @@
                   href={!!lessonData.call_url ? lessonData.call_url : undefined}
                   target="_blank"
                   title={!!lessonData.call_url
-                    ? 'Click to join the call'
-                    : 'No call link was added for this lesson. Ask your trainer'}
+                    ? $t('dashboard.click_to_join')
+                    : $t('dashboard.no_call_link')}
                 >
-                  Join call
+                  {$t('dashboard.join_call')}
                 </a>
               {/if}
             </div>
           {:else}
             <p class="dark:text-white flex items-center justify-center w-full no-data">
-              No lesson on this day
+              {$t('dashboard.no_schedule')}
             </p>
           {/each}
         </div>