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

@@ -9,6 +9,7 @@
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { getSupabase } from '$lib/utils/functions/supabase';
   import { validateEmail } from '$lib/utils/functions/validateEmail';
+  import Edra from '$lib/components/Edra/EdraRoot.svelte';
 
   let email = $state('');
   let isAdding = $state(false);
@@ -57,7 +58,7 @@
   <title>ClassroomIO - The classroom software</title>
 </svelte:head>
 
-<div class="m-2 flex w-screen flex-col items-center justify-center font-sans sm:m-0 md:h-[93vh]">
+<div class="m-2 flex w-screen flex-col items-center justify-center font-sans sm:m-0 md:min-h-[93vh] dark:bg-black">
   <!--
     <img
       src="/logo-192.png"
@@ -73,8 +74,9 @@
     <p class="text-center text-lg dark:text-white">The operating system for classroooms of the future 🚀🚀🚀.</p>
   </div>
 
+  <Edra />
   <form onsubmit={preventDefault(handleSubmit)} class="my-4 hidden">
-    <div class="flex flex-col items-center sm:flex-row">
+    <div class="flex hidden flex-col items-center sm:flex-row">
       {#if success}
         <p class="dark:text-white">You have been added successfully. Thanks for joining.</p>
       {:else}
@@ -91,18 +93,18 @@
     </div>
   </form>
 
-  <div class="mt-4 flex flex-col md:flex-row">
+  <div class="mt-4 flex md:flex-row">
     {#each areas as area, index}
       <div
         class="active hover:border-primary-700 m-3 max-w-[350px] rounded-md border-2 bg-white px-12 py-3 shadow-xl dark:bg-black {animate}"
       >
         <h3 class="text-3xl dark:text-white">
           {#if index === 0}
-            <DoorOpenIcon size={16} />
+            <DoorOpenIcon size={30} />
           {:else if index === 1}
-            <ChartAreaIcon size={16} />
+            <ChartAreaIcon size={30} />
           {:else if index === 2}
-            <BotIcon size={16} />
+            <BotIcon size={30} />
           {/if}
           {area.title}
         </h3>