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

@@ -16,13 +16,16 @@
   import { profile } from '$lib/utils/store/user';
   import { NavClasses } from '$lib/utils/constants/reusableClass';
   import { sideBar } from './store';
+  import { t } from '$lib/utils/functions/translations';
   import { goto } from '$app/navigation';
 
-  let menuItems: {
-    path: string;
+  interface menuItems {
     label: string;
+    path: string;
     show: boolean;
-  }[] = [];
+  }
+
+  let menuItems: menuItems[] = [];
 
   function isActive(pagePath: string, itemPath: string) {
     const pageLinkItems = pagePath.split('/');
@@ -42,43 +45,70 @@
     goto(window.location.pathname + '?upgrade=true');
   };
 
-  $: {
-    menuItems = [
-      {
-        path: '',
-        label: 'Dashboard',
-        show: true
-      },
-      // {
-      //   path: '/quiz',
-      //   label: 'Quizzes'
-      // },
-      {
-        path: '/courses',
-        label: 'Courses',
-        show: true
-      },
-      {
-        path: '/community',
-        label: 'Community',
-        show: true
-      },
-      // {
-      //   path: '/site',
-      //   label: 'Site settings',
-      // },
-      {
-        path: '/audience',
-        label: 'Audience',
-        show: true
-      },
-      {
-        path: '/setup',
-        label: 'Setup',
-        show: $isOrgAdmin
-      }
-    ];
-  }
+  // $: {
+  //   menuItems = [
+  //     {
+  //       path: '',
+  //       label: 'Dashboard',
+  //       show: true
+  //     },
+  //     // {
+  //     //   path: '/quiz',
+  //     //   label: 'Quizzes'
+  //     // },
+  //     {
+  //       path: '/courses',
+  //       label: 'Courses',
+  //       show: true
+  //     },
+  //     {
+  //       path: '/community',
+  //       label: 'Community',
+  //       show: true
+  //     },
+  //     // {
+  //     //   path: '/site',
+  //     //   label: 'Site settings',
+  //     // },
+  //     {
+  //       path: '/audience',
+  //       label: 'Audience',
+  //       show: true
+  //     },
+  //     {
+  //       path: '/setup',
+  //       label: 'Setup',
+  //       show: $isOrgAdmin
+  //     }
+  //   ];
+  // }
+  $: menuItems = [
+    {
+      path: '',
+      label: $t('org_navigation.dashboard'),
+      show: true
+    },
+    {
+      path: '/courses',
+      label: $t('org_navigation.courses'),
+      show: true
+    },
+    {
+      path: '/community',
+      label: $t('org_navigation.community'),
+      show: true
+    },
+    {
+      path: '/audience',
+      label: $t('org_navigation.audience'),
+      show: true
+    },
+    {
+      path: '/setup',
+      label: $t('org_navigation.setup'),
+      show: $isOrgAdmin
+    }
+  ];
 </script>
 
 <aside
@@ -138,10 +168,14 @@
       >
         <img src="/upgrade.png" alt="upgrade" class="h-16 w-16" />
         <span class="flex flex-col gap-1">
-          <p class="text-base font-semibold">Become an Early Adopter</p>
-          <p class="text-xs">Unlock unlimited features and invest in our future</p>
+          <p class="text-base font-semibold">{$t('org_navigation.early_adopter')}</p>
+          <p class="text-xs">{$t('org_navigation.unlock')}</p>
         </span>
-        <PrimaryButton label="Upgrade Now" onClick={openModal} className="font-normal" />
+        <PrimaryButton
+          label={$t('org_navigation.upgrade')}
+          onClick={openModal}
+          className="font-normal"
+        />
       </div>
     {/if}
 
@@ -149,7 +183,7 @@
       <a href={$currentOrgPath} class="text-black no-underline" on:click={toggleSidebar}>
         <li class="mb-2 flex items-center rounded px-2.5 py-1.5">
           <HelpIcon size={20} class="carbon-icon dark:text-white" />
-          <p class="ml-2.5 dark:text-white text-sm font-medium">Help</p>
+          <p class="ml-2.5 dark:text-white text-sm font-medium">{$t('org_navigation.help')}</p>
         </li>
       </a>
       <a href="{$currentOrgPath}/settings" class="text-black no-underline" on:click={toggleSidebar}>
@@ -167,7 +201,7 @@
             width="w-[1.2rem]"
             height="h-[1.2rem]"
           />
-          <p class="ml-2.5 text-sm font-medium">Settings</p>
+          <p class="ml-2.5 text-sm font-medium">{$t('org_navigation.settings')}</p>
         </li>
       </a>
     </ul>