feat: move away from carbon components and TinyMCE (#597)

* feat: remove tinymce & replace org sidebar

* chore: PR Fixes

* chore: move ui font into src dir

* remove files in vite config

* use google font import for loading font

* remove custom font

* more fonts update

* remove font bold

* more removals of font bold

* fix import

* checkpoint

* chore: checkpoint (add course & lms shadcn sidebar)

* minor css improvements and try out font sans

* chore: replace carbon components with shadcn's

* chore: replace carbon components with shadcn _ v3

* chore: ui fixes & storybook update

* feat: UI cleanup

* fix: quick ui fixes

* chore: update pnpm-lock.yaml with new dependencies and versions; fix output.css formatting

* chore: add isloading to button

* feat: add loading state to button stories

* chore: feedback fixes

* fix: feedback fixes

* chore: remove console

* fix: PR comments

* fix: PR comments

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/dashboard/src/routes/org/[slug]/courses/+page.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
-  import { Search, Dropdown } from 'carbon-components-svelte';
+  import { Input } from '@cio/ui/base/input';
+  import * as Select from '@cio/ui/base/select';
+  import SearchIcon from '@lucide/svelte/icons/search';
+
   import { profile } from '$lib/utils/store/user';
   import { fetchCourses } from '$lib/utils/services/courses';
   import Courses from '$lib/components/Courses/index.svelte';
@@ -27,6 +30,16 @@
   let selectedId: string = $state('0');
   let hasFetched = false;
 
+  const filterOptions = $derived([
+    { value: '0', label: $t('courses.course_filter.date_created') },
+    { value: '1', label: $t('courses.course_filter.published') },
+    { value: '2', label: $t('courses.course_filter.lessons') }
+  ]);
+
+  const selectedLabel = $derived(
+    filterOptions.find((opt) => opt.value === selectedId)?.label || filterOptions[0].label
+  );
+
   const filteredCourses: Course[] = $derived(filterCourses(searchValue, selectedId, $courses));
 
   async function getCourses(userId: string | undefined, orgId: string) {
@@ -105,7 +118,7 @@
 <section class="w-full md:mx-auto md:max-w-6xl">
   <div class="px-2 py-2 md:px-5 md:py-10">
     <div class="mb-5 flex items-center justify-between">
-      <h1 class="text-2xl font-bold md:text-3xl dark:text-white">{$t('courses.heading')}</h1>
+      <h1 class="text-2xl md:text-3xl dark:text-white">{$t('courses.heading')}</h1>
       {#if $isMobile}
         <PrimaryButton isDisabled={!$isOrgAdmin} onClick={openNewCourseModal}>
           <PlusIcon size={16} />
@@ -120,22 +133,22 @@
       {/if}
     </div>
     <div class="mb-5 flex flex-row-reverse">
-      <div class="filter-containter flex items-end justify-start">
-        <Search
-          placeholder={$t('courses.search_placeholder')}
-          bind:value={searchValue}
-          searchClass="mr-2"
-          class=" bg-gray-100 dark:bg-neutral-800"
-        />
-        <Dropdown
-          class="h-full min-w-[150px]"
-          bind:selectedId
-          items={[
-            { id: '0', text: $t('courses.course_filter.date_created') },
-            { id: '1', text: $t('courses.course_filter.published') },
-            { id: '2', text: $t('courses.course_filter.lessons') }
-          ]}
-        />
+      <div class="filter-containter flex items-end justify-start gap-2">
+        <div class="relative">
+          <Input type="text" placeholder={$t('courses.search_placeholder')} bind:value={searchValue} class="pl-9" />
+
+          <SearchIcon class="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+        </div>
+        <Select.Root type="single" bind:value={selectedId}>
+          <Select.Trigger class="min-w-[150px]">
+            <p>{selectedId ? selectedLabel : filterOptions[0].label}</p>
+          </Select.Trigger>
+          <Select.Content>
+            {#each filterOptions as option}
+              <Select.Item value={option.value}>{option.label}</Select.Item>
+            {/each}
+          </Select.Content>
+        </Select.Root>
         {#if $courseMetaDeta.view === 'list'}
           <IconButton onClick={() => setViewPreference('grid')}>
             <GridIcon size={16} />
@@ -152,10 +165,3 @@
     <Courses courses={filteredCourses} />
   </div>
 </section>
-
-<style>
-  .filter-containter :global(.bx--dropdown) {
-    max-height: unset;
-    height: 100%;
-  }
-</style>