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]>

packages/ui/src/base/dark-mode/dark-mode.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import SunIcon from '@lucide/svelte/icons/sun';
+  import MoonIcon from '@lucide/svelte/icons/moon';
+
+  import { resetMode, setMode } from 'mode-watcher';
+  import * as DropdownMenu from '$src/base/dropdown-menu';
+  import { buttonVariants } from '$src/base/button';
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger class={buttonVariants({ variant: 'outline', size: 'icon' })}>
+    <SunIcon class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 !transition-all dark:-rotate-90 dark:scale-0" />
+    <MoonIcon class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 !transition-all dark:rotate-0 dark:scale-100" />
+    <span class="sr-only">Toggle theme</span>
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content align="end">
+    <DropdownMenu.Item onclick={() => setMode('light')}>Light</DropdownMenu.Item>
+    <DropdownMenu.Item onclick={() => setMode('dark')}>Dark</DropdownMenu.Item>
+    <DropdownMenu.Item onclick={() => resetMode()}>System</DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>

packages/ui/src/base/dark-mode/index.ts

@@ -0,0 +1,3 @@
+export { default as ModeSwitcher } from './dark-mode.svelte';
+
+export * from 'mode-watcher';