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 <[email protected]>

* 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 <[email protected]>

ARCHITECHTURE.md

@@ -1495,7 +1495,7 @@ Replace Supabase calls with API class method:
 **After (API Route):**
 ```typescript
 <script lang="ts">
-  import { orgApi } from '$lib/features/org/api/org.svelte';
+  import { orgApi } from '$features/org/api/org.svelte';
   import { goto } from '$app/navigation';
 
   async function createNewOrg() {
@@ -1941,7 +1941,7 @@ export class OrgApiServer {
 
 ```typescript
 // apps/dashboard/src/routes/invite/t/[hash]/+layout.server.ts
-import { OrgApiServer } from '$lib/features/org/api/org.server';
+import { OrgApiServer } from '$features/org/api/org.server';
 
 export const load = async ({ params }) => {
   // Use static method from .server.ts class
@@ -1995,7 +1995,7 @@ export class OrgPlanApiServer {
 
 ```typescript
 // apps/dashboard/src/routes/api/polar/webhook/+server.ts
-import { OrgPlanApiServer } from '$lib/features/org/api/org-plan.server';
+import { OrgPlanApiServer } from '$features/org/api/org-plan.server';
 
 // Use static method from .server.ts class
 const result = await OrgPlanApiServer.createOrgPlan(planData);
@@ -2420,3 +2420,106 @@ Frontend Response (maps errors to translations if validation failed)
 ```
 
 By following these patterns, our API remains **consistent**, **secure**, **testable**, and **ready for public consumption**.
+
+---
+
+## Refactoring Components to Features/UI
+
+When moving components from `apps/dashboard/src/lib/components/` to `apps/dashboard/src/lib/features/ui/`, follow this workflow:
+
+### Step 1: Determine Component Structure
+
+**Single-file components**: Move directly to `features/ui/` with kebab-case naming:
+- `components/CodeSnippet/index.svelte` → `features/ui/code-snippet.svelte`
+
+**Components with related files** (stores, utils, etc.): Create a folder matching the component name:
+- `components/Confetti/index.svelte` + `store.ts` → `features/ui/confetti/confetti.svelte` + `confetti-store.ts`
+- `components/UploadWidget/index.svelte` + `utils.ts` → `features/ui/upload-widget/upload-widget.svelte` + `utils.ts`
+
+**Naming Convention**:
+- ✅ File name matches folder name: `confetti/confetti.svelte`, `upload-widget/upload-widget.svelte`
+- ❌ Don't use `index.svelte` as the root file - always name it the same as the folder
+
+### Step 2: Move Files
+
+1. Create the new file(s) in `features/ui/` (or subfolder if needed)
+2. Update internal imports (e.g., `./store` → `./confetti-store` within the folder)
+3. Copy component code to new location
+
+### Step 3: Update Exports
+
+Add export to `apps/dashboard/src/lib/features/ui/index.ts`:
+```typescript
+export { default as ComponentName } from './component-name.svelte';
+// or for folder-based components:
+export { default as ComponentName } from './component-name/component-name.svelte';
+```
+
+Keep exports alphabetically sorted.
+
+### Step 4: Update All Imports
+
+Find all usages:
+```bash
+grep -r "components/OldComponent" apps/dashboard/src
+```
+
+Replace imports:
+- **From**: `import Component from '$lib/components/OldComponent/index.svelte';`
+- **To**: `import { Component } from '$features/ui';`
+
+For store/utils imports:
+- **From**: `import { store } from '$lib/components/OldComponent/store';`
+- **To**: `import { store } from '$features/ui/component-name/store';`
+
+### Step 5: Merge Duplicate Imports
+
+After updating imports, check for duplicate imports from the same source and merge them:
+```typescript
+// Before
+import { Confetti } from '$features/ui';
+import { ComingSoon } from '$features/ui';
+
+// After
+import { Confetti, ComingSoon } from '$features/ui';
+```
+
+### Step 6: Clean Up
+
+1. Delete old component files
+2. Remove empty folders: `rmdir apps/dashboard/src/lib/components/OldComponent`
+3. Verify no remaining references: `grep -r "components/OldComponent" apps/dashboard/src`
+4. Run linter to check for errors
+
+### Step 7: Verify
+
+- ✅ No linter errors
+- ✅ No remaining references to old path
+- ✅ All imports use the new path
+- ✅ Component exports correctly from `features/ui/index.ts`
+- ✅ Related files (stores/utils) are properly organized
+
+### Example: Complete Refactoring
+
+**Before**:
+```
+apps/dashboard/src/lib/components/
+  └── Confetti/
+      ├── index.svelte
+      └── store.ts
+```
+
+**After**:
+```
+apps/dashboard/src/lib/features/ui/
+  ├── confetti/
+  │   ├── confetti.svelte
+  │   └── store.ts
+  └── index.ts (exports Confetti)
+```
+
+**Import changes**:
+- Component: `import { Confetti } from '$features/ui';`
+- Store: `import { toggleConfetti } from '$features/ui/confetti/store';`
+
+This refactoring centralizes UI components in a single location, making them easier to discover, maintain, and reuse across the application.