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/table/index.ts

@@ -1,28 +1,28 @@
-import Root from "./table.svelte";
-import Body from "./table-body.svelte";
-import Caption from "./table-caption.svelte";
-import Cell from "./table-cell.svelte";
-import Footer from "./table-footer.svelte";
-import Head from "./table-head.svelte";
-import Header from "./table-header.svelte";
-import Row from "./table-row.svelte";
+import Root from './table.svelte';
+import Body from './table-body.svelte';
+import Caption from './table-caption.svelte';
+import Cell from './table-cell.svelte';
+import Footer from './table-footer.svelte';
+import Head from './table-head.svelte';
+import Header from './table-header.svelte';
+import Row from './table-row.svelte';
 
 export {
-	Root,
-	Body,
-	Caption,
-	Cell,
-	Footer,
-	Head,
-	Header,
-	Row,
-	//
-	Root as Table,
-	Body as TableBody,
-	Caption as TableCaption,
-	Cell as TableCell,
-	Footer as TableFooter,
-	Head as TableHead,
-	Header as TableHeader,
-	Row as TableRow,
+  Root,
+  Body,
+  Caption,
+  Cell,
+  Footer,
+  Head,
+  Header,
+  Row,
+  //
+  Root as Table,
+  Body as TableBody,
+  Caption as TableCaption,
+  Cell as TableCell,
+  Footer as TableFooter,
+  Head as TableHead,
+  Header as TableHeader,
+  Row as TableRow
 };

packages/ui/src/base/table/table-body.svelte

@@ -10,6 +10,6 @@
   }: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<tbody bind:this={ref} data-slot="table-body" class={cn('[&_tr:last-child]:border-0', className)} {...restProps}>
+<tbody bind:this={ref} data-slot="table-body" class={cn('ui:[&_tr:last-child]:border-0', className)} {...restProps}>
   {@render children?.()}
 </tbody>

packages/ui/src/base/table/table-caption.svelte

@@ -13,7 +13,7 @@
 <caption
   bind:this={ref}
   data-slot="table-caption"
-  class={cn('text-muted-foreground mt-4 text-sm', className)}
+  class={cn('ui:text-muted-foreground ui:mt-4 ui:text-sm', className)}
   {...restProps}
 >
   {@render children?.()}

packages/ui/src/base/table/table-cell.svelte

@@ -8,7 +8,7 @@
 <td
   bind:this={ref}
   data-slot="table-cell"
-  class={cn('whitespace-nowrap bg-clip-padding p-2 align-middle [&:has([role=checkbox])]:pr-0', className)}
+  class={cn('ui:whitespace-nowrap ui:bg-clip-padding ui:p-2 ui:[&:has([role=checkbox])]:pr-0 align-middle', className)}
   {...restProps}
 >
   {@render children?.()}

packages/ui/src/base/table/table-footer.svelte

@@ -13,7 +13,7 @@
 <tfoot
   bind:this={ref}
   data-slot="table-footer"
-  class={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+  class={cn('ui:bg-muted/50 ui:border-t ui:font-medium ui:[&>tr]:last:border-b-0', className)}
   {...restProps}
 >
   {@render children?.()}

packages/ui/src/base/table/table-head.svelte

@@ -9,7 +9,7 @@
   bind:this={ref}
   data-slot="table-head"
   class={cn(
-    'text-foreground h-10 whitespace-nowrap bg-clip-padding px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0',
+    'ui:text-foreground ui:h-10 ui:whitespace-nowrap ui:bg-clip-padding ui:px-2 ui:text-left ui:font-medium ui:[&:has([role=checkbox])]:pr-0 align-middle',
     className
   )}
   {...restProps}

packages/ui/src/base/table/table-header.svelte

@@ -10,6 +10,6 @@
   }: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<thead bind:this={ref} data-slot="table-header" class={cn('[&_tr]:border-b', className)} {...restProps}>
+<thead bind:this={ref} data-slot="table-header" class={cn('ui:[&_tr]:border-b', className)} {...restProps}>
   {@render children?.()}
 </thead>

packages/ui/src/base/table/table-row.svelte

@@ -14,7 +14,7 @@
   bind:this={ref}
   data-slot="table-row"
   class={cn(
-    'hover:[&,&>svelte-css-wrapper]:[&>th,td]:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+    'ui:hover:[&,&>svelte-css-wrapper]:[&>th,td]:bg-muted/50 ui:data-[state=selected]:bg-muted ui:border-b ui:transition-colors',
     className
   )}
   {...restProps}

packages/ui/src/base/table/table.svelte

@@ -10,8 +10,8 @@
   }: WithElementRef<HTMLTableAttributes> = $props();
 </script>
 
-<div data-slot="table-container" class="relative w-full overflow-x-auto">
-  <table bind:this={ref} data-slot="table" class={cn('w-full caption-bottom text-sm', className)} {...restProps}>
+<div data-slot="table-container" class="ui:relative ui:w-full ui:overflow-x-auto">
+  <table bind:this={ref} data-slot="table" class={cn('ui:w-full ui:text-sm caption-bottom', className)} {...restProps}>
     {@render children?.()}
   </table>
 </div>