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/lib/components/Org/SideBar.svelte

@@ -5,7 +5,7 @@
   import LibraryBigIcon from '@lucide/svelte/icons/library-big';
   import UsersIcon from '@lucide/svelte/icons/users';
   import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
-  import SettingsIcon from '@lucide/svelte/icons/settings';
+  import Settings2 from '@lucide/svelte/icons/settings-2';
   import MessageSquareMoreIcon from '@lucide/svelte/icons/message-square-more';
   import BadgeHelpIcon from '@lucide/svelte/icons/badge-help';
   import Dice6Icon from '@lucide/svelte/icons/dice-6';
@@ -98,24 +98,24 @@
             {#if menuItem.show}
               <a href="{$currentOrgPath}{menuItem.path}" class="text-black no-underline" onclick={toggleSidebar}>
                 <li
-                  class="mb-1 flex items-center gap-2.5 px-2.5 py-2 {NavClasses.item} {menuItem.isActive
+                  class="group mb-1 flex items-center gap-2.5 px-2.5 py-2 {NavClasses.item} {menuItem.isActive
                     ? NavClasses.active
                     : 'dark:text-white'}"
                 >
                   {#if menuItem.path === ''}
-                    <LayoutDashboardIcon size={16} />
+                    <LayoutDashboardIcon size={16} class="group-hover:animate-gather" />
                   {:else if menuItem.path === '/courses'}
-                    <LibraryBigIcon size={16} />
+                    <LibraryBigIcon size={16} class="group-hover:animate-library-expand" />
                   {:else if menuItem.path === '/site'}
-                    <LayoutTemplateIcon size={16} />
+                    <LayoutTemplateIcon size={16} class="group-hover:animate-template-morph" />
                   {:else if menuItem.path === '/community'}
-                    <MessageSquareMoreIcon size={16} />
+                    <MessageSquareMoreIcon size={16} class="group-hover:animate-ripple" />
                   {:else if menuItem.path === '/quiz'}
-                    <Dice6Icon size={16} />
+                    <Dice6Icon size={16} class="group-hover:animate-roll" />
                   {:else if menuItem.path === '/audience'}
-                    <UsersIcon size={16} />
+                    <UsersIcon size={16} class="group-hover:animate-gather" />
                   {:else if menuItem.path === '/setup'}
-                    <SettingsIcon size={16} />
+                    <Settings2 size={16} class="group-hover:animate-setup-configure" />
                   {/if}
                   <p class="text-sm font-medium">{menuItem.label}</p>
                 </li>