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/Tabs/index.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import TextChip from '$lib/components/Chip/Text.svelte';
+  import { t } from '$lib/utils/functions/translations';
 
   interface Tab {
     icon?: any;
@@ -8,8 +9,8 @@
     badgeValue?: number;
   }
   export let tabs: Tab[] = [];
-  export let currentTab: string;
-  export let onChange = (v: string) => () => {};
+  export let currentTab: string | number;
+  export let onChange = (v: string | number) => () => {};
 </script>
 
 <div class="w-full flex flex-col">
@@ -23,7 +24,7 @@
           on:click={onChange(tab.value)}
         >
           <div class="flex items-center justify-center w-full text-center">
-            {tab.label}
+            {$t(tab.label)}
           </div>
           <span
             class="absolute bottom-0 left-0 h-[2px] bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
@@ -43,13 +44,13 @@
             {#if tab.icon}
               <svelte:component this={tab.icon} />
             {/if}
-            {tab.label}
+            {$t(tab.label)}
             {#if typeof tab.badgeValue === 'number'}
               <TextChip
                 value={`${tab.badgeValue}`}
                 size="sm"
                 shape="rounded-full"
-                className="bg-gray-300 dark:text-black text-xs absolute right-0 px-2"
+                className="bg-gray-300 dark:text-black text-xs absolute -right-2 px-2"
               />
             {/if}
           </div>