chore: lesson ux improvements

apps/dashboard/src/lib/components/Course/components/Lesson/Exercises/NewExerciseModal.svelte

@@ -9,7 +9,7 @@
   import { Tag } from 'carbon-components-svelte';
   import { TEMPLATES, TAGS } from '$lib/mocks';
   import type { ExerciseTemplate } from '$lib/utils/types';
-  import { lesson } from '../store/lessons';
+  import { lesson, lessonByTranslation } from '../store/lessons';
   import { useCompletion } from 'ai/svelte';
   import Confetti from '$lib/components/Confetti/index.svelte';
   import { toggleConfetti } from '$lib/components/Confetti/store';
@@ -18,6 +18,7 @@
   import { writable } from 'svelte/store';
   import { Circle3 } from 'svelte-loading-spinners';
   import { t } from '$lib/utils/functions/translations';
+  import { lessonFallbackNote } from '$lib/utils/functions/translations';
 
   export let open = false;
   export let handleAddExercise = () => {};
@@ -104,7 +105,12 @@
     }, 500);
   }
 
-  $: note = browser ? getTextFromHTML($lesson?.materials?.note || '') : '';
+  $: content = lessonFallbackNote(
+    $lesson.materials.note,
+    $lessonByTranslation[$lesson.id || ''],
+    $lesson.locale
+  );
+  $: note = browser ? getTextFromHTML(content) : '';
 </script>
 
 <Modal
@@ -129,7 +135,7 @@
             class="w-[261px] h-[240px] p-5 rounded-md dark:bg-neutral-700 border-2 {option.type ===
             type
               ? 'border-primary-400'
-              : `border-gray-200 dark:border-neutral-600 dark:border-gray-400 ${
+              : `border-gray-200 dark:border-neutral-600 ${
                   !option.isDisabled && 'hover:scale-95'
                 }`} flex flex-col {option.isDisabled &&
               'cursor-not-allowed opacity-60'} transition-all ease-in-out"
@@ -226,7 +232,7 @@
                 class="w-[161px] h-[140px] hover:scale-95 p-5 rounded-md dark:bg-neutral-700 border-2 {template.id ===
                 selectedTemplateId
                   ? 'border-primary-400'
-                  : `border-gray-200 dark:border-neutral-600 dark:border-gray-400`} flex flex-col transition-all ease-in-out"
+                  : `border-gray-200 dark:border-neutral-600 `} flex flex-col transition-all ease-in-out"
                 type="button"
                 on:click={() => (selectedTemplateId = template.id)}
               >

apps/dashboard/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte

@@ -270,11 +270,11 @@
   >
     <svelte:fragment slot="widget">
       <div class="flex">
-        <div class="mr-5">
-          <Dropdown items={LANGUAGES} bind:selectedId={$lesson.locale} class="h-full" />
-        </div>
         <RoleBasedSecurity allowedRoles={[1, 2]}>
           {#if data.isMaterialsTabActive}
+            <div class="mr-5">
+              <Dropdown items={LANGUAGES} bind:selectedId={$lesson.locale} class="h-full" />
+            </div>
             <div class="tab">
               <IconButton onClick={toggleApps} buttonClassName="">
                 <OverflowMenuVertical size={24} />