feat: add better provider support, icons, regen, and a lot more

app/components/Sidenav/Header.vue

@@ -1,23 +1,31 @@
 <script setup lang="ts">
 import type { DropdownItem } from '~/types/dropdown';
-import { authClient } from '~~/lib/auth-client';
+import { assert } from '~~/utils/assert';
 
 const triplit = useTriplitClient();
-const { user } = await useAuth();
+const { user, signOut } = useAuth();
+
+// to prevent the user details from going blank for a 
+// single frame when the user logs out (yes I am that
+// particular)
+const cachedUser = ref(user.value);
+
+watch(user, () => {
+    if (user.value === null) return;
+
+    cachedUser.value = user.value;
+})
 
 const { toggle: toggleSettings } = useSettings();
 
-const hovering = defineModel<boolean>({ required: true });
+const { isHovered } = useSidenavContext();
 
 const profileOpen = ref(false);
 
 const handleLogout = async () => {
-    await authClient.signOut();
-    if ('endSession' in triplit) {
-        await triplit.endSession();
-    }
-
-    clearNuxtData();
+    await signOut();
+    assert('disconnect' in triplit);
+    triplit.disconnect();
 
     await navigateTo('/auth/login');
 };
@@ -43,15 +51,15 @@ const profileItems: DropdownItem[] = [
                     @click="toggle">
                     <div
                         :class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--color-neutral)] flex items-center justify-center', user?.image ? '' : 'border border-[var(--color-highlight-high)]']">
-                        <img v-if="user?.image" :src="user.image" class="w-full h-full object-cover" />
+                        <img v-if="cachedUser?.image" :src="cachedUser.image" class="w-full h-full object-cover" />
                         <Icon v-else name="mynaui:user" class="w-4 h-4 text-[var(--color-muted)]" />
                     </div>
                     <span
                         class="text-sm font-medium text-ellipsis overflow-hidden text-[var(--color-text)] whitespace-nowrap">{{
-                            user!.name
+                            cachedUser?.name
                         }}</span>
-                    <div :class="['flex-shrink-0 w-4 h-4 text-[var(--color-muted)] transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] overflow-hidden transform-origin-center-left',
-                        hovering ? 'opacity-100 scale-100' : 'opacity-0 scale-x-0 scale-y-90'
+                    <div :class="['transform-origin-left-center flex-shrink-0 w-4 h-4 text-[var(--color-muted)] transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] overflow-hidden transform-origin-center-left',
+                        isHovered ? 'opacity-100 scale-100' : 'opacity-0 scale-40'
                     ]">
                         <Icon class="text-4" name="mynaui:chevron-down" />
                     </div>