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/Page/Nav.svelte

@@ -1,21 +1,37 @@
-<script>
+<script lang="ts">
   import { t } from '$lib/utils/functions/translations';
   import Chip from '../Chip/index.svelte';
   import TextField from '../Form/TextField.svelte';
 
-  export let title = '';
-  export let overidableStyle = '';
-  export let navItems = [];
-  export let disableSticky = false;
-  export let isTitleEditable = false;
-  export let onEditComplete = () => {};
-  export let paddingClass = 'px-2';
-  export let hideOnMobile = false;
+  interface Props {
+    title?: string;
+    overidableStyle?: string;
+    navItems?: any;
+    disableSticky?: boolean;
+    isTitleEditable?: boolean;
+    onEditComplete?: any;
+    paddingClass?: string;
+    hideOnMobile?: boolean;
+    image?: import('svelte').Snippet;
+    widget?: import('svelte').Snippet;
+  }
 
-  let dynamicRootClass = '';
-  let enterEditTitleMode = false;
+  let {
+    title = $bindable(''),
+    overidableStyle = '',
+    navItems = [],
+    disableSticky = false,
+    isTitleEditable = false,
+    onEditComplete = () => {},
+    paddingClass = 'px-2',
+    hideOnMobile = false,
+    image,
+    widget
+  }: Props = $props();
 
-  $: dynamicRootClass = Array.isArray(navItems) && navItems.length > 4 ? 'bring-down' : '';
+  let enterEditTitleMode = $state(false);
+
+  const dynamicRootClass = $derived(Array.isArray(navItems) && navItems.length > 4 ? 'bring-down' : '');
 </script>
 
 <div
@@ -32,10 +48,8 @@
     {#if !!title}
       {#if isTitleEditable}
         {#if !enterEditTitleMode}
-          <button class="w-full" on:click={() => (enterEditTitleMode = true)}>
-            <h4
-              class="editable-title overflow-ellipsis rounded-md px-3 hover:bg-gray-100 dark:bg-black"
-            >
+          <button class="w-full" onclick={() => (enterEditTitleMode = true)}>
+            <h4 class="editable-title overflow-ellipsis rounded-md px-3 hover:bg-gray-100 dark:bg-black">
               {title}
             </h4>
           </button>
@@ -54,12 +68,8 @@
         {/if}
       {:else}
         <div class="flex w-full items-center" {title}>
-          <slot name="image" />
-          <h4
-            class="{$$slots.image
-              ? 'ml-2'
-              : ''} truncate whitespace-nowrap text-lg font-semibold dark:text-white"
-          >
+          {@render image?.()}
+          <h4 class="{image ? 'ml-2' : ''} truncate whitespace-nowrap text-lg font-semibold dark:text-white">
             {title}
           </h4>
         </div>
@@ -83,12 +93,12 @@
               class="bg-primary-700 absolute bottom-0 left-0 h-1 transition-all duration-500 ease-in-out {item.isActive
                 ? 'w-full'
                 : 'w-0'}"
-            />
+            ></span>
           </a>
         {/each}
       </div>
     {/if}
-    <slot name="widget" />
+    {@render widget?.()}
   </div>
 </div>