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

@@ -2,13 +2,13 @@
   import Chip from '$lib/components/Chip/Text.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import StepDoneIcon from '$lib/components/Icons/StepDoneIcon.svelte';
   import CheckmarkOutline from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
 
   import { currentOrg } from '$lib/utils/store/org';
   import { goto } from '$app/navigation';
   import { snackbar } from '$lib/components/Snackbar/store.js';
   import { profile } from '$lib/utils/store/user';
+  import { t } from '$lib/utils/functions/translations';
 
   export let data;
   let setupList = data.setup || [];
@@ -24,7 +24,7 @@
   };
 
   const isCompleted = (id) => {
-    return setupList?.find((c) => c.id === id).is_completed == true;
+    return setupList?.find((c) => c.id === id)?.is_completed == true;
   };
 
   const handleClick = (title) => {
@@ -38,7 +38,7 @@
           const courseId = data?.courses[0].id;
           goto(`/courses/${courseId}/lessons`);
         } else {
-          snackbar.info('You need to create a course');
+          snackbar.info('setup.info_course');
         }
         break;
 
@@ -48,7 +48,7 @@
           const lessonId = data?.lessons[0].id;
           goto(`/courses/${courseId}/lessons/${lessonId}`);
         } else {
-          snackbar.info('You Need to Create a lesson');
+          snackbar.info('setup.info_lesson');
         }
         break;
 
@@ -57,7 +57,7 @@
           const courseId = data?.courses[0].id;
           goto(`/courses/${courseId}/settings`);
         } else {
-          snackbar.info('You need to create a course');
+          snackbar.info('setup.info_course');
         }
         break;
 
@@ -84,7 +84,7 @@
 <section class="w-full md:max-w-4xl mx-auto">
   <div class="py-2 md:py-10 px-2 md:px-5">
     <div class="flex items-center gap-2">
-      <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Get Started</h1>
+      <h1 class="dark:text-white text-2xl md:text-3xl font-bold">{$t('setup.get_started')}</h1>
       <Chip
         value={`${completed}/${setupList.length}`}
         className="text-[10px] font-semibold px-3 !py-1"
@@ -104,9 +104,11 @@
                 className={`text-[10px] font-semibold !py-1 `}
                 shape="rounded-full"
               />
-              <p class="font-medium text-lg">{list.title}</p>
+              <p class="font-medium text-lg">{$t(list.title)}</p>
             </div>
-            <p class={`text-sm`}>{list.desc}</p>
+            <p class={`text-sm`}>
+              {$t(list.desc)}
+            </p>
           </div>
           <div class="w-full lg:w-[30%]">
             <PrimaryButton
@@ -118,7 +120,7 @@
               {#if list.is_completed}
                 <CheckmarkOutline />
               {/if}
-              {list.button_label}
+              {$t(list.button_label)}
             </PrimaryButton>
           </div>
         </div>

apps/dashboard/src/routes/org/[slug]/setup/+page.ts

@@ -95,45 +95,45 @@ export const load = async ({ params = { slug: '' } }) => {
   const data = [
     {
       id: 'profile',
-      title: 'Upload a profile picture and update username',
-      desc: 'Personalize and a human touch making interactions more personal and memorable',
+      title: 'setup.1.title',
+      desc: 'setup.1.desc',
       is_completed: false,
-      button_label: 'Update Profile'
+      button_label: 'setup.1.button_label'
     },
     {
       id: 'organization',
-      title: 'Update organisation profile picture',
-      desc: 'Establish a professional and recognizable identity for your organization',
+      title: 'setup.2.title',
+      desc: 'setup.2.desc',
       is_completed: orgHasAvatarUrl,
-      button_label: 'Update Org Profile'
+      button_label: 'setup.2.button_label'
     },
     {
       id: 'course',
-      title: 'Create Course',
-      desc: 'Create a course that you will share with your students',
+      title: 'setup.3.title',
+      desc: 'setup.4.desc',
       is_completed: isCourseCreated,
-      button_label: 'Create Course'
+      button_label: 'setup.3.button_label'
     },
     {
       id: 'lesson',
-      title: 'Create a lesson',
-      desc: 'Break your course into lesson that your students can easily understand',
+      title: 'setup.4.title',
+      desc: 'setup.4.desc',
       is_completed: isLessonCreated,
-      button_label: 'Create Lesson'
+      button_label: 'setup.4.button_label'
     },
     {
       id: 'exercise',
-      title: 'Create an exercise',
-      desc: 'Test your students allow them to demonstarte their understanding of the subject matter',
+      title: 'setup.5.title',
+      desc: 'setup.5.desc',
       is_completed: isExerciseCreated,
-      button_label: 'Create Assignment'
+      button_label: 'setup.5.button_label'
     },
     {
       id: 'publish',
-      title: 'Publish a course',
-      desc: 'Make your course public and purchaseable ',
+      title: 'setup.6.title',
+      desc: 'setup.6.desc',
       is_completed: isCoursePublished,
-      button_label: 'Publish Course'
+      button_label: 'setup.6.button_label'
     }
   ];