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/lms/explore/+page.svelte

@@ -1,24 +1,35 @@
 <script lang="ts">
   import { onMount, untrack } from 'svelte';
-  import { Search, Dropdown } from 'carbon-components-svelte';
-  import { profile } from '$lib/utils/store/user';
-  import { fetchExploreCourses } from '$lib/utils/services/courses';
-  import Courses from '$lib/components/Courses/index.svelte';
+  import { Input } from '@cio/ui/base/input';
+  import * as Select from '@cio/ui/base/select';
+  import ListIcon from '@lucide/svelte/icons/list';
+  import GridIcon from '@lucide/svelte/icons/grid-2x2';
+  import SearchIcon from '@lucide/svelte/icons/search';
 
-  import { courseMetaDeta } from '$lib/components/Courses/store';
-  import { currentOrg } from '$lib/utils/store/org';
   import type { Course } from '$lib/utils/types';
+  import { profile } from '$lib/utils/store/user';
+  import { currentOrg } from '$lib/utils/store/org';
   import { t } from '$lib/utils/functions/translations';
+  import Courses from '$lib/components/Courses/index.svelte';
+  import { courseMetaDeta } from '$lib/components/Courses/store';
+  import { fetchExploreCourses } from '$lib/utils/services/courses';
 
   import { IconButton } from '$lib/components/IconButton';
-  import GridIcon from '@lucide/svelte/icons/grid-2x2';
-  import ListIcon from '@lucide/svelte/icons/list';
 
   let searchValue = $state('');
   let selectedId: string | undefined = $state();
   let hasFetched = false;
   let exploreCourseList: Course[] = $state([]);
 
+  const filterOptions = $derived([
+    { value: '0', label: $t('courses.course_filter.date_created') },
+    { value: '1', label: $t('courses.course_filter.lessons') }
+  ]);
+
+  const selectedLabel = $derived(
+    filterOptions.find((opt) => opt.value === selectedId)?.label || filterOptions[0].label
+  );
+
   const filteredExploreCourses: Course[] = $derived(filterCourses(searchValue, selectedId || '', exploreCourseList));
 
   function getCourses(userId?: string, orgId?: string) {
@@ -85,24 +96,23 @@
 
 <section class="w-full md:mx-auto md:max-w-6xl">
   <div class="px-2 py-2 md:px-5 md:py-10">
-    <h1 class="text-3xl font-bold dark:text-white">{$t('explore.heading')}</h1>
+    <h1 class="text-3xl dark:text-white">{$t('explore.heading')}</h1>
     <div class="flex flex-row-reverse">
-      <div class="filter-container 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"
-          size="xl"
-          bind:selectedId
-          items={[
-            { id: '0', text: $t('courses.course_filter.date_created') },
-            { id: '1', text: $t('courses.course_filter.lessons') }
-          ]}
-        />
+      <div class="filter-container flex items-end justify-start gap-2">
+        <div class="relative">
+          <SearchIcon class="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+          <Input type="text" placeholder={$t('courses.search_placeholder')} bind:value={searchValue} class="pl-9" />
+        </div>
+        <Select.Root type="single" bind:value={selectedId}>
+          <Select.Trigger class="min-w-[150px]">
+            <p>{selectedLabel}</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')}>