feat: migrate course UI from supabase (#615)

* chore: fix storybook build

* chore: implement theming

* community list not showing properly

* refactor: migrate Chip component to @cio/ui/custom/chip

- Updated imports for the Chip component across multiple files to use the new location in the @cio/ui package.
- Replaced the previous Chip implementation with a new version that utilizes a Badge for better styling and functionality.
- Adjusted related components to ensure consistent usage of the updated Chip component.

* fix: align course sidebar design to match organization design (#611)

* fix: align course sidebar design to match organization design

* feat: add hideSearch prop to AppHeader and update sidebar layout

---------

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

* refactor: replace PrimaryButton with Button component across multiple files

- Updated various components to use the new Button component from @cio/ui/base/button instead of the deprecated PrimaryButton.
- Ensured consistent button usage throughout the application for improved styling and functionality.
- Removed the PrimaryButton component and its associated constants from the codebase.

* refactor: standardize button and input usage across components

- Replaced instances of deprecated components such as TextField, TextArea, and IconButton with their updated counterparts (InputField, TextareaField, and updated IconButton).
- Ensured consistent event handling by changing `onClick` to `onclick` for better alignment with Svelte's event binding conventions.
- Removed unused components and streamlined imports to enhance code maintainability and readability.

* chore: themeing, course card, use $features

* refactor: centralize UI components and update modal implementations

- Refactored various components to centralize UI elements, improving discoverability and maintainability.
- Replaced deprecated modal components with the new Dialog component for consistent modal behavior across the application.
- Removed unused components and streamlined imports to enhance code clarity and reduce complexity.

* feat: add new documentation and refactor org and lms UI components

- Introduced new documentation files for Auth Flow, Breadcrumbs Refactoring, Page and Route Creation, and Route Page Setup to enhance developer onboarding and reference.
- Refactored various UI components, including the Course Sidebar and Lesson Modal, to improve layout and functionality.
- Removed deprecated components and streamlined imports for better maintainability.
- Updated translations across multiple languages to ensure consistency in user experience.

* refactor: update UI components and improve styling consistency

- Refactored various components to enhance styling consistency, including updates to button and text color classes.
- Removed deprecated components and streamlined imports for better maintainability.
- Replaced instances of PageBody with a more flexible Page component structure across multiple routes.
- Updated translations and UI elements to align with the new design system.
- Deleted unused components to reduce code complexity and improve clarity.

* update output.css

---------

Co-authored-by: Abdulmuizz Hamzat <103611443+canhamzacode@users.noreply.github.com>

apps/dashboard/src/lib/features/community/components/ask-community-button.svelte

@@ -6,8 +6,10 @@
   import { isMobileStore } from '@cio/ui/hooks/is-mobile.svelte';
   import PlusIcon from '@lucide/svelte/icons/plus';
 
+  let { isLMS = false }: { isLMS?: boolean } = $props();
+
   function askCommunity() {
-    goto(`${$currentOrgPath}/community/ask`);
+    goto(`${isLMS ? '/lms/community/ask' : `${$currentOrgPath}/community/ask`}`);
   }
 </script>
 

apps/dashboard/src/lib/features/community/components/delete-modal.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import Modal from '$lib/components/Modal/index.svelte';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import * as Dialog from '@cio/ui/base/dialog';
+  import { Button } from '@cio/ui/base/button';
   import { t } from '$lib/utils/functions/translations';
 
   interface Props {
@@ -21,34 +20,37 @@
   }: Props = $props();
 </script>
 
-<Modal
-  onClose={() => (open = false)}
+<Dialog.Root
   bind:open
-  width="w-96"
-  modalHeading="{$t('community.delete.title')} {isQuestion
-    ? $t('community.delete.question')
-    : $t('community.delete.comment')}"
 >
-  <div>
+  <Dialog.Content class="w-96">
+    <Dialog.Header>
+      <Dialog.Title>
+        {$t('community.delete.title')} {isQuestion
+          ? $t('community.delete.question')
+          : $t('community.delete.comment')}
+      </Dialog.Title>
+    </Dialog.Header>
+    <div>
     <p class="mt-0 text-base dark:text-white">
       {$t('community.delete.sure')}
       {isQuestion ? $t('community.delete.question') : $t('community.delete.comment')}?
     </p>
 
     <div class="mt-5 flex items-center justify-between">
-      <PrimaryButton
-        className="px-6 py-3"
-        variant={VARIANTS.OUTLINED}
-        label={$t('community.delete.no')}
-        onClick={onCancel}
-      />
-      <PrimaryButton
-        className="px-6 py-3"
-        variant={VARIANTS.CONTAINED}
-        label={$t('community.delete.yes')}
-        onClick={onDelete}
-        isLoading={isDeleting}
-      />
+      <Button
+        variant="outline"
+        onclick={onCancel}
+      >
+        {$t('community.delete.no')}
+      </Button>
+      <Button
+        onclick={onDelete}
+        loading={isDeleting}
+      >
+        {$t('community.delete.yes')}
+      </Button>
     </div>
   </div>
-</Modal>
+  </Dialog.Content>
+</Dialog.Root>

apps/dashboard/src/lib/features/community/pages/community.svelte

@@ -7,7 +7,7 @@
 
   import { profile } from '$lib/utils/store/user';
   import { t } from '$lib/utils/functions/translations';
-  import { courses } from '$lib/features/course/utils/store';
+  import { courses } from '$features/course/utils/store';
   import { calDateDiff } from '$lib/utils/functions/date';
   import { supabase } from '$lib/utils/functions/supabase';
   import { fetchCourses } from '$lib/utils/services/courses';
@@ -15,10 +15,10 @@
   import MessageSquareMoreIcon from '@lucide/svelte/icons/message-square-more';
 
   import { CommunityListLoader } from '../components';
-  import Vote from '$lib/components/Vote/index.svelte';
-  import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
+  import { Vote } from '$features/ui';
   import { Empty } from '@cio/ui/custom/empty';
   import * as Page from '@cio/ui/base/page';
+  import * as Item from '@cio/ui/base/item';
 
   import { AskCommunityButton } from '../components';
 
@@ -133,33 +133,32 @@
   <CommunityListLoader />
 {:else}
   {#each filteredDiscussions as discussion}
-    <div
-      class="border-c m-auto my-4 flex flex-wrap items-center justify-center rounded bg-gray-100 lg:justify-start dark:bg-neutral-800"
-    >
-      <div class="border-bottom-c flex w-full p-3">
-        <Vote value={discussion.votes} />
-        <div class="flex flex-col gap-y-0.5 text-sm">
-          <h4 class="mt-0">
-            <a class="text-black dark:text-white" href="{isLMS ? '/lms' : $currentOrgPath}/community/{discussion.slug}">
+    <Item.Root variant="outline">
+      {#snippet child({ props })}
+        <a href="{isLMS ? '/lms' : $currentOrgPath}/community/{discussion.slug}" {...props}>
+          <Vote value={discussion.votes} />
+          <Item.Content class="gap-y-0.5">
+            <Item.Title class="mt-0">
               {discussion.title}
+            </Item.Title>
+            <Item.Description>
+              {discussion.author} asked {discussion.createdAt}
+            </Item.Description>
+            <a class="m-0" href="/courses/{discussion.courseId}" onclick={(e) => e.stopPropagation()}>
+              <span class="text-muted-foreground p-0 text-xs">
+                #{discussion.courseTitle}
+              </span>
             </a>
-          </h4>
-          <span class="text-gray-600 dark:text-white">
-            {discussion.author} asked {discussion.createdAt}
-          </span>
-          <a class="m-0" href="/courses/{discussion.courseId}">
-            <span class="text-primary-200 text-primary-700 p-0 text-xs dark:text-black">
-              #{discussion.courseTitle}
-            </span>
-          </a>
-        </div>
-        <div class="flex-grow"></div>
-        <div class="flex items-center">
-          <MessageCirclePlusIcon size={16} />
-          <span class="ml-1">{discussion.comments}</span>
-        </div>
-      </div>
-    </div>
+          </Item.Content>
+          <Item.Actions>
+            <div class="flex items-center">
+              <MessageCirclePlusIcon size={16} />
+              <span class="ml-1">{discussion.comments}</span>
+            </div>
+          </Item.Actions>
+        </a>
+      {/snippet}
+    </Item.Root>
   {:else}
     <Empty
       title={$t('community.no_question')}
@@ -171,13 +170,3 @@
     </Empty>
   {/each}
 {/if}
-
-<style>
-  h4 {
-    font-size: 16px;
-    font-weight: 900;
-    word-break: break-word;
-    overflow-wrap: break-word;
-    margin: 0;
-  }
-</style>

apps/dashboard/src/lib/features/community/utils/store.ts

@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store';
+
+export interface CurrentCommunityQuestion {
+  title: string | null;
+}
+
+export const currentCommunityQuestion = writable<CurrentCommunityQuestion>({
+  title: null
+});
+