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/ui/src/base/breadcrumb/breadcrumb-ellipsis.svelte

@@ -15,9 +15,9 @@
   data-slot="breadcrumb-ellipsis"
   role="presentation"
   aria-hidden="true"
-  class={cn('flex size-9 items-center justify-center', className)}
+  class={cn('ui:flex ui:size-9 ui:items-center ui:justify-center', className)}
   {...restProps}
 >
-  <EllipsisIcon class="size-4" />
+  <EllipsisIcon class="ui:size-4" />
   <span class="sr-only">More</span>
 </span>

packages/ui/src/base/breadcrumb/breadcrumb-item.svelte

@@ -1,20 +1,15 @@
 <script lang="ts">
-	import type { HTMLLiAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from '../../tools';
+  import type { HTMLLiAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '../../tools';
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLLiAttributes> = $props();
+  let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLiAttributes> = $props();
 </script>
 
 <li
-	bind:this={ref}
-	data-slot="breadcrumb-item"
-	class={cn("inline-flex items-center gap-1.5", className)}
-	{...restProps}
+  bind:this={ref}
+  data-slot="breadcrumb-item"
+  class={cn('ui:inline-flex ui:items-center ui:gap-1.5', className)}
+  {...restProps}
 >
-	{@render children?.()}
+  {@render children?.()}
 </li>

packages/ui/src/base/breadcrumb/breadcrumb-link.svelte

@@ -16,7 +16,7 @@
 
   const attrs = $derived({
     'data-slot': 'breadcrumb-link',
-    class: cn('hover:text-foreground transition-colors', className),
+    class: cn('ui:hover:text-foreground ui:transition-colors', className),
     href,
     ...restProps
   });

packages/ui/src/base/breadcrumb/breadcrumb-list.svelte

@@ -8,7 +8,10 @@
 <ol
   bind:this={ref}
   data-slot="breadcrumb-list"
-  class={cn('text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5', className)}
+  class={cn(
+    'ui:text-muted-foreground ui:flex ui:flex-wrap ui:items-center ui:gap-1.5 ui:break-words ui:text-sm ui:sm:gap-2.5',
+    className
+  )}
   {...restProps}
 >
   {@render children?.()}

packages/ui/src/base/breadcrumb/breadcrumb-page.svelte

@@ -16,7 +16,7 @@
   role="link"
   aria-disabled="true"
   aria-current="page"
-  class={cn('text-foreground font-normal', className)}
+  class={cn('ui:text-foreground ui:font-normal', className)}
   {...restProps}
 >
   {@render children?.()}

packages/ui/src/base/breadcrumb/breadcrumb-separator.svelte

@@ -11,7 +11,7 @@
   data-slot="breadcrumb-separator"
   role="presentation"
   aria-hidden="true"
-  class={cn('[&>svg]:size-3.5', className)}
+  class={cn('ui:[&>svg]:size-3.5', className)}
   {...restProps}
 >
   {#if children}

packages/ui/src/base/breadcrumb/index.ts

@@ -1,25 +1,25 @@
-import Root from "./breadcrumb.svelte";
-import Ellipsis from "./breadcrumb-ellipsis.svelte";
-import Item from "./breadcrumb-item.svelte";
-import Separator from "./breadcrumb-separator.svelte";
-import Link from "./breadcrumb-link.svelte";
-import List from "./breadcrumb-list.svelte";
-import Page from "./breadcrumb-page.svelte";
+import Root from './breadcrumb.svelte';
+import Ellipsis from './breadcrumb-ellipsis.svelte';
+import Item from './breadcrumb-item.svelte';
+import Separator from './breadcrumb-separator.svelte';
+import Link from './breadcrumb-link.svelte';
+import List from './breadcrumb-list.svelte';
+import Page from './breadcrumb-page.svelte';
 
 export {
-	Root,
-	Ellipsis,
-	Item,
-	Separator,
-	Link,
-	List,
-	Page,
-	//
-	Root as Breadcrumb,
-	Ellipsis as BreadcrumbEllipsis,
-	Item as BreadcrumbItem,
-	Separator as BreadcrumbSeparator,
-	Link as BreadcrumbLink,
-	List as BreadcrumbList,
-	Page as BreadcrumbPage,
+  Root,
+  Ellipsis,
+  Item,
+  Separator,
+  Link,
+  List,
+  Page,
+  //
+  Root as Breadcrumb,
+  Ellipsis as BreadcrumbEllipsis,
+  Item as BreadcrumbItem,
+  Separator as BreadcrumbSeparator,
+  Link as BreadcrumbLink,
+  List as BreadcrumbList,
+  Page as BreadcrumbPage
 };