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/lib/components/Org/Community/DeleteModal.svelte

@@ -2,6 +2,7 @@
   import Modal from '$lib/components/Modal/index.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import { t } from '$lib/utils/functions/translations';
 
   export let onDelete = () => {};
   export let onCancel = () => {};
@@ -14,24 +15,27 @@
   onClose={() => (open = false)}
   bind:open
   width="w-96"
-  modalHeading="Delete {isQuestion ? 'question' : 'comment'}"
+  modalHeading="{$t('community.delete.title')} {isQuestion
+    ? $t('community.delete.question')
+    : $t('community.delete.comment')}"
 >
   <div>
     <h1 class="dark:text-white text-lg">
-      Are you sure you want to delete this {isQuestion ? 'question' : 'comment'}?
+      {$t('community.delete.sure')}
+      {isQuestion ? $t('community.delete.question') : $t('community.delete.comment')}?
     </h1>
 
     <div class="mt-5 flex items-center justify-between">
       <PrimaryButton
         className="px-6 py-3"
         variant={VARIANTS.OUTLINED}
-        label="No, keep it"
+        label={$t('community.delete.no')}
         onClick={onCancel}
       />
       <PrimaryButton
         className="px-6 py-3"
         variant={VARIANTS.CONTAINED}
-        label="Yes, delete"
+        label={$t('community.delete.yes')}
         onClick={onDelete}
         isLoading={isDeleting}
       />

apps/dashboard/src/lib/components/Org/Community/index.svelte

@@ -12,6 +12,7 @@
   import { fetchCourses } from '$lib/components/Courses/api';
   import { profile } from '$lib/utils/store/user';
   import { Search, Dropdown } from 'carbon-components-svelte';
+  import { t } from '$lib/utils/functions/translations';
 
   export let isLMS = false;
 
@@ -85,15 +86,15 @@
 
 <div class="flex justify-between">
   <Search
-    placeholder="Find Question"
+    placeholder={$t('community.find_question')}
     bind:value={searchValue}
     searchClass="mr-2"
     class=" bg-gray-100 dark:bg-neutral-800"
   />
   <Dropdown
-    class="w-[25%]"
+    class="w-[25%] h-full"
     size="xl"
-    label="Select Course"
+    label={$t('community.ask.select_course')}
     items={allCourses.map((course) => ({ id: course.id, text: course.title }))}
     bind:selectedId
   />
@@ -137,8 +138,8 @@
     {:else}
       <Box className="w-screen">
         <CoursesEmptyIcon />
-        <h3 class="dark:text-white text-2xl my-5">No Questions asked</h3>
-        <p class="dark:text-white w-1/3 text-center">Ask a question to the community</p>
+        <h3 class="dark:text-white text-2xl my-5">{$t('community.no_question')}</h3>
+        <p class="dark:text-white w-1/3 text-center">{$t('community.ask_a_question')}</p>
       </Box>
     {/each}
   {/if}