feat: migrate dashboard to svelte 5 (#577)

* chore: migration to SvelteKit 2

* stage 1: migrate to svelte 5 and fix rerendering issues

* stage 2: fix more $: reactivity across dashboard

* fix merge conflicts

* chore: migrate code in main to svelte 5

* chore: update preventDefault

* chore: simplify tsconfig and remove unused mobileMenuRef in MobileMenu.svelte

* chore: enforce .ts across dashboard

* rename from classroomio-com to website

* stage-3: Replace carbon icon svelte with lucide icon

* update lock file

* chore: finish icon replacement

* fix: settings and setup page multiple rerender

* stage 3: More icon and rerendering fixes

* feat: checkpoint

* feat: update editor

* [not working] connect everything with ui build

* storybook + ui + dashboard all working independently

* add bg-black to +page.svelte

* feat: add editor to storybook

* chore: animate lucid icons (#590)

* v1 animations

* feat: change some course navigation icons & animate org navigation icons

* chore: change settings icon

* chore: use css instead of js for hover

* rename animations

---------

Co-authored-by: tunny17 <[email protected]>

* chore: update path to node_modules types in api tsconfig

* fix: update import path for DropdownMenu component

* fix: add rollupOptions to build configuration in vite.config.ts

* fix: remove rollupOptions from build configuration and add @floating-ui/dom dependency

* install

---------

Co-authored-by: tunny17 <[email protected]>

apps/dashboard/src/routes/+layout.svelte

@@ -13,7 +13,13 @@
   // import PageLoadProgressBar from '$lib/components/Progress/PageLoadProgressBar.svelte';
   import Snackbar from '$lib/components/Snackbar/index.svelte';
   import UpgradeModal from '$lib/components/Upgrade/Modal.svelte';
-  import { isCoursesPage, isLMSPage, isOrgPage, toggleBodyByMode } from '$lib/utils/functions/app';
+  import {
+    isCoursesPage,
+    isLMSPage,
+    isOrgPage
+
+    // toggleBodyByMode
+  } from '$lib/utils/functions/app';
   import { getProfile, setupAnalytics } from '$lib/utils/functions/appSetup';
   import hideNavByRoute from '$lib/utils/functions/routes/hideNavByRoute';
   import { getSupabase } from '$lib/utils/functions/supabase';
@@ -28,7 +34,9 @@
   import { onMount } from 'svelte';
   import { MetaTags } from 'svelte-meta-tags';
 
-  import '../app.postcss';
+  import { ModeWatcher } from '@cio/ui/base/dark-mode';
+
+  import '../app.css';
 
   let { data, children } = $props();
 
@@ -52,8 +60,8 @@
 
     if (browser) {
       // Update theme - dark or light mode
-      $globalStore.isDark = localStorage.getItem('mode') === 'dark';
-      toggleBodyByMode($globalStore.isDark);
+      // $globalStore.isDark = localStorage.getItem('mode') === 'dark';
+      // toggleBodyByMode($globalStore.isDark);
 
       if (data.isOrgSite && data.org?.theme) {
         setTheme(data.org?.theme);
@@ -116,9 +124,11 @@
 
 <svelte:window onresize={handleResize} />
 
+<ModeWatcher />
+
 <MetaTags {...metaTags} />
 
-<Theme bind:theme={carbonTheme} />
+<!-- <Theme bind:theme={carbonTheme} /> -->
 
 <UpgradeModal />