feat: migrate auth from supabase to better auth (#596)

* feat: add README for @cio/db package and remove existingAccounts.json

* load session, load profile and organization, add create profile hook

* chore: cache session request

The trick was passing all the cookies to the backend. Previously I was only passing the better-auth.session_token and not better-auth.session_data. Read about the difference here https://www.better-auth.com/docs/concepts/cookies#custom-cookies

* feat: login, logout, onboarding, verify email, reset password.

* feat: complete change email and email verification

* feat: standardise how we make rpc calls and create org endpoints

* fix ui errors

* fix: handle potential undefined customerId and standardize avatar URL property

* refactor: standardize custom domain handling and update telegram chat ID references

* chore: add tailwind prefix to @cio/ui

this fixed the media query issues because  @cio/ui classes were overriding this dashboard tailwind build

* chore: clean up org sidebar

* chore: persist mode state

* feat: implement order breadcrumbs

* chore: upgrade to better auth 1.4

* chore: address common auth flow bugs and setup app for others to setup locally.

apps/dashboard/src/routes/org/[slug]/courses/+page.svelte

@@ -115,53 +115,51 @@
   <title>Courses - ClassroomIO</title>
 </svelte:head>
 
-<section class="w-full md:mx-auto md:max-w-6xl">
-  <div class="px-2 py-2 md:px-5 md:py-10">
-    <div class="mb-5 flex items-center justify-between">
-      <h1 class="text-2xl md:text-3xl dark:text-white">{$t('courses.heading')}</h1>
-      {#if $isMobile}
-        <PrimaryButton isDisabled={!$isOrgAdmin} onClick={openNewCourseModal}>
-          <PlusIcon size={16} />
-        </PrimaryButton>
+<section class="w-full">
+  <div class="mb-5 flex items-center justify-between">
+    <h1 class="text-2xl md:text-3xl dark:text-white">{$t('courses.heading')}</h1>
+    {#if $isMobile}
+      <PrimaryButton isDisabled={!$isOrgAdmin} onClick={openNewCourseModal}>
+        <PlusIcon size={16} />
+      </PrimaryButton>
+    {:else}
+      <PrimaryButton
+        label={$t('courses.heading_button')}
+        variant={VARIANTS.CONTAINED_DARK}
+        isDisabled={!$isOrgAdmin}
+        onClick={openNewCourseModal}
+      />
+    {/if}
+  </div>
+  <div class="mb-5 flex flex-row-reverse">
+    <div class="filter-containter flex items-end justify-start gap-2">
+      <div class="relative">
+        <Input type="text" placeholder={$t('courses.search_placeholder')} bind:value={searchValue} class="pl-9" />
+
+        <SearchIcon class="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+      </div>
+      <Select.Root type="single" bind:value={selectedId}>
+        <Select.Trigger class="min-w-[150px]">
+          <p>{selectedId ? selectedLabel : filterOptions[0].label}</p>
+        </Select.Trigger>
+        <Select.Content>
+          {#each filterOptions as option}
+            <Select.Item value={option.value}>{option.label}</Select.Item>
+          {/each}
+        </Select.Content>
+      </Select.Root>
+      {#if $courseMetaDeta.view === 'list'}
+        <IconButton onClick={() => setViewPreference('grid')}>
+          <GridIcon size={16} />
+        </IconButton>
       {:else}
-        <PrimaryButton
-          label={$t('courses.heading_button')}
-          variant={VARIANTS.CONTAINED_DARK}
-          isDisabled={!$isOrgAdmin}
-          onClick={openNewCourseModal}
-        />
+        <IconButton onClick={() => setViewPreference('list')}>
+          <ListIcon size={16} />
+        </IconButton>
       {/if}
     </div>
-    <div class="mb-5 flex flex-row-reverse">
-      <div class="filter-containter flex items-end justify-start gap-2">
-        <div class="relative">
-          <Input type="text" placeholder={$t('courses.search_placeholder')} bind:value={searchValue} class="pl-9" />
-
-          <SearchIcon class="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2" />
-        </div>
-        <Select.Root type="single" bind:value={selectedId}>
-          <Select.Trigger class="min-w-[150px]">
-            <p>{selectedId ? selectedLabel : filterOptions[0].label}</p>
-          </Select.Trigger>
-          <Select.Content>
-            {#each filterOptions as option}
-              <Select.Item value={option.value}>{option.label}</Select.Item>
-            {/each}
-          </Select.Content>
-        </Select.Root>
-        {#if $courseMetaDeta.view === 'list'}
-          <IconButton onClick={() => setViewPreference('grid')}>
-            <GridIcon size={16} />
-          </IconButton>
-        {:else}
-          <IconButton onClick={() => setViewPreference('list')}>
-            <ListIcon size={16} />
-          </IconButton>
-        {/if}
-      </div>
-    </div>
-
-    <NewCourseModal />
-    <Courses courses={filteredCourses} />
   </div>
+
+  <NewCourseModal />
+  <Courses courses={filteredCourses} />
 </section>