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.

packages/course-app/src/template/src/lib/components/ui/_custom/SideBarExpandable.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import Folder from '$lib/components/ui/folder/folder.svelte';
   import type { Section } from '$lib/utils/types/course';
 
@@ -10,7 +10,7 @@
 
   let { sections, onFileClick }: Props = $props();
 
-  let [, courseSlug, sectionSlug, lessonSlug] = $derived($page.url.pathname.split('/').slice(1));
+  let [, courseSlug, sectionSlug, lessonSlug] = $derived(page.url.pathname.split('/').slice(1));
 
   let root = $derived(
     sections.map((section) => ({

packages/course-app/src/template/src/lib/components/ui/_custom/Transition.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   interface Props {
     children: import('svelte').Snippet;
@@ -9,10 +9,10 @@
   let { children }: Props = $props();
 </script>
 
-{#if $page.url.pathname.includes('/course/')}
+{#if page.url.pathname.includes('/course/')}
   {@render children?.()}
 {:else}
-  {#key $page.url.pathname}
+  {#key page.url.pathname}
     <div class="transition" in:fade>
       {@render children?.()}
     </div>

packages/course-app/src/template/src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import { homePage, sharedPage } from '$lib/utils/stores/pages';
   import { courses } from '$lib/utils/stores/course';
   import { getPageSection } from '$lib/utils/helpers/page';
@@ -43,13 +43,13 @@
 {#if $homePage.id}
   <main class="font-{import.meta.env.VITE_TEMPLATE}">
     <Transition>
-      {#if !$page.url.pathname.includes('course/')}
+      {#if !page.url.pathname.includes('course/')}
         <components.navigation />
       {/if}
 
       {@render children?.()}
 
-      {#if !$page.url.pathname.includes('course/')}
+      {#if !page.url.pathname.includes('course/')}
         <components.footer />
       {/if}
     </Transition>

packages/course-app/src/template/src/routes/course/[slug]/[section]/[filename]/+page.svelte

@@ -1,16 +1,13 @@
 <script lang="ts">
   import { blur } from 'svelte/transition';
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   let { data } = $props();
 </script>
 
-{#key $page.url.pathname}
-  <article
-    class="max-w-4xl mx-auto p-4 md:p-10 md:border border-[#D0D1C9] rounded-lg min-h-[90vh]"
-    in:blur
-  >
-    <p class="font-semibold text-2xl text-center mb-4 capitalize">
+{#key page.url.pathname}
+  <article class="mx-auto min-h-[90vh] max-w-4xl rounded-lg border-[#D0D1C9] p-4 md:border md:p-10" in:blur>
+    <p class="mb-4 text-center text-2xl font-semibold capitalize">
       {@html data.meta.title}
     </p>
     <div class="prose mt-2">