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

@@ -1,24 +1,25 @@
 <script>
+  import { preventDefault } from '$lib/utils/functions/svelte';
+
   import { onMount } from 'svelte';
-  import FlowStreamReferenceIcon from 'carbon-icons-svelte/lib/FlowStreamReference.svelte';
-  import ChartClusterBarIcon from 'carbon-icons-svelte/lib/ChartClusterBar.svelte';
-  import MachineLearningModelIcon from 'carbon-icons-svelte/lib/MachineLearningModel.svelte';
+  import DoorOpenIcon from '@lucide/svelte/icons/door-open';
+  import ChartAreaIcon from '@lucide/svelte/icons/chart-area';
+  import BotIcon from '@lucide/svelte/icons/bot';
   import TextField from '$lib/components/Form/TextField.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { getSupabase } from '$lib/utils/functions/supabase';
   import { validateEmail } from '$lib/utils/functions/validateEmail';
 
-  let email = '';
-  let isAdding = false;
-  let success = false;
+  let email = $state('');
+  let isAdding = $state(false);
+  let success = $state(false);
 
   const supabase = getSupabase();
   const animate = 'transition delay-75 duration-300 ease-in-out';
   const areas = [
     {
       title: 'Access',
-      description:
-        'Quickly find any material you need to get your job done. ClassroomIO offers the All-in-on-platform'
+      description: 'Quickly find any material you need to get your job done. ClassroomIO offers the All-in-on-platform'
     },
     {
       title: 'Analytics',
@@ -56,7 +57,7 @@
   <title>ClassroomIO - The classroom software</title>
 </svelte:head>
 
-<div class="md:h-[93vh] w-screen flex items-center justify-center flex-col m-2 sm:m-0 font-sans">
+<div class="m-2 flex w-screen flex-col items-center justify-center font-sans sm:m-0 md:h-[93vh]">
   <!--
     <img
       src="/logo-192.png"
@@ -66,16 +67,14 @@
     />
   -->
   <div>
-    <h3 class="dark:text-white text-4xl text-center">
+    <h3 class="text-center text-4xl dark:text-white">
       Classroom<span class="text-primary-700">IO</span>
     </h3>
-    <p class="dark:text-white text-lg text-center">
-      The operating system for classroooms of the future 🚀🚀🚀.
-    </p>
+    <p class="text-center text-lg dark:text-white">The operating system for classroooms of the future 🚀🚀🚀.</p>
   </div>
 
-  <form on:submit|preventDefault={handleSubmit} class="my-4 hidden">
-    <div class="flex items-center flex-col sm:flex-row">
+  <form onsubmit={preventDefault(handleSubmit)} class="my-4 hidden">
+    <div class="flex flex-col items-center sm:flex-row">
       {#if success}
         <p class="dark:text-white">You have been added successfully. Thanks for joining.</p>
       {:else}
@@ -92,18 +91,18 @@
     </div>
   </form>
 
-  <div class="flex flex-col md:flex-row mt-4">
+  <div class="mt-4 flex flex-col md:flex-row">
     {#each areas as area, index}
       <div
-        class="max-w-[350px] m-3 bg-white dark:bg-black rounded-md py-3 px-12 active shadow-xl border-2 hover:border-primary-700 {animate}"
+        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="dark:text-white text-3xl">
+        <h3 class="text-3xl dark:text-white">
           {#if index === 0}
-            <FlowStreamReferenceIcon size={32} class="carbon-icon dark:text-white" />
+            <DoorOpenIcon size={16} />
           {:else if index === 1}
-            <ChartClusterBarIcon size={32} class="carbon-icon dark:text-white" />
+            <ChartAreaIcon size={16} />
           {:else if index === 2}
-            <MachineLearningModelIcon size={32} class="carbon-icon dark:text-white" />
+            <BotIcon size={16} />
           {/if}
           {area.title}
         </h3>