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/RoleBasedSecurity/index.svelte

@@ -1,38 +1,42 @@
 <script lang="ts">
   import { profile } from '$lib/utils/store/user';
   import { group } from '../Course/store';
-  import type { GroupPerson } from '$lib/utils/types';
   import { isOrgAdmin } from '$lib/utils/store/org';
 
-  export let allowedRoles: number[] = [];
-  export let onDenied = () => {};
-  // Since orgAdmin can see all, we need a way to show the content only to students
-  export let onlyStudent = false;
+  interface Props {
+    allowedRoles?: number[];
+    onDenied?: any;
+    // Since orgAdmin can see all, we need a way to show the content only to students
+    onlyStudent?: boolean;
+    children?: import('svelte').Snippet;
+  }
 
-  let userRole: number = 0;
-  let show = false;
+  let { allowedRoles = [], onDenied = () => {}, onlyStudent = false, children }: Props = $props();
+
+  const userRole: number = $derived.by(() => {
+    const user = $group.people.find((person) => person.profile_id === $profile.id);
+    return user ? user.role_id : 0;
+  });
+
+  const show = $derived.by(() => {
+    if (onlyStudent) {
+      return isAllowed(userRole);
+    } else {
+      return isAllowed(userRole) || !!$isOrgAdmin;
+    }
+  });
 
   function isAllowed(userRole) {
     return allowedRoles.includes(userRole);
   }
 
-  $: {
-    const user: GroupPerson = $group.people.find((person) => person.profile_id === $profile.id)!;
-
-    userRole = user ? user.role_id : userRole;
-
+  $effect(() => {
     if (!$isOrgAdmin && $group.people.length && !isAllowed(userRole)) {
       onDenied();
     }
-  }
-
-  $: if (onlyStudent) {
-    show = isAllowed(userRole);
-  } else {
-    show = isAllowed(userRole) || $isOrgAdmin;
-  }
+  });
 </script>
 
 {#if show}
-  <slot />
+  {@render children?.()}
 {/if}