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.
2025-11-24 01:00:50 +01:00
parent 24741644d6
commit a3924100dd
567 changed files with 22364 additions and 13437 deletions
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { Button } from '@cio/ui/base/button';
+  import { MonitorIcon, SunIcon, MoonIcon } from '@lucide/svelte';
+  import { userPrefersMode, resetMode, setMode } from 'mode-watcher';
+
+  type UserPrefersMode = typeof userPrefersMode.current;
+
+  const themes: { mode: UserPrefersMode; icon: typeof MonitorIcon }[] = [
+    { mode: 'light', icon: SunIcon },
+    { mode: 'dark', icon: MoonIcon },
+    { mode: 'system', icon: MonitorIcon }
+  ];
+
+  const handleThemeChange = (newMode: UserPrefersMode) => {
+    if (newMode === 'light') {
+      setMode('light');
+    } else if (newMode === 'dark') {
+      setMode('dark');
+    } else {
+      resetMode();
+    }
+  };
+
+  $effect(() => {
+    console.log('mode.current', userPrefersMode.current);
+  });
+</script>
+
+<div class="flex items-center justify-between gap-8">
+  <p>Theme</p>
+
+  <div class="flex items-center gap-1 rounded-md backdrop-blur-sm">
+    {#each themes as theme (theme.mode)}
+      {@const isActive = userPrefersMode.current === theme.mode || userPrefersMode.current === undefined}
+      <Button
+        size="icon-sm"
+        variant={isActive ? 'outline' : 'ghost'}
+        class={['size-4 rounded-md p-1 transition-all duration-200', isActive && 'shadow-primary/20 shadow-lg']}
+        title={theme.mode}
+        onclick={() => handleThemeChange(theme.mode)}
+      >
+        <theme.icon class="size-4" />
+      </Button>
+    {/each}
+  </div>
+</div>