feat: setup drizzle (#594)

* 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: setup drizzle and better auth

* fix: onboarding validation error showing translation key #586 (#593)

* fix: onboarding validation error showing translation key #586

* fix: remove debug log for profile update errors

* chore: add a clean command

* fix: remove message from email verification response

apps/dashboard/src/lib/components/Navigation/index.svelte

@@ -10,19 +10,29 @@
   import AuthButtons from './AuthButtons.svelte';
   import MobileMenu from './MobileMenu.svelte';
 
-  export let disableSignup = false;
-  export let logo: string | undefined = undefined;
-  export let orgName: string | undefined = undefined;
-  export let isOrgSite = false;
-  export let backgroundColor = 'bg-white dark:bg-black';
-  export let customLinks: TCustomLinks | undefined = undefined;
+  interface Props {
+    disableSignup?: boolean;
+    logo?: string | undefined;
+    orgName?: string | undefined;
+    isOrgSite?: boolean;
+    backgroundColor?: string;
+    customLinks?: TCustomLinks | undefined;
+  }
+
+  let {
+    disableSignup = false,
+    logo = undefined,
+    orgName = undefined,
+    isOrgSite = false,
+    backgroundColor = 'bg-white dark:bg-black',
+    customLinks = undefined
+  }: Props = $props();
 
   let navClass = '';
-  let mobileMenuOpen = false;
+  let mobileMenuOpen = $state(false);
 
-  $: redirect = isCoursePage($page.url.pathname) ? `?redirect=${$page.url.pathname}` : '';
-  $: showLinks =
-    customLinks && customLinks.show && customLinks.links && customLinks.links.length > 0;
+  let redirect = $derived(isCoursePage($page.url.pathname) ? `?redirect=${$page.url.pathname}` : '');
+  let showLinks = $derived(customLinks && customLinks.show && customLinks.links && customLinks.links.length > 0);
 
   function toggleMobileMenu() {
     mobileMenuOpen = !mobileMenuOpen;
@@ -35,22 +45,17 @@
   <ul class="flex w-full items-center">
     <Logo {logo} {orgName} />
 
-    <span class="flex-grow" />
+    <span class="flex-grow"></span>
 
     <!-- Mobile Menu Button - Only show when custom links exist -->
     {#if isOrgSite && showLinks}
       <button
         class="mobile-menu-btn hover:text-primary-600 rounded-md p-2 text-gray-700 transition-colors duration-200 hover:bg-gray-100 lg:hidden"
-        on:click={toggleMobileMenu}
+        onclick={toggleMobileMenu}
         aria-label="Toggle mobile menu"
       >
         <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M4 6h16M4 12h16M4 18h16"
-          ></path>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
         </svg>
       </button>
     {/if}